fix(mobile): Fixes thumbnail size with blur and alignment in video player (#7483)

* Clip the edges of the image filter

* Fixes thumbnail blur effect expanding outside of the image

* Fixes thumbs with video player and delayed loader

mobile/lib/modules/asset_viewer/views/gallery_viewer.dart

@@ -735,14 +735,21 @@ class GalleryViewerPage extends HookConsumerWidget {
                 isZoomed.value = state != PhotoViewScaleState.initial;
                 ref.read(showControlsProvider.notifier).show = !isZoomed.value;
               },
-              loadingBuilder: (context, event, index) => ImageFiltered(
+              loadingBuilder: (context, event, index) => ClipRect(
-                imageFilter: ui.ImageFilter.blur(
+                child: Stack(
-                  sigmaX: 1,
+                  fit: StackFit.expand,
-                  sigmaY: 1,
+                  children: [
-                ),
+                    BackdropFilter(
-                child: ImmichThumbnail(
+                      filter: ui.ImageFilter.blur(
-                  asset: asset(),
+                        sigmaX: 10,
-                  fit: BoxFit.contain,
+                        sigmaY: 10,
+                      ),
+                    ),
+                    ImmichThumbnail(
+                      asset: asset(),
+                      fit: BoxFit.contain,
+                    ),
+                  ],
                 ),
               ),
               pageController: controller,
@@ -818,7 +825,7 @@ class GalleryViewerPage extends HookConsumerWidget {
                       isMotionVideo: isPlayingMotionVideo.value,
                       placeholder: Image(
                         image: provider,
-                        fit: BoxFit.fitWidth,
+                        fit: BoxFit.contain,
                         height: context.height,
                         width: context.width,
                         alignment: Alignment.center,

mobile/lib/modules/asset_viewer/views/video_viewer_page.dart

@@ -40,7 +40,7 @@ class VideoViewerPage extends HookWidget {
       controlsSafeAreaMinimum: const EdgeInsets.only(
         bottom: 100,
       ),
-      placeholder: SizedBox.expand(child: placeholder),
+      placeholder: placeholder,
       showControls: showControls && !isMotionVideo,
       hideControlsTimer: hideControlsTimer,
       customControls: const VideoPlayerControls(),
@@ -58,9 +58,13 @@ class VideoViewerPage extends HookWidget {
             if (controller == null) {
               return Stack(
                 children: [
-                  if (placeholder != null) SizedBox.expand(child: placeholder!),
+                  if (placeholder != null) placeholder!,
-                  const DelayedLoadingIndicator(
+                  const Positioned.fill(
-                    fadeInDuration: Duration(milliseconds: 500),
+                    child: Center(
+                      child: DelayedLoadingIndicator(
+                        fadeInDuration: Duration(milliseconds: 500),
+                      ),
+                    ),
                   ),
                 ],
               );

mobile/lib/shared/ui/delayed_loading_indicator.dart

@@ -20,21 +20,24 @@ class DelayedLoadingIndicator extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return AnimatedSwitcher(
+    return FutureBuilder(
-      duration: fadeInDuration ?? Duration.zero,
+      future: Future.delayed(delay),
-      child: FutureBuilder(
+      builder: (context, snapshot) {
-        future: Future.delayed(delay),
+        late Widget c;
-        builder: (context, snapshot) {
+        if (snapshot.connectionState == ConnectionState.done) {
-          if (snapshot.connectionState == ConnectionState.done) {
+          c = child ??
-            return child ??
+              const ImmichLoadingIndicator(
-                const ImmichLoadingIndicator(
+                key: ValueKey('loading'),
-                  key: ValueKey('loading'),
+              );
-                );
+        } else {
-          }
+          c = Container(key: const ValueKey('hiding'));
+        }
 
-          return Container(key: const ValueKey('hiding'));
+        return AnimatedSwitcher(
-        },
+          duration: fadeInDuration ?? Duration.zero,
-      ),
+          child: c,
+        );
+      },
     );
   }
 }