fix: incorrect asset viewer scale on image frame update

.github/workflows/test.yml

@@ -502,12 +502,7 @@ jobs:
       - name: Run e2e tests (web)
         env:
           CI: true
-        run: npx playwright test --project=chromium
-        if: ${{ !cancelled() }}
-      - name: Run ui tests (web)
-        env:
-          CI: true
-        run: npx playwright test --project=ui
+        run: npx playwright test
         if: ${{ !cancelled() }}
       - name: Archive test results
         uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0

e2e/playwright.config.ts

@@ -39,13 +39,13 @@ const config: PlaywrightTestConfig = {
       testMatch: /.*\.e2e-spec\.ts/,
       workers: 1,
     },
-    {
-      name: 'ui',
-      use: { ...devices['Desktop Chrome'] },
-      testMatch: /.*\.ui-spec\.ts/,
-      fullyParallel: true,
-      workers: process.env.CI ? 3 : Math.max(1, Math.round(cpus().length * 0.75) - 1),
-    },
+    // {
+    //   name: 'parallel tests',
+    //   use: { ...devices['Desktop Chrome'] },
+    //   testMatch: /.*\.parallel-e2e-spec\.ts/,
+    //   fullyParallel: true,
+    //   workers: process.env.CI ? 3 : Math.max(1, Math.round(cpus().length * 0.75) - 1),
+    // },
 
     // {
     //   name: 'firefox',

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -118,7 +118,6 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   bool dragInProgress = false;
   bool shouldPopOnDrag = false;
   bool assetReloadRequested = false;
-  double? initialScale;
   double previousExtent = _kBottomSheetMinimumExtent;
   Offset dragDownPosition = Offset.zero;
   int totalAssets = 0;
@@ -264,7 +263,6 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
           (context.height * bottomSheetController.size) - (context.height * _kBottomSheetMinimumExtent);
       controller.position = Offset(0, -verticalOffset);
       // Apply the zoom effect when the bottom sheet is showing
-      initialScale = controller.scale;
       controller.scale = (controller.scale ?? 1.0) + 0.01;
     }
   }
@@ -316,7 +314,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     hasDraggedDown = null;
     viewController?.animateMultiple(
       position: initialPhotoViewState.position,
-      scale: initialPhotoViewState.scale,
+      scale: viewController?.initialScale ?? initialPhotoViewState.scale,
       rotation: initialPhotoViewState.rotation,
     );
     ref.read(assetViewerProvider.notifier).setOpacity(255);
@@ -366,8 +364,9 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     final maxScaleDistance = ctx.height * 0.5;
     final scaleReduction = (distance / maxScaleDistance).clamp(0.0, dragRatio);
     double? updatedScale;
