fix(web): preserve stacked asset selection when tagging faces

.github/workflows/check-openapi.yml

@@ -24,7 +24,7 @@ jobs:
           persist-credentials: false
 
       - name: Check for breaking API changes
-        uses: oasdiff/oasdiff-action/breaking@748daafaf3aac877a36307f842a48d55db938ac8 # v0.0.31
+        uses: oasdiff/oasdiff-action/breaking@65fef71494258f00f911d7a71edb0482c5378899 # v0.0.30
         with:
           base: https://raw.githubusercontent.com/${{ github.repository }}/main/open-api/immich-openapi-specs.json
           revision: open-api/immich-openapi-specs.json

.github/workflows/cli.yml

@@ -42,10 +42,10 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './cli/.nvmrc'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/codeql-analysis.yml

@@ -57,7 +57,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
+        uses: github/codeql-action/init@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -70,7 +70,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
+        uses: github/codeql-action/autobuild@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -83,6 +83,6 @@ jobs:
       #   ./location_of_script_within_repo/buildscript.sh
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
+        uses: github/codeql-action/analyze@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
         with:
           category: '/language:${{matrix.language}}'

.github/workflows/docs-build.yml

@@ -67,10 +67,10 @@ jobs:
           fetch-depth: 0
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './docs/.nvmrc'
           cache: 'pnpm'

.github/workflows/fix-format.yml

@@ -29,10 +29,10 @@ jobs:
           persist-credentials: true
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'

.github/workflows/prepare-release.yml

@@ -63,13 +63,13 @@ jobs:
           ref: main
 
       - name: Install uv
-        uses: astral-sh/setup-uv@6ee6290f1cbc4156c0bdd66691b2c144ef8df19a # v7.4.0
+        uses: astral-sh/setup-uv@eac588ad8def6316056a12d4907a9d4d84ff7a3b # v7.3.0
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'

.github/workflows/sdk.yml

@@ -30,10 +30,10 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 
       # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './open-api/typescript-sdk/.nvmrc'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/test.yml

@@ -75,9 +75,9 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'
@@ -119,9 +119,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './cli/.nvmrc'
           cache: 'pnpm'
@@ -166,9 +166,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './cli/.nvmrc'
           cache: 'pnpm'
@@ -208,9 +208,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './web/.nvmrc'
           cache: 'pnpm'
@@ -252,9 +252,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './web/.nvmrc'
           cache: 'pnpm'
@@ -290,9 +290,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './web/.nvmrc'
           cache: 'pnpm'
@@ -338,9 +338,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './e2e/.nvmrc'
           cache: 'pnpm'
@@ -385,9 +385,9 @@ jobs:
           submodules: 'recursive'
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'
@@ -424,9 +424,9 @@ jobs:
           submodules: 'recursive'
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './e2e/.nvmrc'
           cache: 'pnpm'
@@ -496,9 +496,9 @@ jobs:
           submodules: 'recursive'
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './e2e/.nvmrc'
           cache: 'pnpm'
@@ -620,7 +620,7 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Install uv
-        uses: astral-sh/setup-uv@6ee6290f1cbc4156c0bdd66691b2c144ef8df19a # v7.4.0
+        uses: astral-sh/setup-uv@eac588ad8def6316056a12d4907a9d4d84ff7a3b # v7.3.0
         with:
           python-version: 3.11
       - name: Install dependencies
@@ -661,9 +661,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './.github/.nvmrc'
           cache: 'pnpm'
@@ -712,9 +712,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'
@@ -774,9 +774,9 @@ jobs:
           persist-credentials: false
           token: ${{ steps.token.outputs.token }}
       - name: Setup pnpm
-        uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       - name: Setup Node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: './server/.nvmrc'
           cache: 'pnpm'

e2e/src/ui/generators/timeline/rest-response.ts

@@ -284,7 +284,11 @@ const createDefaultOwner = (ownerId: string) => {
  * Convert a TimelineAssetConfig to a full AssetResponseDto
  * This matches the response from GET /api/assets/:id
  */
-export function toAssetResponseDto(asset: MockTimelineAsset, owner?: UserResponseDto): AssetResponseDto {
+export function toAssetResponseDto(
+  asset: MockTimelineAsset,
+  owner?: UserResponseDto,
+  overrides?: Partial<Pick<AssetResponseDto, 'people' | 'unassignedFaces'>>,
+): AssetResponseDto {
   const now = new Date().toISOString();
 
   // Default owner if not provided
@@ -334,12 +338,12 @@ export function toAssetResponseDto(asset: MockTimelineAsset, owner?: UserRespons
     isArchived: false,
     isTrashed: asset.isTrashed,
     visibility: asset.visibility,
-    duration: asset.duration,
+    duration: asset.duration || '0:00:00.00000',
     exifInfo,
     livePhotoVideoId: asset.livePhotoVideoId,
     tags: [],
-    people: [],
-    unassignedFaces: [],
+    people: overrides?.people ?? [],
+    unassignedFaces: overrides?.unassignedFaces ?? [],
     stack: asset.stack,
     isOffline: false,
     hasMetadata: true,

e2e/src/ui/mock-network/face-editor-network.ts

@@ -1,3 +1,9 @@
+import {
+  type AssetFaceResponseDto,
+  type AssetFaceWithoutPersonResponseDto,
+  type AssetResponseDto,
+  type PersonWithFacesResponseDto,
+} from '@immich/sdk';
 import { BrowserContext } from '@playwright/test';
 import { randomThumbnail } from 'src/ui/generators/timeline';
 
@@ -125,3 +131,117 @@ export const setupFaceEditorMockApiRoutes = async (
     });
   });
 };
+
+export type MockFaceSpec = {
+  personId: string;
+  personName: string;
+  faceId: string;
+  boundingBoxX1: number;
+  boundingBoxY1: number;
+  boundingBoxX2: number;
+  boundingBoxY2: number;
+};
+
+export const createMockFaceData = (
+  faceSpecs: MockFaceSpec[],
+  imageWidth: number,
+  imageHeight: number,
+): { people: PersonWithFacesResponseDto[]; unassignedFaces: AssetFaceWithoutPersonResponseDto[] } => {
+  const people: PersonWithFacesResponseDto[] = faceSpecs.map((spec) => ({
+    id: spec.personId,
+    name: spec.personName,
+    birthDate: null,
+    isHidden: false,
+    thumbnailPath: `/upload/thumbs/${spec.personId}.jpeg`,
+    updatedAt: new Date().toISOString(),
+    faces: [
+      {
+        id: spec.faceId,
+        imageWidth,
+        imageHeight,
+        boundingBoxX1: spec.boundingBoxX1,
+        boundingBoxY1: spec.boundingBoxY1,
+        boundingBoxX2: spec.boundingBoxX2,
+        boundingBoxY2: spec.boundingBoxY2,
+      },
+    ],
+  }));
+
+  return { people, unassignedFaces: [] };
+};
+
+export const setupFaceOverlayMockApiRoutes = async (
+  context: BrowserContext,
+  assetDto: AssetResponseDto,
+  faceSpecs: MockFaceSpec[],
+) => {
+  const faceResponseMap = new Map<string, AssetFaceResponseDto>();
+  for (const spec of faceSpecs) {
+    faceResponseMap.set(spec.faceId, {
+      id: spec.faceId,
+      imageWidth: assetDto.width ?? 3000,
+      imageHeight: assetDto.height ?? 4000,
+      boundingBoxX1: spec.boundingBoxX1,
+      boundingBoxY1: spec.boundingBoxY1,
+      boundingBoxX2: spec.boundingBoxX2,
+      boundingBoxY2: spec.boundingBoxY2,
+      person: {
+        id: spec.personId,
+        name: spec.personName,
+        birthDate: null,
+        isHidden: false,
+        thumbnailPath: `/upload/thumbs/${spec.personId}.jpeg`,
+        updatedAt: new Date().toISOString(),
+      },
+    });
+  }
+
+  await context.route(`**/api/assets/${assetDto.id}`, async (route, request) => {
+    if (request.method() !== 'GET') {
+      return route.fallback();
+    }
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      json: assetDto,
+    });
+  });
+
+  await context.route(`**/api/faces?id=${assetDto.id}`, async (route, request) => {
+    if (request.method() !== 'GET') {
+      return route.fallback();
+    }
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      json: [...faceResponseMap.values()],
+    });
+  });
+
+  await context.route('**/api/faces/*', async (route, request) => {
+    if (request.method() !== 'DELETE') {
+      return route.fallback();
+    }
+    const url = new URL(request.url());
+    const faceId = url.pathname.split('/').at(-1);
+    if (faceId) {
+      faceResponseMap.delete(faceId);
+    }
+    return route.fulfill({
+      status: 200,
+      contentType: 'text/plain',
+      body: 'OK',
+    });
+  });
+
+  await context.route('**/api/people/*/thumbnail', async (route) => {
+    if (!route.request().serviceWorker()) {
+      return route.continue();
+    }
+    return route.fulfill({
+      status: 200,
+      headers: { 'content-type': 'image/jpeg' },
+      body: await randomThumbnail('person-thumb', 1),
+    });
+  });
+};

