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,15 +735,22 @@ class GalleryViewerPage extends HookConsumerWidget {
                 isZoomed.value = state != PhotoViewScaleState.initial;
                 ref.read(showControlsProvider.notifier).show = !isZoomed.value;
               },
-              loadingBuilder: (context, event, index) => ImageFiltered(
-                imageFilter: ui.ImageFilter.blur(
-                  sigmaX: 1,
-                  sigmaY: 1,
+              loadingBuilder: (context, event, index) => ClipRect(
+                child: Stack(
+                  fit: StackFit.expand,
+                  children: [
+                    BackdropFilter(
+                      filter: ui.ImageFilter.blur(
+                        sigmaX: 10,
+                        sigmaY: 10,
                       ),
-                child: ImmichThumbnail(
+                    ),
+                    ImmichThumbnail(
                       asset: asset(),
                       fit: BoxFit.contain,
                     ),
+                  ],
+                ),
               ),
               pageController: controller,
               scrollPhysics: isZoomed.value
@@ -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,10 +58,14 @@ class VideoViewerPage extends HookWidget {
             if (controller == null) {
               return Stack(
                 children: [
-                  if (placeholder != null) SizedBox.expand(child: placeholder!),
-                  const DelayedLoadingIndicator(
+                  if (placeholder != null) placeholder!,
+                  const Positioned.fill(
+                    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(
-      duration: fadeInDuration ?? Duration.zero,
-      child: FutureBuilder(
+    return FutureBuilder(
       future: Future.delayed(delay),
       builder: (context, snapshot) {
+        late Widget c;
         if (snapshot.connectionState == ConnectionState.done) {
-            return child ??
+          c = child ??
               const ImmichLoadingIndicator(
                 key: ValueKey('loading'),
               );
+        } else {
+          c = Container(key: const ValueKey('hiding'));
         }
 
-          return Container(key: const ValueKey('hiding'));
+        return AnimatedSwitcher(
+          duration: fadeInDuration ?? Duration.zero,
+          child: c,
+        );
       },
-      ),
     );
   }
 }