-    if (initialPhotoViewState.scale != null) {
-      updatedScale = initialPhotoViewState.scale! * (1.0 - scaleReduction);
+    double? initialScale = viewController?.initialScale ?? initialPhotoViewState.scale;
+    if (initialScale != null) {
+      updatedScale = initialScale * (1.0 - scaleReduction);
     }
 
     final backgroundOpacity = (255 * (1.0 - (scaleReduction / dragRatio))).round();
@@ -481,8 +480,6 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
 
   void _openBottomSheet(BuildContext ctx, {double extent = _kBottomSheetMinimumExtent, bool activitiesMode = false}) {
     ref.read(assetViewerProvider.notifier).setBottomSheet(true);
-    initialScale = viewController?.scale;
-    // viewController?.updateMultiple(scale: (viewController?.scale ?? 1.0) + 0.01);
     previousExtent = _kBottomSheetMinimumExtent;
     sheetCloseController = showBottomSheet(
       context: ctx,
@@ -504,7 +501,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
 
   void _handleSheetClose() {
     viewController?.animateMultiple(position: Offset.zero);
-    viewController?.updateMultiple(scale: initialScale);
+    viewController?.updateMultiple(scale: viewController?.initialScale);
     ref.read(assetViewerProvider.notifier).setBottomSheet(false);
     sheetCloseController = null;
     shouldPopOnDrag = false;

mobile/lib/widgets/photo_view/src/controller/photo_view_controller.dart

@@ -2,6 +2,7 @@ import 'dart:async';
 
 import 'package:flutter/widgets.dart';
 import 'package:immich_mobile/widgets/photo_view/src/utils/ignorable_change_notifier.dart';
+import 'package:immich_mobile/widgets/photo_view/src/utils/photo_view_utils.dart';
 
 /// The interface in which controllers will be implemented.
 ///
@@ -62,6 +63,9 @@ abstract class PhotoViewControllerBase<T extends PhotoViewControllerValue> {
   /// The scale factor to transform the child (image or a customChild).
   late double? scale;
 
+  double? get initialScale;
+  ScaleBoundaries? scaleBoundaries;
+
   /// Nevermind this method :D, look away
   void setScaleInvisibly(double? scale);
 
@@ -141,6 +145,9 @@ class PhotoViewController implements PhotoViewControllerBase<PhotoViewController
 
   late StreamController<PhotoViewControllerValue> _outputCtrl;
 
+  @override
+  ScaleBoundaries? scaleBoundaries;
+
   late void Function(Offset)? _animatePosition;
   late void Function(double)? _animateScale;
   late void Function(double)? _animateRotation;
@@ -311,4 +318,7 @@ class PhotoViewController implements PhotoViewControllerBase<PhotoViewController
     }
     _valueNotifier.value = newValue;
   }
+
+  @override
+  double? get initialScale => scaleBoundaries?.initialScale ?? initial.scale;
 }

mobile/lib/widgets/photo_view/src/photo_view_wrappers.dart

@@ -108,6 +108,17 @@ class _ImageWrapperState extends State<ImageWrapper> {
     }
   }
 
+  // Should be called only when _imageSize is not null
+  ScaleBoundaries get scaleBoundaries {
+    return ScaleBoundaries(
+      widget.minScale ?? 0.0,
+      widget.maxScale ?? double.infinity,
+      widget.initialScale ?? PhotoViewComputedScale.contained,
+      widget.outerSize,
+      _imageSize!,
+    );
+  }
+
   // retrieve image from the provider
   void _resolveImage() {
     final ImageStream newStream = widget.imageProvider.resolve(const ImageConfiguration());
@@ -133,6 +144,7 @@ class _ImageWrapperState extends State<ImageWrapper> {
         _lastStack = null;
 
         _didLoadSynchronously = synchronousCall;
+        widget.controller.scaleBoundaries = scaleBoundaries;
       }
 
       synchronousCall && !_didLoadSynchronously ? setupCB() : setState(setupCB);
@@ -204,14 +216,6 @@ class _ImageWrapperState extends State<ImageWrapper> {
       );
     }
 
-    final scaleBoundaries = ScaleBoundaries(
-      widget.minScale ?? 0.0,
-      widget.maxScale ?? double.infinity,
-      widget.initialScale ?? PhotoViewComputedScale.contained,
-      widget.outerSize,
-      _imageSize!,
-    );
-
     return PhotoViewCore(
       imageProvider: widget.imageProvider,
       backgroundDecoration: widget.backgroundDecoration,

web/src/lib/services/library.service.ts

@@ -20,7 +20,7 @@ import {
   type UpdateLibraryDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
-import { mdiInformationOutline, mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
+import { mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 
 export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResponseDto[]) => {
@@ -45,13 +45,6 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
 };
 
 export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponseDto) => {
-  const Detail: ActionItem = {
-    icon: mdiInformationOutline,
-    type: $t('command'),
-    title: $t('details'),
-    onAction: () => goto(Route.viewLibrary(library)),
-  };
-
   const Edit: ActionItem = {
     icon: mdiPencilOutline,
     type: $t('command'),
@@ -91,7 +84,7 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
     shortcuts: { shift: true, key: 'r' },
   };
 
-  return { Detail, Edit, Delete, AddFolder, AddExclusionPattern, Scan };
+  return { Edit, Delete, AddFolder, AddExclusionPattern, Scan };
 };
 
 export const getLibraryFolderActions = ($t: MessageFormatter, library: LibraryResponseDto, folder: string) => {

web/src/routes/admin/library-management/(list)/+layout.svelte

@@ -4,16 +4,14 @@
   import OnEvents from '$lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import { Route } from '$lib/route';
-  import { getLibrariesActions, getLibraryActions } from '$lib/services/library.service';
+  import { getLibrariesActions } from '$lib/services/library.service';
   import { locale } from '$lib/stores/preferences.store';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
   import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immich/sdk';
   import {
+    Button,
     CommandPaletteDefaultProvider,
     Container,
-    ContextMenuButton,
-    Link,
-    MenuItemType,
     Table,
     TableBody,
     TableCell,
@@ -60,18 +58,13 @@
 
   const { Create, ScanAll } = $derived(getLibrariesActions($t, libraries));
 
-  const getActionsForLibrary = (library: LibraryResponseDto) => {
-    const { Detail, Scan, Edit, Delete } = getLibraryActions($t, library);
-    return [Detail, Scan, Edit, MenuItemType.Divider, Delete];
-  };
-
   const classes = {
     column1: 'w-4/12',
     column2: 'w-4/12',
-    column3: 'w-1/12',
-    column4: 'w-1/12',
-    column5: 'w-1/12',
-    column6: 'w-1/12 flex justify-end',
+    column3: 'w-2/12',
+    column4: 'w-2/12',
+    column5: 'w-2/12',
+    column6: 'w-2/12',
   };
 </script>
 
@@ -96,19 +89,14 @@
             {#each libraries as library (library.id + library.name)}
               {@const { photos, usage, videos } = statistics[library.id]}
               {@const [diskUsage, diskUsageUnit] = getBytesWithUnit(usage, 0)}
-              {@const owner = owners[library.id]}
               <TableRow>
-                <TableCell class={classes.column1}>
-                  <Link href={Route.viewLibrary(library)}>{library.name}</Link>
-                </TableCell>
-                <TableCell class={classes.column2}>
-                  <Link href={Route.viewUser(owner)}>{owner.name}</Link>
-                </TableCell>
+                <TableCell class={classes.column1}>{library.name}</TableCell>
+                <TableCell class={classes.column2}>{owners[library.id].name}</TableCell>
                 <TableCell class={classes.column3}>{photos.toLocaleString($locale)}</TableCell>
                 <TableCell class={classes.column4}>{videos.toLocaleString($locale)}</TableCell>
                 <TableCell class={classes.column5}>{diskUsage} {diskUsageUnit}</TableCell>
                 <TableCell class={classes.column6}>
-                  <ContextMenuButton color="primary" aria-label={$t('open')} items={getActionsForLibrary(library)} />
+                  <Button size="small" href={Route.viewLibrary(library)}>{$t('view')}</Button>
                 </TableCell>
               </TableRow>
             {/each}