e2e/src/ui/specs/asset-viewer/face-overlay.e2e-spec.ts

@@ -0,0 +1,60 @@
+import { expect, test } from '@playwright/test';
+import { toAssetResponseDto } from 'src/ui/generators/timeline';
+import {
+  createMockFaceData,
+  type MockFaceSpec,
+  setupFaceOverlayMockApiRoutes,
+} from 'src/ui/mock-network/face-editor-network';
+import { assetViewerUtils } from '../timeline/utils';
+import { ensureDetailPanelVisible, setupAssetViewerFixture } from './utils';
+
+test.describe.configure({ mode: 'parallel' });
+
+test.describe('face removal auto-close', () => {
+  const fixture = setupAssetViewerFixture(903);
+  const singleFaceSpec: MockFaceSpec[] = [
+    {
+      personId: 'person-solo',
+      personName: 'Solo Person',
+      faceId: 'face-solo',
+      boundingBoxX1: 1000,
+      boundingBoxY1: 500,
+      boundingBoxX2: 1500,
+      boundingBoxY2: 1200,
+    },
+  ];
+
+  test.beforeEach(async ({ context }) => {
+    const faceData = createMockFaceData(
+      singleFaceSpec,
+      fixture.primaryAssetDto.width ?? 3000,
+      fixture.primaryAssetDto.height ?? 4000,
+    );
+    const assetDtoWithFaces = toAssetResponseDto(fixture.primaryAsset, undefined, faceData);
+    await setupFaceOverlayMockApiRoutes(context, assetDtoWithFaces, singleFaceSpec);
+  });
+
+  test('person side panel closes when last face is removed', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    await ensureDetailPanelVisible(page);
+
+    const editPeopleButton = page.locator('#detail-panel').getByLabel('Edit people');
+    await expect(editPeopleButton).toBeVisible();
+    await editPeopleButton.click();
+
+    const personName = page.locator('text=Solo Person');
+    await expect(personName.first()).toBeVisible({ timeout: 5000 });
+
+    const deleteButton = page.getByLabel('Delete face');
+    await expect(deleteButton).toBeVisible();
+    await deleteButton.click();
+
+    const confirmButton = page.getByRole('button', { name: /confirm/i });
+    await expect(confirmButton).toBeVisible();
+    await confirmButton.click();
+
+    await expect(page.locator('text=Edit faces')).toBeHidden({ timeout: 5000 });
+  });
+});

e2e/src/ui/specs/asset-viewer/stack-face-tag.e2e-spec.ts

@@ -0,0 +1,100 @@
+import { type AssetResponseDto } from '@immich/sdk';
+import { expect, test } from '@playwright/test';
+import { toAssetResponseDto } from 'src/ui/generators/timeline';
+import {
+  createMockStack,
+  createMockStackAsset,
+  MockStack,
+  setupBrokenAssetMockApiRoutes,
+} from 'src/ui/mock-network/broken-asset-network';
+import {
+  createMockPeople,
+  FaceCreateCapture,
+  MockPerson,
+  setupFaceEditorMockApiRoutes,
+} from 'src/ui/mock-network/face-editor-network';
+import { assetViewerUtils } from '../timeline/utils';
+import { ensureDetailPanelVisible, setupAssetViewerFixture } from './utils';
+
+test.describe.configure({ mode: 'parallel' });
+test.describe('stack face-tag selection preservation', () => {
+  const fixture = setupAssetViewerFixture(910);
+  let mockStack: MockStack;
+  let primaryAssetDto: AssetResponseDto;
+  let secondAssetDto: AssetResponseDto;
+  let mockPeople: MockPerson[];
+  let faceCreateCapture: FaceCreateCapture;
+
+  test.beforeAll(async () => {
+    primaryAssetDto = toAssetResponseDto(fixture.primaryAsset);
+    secondAssetDto = createMockStackAsset(fixture.adminUserId);
+    secondAssetDto.originalFileName = 'second-stacked-asset.jpg';
+    mockStack = createMockStack(primaryAssetDto, [secondAssetDto], new Set());
+    mockPeople = createMockPeople(3);
+  });
+
+  test.beforeEach(async ({ context }) => {
+    faceCreateCapture = { requests: [] };
+    await setupBrokenAssetMockApiRoutes(context, mockStack);
+    await setupFaceEditorMockApiRoutes(context, mockPeople, faceCreateCapture);
+  });
+
+  test('selected stacked asset is preserved after tagging a face', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    const stackSlideshow = page.locator('#stack-slideshow');
+    await expect(stackSlideshow).toBeVisible();
+
+    const stackThumbnails = stackSlideshow.locator('[data-asset]');
+    await expect(stackThumbnails).toHaveCount(2);
+
+    await stackThumbnails.nth(1).click();
+
+    await ensureDetailPanelVisible(page);
+    await expect(page.locator('#detail-panel')).toContainText('second-stacked-asset.jpg');
+
+    await page.getByLabel('Tag people').click();
+    await page.locator('#face-selector').waitFor({ state: 'visible' });
+
+    await page.locator('#face-selector').getByText(mockPeople[0].name).click();
+
+    const confirmButton = page.getByRole('button', { name: /confirm/i });
+    await expect(confirmButton).toBeVisible();
+    await confirmButton.click();
+
+    await expect(page.locator('#face-selector')).toBeHidden();
+
+    expect(faceCreateCapture.requests).toHaveLength(1);
+    expect(faceCreateCapture.requests[0].assetId).toBe(secondAssetDto.id);
+
+    await expect(page.locator('#detail-panel')).toContainText('second-stacked-asset.jpg');
+
+    const selectedThumbnail = stackSlideshow.locator(`[data-asset="${secondAssetDto.id}"]`);
+    await expect(selectedThumbnail).toBeVisible();
+  });
+
+  test('primary asset stays selected after tagging a face without switching', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    await ensureDetailPanelVisible(page);
+    await expect(page.locator('#detail-panel')).toContainText(primaryAssetDto.originalFileName);
+
+    await page.getByLabel('Tag people').click();
+    await page.locator('#face-selector').waitFor({ state: 'visible' });
+
+    await page.locator('#face-selector').getByText(mockPeople[0].name).click();
+
+    const confirmButton = page.getByRole('button', { name: /confirm/i });
+    await expect(confirmButton).toBeVisible();
+    await confirmButton.click();
+
+    await expect(page.locator('#face-selector')).toBeHidden();
+
+    expect(faceCreateCapture.requests).toHaveLength(1);
+    expect(faceCreateCapture.requests[0].assetId).toBe(primaryAssetDto.id);
+
+    await expect(page.locator('#detail-panel')).toContainText(primaryAssetDto.originalFileName);
+  });
+});

i18n/en.json

@@ -1651,7 +1651,6 @@
   "only_favorites": "Only favorites",
   "open": "Open",
   "open_calendar": "Open calendar",
-  "open_in_browser": "Open in browser",
   "open_in_map_view": "Open in map view",
   "open_in_openstreetmap": "Open in OpenStreetMap",
   "open_the_search_filters": "Open the search filters",

mobile/lib/domain/services/search.service.dart

@@ -69,7 +69,7 @@ extension on AssetResponseDto {
         api.AssetVisibility.locked => AssetVisibility.locked,
         _ => AssetVisibility.timeline,
       },
-      durationInSeconds: duration?.toDuration()?.inSeconds ?? 0,
+      durationInSeconds: duration.toDuration()?.inSeconds ?? 0,
       height: height?.toInt(),
       width: width?.toInt(),
       isFavorite: isFavorite,

mobile/lib/entities/asset.entity.dart

@@ -24,7 +24,7 @@ class Asset {
       fileCreatedAt = remote.fileCreatedAt,
       fileModifiedAt = remote.fileModifiedAt,
       updatedAt = remote.updatedAt,
-      durationInSeconds = remote.duration?.toDuration()?.inSeconds ?? 0,
+      durationInSeconds = remote.duration.toDuration()?.inSeconds ?? 0,
       type = remote.type.toAssetType(),
       fileName = remote.originalFileName,
       height = remote.exifInfo?.exifImageHeight?.toInt(),

mobile/lib/presentation/widgets/action_buttons/archive_action_button.widget.dart

@@ -14,13 +14,13 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 Future<void> performArchiveAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
   if (!context.mounted) return;
 
+  final result = await ref.read(actionProvider.notifier).archive(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
   if (source == ActionSource.viewer) {
     EventStream.shared.emit(const ViewerReloadAssetEvent());
   }
 
-  final result = await ref.read(actionProvider.notifier).archive(source);
-  ref.read(multiSelectProvider.notifier).reset();
-
   final successMessage = 'archive_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
   if (context.mounted) {

mobile/lib/presentation/widgets/action_buttons/delete_action_button.widget.dart

@@ -57,13 +57,13 @@ class DeleteActionButton extends ConsumerWidget {
       if (confirm != true) return;
     }
 
+    final result = await ref.read(actionProvider.notifier).trashRemoteAndDeleteLocal(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
-    final result = await ref.read(actionProvider.notifier).trashRemoteAndDeleteLocal(source);
-    ref.read(multiSelectProvider.notifier).reset();
-
     final successMessage = 'delete_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
     if (context.mounted) {

mobile/lib/presentation/widgets/action_buttons/delete_permanent_action_button.widget.dart

@@ -35,13 +35,13 @@ class DeletePermanentActionButton extends ConsumerWidget {
         false;
     if (!confirm) return;
 
+    final result = await ref.read(actionProvider.notifier).deleteRemoteAndLocal(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
-    final result = await ref.read(actionProvider.notifier).deleteRemoteAndLocal(source);
-    ref.read(multiSelectProvider.notifier).reset();
-
     final successMessage = 'delete_permanently_action_prompt'.t(
       context: context,
       args: {'count': result.count.toString()},

mobile/lib/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart

@@ -14,13 +14,13 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 Future<void> performMoveToLockFolderAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
   if (!context.mounted) return;
 
+  final result = await ref.read(actionProvider.notifier).moveToLockFolder(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
   if (source == ActionSource.viewer) {
     EventStream.shared.emit(const ViewerReloadAssetEvent());
   }
 
-  final result = await ref.read(actionProvider.notifier).moveToLockFolder(source);
-  ref.read(multiSelectProvider.notifier).reset();
-
   final successMessage = 'move_to_lock_folder_action_prompt'.t(
     context: context,
     args: {'count': result.count.toString()},

mobile/lib/presentation/widgets/action_buttons/open_in_browser_action_button.widget.dart

@@ -1,61 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/domain/models/store.model.dart';
-import 'package:immich_mobile/domain/services/timeline.service.dart';
-import 'package:immich_mobile/entities/store.entity.dart';
-import 'package:immich_mobile/extensions/translate_extensions.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
-import 'package:url_launcher/url_launcher.dart';
-
-class OpenInBrowserActionButton extends ConsumerWidget {
-  final String remoteId;
-  final TimelineOrigin origin;
-  final bool iconOnly;
-  final bool menuItem;
-  final Color? iconColor;
-
-  const OpenInBrowserActionButton({
-    super.key,
-    required this.remoteId,
-    required this.origin,
-    this.iconOnly = false,
-    this.menuItem = false,
-    this.iconColor,
-  });
-
-  void _onTap() async {
-    final serverEndpoint = Store.get(StoreKey.serverEndpoint).replaceFirst('/api', '');
-
-    String originPath = '';
-    switch (origin) {
-      case TimelineOrigin.favorite:
-        originPath = '/favorites';
-        break;
-      case TimelineOrigin.trash:
-        originPath = '/trash';
-        break;
-      case TimelineOrigin.archive:
-        originPath = '/archive';
-        break;
-      default:
-        break;
-    }
-
-    final url = '$serverEndpoint$originPath/photos/$remoteId';
-    if (await canLaunchUrl(Uri.parse(url))) {
-      await launchUrl(Uri.parse(url), mode: LaunchMode.externalApplication);
-    }
-  }
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return BaseActionButton(
-      label: 'open_in_browser'.t(context: context),
-      iconData: Icons.open_in_browser,
-      iconColor: iconColor,
-      iconOnly: iconOnly,
-      menuItem: menuItem,
-      onPressed: _onTap,
-    );
-  }
-}

mobile/lib/presentation/widgets/action_buttons/remove_from_album_action_button.widget.dart

@@ -29,13 +29,13 @@ class RemoveFromAlbumActionButton extends ConsumerWidget {
       return;
     }
 
+    final result = await ref.read(actionProvider.notifier).removeFromAlbum(source, albumId);
+    ref.read(multiSelectProvider.notifier).reset();
+
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
-    final result = await ref.read(actionProvider.notifier).removeFromAlbum(source, albumId);
-    ref.read(multiSelectProvider.notifier).reset();
-
     final successMessage = 'remove_from_album_action_prompt'.t(
       context: context,
       args: {'count': result.count.toString()},

mobile/lib/presentation/widgets/action_buttons/trash_action_button.widget.dart

@@ -25,13 +25,13 @@ class TrashActionButton extends ConsumerWidget {
       return;
     }
 
+    final result = await ref.read(actionProvider.notifier).trash(source);
+    ref.read(multiSelectProvider.notifier).reset();
+
     if (source == ActionSource.viewer) {
       EventStream.shared.emit(const ViewerReloadAssetEvent());
     }
 
-    final result = await ref.read(actionProvider.notifier).trash(source);
-    ref.read(multiSelectProvider.notifier).reset();
-
     final successMessage = 'trash_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
     if (context.mounted) {

mobile/lib/presentation/widgets/action_buttons/unarchive_action_button.widget.dart

@@ -16,13 +16,13 @@ import 'package:immich_mobile/domain/utils/event_stream.dart';
 Future<void> performUnArchiveAction(BuildContext context, WidgetRef ref, {required ActionSource source}) async {
   if (!context.mounted) return;
 
+  final result = await ref.read(actionProvider.notifier).unArchive(source);
+  ref.read(multiSelectProvider.notifier).reset();
+
   if (source == ActionSource.viewer) {
     EventStream.shared.emit(const ViewerReloadAssetEvent());
   }
 
-  final result = await ref.read(actionProvider.notifier).unArchive(source);
-  ref.read(multiSelectProvider.notifier).reset();
-
   final successMessage = 'unarchive_action_prompt'.t(context: context, args: {'count': result.count.toString()});
 
   if (context.mounted) {

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

@@ -81,17 +81,19 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   late final _preloader = AssetPreloader(timelineService: ref.read(timelineServiceProvider), mounted: () => mounted);
 
   late int _currentPage = widget.initialIndex;
-  late int _totalAssets = ref.read(timelineServiceProvider).totalAssets;
 
   StreamSubscription? _reloadSubscription;
   KeepAliveLink? _stackChildrenKeepAlive;
 
+  bool _assetReloadRequested = false;
+
   void _onTapNavigate(int direction) {
     final page = _pageController.page?.toInt();
     if (page == null) return;
     final target = page + direction;
-    final maxPage = _totalAssets - 1;
+    final maxPage = ref.read(timelineServiceProvider).totalAssets - 1;
     if (target >= 0 && target <= maxPage) {
+      _currentPage = target;
       _pageController.jumpToPage(target);
       _onAssetChanged(target);
     }
@@ -139,6 +141,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
 
     final page = _pageController.page?.round();
     if (page != null && page != _currentPage) {
+      _currentPage = page;
       _onAssetChanged(page);
     }
     return false;
@@ -150,9 +153,8 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
   }
 
   void _onAssetChanged(int index) async {
-    _currentPage = index;
-
-    final asset = await ref.read(timelineServiceProvider).getAssetAsync(index);
+    final timelineService = ref.read(timelineServiceProvider);
+    final asset = await timelineService.getAssetAsync(index);
     if (asset == null) return;
 
     AssetViewer._setAsset(ref, asset);
@@ -191,20 +193,11 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
       case TimelineReloadEvent():
         _onTimelineReloadEvent();
       case ViewerReloadAssetEvent():
-        _onViewerReloadEvent();
+        _assetReloadRequested = true;
       default:
     }
   }
 
-  void _onViewerReloadEvent() {
-    if (_totalAssets <= 1) return;
-
-    final index = _pageController.page?.round() ?? 0;
-    final target = index >= _totalAssets - 1 ? index - 1 : index + 1;
-    _pageController.animateToPage(target, duration: Durations.medium1, curve: Curves.easeInOut);
-    _onAssetChanged(target);
-  }
-
   void _onTimelineReloadEvent() {
     final timelineService = ref.read(timelineServiceProvider);
     final totalAssets = timelineService.totalAssets;
@@ -214,24 +207,43 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
       return;
     }
 
+    var index = _pageController.page?.round() ?? 0;
     final currentAsset = ref.read(assetViewerProvider).currentAsset;
-    final assetIndex = currentAsset != null ? timelineService.getIndex(currentAsset.heroTag) : null;
-    final index = (assetIndex ?? _currentPage).clamp(0, totalAssets - 1);
+    if (currentAsset != null) {
+      final newIndex = timelineService.getIndex(currentAsset.heroTag);
+      if (newIndex != null && newIndex != index) {
+        index = newIndex;
+        _currentPage = index;
+        _pageController.jumpToPage(index);
+      }
+    }
 
-    if (index != _currentPage) {
+    if (index >= totalAssets) {
+      index = totalAssets - 1;
+      _currentPage = index;
       _pageController.jumpToPage(index);
-      _onAssetChanged(index);
-    } else if (currentAsset != null && assetIndex == null) {
-      _onAssetChanged(index);
     }
 
-    if (_totalAssets != totalAssets) {
-      setState(() {
-        _totalAssets = totalAssets;
-      });
+    if (_assetReloadRequested) {
+      _assetReloadRequested = false;
+      _onAssetReloadEvent(index);
     }
   }
 
+  void _onAssetReloadEvent(int index) async {
+    final timelineService = ref.read(timelineServiceProvider);
+
+    final newAsset = await timelineService.getAssetAsync(index);
+    if (newAsset == null) return;
+
+    final currentAsset = ref.read(assetViewerProvider).currentAsset;
+
+    // Do not reload if the asset has not changed
+    if (newAsset.heroTag == currentAsset?.heroTag) return;
+
+    _onAssetChanged(index);
+  }
+
   void _setSystemUIMode(bool controls, bool details) {
     final mode = !controls || (CurrentPlatform.isIOS && details)
         ? SystemUiMode.immersiveSticky
@@ -289,7 +301,7 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
                     : CurrentPlatform.isIOS
                     ? const FastScrollPhysics()
                     : const FastClampingScrollPhysics(),
-                itemCount: _totalAssets,
+                itemCount: ref.read(timelineServiceProvider).totalAssets,
                 itemBuilder: (context, index) =>
                     AssetPage(index: index, heroOffset: _heroOffset, onTapNavigate: _onTapNavigate),
               ),

mobile/lib/utils/action_button.utils.dart

@@ -18,7 +18,6 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/delete_permane
 import 'package:immich_mobile/presentation/widgets/action_buttons/download_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/like_activity_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/move_to_lock_folder_action_button.widget.dart';
-import 'package:immich_mobile/presentation/widgets/action_buttons/open_in_browser_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/remove_from_album_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/remove_from_lock_folder_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/set_album_cover.widget.dart';
@@ -76,7 +75,6 @@ enum ActionButtonType {
   viewInTimeline,
   download,
   upload,
-  openInBrowser,
   unstack,
   archive,
   unarchive,
@@ -151,7 +149,6 @@ enum ActionButtonType {
         context.isOwner && //
             !context.isInLockedView && //
             context.isStacked,
-      ActionButtonType.openInBrowser => context.asset.hasRemote && !context.isInLockedView,
       ActionButtonType.likeActivity =>
         !context.isInLockedView &&
             context.currentAlbum != null &&
@@ -239,13 +236,6 @@ enum ActionButtonType {
       ),
       ActionButtonType.likeActivity => LikeActivityActionButton(iconOnly: iconOnly, menuItem: menuItem),
       ActionButtonType.unstack => UnStackActionButton(source: context.source, iconOnly: iconOnly, menuItem: menuItem),
-      ActionButtonType.openInBrowser => OpenInBrowserActionButton(
-        remoteId: context.asset.remoteId!,
-        origin: context.timelineOrigin,
-        iconOnly: iconOnly,
-        menuItem: menuItem,
-        iconColor: context.originalTheme?.iconTheme.color,
-      ),
       ActionButtonType.similarPhotos => SimilarPhotosActionButton(
         assetId: (context.asset as RemoteAsset).id,
         iconOnly: iconOnly,

mobile/openapi/lib/model/asset_response_dto.dart

@@ -65,8 +65,8 @@ class AssetResponseDto {
   /// Duplicate group ID
   String? duplicateId;
 
-  /// Video/gif duration in hh:mm:ss.SSS format (null for static images)
-  String? duration;
+  /// Video duration (for videos)
+  String duration;
 
   ///
   /// Please note: This property should have been non-nullable! Since the specification file
@@ -219,7 +219,7 @@ class AssetResponseDto {
     (deviceAssetId.hashCode) +
     (deviceId.hashCode) +
     (duplicateId == null ? 0 : duplicateId!.hashCode) +
-    (duration == null ? 0 : duration!.hashCode) +
+    (duration.hashCode) +
     (exifInfo == null ? 0 : exifInfo!.hashCode) +
     (fileCreatedAt.hashCode) +
     (fileModifiedAt.hashCode) +
@@ -264,11 +264,7 @@ class AssetResponseDto {
     } else {
     //  json[r'duplicateId'] = null;
     }
-    if (this.duration != null) {
       json[r'duration'] = this.duration;
-    } else {
-    //  json[r'duration'] = null;
-    }
     if (this.exifInfo != null) {
       json[r'exifInfo'] = this.exifInfo;
     } else {
@@ -355,7 +351,7 @@ class AssetResponseDto {
         deviceAssetId: mapValueOfType<String>(json, r'deviceAssetId')!,
         deviceId: mapValueOfType<String>(json, r'deviceId')!,
         duplicateId: mapValueOfType<String>(json, r'duplicateId'),
-        duration: mapValueOfType<String>(json, r'duration'),
+        duration: mapValueOfType<String>(json, r'duration')!,
         exifInfo: ExifResponseDto.fromJson(json[r'exifInfo']),
         fileCreatedAt: mapDateTime(json, r'fileCreatedAt', r'')!,
         fileModifiedAt: mapDateTime(json, r'fileModifiedAt', r'')!,

mobile/openapi/lib/model/time_bucket_asset_response_dto.dart

@@ -39,7 +39,7 @@ class TimeBucketAssetResponseDto {
   /// Array of country names extracted from EXIF GPS data
   List<String?> country;
 
-  /// Array of video/gif durations in hh:mm:ss.SSS format (null for static images)
+  /// Array of video durations in HH:MM:SS format (null for images)
   List<String?> duration;
 
   /// Array of file creation timestamps in UTC

open-api/immich-openapi-specs.json

@@ -16962,8 +16962,7 @@
             "type": "string"
           },
           "duration": {
-            "description": "Video/gif duration in hh:mm:ss.SSS format (null for static images)",
-            "nullable": true,
+            "description": "Video duration (for videos)",
             "type": "string"
           },
           "exifInfo": {
@@ -25037,7 +25036,7 @@
             "type": "array"
           },
           "duration": {
-            "description": "Array of video/gif durations in hh:mm:ss.SSS format (null for static images)",
+            "description": "Array of video durations in HH:MM:SS format (null for images)",
             "items": {
               "nullable": true,
               "type": "string"

open-api/typescript-sdk/src/fetch-client.ts

@@ -573,8 +573,8 @@ export type AssetResponseDto = {
     deviceId: string;
     /** Duplicate group ID */
     duplicateId?: string | null;
-    /** Video/gif duration in hh:mm:ss.SSS format (null for static images) */
-    duration: string | null;
+    /** Video duration (for videos) */
+    duration: string;
     exifInfo?: ExifResponseDto;
     /** The actual UTC timestamp when the file was created/captured, preserving timezone information. This is the authoritative timestamp for chronological sorting within timeline groups. Combined with timezone data, this can be used to determine the exact moment the photo was taken. */
     fileCreatedAt: string;
@@ -2756,7 +2756,7 @@ export type TimeBucketAssetResponseDto = {
     city: (string | null)[];
     /** Array of country names extracted from EXIF GPS data */
     country: (string | null)[];
-    /** Array of video/gif durations in hh:mm:ss.SSS format (null for static images) */
+    /** Array of video durations in HH:MM:SS format (null for images) */
     duration: (string | null)[];
     /** Array of file creation timestamps in UTC */
     fileCreatedAt: string[];

server/src/controllers/asset-media.controller.spec.ts

@@ -14,6 +14,7 @@ const makeUploadDto = (options?: { omit: string }): Record<string, any> => {
     fileCreatedAt: new Date().toISOString(),
     fileModifiedAt: new Date().toISOString(),
     isFavorite: 'false',
+    duration: '0:00:00.000000',
   };
 
   const omit = options?.omit;

server/src/dtos/asset-response.dto.ts

@@ -41,8 +41,8 @@ export class SanitizedAssetResponseDto {
     example: '2024-01-15T14:30:00.000Z',
   })
   localDateTime!: string;
-  @ApiProperty({ description: 'Video/gif duration in hh:mm:ss.SSS format (null for static images)' })
-  duration!: string | null;
+  @ApiProperty({ description: 'Video duration (for videos)' })
+  duration!: string;
   @ApiPropertyOptional({ description: 'Live photo video ID' })
   livePhotoVideoId?: string | null;
   @ApiProperty({ description: 'Whether asset has metadata' })
@@ -247,7 +247,7 @@ export function mapAsset(entity: MaybeDehydrated<MapAsset>, options: AssetMapOpt
       originalMimeType: mimeTypes.lookup(entity.originalFileName),
       thumbhash: entity.thumbhash ? hexOrBufferToBase64(entity.thumbhash) : null,
       localDateTime: asDateString(entity.localDateTime),
-      duration: entity.duration,
+      duration: entity.duration ?? '0:00:00.00000',
       livePhotoVideoId: entity.livePhotoVideoId,
       hasMetadata: false,
       width: entity.width,
@@ -279,7 +279,7 @@ export function mapAsset(entity: MaybeDehydrated<MapAsset>, options: AssetMapOpt
     isArchived: entity.visibility === AssetVisibility.Archive,
     isTrashed: !!entity.deletedAt,
     visibility: entity.visibility,
-    duration: entity.duration,
+    duration: entity.duration ?? '0:00:00.00000',
     exifInfo: entity.exifInfo ? mapExif(entity.exifInfo) : undefined,
     livePhotoVideoId: entity.livePhotoVideoId,
     tags: entity.tags?.map((tag) => mapTag(tag)),

server/src/dtos/time-bucket.dto.ts

@@ -151,7 +151,7 @@ export class TimeBucketAssetResponseDto {
   @ApiProperty({
     type: 'array',
     items: { type: 'string', nullable: true },
-    description: 'Array of video/gif durations in hh:mm:ss.SSS format (null for static images)',
+    description: 'Array of video durations in HH:MM:SS format (null for images)',
   })
   duration!: (string | null)[];
 

server/src/middleware/file-upload.interceptor.ts

@@ -3,16 +3,13 @@ import { PATH_METADATA } from '@nestjs/common/constants';
 import { Reflector } from '@nestjs/core';
 import { transformException } from '@nestjs/platform-express/multer/multer/multer.utils';
 import { NextFunction, RequestHandler } from 'express';
-import multer from 'multer';
+import multer, { StorageEngine, diskStorage } from 'multer';
 import { createHash, randomUUID } from 'node:crypto';
-import { join } from 'node:path';
-import { pipeline } from 'node:stream';
 import { Observable } from 'rxjs';
 import { UploadFieldName } from 'src/dtos/asset-media.dto';
 import { RouteKey } from 'src/enum';
 import { AuthRequest } from 'src/middleware/auth.guard';
 import { LoggingRepository } from 'src/repositories/logging.repository';
-import { StorageRepository } from 'src/repositories/storage.repository';
 import { AssetMediaService } from 'src/services/asset-media.service';
 import { ImmichFile, UploadFile, UploadFiles } from 'src/types';
 import { asUploadRequest, mapToUploadFile } from 'src/utils/asset.util';
@@ -29,6 +26,8 @@ export function getFiles(files: UploadFiles) {
   };
 }
 
+type DiskStorageCallback = (error: Error | null, result: string) => void;
+
 type ImmichMulterFile = Express.Multer.File & { uuid: string };
 
 interface Callback<T> {
@@ -36,21 +35,34 @@ interface Callback<T> {
   (error: null, result: T): void;
 }
 
+const callbackify = <T>(target: (...arguments_: any[]) => T, callback: Callback<T>) => {
+  try {
+    return callback(null, target());
+  } catch (error: Error | any) {
+    return callback(error);
+  }
+};
+
 @Injectable()
 export class FileUploadInterceptor implements NestInterceptor {
   private handlers: {
     userProfile: RequestHandler;
     assetUpload: RequestHandler;
   };
+  private defaultStorage: StorageEngine;
 
   constructor(
     private reflect: Reflector,
     private assetService: AssetMediaService,
-    private storageRepository: StorageRepository,
     private logger: LoggingRepository,
   ) {
     this.logger.setContext(FileUploadInterceptor.name);
 
+    this.defaultStorage = diskStorage({
+      filename: this.filename.bind(this),
+      destination: this.destination.bind(this),
+    });
+
     const instance = multer({
       fileFilter: this.fileFilter.bind(this),
       storage: {
@@ -87,60 +99,60 @@ export class FileUploadInterceptor implements NestInterceptor {
   }
 
   private fileFilter(request: AuthRequest, file: Express.Multer.File, callback: multer.FileFilterCallback) {
-    try {
-      callback(null, this.assetService.canUploadFile(asUploadRequest(request, file)));
-    } catch (error: Error | any) {
-      callback(error);
-    }
+    return callbackify(() => this.assetService.canUploadFile(asUploadRequest(request, file)), callback);
+  }
+
+  private filename(request: AuthRequest, file: Express.Multer.File, callback: DiskStorageCallback) {
+    return callbackify(
+      () => this.assetService.getUploadFilename(asUploadRequest(request, file)),
+      callback as Callback<string>,
+    );
+  }
+
+  private destination(request: AuthRequest, file: Express.Multer.File, callback: DiskStorageCallback) {
+    return callbackify(
+      () => this.assetService.getUploadFolder(asUploadRequest(request, file)),
+      callback as Callback<string>,
+    );
   }
 
   private handleFile(request: AuthRequest, file: Express.Multer.File, callback: Callback<Partial<ImmichFile>>) {
+    (file as ImmichMulterFile).uuid = randomUUID();
+
     request.on('error', (error) => {
       this.logger.warn('Request error while uploading file, cleaning up', error);
       this.assetService.onUploadError(request, file).catch(this.logger.error);
     });
 
-    try {
-      (file as ImmichMulterFile).uuid = randomUUID();
-
-      const uploadRequest = asUploadRequest(request, file);
-
-      const path = join(
-        this.assetService.getUploadFolder(uploadRequest),
-        this.assetService.getUploadFilename(uploadRequest),
-      );
-
-      const writeStream = this.storageRepository.createWriteStream(path);
-      const hash = file.fieldname === UploadFieldName.ASSET_DATA ? createHash('sha1') : null;
-
-      let size = 0;
-
-      file.stream.on('data', (chunk) => {
-        hash?.update(chunk);
-        size += chunk.length;
-      });
-
-      pipeline(file.stream, writeStream, (error) => {
-        if (error) {
-          hash?.destroy();
-          return callback(error);
-        }
-        callback(null, {
-          path,
-          size,
-          checksum: hash?.digest(),
-        });
-      });
-    } catch (error: Error | any) {
-      callback(error);
+    if (!this.isAssetUploadFile(file)) {
+      this.defaultStorage._handleFile(request, file, callback);
+      return;
     }
+
+    const hash = createHash('sha1');
+    file.stream.on('data', (chunk) => hash.update(chunk));
+    this.defaultStorage._handleFile(request, file, (error, info) => {
+      if (error) {
+        hash.destroy();
+        callback(error);
+      } else {
+        callback(null, { ...info, checksum: hash.digest() });
+      }
+    });
   }
 
-  private removeFile(_request: AuthRequest, file: Express.Multer.File, callback: (error: Error | null) => void) {
-    this.storageRepository
-      .unlink(file.path)
-      .then(() => callback(null))
-      .catch(callback);
+  private removeFile(request: AuthRequest, file: Express.Multer.File, callback: (error: Error | null) => void) {
+    this.defaultStorage._removeFile(request, file, callback);
+  }
+
+  private isAssetUploadFile(file: Express.Multer.File) {
+    switch (file.fieldname as UploadFieldName) {
+      case UploadFieldName.ASSET_DATA: {
+        return true;
+      }
+    }
+
+    return false;
   }
 
   private getHandler(route: RouteKey) {

server/src/repositories/storage.repository.ts

@@ -63,7 +63,7 @@ export class StorageRepository {
   }
 
   createWriteStream(filepath: string): Writable {
-    return createWriteStream(filepath, { flags: 'w', flush: true });
+    return createWriteStream(filepath, { flags: 'w' });
   }
 
   createOrOverwriteFile(filepath: string, buffer: Buffer) {

server/src/services/asset-media.service.spec.ts

@@ -149,6 +149,7 @@ const createDto = Object.freeze({
   fileCreatedAt: new Date('2022-06-19T23:41:36.910Z'),
   fileModifiedAt: new Date('2022-06-19T23:41:36.910Z'),
   isFavorite: false,
+  duration: '0:00:00.000000',
 }) as AssetMediaCreateDto;
 
 const assetEntity = Object.freeze({
@@ -162,7 +163,7 @@ const assetEntity = Object.freeze({
   fileCreatedAt: new Date('2022-06-19T23:41:36.910Z'),
   updatedAt: new Date('2022-06-19T23:41:36.910Z'),
   isFavorite: false,
-  duration: null,
+  duration: '0:00:00.000000',
   files: [] as AssetFile[],
   exifInfo: {
     latitude: 49.533_547,

web/src/lib/components/album-page/album-card-group.svelte

@@ -65,7 +65,6 @@
       {#each albums as album, index (album.id)}
         <a
           href={Route.viewAlbum(album)}
-          class="h-fit"
           animate:flip={{ duration: 400 }}
           oncontextmenu={(event) => oncontextmenu(event, album)}
         >

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -10,6 +10,7 @@
   import { AssetAction, ProjectionType } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+  import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { editManager, EditToolType } from '$lib/managers/edit/edit-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
@@ -100,10 +101,11 @@
   const stackThumbnailSize = 60;
   const stackSelectedThumbnailSize = 65;
 
+  let stack: StackResponseDto | undefined = $state();
+  let selectedStackAsset: AssetResponseDto | undefined = $state();
   let previewStackedAsset: AssetResponseDto | undefined = $state();
-  let stack: StackResponseDto | null = $state(null);
 
-  const asset = $derived(previewStackedAsset ?? cursor.current);
+  const asset = $derived(previewStackedAsset ?? selectedStackAsset ?? cursor.current);
   const nextAsset = $derived(cursor.nextAsset);
   const previousAsset = $derived(cursor.previousAsset);
   let sharedLink = getSharedLink();
@@ -116,17 +118,25 @@
     playOriginalVideo = value;
   };
 
+  const selectStackedAsset = async (id: string) => {
+    selectedStackAsset = await assetCacheManager.getAsset({ id });
+  };
+
   const refreshStack = async () => {
     if (authManager.isSharedLink || !withStacked) {
       return;
     }
 
-    if (asset.stack) {
-      stack = await getStack({ id: asset.stack.id });
+    if (!cursor.current.stack) {
+      stack = undefined;
+      selectedStackAsset = undefined;
+      return;
     }
 
-    if (!stack?.assets.some(({ id }) => id === asset.id)) {
-      stack = null;
+    stack = await getStack({ id: cursor.current.stack.id });
+    const primaryAsset = stack?.assets.find(({ id }) => id === stack?.primaryAssetId);
+    if (primaryAsset) {
+      await selectStackedAsset(primaryAsset.id);
     }
   };
 
@@ -184,11 +194,21 @@
     onClose?.(asset);
   };
 
+  const refreshPreservingSelection = async () => {
+    const id = asset.id;
+    assetCacheManager.invalidateAsset(id);
+    if (selectedStackAsset) {
+      await selectStackedAsset(id);
+    } else {
+      const asset = await assetCacheManager.getAsset({ id });
+      assetViewingStore.setAsset(asset);
+    }
+    onAssetChange?.(asset);
+  };
+
   const closeEditor = async () => {
     if (editManager.hasAppliedEdits) {
-      const refreshedAsset = await getAssetInfo({ id: asset.id });
-      onAssetChange?.(refreshedAsset);
-      assetViewingStore.setAsset(refreshedAsset);
+      await refreshPreservingSelection();
     }
     assetViewerManager.closeEditor();
   };
@@ -288,10 +308,6 @@
     }
   };
 
-  const handleStackedAssetMouseEvent = (isMouseOver: boolean, stackedAsset: AssetResponseDto) => {
-    previewStackedAsset = isMouseOver ? stackedAsset : undefined;
-  };
-
   const handlePreAction = (action: Action) => {
     preAction?.(action);
   };
@@ -304,7 +320,7 @@
         break;
       }
       case AssetAction.REMOVE_ASSET_FROM_STACK: {
-        stack = action.stack;
+        stack = action.stack ?? undefined;
         if (stack) {
           cursor.current = stack.assets[0];
         }
@@ -371,7 +387,7 @@
 
   $effect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    asset;
+    cursor.current;
     untrack(() => handlePromiseError(refresh()));
   });
 
@@ -535,7 +551,12 @@
     {:else if viewerKind === 'CropArea'}
       <CropArea {asset} />
     {:else if viewerKind === 'PhotoViewer'}
-      <PhotoViewer cursor={{ ...cursor, current: asset }} {sharedLink} {onSwipe} />
+      <PhotoViewer
+        cursor={{ ...cursor, current: asset }}
+        {sharedLink}
+        {onSwipe}
+        onTagFace={refreshPreservingSelection}
+      />
     {:else if viewerKind === 'VideoViewer'}
       <VideoViewer
         {asset}
@@ -585,7 +606,7 @@
     >
       {#if showDetailPanel}
         <div class="w-90 h-full">
-          <DetailPanel {asset} currentAlbum={album} />
+          <DetailPanel {asset} currentAlbum={album} onRefreshPeople={refreshPreservingSelection} />
         </div>
       {:else if assetViewerManager.isShowEditor}
         <div class="w-100 h-full">
@@ -598,10 +619,14 @@
   {#if stack && withStacked && !assetViewerManager.isShowEditor}
     {@const stackedAssets = stack.assets}
     <div id="stack-slideshow" class="absolute bottom-0 w-full col-span-4 col-start-1 pointer-events-none">
-      <div class="relative flex flex-row no-wrap overflow-x-auto overflow-y-hidden horizontal-scrollbar">
+      <div
+        role="presentation"
+        class="relative flex flex-row no-wrap overflow-x-auto overflow-y-hidden horizontal-scrollbar pointer-events-auto"
+        onmouseleave={() => (previewStackedAsset = undefined)}
+      >
         {#each stackedAssets as stackedAsset (stackedAsset.id)}
           <div
-            class={['inline-block px-1 relative transition-all pb-2 pointer-events-auto']}
+            class={['inline-block px-1 relative transition-all pb-2']}
             style:bottom={stackedAsset.id === asset.id ? '0' : '-10px'}
           >
             <Thumbnail
@@ -609,22 +634,25 @@
               brokenAssetClass="text-xs"
               dimmed={stackedAsset.id !== asset.id}
               asset={toTimelineAsset(stackedAsset)}
-              onClick={() => {
-                cursor.current = stackedAsset;
+              onClick={async () => {
+                await selectStackedAsset(stackedAsset.id);
                 previewStackedAsset = undefined;
               }}
-              onMouseEvent={({ isMouseOver }) => handleStackedAssetMouseEvent(isMouseOver, stackedAsset)}
+              onMouseEvent={async ({ isMouseOver }) => {
+                if (isMouseOver) {
+                  previewStackedAsset = stackedAsset;
+                  previewStackedAsset = await assetCacheManager.getAsset({ id: stackedAsset.id });
+                }
+              }}
               readonly
               thumbnailSize={stackedAsset.id === asset.id ? stackSelectedThumbnailSize : stackThumbnailSize}
               showStackedIcon={false}
               disableLinkMouseOver
             />
 
-            {#if stackedAsset.id === asset.id}
-              <div class="w-full flex place-items-center place-content-center">
-                <div class="w-2 h-2 bg-white rounded-full flex mt-0.5"></div>
-              </div>
-            {/if}
+            <div class="w-full flex place-items-center place-content-center">
+              <div class={['w-2 h-2 rounded-full flex mt-0.5', { 'bg-white': stackedAsset.id === asset.id }]}></div>
+            </div>
           </div>
         {/each}
       </div>

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -20,13 +20,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { fromISODateTime, fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
   import { getParentPath } from '$lib/utils/tree-utils';
-  import {
-    AssetMediaSize,
-    getAllAlbums,
-    getAssetInfo,
-    type AlbumResponseDto,
-    type AssetResponseDto,
-  } from '@immich/sdk';
+  import { AssetMediaSize, getAllAlbums, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
   import { Icon, IconButton, LoadingSpinner, modalManager, Text } from '@immich/ui';
   import {
     mdiCalendar,
@@ -52,9 +46,10 @@
   interface Props {
     asset: AssetResponseDto;
     currentAlbum?: AlbumResponseDto | null;
+    onRefreshPeople?: () => Promise<void>;
   }
 
-  let { asset, currentAlbum = null }: Props = $props();
+  let { asset, currentAlbum = null, onRefreshPeople }: Props = $props();
 
   let showAssetPath = $state(false);
   let showEditFaces = $state(false);
@@ -120,11 +115,6 @@
     return undefined;
   };
 
-  const handleRefreshPeople = async () => {
-    asset = await getAssetInfo({ id: asset.id });
-    showEditFaces = false;
-  };
-
   const getAssetFolderHref = (asset: AssetResponseDto) => {
     // Remove the last part of the path to get the parent path
     return Route.folders({ path: getParentPath(asset.originalPath) });
@@ -575,6 +565,6 @@
     assetId={asset.id}
     assetType={asset.type}
     onClose={() => (showEditFaces = false)}
-    onRefresh={handleRefreshPeople}
+    onRefresh={() => void onRefreshPeople?.()}
   />
 {/if}

web/src/lib/components/asset-viewer/face-editor/face-editor.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { getNaturalSize, scaleToFit } from '$lib/utils/container-utils';
@@ -17,9 +16,10 @@
     containerWidth: number;
     containerHeight: number;
     assetId: string;
+    onTagFace?: () => Promise<void>;
   }
 
-  let { htmlElement, containerWidth, containerHeight, assetId }: Props = $props();
+  let { htmlElement, containerWidth, containerHeight, assetId, onTagFace }: Props = $props();
 
   let canvasEl: HTMLCanvasElement | undefined = $state();
   let canvas: Canvas | undefined = $state();
@@ -280,7 +280,7 @@
         },
       });
 
-      await assetViewingStore.setAssetId(assetId);
+      await onTagFace?.();
     } catch (error) {
       handleError(error, 'Error tagging face');
     } finally {

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -32,9 +32,10 @@
     onReady?: () => void;
     onError?: () => void;
     onSwipe?: (event: SwipeCustomEvent) => void;
+    onTagFace?: () => Promise<void>;
   }
 
-  let { cursor, element = $bindable(), sharedLink, onReady, onError, onSwipe }: Props = $props();
+  let { cursor, element = $bindable(), sharedLink, onReady, onError, onSwipe, onTagFace }: Props = $props();
 
   const { slideshowState, slideshowLook } = slideshowStore;
   const asset = $derived(cursor.current);
@@ -266,6 +267,12 @@
   </AdaptiveImage>
 
   {#if isFaceEditMode.value && assetViewerManager.imgRef}
-    <FaceEditor htmlElement={assetViewerManager.imgRef} {containerWidth} {containerHeight} assetId={asset.id} />
+    <FaceEditor
+      htmlElement={assetViewerManager.imgRef}
+      {containerWidth}
+      {containerHeight}
+      assetId={asset.id}
+      {onTagFace}
+    />
   {/if}
 </div>

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -281,7 +281,7 @@
             playbackOnIconHover={!$playVideoThumbnailOnHover}
           />
         </div>
-      {:else if asset.isImage && asset.duration && mouseOver}
+      {:else if asset.isImage && asset.duration && !asset.duration.includes('0:00:00.000') && mouseOver}
         <!-- GIF -->
         <div class="absolute h-full w-full pointer-events-none">
           <ImageThumbnail
@@ -361,7 +361,7 @@
           </div>
         {/if}
 
-        {#if asset.isImage && asset.duration}
+        {#if asset.isImage && asset.duration && !asset.duration.includes('0:00:00.000')}
           <div class="z-2 absolute inset-e-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
             <span class="pe-2 pt-2">
               <Icon icon={mouseOver ? mdiMotionPauseOutline : mdiFileGifBox} size="24" />

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import OnEvents from '$lib/components/OnEvents.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
@@ -25,7 +25,6 @@
   import { fly } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import AssignFaceSidePanel from './assign-face-side-panel.svelte';
-  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
 
   interface Props {
     assetId: string;
@@ -179,7 +178,10 @@
 
       peopleWithFaces = peopleWithFaces.filter((f) => f.id !== face.id);
 
-      await assetViewingStore.setAssetId(assetId);
+      onRefresh();
+      if (peopleWithFaces.length === 0) {
+        onClose();
+      }
     } catch (error) {
       handleError(error, $t('error_delete_face'));
     }

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -63,9 +63,8 @@
   let playerInitialized = $state(false);
   let paused = $state(false);
   let current = $state<MemoryAsset | undefined>(undefined);
-  const currentAssetId = $derived(current?.asset.id);
-  const currentMemoryAssetFull = $derived.by(async () =>
-    currentAssetId ? await getAssetInfo({ ...authManager.params, id: currentAssetId }) : undefined,
+  let currentMemoryAssetFull = $derived.by(async () =>
+    current?.asset ? await getAssetInfo({ ...authManager.params, id: current.asset.id }) : undefined,
   );
   let currentTimelineAssets = $derived(current?.memory.assets ?? []);
   let viewerAssets = $derived([
@@ -551,18 +550,14 @@
               </div>
 
               <div>
-                {#await currentMemoryAssetFull then asset}
-                  {#if asset}
-                    <IconButton
-                      href={Route.photos({ at: asset.stack?.primaryAssetId ?? asset.id })}
-                      icon={mdiImageSearch}
-                      aria-label={$t('view_in_timeline')}
-                      color="secondary"
-                      variant="ghost"
-                      shape="round"
-                    />
-                  {/if}
-                {/await}
+                <IconButton
+                  href={Route.photos({ at: current.asset.id })}
+                  icon={mdiImageSearch}
+                  aria-label={$t('view_in_timeline')}
+                  color="secondary"
+                  variant="ghost"
+                  shape="round"
+                />
               </div>
             </div>
             <!-- CONTROL BUTTONS -->

web/src/lib/components/user-settings-page/PinCodeInput.svelte

@@ -49,22 +49,25 @@
 
   const handleInput = (event: Event, index: number) => {
     const target = event.target as HTMLInputElement;
-    const digits = target.value.replaceAll(/\D/g, '').slice(0, pinLength - index);
+    let currentPinValue = target.value;
 
-    if (digits.length === 0) {
+    if (target.value.length > 1) {
+      currentPinValue = value.slice(0, 1);
+    }
+
+    if (Number.isNaN(Number(value))) {
       pinValues[index] = '';
-      value = pinValues.join('').trim();
+      target.value = '';
       return;
     }
 
-    for (let i = 0; i < digits.length; i++) {
-      pinValues[index + i] = digits[i];
-    }
+    pinValues[index] = currentPinValue;
 
     value = pinValues.join('').trim();
 
-    const lastFilledIndex = Math.min(index + digits.length, pinLength - 1);
-    pinCodeInputElements[lastFilledIndex]?.focus();
+    if (value && index < pinLength - 1) {
+      focusNext(index);
+    }
 
     if (value.length === pinLength) {
       onFilled?.(value);
@@ -101,6 +104,12 @@
         }
         return;
       }
+      default: {
+        if (Number.isNaN(Number(event.key))) {
+          event.preventDefault();
+        }
+        break;
+      }
     }
   }
 </script>
@@ -116,6 +125,7 @@
         {type}
         inputmode="numeric"
         pattern="[0-9]*"
+        maxlength="1"
         bind:this={pinCodeInputElements[index]}
         id="pin-code-{index}"
         class="h-12 w-10 rounded-xl border-2 border-suble dark:border-gray-700 text-center text-lg font-medium focus:border-immich-primary focus:ring-primary dark:focus:border-primary font-mono bg-white dark:bg-light"

web/src/lib/utils.ts

@@ -195,7 +195,7 @@ export function getAssetUrls(asset: AssetResponseDto, sharedLink?: SharedLinkRes
 }
 
 const forceUseOriginal = (asset: AssetResponseDto) => {
-  return asset.type === AssetTypeEnum.Image && asset.duration;
+  return asset.type === AssetTypeEnum.Image && asset.duration && !asset.duration.includes('0:00:00.000');
 };
 
 export const targetImageSize = (asset: AssetResponseDto, forceOriginal: boolean) => {

web/src/lib/utils/file-uploader.ts

@@ -157,6 +157,7 @@ async function fileUploader({
       fileCreatedAt,
       fileModifiedAt: new Date(assetFile.lastModified).toISOString(),
       isFavorite: 'false',
+      duration: '0:00:00.000000',
       assetData: new File([assetFile], assetFile.name),
     })) {
       formData.append(key, value);

web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -67,7 +67,7 @@
   type SearchTerms = MetadataSearchDto & Pick<SmartSearchDto, 'query' | 'queryAssetId'>;
   let searchQuery = $derived(page.url.searchParams.get(QueryParameter.QUERY));
   let smartSearchEnabled = $derived(featureFlagsManager.value.smartSearch);
-  let terms = $derived<SearchTerms>(searchQuery ? JSON.parse(searchQuery) : {});
+  let terms = $derived(searchQuery ? JSON.parse(searchQuery) : {});
 
   $effect(() => {
     // we want this to *only* be reactive on `terms`
@@ -137,13 +137,15 @@
     const searchDto: SearchTerms = {
       page: nextPage,
       withExif: true,
+      isVisible: true,
+      language: $lang,
       ...terms,
     };
 
     try {
       const { albums, assets } =
         ('query' in searchDto || 'queryAssetId' in searchDto) && smartSearchEnabled
-          ? await searchSmart({ smartSearchDto: { ...searchDto, language: $lang } })
+          ? await searchSmart({ smartSearchDto: searchDto })
           : await searchAssets({ metadataSearchDto: searchDto });
 
       searchResultAlbums.push(...albums.items);
@@ -228,7 +230,7 @@
   const onAlbumAddAssets = ({ assetIds }: { assetIds: string[] }) => {
     cancelMultiselect(assetInteraction);
 
-    if (terms.isNotInAlbum) {
+    if (terms.isNotInAlbum.toString() == 'true') {
       const assetIdSet = new Set(assetIds);
       searchResultAssets = searchResultAssets.filter((asset) => !assetIdSet.has(asset.id));
     }

web/src/test-data/factories/asset-factory.ts

@@ -23,7 +23,7 @@ export const assetFactory = Sync.makeFactory<AssetResponseDto>({
   isFavorite: Sync.each(() => faker.datatype.boolean()),
   isArchived: false,
   isTrashed: false,
-  duration: null,
+  duration: '0:00:00.00000',
   checksum: Sync.each(() => faker.string.alphanumeric(28)),
   isOffline: Sync.each(() => faker.datatype.boolean()),
   hasMetadata: Sync.each(() => faker.datatype.boolean()),
@@ -46,7 +46,7 @@ export const timelineAssetFactory = Sync.makeFactory<TimelineAsset>({
   isTrashed: false,
   isImage: true,
   isVideo: false,
-  duration: null,
+  duration: '0:00:00.00000',
   stack: null,
   projectionType: null,
   livePhotoVideoId: Sync.each(() => faker.string.uuid()),