feat: web - view transitions from timeline to viewer, next/prev

feat: web - view transitions from timeline to viewer, next/prev feat: web - swipe feedback - show image while swiping/dragging left/right feat: web - swipe feedback - show image while swiping/dragging left/right tweak animation - no crossfade by default refactor(web): replace ViewTransitionManager event-driven API with phase-based callbacks Change-Id: Ia52f300a08a725062acc19574b10593e6a6a6964 fix(web): graceful degradation for ViewTransitionManager, rename AssetViewerFree to AssetViewerReady, extract onClick handler Change-Id: I4ad85d43e9922742910748a6487cd41f6a6a6964 Change-Id: Ie9c55914b0e87635e0d9e5889ca0ec3d6a6a6964 Change-Id: I0a37b417ee4c247dcc93d442c976eede6a6a6964
feat(web): image-relative overlays with zoom support for faces, OCR, and face editor
2026-06-04 21:25:49 -04:00 · 2026-03-17 12:23:59 -04:00 · 2026-03-17 03:17:04 +00:00 · 2026-03-16 19:17:55 +01:00 · 2026-03-16 19:15:20 +01:00 · 2026-03-16 18:06:51 +00:00
281 changed files with 9323 additions and 4888 deletions
@@ -0,0 +1,80 @@
+name: Check PR Template
+
+on:
+  pull_request_target: # zizmor: ignore[dangerous-triggers]
+    types: [opened, edited]
+
+permissions: {}
+
+jobs:
+  parse:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.pull_request.head.repo.fork == true }}
+    permissions:
+      contents: read
+    outputs:
+      uses_template: ${{ steps.check.outputs.uses_template }}
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          sparse-checkout: .github/pull_request_template.md
+          sparse-checkout-cone-mode: false
+          persist-credentials: false
+
+      - name: Check required sections
+        id: check
+        env:
+          BODY: ${{ github.event.pull_request.body }}
+        run: |
+          OK=true
+          while IFS= read -r header; do
+            printf '%s\n' "$BODY" | grep -qF "$header" || OK=false
+          done < <(sed '/<!--/,/-->/d' .github/pull_request_template.md | grep "^## ")
+          echo "uses_template=$OK" >> "$GITHUB_OUTPUT"
+
+  act:
+    runs-on: ubuntu-latest
+    needs: parse
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Close PR
+        if: ${{ needs.parse.outputs.uses_template == 'false' && github.event.pull_request.state != 'closed' }}
+        env:
+          GH_TOKEN: ${{ github.token }}
+          NODE_ID: ${{ github.event.pull_request.node_id }}
+        run: |
+          gh api graphql \
+            -f prId="$NODE_ID" \
+            -f body="This PR has been automatically closed as the description doesn't follow our template. After you edit it to match the template, the PR will automatically be reopened." \
+            -f query='
+              mutation CommentAndClosePR($prId: ID!, $body: String!) {
+                addComment(input: {
+                  subjectId: $prId,
+                  body: $body
+                }) {
+                  __typename
+                }
+                closePullRequest(input: {
+                  pullRequestId: $prId
+                }) {
+                  __typename
+                }
+              }'
+
+      - name: Reopen PR (sections now present, PR closed)
+        if: ${{ needs.parse.outputs.uses_template == 'true' && github.event.pull_request.state == 'closed' }}
+        env:
+          GH_TOKEN: ${{ github.token }}
+          NODE_ID: ${{ github.event.pull_request.node_id }}
+        run: |
+          gh api graphql \
+            -f prId="$NODE_ID" \
+            -f query='
+              mutation ReopenPR($prId: ID!) {
+                reopenPullRequest(input: {
+                  pullRequestId: $prId
+                }) {
+                  __typename
+                }
+              }'
@@ -131,7 +131,7 @@ jobs:
          - device: rocm
            suffixes: '-rocm'
            platforms: linux/amd64
-            runner-mapping: '{"linux/amd64": "pokedex-giant"}'
+            runner-mapping: '{"linux/amd64": "pokedex-large"}'
    uses: immich-app/devtools/.github/workflows/multi-runner-build.yml@bd49ed7a5a6022149f79b6564df48177476a822b # multi-runner-build-workflow-v2.2.1
    permissions:
      contents: read
@@ -1,170 +0,0 @@
-name: Manage release PR
-on:
-  workflow_dispatch:
-  push:
-    branches:
-      - main
-
-concurrency:
-  group: ${{ github.workflow }}
-  cancel-in-progress: true
-
-permissions: {}
-
-jobs:
-  bump:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Generate a token
-        id: generate-token
-        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
-        with:
-          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
-          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
-
-      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          token: ${{ steps.generate-token.outputs.token }}
-          persist-credentials: true
-          ref: main
-
-      - name: Install uv
-        uses: astral-sh/setup-uv@eac588ad8def6316056a12d4907a9d4d84ff7a3b # v7.3.0
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
-
-      - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
-        with:
-          node-version-file: './server/.nvmrc'
-          cache: 'pnpm'
-          cache-dependency-path: '**/pnpm-lock.yaml'
-
-      - name: Determine release type
-        id: bump-type
-        uses: ietf-tools/semver-action@c90370b2958652d71c06a3484129a4d423a6d8a8 # v1.11.0
-        with:
-          token: ${{ steps.generate-token.outputs.token }}
-
-      - name: Bump versions
-        env:
-          TYPE: ${{ steps.bump-type.outputs.bump }}
-        run: |
-          if [ "$TYPE" == "none" ]; then
-            exit 1 # TODO: Is there a cleaner way to abort the workflow?
-          fi
-          misc/release/pump-version.sh -s $TYPE -m true
-
-      - name: Manage Outline release document
-        id: outline
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
-        env:
-          OUTLINE_API_KEY: ${{ secrets.OUTLINE_API_KEY }}
-          NEXT_VERSION: ${{ steps.bump-type.outputs.next }}
-        with:
-          github-token: ${{ steps.generate-token.outputs.token }}
-          script: |
-            const fs = require('fs');
-
-            const outlineKey = process.env.OUTLINE_API_KEY;
-            const parentDocumentId = 'da856355-0844-43df-bd71-f8edce5382d9'
-            const collectionId = 'e2910656-714c-4871-8721-447d9353bd73';
-            const baseUrl = 'https://outline.immich.cloud';
-
-            const listResponse = await fetch(`${baseUrl}/api/documents.list`, {
-              method: 'POST',
-              headers: {
-                'Authorization': `Bearer ${outlineKey}`,
-                'Content-Type': 'application/json'
-              },
-              body: JSON.stringify({ parentDocumentId })
-            });
-
-            if (!listResponse.ok) {
-              throw new Error(`Outline list failed: ${listResponse.statusText}`);
-            }
-
-            const listData = await listResponse.json();
-            const allDocuments = listData.data || [];
-
-            const document = allDocuments.find(doc => doc.title === 'next');
-
-            let documentId;
-            let documentUrl;
-            let documentText;
-
-            if (!document) {
-              // Create new document
-              console.log('No existing document found. Creating new one...');
-              const notesTmpl = fs.readFileSync('misc/release/notes.tmpl', 'utf8');
-              const createResponse = await fetch(`${baseUrl}/api/documents.create`, {
-                method: 'POST',
-                headers: {
-                  'Authorization': `Bearer ${outlineKey}`,
-                  'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                  title: 'next',
-                  text: notesTmpl,
-                  collectionId: collectionId,
-                  parentDocumentId: parentDocumentId,
-                  publish: true
-                })
-              });
-
-              if (!createResponse.ok) {
-                throw new Error(`Failed to create document: ${createResponse.statusText}`);
-              }
-
-              const createData = await createResponse.json();
-              documentId = createData.data.id;
-              const urlId = createData.data.urlId;
-              documentUrl = `${baseUrl}/doc/next-${urlId}`;
-              documentText = createData.data.text || '';
-              console.log(`Created new document: ${documentUrl}`);
-            } else {
-              documentId = document.id;
-              const docPath = document.url;
-              documentUrl = `${baseUrl}${docPath}`;
-              documentText = document.text || '';
-              console.log(`Found existing document: ${documentUrl}`);
-            }
-
-            // Generate GitHub release notes
-            console.log('Generating GitHub release notes...');
-            const releaseNotesResponse = await github.rest.repos.generateReleaseNotes({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              tag_name: `${process.env.NEXT_VERSION}`,
-            });
-
-            // Combine the content
-            const changelog = `
-            # ${process.env.NEXT_VERSION}
-
-            ${documentText}
-
-            ${releaseNotesResponse.data.body}
-
-            ---
-
-            `
-
-            const existingChangelog = fs.existsSync('CHANGELOG.md') ? fs.readFileSync('CHANGELOG.md', 'utf8') : '';
-            fs.writeFileSync('CHANGELOG.md', changelog + existingChangelog, 'utf8');
-
-            core.setOutput('document_url', documentUrl);
-
-      - name: Create PR
-        id: create-pr
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
-        with:
-          token: ${{ steps.generate-token.outputs.token }}
-          commit-message: 'chore: release ${{ steps.bump-type.outputs.next }}'
-          title: 'chore: release ${{ steps.bump-type.outputs.next }}'
-          body: 'Release notes: ${{ steps.outline.outputs.document_url }}'
-          labels: 'changelog:skip'
-          branch: 'release/next'
-          draft: true
@@ -1,149 +0,0 @@
-name: release.yml
-on:
-  pull_request:
-    types: [closed]
-    paths:
-      - CHANGELOG.md
-
-jobs:
-  # Maybe double check PR source branch?
-
-  merge_translations:
-    uses: ./.github/workflows/merge-translations.yml
-    permissions:
-      pull-requests: write
-    secrets:
-      PUSH_O_MATIC_APP_ID: ${{ secrets.PUSH_O_MATIC_APP_ID }}
-      PUSH_O_MATIC_APP_KEY: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
-      WEBLATE_TOKEN: ${{ secrets.WEBLATE_TOKEN }}
-
-  build_mobile:
-    uses: ./.github/workflows/build-mobile.yml
-    needs: merge_translations
-    permissions:
-      contents: read
-    secrets:
-      KEY_JKS: ${{ secrets.KEY_JKS }}
-      ALIAS: ${{ secrets.ALIAS }}
-      ANDROID_KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }}
-      ANDROID_STORE_PASSWORD: ${{ secrets.ANDROID_STORE_PASSWORD }}
-      # iOS secrets
-      APP_STORE_CONNECT_API_KEY_ID: ${{ secrets.APP_STORE_CONNECT_API_KEY_ID }}
-      APP_STORE_CONNECT_API_KEY_ISSUER_ID: ${{ secrets.APP_STORE_CONNECT_API_KEY_ISSUER_ID }}
-      APP_STORE_CONNECT_API_KEY: ${{ secrets.APP_STORE_CONNECT_API_KEY }}
-      IOS_CERTIFICATE_P12: ${{ secrets.IOS_CERTIFICATE_P12 }}
-      IOS_CERTIFICATE_PASSWORD: ${{ secrets.IOS_CERTIFICATE_PASSWORD }}
-      IOS_PROVISIONING_PROFILE: ${{ secrets.IOS_PROVISIONING_PROFILE }}
-      IOS_PROVISIONING_PROFILE_SHARE_EXTENSION: ${{ secrets.IOS_PROVISIONING_PROFILE_SHARE_EXTENSION }}misc/release/notes.tmpl
-      IOS_PROVISIONING_PROFILE_WIDGET_EXTENSION: ${{ secrets.IOS_PROVISIONING_PROFILE_WIDGET_EXTENSION }}
-      IOS_DEVELOPMENT_PROVISIONING_PROFILE: ${{ secrets.IOS_DEVELOPMENT_PROVISIONING_PROFILE }}
-      IOS_DEVELOPMENT_PROVISIONING_PROFILE_SHARE_EXTENSION: ${{ secrets.IOS_DEVELOPMENT_PROVISIONING_PROFILE_SHARE_EXTENSION }}
-      IOS_DEVELOPMENT_PROVISIONING_PROFILE_WIDGET_EXTENSION: ${{ secrets.IOS_DEVELOPMENT_PROVISIONING_PROFILE_WIDGET_EXTENSION }}
-      FASTLANE_TEAM_ID: ${{ secrets.FASTLANE_TEAM_ID }}
-    with:
-      ref: main
-      environment: production
-
-  prepare_release:
-    runs-on: ubuntu-latest
-    needs: build_mobile
-    permissions:
-      actions: read # To download the app artifact
-    steps:
-      - name: Generate a token
-        id: generate-token
-        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
-        with:
-          app-id: ${{ secrets.PUSH_O_MATIC_APP_ID }}
-          private-key: ${{ secrets.PUSH_O_MATIC_APP_KEY }}
-
-      - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          token: ${{ steps.generate-token.outputs.token }}
-          persist-credentials: false
-          ref: main
-
-      - name: Extract changelog
-        id: changelog
-        run: |
-          CHANGELOG_PATH=$RUNNER_TEMP/changelog.md
-          sed -n '1,/^---$/p' CHANGELOG.md | head -n -1 > $CHANGELOG_PATH
-          echo "path=$CHANGELOG_PATH" >> $GITHUB_OUTPUT
-          VERSION=$(sed -n 's/^# //p' $CHANGELOG_PATH)
-          echo "version=$VERSION" >> $GITHUB_OUTPUT
-
-      - name: Download APK
-        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7.0.0
-        with:
-          name: release-apk-signed
-          github-token: ${{ steps.generate-token.outputs.token }}
-
-      - name: Create draft release
-        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
-        with:
-          tag_name: ${{ steps.version.outputs.result }}
-          token: ${{ steps.generate-token.outputs.token }}
-          body_path: ${{ steps.changelog.outputs.path }}
-          draft: true
-          files: |
-            docker/docker-compose.yml
-            docker/docker-compose.rootless.yml
-            docker/example.env
-            docker/hwaccel.ml.yml
-            docker/hwaccel.transcoding.yml
-            docker/prometheus.yml
-            *.apk
-
-      - name: Rename Outline document
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
-        continue-on-error: true
-        env:
-          OUTLINE_API_KEY: ${{ secrets.OUTLINE_API_KEY }}
-          VERSION: ${{ steps.changelog.outputs.version }}
-        with:
-          github-token: ${{ steps.generate-token.outputs.token }}
-          script: |
-            const outlineKey = process.env.OUTLINE_API_KEY;
-            const version = process.env.VERSION;
-            const parentDocumentId = 'da856355-0844-43df-bd71-f8edce5382d9';
-            const baseUrl = 'https://outline.immich.cloud';
-
-            const listResponse = await fetch(`${baseUrl}/api/documents.list`, {
-              method: 'POST',
-              headers: {
-                'Authorization': `Bearer ${outlineKey}`,
-                'Content-Type': 'application/json'
-              },
-              body: JSON.stringify({ parentDocumentId })
-            });
-
-            if (!listResponse.ok) {
-              throw new Error(`Outline list failed: ${listResponse.statusText}`);
-            }
-
-            const listData = await listResponse.json();
-            const allDocuments = listData.data || [];
-            const document = allDocuments.find(doc => doc.title === 'next');
-
-            if (document) {
-              console.log(`Found document 'next', renaming to '${version}'...`);
-
-              const updateResponse = await fetch(`${baseUrl}/api/documents.update`, {
-                method: 'POST',
-                headers: {
-                  'Authorization': `Bearer ${outlineKey}`,
-                  'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                  id: document.id,
-                  title: version
-                })
-              });
-
-              if (!updateResponse.ok) {
-                throw new Error(`Failed to rename document: ${updateResponse.statusText}`);
-              }
-            } else {
-              console.log('No document titled "next" found to rename');
-            }
@@ -20,7 +20,7 @@
    "@types/lodash-es": "^4.17.12",
    "@types/micromatch": "^4.0.9",
    "@types/mock-fs": "^4.13.1",
-    "@types/node": "^24.10.14",
+    "@types/node": "^24.11.0",
    "@vitest/coverage-v8": "^4.0.0",
    "byte-size": "^9.0.0",
    "cli-progress": "^3.12.0",
@@ -155,7 +155,7 @@ services:

  redis:
    container_name: immich_redis
-    image: docker.io/valkey/valkey:9@sha256:2bce660b767cb62c8c0ea020e94a230093be63dbd6af4f21b044960517a5842d
+    image: docker.io/valkey/valkey:9@sha256:3eeb09785cd61ec8e3be35f8804c8892080f3ca21934d628abc24ee4ed1698f6
    healthcheck:
      test: redis-cli ping || exit 1

@@ -56,7 +56,7 @@ services:

  redis:
    container_name: immich_redis
-    image: docker.io/valkey/valkey:9@sha256:2bce660b767cb62c8c0ea020e94a230093be63dbd6af4f21b044960517a5842d
+    image: docker.io/valkey/valkey:9@sha256:3eeb09785cd61ec8e3be35f8804c8892080f3ca21934d628abc24ee4ed1698f6
    healthcheck:
      test: redis-cli ping || exit 1
    restart: always
@@ -61,7 +61,7 @@ services:

  redis:
    container_name: immich_redis
-    image: docker.io/valkey/valkey:9@sha256:2bce660b767cb62c8c0ea020e94a230093be63dbd6af4f21b044960517a5842d
+    image: docker.io/valkey/valkey:9@sha256:3eeb09785cd61ec8e3be35f8804c8892080f3ca21934d628abc24ee4ed1698f6
    user: '1000:1000'
    security_opt:
      - no-new-privileges:true
@@ -49,7 +49,7 @@ services:

  redis:
    container_name: immich_redis
-    image: docker.io/valkey/valkey:9@sha256:2bce660b767cb62c8c0ea020e94a230093be63dbd6af4f21b044960517a5842d
+    image: docker.io/valkey/valkey:9@sha256:3eeb09785cd61ec8e3be35f8804c8892080f3ca21934d628abc24ee4ed1698f6
    healthcheck:
      test: redis-cli ping || exit 1
    restart: always
@@ -230,7 +230,7 @@ The default value is `ultrafast`.

 ### Audio codec (`ffmpeg.targetAudioCodec`) {#ffmpeg.targetAudioCodec}

-Which audio codec to use when the audio stream is being transcoded. Can be one of `mp3`, `aac`, `libopus`.
+Which audio codec to use when the audio stream is being transcoded. Can be one of `mp3`, `aac`, `opus`.

 The default value is `aac`.

@@ -27,7 +27,7 @@ The default configuration looks like this:
  "ffmpeg": {
    "accel": "disabled",
    "accelDecode": false,
-    "acceptedAudioCodecs": ["aac", "mp3", "libopus"],
+    "acceptedAudioCodecs": ["aac", "mp3", "opus"],
    "acceptedContainers": ["mov", "ogg", "webm"],
    "acceptedVideoCodecs": ["h264"],
    "bframes": -1,
@@ -10,6 +10,7 @@ export enum OAuthClient {
 export enum OAuthUser {
  NO_EMAIL = 'no-email',
  NO_NAME = 'no-name',
+  ID_TOKEN_CLAIMS = 'id-token-claims',
  WITH_QUOTA = 'with-quota',
  WITH_USERNAME = 'with-username',
  WITH_ROLE = 'with-role',
@@ -52,12 +53,25 @@ const withDefaultClaims = (sub: string) => ({
  email_verified: true,
 });

-const getClaims = (sub: string) => claims.find((user) => user.sub === sub) || withDefaultClaims(sub);
+const getClaims = (sub: string, use?: string) => {
+  if (sub === OAuthUser.ID_TOKEN_CLAIMS) {
+    return {
+      sub,
+      email: `oauth-${sub}@immich.app`,
+      email_verified: true,
+      name: use === 'id_token' ? 'ID Token User' : 'Userinfo User',
+    };
+  }
+  return claims.find((user) => user.sub === sub) || withDefaultClaims(sub);
+};

 const setup = async () => {
  const { privateKey, publicKey } = await generateKeyPair('RS256');

-  const redirectUris = ['http://127.0.0.1:2285/auth/login', 'https://photos.immich.app/oauth/mobile-redirect'];
+  const redirectUris = [
+    'http://127.0.0.1:2285/auth/login',
+    'https://photos.immich.app/oauth/mobile-redirect',
+  ];
  const port = 2286;
  const host = '0.0.0.0';
  const oidc = new Provider(`http://${host}:${port}`, {
@@ -66,7 +80,10 @@ const setup = async () => {
      console.error(error);
      ctx.body = 'Internal Server Error';
    },
-    findAccount: (ctx, sub) => ({ accountId: sub, claims: () => getClaims(sub) }),
+    findAccount: (ctx, sub) => ({
+      accountId: sub,
+      claims: (use) => getClaims(sub, use),
+    }),
    scopes: ['openid', 'email', 'profile'],
    claims: {
      openid: ['sub'],
@@ -94,6 +111,7 @@ const setup = async () => {
        state: 'oidc.state',
      },
    },
+    conformIdTokenClaims: false,
    pkce: {
      required: () => false,
    },
@@ -125,7 +143,10 @@ const setup = async () => {
    ],
  });

-  const onStart = () => console.log(`[e2e-auth-server] http://${host}:${port}/.well-known/openid-configuration`);
+  const onStart = () =>
+    console.log(
+      `[e2e-auth-server] http://${host}:${port}/.well-known/openid-configuration`,
+    );
  const app = oidc.listen(port, host, onStart);
  return () => app.close();
 };
@@ -44,7 +44,7 @@ services:

  redis:
    container_name: immich-e2e-redis
-    image: docker.io/valkey/valkey:9@sha256:2bce660b767cb62c8c0ea020e94a230093be63dbd6af4f21b044960517a5842d
+    image: docker.io/valkey/valkey:9@sha256:3eeb09785cd61ec8e3be35f8804c8892080f3ca21934d628abc24ee4ed1698f6
    healthcheck:
      test: redis-cli ping || exit 1

@@ -32,7 +32,7 @@
    "@playwright/test": "^1.44.1",
    "@socket.io/component-emitter": "^3.1.2",
    "@types/luxon": "^3.4.2",
-    "@types/node": "^24.10.14",
+    "@types/node": "^24.11.0",
    "@types/pg": "^8.15.1",
    "@types/pngjs": "^6.0.4",
    "@types/supertest": "^6.0.2",
@@ -380,4 +380,23 @@ describe(`/oauth`, () => {
      });
    });
  });
+
+  describe('idTokenClaims', () => {
+    it('should use claims from the ID token if IDP includes them', async () => {
+      await setupOAuth(admin.accessToken, {
+        enabled: true,
+        clientId: OAuthClient.DEFAULT,
+        clientSecret: OAuthClient.DEFAULT,
+      });
+      const callbackParams = await loginWithOAuth(OAuthUser.ID_TOKEN_CLAIMS);
+      const { status, body } = await request(app).post('/oauth/callback').send(callbackParams);
+      expect(status).toBe(201);
+      expect(body).toMatchObject({
+        accessToken: expect.any(String),
+        name: 'ID Token User',
+        userEmail: 'oauth-id-token-claims@immich.app',
+        userId: expect.any(String),
+      });
+    });
+  });
 });
@@ -438,6 +438,16 @@ describe('/shared-links', () => {
      expect(body).toEqual(errorDto.badRequest('Invalid shared link type'));
    });

+    it('should reject guests removing assets from an individual shared link', async () => {
+      const { status, body } = await request(app)
+        .delete(`/shared-links/${linkWithAssets.id}/assets`)
+        .query({ key: linkWithAssets.key })
+        .send({ assetIds: [asset1.id] });
+
+      expect(status).toBe(403);
+      expect(body).toEqual(errorDto.forbidden);
+    });
+
    it('should remove assets from a shared link (individual)', async () => {
      const { status, body } = await request(app)
        .delete(`/shared-links/${linkWithAssets.id}/assets`)
@@ -1,14 +1,13 @@
 import { AssetMediaResponseDto, LoginResponseDto } from '@immich/sdk';
-import { Page, expect, test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+import type { Socket } from 'socket.io-client';
 import { utils } from 'src/utils';

-function imageLocator(page: Page) {
-  return page.getByAltText('Image taken').locator('visible=true');
-}
 test.describe('Photo Viewer', () => {
  let admin: LoginResponseDto;
  let asset: AssetMediaResponseDto;
  let rawAsset: AssetMediaResponseDto;
+  let websocket: Socket;

  test.beforeAll(async () => {
    utils.initSdk();
@@ -16,6 +15,11 @@ test.describe('Photo Viewer', () => {
    admin = await utils.adminSetup();
    asset = await utils.createAsset(admin.accessToken);
    rawAsset = await utils.createAsset(admin.accessToken, { assetData: { filename: 'test.arw' } });
+    websocket = await utils.connectWebsocket(admin.accessToken);
+  });
+
+  test.afterAll(() => {
+    utils.disconnectWebsocket(websocket);
  });

  test.beforeEach(async ({ context, page }) => {
@@ -26,31 +30,51 @@ test.describe('Photo Viewer', () => {

  test('loads original photo when zoomed', async ({ page }) => {
    await page.goto(`/photos/${asset.id}`);
-    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('thumbnail');
-    const box = await imageLocator(page).boundingBox();
-    expect(box).toBeTruthy();
-    const { x, y, width, height } = box!;
-    await page.mouse.move(x + width / 2, y + height / 2);
+
+    const preview = page.getByTestId('preview').filter({ visible: true });
+    await expect(preview).toHaveAttribute('src', /.+/);
+
+    const originalResponse = page.waitForResponse((response) => response.url().includes('/original'));
+
+    const { width, height } = page.viewportSize()!;
+    await page.mouse.move(width / 2, height / 2);
    await page.mouse.wheel(0, -1);
-    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('original');
+
+    await originalResponse;
+
+    const original = page.getByTestId('original').filter({ visible: true });
+    await expect(original).toHaveAttribute('src', /original/);
  });

  test('loads fullsize image when zoomed and original is web-incompatible', async ({ page }) => {
    await page.goto(`/photos/${rawAsset.id}`);
-    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('thumbnail');
-    const box = await imageLocator(page).boundingBox();
-    expect(box).toBeTruthy();
-    const { x, y, width, height } = box!;
-    await page.mouse.move(x + width / 2, y + height / 2);
+
+    const preview = page.getByTestId('preview').filter({ visible: true });
+    await expect(preview).toHaveAttribute('src', /.+/);
+
+    const fullsizeResponse = page.waitForResponse((response) => response.url().includes('fullsize'));
+
+    const { width, height } = page.viewportSize()!;
+    await page.mouse.move(width / 2, height / 2);
    await page.mouse.wheel(0, -1);
-    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('fullsize');
+
+    await fullsizeResponse;
+
+    const original = page.getByTestId('original').filter({ visible: true });
+    await expect(original).toHaveAttribute('src', /fullsize/);
  });

  test('reloads photo when checksum changes', async ({ page }) => {
    await page.goto(`/photos/${asset.id}`);
-    await expect.poll(async () => await imageLocator(page).getAttribute('src')).toContain('thumbnail');
-    const initialSrc = await imageLocator(page).getAttribute('src');
+
+    const preview = page.getByTestId('preview').filter({ visible: true });
+    await expect(preview).toHaveAttribute('src', /.+/);
+    const initialSrc = await preview.getAttribute('src');
+
+    const websocketEvent = utils.waitForWebsocketEvent({ event: 'assetUpdate', id: asset.id });
    await utils.replaceAsset(admin.accessToken, asset.id);
-    await expect.poll(async () => await imageLocator(page).getAttribute('src')).not.toBe(initialSrc);
+    await websocketEvent;
+
+    await expect(preview).not.toHaveAttribute('src', initialSrc!);
  });
 });
@@ -12,15 +12,18 @@ import { asBearerAuth, utils } from 'src/utils';
 test.describe('Shared Links', () => {
  let admin: LoginResponseDto;
  let asset: AssetMediaResponseDto;
+  let asset2: AssetMediaResponseDto;
  let album: AlbumResponseDto;
  let sharedLink: SharedLinkResponseDto;
  let sharedLinkPassword: SharedLinkResponseDto;
+  let individualSharedLink: SharedLinkResponseDto;

  test.beforeAll(async () => {
    utils.initSdk();
    await utils.resetDatabase();
    admin = await utils.adminSetup();
    asset = await utils.createAsset(admin.accessToken);
+    asset2 = await utils.createAsset(admin.accessToken);
    album = await createAlbum(
      {
        createAlbumDto: {
@@ -39,6 +42,10 @@ test.describe('Shared Links', () => {
      albumId: album.id,
      password: 'test-password',
    });
+    individualSharedLink = await utils.createSharedLink(admin.accessToken, {
+      type: SharedLinkType.Individual,
+      assetIds: [asset.id, asset2.id],
+    });
  });

  test('download from a shared link', async ({ page }) => {
@@ -109,4 +116,21 @@ test.describe('Shared Links', () => {
    await page.waitForURL('/photos');
    await page.locator(`[data-asset-id="${asset.id}"]`).waitFor();
  });
+
+  test('owner can remove assets from an individual shared link', async ({ context, page }) => {
+    await utils.setAuthCookies(context, admin.accessToken);
+
+    await page.goto(`/share/${individualSharedLink.key}`);
+    await page.locator(`[data-asset="${asset.id}"]`).waitFor();
+    await expect(page.locator(`[data-asset]`)).toHaveCount(2);
+
+    await page.locator(`[data-asset="${asset.id}"]`).hover();
+    await page.locator(`[data-asset="${asset.id}"] [role="checkbox"]`).click();
+
+    await page.getByRole('button', { name: 'Remove from shared link' }).click();
+    await page.getByRole('button', { name: 'Remove', exact: true }).click();
+
+    await expect(page.locator(`[data-asset="${asset.id}"]`)).toHaveCount(0);
+    await expect(page.locator(`[data-asset="${asset2.id}"]`)).toHaveCount(1);
+  });
 });
@@ -20,7 +20,7 @@ export {
  toColumnarFormat,
 } from './timeline/rest-response';

-export type { Changes } from './timeline/rest-response';
+export type { Changes, FaceData } from './timeline/rest-response';

 export { randomImage, randomImageFromString, randomPreview, randomThumbnail } from './timeline/images';

@@ -7,8 +7,10 @@ import {
  AssetVisibility,
  UserAvatarColor,
  type AlbumResponseDto,
+  type AssetFaceWithoutPersonResponseDto,
  type AssetResponseDto,
  type ExifResponseDto,
+  type PersonWithFacesResponseDto,
  type TimeBucketAssetResponseDto,
  type TimeBucketsResponseDto,
  type UserResponseDto,
@@ -284,7 +286,16 @@ 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 type FaceData = {
+  people: PersonWithFacesResponseDto[];
+  unassignedFaces: AssetFaceWithoutPersonResponseDto[];
+};
+
+export function toAssetResponseDto(
+  asset: MockTimelineAsset,
+  owner?: UserResponseDto,
+  faceData?: FaceData,
+): AssetResponseDto {
  const now = new Date().toISOString();

  // Default owner if not provided
@@ -338,8 +349,8 @@ export function toAssetResponseDto(asset: MockTimelineAsset, owner?: UserRespons
    exifInfo,
    livePhotoVideoId: asset.livePhotoVideoId,
    tags: [],
-    people: [],
-    unassignedFaces: [],
+    people: faceData?.people ?? [],
+    unassignedFaces: faceData?.unassignedFaces ?? [],
    stack: asset.stack,
    isOffline: false,
    hasMetadata: true,
@@ -1,5 +1,6 @@
+import type { AssetFaceResponseDto, AssetResponseDto, PersonWithFacesResponseDto, SourceType } from '@immich/sdk';
 import { BrowserContext } from '@playwright/test';
-import { randomThumbnail } from 'src/ui/generators/timeline';
+import { type FaceData, randomThumbnail } from 'src/ui/generators/timeline';

 // Minimal valid H.264 MP4 (8x8px, 1 frame) that browsers can decode to get videoWidth/videoHeight
 const MINIMAL_MP4_BASE64 =
@@ -125,3 +126,84 @@ export const setupFaceEditorMockApiRoutes = async (
    });
  });
 };
+
+export type MockFaceSpec = {
+  personId: string;
+  personName: string;
+  faceId: string;
+  boundingBoxX1: number;
+  boundingBoxY1: number;
+  boundingBoxX2: number;
+  boundingBoxY2: number;
+};
+
+const toPersonResponseDto = (spec: MockFaceSpec) => ({
+  id: spec.personId,
+  name: spec.personName,
+  birthDate: null,
+  isHidden: false,
+  thumbnailPath: `/upload/thumbs/${spec.personId}.jpeg`,
+  updatedAt: '2025-01-01T00:00:00.000Z',
+});
+
+const toBoundingBox = (spec: MockFaceSpec, imageWidth: number, imageHeight: number) => ({
+  id: spec.faceId,
+  imageWidth,
+  imageHeight,
+  boundingBoxX1: spec.boundingBoxX1,
+  boundingBoxY1: spec.boundingBoxY1,
+  boundingBoxX2: spec.boundingBoxX2,
+  boundingBoxY2: spec.boundingBoxY2,
+});
+
+export const createMockFaceData = (specs: MockFaceSpec[], imageWidth: number, imageHeight: number): FaceData => {
+  const people: PersonWithFacesResponseDto[] = specs.map((spec) => ({
+    ...toPersonResponseDto(spec),
+    faces: [toBoundingBox(spec, imageWidth, imageHeight)],
+  }));
+
+  return { people, unassignedFaces: [] };
+};
+
+export const createMockAssetFaces = (
+  specs: MockFaceSpec[],
+  imageWidth: number,
+  imageHeight: number,
+): AssetFaceResponseDto[] => {
+  return specs.map((spec) => ({
+    ...toBoundingBox(spec, imageWidth, imageHeight),
+    person: toPersonResponseDto(spec),
+    sourceType: 'machine-learning' as SourceType,
+  }));
+};
+
+export const setupGetFacesMockApiRoute = async (context: BrowserContext, faces: AssetFaceResponseDto[]) => {
+  await context.route('**/api/faces?*', async (route, request) => {
+    if (request.method() !== 'GET') {
+      return route.fallback();
+    }
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      json: faces,
+    });
+  });
+};
+
+export const setupFaceOverlayMockApiRoutes = async (context: BrowserContext, assetDto: AssetResponseDto) => {
+  await context.route('**/api/assets/*', async (route, request) => {
+    if (request.method() !== 'GET') {
+      return route.fallback();
+    }
+    const url = new URL(request.url());
+    const assetId = url.pathname.split('/').at(-1);
+    if (assetId !== assetDto.id) {
+      return route.fallback();
+    }
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      json: assetDto,
+    });
+  });
+};
@@ -0,0 +1,55 @@
+import { faker } from '@faker-js/faker';
+import type { AssetOcrResponseDto } from '@immich/sdk';
+import { BrowserContext } from '@playwright/test';
+
+export type MockOcrBox = {
+  text: string;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  x3: number;
+  y3: number;
+  x4: number;
+  y4: number;
+};
+
+export const createMockOcrData = (assetId: string, boxes: MockOcrBox[]): AssetOcrResponseDto[] => {
+  return boxes.map((box) => ({
+    id: faker.string.uuid(),
+    assetId,
+    x1: box.x1,
+    y1: box.y1,
+    x2: box.x2,
+    y2: box.y2,
+    x3: box.x3,
+    y3: box.y3,
+    x4: box.x4,
+    y4: box.y4,
+    boxScore: 0.95,
+    textScore: 0.9,
+    text: box.text,
+  }));
+};
+
+export const setupOcrMockApiRoutes = async (
+  context: BrowserContext,
+  ocrDataByAssetId: Map<string, AssetOcrResponseDto[]>,
+) => {
+  await context.route('**/assets/*/ocr', async (route, request) => {
+    if (request.method() !== 'GET') {
+      return route.fallback();
+    }
+    const url = new URL(request.url());
+    const segments = url.pathname.split('/');
+    const assetIdIndex = segments.indexOf('assets') + 1;
+    const assetId = segments[assetIdIndex];
+
+    const ocrData = ocrDataByAssetId.get(assetId) ?? [];
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      json: ocrData,
+    });
+  });
+};
@@ -64,7 +64,9 @@ test.describe('broken-asset responsiveness', () => {

  test('broken asset in main viewer shows icon and uses text-base', async ({ context, page }) => {
    await context.route(
-      (url) => url.pathname.includes(`/api/assets/${fixture.primaryAsset.id}/thumbnail`),
+      (url) =>
+        url.pathname.includes(`/api/assets/${fixture.primaryAsset.id}/thumbnail`) ||
+        url.pathname.includes(`/api/assets/${fixture.primaryAsset.id}/original`),
      async (route) => {
        return route.fulfill({ status: 404 });
      },
@@ -73,7 +75,7 @@ test.describe('broken-asset responsiveness', () => {
    await page.goto(`/photos/${fixture.primaryAsset.id}`);
    await page.waitForSelector('#immich-asset-viewer');

-    const viewerBrokenAsset = page.locator('#immich-asset-viewer #broken-asset [data-broken-asset]');
+    const viewerBrokenAsset = page.locator('[data-viewer-content] [data-broken-asset]').first();
    await expect(viewerBrokenAsset).toBeVisible();

    await expect(viewerBrokenAsset.locator('svg')).toBeVisible();
@@ -149,7 +149,7 @@ test.describe('face-editor', () => {
    await expect(page.getByRole('dialog')).toBeVisible();
  });

-  test('Confirming tag calls createFace API and closes editor', async ({ page }) => {
+  test('Confirming tag calls createFace API with valid coordinates and closes editor', async ({ page }) => {
    const asset = selectRandom(fixture.assets, rng);
    await openFaceEditor(page, asset);

@@ -163,8 +163,15 @@ test.describe('face-editor', () => {
    await expect(page.locator('#face-editor')).toBeHidden();

    expect(faceCreateCapture.requests).toHaveLength(1);
-    expect(faceCreateCapture.requests[0].assetId).toBe(asset.id);
-    expect(faceCreateCapture.requests[0].personId).toBe(personToTag.id);
+    const request = faceCreateCapture.requests[0];
+    expect(request.assetId).toBe(asset.id);
+    expect(request.personId).toBe(personToTag.id);
+    expect(request.x).toBeGreaterThanOrEqual(0);
+    expect(request.y).toBeGreaterThanOrEqual(0);
+    expect(request.width).toBeGreaterThan(0);
+    expect(request.height).toBeGreaterThan(0);
+    expect(request.x + request.width).toBeLessThanOrEqual(request.imageWidth);
+    expect(request.y + request.height).toBeLessThanOrEqual(request.imageHeight);
  });

  test('Cancel button closes face editor', async ({ page }) => {
@@ -282,4 +289,39 @@ test.describe('face-editor', () => {
    expect(afterDrag.left).toBeGreaterThan(beforeDrag.left + 50);
    expect(afterDrag.top).toBeGreaterThan(beforeDrag.top + 20);
  });
+
+  test('Cancel on confirmation dialog keeps face editor open', async ({ page }) => {
+    const asset = selectRandom(fixture.assets, rng);
+    await openFaceEditor(page, asset);
+
+    const personToTag = mockPeople[0];
+    await page.locator('#face-selector').getByText(personToTag.name).click();
+
+    await expect(page.getByRole('dialog')).toBeVisible();
+    await page
+      .getByRole('dialog')
+      .getByRole('button', { name: /cancel/i })
+      .click();
+
+    await expect(page.getByRole('dialog')).toBeHidden();
+    await expect(page.locator('#face-selector')).toBeVisible();
+    await expect(page.locator('#face-editor')).toBeVisible();
+    expect(faceCreateCapture.requests).toHaveLength(0);
+  });
+
+  test('Clicking on face rect center does not reposition it', async ({ page }) => {
+    const asset = selectRandom(fixture.assets, rng);
+    await openFaceEditor(page, asset);
+
+    const beforeClick = await getFaceBoxRect(page);
+    const centerX = beforeClick.left + beforeClick.width / 2;
+    const centerY = beforeClick.top + beforeClick.height / 2;
+
+    await page.mouse.click(centerX, centerY);
+    await page.waitForTimeout(300);
+
+    const afterClick = await getFaceBoxRect(page);
+    expect(Math.abs(afterClick.left - beforeClick.left)).toBeLessThan(3);
+    expect(Math.abs(afterClick.top - beforeClick.top)).toBeLessThan(3);
+  });
 });
@@ -0,0 +1,264 @@
+import { expect, test } from '@playwright/test';
+import { toAssetResponseDto } from 'src/ui/generators/timeline';
+import {
+  createMockAssetFaces,
+  createMockFaceData,
+  createMockPeople,
+  type MockFaceSpec,
+  setupFaceEditorMockApiRoutes,
+  setupFaceOverlayMockApiRoutes,
+  setupGetFacesMockApiRoute,
+} from 'src/ui/mock-network/face-editor-network';
+import { assetViewerUtils } from '../timeline/utils';
+import { ensureDetailPanelVisible, setupAssetViewerFixture } from './utils';
+
+test.describe.configure({ mode: 'parallel' });
+
+const FACE_SPECS: MockFaceSpec[] = [
+  {
+    personId: 'person-alice',
+    personName: 'Alice Johnson',
+    faceId: 'face-alice',
+    boundingBoxX1: 1000,
+    boundingBoxY1: 500,
+    boundingBoxX2: 1500,
+    boundingBoxY2: 1200,
+  },
+  {
+    personId: 'person-bob',
+    personName: 'Bob Smith',
+    faceId: 'face-bob',
+    boundingBoxX1: 2000,
+    boundingBoxY1: 800,
+    boundingBoxX2: 2400,
+    boundingBoxY2: 1600,
+  },
+];
+
+const setupFaceMocks = async (
+  context: import('@playwright/test').BrowserContext,
+  fixture: ReturnType<typeof setupAssetViewerFixture>,
+) => {
+  const mockPeople = createMockPeople(4);
+  const faceData = createMockFaceData(
+    FACE_SPECS,
+    fixture.primaryAssetDto.width ?? 3000,
+    fixture.primaryAssetDto.height ?? 4000,
+  );
+  const assetDtoWithFaces = toAssetResponseDto(fixture.primaryAsset, undefined, faceData);
+  await setupFaceOverlayMockApiRoutes(context, assetDtoWithFaces);
+  await setupFaceEditorMockApiRoutes(context, mockPeople, { requests: [] });
+};
+
+test.describe('face overlay bounding boxes', () => {
+  const fixture = setupAssetViewerFixture(901);
+
+  test.beforeEach(async ({ context }) => {
+    await setupFaceMocks(context, fixture);
+  });
+
+  test('face overlay divs render with correct aria labels', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    const aliceOverlay = page.getByLabel('Person: Alice Johnson');
+    const bobOverlay = page.getByLabel('Person: Bob Smith');
+
+    await expect(aliceOverlay).toBeVisible();
+    await expect(bobOverlay).toBeVisible();
+  });
+
+  test('face overlay shows border on hover', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    const aliceOverlay = page.getByLabel('Person: Alice Johnson');
+    await expect(aliceOverlay).toBeVisible();
+
+    const activeBorder = page.locator('[data-viewer-content] .border-solid.border-white.border-3');
+    await expect(activeBorder).toHaveCount(0);
+
+    await aliceOverlay.hover();
+    await expect(activeBorder).toHaveCount(1);
+  });
+
+  test('face name tooltip appears on hover', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    const aliceOverlay = page.getByLabel('Person: Alice Johnson');
+    await expect(aliceOverlay).toBeVisible();
+
+    await aliceOverlay.hover();
+
+    const nameTooltip = page.locator('[data-viewer-content]').getByText('Alice Johnson');
+    await expect(nameTooltip).toBeVisible();
+  });
+
+  test('face overlays hidden in face edit mode', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    const aliceOverlay = page.getByLabel('Person: Alice Johnson');
+    await expect(aliceOverlay).toBeVisible();
+
+    await ensureDetailPanelVisible(page);
+    await page.getByLabel('Tag people').click();
+    await page.locator('#face-selector').waitFor({ state: 'visible' });
+
+    await expect(aliceOverlay).toBeHidden();
+  });
+
+  test('face overlay hover works after exiting face edit mode', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    const aliceOverlay = page.getByLabel('Person: Alice Johnson');
+    await expect(aliceOverlay).toBeVisible();
+
+    await ensureDetailPanelVisible(page);
+    await page.getByLabel('Tag people').click();
+    await page.locator('#face-selector').waitFor({ state: 'visible' });
+    await expect(aliceOverlay).toBeHidden();
+
+    await page.getByRole('button', { name: /cancel/i }).click();
+    await expect(page.locator('#face-selector')).toBeHidden();
+
+    await expect(aliceOverlay).toBeVisible();
+
+    const activeBorder = page.locator('[data-viewer-content] .border-solid.border-white.border-3');
+    await expect(activeBorder).toHaveCount(0);
+    await aliceOverlay.hover();
+    await expect(activeBorder).toHaveCount(1);
+  });
+});
+
+test.describe('zoom and face editor interaction', () => {
+  const fixture = setupAssetViewerFixture(902);
+
+  test.beforeEach(async ({ context }) => {
+    await setupFaceMocks(context, fixture);
+  });
+
+  test('zoom is preserved when entering face edit mode', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    const { width, height } = page.viewportSize()!;
+    await page.mouse.move(width / 2, height / 2);
+    await page.mouse.wheel(0, -1);
+
+    const imgLocator = page.locator('[data-viewer-content] img[data-testid="preview"]');
+    await expect(async () => {
+      const transform = await imgLocator.evaluate((element) => {
+        return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
+      });
+      expect(transform).not.toBe('none');
+      expect(transform).not.toBe('');
+    }).toPass({ timeout: 2000 });
+
+    await ensureDetailPanelVisible(page);
+    await page.getByLabel('Tag people').click();
+    await page.locator('#face-selector').waitFor({ state: 'visible' });
+
+    await expect(page.locator('#face-editor')).toBeVisible();
+
+    const afterTransform = await imgLocator.evaluate((element) => {
+      return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
+    });
+    expect(afterTransform).not.toBe('none');
+  });
+});
+
+test.describe('face overlay via detail panel interaction', () => {
+  const fixture = setupAssetViewerFixture(903);
+
+  test.beforeEach(async ({ context }) => {
+    await setupFaceMocks(context, fixture);
+  });
+
+  test('hovering person in detail panel shows face overlay border', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    await ensureDetailPanelVisible(page);
+
+    const personLink = page.locator('#detail-panel a').filter({ hasText: 'Alice Johnson' });
+    await expect(personLink).toBeVisible();
+
+    const activeBorder = page.locator('[data-viewer-content] .border-solid.border-white.border-3');
+    await expect(activeBorder).toHaveCount(0);
+
+    await personLink.hover();
+    await expect(activeBorder).toHaveCount(1);
+  });
+
+  test('touch pointer on person in detail panel shows face overlay border', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    await ensureDetailPanelVisible(page);
+
+    const personLink = page.locator('#detail-panel a').filter({ hasText: 'Alice Johnson' });
+    await expect(personLink).toBeVisible();
+
+    const activeBorder = page.locator('[data-viewer-content] .border-solid.border-white.border-3');
+    await expect(activeBorder).toHaveCount(0);
+
+    // Simulate a touch-type pointerover (the fix changed from onmouseover to onpointerover,
+    // which fires for touch pointers unlike mouseover)
+    await personLink.dispatchEvent('pointerover', { pointerType: 'touch' });
+    await expect(activeBorder).toHaveCount(1);
+  });
+
+  test('hovering person in detail panel works after exiting face edit mode', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    await ensureDetailPanelVisible(page);
+    await page.getByLabel('Tag people').click();
+    await page.locator('#face-selector').waitFor({ state: 'visible' });
+
+    await page.getByRole('button', { name: /cancel/i }).click();
+    await expect(page.locator('#face-selector')).toBeHidden();
+
+    const personLink = page.locator('#detail-panel a').filter({ hasText: 'Alice Johnson' });
+    await expect(personLink).toBeVisible();
+
+    const activeBorder = page.locator('[data-viewer-content] .border-solid.border-white.border-3');
+    await personLink.hover();
+    await expect(activeBorder).toHaveCount(1);
+  });
+});
+
+test.describe('face overlay via edit faces side panel', () => {
+  const fixture = setupAssetViewerFixture(904);
+
+  test.beforeEach(async ({ context }) => {
+    await setupFaceMocks(context, fixture);
+
+    const assetFaces = createMockAssetFaces(
+      FACE_SPECS,
+      fixture.primaryAssetDto.width ?? 3000,
+      fixture.primaryAssetDto.height ?? 4000,
+    );
+    await setupGetFacesMockApiRoute(context, assetFaces);
+  });
+
+  test('hovering person in edit faces panel shows face overlay border', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    await ensureDetailPanelVisible(page);
+    await page.getByLabel('Edit people').click();
+
+    const faceThumbnail = page.getByTestId('face-thumbnail').first();
+    await expect(faceThumbnail).toBeVisible();
+
+    const activeBorder = page.locator('[data-viewer-content] .border-solid.border-white.border-3');
+    await expect(activeBorder).toHaveCount(0);
+
+    await faceThumbnail.hover();
+    await expect(activeBorder).toHaveCount(1);
+  });
+});
@@ -0,0 +1,300 @@
+import type { AssetOcrResponseDto, 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 { createMockOcrData, setupOcrMockApiRoutes } from 'src/ui/mock-network/ocr-network';
+import { assetViewerUtils } from '../timeline/utils';
+import { setupAssetViewerFixture } from './utils';
+
+test.describe.configure({ mode: 'parallel' });
+
+const PRIMARY_OCR_BOXES = [
+  { text: 'Hello World', x1: 0.1, y1: 0.1, x2: 0.4, y2: 0.1, x3: 0.4, y3: 0.15, x4: 0.1, y4: 0.15 },
+  { text: 'Immich Photo', x1: 0.2, y1: 0.3, x2: 0.6, y2: 0.3, x3: 0.6, y3: 0.36, x4: 0.2, y4: 0.36 },
+];
+
+const SECONDARY_OCR_BOXES = [
+  { text: 'Second Asset Text', x1: 0.15, y1: 0.2, x2: 0.55, y2: 0.2, x3: 0.55, y3: 0.26, x4: 0.15, y4: 0.26 },
+];
+
+test.describe('OCR bounding boxes', () => {
+  const fixture = setupAssetViewerFixture(920);
+
+  test.beforeEach(async ({ context }) => {
+    const primaryAssetDto = toAssetResponseDto(fixture.primaryAsset);
+    const ocrDataByAssetId = new Map<string, AssetOcrResponseDto[]>([
+      [primaryAssetDto.id, createMockOcrData(primaryAssetDto.id, PRIMARY_OCR_BOXES)],
+    ]);
+
+    await setupOcrMockApiRoutes(context, ocrDataByAssetId);
+  });
+
+  test('OCR bounding boxes appear when clicking OCR button', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    const ocrButton = page.getByLabel('Text recognition');
+    await expect(ocrButton).toBeVisible();
+    await ocrButton.click();
+
+    const ocrBoxes = page.locator('[data-viewer-content] [data-testid="ocr-box"]');
+    await expect(ocrBoxes).toHaveCount(2);
+
+    await expect(ocrBoxes.nth(0)).toContainText('Hello World');
+    await expect(ocrBoxes.nth(1)).toContainText('Immich Photo');
+  });
+
+  test('OCR bounding boxes toggle off on second click', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    const ocrButton = page.getByLabel('Text recognition');
+    await ocrButton.click();
+    await expect(page.locator('[data-viewer-content] [data-testid="ocr-box"]').first()).toBeVisible();
+
+    await ocrButton.click();
+    await expect(page.locator('[data-viewer-content] [data-testid="ocr-box"]')).toHaveCount(0);
+  });
+});
+
+test.describe('OCR with stacked assets', () => {
+  const fixture = setupAssetViewerFixture(921);
+  let mockStack: MockStack;
+  let primaryAssetDto: AssetResponseDto;
+  let secondAssetDto: AssetResponseDto;
+
+  test.beforeAll(async () => {
+    primaryAssetDto = toAssetResponseDto(fixture.primaryAsset);
+    secondAssetDto = createMockStackAsset(fixture.adminUserId);
+    secondAssetDto.originalFileName = 'second-ocr-asset.jpg';
+    mockStack = createMockStack(primaryAssetDto, [secondAssetDto], new Set());
+  });
+
+  test.beforeEach(async ({ context }) => {
+    await setupBrokenAssetMockApiRoutes(context, mockStack);
+
+    const ocrDataByAssetId = new Map<string, AssetOcrResponseDto[]>([
+      [primaryAssetDto.id, createMockOcrData(primaryAssetDto.id, PRIMARY_OCR_BOXES)],
+      [secondAssetDto.id, createMockOcrData(secondAssetDto.id, SECONDARY_OCR_BOXES)],
+    ]);
+
+    await setupOcrMockApiRoutes(context, ocrDataByAssetId);
+  });
+
+  test('different OCR boxes shown for different stacked assets', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    const ocrButton = page.getByLabel('Text recognition');
+    await expect(ocrButton).toBeVisible();
+    await ocrButton.click();
+
+    const ocrBoxes = page.locator('[data-viewer-content] [data-testid="ocr-box"]');
+    await expect(ocrBoxes).toHaveCount(2);
+    await expect(ocrBoxes.nth(0)).toContainText('Hello World');
+
+    const stackThumbnails = page.locator('#stack-slideshow [data-asset]');
+    await expect(stackThumbnails).toHaveCount(2);
+    await stackThumbnails.nth(1).click();
+
+    // refreshOcr() clears showOverlay when switching assets, so re-enable it
+    await expect(ocrBoxes).toHaveCount(0);
+    await expect(ocrButton).toBeVisible();
+    await ocrButton.click();
+
+    await expect(ocrBoxes).toHaveCount(1);
+    await expect(ocrBoxes.first()).toContainText('Second Asset Text');
+  });
+});
+
+test.describe('OCR boxes and zoom', () => {
+  const fixture = setupAssetViewerFixture(922);
+
+  test.beforeEach(async ({ context }) => {
+    const primaryAssetDto = toAssetResponseDto(fixture.primaryAsset);
+    const ocrDataByAssetId = new Map<string, AssetOcrResponseDto[]>([
+      [primaryAssetDto.id, createMockOcrData(primaryAssetDto.id, PRIMARY_OCR_BOXES)],
+    ]);
+
+    await setupOcrMockApiRoutes(context, ocrDataByAssetId);
+  });
+
+  test('OCR boxes scale with zoom', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    const ocrButton = page.getByLabel('Text recognition');
+    await expect(ocrButton).toBeVisible();
+    await ocrButton.click();
+
+    const ocrBox = page.locator('[data-viewer-content] [data-testid="ocr-box"]').first();
+    await expect(ocrBox).toBeVisible();
+
+    const initialBox = await ocrBox.boundingBox();
+    expect(initialBox).toBeTruthy();
+
+    const { width, height } = page.viewportSize()!;
+    await page.mouse.move(width / 2, height / 2);
+    await page.mouse.wheel(0, -3);
+
+    await expect(async () => {
+      const zoomedBox = await ocrBox.boundingBox();
+      expect(zoomedBox).toBeTruthy();
+      expect(zoomedBox!.width).toBeGreaterThan(initialBox!.width);
+      expect(zoomedBox!.height).toBeGreaterThan(initialBox!.height);
+    }).toPass({ timeout: 2000 });
+  });
+});
+
+test.describe('OCR text interaction', () => {
+  const fixture = setupAssetViewerFixture(923);
+
+  test.beforeEach(async ({ context }) => {
+    const primaryAssetDto = toAssetResponseDto(fixture.primaryAsset);
+    const ocrDataByAssetId = new Map<string, AssetOcrResponseDto[]>([
+      [primaryAssetDto.id, createMockOcrData(primaryAssetDto.id, PRIMARY_OCR_BOXES)],
+    ]);
+
+    await setupOcrMockApiRoutes(context, ocrDataByAssetId);
+  });
+
+  test('OCR text box has data-overlay-interactive attribute', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    await page.getByLabel('Text recognition').click();
+
+    const ocrBox = page.locator('[data-viewer-content] [data-testid="ocr-box"]').first();
+    await expect(ocrBox).toBeVisible();
+    await expect(ocrBox).toHaveAttribute('data-overlay-interactive');
+  });
+
+  test('OCR text box receives focus on click', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    await page.getByLabel('Text recognition').click();
+
+    const ocrBox = page.locator('[data-viewer-content] [data-testid="ocr-box"]').first();
+    await expect(ocrBox).toBeVisible();
+
+    await ocrBox.click();
+    await expect(ocrBox).toBeFocused();
+  });
+
+  test('dragging on OCR text box does not trigger image pan', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    await page.getByLabel('Text recognition').click();
+
+    const ocrBox = page.locator('[data-viewer-content] [data-testid="ocr-box"]').first();
+    await expect(ocrBox).toBeVisible();
+
+    const imgLocator = page.locator('[data-viewer-content] img[draggable="false"]');
+    const initialTransform = await imgLocator.evaluate((element) => {
+      return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
+    });
+
+    const box = await ocrBox.boundingBox();
+    expect(box).toBeTruthy();
+    const centerX = box!.x + box!.width / 2;
+    const centerY = box!.y + box!.height / 2;
+
+    await page.mouse.move(centerX, centerY);
+    await page.mouse.down();
+    await page.mouse.move(centerX + 50, centerY + 30, { steps: 5 });
+    await page.mouse.up();
+
+    const afterTransform = await imgLocator.evaluate((element) => {
+      return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
+    });
+    expect(afterTransform).toBe(initialTransform);
+  });
+
+  test('split touch gesture across zoom container does not trigger zoom', async ({ page }) => {
+    await page.goto(`/photos/${fixture.primaryAsset.id}`);
+    await assetViewerUtils.waitForViewerLoad(page, fixture.primaryAsset);
+
+    await page.getByLabel('Text recognition').click();
+    const ocrBox = page.locator('[data-viewer-content] [data-testid="ocr-box"]').first();
+    await expect(ocrBox).toBeVisible();
+
+    const imgLocator = page.locator('[data-viewer-content] img[draggable="false"]');
+    const initialTransform = await imgLocator.evaluate((element) => {
+      return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
+    });
+
+    const viewerContent = page.locator('[data-viewer-content]');
+    const viewerBox = await viewerContent.boundingBox();
+    expect(viewerBox).toBeTruthy();
+
+    // Dispatch a synthetic split gesture: one touch inside the viewer, one outside
+    await page.evaluate(
+      ({ viewerCenterX, viewerCenterY, outsideY }) => {
+        const viewer = document.querySelector('[data-viewer-content]');
+        if (!viewer) {
+          return;
+        }
+
+        const createTouch = (id: number, x: number, y: number) => {
+          return new Touch({
+            identifier: id,
+            target: viewer,
+            clientX: x,
+            clientY: y,
+          });
+        };
+
+        const insideTouch = createTouch(0, viewerCenterX, viewerCenterY);
+        const outsideTouch = createTouch(1, viewerCenterX, outsideY);
+
+        const touchStartEvent = new TouchEvent('touchstart', {
+          touches: [insideTouch, outsideTouch],
+          targetTouches: [insideTouch],
+          changedTouches: [insideTouch, outsideTouch],
+          bubbles: true,
+          cancelable: true,
+        });
+
+        const touchMoveEvent = new TouchEvent('touchmove', {
+          touches: [createTouch(0, viewerCenterX, viewerCenterY - 30), createTouch(1, viewerCenterX, outsideY + 30)],
+          targetTouches: [createTouch(0, viewerCenterX, viewerCenterY - 30)],
+          changedTouches: [
+            createTouch(0, viewerCenterX, viewerCenterY - 30),
+            createTouch(1, viewerCenterX, outsideY + 30),
+          ],
+          bubbles: true,
+          cancelable: true,
+        });
+
+        const touchEndEvent = new TouchEvent('touchend', {
+          touches: [],
+          targetTouches: [],
+          changedTouches: [insideTouch, outsideTouch],
+          bubbles: true,
+          cancelable: true,
+        });
+
+        viewer.dispatchEvent(touchStartEvent);
+        viewer.dispatchEvent(touchMoveEvent);
+        viewer.dispatchEvent(touchEndEvent);
+      },
+      {
+        viewerCenterX: viewerBox!.x + viewerBox!.width / 2,
+        viewerCenterY: viewerBox!.y + viewerBox!.height / 2,
+        outsideY: 10, // near the top of the page, outside the viewer
+      },
+    );
+
+    const afterTransform = await imgLocator.evaluate((element) => {
+      return getComputedStyle(element.closest('[style*="transform"]') ?? element).transform;
+    });
+    expect(afterTransform).toBe(initialTransform);
+  });
+});
@@ -6,6 +6,7 @@ import {
  generateTimelineData,
  TimelineAssetConfig,
  TimelineData,
+  toAssetResponseDto,
 } from 'src/ui/generators/timeline';
 import { setupBaseMockApiRoutes } from 'src/ui/mock-network/base-network';
 import { setupTimelineMockApiRoutes, TimelineTestContext } from 'src/ui/mock-network/timeline-network';
@@ -30,6 +31,10 @@ test.describe('search gallery-viewer', () => {
  };

  test.beforeAll(async () => {
+    test.fail(
+      process.env.PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS !== '1',
+      'This test requires env var: PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS=1',
+    );
    adminUserId = faker.string.uuid();
    testContext.adminId = adminUserId;
    timelineRestData = generateTimelineData({ ...createDefaultTimelineConfig(), ownerId: adminUserId });
@@ -44,7 +49,10 @@ test.describe('search gallery-viewer', () => {

    await context.route('**/api/search/metadata', async (route, request) => {
      if (request.method() === 'POST') {
-        const searchAssets = assets.slice(0, 5).filter((asset) => !changes.assetDeletions.includes(asset.id));
+        const searchAssets = assets
+          .slice(0, 5)
+          .filter((asset) => !changes.assetDeletions.includes(asset.id))
+          .map((asset) => toAssetResponseDto(asset));
        return route.fulfill({
          status: 200,
          contentType: 'application/json',
@@ -164,12 +164,8 @@ export const assetViewerUtils = {
  },
  async waitForViewerLoad(page: Page, asset: TimelineAssetConfig) {
    await page
-      .locator(
-        `img[draggable="false"][src="/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.thumbhash}&edited=true"]`,
-      )
-      .or(
-        page.locator(`video[poster="/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.thumbhash}&edited=true"]`),
-      )
+      .locator(`img[data-testid="preview"][src*="${asset.id}"]`)
+      .or(page.locator(`video[poster*="${asset.id}"]`))
      .waitFor();
  },
  async expectActiveAssetToBe(page: Page, assetId: string) {
@@ -215,8 +211,9 @@ export const pageUtils = {
    await page.getByText('Confirm').click();
  },
  async selectDay(page: Page, day: string) {
-    await page.getByTitle(day).hover();
-    await page.locator('[data-group] .w-8').click();
+    const section = page.getByTitle(day).locator('xpath=ancestor::section[@data-group]');
+    await section.hover();
+    await section.locator('.w-8').click();
  },
  async pauseTestDebug() {
    console.log('NOTE: pausing test indefinately for debug');
@@ -177,40 +177,51 @@ export const utils = {
  },

  resetDatabase: async (tables?: string[]) => {
-    try {
-      client = await utils.connectDatabase();
+    client = await utils.connectDatabase();

-      tables = tables || [
-        // TODO e2e test for deleting a stack, since it is quite complex
-        'stack',
-        'library',
-        'shared_link',
-        'person',
-        'album',
-        'asset',
-        'asset_face',
-        'activity',
-        'api_key',
-        'session',
-        'user',
-        'system_metadata',
-        'tag',
-      ];
+    tables = tables || [
+      // TODO e2e test for deleting a stack, since it is quite complex
+      'stack',
+      'library',
+      'shared_link',
+      'person',
+      'album',
+      'asset',
+      'asset_face',
+      'activity',
+      'api_key',
+      'session',
+      'user',
+      'system_metadata',
+      'tag',
+    ];

-      const sql: string[] = [];
+    const truncateTables = tables.filter((table) => table !== 'system_metadata');
+    const sql: string[] = [];

-      for (const table of tables) {
-        if (table === 'system_metadata') {
-          sql.push(`DELETE FROM "system_metadata" where "key" NOT IN ('reverse-geocoding-state', 'system-flags');`);
-        } else {
-          sql.push(`DELETE FROM "${table}" CASCADE;`);
+    if (truncateTables.length > 0) {
+      sql.push(`TRUNCATE "${truncateTables.join('", "')}" CASCADE;`);
+    }
+
+    if (tables.includes('system_metadata')) {
+      sql.push(`DELETE FROM "system_metadata" where "key" NOT IN ('reverse-geocoding-state', 'system-flags');`);
+    }
+
+    const query = sql.join('\n');
+    const maxRetries = 3;
+
+    for (let attempt = 1; attempt <= maxRetries; attempt++) {
+      try {
+        await client.query(query);
+        return;
+      } catch (error: any) {
+        if (error?.code === '40P01' && attempt < maxRetries) {
+          await new Promise((resolve) => setTimeout(resolve, 250 * attempt));
+          continue;
        }
+        console.error('Failed to reset database', error);
+        throw error;
      }
-
-      await client.query(sql.join('\n'));
-    } catch (error) {
-      console.error('Failed to reset database', error);
-      throw error;
    }
  },

@@ -0,0 +1,273 @@
+import { faker } from '@faker-js/faker';
+import { expect, test } from '@playwright/test';
+import {
+  Changes,
+  createDefaultTimelineConfig,
+  generateTimelineData,
+  SeededRandom,
+  selectRandom,
+  TimelineAssetConfig,
+  TimelineData,
+} from 'src/ui/generators/timeline';
+import { setupBaseMockApiRoutes } from 'src/ui/mock-network/base-network';
+import { setupTimelineMockApiRoutes, TimelineTestContext } from 'src/ui/mock-network/timeline-network';
+import { assetViewerUtils } from 'src/ui/specs/timeline/utils';
+import { utils } from 'src/utils';
+
+test.describe.configure({ mode: 'parallel' });
+test.describe('asset-viewer', () => {
+  const rng = new SeededRandom(529);
+  let adminUserId: string;
+  let timelineRestData: TimelineData;
+  const assets: TimelineAssetConfig[] = [];
+  const yearMonths: string[] = [];
+  const testContext = new TimelineTestContext();
+  const changes: Changes = {
+    albumAdditions: [],
+    assetDeletions: [],
+    assetArchivals: [],
+    assetFavorites: [],
+  };
+
+  test.beforeAll(async () => {
+    utils.initSdk();
+    adminUserId = faker.string.uuid();
+    testContext.adminId = adminUserId;
+    timelineRestData = generateTimelineData({ ...createDefaultTimelineConfig(), ownerId: adminUserId });
+    for (const timeBucket of timelineRestData.buckets.values()) {
+      assets.push(...timeBucket);
+    }
+    for (const yearMonth of timelineRestData.buckets.keys()) {
+      const [year, month] = yearMonth.split('-');
+      yearMonths.push(`${year}-${Number(month)}`);
+    }
+  });
+
+  test.beforeEach(async ({ context }) => {
+    await setupBaseMockApiRoutes(context, adminUserId);
+    await setupTimelineMockApiRoutes(context, timelineRestData, changes, testContext);
+  });
+
+  test.afterEach(() => {
+    testContext.slowBucket = false;
+    changes.albumAdditions = [];
+    changes.assetDeletions = [];
+    changes.assetArchivals = [];
+    changes.assetFavorites = [];
+  });
+
+  test.describe('/photos/:id', () => {
+    test('Navigate to next asset via button', async ({ page }) => {
+      const asset = selectRandom(assets, rng);
+      const index = assets.indexOf(asset);
+      await page.goto(`/photos/${asset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${asset.id}`);
+
+      await page.getByLabel('View next asset').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[index + 1]);
+      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${assets[index + 1].id}`);
+    });
+
+    test('Navigate to previous asset via button', async ({ page }) => {
+      const asset = selectRandom(assets, rng);
+      const index = assets.indexOf(asset);
+      await page.goto(`/photos/${asset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${asset.id}`);
+
+      await page.getByLabel('View previous asset').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[index - 1]);
+      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${assets[index - 1].id}`);
+    });
+
+    test('Navigate to next asset via keyboard (ArrowRight)', async ({ page }) => {
+      const asset = selectRandom(assets, rng);
+      const index = assets.indexOf(asset);
+      await page.goto(`/photos/${asset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${asset.id}`);
+
+      await page.getByTestId('next-asset').waitFor();
+      await page.keyboard.press('ArrowRight');
+      await assetViewerUtils.waitForViewerLoad(page, assets[index + 1]);
+      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${assets[index + 1].id}`);
+    });
+
+    test('Navigate to previous asset via keyboard (ArrowLeft)', async ({ page }) => {
+      const asset = selectRandom(assets, rng);
+      const index = assets.indexOf(asset);
+      await page.goto(`/photos/${asset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${asset.id}`);
+
+      await page.getByTestId('previous-asset').waitFor();
+      await page.keyboard.press('ArrowLeft');
+      await assetViewerUtils.waitForViewerLoad(page, assets[index - 1]);
+      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${assets[index - 1].id}`);
+    });
+
+    test('Navigate forward 5 times via button', async ({ page }) => {
+      const asset = selectRandom(assets, rng);
+      const index = assets.indexOf(asset);
+      await page.goto(`/photos/${asset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+
+      for (let i = 1; i <= 5; i++) {
+        await page.getByLabel('View next asset').click();
+        await assetViewerUtils.waitForViewerLoad(page, assets[index + i]);
+        await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${assets[index + i].id}`);
+      }
+    });
+
+    test('Navigate backward 5 times via button', async ({ page }) => {
+      const asset = selectRandom(assets, rng);
+      const index = assets.indexOf(asset);
+      await page.goto(`/photos/${asset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+
+      for (let i = 1; i <= 5; i++) {
+        await page.getByLabel('View previous asset').click();
+        await assetViewerUtils.waitForViewerLoad(page, assets[index - i]);
+        await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${assets[index - i].id}`);
+      }
+    });
+
+    test('Navigate forward then backward via keyboard', async ({ page }) => {
+      const asset = selectRandom(assets, rng);
+      const index = assets.indexOf(asset);
+      await page.goto(`/photos/${asset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+
+      // Navigate forward 3 times
+      for (let i = 1; i <= 3; i++) {
+        await page.getByTestId('next-asset').waitFor();
+        await page.keyboard.press('ArrowRight');
+        await assetViewerUtils.waitForViewerLoad(page, assets[index + i]);
+      }
+
+      // Navigate backward 3 times to return to original
+      for (let i = 2; i >= 0; i--) {
+        await page.getByTestId('previous-asset').waitFor();
+        await page.keyboard.press('ArrowLeft');
+        await assetViewerUtils.waitForViewerLoad(page, assets[index + i]);
+      }
+
+      // Verify we're back at the original asset
+      await expect.poll(() => new URL(page.url()).pathname).toBe(`/photos/${asset.id}`);
+    });
+
+    test('Verify no next button on last asset', async ({ page }) => {
+      const lastAsset = assets.at(-1)!;
+      await page.goto(`/photos/${lastAsset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, lastAsset);
+
+      // Verify next button doesn't exist
+      await expect(page.getByLabel('View next asset')).toHaveCount(0);
+    });
+
+    test('Verify no previous button on first asset', async ({ page }) => {
+      const firstAsset = assets[0];
+      await page.goto(`/photos/${firstAsset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, firstAsset);
+
+      // Verify previous button doesn't exist
+      await expect(page.getByLabel('View previous asset')).toHaveCount(0);
+    });
+
+    test('Delete photo advances to next', async ({ page }) => {
+      const asset = selectRandom(assets, rng);
+      await page.goto(`/photos/${asset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await page.getByLabel('Delete').click();
+      const index = assets.indexOf(asset);
+      await assetViewerUtils.waitForViewerLoad(page, assets[index + 1]);
+    });
+    test('Delete photo advances to next (2x)', async ({ page }) => {
+      const asset = selectRandom(assets, rng);
+      await page.goto(`/photos/${asset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await page.getByLabel('Delete').click();
+      const index = assets.indexOf(asset);
+      await assetViewerUtils.waitForViewerLoad(page, assets[index + 1]);
+      await page.getByLabel('Delete').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[index + 2]);
+    });
+    test('Delete last photo advances to prev', async ({ page }) => {
+      const asset = assets.at(-1)!;
+      await page.goto(`/photos/${asset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await page.getByLabel('Delete').click();
+      const index = assets.indexOf(asset);
+      await assetViewerUtils.waitForViewerLoad(page, assets[index - 1]);
+    });
+    test('Delete last photo advances to prev (2x)', async ({ page }) => {
+      const asset = assets.at(-1)!;
+      await page.goto(`/photos/${asset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await page.getByLabel('Delete').click();
+      const index = assets.indexOf(asset);
+      await assetViewerUtils.waitForViewerLoad(page, assets[index - 1]);
+      await page.getByLabel('Delete').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[index - 2]);
+    });
+  });
+  test.describe('/trash/photos/:id', () => {
+    test('Delete trashed photo advances to next', async ({ page }) => {
+      const asset = selectRandom(assets, rng);
+      const index = assets.indexOf(asset);
+      const deletedAssets = assets.slice(index - 10, index + 10).map((asset) => asset.id);
+      changes.assetDeletions.push(...deletedAssets);
+      await page.goto(`/trash/photos/${asset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await page.getByLabel('Delete').click();
+      // confirm dialog
+      await page.getByRole('button').getByText('Delete').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[index + 1]);
+    });
+    test('Delete trashed photo advances to next 2x', async ({ page }) => {
+      const asset = selectRandom(assets, rng);
+      const index = assets.indexOf(asset);
+      const deletedAssets = assets.slice(index - 10, index + 10).map((asset) => asset.id);
+      changes.assetDeletions.push(...deletedAssets);
+      await page.goto(`/trash/photos/${asset.id}`);
+      await assetViewerUtils.waitForViewerLoad(page, asset);
+      await page.getByLabel('Delete').click();
+      // confirm dialog
+      await page.getByRole('button').getByText('Delete').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[index + 1]);
+      await page.getByLabel('Delete').click();
+      // confirm dialog
+      await page.getByRole('button').getByText('Delete').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[index + 2]);
+    });
+    test('Delete trashed photo advances to prev', async ({ page }) => {
+      const asset = selectRandom(assets, rng);
+      const index = assets.indexOf(asset);
+      const deletedAssets = assets.slice(index - 10, index + 10).map((asset) => asset.id);
+      changes.assetDeletions.push(...deletedAssets);
+      await page.goto(`/trash/photos/${assets[index + 9].id}`);
+      await assetViewerUtils.waitForViewerLoad(page, assets[index + 9]);
+      await page.getByLabel('Delete').click();
+      // confirm dialog
+      await page.getByRole('button').getByText('Delete').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[index + 8]);
+    });
+    test('Delete trashed photo advances to prev 2x', async ({ page }) => {
+      const asset = selectRandom(assets, rng);
+      const index = assets.indexOf(asset);
+      const deletedAssets = assets.slice(index - 10, index + 10).map((asset) => asset.id);
+      changes.assetDeletions.push(...deletedAssets);
+      await page.goto(`/trash/photos/${assets[index + 9].id}`);
+      await assetViewerUtils.waitForViewerLoad(page, assets[index + 9]);
+      await page.getByLabel('Delete').click();
+      // confirm dialog
+      await page.getByRole('button').getByText('Delete').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[index + 8]);
+      await page.getByLabel('Delete').click();
+      // confirm dialog
+      await page.getByRole('button').getByText('Delete').click();
+      await assetViewerUtils.waitForViewerLoad(page, assets[index + 7]);
+    });
+  });
+});
@@ -1007,6 +1007,8 @@
  "editor_edits_applied_success": "Edits applied successfully",
  "editor_flip_horizontal": "Flip horizontal",
  "editor_flip_vertical": "Flip vertical",
+  "editor_handle_corner": "{corner, select, top_left {Top-left} top_right {Top-right} bottom_left {Bottom-left} bottom_right {Bottom-right} other {A}} corner handle",
+  "editor_handle_edge": "{edge, select, top {Top} bottom {Bottom} left {Left} right {Right} other {An}} edge handle",
  "editor_orientation": "Orientation",
  "editor_reset_all_changes": "Reset changes",
  "editor_rotate_left": "Rotate 90° counterclockwise",
@@ -1072,7 +1074,7 @@
    "failed_to_update_notification_status": "Failed to update notification status",
    "incorrect_email_or_password": "Incorrect email or password",
    "library_folder_already_exists": "This import path already exists.",
-    "page_not_found": "Page not found :/",
+    "page_not_found": "Page not found",
    "paths_validation_failed": "{paths, plural, one {# path} other {# paths}} failed validation",
    "profile_picture_transparent_pixels": "Profile pictures cannot have transparent pixels. Please zoom in and/or move the image.",
    "quota_higher_than_disk_size": "You set a quota higher than the disk size",
@@ -1649,6 +1651,7 @@
  "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",
@@ -64,14 +64,6 @@ class OrtSession:
    def _providers_default(self) -> list[str]:
        available_providers = set(ort.get_available_providers())
        log.debug(f"Available ORT providers: {available_providers}")
-        if (openvino := "OpenVINOExecutionProvider") in available_providers:
-            device_ids: list[str] = ort.capi._pybind_state.get_available_openvino_device_ids()
-            log.debug(f"Available OpenVINO devices: {device_ids}")
-
-            gpu_devices = [device_id for device_id in device_ids if device_id.startswith("GPU")]
-            if not gpu_devices:
-                log.warning("No GPU device found in OpenVINO. Falling back to CPU.")
-                available_providers.remove(openvino)
        return [provider for provider in SUPPORTED_PROVIDERS if provider in available_providers]

    @property
@@ -102,12 +94,19 @@ class OrtSession:
                        "migraphx_fp16_enable": "1" if settings.rocm_precision == ModelPrecision.FP16 else "0",
                    }
                case "OpenVINOExecutionProvider":
-                    openvino_dir = self.model_path.parent / "openvino"
-                    device = f"GPU.{settings.device_id}"
+                    device_ids: list[str] = ort.capi._pybind_state.get_available_openvino_device_ids()
+                    # Check for available devices, preferring GPU over CPU
+                    gpu_devices = [d for d in device_ids if d.startswith("GPU")]
+                    if gpu_devices:
+                        device_type = f"GPU.{settings.device_id}"
+                        log.debug(f"OpenVINO: Using GPU device {device_type}")
+                    else:
+                        device_type = "CPU"
+                        log.debug("OpenVINO: No GPU found, using CPU")
                    options = {
-                        "device_type": device,
+                        "device_type": device_type,
                        "precision": settings.openvino_precision.value,
-                        "cache_dir": openvino_dir.as_posix(),
+                        "cache_dir": (self.model_path.parent / "openvino").as_posix(),
                    }
                case "CoreMLExecutionProvider":
                    options = {
@@ -139,12 +138,14 @@ class OrtSession:
        sess_options.enable_cpu_mem_arena = settings.model_arena

        # avoid thread contention between models
+        # Set inter_op threads
        if settings.model_inter_op_threads > 0:
            sess_options.inter_op_num_threads = settings.model_inter_op_threads
        # these defaults work well for CPU, but bottleneck GPU
        elif settings.model_inter_op_threads == 0 and self.providers == ["CPUExecutionProvider"]:
            sess_options.inter_op_num_threads = 1

+        # Set intra_op threads
        if settings.model_intra_op_threads > 0:
            sess_options.intra_op_num_threads = settings.model_intra_op_threads
        elif settings.model_intra_op_threads == 0 and self.providers == ["CPUExecutionProvider"]:
@@ -204,13 +204,6 @@ class TestOrtSession:

        assert session.providers == self.OV_EP

-    @pytest.mark.ov_device_ids(["CPU"])
-    @pytest.mark.providers(OV_EP)
-    def test_avoids_openvino_if_gpu_not_available(self, providers: list[str], ov_device_ids: list[str]) -> None:
-        session = OrtSession("ViT-B-32__openai")
-
-        assert session.providers == self.CPU_EP
-
    @pytest.mark.providers(CUDA_EP_OUT_OF_ORDER)
    def test_sets_providers_in_correct_order(self, providers: list[str]) -> None:
        session = OrtSession("ViT-B-32__openai")
@@ -256,7 +249,8 @@ class TestOrtSession:
            {"arena_extend_strategy": "kSameAsRequested"},
        ]

-    def test_sets_provider_options_for_openvino(self) -> None:
+    @pytest.mark.ov_device_ids(["GPU.0", "GPU.1", "CPU"])
+    def test_sets_provider_options_for_openvino(self, ov_device_ids: list[str]) -> None:
        model_path = "/cache/ViT-B-32__openai/textual/model.onnx"
        os.environ["MACHINE_LEARNING_DEVICE_ID"] = "1"

@@ -270,7 +264,8 @@ class TestOrtSession:
            }
        ]

-    def test_sets_openvino_to_fp16_if_enabled(self, mocker: MockerFixture) -> None:
+    @pytest.mark.ov_device_ids(["GPU.0", "GPU.1", "CPU"])
+    def test_sets_openvino_to_fp16_if_enabled(self, ov_device_ids: list[str], mocker: MockerFixture) -> None:
        model_path = "/cache/ViT-B-32__openai/textual/model.onnx"
        os.environ["MACHINE_LEARNING_DEVICE_ID"] = "1"
        mocker.patch.object(settings, "openvino_precision", ModelPrecision.FP16)
@@ -285,6 +280,19 @@ class TestOrtSession:
            }
        ]

+    @pytest.mark.ov_device_ids(["CPU"])
+    def test_sets_provider_options_for_openvino_cpu(self, ov_device_ids: list[str]) -> None:
+        model_path = "/cache/ViT-B-32__openai/model.onnx"
+        session = OrtSession(model_path, providers=["OpenVINOExecutionProvider"])
+
+        assert session.provider_options == [
+            {
+                "device_type": "CPU",
+                "precision": "FP32",
+                "cache_dir": "/cache/ViT-B-32__openai/openvino",
+            }
+        ]
+
    def test_sets_provider_options_for_cuda(self) -> None:
        os.environ["MACHINE_LEARNING_DEVICE_ID"] = "1"

@@ -341,6 +349,23 @@ class TestOrtSession:
        assert session.sess_options.inter_op_num_threads == 1
        assert session.sess_options.intra_op_num_threads == 2

+    @pytest.mark.ov_device_ids(["CPU"])
+    def test_sets_default_sess_options_if_openvino_cpu(self, ov_device_ids: list[str]) -> None:
+        model_path = "/cache/ViT-B-32__openai/model.onnx"
+        session = OrtSession(model_path, providers=["OpenVINOExecutionProvider"])
+
+        assert session.sess_options.execution_mode == ort.ExecutionMode.ORT_SEQUENTIAL
+        assert session.sess_options.inter_op_num_threads == 0
+        assert session.sess_options.intra_op_num_threads == 0
+
+    @pytest.mark.ov_device_ids(["GPU.0", "CPU"])
+    def test_sets_default_sess_options_if_openvino_gpu(self, ov_device_ids: list[str]) -> None:
+        model_path = "/cache/ViT-B-32__openai/model.onnx"
+        session = OrtSession(model_path, providers=["OpenVINOExecutionProvider"])
+
+        assert session.sess_options.inter_op_num_threads == 0
+        assert session.sess_options.intra_op_num_threads == 0
+
    def test_sets_default_sess_options_does_not_set_threads_if_non_cpu_and_default_threads(self) -> None:
        session = OrtSession("ViT-B-32__openai", providers=["CUDAExecutionProvider", "CPUExecutionProvider"])

@@ -3,6 +3,7 @@ plugins {
  id "kotlin-android"
  id "dev.flutter.flutter-gradle-plugin"
  id 'com.google.devtools.ksp'
+  id 'org.jetbrains.kotlin.plugin.serialization'
  id 'org.jetbrains.kotlin.plugin.compose' version '2.0.20' // this version matches your Kotlin version

 }
@@ -112,6 +113,8 @@ dependencies {
  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
  implementation "com.squareup.okhttp3:okhttp:$okhttp_version"
  implementation 'org.chromium.net:cronet-embedded:143.7445.0'
+  implementation("androidx.media3:media3-datasource-okhttp:1.9.2")
+  implementation("androidx.media3:media3-datasource-cronet:1.9.2")
  implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:$kotlin_coroutines_version"
  implementation "androidx.work:work-runtime-ktx:$work_version"
  implementation "androidx.concurrent:concurrent-futures:$concurrent_version"
@@ -12,6 +12,7 @@ import app.alextran.immich.connectivity.ConnectivityApiImpl
 import app.alextran.immich.core.HttpClientManager
 import app.alextran.immich.core.ImmichPlugin
 import app.alextran.immich.core.NetworkApiPlugin
+import me.albemala.native_video_player.NativeVideoPlayerPlugin
 import app.alextran.immich.images.LocalImageApi
 import app.alextran.immich.images.LocalImagesImpl
 import app.alextran.immich.images.RemoteImageApi
@@ -31,6 +32,7 @@ class MainActivity : FlutterFragmentActivity() {
  companion object {
    fun registerPlugins(ctx: Context, flutterEngine: FlutterEngine) {
      HttpClientManager.initialize(ctx)
+      NativeVideoPlayerPlugin.dataSourceFactory = HttpClientManager::createDataSourceFactory
      flutterEngine.plugins.add(NetworkApiPlugin())

      val messenger = flutterEngine.dartExecutor.binaryMessenger
@@ -3,23 +3,41 @@ package app.alextran.immich.core
 import android.content.Context
 import android.content.SharedPreferences
 import android.security.KeyChain
+import androidx.annotation.OptIn
 import androidx.core.content.edit
+import androidx.media3.common.util.UnstableApi
+import androidx.media3.datasource.DataSource
+import androidx.media3.datasource.ResolvingDataSource
+import androidx.media3.datasource.cronet.CronetDataSource
+import androidx.media3.datasource.okhttp.OkHttpDataSource
 import app.alextran.immich.BuildConfig
 import app.alextran.immich.NativeBuffer
 import okhttp3.Cache
 import okhttp3.ConnectionPool
+import okhttp3.Cookie
+import okhttp3.CookieJar
+import okhttp3.Credentials
 import okhttp3.Dispatcher
 import okhttp3.Headers
-import okhttp3.Credentials
+import okhttp3.HttpUrl
+import okhttp3.HttpUrl.Companion.toHttpUrlOrNull
 import okhttp3.OkHttpClient
-import org.json.JSONObject
+import org.chromium.net.CronetEngine
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.json.Json
 import java.io.ByteArrayInputStream
 import java.io.File
+import java.net.Authenticator
+import java.net.CookieHandler
+import java.net.PasswordAuthentication
 import java.net.Socket
+import java.net.URI
 import java.security.KeyStore
 import java.security.Principal
 import java.security.PrivateKey
 import java.security.cert.X509Certificate
+import java.util.concurrent.ExecutorService
+import java.util.concurrent.Executors
 import java.util.concurrent.TimeUnit
 import javax.net.ssl.HttpsURLConnection
 import javax.net.ssl.SSLContext
@@ -32,13 +50,26 @@ private const val CERT_ALIAS = "client_cert"
 private const val PREFS_NAME = "immich.ssl"
 private const val PREFS_CERT_ALIAS = "immich.client_cert"
 private const val PREFS_HEADERS = "immich.request_headers"
-private const val PREFS_SERVER_URL = "immich.server_url"
+private const val PREFS_SERVER_URLS = "immich.server_urls"
+private const val PREFS_COOKIES = "immich.cookies"
+private const val COOKIE_EXPIRY_DAYS = 400L
+
+private enum class AuthCookie(val cookieName: String, val httpOnly: Boolean) {
+  ACCESS_TOKEN("immich_access_token", httpOnly = true),
+  IS_AUTHENTICATED("immich_is_authenticated", httpOnly = false),
+  AUTH_TYPE("immich_auth_type", httpOnly = true);
+
+  companion object {
+    val names = entries.map { it.cookieName }.toSet()
+  }
+}

 /**
 * Manages a shared OkHttpClient with SSL configuration support.
 */
 object HttpClientManager {
  private const val CACHE_SIZE_BYTES = 100L * 1024 * 1024  // 100MiB
+  const val MEDIA_CACHE_SIZE_BYTES = 1024L * 1024 * 1024  // 1GiB
  private const val KEEP_ALIVE_CONNECTIONS = 10
  private const val KEEP_ALIVE_DURATION_MINUTES = 5L
  private const val MAX_REQUESTS_PER_HOST = 64
@@ -50,6 +81,11 @@ object HttpClientManager {
  private lateinit var appContext: Context
  private lateinit var prefs: SharedPreferences

+  var cronetEngine: CronetEngine? = null
+    private set
+  private lateinit var cronetStorageDir: File
+  val cronetExecutor: ExecutorService = Executors.newFixedThreadPool(4)
+
  private val keyStore = KeyStore.getInstance("AndroidKeyStore").apply { load(null) }

  var keyChainAlias: String? = null
@@ -58,6 +94,8 @@ object HttpClientManager {
  var headers: Headers = Headers.headersOf()
    private set

+  private val cookieJar = PersistentCookieJar()
+
  val isMtls: Boolean get() = keyChainAlias != null || keyStore.containsAlias(CERT_ALIAS)

  fun initialize(context: Context) {
@@ -69,18 +107,48 @@ object HttpClientManager {
      prefs = appContext.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE)
      keyChainAlias = prefs.getString(PREFS_CERT_ALIAS, null)

+      cookieJar.init(prefs)
+      System.setProperty("http.agent", USER_AGENT)
+      Authenticator.setDefault(object : Authenticator() {
+        override fun getPasswordAuthentication(): PasswordAuthentication? {
+          val url = requestingURL ?: return null
+          if (url.userInfo.isNullOrEmpty()) return null
+          val parts = url.userInfo.split(":", limit = 2)
+          return PasswordAuthentication(parts[0], parts.getOrElse(1) { "" }.toCharArray())
+        }
+      })
+      CookieHandler.setDefault(object : CookieHandler() {
+        override fun get(uri: URI, requestHeaders: Map<String, List<String>>): Map<String, List<String>> {
+          val httpUrl = uri.toString().toHttpUrlOrNull() ?: return emptyMap()
+          val cookies = cookieJar.loadForRequest(httpUrl)
+          if (cookies.isEmpty()) return emptyMap()
+          return mapOf("Cookie" to listOf(cookies.joinToString("; ") { "${it.name}=${it.value}" }))
+        }
+
+        override fun put(uri: URI, responseHeaders: Map<String, List<String>>) {}
+      })
+
      val savedHeaders = prefs.getString(PREFS_HEADERS, null)
      if (savedHeaders != null) {
-        val json = JSONObject(savedHeaders)
+        val map = Json.decodeFromString<Map<String, String>>(savedHeaders)
        val builder = Headers.Builder()
-        for (key in json.keys()) {
-          builder.add(key, json.getString(key))
+        for ((key, value) in map) {
+          builder.add(key, value)
        }
        headers = builder.build()
      }

+      val serverUrlsJson = prefs.getString(PREFS_SERVER_URLS, null)
+      if (serverUrlsJson != null) {
+        cookieJar.setServerUrls(Json.decodeFromString<List<String>>(serverUrlsJson))
+      }
+
      val cacheDir = File(File(context.cacheDir, "okhttp"), "api")
      client = build(cacheDir)
+
+      cronetStorageDir = File(context.cacheDir, "cronet").apply { mkdirs() }
+      cronetEngine = buildCronetEngine()
+
      initialized = true
    }
  }
@@ -153,25 +221,97 @@ object HttpClientManager {
    synchronized(this) { clientChangedListeners.add(listener) }
  }

-  fun setRequestHeaders(headerMap: Map<String, String>, serverUrls: List<String>) {
+  fun setRequestHeaders(headerMap: Map<String, String>, serverUrls: List<String>, token: String?) {
    synchronized(this) {
      val builder = Headers.Builder()
      headerMap.forEach { (key, value) -> builder[key] = value }
      val newHeaders = builder.build()
+
      val headersChanged = headers != newHeaders
-      val newUrl = serverUrls.firstOrNull()
-      val urlChanged = newUrl != prefs.getString(PREFS_SERVER_URL, null)
-      if (!headersChanged && !urlChanged) return
+      val urlsChanged = Json.encodeToString(serverUrls) != prefs.getString(PREFS_SERVER_URLS, null)
+
      headers = newHeaders
-      prefs.edit {
-        if (headersChanged) putString(PREFS_HEADERS, JSONObject(headerMap).toString())
-        if (urlChanged) {
-          if (newUrl != null) putString(PREFS_SERVER_URL, newUrl) else remove(PREFS_SERVER_URL)
+      cookieJar.setServerUrls(serverUrls)
+
+      if (headersChanged || urlsChanged) {
+        prefs.edit {
+          putString(PREFS_HEADERS, Json.encodeToString(headerMap))
+          putString(PREFS_SERVER_URLS, Json.encodeToString(serverUrls))
        }
      }
+
+      if (token != null) {
+        val url = serverUrls.firstNotNullOfOrNull { it.toHttpUrlOrNull() } ?: return
+        val expiry = System.currentTimeMillis() + COOKIE_EXPIRY_DAYS * 24 * 60 * 60 * 1000
+        val values = mapOf(
+          AuthCookie.ACCESS_TOKEN to token,
+          AuthCookie.IS_AUTHENTICATED to "true",
+          AuthCookie.AUTH_TYPE to "password",
+        )
+        cookieJar.saveFromResponse(url, values.map { (cookie, value) ->
+          Cookie.Builder().name(cookie.cookieName).value(value).domain(url.host).path("/").expiresAt(expiry)
+            .apply {
+              if (url.isHttps) secure()
+              if (cookie.httpOnly) httpOnly()
+            }.build()
+        })
+      }
    }
  }

+  fun loadCookieHeader(url: String): String? {
+    val httpUrl = url.toHttpUrlOrNull() ?: return null
+    return cookieJar.loadForRequest(httpUrl).takeIf { it.isNotEmpty() }
+      ?.joinToString("; ") { "${it.name}=${it.value}" }
+  }
+
+  fun getAuthHeaders(url: String): Map<String, String> {
+    val result = mutableMapOf<String, String>()
+    headers.forEach { (key, value) -> result[key] = value }
+    loadCookieHeader(url)?.let { result["Cookie"] = it }
+    url.toHttpUrlOrNull()?.let { httpUrl ->
+      if (httpUrl.username.isNotEmpty()) {
+        result["Authorization"] = Credentials.basic(httpUrl.username, httpUrl.password)
+      }
+    }
+    return result
+  }
+
+  fun rebuildCronetEngine(): CronetEngine {
+    val old = cronetEngine!!
+    cronetEngine = buildCronetEngine()
+    return old
+  }
+
+  val cronetStoragePath: File get() = cronetStorageDir
+
+  @OptIn(UnstableApi::class)
+  fun createDataSourceFactory(headers: Map<String, String>): DataSource.Factory {
+    return if (isMtls) {
+      OkHttpDataSource.Factory(client.newBuilder().cache(null).build())
+    } else {
+      ResolvingDataSource.Factory(
+        CronetDataSource.Factory(cronetEngine!!, cronetExecutor)
+      ) { dataSpec ->
+        val newHeaders = dataSpec.httpRequestHeaders.toMutableMap()
+        newHeaders.putAll(getAuthHeaders(dataSpec.uri.toString()))
+        newHeaders["Cache-Control"] = "no-store"
+        dataSpec.buildUpon().setHttpRequestHeaders(newHeaders).build()
+      }
+    }
+  }
+
+  private fun buildCronetEngine(): CronetEngine {
+    return CronetEngine.Builder(appContext)
+      .enableHttp2(true)
+      .enableQuic(true)
+      .enableBrotli(true)
+      .setStoragePath(cronetStorageDir.absolutePath)
+      .setUserAgent(USER_AGENT)
+      .enableHttpCache(CronetEngine.Builder.HTTP_CACHE_DISK, MEDIA_CACHE_SIZE_BYTES)
+      .build()
+  }
+
  private fun build(cacheDir: File): OkHttpClient {
    val connectionPool = ConnectionPool(
      maxIdleConnections = KEEP_ALIVE_CONNECTIONS,
@@ -188,6 +328,7 @@ object HttpClientManager {
    HttpsURLConnection.setDefaultSSLSocketFactory(sslContext.socketFactory)

    return OkHttpClient.Builder()
+      .cookieJar(cookieJar)
      .addInterceptor {
        val request = it.request()
        val builder = request.newBuilder()
@@ -249,4 +390,131 @@ object HttpClientManager {
      socket: Socket?
    ): String? = null
  }
+
+  /**
+   * Persistent CookieJar that duplicates auth cookies across equivalent server URLs.
+   * When the server sets cookies for one domain, copies are created for all other known
+   * server domains (for URL switching between local/remote endpoints of the same server).
+   */
+  private class PersistentCookieJar : CookieJar {
+    private val store = mutableListOf<Cookie>()
+    private var serverUrls = listOf<HttpUrl>()
+    private var prefs: SharedPreferences? = null
+
+
+    fun init(prefs: SharedPreferences) {
+      this.prefs = prefs
+      restore()
+    }
+
+    @Synchronized
+    fun setServerUrls(urls: List<String>) {
+      val parsed = urls.mapNotNull { it.toHttpUrlOrNull() }
+      if (parsed.map { it.host } == serverUrls.map { it.host }) return
+      serverUrls = parsed
+      if (syncAuthCookies()) persist()
+    }
+
+    @Synchronized
+    override fun saveFromResponse(url: HttpUrl, cookies: List<Cookie>) {
+      val changed = cookies.any { new ->
+        store.none { it.name == new.name && it.domain == new.domain && it.path == new.path && it.value == new.value }
+      }
+      store.removeAll { existing ->
+        cookies.any { it.name == existing.name && it.domain == existing.domain && it.path == existing.path }
+      }
+      store.addAll(cookies)
+      val synced = serverUrls.any { it.host == url.host } && syncAuthCookies()
+      if (changed || synced) persist()
+    }
+
+    @Synchronized
+    override fun loadForRequest(url: HttpUrl): List<Cookie> {
+      val now = System.currentTimeMillis()
+      if (store.removeAll { it.expiresAt < now }) {
+        syncAuthCookies()
+        persist()
+      }
+      return store.filter { it.matches(url) }
+    }
+
+    private fun syncAuthCookies(): Boolean {
+      val serverHosts = serverUrls.map { it.host }.toSet()
+      val now = System.currentTimeMillis()
+      val sourceCookies = store
+        .filter { it.name in AuthCookie.names && it.domain in serverHosts && it.expiresAt > now }
+        .associateBy { it.name }
+
+      if (sourceCookies.isEmpty()) {
+        return store.removeAll { it.name in AuthCookie.names && it.domain in serverHosts }
+      }
+
+      var changed = false
+      for (url in serverUrls) {
+        for ((_, source) in sourceCookies) {
+          if (store.any { it.name == source.name && it.domain == url.host && it.value == source.value }) continue
+          store.removeAll { it.name == source.name && it.domain == url.host }
+          store.add(rebuildCookie(source, url))
+          changed = true
+        }
+      }
+      return changed
+    }
+
+    private fun rebuildCookie(source: Cookie, url: HttpUrl): Cookie {
+      return Cookie.Builder()
+        .name(source.name).value(source.value)
+        .domain(url.host).path("/")
+        .expiresAt(source.expiresAt)
+        .apply {
+          if (url.isHttps) secure()
+          if (source.httpOnly) httpOnly()
+        }
+        .build()
+    }
+
+    private fun persist() {
+      val p = prefs ?: return
+      p.edit { putString(PREFS_COOKIES, Json.encodeToString(store.map { SerializedCookie.from(it) })) }
+    }
+
+    private fun restore() {
+      val p = prefs ?: return
+      val jsonStr = p.getString(PREFS_COOKIES, null) ?: return
+      try {
+        store.addAll(Json.decodeFromString<List<SerializedCookie>>(jsonStr).map { it.toCookie() })
+      } catch (_: Exception) {
+        store.clear()
+      }
+    }
+  }
+
+  @Serializable
+  private data class SerializedCookie(
+    val name: String,
+    val value: String,
+    val domain: String,
+    val path: String,
+    val expiresAt: Long,
+    val secure: Boolean,
+    val httpOnly: Boolean,
+    val hostOnly: Boolean,
+  ) {
+    fun toCookie(): Cookie = Cookie.Builder()
+      .name(name).value(value).path(path).expiresAt(expiresAt)
+      .apply {
+        if (hostOnly) hostOnlyDomain(domain) else domain(domain)
+        if (secure) secure()
+        if (httpOnly) httpOnly()
+      }
+      .build()
+
+    companion object {
+      fun from(cookie: Cookie) = SerializedCookie(
+        name = cookie.name, value = cookie.value, domain = cookie.domain,
+        path = cookie.path, expiresAt = cookie.expiresAt, secure = cookie.secure,
+        httpOnly = cookie.httpOnly, hostOnly = cookie.hostOnly,
+      )
+    }
+  }
 }
@@ -184,7 +184,7 @@ interface NetworkApi {
  fun removeCertificate(callback: (Result<Unit>) -> Unit)
  fun hasCertificate(): Boolean
  fun getClientPointer(): Long
-  fun setRequestHeaders(headers: Map<String, String>, serverUrls: List<String>)
+  fun setRequestHeaders(headers: Map<String, String>, serverUrls: List<String>, token: String?)

  companion object {
    /** The codec used by NetworkApi. */
@@ -287,8 +287,9 @@ interface NetworkApi {
            val args = message as List<Any?>
            val headersArg = args[0] as Map<String, String>
            val serverUrlsArg = args[1] as List<String>
+            val tokenArg = args[2] as String?
            val wrapped: List<Any?> = try {
-              api.setRequestHeaders(headersArg, serverUrlsArg)
+              api.setRequestHeaders(headersArg, serverUrlsArg, tokenArg)
              listOf(null)
            } catch (exception: Throwable) {
              NetworkPigeonUtils.wrapError(exception)
@@ -39,7 +39,7 @@ class NetworkApiPlugin : FlutterPlugin, ActivityAware {
  }
 }

-private class NetworkApiImpl() : NetworkApi {
+private class NetworkApiImpl : NetworkApi {
  var activity: Activity? = null

  override fun addCertificate(clientData: ClientCertData, callback: (Result<Unit>) -> Unit) {
@@ -79,7 +79,7 @@ private class NetworkApiImpl() : NetworkApi {
    return HttpClientManager.getClientPointer()
  }

-  override fun setRequestHeaders(headers: Map<String, String>, serverUrls: List<String>) {
-    HttpClientManager.setRequestHeaders(headers, serverUrls)
+  override fun setRequestHeaders(headers: Map<String, String>, serverUrls: List<String>, token: String?) {
+    HttpClientManager.setRequestHeaders(headers, serverUrls, token)
  }
 }
@@ -7,7 +7,6 @@ import app.alextran.immich.INITIAL_BUFFER_SIZE
 import app.alextran.immich.NativeBuffer
 import app.alextran.immich.NativeByteBuffer
 import app.alextran.immich.core.HttpClientManager
-import app.alextran.immich.core.USER_AGENT
 import kotlinx.coroutines.*
 import okhttp3.Cache
 import okhttp3.Call
@@ -15,9 +14,6 @@ import okhttp3.Callback
 import okhttp3.OkHttpClient
 import okhttp3.Request
 import okhttp3.Response
-import okhttp3.Credentials
-import okhttp3.HttpUrl.Companion.toHttpUrlOrNull
-import org.chromium.net.CronetEngine
 import org.chromium.net.CronetException
 import org.chromium.net.UrlRequest
 import org.chromium.net.UrlResponseInfo
@@ -31,10 +27,6 @@ import java.nio.file.Path
 import java.nio.file.SimpleFileVisitor
 import java.nio.file.attribute.BasicFileAttributes
 import java.util.concurrent.ConcurrentHashMap
-import java.util.concurrent.Executors
-
-
-private const val CACHE_SIZE_BYTES = 1024L * 1024 * 1024

 private class RemoteRequest(val cancellationSignal: CancellationSignal)

@@ -101,7 +93,6 @@ class RemoteImagesImpl(context: Context) : RemoteImageApi {
 }

 private object ImageFetcherManager {
-  private lateinit var appContext: Context
  private lateinit var cacheDir: File
  private lateinit var fetcher: ImageFetcher
  private var initialized = false
@@ -110,7 +101,6 @@ private object ImageFetcherManager {
    if (initialized) return
    synchronized(this) {
      if (initialized) return
-      appContext = context.applicationContext
      cacheDir = context.cacheDir
      fetcher = build()
      HttpClientManager.addClientChangedListener(::invalidate)
@@ -143,7 +133,7 @@ private object ImageFetcherManager {
    return if (HttpClientManager.isMtls) {
      OkHttpImageFetcher.create(cacheDir)
    } else {
-      CronetImageFetcher(appContext, cacheDir)
+      CronetImageFetcher()
    }
  }
 }
@@ -161,19 +151,11 @@ private sealed interface ImageFetcher {
  fun clearCache(onCleared: (Result<Long>) -> Unit)
 }

-private class CronetImageFetcher(context: Context, cacheDir: File) : ImageFetcher {
-  private val ctx = context
-  private var engine: CronetEngine
-  private val executor = Executors.newFixedThreadPool(4)
+private class CronetImageFetcher : ImageFetcher {
  private val stateLock = Any()
  private var activeCount = 0
  private var draining = false
  private var onCacheCleared: ((Result<Long>) -> Unit)? = null
-  private val storageDir = File(cacheDir, "cronet").apply { mkdirs() }
-
-  init {
-    engine = build(context)
-  }

  override fun fetch(
    url: String,
@@ -190,29 +172,16 @@ private class CronetImageFetcher(context: Context, cacheDir: File) : ImageFetche
    }

    val callback = FetchCallback(onSuccess, onFailure, ::onComplete)
-    val requestBuilder = engine.newUrlRequestBuilder(url, callback, executor)
-    HttpClientManager.headers.forEach { (key, value) -> requestBuilder.addHeader(key, value) }
-    url.toHttpUrlOrNull()?.let { httpUrl ->
-      if (httpUrl.username.isNotEmpty()) {
-        requestBuilder.addHeader("Authorization", Credentials.basic(httpUrl.username, httpUrl.password))
-      }
+    val requestBuilder = HttpClientManager.cronetEngine!!
+      .newUrlRequestBuilder(url, callback, HttpClientManager.cronetExecutor)
+    HttpClientManager.getAuthHeaders(url).forEach { (key, value) ->
+      requestBuilder.addHeader(key, value)
    }
    val request = requestBuilder.build()
    signal.setOnCancelListener(request::cancel)
    request.start()
  }

-  private fun build(ctx: Context): CronetEngine {
-    return CronetEngine.Builder(ctx)
-      .enableHttp2(true)
-      .enableQuic(true)
-      .enableBrotli(true)
-      .setStoragePath(storageDir.absolutePath)
-      .setUserAgent(USER_AGENT)
-      .enableHttpCache(CronetEngine.Builder.HTTP_CACHE_DISK, CACHE_SIZE_BYTES)
-      .build()
-  }
-
  private fun onComplete() {
    val didDrain = synchronized(stateLock) {
      activeCount--
@@ -235,19 +204,16 @@ private class CronetImageFetcher(context: Context, cacheDir: File) : ImageFetche
  }

  private fun onDrained() {
-    engine.shutdown()
    val onCacheCleared = synchronized(stateLock) {
      val onCacheCleared = onCacheCleared
      this.onCacheCleared = null
      onCacheCleared
    }
-    if (onCacheCleared == null) {
-      executor.shutdown()
-    } else {
+    if (onCacheCleared != null) {
+      val oldEngine = HttpClientManager.rebuildCronetEngine()
+      oldEngine.shutdown()
      CoroutineScope(Dispatchers.IO).launch {
-        val result = runCatching { deleteFolderAndGetSize(storageDir.toPath()) }
-        // Cronet is very good at self-repair, so it shouldn't fail here regardless of clear result
-        engine = build(ctx)
+        val result = runCatching { deleteFolderAndGetSize(HttpClientManager.cronetStoragePath.toPath()) }
        synchronized(stateLock) { draining = false }
        onCacheCleared(result)
      }
@@ -374,7 +340,7 @@ private class OkHttpImageFetcher private constructor(
      val dir = File(cacheDir, "okhttp")

      val client = HttpClientManager.getClient().newBuilder()
-        .cache(Cache(File(dir, "thumbnails"), CACHE_SIZE_BYTES))
+        .cache(Cache(File(dir, "thumbnails"), HttpClientManager.MEDIA_CACHE_SIZE_BYTES))
        .build()

      return OkHttpImageFetcher(client)
@@ -16,6 +16,7 @@ import app.alextran.immich.core.ImmichPlugin
 import com.bumptech.glide.Glide
 import com.bumptech.glide.load.ImageHeaderParser
 import com.bumptech.glide.load.ImageHeaderParserUtils
+import com.bumptech.glide.load.resource.bitmap.DefaultImageHeaderParser
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.Job
@@ -81,10 +82,13 @@ open class NativeSyncApiImplBase(context: Context) : ImmichPlugin() {
      }
      if (hasSpecialFormatColumn()) {
        add(SPECIAL_FORMAT_COLUMN)
-      } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
-        // Fallback: read XMP from MediaStore to detect Motion Photos
-        // only needed if SPECIAL_FORMAT column isn't available
-        add(MediaStore.MediaColumns.XMP)
+      } else {
+        // fallback to mimetype and xmp for playback style detection on older Android versions
+        // both only needed if special format column is not available
+        add(MediaStore.MediaColumns.MIME_TYPE)
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+          add(MediaStore.MediaColumns.XMP)
+        }
      }
    }.toTypedArray()

@@ -131,6 +135,7 @@ open class NativeSyncApiImplBase(context: Context) : ImmichPlugin() {
        val dateAddedColumn = c.getColumnIndexOrThrow(MediaStore.MediaColumns.DATE_ADDED)
        val dateModifiedColumn = c.getColumnIndexOrThrow(MediaStore.MediaColumns.DATE_MODIFIED)
        val mediaTypeColumn = c.getColumnIndexOrThrow(MediaStore.Files.FileColumns.MEDIA_TYPE)
+        val mimeTypeColumn = c.getColumnIndex(MediaStore.MediaColumns.MIME_TYPE)
        val bucketIdColumn = c.getColumnIndexOrThrow(MediaStore.MediaColumns.BUCKET_ID)
        val widthColumn = c.getColumnIndexOrThrow(MediaStore.MediaColumns.WIDTH)
        val heightColumn = c.getColumnIndexOrThrow(MediaStore.MediaColumns.HEIGHT)
@@ -177,19 +182,20 @@ open class NativeSyncApiImplBase(context: Context) : ImmichPlugin() {
          val isFavorite = if (favoriteColumn == -1) false else c.getInt(favoriteColumn) != 0

          val playbackStyle = detectPlaybackStyle(
-            numericId, rawMediaType, specialFormatColumn, xmpColumn, c
+            numericId, rawMediaType, mimeTypeColumn, specialFormatColumn, xmpColumn, c
          )

+          val isFlipped = orientation == 90 || orientation == 270
          val asset = PlatformAsset(
            id,
            name,
            assetType,
            createdAt,
            modifiedAt,
-            width,
-            height,
+            if (isFlipped) height else width,
+            if (isFlipped) width else height,
            duration,
-            orientation.toLong(),
+            0L,
            isFavorite,
            playbackStyle = playbackStyle,
          )
@@ -200,13 +206,14 @@ open class NativeSyncApiImplBase(context: Context) : ImmichPlugin() {
  }

  /**
-   * Detects the playback style for an asset using _special_format (API 33+)
-   * or XMP / MIME / RIFF header fallbacks (pre-33).
+   * Detects the playback style for an asset using _special_format (SDK Extension 21+)
+   * or XMP / MIME / RIFF header fallbacks.
   */
  @SuppressLint("NewApi")
  private fun detectPlaybackStyle(
    assetId: Long,
    rawMediaType: Int,
+    mimeTypeColumn: Int,
    specialFormatColumn: Int,
    xmpColumn: Int,
    cursor: Cursor
@@ -231,46 +238,56 @@ open class NativeSyncApiImplBase(context: Context) : ImmichPlugin() {
      return PlatformAssetPlaybackStyle.UNKNOWN
    }

-    // Pre-API 33 fallback
+    val mimeType = if (mimeTypeColumn != -1) cursor.getString(mimeTypeColumn) else null
+
+    // GIFs are always animated and cannot be motion photos; no I/O needed
+    if (mimeType == "image/gif") {
+      return PlatformAssetPlaybackStyle.IMAGE_ANIMATED
+    }
+
    val uri = ContentUris.withAppendedId(
      MediaStore.Files.getContentUri(MediaStore.VOLUME_EXTERNAL),
      assetId
    )

-    // Read XMP from cursor (API 30+) or ExifInterface stream (pre-30)
+    // Only WebP needs a stream check to distinguish static vs animated;
+    // WebP files are not used as motion photos, so skip XMP detection
+    if (mimeType == "image/webp") {
+      try {
+        val glide = Glide.get(ctx)
+        ctx.contentResolver.openInputStream(uri)?.use { stream ->
+          val type = ImageHeaderParserUtils.getType(
+            listOf(DefaultImageHeaderParser()),
+            stream,
+            glide.arrayPool
+          )
+          // Also check for GIF just in case MIME type is incorrect; Doesn't hurt performance
+          if (type == ImageHeaderParser.ImageType.ANIMATED_WEBP || type == ImageHeaderParser.ImageType.GIF) {
+            return PlatformAssetPlaybackStyle.IMAGE_ANIMATED
+          }
+        }
+      } catch (e: Exception) {
+        Log.w(TAG, "Failed to parse image header for asset $assetId", e)
+      }
+      // if mimeType is webp but not animated, its just an image.
+      return PlatformAssetPlaybackStyle.IMAGE
+    }
+
+
+    // Read XMP from cursor (API 30+)
    val xmp: String? = if (xmpColumn != -1) {
      cursor.getBlob(xmpColumn)?.toString(Charsets.UTF_8)
    } else {
-      try {
-        ctx.contentResolver.openInputStream(uri)?.use { stream ->
-          ExifInterface(stream).getAttribute(ExifInterface.TAG_XMP)
-        }
-      } catch (e: Exception) {
-        Log.w(TAG, "Failed to read XMP for asset $assetId", e)
-        null
-      }
+      // if xmp column is not available, we are on API 29 or below
+      // theoretically there were motion photos but the Camera:MotionPhoto xmp tag
+      // was only added in Android 11, so we should not have to worry about parsing XMP on older versions
+      null
    }

    if (xmp != null && "Camera:MotionPhoto" in xmp) {
      return PlatformAssetPlaybackStyle.LIVE_PHOTO
    }

-    try {
-      ctx.contentResolver.openInputStream(uri)?.use { stream ->
-        val glide = Glide.get(ctx)
-        val type = ImageHeaderParserUtils.getType(
-          glide.registry.imageHeaderParsers,
-          stream,
-          glide.arrayPool
-        )
-        if (type == ImageHeaderParser.ImageType.GIF || type == ImageHeaderParser.ImageType.ANIMATED_WEBP) {
-          return PlatformAssetPlaybackStyle.IMAGE_ANIMATED
-        }
-      }
-    } catch (e: Exception) {
-      Log.w(TAG, "Failed to parse image header for asset $assetId", e)
-    }
-
    return PlatformAssetPlaybackStyle.IMAGE
  }

@@ -1,5 +1,6 @@
 import BackgroundTasks
 import Flutter
+import native_video_player
 import network_info_plus
 import path_provider_foundation
 import permission_handler_apple
@@ -18,6 +19,8 @@ import UIKit
      UNUserNotificationCenter.current().delegate = self as UNUserNotificationCenterDelegate
    }

+    SwiftNativeVideoPlayerPlugin.cookieStorage = URLSessionManager.cookieStorage
+    URLSessionManager.patchBackgroundDownloader()
    GeneratedPluginRegistrant.register(with: self)
    let controller: FlutterViewController = window?.rootViewController as! FlutterViewController
    AppDelegate.registerPlugins(with: controller.engine, controller: controller)
@@ -225,7 +225,7 @@ protocol NetworkApi {
  func removeCertificate(completion: @escaping (Result<Void, Error>) -> Void)
  func hasCertificate() throws -> Bool
  func getClientPointer() throws -> Int64
-  func setRequestHeaders(headers: [String: String], serverUrls: [String]) throws
+  func setRequestHeaders(headers: [String: String], serverUrls: [String], token: String?) throws
 }

 /// Generated setup class from Pigeon to handle messages through the `binaryMessenger`.
@@ -315,8 +315,9 @@ class NetworkApiSetup {
        let args = message as! [Any?]
        let headersArg = args[0] as! [String: String]
        let serverUrlsArg = args[1] as! [String]
+        let tokenArg: String? = nilOrValue(args[2])
        do {
-          try api.setRequestHeaders(headers: headersArg, serverUrls: serverUrlsArg)
+          try api.setRequestHeaders(headers: headersArg, serverUrls: serverUrlsArg, token: tokenArg)
          reply(wrapResult(nil))
        } catch {
          reply(wrapError(error))
@@ -58,42 +58,39 @@ class NetworkApiImpl: NetworkApi {
    return Int64(Int(bitPattern: pointer))
  }
  
-  func setRequestHeaders(headers: [String : String], serverUrls: [String]) throws {
-    var headers = headers
-    if let token = headers.removeValue(forKey: "x-immich-user-token") {
+  func setRequestHeaders(headers: [String : String], serverUrls: [String], token: String?) throws {
+    URLSessionManager.setServerUrls(serverUrls)
+
+    if let token = token {
+      let expiry = Date().addingTimeInterval(COOKIE_EXPIRY_DAYS * 24 * 60 * 60)
      for serverUrl in serverUrls {
        guard let url = URL(string: serverUrl), let domain = url.host else { continue }
        let isSecure = serverUrl.hasPrefix("https")
-        let cookies: [(String, String, Bool)] = [
-          ("immich_access_token", token, true),
-          ("immich_is_authenticated", "true", false),
-          ("immich_auth_type", "password", true),
+        let values: [AuthCookie: String] = [
+          .accessToken: token,
+          .isAuthenticated: "true",
+          .authType: "password",
        ]
-        let expiry = Date().addingTimeInterval(400 * 24 * 60 * 60)
-        for (name, value, httpOnly) in cookies {
+        for (cookie, value) in values {
          var properties: [HTTPCookiePropertyKey: Any] = [
-            .name: name,
+            .name: cookie.name,
            .value: value,
            .domain: domain,
            .path: "/",
            .expires: expiry,
          ]
          if isSecure { properties[.secure] = "TRUE" }
-          if httpOnly { properties[.init("HttpOnly")] = "TRUE" }
-          if let cookie = HTTPCookie(properties: properties) {
-            URLSessionManager.cookieStorage.setCookie(cookie)
+          if cookie.httpOnly { properties[.init("HttpOnly")] = "TRUE" }
+          if let httpCookie = HTTPCookie(properties: properties) {
+            URLSessionManager.cookieStorage.setCookie(httpCookie)
          }
        }
      }
    }

-    if serverUrls.first != UserDefaults.group.string(forKey: SERVER_URL_KEY) {
-      UserDefaults.group.set(serverUrls.first, forKey: SERVER_URL_KEY)
-    }
-
    if headers != UserDefaults.group.dictionary(forKey: HEADERS_KEY) as? [String: String] {
      UserDefaults.group.set(headers, forKey: HEADERS_KEY)
-      URLSessionManager.shared.recreateSession() // Recreate session to apply custom headers without app restart
+      URLSessionManager.shared.recreateSession()
    }
  }
 }
@@ -3,8 +3,30 @@ import native_video_player

 let CLIENT_CERT_LABEL = "app.alextran.immich.client_identity"
 let HEADERS_KEY = "immich.request_headers"
-let SERVER_URL_KEY = "immich.server_url"
+let SERVER_URLS_KEY = "immich.server_urls"
 let APP_GROUP = "group.app.immich.share"
+let COOKIE_EXPIRY_DAYS: TimeInterval = 400
+
+enum AuthCookie: CaseIterable {
+  case accessToken, isAuthenticated, authType
+
+  var name: String {
+    switch self {
+    case .accessToken: return "immich_access_token"
+    case .isAuthenticated: return "immich_is_authenticated"
+    case .authType: return "immich_auth_type"
+    }
+  }
+
+  var httpOnly: Bool {
+    switch self {
+    case .accessToken, .authType: return true
+    case .isAuthenticated: return false
+    }
+  }
+
+  static let names: Set<String> = Set(allCases.map(\.name))
+}

 extension UserDefaults {
  static let group = UserDefaults(suiteName: APP_GROUP)!
@@ -29,26 +51,99 @@ class URLSessionManager: NSObject {
    diskCapacity: 1024 * 1024 * 1024,
    directory: cacheDir
  )
-  private static let userAgent: String = {
+  static let userAgent: String = {
    let version = Bundle.main.object(forInfoDictionaryKey: "CFBundleShortVersionString") as? String ?? "unknown"
    return "Immich_iOS_\(version)"
  }()
  static let cookieStorage = HTTPCookieStorage.sharedCookieStorage(forGroupContainerIdentifier: APP_GROUP)
-  
+  private static var serverUrls: [String] = []
+  private static var isSyncing = false
+
  var sessionPointer: UnsafeMutableRawPointer {
    Unmanaged.passUnretained(session).toOpaque()
  }
-  
+
  private override init() {
    delegate = URLSessionManagerDelegate()
    session = Self.buildSession(delegate: delegate)
    super.init()
+    Self.serverUrls = UserDefaults.group.stringArray(forKey: SERVER_URLS_KEY) ?? []
+    NotificationCenter.default.addObserver(
+      Self.self,
+      selector: #selector(Self.cookiesDidChange),
+      name: NSNotification.Name.NSHTTPCookieManagerCookiesChanged,
+      object: Self.cookieStorage
+    )
  }

  func recreateSession() {
    session = Self.buildSession(delegate: delegate)
  }

+  static func setServerUrls(_ urls: [String]) {
+    guard urls != serverUrls else { return }
+    serverUrls = urls
+    UserDefaults.group.set(urls, forKey: SERVER_URLS_KEY)
+    syncAuthCookies()
+  }
+
+  @objc private static func cookiesDidChange(_ notification: Notification) {
+    guard !isSyncing, !serverUrls.isEmpty else { return }
+    syncAuthCookies()
+  }
+
+  private static func syncAuthCookies() {
+    let serverHosts = Set(serverUrls.compactMap { URL(string: $0)?.host })
+    let allCookies = cookieStorage.cookies ?? []
+    let now = Date()
+
+    let serverAuthCookies = allCookies.filter {
+      AuthCookie.names.contains($0.name) && serverHosts.contains($0.domain)
+    }
+
+    var sourceCookies: [String: HTTPCookie] = [:]
+    for cookie in serverAuthCookies {
+      if cookie.expiresDate.map({ $0 > now }) ?? true {
+        sourceCookies[cookie.name] = cookie
+      }
+    }
+
+    isSyncing = true
+    defer { isSyncing = false }
+
+    if sourceCookies.isEmpty {
+      for cookie in serverAuthCookies {
+        cookieStorage.deleteCookie(cookie)
+      }
+      return
+    }
+
+    for serverUrl in serverUrls {
+      guard let url = URL(string: serverUrl), let domain = url.host else { continue }
+      let isSecure = serverUrl.hasPrefix("https")
+
+      for (_, source) in sourceCookies {
+        if allCookies.contains(where: { $0.name == source.name && $0.domain == domain && $0.value == source.value }) {
+          continue
+        }
+
+        var properties: [HTTPCookiePropertyKey: Any] = [
+          .name: source.name,
+          .value: source.value,
+          .domain: domain,
+          .path: "/",
+          .expires: source.expiresDate ?? Date().addingTimeInterval(COOKIE_EXPIRY_DAYS * 24 * 60 * 60),
+        ]
+        if isSecure { properties[.secure] = "TRUE" }
+        if source.isHTTPOnly { properties[.init("HttpOnly")] = "TRUE" }
+
+        if let cookie = HTTPCookie(properties: properties) {
+          cookieStorage.setCookie(cookie)
+        }
+      }
+    }
+  }
+
  private static func buildSession(delegate: URLSessionManagerDelegate) -> URLSession {
    let config = URLSessionConfiguration.default
    config.urlCache = urlCache
@@ -63,6 +158,49 @@ class URLSessionManager: NSObject {

    return URLSession(configuration: config, delegate: delegate, delegateQueue: nil)
  }
+
+  /// Patches background_downloader's URLSession to use shared auth configuration.
+  /// Must be called before background_downloader creates its session (i.e. early in app startup).
+  static func patchBackgroundDownloader() {
+    // Swizzle URLSessionConfiguration.background(withIdentifier:) to inject shared config
+    let originalSel = NSSelectorFromString("backgroundSessionConfigurationWithIdentifier:")
+    let swizzledSel = #selector(URLSessionConfiguration.immich_background(withIdentifier:))
+    if let original = class_getClassMethod(URLSessionConfiguration.self, originalSel),
+       let swizzled = class_getClassMethod(URLSessionConfiguration.self, swizzledSel) {
+      method_exchangeImplementations(original, swizzled)
+    }
+
+    // Add auth challenge handling to background_downloader's UrlSessionDelegate
+    guard let targetClass = NSClassFromString("background_downloader.UrlSessionDelegate") else { return }
+
+    let sessionBlock: @convention(block) (AnyObject, URLSession, URLAuthenticationChallenge,
+        @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) -> Void
+    = { _, session, challenge, completion in
+      URLSessionManager.shared.delegate.handleChallenge(session, challenge, completion)
+    }
+    class_replaceMethod(targetClass,
+      NSSelectorFromString("URLSession:didReceiveChallenge:completionHandler:"),
+      imp_implementationWithBlock(sessionBlock), "v@:@@@?")
+
+    let taskBlock: @convention(block) (AnyObject, URLSession, URLSessionTask, URLAuthenticationChallenge,
+        @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) -> Void
+    = { _, session, task, challenge, completion in
+      URLSessionManager.shared.delegate.handleChallenge(session, challenge, completion, task: task)
+    }
+    class_replaceMethod(targetClass,
+      NSSelectorFromString("URLSession:task:didReceiveChallenge:completionHandler:"),
+      imp_implementationWithBlock(taskBlock), "v@:@@@@?")
+  }
+}
+
+private extension URLSessionConfiguration {
+  @objc dynamic class func immich_background(withIdentifier id: String) -> URLSessionConfiguration {
+    // After swizzle, this calls the original implementation
+    let config = immich_background(withIdentifier: id)
+    config.httpCookieStorage = URLSessionManager.cookieStorage
+    config.httpAdditionalHeaders = ["User-Agent": URLSessionManager.userAgent]
+    return config
+  }
 }

 class URLSessionManagerDelegate: NSObject, URLSessionTaskDelegate, URLSessionWebSocketDelegate {
@@ -73,7 +211,7 @@ class URLSessionManagerDelegate: NSObject, URLSessionTaskDelegate, URLSessionWeb
  ) {
    handleChallenge(session, challenge, completionHandler)
  }
-  
+
  func urlSession(
    _ session: URLSession,
    task: URLSessionTask,
@@ -82,7 +220,7 @@ class URLSessionManagerDelegate: NSObject, URLSessionTaskDelegate, URLSessionWeb
  ) {
    handleChallenge(session, challenge, completionHandler, task: task)
  }
-  
+
  func handleChallenge(
    _ session: URLSession,
    _ challenge: URLAuthenticationChallenge,
@@ -95,7 +233,7 @@ class URLSessionManagerDelegate: NSObject, URLSessionTaskDelegate, URLSessionWeb
    default: completionHandler(.performDefaultHandling, nil)
    }
  }
-  
+
  private func handleClientCertificate(
    _ session: URLSession,
    completion: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void
@@ -105,7 +243,7 @@ class URLSessionManagerDelegate: NSObject, URLSessionTaskDelegate, URLSessionWeb
      kSecAttrLabel as String: CLIENT_CERT_LABEL,
      kSecReturnRef as String: true,
    ]
-    
+
    var item: CFTypeRef?
    let status = SecItemCopyMatching(query as CFDictionary, &item)
    if status == errSecSuccess, let identity = item {
@@ -119,7 +257,7 @@ class URLSessionManagerDelegate: NSObject, URLSessionTaskDelegate, URLSessionWeb
    }
    completion(.performDefaultHandling, nil)
  }
-  
+
  private func handleBasicAuth(
    _ session: URLSession,
    task: URLSessionTask?,
@@ -7,6 +7,6 @@ const String defaultColorPresetName = "indigo";

 const Color immichBrandColorLight = Color(0xFF4150AF);
 const Color immichBrandColorDark = Color(0xFFACCBFA);
-const Color whiteOpacity75 = Color.fromARGB((0.75 * 255) ~/ 1, 255, 255, 255);
+const Color whiteOpacity75 = Color.fromRGBO(255, 255, 255, 0.75);
 const Color red400 = Color(0xFFEF5350);
 const Color grey200 = Color(0xFFEEEEEE);
@@ -46,6 +46,7 @@ sealed class BaseAsset {
  bool get isVideo => type == AssetType.video;

  bool get isMotionPhoto => livePhotoVideoId != null;
+  bool get isAnimatedImage => playbackStyle == AssetPlaybackStyle.imageAnimated;

  AssetPlaybackStyle get playbackStyle {
    if (isVideo) return AssetPlaybackStyle.video;
@@ -26,8 +26,8 @@ class NetworkRepository {
    }
  }

-  static Future<void> setHeaders(Map<String, String> headers, List<String> serverUrls) async {
-    await networkApi.setRequestHeaders(headers, serverUrls);
+  static Future<void> setHeaders(Map<String, String> headers, List<String> serverUrls, {String? token}) async {
+    await networkApi.setRequestHeaders(headers, serverUrls, token);
    if (Platform.isIOS) {
      await init();
    }
@@ -148,10 +148,12 @@ class _DriftBackupPageState extends ConsumerState<DriftBackupPage> {
                        children: [
                          Icon(Icons.warning_rounded, color: context.colorScheme.error, fill: 1),
                          const SizedBox(width: 8),
-                          Text(
-                            context.t.backup_error_sync_failed,
-                            style: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.error),
-                            textAlign: TextAlign.center,
+                          Flexible(
+                            child: Text(
+                              context.t.backup_error_sync_failed,
+                              style: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.error),
+                              textAlign: TextAlign.center,
+                            ),
                          ),
                        ],
                      ),
@@ -344,6 +346,7 @@ class _RemainderCard extends ConsumerWidget {
                      remainderCount.toString(),
                      style: context.textTheme.titleLarge?.copyWith(
                        color: context.colorScheme.onSurface.withAlpha(syncStatus.isRemoteSyncing ? 50 : 255),
+                        fontFeatures: [const FontFeature.tabularFigures()],
                      ),
                    ),
                    if (syncStatus.isRemoteSyncing)
@@ -483,6 +486,7 @@ class _PreparingStatusState extends ConsumerState {
                    style: context.textTheme.titleMedium?.copyWith(
                      color: context.colorScheme.primary,
                      fontWeight: FontWeight.w600,
+                      fontFeatures: [const FontFeature.tabularFigures()],
                    ),
                  ),
                ],
@@ -507,6 +511,7 @@ class _PreparingStatusState extends ConsumerState {
                  style: context.textTheme.titleMedium?.copyWith(
                    color: context.primaryColor,
                    fontWeight: FontWeight.w600,
+                    fontFeatures: [const FontFeature.tabularFigures()],
                  ),
                ),
              ],
@@ -281,7 +281,7 @@ class NetworkApi {
    }
  }

-  Future<void> setRequestHeaders(Map<String, String> headers, List<String> serverUrls) async {
+  Future<void> setRequestHeaders(Map<String, String> headers, List<String> serverUrls, String? token) async {
    final String pigeonVar_channelName =
        'dev.flutter.pigeon.immich_mobile.NetworkApi.setRequestHeaders$pigeonVar_messageChannelSuffix';
    final BasicMessageChannel<Object?> pigeonVar_channel = BasicMessageChannel<Object?>(
@@ -289,7 +289,7 @@ class NetworkApi {
      pigeonChannelCodec,
      binaryMessenger: pigeonVar_binaryMessenger,
    );
-    final Future<Object?> pigeonVar_sendFuture = pigeonVar_channel.send(<Object?>[headers, serverUrls]);
+    final Future<Object?> pigeonVar_sendFuture = pigeonVar_channel.send(<Object?>[headers, serverUrls, token]);
    final List<Object?>? pigeonVar_replyList = await pigeonVar_sendFuture as List<Object?>?;
    if (pigeonVar_replyList == null) {
      throw _createConnectionError(pigeonVar_channelName);
@@ -0,0 +1,61 @@
+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,
+    );
+  }
+}
@@ -19,7 +19,6 @@ import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
-import 'package:immich_mobile/providers/asset_viewer/video_player_provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/widgets/common/immich_loading_indicator.dart';
@@ -248,11 +247,6 @@ class _AssetPageState extends ConsumerState<AssetPage> {

    if (scaleState != PhotoViewScaleState.initial) {
      if (_dragStart == null) _viewer.setControls(false);
-
-      final heroTag = ref.read(assetViewerProvider).currentAsset?.heroTag;
-      if (heroTag != null) {
-        ref.read(videoPlayerProvider(heroTag).notifier).pause();
-      }
      return;
    }

@@ -61,15 +61,27 @@ class ViewerBottomBar extends ConsumerWidget {
                ),
              ),
              child: Container(
-                color: Colors.black.withAlpha(125),
-                padding: EdgeInsets.only(bottom: context.padding.bottom, top: 16),
-                child: Column(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    if (asset.isVideo) VideoControls(videoPlayerName: asset.heroTag),
-                    if (!isReadonlyModeEnabled)
-                      Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: actions),
-                  ],
+                decoration: const BoxDecoration(
+                  gradient: LinearGradient(
+                    begin: Alignment.bottomCenter,
+                    end: Alignment.topCenter,
+                    colors: [Colors.black45, Colors.black12, Colors.transparent],
+                    stops: [0.0, 0.7, 1.0],
+                  ),
+                ),
+                child: SafeArea(
+                  top: false,
+                  child: Padding(
+                    padding: const EdgeInsets.only(top: 16),
+                    child: Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        if (asset.isVideo) VideoControls(videoPlayerName: asset.heroTag),
+                        if (!isReadonlyModeEnabled)
+                          Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: actions),
+                      ],
+                    ),
+                  ),
                ),
              ),
            ),
@@ -10,7 +10,6 @@ import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/platform_extensions.dart';
 import 'package:immich_mobile/infrastructure/repositories/storage.repository.dart';
 import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
-import 'package:immich_mobile/presentation/widgets/asset_viewer/video_viewer_controls.widget.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/video_player_provider.dart';
@@ -186,11 +185,7 @@ class _NativeVideoViewerState extends ConsumerState<NativeVideoViewer> with Widg
    final source = await _videoSource;
    if (source == null || !mounted) return;

-    unawaited(
-      nc.loadVideoSource(source).catchError((error) {
-        _log.severe('Error loading video source: $error');
-      }),
-    );
+    await _notifier.load(source);
    final loopVideo = ref.read(appSettingsServiceProvider).getSetting<bool>(AppSettingsEnum.loopVideo);
    await _notifier.setLoop(!widget.asset.isMotionPhoto && loopVideo);
    await _notifier.setVolume(1);
@@ -213,21 +208,28 @@ class _NativeVideoViewerState extends ConsumerState<NativeVideoViewer> with Widg

  @override
  Widget build(BuildContext context) {
-    // Prevent the provider from being disposed whilst the widget is alive.
-    ref.listen(videoPlayerProvider(widget.asset.heroTag), (_, __) {});
-
    final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
+    final status = ref.watch(videoPlayerProvider(widget.asset.heroTag).select((v) => v.status));

-    return Stack(
-      children: [
-        Center(child: widget.image),
-        if (!isCasting)
-          Visibility.maintain(
-            visible: _isVideoReady,
-            child: NativeVideoPlayerView(onViewReady: _initController),
-          ),
-        if (widget.showControls) Center(child: VideoViewerControls(asset: widget.asset)),
-      ],
+    return IgnorePointer(
+      child: Stack(
+        children: [
+          Center(child: widget.image),
+          if (!isCasting) ...[
+            Visibility.maintain(
+              visible: _isVideoReady,
+              child: NativeVideoPlayerView(onViewReady: _initController),
+            ),
+            Center(
+              child: AnimatedOpacity(
+                opacity: status == VideoPlaybackStatus.buffering ? 1.0 : 0.0,
+                duration: const Duration(milliseconds: 400),
+                child: const CircularProgressIndicator(),
+              ),
+            ),
+          ],
+        ],
+      ),
    );
  }
 }
@@ -1,114 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
-import 'package:immich_mobile/models/cast/cast_manager_state.dart';
-import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
-import 'package:immich_mobile/providers/asset_viewer/video_player_provider.dart';
-import 'package:immich_mobile/providers/cast.provider.dart';
-import 'package:immich_mobile/utils/hooks/timer_hook.dart';
-import 'package:immich_mobile/widgets/asset_viewer/center_play_button.dart';
-import 'package:immich_mobile/widgets/common/delayed_loading_indicator.dart';
-
-class VideoViewerControls extends HookConsumerWidget {
-  final BaseAsset asset;
-  final Duration hideTimerDuration;
-
-  const VideoViewerControls({super.key, required this.asset, this.hideTimerDuration = const Duration(seconds: 5)});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final videoPlayerName = asset.heroTag;
-    final assetIsVideo = asset.isVideo;
-    final showControls = ref.watch(assetViewerProvider.select((s) => s.showingControls && !s.showingDetails));
-    final status = ref.watch(videoPlayerProvider(videoPlayerName).select((value) => value.status));
-
-    final cast = ref.watch(castProvider);
-
-    // A timer to hide the controls
-    final hideTimer = useTimer(hideTimerDuration, () {
-      if (!context.mounted) {
-        return;
-      }
-      final status = ref.read(videoPlayerProvider(videoPlayerName)).status;
-
-      // Do not hide on paused
-      if (status != VideoPlaybackStatus.paused && status != VideoPlaybackStatus.completed && assetIsVideo) {
-        ref.read(assetViewerProvider.notifier).setControls(false);
-      }
-    });
-    final showBuffering = status == VideoPlaybackStatus.buffering && !cast.isCasting;
-
-    /// Shows the controls and starts the timer to hide them
-    void showControlsAndStartHideTimer() {
-      hideTimer.reset();
-      ref.read(assetViewerProvider.notifier).setControls(true);
-    }
-
-    // When playback starts, reset the hide timer
-    ref.listen(videoPlayerProvider(videoPlayerName).select((v) => v.status), (previous, next) {
-      if (next == VideoPlaybackStatus.playing) {
-        hideTimer.reset();
-      }
-    });
-
-    /// Toggles between playing and pausing depending on the state of the video
-    void togglePlay() {
-      showControlsAndStartHideTimer();
-
-      if (cast.isCasting) {
-        switch (cast.castState) {
-          case CastState.playing:
-            ref.read(castProvider.notifier).pause();
-          case CastState.paused:
-            ref.read(castProvider.notifier).play();
-          default:
-        }
-        return;
-      }
-
-      final notifier = ref.read(videoPlayerProvider(videoPlayerName).notifier);
-      switch (status) {
-        case VideoPlaybackStatus.playing:
-          notifier.pause();
-        case VideoPlaybackStatus.completed:
-          notifier.restart();
-        default:
-          notifier.play();
-      }
-    }
-
-    void toggleControlsVisibility() {
-      if (showBuffering) return;
-
-      if (showControls) {
-        ref.read(assetViewerProvider.notifier).setControls(false);
-      } else {
-        showControlsAndStartHideTimer();
-      }
-    }
-
-    return GestureDetector(
-      behavior: HitTestBehavior.translucent,
-      onTap: toggleControlsVisibility,
-      child: IgnorePointer(
-        ignoring: !showControls,
-        child: Stack(
-          children: [
-            if (showBuffering)
-              const Center(child: DelayedLoadingIndicator(fadeInDuration: Duration(milliseconds: 400)))
-            else
-              CenterPlayButton(
-                backgroundColor: Colors.black54,
-                iconColor: Colors.white,
-                isFinished: status == VideoPlaybackStatus.completed,
-                isPlaying:
-                    status == VideoPlaybackStatus.playing || (cast.isCasting && cast.castState == CastState.playing),
-                show: assetIsVideo && showControls,
-                onPressed: togglePlay,
-              ),
-          ],
-        ),
-      ),
-    );
-  }
-}
@@ -75,17 +75,29 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
      child: AnimatedOpacity(
        opacity: opacity,
        duration: Durations.short2,
-        child: AppBar(
-          backgroundColor: showingDetails ? Colors.transparent : Colors.black.withValues(alpha: 0.5),
-          leading: const _AppBarBackButton(),
-          iconTheme: const IconThemeData(size: 22, color: Colors.white),
-          actionsIconTheme: const IconThemeData(size: 22, color: Colors.white),
-          shape: const Border(),
-          actions: showingDetails || isReadonlyModeEnabled
-              ? null
-              : isInLockedView
-              ? lockedViewActions
-              : actions,
+        child: DecoratedBox(
+          decoration: BoxDecoration(
+            gradient: showingDetails
+                ? null
+                : const LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [Colors.black45, Colors.black12, Colors.transparent],
+                    stops: [0.0, 0.7, 1.0],
+                  ),
+          ),
+          child: AppBar(
+            backgroundColor: Colors.transparent,
+            leading: const _AppBarBackButton(),
+            iconTheme: const IconThemeData(size: 22, color: Colors.white),
+            actionsIconTheme: const IconThemeData(size: 22, color: Colors.white),
+            shape: const Border(),
+            actions: showingDetails || isReadonlyModeEnabled
+                ? null
+                : isInLockedView
+                ? lockedViewActions
+                : actions,
+          ),
        ),
      ),
    );
@@ -101,17 +113,14 @@ class _AppBarBackButton extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final showingDetails = ref.watch(assetViewerProvider.select((state) => state.showingDetails));
-    final backgroundColor = showingDetails && !context.isDarkTheme ? Colors.white : Colors.black;
-    final foregroundColor = showingDetails && !context.isDarkTheme ? Colors.black : Colors.white;
-
    return Padding(
      padding: const EdgeInsets.only(left: 12.0),
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
-          backgroundColor: backgroundColor,
+          backgroundColor: showingDetails ? context.colorScheme.surface : Colors.transparent,
          shape: const CircleBorder(),
          iconSize: 22,
-          iconColor: foregroundColor,
+          iconColor: showingDetails ? context.colorScheme.onSurface : Colors.white,
          padding: EdgeInsets.zero,
          elevation: showingDetails ? 4 : 0,
        ),
@@ -0,0 +1,96 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:flutter/foundation.dart' show InformationCollector;
+import 'package:flutter/painting.dart';
+
+/// A [MultiFrameImageStreamCompleter] with support for listener tracking
+/// which makes resource cleanup possible when no longer needed.
+/// Codec is disposed through the MultiFrameImageStreamCompleter's internals onDispose method
+class AnimatedImageStreamCompleter extends MultiFrameImageStreamCompleter {
+  void Function()? _onLastListenerRemoved;
+  int _listenerCount = 0;
+  // True once any image or the codec has been provided.
+  // Until then the image cache holds one listener, so "last real listener gone"
+  // is _listenerCount == 1, not 0.
+  bool didProvideImage = false;
+
+  AnimatedImageStreamCompleter._({
+    required super.codec,
+    required super.scale,
+    super.informationCollector,
+    void Function()? onLastListenerRemoved,
+  }) : _onLastListenerRemoved = onLastListenerRemoved;
+
+  factory AnimatedImageStreamCompleter({
+    required Stream<Object> stream,
+    required double scale,
+    ImageInfo? initialImage,
+    InformationCollector? informationCollector,
+    void Function()? onLastListenerRemoved,
+  }) {
+    final codecCompleter = Completer<ui.Codec>();
+    final self = AnimatedImageStreamCompleter._(
+      codec: codecCompleter.future,
+      scale: scale,
+      informationCollector: informationCollector,
+      onLastListenerRemoved: onLastListenerRemoved,
+    );
+
+    if (initialImage != null) {
+      self.didProvideImage = true;
+      self.setImage(initialImage);
+    }
+
+    stream.listen(
+      (item) {
+        if (item is ImageInfo) {
+          self.didProvideImage = true;
+          self.setImage(item);
+        } else if (item is ui.Codec) {
+          if (!codecCompleter.isCompleted) {
+            self.didProvideImage = true;
+            codecCompleter.complete(item);
+          }
+        }
+      },
+      onError: (Object error, StackTrace stack) {
+        if (!codecCompleter.isCompleted) {
+          codecCompleter.completeError(error, stack);
+        }
+      },
+      onDone: () {
+        // also complete if we are done but no error occurred, and we didn't call complete yet
+        // could happen on cancellation
+        if (!codecCompleter.isCompleted) {
+          codecCompleter.completeError(StateError('Stream closed without providing a codec'));
+        }
+      },
+    );
+
+    return self;
+  }
+
+  @override
+  void addListener(ImageStreamListener listener) {
+    super.addListener(listener);
+    _listenerCount++;
+  }
+
+  @override
+  void removeListener(ImageStreamListener listener) {
+    super.removeListener(listener);
+    _listenerCount--;
+
+    final bool onlyCacheListenerLeft = _listenerCount == 1 && !didProvideImage;
+    final bool noListenersAfterCodec = _listenerCount == 0 && didProvideImage;
+
+    if (onlyCacheListenerLeft || noListenersAfterCodec) {
+      final onLastListenerRemoved = _onLastListenerRemoved;
+      if (onLastListenerRemoved != null) {
+        _onLastListenerRemoved = null;
+        onLastListenerRemoved();
+      }
+    }
+  }
+}
@@ -140,7 +140,7 @@ ImageProvider getFullImageProvider(BaseAsset asset, {Size size = const Size(1080
  final ImageProvider provider;
  if (_shouldUseLocalAsset(asset)) {
    final id = asset is LocalAsset ? asset.id : (asset as RemoteAsset).localId!;
-    provider = LocalFullImageProvider(id: id, size: size, assetType: asset.type);
+    provider = LocalFullImageProvider(id: id, size: size, assetType: asset.type, isAnimated: asset.isAnimatedImage);
  } else {
    final String assetId;
    final String thumbhash;
@@ -153,7 +153,12 @@ ImageProvider getFullImageProvider(BaseAsset asset, {Size size = const Size(1080
    } else {
      throw ArgumentError("Unsupported asset type: ${asset.runtimeType}");
    }
-    provider = RemoteFullImageProvider(assetId: assetId, thumbhash: thumbhash, assetType: asset.type);
+    provider = RemoteFullImageProvider(
+      assetId: assetId,
+      thumbhash: thumbhash,
+      assetType: asset.type,
+      isAnimated: asset.isAnimatedImage,
+    );
  }

  return provider;
@@ -1,11 +1,10 @@
-import 'dart:ui';
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/infrastructure/loaders/image_request.dart';
+import 'package:immich_mobile/presentation/widgets/images/animated_image_stream_completer.dart';
 import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/constants.dart';
@@ -58,8 +57,9 @@ class LocalFullImageProvider extends CancellableImageProvider<LocalFullImageProv
  final String id;
  final Size size;
  final AssetType assetType;
+  final bool isAnimated;

-  LocalFullImageProvider({required this.id, required this.assetType, required this.size});
+  LocalFullImageProvider({required this.id, required this.assetType, required this.size, required this.isAnimated});

  @override
  Future<LocalFullImageProvider> obtainKey(ImageConfiguration configuration) {
@@ -68,6 +68,21 @@ class LocalFullImageProvider extends CancellableImageProvider<LocalFullImageProv

  @override
  ImageStreamCompleter loadImage(LocalFullImageProvider key, ImageDecoderCallback decode) {
+    if (key.isAnimated) {
+      return AnimatedImageStreamCompleter(
+        stream: _animatedCodec(key, decode),
+        scale: 1.0,
+        initialImage: getInitialImage(LocalThumbProvider(id: key.id, assetType: key.assetType)),
+        informationCollector: () => <DiagnosticsNode>[
+          DiagnosticsProperty<ImageProvider>('Image provider', this),
+          DiagnosticsProperty<String>('Id', key.id),
+          DiagnosticsProperty<Size>('Size', key.size),
+          DiagnosticsProperty<bool>('isAnimated', key.isAnimated),
+        ],
+        onLastListenerRemoved: cancel,
+      );
+    }
+
    return OneFramePlaceholderImageStreamCompleter(
      _codec(key, decode),
      initialImage: getInitialImage(LocalThumbProvider(id: key.id, assetType: key.assetType)),
@@ -75,6 +90,7 @@ class LocalFullImageProvider extends CancellableImageProvider<LocalFullImageProv
        DiagnosticsProperty<ImageProvider>('Image provider', this),
        DiagnosticsProperty<String>('Id', key.id),
        DiagnosticsProperty<Size>('Size', key.size),
+        DiagnosticsProperty<bool>('isAnimated', key.isAnimated),
      ],
      onLastListenerRemoved: cancel,
    );
@@ -110,15 +126,45 @@ class LocalFullImageProvider extends CancellableImageProvider<LocalFullImageProv
    yield* loadRequest(request, decode);
  }

+  Stream<Object> _animatedCodec(LocalFullImageProvider key, ImageDecoderCallback decode) async* {
+    yield* initialImageStream();
+
+    if (isCancelled) {
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    final devicePixelRatio = PlatformDispatcher.instance.views.first.devicePixelRatio;
+    final previewRequest = request = LocalImageRequest(
+      localId: key.id,
+      size: Size(size.width * devicePixelRatio, size.height * devicePixelRatio),
+      assetType: key.assetType,
+    );
+    yield* loadRequest(previewRequest, decode);
+
+    if (isCancelled) {
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    // always try original for animated, since previews don't support animation
+    final originalRequest = request = LocalImageRequest(localId: key.id, size: Size.zero, assetType: key.assetType);
+    final codec = await loadCodecRequest(originalRequest);
+    if (codec == null) {
+      throw StateError('Failed to load animated codec for local asset ${key.id}');
+    }
+    yield codec;
+  }
+
  @override
  bool operator ==(Object other) {
    if (identical(this, other)) return true;
    if (other is LocalFullImageProvider) {
-      return id == other.id && size == other.size;
+      return id == other.id && size == other.size && isAnimated == other.isAnimated;
    }
    return false;
  }

  @override
-  int get hashCode => id.hashCode ^ size.hashCode;
+  int get hashCode => id.hashCode ^ size.hashCode ^ isAnimated.hashCode;
 }
@@ -4,6 +4,7 @@ import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/domain/services/setting.service.dart';
 import 'package:immich_mobile/infrastructure/loaders/image_request.dart';
+import 'package:immich_mobile/presentation/widgets/images/animated_image_stream_completer.dart';
 import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
 import 'package:immich_mobile/presentation/widgets/images/one_frame_multi_image_stream_completer.dart';
 import 'package:immich_mobile/utils/image_url_builder.dart';
@@ -58,8 +59,14 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
  final String assetId;
  final String thumbhash;
  final AssetType assetType;
+  final bool isAnimated;

-  RemoteFullImageProvider({required this.assetId, required this.thumbhash, required this.assetType});
+  RemoteFullImageProvider({
+    required this.assetId,
+    required this.thumbhash,
+    required this.assetType,
+    required this.isAnimated,
+  });

  @override
  Future<RemoteFullImageProvider> obtainKey(ImageConfiguration configuration) {
@@ -68,12 +75,27 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr

  @override
  ImageStreamCompleter loadImage(RemoteFullImageProvider key, ImageDecoderCallback decode) {
+    if (key.isAnimated) {
+      return AnimatedImageStreamCompleter(
+        stream: _animatedCodec(key, decode),
+        scale: 1.0,
+        initialImage: getInitialImage(RemoteImageProvider.thumbnail(assetId: key.assetId, thumbhash: key.thumbhash)),
+        informationCollector: () => <DiagnosticsNode>[
+          DiagnosticsProperty<ImageProvider>('Image provider', this),
+          DiagnosticsProperty<String>('Asset Id', key.assetId),
+          DiagnosticsProperty<bool>('isAnimated', key.isAnimated),
+        ],
+        onLastListenerRemoved: cancel,
+      );
+    }
+
    return OneFramePlaceholderImageStreamCompleter(
      _codec(key, decode),
      initialImage: getInitialImage(RemoteImageProvider.thumbnail(assetId: key.assetId, thumbhash: key.thumbhash)),
      informationCollector: () => <DiagnosticsNode>[
        DiagnosticsProperty<ImageProvider>('Image provider', this),
        DiagnosticsProperty<String>('Asset Id', key.assetId),
+        DiagnosticsProperty<bool>('isAnimated', key.isAnimated),
      ],
      onLastListenerRemoved: cancel,
    );
@@ -106,16 +128,43 @@ class RemoteFullImageProvider extends CancellableImageProvider<RemoteFullImagePr
    yield* loadRequest(originalRequest, decode);
  }

+  Stream<Object> _animatedCodec(RemoteFullImageProvider key, ImageDecoderCallback decode) async* {
+    yield* initialImageStream();
+
+    if (isCancelled) {
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    final previewRequest = request = RemoteImageRequest(
+      uri: getThumbnailUrlForRemoteId(key.assetId, type: AssetMediaSize.preview, thumbhash: key.thumbhash),
+    );
+    yield* loadRequest(previewRequest, decode, evictOnError: false);
+
+    if (isCancelled) {
+      PaintingBinding.instance.imageCache.evict(this);
+      return;
+    }
+
+    // always try original for animated, since previews don't support animation
+    final originalRequest = request = RemoteImageRequest(uri: getOriginalUrlForRemoteId(key.assetId));
+    final codec = await loadCodecRequest(originalRequest);
+    if (codec == null) {
+      throw StateError('Failed to load animated codec for asset ${key.assetId}');
+    }
+    yield codec;
+  }
+
  @override
  bool operator ==(Object other) {
    if (identical(this, other)) return true;
    if (other is RemoteFullImageProvider) {
-      return assetId == other.assetId && thumbhash == other.thumbhash;
+      return assetId == other.assetId && thumbhash == other.thumbhash && isAnimated == other.isAnimated;
    }

    return false;
  }

  @override
-  int get hashCode => assetId.hashCode ^ thumbhash.hashCode;
+  int get hashCode => assetId.hashCode ^ thumbhash.hashCode ^ isAnimated.hashCode;
 }
@@ -305,6 +305,8 @@ class _AssetTypeIcons extends StatelessWidget {
            padding: EdgeInsets.only(right: 10.0, top: 6.0),
            child: _TileOverlayIcon(Icons.motion_photos_on_rounded),
          ),
+        if (asset.isAnimatedImage)
+          const Padding(padding: EdgeInsets.only(right: 10.0, top: 6.0), child: _TileOverlayIcon(Icons.gif_rounded)),
      ],
    );
  }
@@ -100,11 +100,11 @@ class AssetViewerStateNotifier extends Notifier<AssetViewerState> {
      return;
    }
    state = state.copyWith(showingDetails: showing, showingControls: showing ? true : state.showingControls);
-    if (showing) {
-      final heroTag = state.currentAsset?.heroTag;
-      if (heroTag != null) {
-        ref.read(videoPlayerProvider(heroTag).notifier).pause();
-      }
+
+    final heroTag = state.currentAsset?.heroTag;
+    if (heroTag != null) {
+      final notifier = ref.read(videoPlayerProvider(heroTag).notifier);
+      showing ? notifier.hold() : notifier.release();
    }
  }

@@ -44,10 +44,7 @@ class VideoPlayerNotifier extends StateNotifier<VideoPlayerState> {
  NativeVideoPlayerController? _controller;
  Timer? _bufferingTimer;
  Timer? _seekTimer;
-
-  void attachController(NativeVideoPlayerController controller) {
-    _controller = controller;
-  }
+  VideoPlaybackStatus? _holdStatus;

  @override
  void dispose() {
@@ -59,6 +56,19 @@ class VideoPlayerNotifier extends StateNotifier<VideoPlayerState> {
    super.dispose();
  }

+  void attachController(NativeVideoPlayerController controller) {
+    _controller = controller;
+  }
+
+  Future<void> load(VideoSource source) async {
+    _startBufferingTimer();
+    try {
+      await _controller?.loadVideoSource(source);
+    } catch (e) {
+      _log.severe('Error loading video source: $e');
+    }
+  }
+
  Future<void> pause() async {
    if (_controller == null) return;

@@ -94,16 +104,50 @@ class VideoPlayerNotifier extends StateNotifier<VideoPlayerState> {
  }

  void seekTo(Duration position) {
-    if (_controller == null) return;
+    if (_controller == null || state.position == position) return;

    state = state.copyWith(position: position);

-    _seekTimer?.cancel();
-    _seekTimer = Timer(const Duration(milliseconds: 100), () {
-      _controller?.seekTo(position.inMilliseconds);
+    if (_seekTimer?.isActive ?? false) return;
+
+    _seekTimer = Timer(const Duration(milliseconds: 150), () {
+      _controller?.seekTo(state.position.inMilliseconds);
    });
  }

+  void toggle() {
+    _holdStatus = null;
+
+    switch (state.status) {
+      case VideoPlaybackStatus.paused:
+        play();
+      case VideoPlaybackStatus.playing || VideoPlaybackStatus.buffering:
+        pause();
+      case VideoPlaybackStatus.completed:
+        restart();
+    }
+  }
+
+  /// Pauses playback and preserves the current status for later restoration.
+  void hold() {
+    if (_holdStatus != null) return;
+
+    _holdStatus = state.status;
+    pause();
+  }
+
+  /// Restores playback to the status before [hold] was called.
+  void release() {
+    final status = _holdStatus;
+    _holdStatus = null;
+
+    switch (status) {
+      case VideoPlaybackStatus.playing || VideoPlaybackStatus.buffering:
+        play();
+      default:
+    }
+  }
+
  Future<void> restart() async {
    seekTo(Duration.zero);
    await play();
@@ -149,13 +193,12 @@ class VideoPlayerNotifier extends StateNotifier<VideoPlayerState> {
    final position = Duration(milliseconds: playbackInfo.position);
    if (state.position == position) return;

-    if (state.status == VideoPlaybackStatus.buffering) {
-      state = state.copyWith(position: position, status: VideoPlaybackStatus.playing);
-    } else {
-      state = state.copyWith(position: position);
-    }
+    if (state.status == VideoPlaybackStatus.playing) _startBufferingTimer();

-    _startBufferingTimer();
+    state = state.copyWith(
+      position: position,
+      status: state.status == VideoPlaybackStatus.buffering ? VideoPlaybackStatus.playing : null,
+    );
  }

  void onNativeStatusChanged() {
@@ -173,9 +216,7 @@ class VideoPlayerNotifier extends StateNotifier<VideoPlayerState> {
        onNativePlaybackEnded();
    }

-    if (state.status != newStatus) {
-      state = state.copyWith(status: newStatus);
-    }
+    if (state.status != newStatus) state = state.copyWith(status: newStatus);
  }

  void onNativePlaybackEnded() {
@@ -186,7 +227,7 @@ class VideoPlayerNotifier extends StateNotifier<VideoPlayerState> {
  void _startBufferingTimer() {
    _bufferingTimer?.cancel();
    _bufferingTimer = Timer(const Duration(seconds: 3), () {
-      if (mounted && state.status == VideoPlaybackStatus.playing) {
+      if (mounted && state.status != VideoPlaybackStatus.completed) {
        state = state.copyWith(status: VideoPlaybackStatus.buffering);
      }
    });
@@ -123,7 +123,7 @@ class AuthNotifier extends StateNotifier<AuthState> {
  }

  Future<bool> saveAuthInfo({required String accessToken}) async {
-    await _apiService.setAccessToken(accessToken);
+    await Store.put(StoreKey.accessToken, accessToken);
    await _apiService.updateHeaders();

    final serverEndpoint = Store.get(StoreKey.serverEndpoint);
@@ -145,7 +145,6 @@ class AuthNotifier extends StateNotifier<AuthState> {
        user = serverUser;
        await Store.put(StoreKey.deviceId, deviceId);
        await Store.put(StoreKey.deviceIdHash, fastHash(deviceId));
-        await Store.put(StoreKey.accessToken, accessToken);
      }
    } on ApiException catch (error, stackTrace) {
      if (error.code == 401) {
@@ -91,6 +91,16 @@ class CastNotifier extends StateNotifier<CastManagerState> {
    return discovered;
  }

+  void toggle() {
+    switch (state.castState) {
+      case CastState.playing:
+        pause();
+      case CastState.paused:
+        play();
+      default:
+    }
+  }
+
  void play() {
    _gCastService.play();
  }
@@ -38,10 +38,6 @@ class AuthRepository extends DatabaseRepository {
    });
  }

-  String getAccessToken() {
-    return Store.get(StoreKey.accessToken);
-  }
-
  bool getEndpointSwitchingFeature() {
    return Store.tryGet(StoreKey.autoEndpointSwitching) ?? false;
  }
@@ -11,7 +11,7 @@ import 'package:immich_mobile/utils/url_helper.dart';
 import 'package:logging/logging.dart';
 import 'package:openapi/api.dart';

-class ApiService implements Authentication {
+class ApiService {
  late ApiClient _apiClient;

  late UsersApi usersApi;
@@ -45,7 +45,6 @@ class ApiService implements Authentication {
      setEndpoint(endpoint);
    }
  }
-  String? _accessToken;
  final _log = Logger("ApiService");

  Future<void> updateHeaders() async {
@@ -54,11 +53,8 @@ class ApiService implements Authentication {
  }

  setEndpoint(String endpoint) {
-    _apiClient = ApiClient(basePath: endpoint, authentication: this);
+    _apiClient = ApiClient(basePath: endpoint);
    _apiClient.client = NetworkRepository.client;
-    if (_accessToken != null) {
-      setAccessToken(_accessToken!);
-    }
    usersApi = UsersApi(_apiClient);
    authenticationApi = AuthenticationApi(_apiClient);
    oAuthApi = AuthenticationApi(_apiClient);
@@ -157,11 +153,6 @@ class ApiService implements Authentication {
    return "";
  }

-  Future<void> setAccessToken(String accessToken) async {
-    _accessToken = accessToken;
-    await Store.put(StoreKey.accessToken, accessToken);
-  }
-
  Future<void> setDeviceInfoHeader() async {
    DeviceInfoPlugin deviceInfoPlugin = DeviceInfoPlugin();

@@ -185,10 +176,6 @@ class ApiService implements Authentication {
    if (serverEndpoint != null && serverEndpoint.isNotEmpty) {
      urls.add(serverEndpoint);
    }
-    final serverUrl = Store.tryGet(StoreKey.serverUrl);
-    if (serverUrl != null && serverUrl.isNotEmpty) {
-      urls.add(serverUrl);
-    }
    final localEndpoint = Store.tryGet(StoreKey.localEndpoint);
    if (localEndpoint != null && localEndpoint.isNotEmpty) {
      urls.add(localEndpoint);
@@ -205,28 +192,12 @@ class ApiService implements Authentication {
  }

  static Map<String, String> getRequestHeaders() {
-    var accessToken = Store.get(StoreKey.accessToken, "");
    var customHeadersStr = Store.get(StoreKey.customHeaders, "");
-    var header = <String, String>{};
-    if (accessToken.isNotEmpty) {
-      header['x-immich-user-token'] = accessToken;
-    }
-
    if (customHeadersStr.isEmpty) {
-      return header;
+      return const {};
    }

-    var customHeaders = jsonDecode(customHeadersStr) as Map;
-    customHeaders.forEach((key, value) {
-      header[key] = value;
-    });
-
-    return header;
-  }
-
-  @override
-  Future<void> applyToParams(List<QueryParam> queryParams, Map<String, String> headerParams) {
-    return Future.value();
+    return (jsonDecode(customHeadersStr) as Map).cast<String, String>();
  }

  ApiClient get apiClient => _apiClient;
@@ -340,7 +340,6 @@ class BackgroundService {
      ],
    );

-    await ref.read(apiServiceProvider).setAccessToken(Store.get(StoreKey.accessToken));
    await ref.read(authServiceProvider).setOpenApiServiceEndpoint();
    dPrint(() => "[BG UPLOAD] Using endpoint: ${ref.read(apiServiceProvider).apiClient.basePath}");

@@ -74,7 +74,6 @@ class BackupVerificationService {
      final lower = compute(_computeSaveToDelete, (
        deleteCandidates: deleteCandidates.slice(0, half),
        originals: originals.slice(0, half),
-        auth: Store.get(StoreKey.accessToken),
        endpoint: Store.get(StoreKey.serverEndpoint),
        rootIsolateToken: isolateToken,
        fileMediaRepository: _fileMediaRepository,
@@ -82,7 +81,6 @@ class BackupVerificationService {
      final upper = compute(_computeSaveToDelete, (
        deleteCandidates: deleteCandidates.slice(half),
        originals: originals.slice(half),
-        auth: Store.get(StoreKey.accessToken),
        endpoint: Store.get(StoreKey.serverEndpoint),
        rootIsolateToken: isolateToken,
        fileMediaRepository: _fileMediaRepository,
@@ -92,7 +90,6 @@ class BackupVerificationService {
      toDelete = await compute(_computeSaveToDelete, (
        deleteCandidates: deleteCandidates,
        originals: originals,
-        auth: Store.get(StoreKey.accessToken),
        endpoint: Store.get(StoreKey.serverEndpoint),
        rootIsolateToken: isolateToken,
        fileMediaRepository: _fileMediaRepository,
@@ -105,7 +102,6 @@ class BackupVerificationService {
    ({
      List<Asset> deleteCandidates,
      List<Asset> originals,
-      String auth,
      String endpoint,
      RootIsolateToken rootIsolateToken,
      FileMediaRepository fileMediaRepository,
@@ -120,7 +116,6 @@ class BackupVerificationService {
    await tuple.fileMediaRepository.enableBackgroundAccess();
    final ApiService apiService = ApiService();
    apiService.setEndpoint(tuple.endpoint);
-    await apiService.setAccessToken(tuple.auth);
    for (int i = 0; i < tuple.deleteCandidates.length; i++) {
      if (await _compareAssets(tuple.deleteCandidates[i], tuple.originals[i], apiService)) {
        result.add(tuple.deleteCandidates[i]);
@@ -62,8 +62,6 @@ ThemeData getThemeData({required ColorScheme colorScheme, required Locale locale
    ),
    chipTheme: const ChipThemeData(side: BorderSide.none),
    sliderTheme: const SliderThemeData(
-      thumbShape: RoundSliderThumbShape(enabledThumbRadius: 7),
-      trackHeight: 2.0,
      // ignore: deprecated_member_use
      year2023: false,
    ),
@@ -18,6 +18,7 @@ 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';
@@ -75,6 +76,7 @@ enum ActionButtonType {
  viewInTimeline,
  download,
  upload,
+  openInBrowser,
  unstack,
  archive,
  unarchive,
@@ -149,6 +151,7 @@ enum ActionButtonType {
        context.isOwner && //
            !context.isInLockedView && //
            context.isStacked,
+      ActionButtonType.openInBrowser => context.asset.hasRemote && !context.isInLockedView,
      ActionButtonType.likeActivity =>
        !context.isInLockedView &&
            context.currentAlbum != null &&
@@ -236,6 +239,13 @@ 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,
@@ -25,8 +25,10 @@ import 'package:immich_mobile/infrastructure/entities/user.entity.dart';
 import 'package:immich_mobile/infrastructure/repositories/db.repository.dart';
 import 'package:immich_mobile/infrastructure/repositories/sync_stream.repository.dart';
 import 'package:immich_mobile/platform/native_sync_api.g.dart';
+import 'package:immich_mobile/infrastructure/repositories/network.repository.dart';
 import 'package:immich_mobile/platform/network_api.g.dart';
 import 'package:immich_mobile/providers/infrastructure/platform.provider.dart';
+import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:immich_mobile/utils/datetime_helpers.dart';
 import 'package:immich_mobile/utils/debug_print.dart';
@@ -35,7 +37,7 @@ import 'package:isar/isar.dart';
 // ignore: import_rule_photo_manager
 import 'package:photo_manager/photo_manager.dart';

-const int targetVersion = 23;
+const int targetVersion = 25;

 Future<void> migrateDatabaseIfNeeded(Isar db, Drift drift) async {
  final hasVersion = Store.tryGet(StoreKey.version) != null;
@@ -105,6 +107,20 @@ Future<void> migrateDatabaseIfNeeded(Isar db, Drift drift) async {
    await _populateLocalAssetPlaybackStyle(drift);
  }

+  if (version < 24 && Store.isBetaTimelineEnabled) {
+    await _applyLocalAssetOrientation(drift);
+  }
+
+  if (version < 25) {
+    final accessToken = Store.tryGet(StoreKey.accessToken);
+    if (accessToken != null && accessToken.isNotEmpty) {
+      final serverUrls = ApiService.getServerUrls();
+      if (serverUrls.isNotEmpty) {
+        await NetworkRepository.setHeaders(ApiService.getRequestHeaders(), serverUrls, token: accessToken);
+      }
+    }
+  }
+
  if (version < 22 && !Store.isBetaTimelineEnabled) {
    await Store.put(StoreKey.needBetaMigration, true);
  }
@@ -416,26 +432,41 @@ Future<void> _populateLocalAssetPlaybackStyle(Drift db) async {
      });
    }

-    final trashedAssetMap = await nativeApi.getTrashedAssets();
-    for (final entry in trashedAssetMap.cast<String, List<Object?>>().entries) {
-      final assets = entry.value.cast<PlatformAsset>();
-      await db.batch((batch) {
-        for (final asset in assets) {
-          batch.update(
-            db.trashedLocalAssetEntity,
-            TrashedLocalAssetEntityCompanion(playbackStyle: Value(_toPlaybackStyle(asset.playbackStyle))),
-            where: (t) => t.id.equals(asset.id),
-          );
-        }
-      });
+    if (Platform.isAndroid) {
+      final trashedAssetMap = await nativeApi.getTrashedAssets();
+      for (final entry in trashedAssetMap.cast<String, List<Object?>>().entries) {
+        final assets = entry.value.cast<PlatformAsset>();
+        await db.batch((batch) {
+          for (final asset in assets) {
+            batch.update(
+              db.trashedLocalAssetEntity,
+              TrashedLocalAssetEntityCompanion(playbackStyle: Value(_toPlaybackStyle(asset.playbackStyle))),
+              where: (t) => t.id.equals(asset.id),
+            );
+          }
+        });
+      }
+      dPrint(() => "[MIGRATION] Successfully populated playbackStyle for local and trashed assets");
+    } else {
+      dPrint(() => "[MIGRATION] Successfully populated playbackStyle for local assets");
    }
-
-    dPrint(() => "[MIGRATION] Successfully populated playbackStyle for local and trashed assets");
  } catch (error) {
    dPrint(() => "[MIGRATION] Error while populating playbackStyle: $error");
  }
 }

+Future<void> _applyLocalAssetOrientation(Drift db) {
+  final query = db.localAssetEntity.update()
+    ..where((filter) => (filter.orientation.equals(90) | (filter.orientation.equals(270))));
+  return query.write(
+    LocalAssetEntityCompanion.custom(
+      width: db.localAssetEntity.height,
+      height: db.localAssetEntity.width,
+      orientation: const Variable(0),
+    ),
+  );
+}
+
 AssetPlaybackStyle _toPlaybackStyle(PlatformAssetPlaybackStyle style) => switch (style) {
  PlatformAssetPlaybackStyle.unknown => AssetPlaybackStyle.unknown,
  PlatformAssetPlaybackStyle.image => AssetPlaybackStyle.image,
@@ -1,12 +1,15 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';

 /// A widget that animates implicitly between a play and a pause icon.
 class AnimatedPlayPause extends StatefulWidget {
-  const AnimatedPlayPause({super.key, required this.playing, this.size, this.color});
+  const AnimatedPlayPause({super.key, required this.playing, this.size, this.color, this.shadows});

  final double? size;
  final bool playing;
  final Color? color;
+  final List<Shadow>? shadows;

  @override
  State<StatefulWidget> createState() => AnimatedPlayPauseState();
@@ -39,12 +42,32 @@ class AnimatedPlayPauseState extends State<AnimatedPlayPause> with SingleTickerP

  @override
  Widget build(BuildContext context) {
+    final icon = AnimatedIcon(
+      color: widget.color,
+      size: widget.size,
+      icon: AnimatedIcons.play_pause,
+      progress: animationController,
+    );
+
    return Center(
-      child: AnimatedIcon(
-        color: widget.color,
-        size: widget.size,
-        icon: AnimatedIcons.play_pause,
-        progress: animationController,
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          for (final shadow in widget.shadows ?? const <Shadow>[])
+            Transform.translate(
+              offset: shadow.offset,
+              child: ImageFiltered(
+                imageFilter: ImageFilter.blur(sigmaX: shadow.blurRadius / 2, sigmaY: shadow.blurRadius / 2),
+                child: AnimatedIcon(
+                  color: shadow.color,
+                  size: widget.size,
+                  icon: AnimatedIcons.play_pause,
+                  progress: animationController,
+                ),
+              ),
+            ),
+          icon,
+        ],
      ),
    );
  }
@@ -1,19 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:immich_mobile/extensions/duration_extensions.dart';
-
-class FormattedDuration extends StatelessWidget {
-  final Duration data;
-  const FormattedDuration(this.data, {super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return SizedBox(
-      width: data.inHours > 0 ? 70 : 60, // use a fixed width to prevent jitter
-      child: Text(
-        data.format(),
-        style: const TextStyle(fontSize: 14.0, color: Colors.white, fontWeight: FontWeight.w500),
-        textAlign: TextAlign.center,
-      ),
-    );
-  }
-}
@@ -1,22 +1,113 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/widgets/asset_viewer/video_position.dart';
+import 'package:immich_mobile/constants/colors.dart';
+import 'package:immich_mobile/models/cast/cast_manager_state.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/video_player_provider.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
+import 'package:immich_mobile/utils/hooks/timer_hook.dart';
+import 'package:immich_mobile/extensions/duration_extensions.dart';
+import 'package:immich_mobile/widgets/asset_viewer/animated_play_pause.dart';

-/// The video controls for the [videoPlayerProvider]
-class VideoControls extends ConsumerWidget {
+class VideoControls extends HookConsumerWidget {
  final String videoPlayerName;

+  static const List<Shadow> _controlShadows = [Shadow(color: Colors.black87, blurRadius: 6, offset: Offset(0, 1))];
+
  const VideoControls({super.key, required this.videoPlayerName});

+  void _toggle(WidgetRef ref, bool isCasting) {
+    if (isCasting) {
+      ref.read(castProvider.notifier).toggle();
+    } else {
+      ref.read(videoPlayerProvider(videoPlayerName).notifier).toggle();
+    }
+  }
+
+  void _onSeek(WidgetRef ref, bool isCasting, double value) {
+    final seekTo = Duration(microseconds: value.toInt());
+
+    if (isCasting) {
+      ref.read(castProvider.notifier).seekTo(seekTo);
+      return;
+    }
+
+    ref.read(videoPlayerProvider(videoPlayerName).notifier).seekTo(seekTo);
+  }
+
  @override
  Widget build(BuildContext context, WidgetRef ref) {
-    final isPortrait = context.orientation == Orientation.portrait;
-    return isPortrait
-        ? VideoPosition(videoPlayerName: videoPlayerName)
-        : Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 60.0),
-            child: VideoPosition(videoPlayerName: videoPlayerName),
-          );
+    final provider = videoPlayerProvider(videoPlayerName);
+    final cast = ref.watch(castProvider);
+    final isCasting = cast.isCasting;
+
+    final (position, duration) = isCasting
+        ? ref.watch(castProvider.select((c) => (c.currentTime, c.duration)))
+        : ref.watch(provider.select((v) => (v.position, v.duration)));
+
+    final videoStatus = ref.watch(provider.select((v) => v.status));
+    final isPlaying = isCasting
+        ? cast.castState == CastState.playing
+        : videoStatus == VideoPlaybackStatus.playing || videoStatus == VideoPlaybackStatus.buffering;
+    final isFinished = !isCasting && videoStatus == VideoPlaybackStatus.completed;
+
+    final hideTimer = useTimer(const Duration(seconds: 5), () {
+      if (!context.mounted) return;
+      if (ref.read(provider).status == VideoPlaybackStatus.playing) {
+        ref.read(assetViewerProvider.notifier).setControls(false);
+      }
+    });
+
+    ref.listen(provider.select((v) => v.status), (_, __) => hideTimer.reset());
+
+    final notifier = ref.read(provider.notifier);
+    final isLoaded = duration != Duration.zero;
+
+    return Padding(
+      padding: const EdgeInsets.all(24),
+      child: Column(
+        spacing: 16,
+        children: [
+          Row(
+            children: [
+              IconButton(
+                iconSize: 32,
+                padding: const EdgeInsets.all(12),
+                constraints: const BoxConstraints(),
+                icon: isFinished
+                    ? const Icon(Icons.replay, color: Colors.white, size: 32, shadows: _controlShadows)
+                    : AnimatedPlayPause(color: Colors.white, size: 32, playing: isPlaying, shadows: _controlShadows),
+                onPressed: () => _toggle(ref, isCasting),
+              ),
+              const Spacer(),
+              Text(
+                "${position.format()} / ${duration.format()}",
+                style: const TextStyle(
+                  color: Colors.white,
+                  fontWeight: FontWeight.w500,
+                  fontFeatures: [FontFeature.tabularFigures()],
+                  shadows: _controlShadows,
+                ),
+              ),
+              const SizedBox(width: 16),
+            ],
+          ),
+          Slider(
+            value: min(position.inMicroseconds.toDouble(), duration.inMicroseconds.toDouble()),
+            min: 0,
+            max: max(duration.inMicroseconds.toDouble(), 1),
+            thumbColor: Colors.white,
+            activeColor: Colors.white,
+            inactiveColor: whiteOpacity75,
+            padding: EdgeInsets.zero,
+            onChangeStart: (_) => notifier.hold(),
+            onChangeEnd: (_) => notifier.release(),
+            onChanged: isLoaded ? (value) => _onSeek(ref, isCasting, value) : null,
+          ),
+        ],
+      ),
+    );
  }
 }
@@ -1,110 +0,0 @@
-import 'dart:math';
-
-import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/constants/colors.dart';
-import 'package:immich_mobile/providers/asset_viewer/video_player_provider.dart';
-import 'package:immich_mobile/providers/cast.provider.dart';
-import 'package:immich_mobile/widgets/asset_viewer/formatted_duration.dart';
-
-class VideoPosition extends HookConsumerWidget {
-  final String videoPlayerName;
-
-  const VideoPosition({super.key, required this.videoPlayerName});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final isCasting = ref.watch(castProvider).isCasting;
-
-    final (position, duration) = isCasting
-        ? ref.watch(castProvider.select((c) => (c.currentTime, c.duration)))
-        : ref.watch(videoPlayerProvider(videoPlayerName).select((v) => (v.position, v.duration)));
-
-    final wasPlaying = useRef<bool>(true);
-    return duration == Duration.zero
-        ? const _VideoPositionPlaceholder()
-        : Column(
-            children: [
-              Padding(
-                // align with slider's inherent padding
-                padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: [FormattedDuration(position), FormattedDuration(duration)],
-                ),
-              ),
-              Row(
-                children: [
-                  Expanded(
-                    child: Slider(
-                      value: min(position.inMicroseconds / duration.inMicroseconds * 100, 100),
-                      min: 0,
-                      max: 100,
-                      thumbColor: Colors.white,
-                      activeColor: Colors.white,
-                      inactiveColor: whiteOpacity75,
-                      onChangeStart: (value) {
-                        final status = ref.read(videoPlayerProvider(videoPlayerName)).status;
-                        wasPlaying.value = status != VideoPlaybackStatus.paused;
-                        ref.read(videoPlayerProvider(videoPlayerName).notifier).pause();
-                      },
-                      onChangeEnd: (value) {
-                        if (wasPlaying.value) {
-                          ref.read(videoPlayerProvider(videoPlayerName).notifier).play();
-                        }
-                      },
-                      onChanged: (value) {
-                        final seekToDuration = (duration * (value / 100.0));
-
-                        if (isCasting) {
-                          ref.read(castProvider.notifier).seekTo(seekToDuration);
-                          return;
-                        }
-
-                        ref.read(videoPlayerProvider(videoPlayerName).notifier).seekTo(seekToDuration);
-                      },
-                    ),
-                  ),
-                ],
-              ),
-            ],
-          );
-  }
-}
-
-class _VideoPositionPlaceholder extends StatelessWidget {
-  const _VideoPositionPlaceholder();
-
-  static void _onChangedDummy(_) {}
-
-  @override
-  Widget build(BuildContext context) {
-    return const Column(
-      children: [
-        Padding(
-          padding: EdgeInsets.symmetric(horizontal: 12.0),
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [FormattedDuration(Duration.zero), FormattedDuration(Duration.zero)],
-          ),
-        ),
-        Row(
-          children: [
-            Expanded(
-              child: Slider(
-                value: 0.0,
-                min: 0,
-                max: 100,
-                thumbColor: Colors.white,
-                activeColor: Colors.white,
-                inactiveColor: whiteOpacity75,
-                onChanged: _onChangedDummy,
-              ),
-            ),
-          ],
-        ),
-      ],
-    );
-  }
-}
@@ -35,7 +35,12 @@ class ImmichImage extends StatelessWidget {
    }

    if (asset == null) {
-      return RemoteFullImageProvider(assetId: assetId!, thumbhash: '', assetType: base_asset.AssetType.video);
+      return RemoteFullImageProvider(
+        assetId: assetId!,
+        thumbhash: '',
+        assetType: base_asset.AssetType.video,
+        isAnimated: false,
+      );
    }

    if (useLocal(asset)) {
@@ -43,12 +48,14 @@ class ImmichImage extends StatelessWidget {
        id: asset.localId!,
        assetType: base_asset.AssetType.video,
        size: Size(width, height),
+        isAnimated: false,
      );
    } else {
      return RemoteFullImageProvider(
        assetId: asset.remoteId!,
        thumbhash: asset.thumbhash ?? '',
        assetType: base_asset.AssetType.video,
+        isAnimated: false,
      );
    }
  }
@@ -427,11 +427,7 @@ class SharedLinksApi {
  /// * [String] id (required):
  ///
  /// * [AssetIdsDto] assetIdsDto (required):
-  ///
-  /// * [String] key:
-  ///
-  /// * [String] slug:
-  Future<Response> removeSharedLinkAssetsWithHttpInfo(String id, AssetIdsDto assetIdsDto, { String? key, String? slug, }) async {
+  Future<Response> removeSharedLinkAssetsWithHttpInfo(String id, AssetIdsDto assetIdsDto,) async {
    // ignore: prefer_const_declarations
    final apiPath = r'/shared-links/{id}/assets'
      .replaceAll('{id}', id);
@@ -443,13 +439,6 @@ class SharedLinksApi {
    final headerParams = <String, String>{};
    final formParams = <String, String>{};

-    if (key != null) {
-      queryParams.addAll(_queryParams('', 'key', key));
-    }
-    if (slug != null) {
-      queryParams.addAll(_queryParams('', 'slug', slug));
-    }
-
    const contentTypes = <String>['application/json'];


@@ -473,12 +462,8 @@ class SharedLinksApi {
  /// * [String] id (required):
  ///
  /// * [AssetIdsDto] assetIdsDto (required):
-  ///
-  /// * [String] key:
-  ///
-  /// * [String] slug:
-  Future<List<AssetIdsResponseDto>?> removeSharedLinkAssets(String id, AssetIdsDto assetIdsDto, { String? key, String? slug, }) async {
-    final response = await removeSharedLinkAssetsWithHttpInfo(id, assetIdsDto,  key: key, slug: slug, );
+  Future<List<AssetIdsResponseDto>?> removeSharedLinkAssets(String id, AssetIdsDto assetIdsDto,) async {
+    final response = await removeSharedLinkAssetsWithHttpInfo(id, assetIdsDto,);
    if (response.statusCode >= HttpStatus.badRequest) {
      throw ApiException(response.statusCode, await _decodeBodyBytes(response));
    }
@@ -26,6 +26,7 @@ class AudioCodec {
  static const mp3 = AudioCodec._(r'mp3');
  static const aac = AudioCodec._(r'aac');
  static const libopus = AudioCodec._(r'libopus');
+  static const opus = AudioCodec._(r'opus');
  static const pcmS16le = AudioCodec._(r'pcm_s16le');

  /// List of all possible values in this [enum][AudioCodec].
@@ -33,6 +34,7 @@ class AudioCodec {
    mp3,
    aac,
    libopus,
+    opus,
    pcmS16le,
  ];

@@ -75,6 +77,7 @@ class AudioCodecTypeTransformer {
        case r'mp3': return AudioCodec.mp3;
        case r'aac': return AudioCodec.aac;
        case r'libopus': return AudioCodec.libopus;
+        case r'opus': return AudioCodec.opus;
        case r'pcm_s16le': return AudioCodec.pcmS16le;
        default:
          if (!allowNull) {
@@ -43,5 +43,5 @@ abstract class NetworkApi {

  int getClientPointer();

-  void setRequestHeaders(Map<String, String> headers, List<String> serverUrls);
+  void setRequestHeaders(Map<String, String> headers, List<String> serverUrls, String? token);
 }
@@ -1194,10 +1194,10 @@ packages:
    dependency: transitive
    description:
      name: meta
-      sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
+      sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394"
      url: "https://pub.dev"
    source: hosted
-    version: "1.16.0"
+    version: "1.17.0"
  mime:
    dependency: transitive
    description:
@@ -1218,8 +1218,8 @@ packages:
    dependency: "direct main"
    description:
      path: "."
-      ref: "0a80cd0bd3ff61790d1e05ef15baa7cbe26264d2"
-      resolved-ref: "0a80cd0bd3ff61790d1e05ef15baa7cbe26264d2"
+      ref: cdf621bdb7edaf996e118a58a48f6441187d79c6
+      resolved-ref: cdf621bdb7edaf996e118a58a48f6441187d79c6
      url: "https://github.com/immich-app/native_video_player"
    source: git
    version: "1.3.1"
@@ -1897,10 +1897,10 @@ packages:
    dependency: transitive
    description:
      name: test_api
-      sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
+      sha256: ab2726c1a94d3176a45960b6234466ec367179b87dd74f1611adb1f3b5fb9d55
      url: "https://pub.dev"
    source: hosted
-    version: "0.7.6"
+    version: "0.7.7"
  thumbhash:
    dependency: "direct main"
    description:
@@ -56,7 +56,7 @@ dependencies:
  native_video_player:
    git:
      url: https://github.com/immich-app/native_video_player
-      ref: '0a80cd0bd3ff61790d1e05ef15baa7cbe26264d2'
+      ref: 'cdf621bdb7edaf996e118a58a48f6441187d79c6'
  network_info_plus: ^6.1.3
  octo_image: ^2.1.0
  openapi:
@@ -11605,22 +11605,6 @@
              "format": "uuid",
              "type": "string"
            }
-          },
-          {
-            "name": "key",
-            "required": false,
-            "in": "query",
-            "schema": {
-              "type": "string"
-            }
-          },
-          {
-            "name": "slug",
-            "required": false,
-            "in": "query",
-            "schema": {
-              "type": "string"
-            }
          }
        ],
        "requestBody": {
@@ -11677,6 +11661,7 @@
            "state": "Stable"
          }
        ],
+        "x-immich-permission": "sharedLink.update",
        "x-immich-state": "Stable"
      },
      "put": {
@@ -17260,6 +17245,7 @@
          "mp3",
          "aac",
          "libopus",
+          "opus",
          "pcm_s16le"
        ],
        "type": "string"
@@ -19,7 +19,7 @@
    "@oazapfts/runtime": "^1.0.2"
  },
  "devDependencies": {
-    "@types/node": "^24.10.14",
+    "@types/node": "^24.11.0",
    "typescript": "^5.3.3"
  },
  "repository": {
@@ -5987,19 +5987,14 @@ export function updateSharedLink({ id, sharedLinkEditDto }: {
 /**
 * Remove assets from a shared link
 */
-export function removeSharedLinkAssets({ id, key, slug, assetIdsDto }: {
+export function removeSharedLinkAssets({ id, assetIdsDto }: {
    id: string;
-    key?: string;
-    slug?: string;
    assetIdsDto: AssetIdsDto;
 }, opts?: Oazapfts.RequestOpts) {
    return oazapfts.ok(oazapfts.fetchJson<{
        status: 200;
        data: AssetIdsResponseDto[];
-    }>(`/shared-links/${encodeURIComponent(id)}/assets${QS.query(QS.explode({
-        key,
-        slug
-    }))}`, oazapfts.json({
+    }>(`/shared-links/${encodeURIComponent(id)}/assets`, oazapfts.json({
        ...opts,
        method: "DELETE",
        body: assetIdsDto
@@ -7324,6 +7319,7 @@ export enum AudioCodec {
    Mp3 = "mp3",
    Aac = "aac",
    Libopus = "libopus",
+    Opus = "opus",
    PcmS16Le = "pcm_s16le"
 }
 export enum VideoContainer {
@@ -33,7 +33,7 @@ RUN --mount=type=cache,id=pnpm-web,target=/buildcache/pnpm-store \
  --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \
  --mount=type=bind,source=pnpm-workspace.yaml,target=pnpm-workspace.yaml \
  SHARP_IGNORE_GLOBAL_LIBVIPS=true pnpm --filter @immich/sdk --filter immich-web --frozen-lockfile --force install && \
-  pnpm --filter @immich/sdk --filter immich-web build
+  NODE_OPTIONS=--max-old-space-size=4096 pnpm --filter @immich/sdk --filter immich-web build

 FROM builder AS cli

@@ -46,14 +46,14 @@
    "@nestjs/websockets": "^11.0.4",
    "@opentelemetry/api": "^1.9.0",
    "@opentelemetry/context-async-hooks": "^2.0.0",
-    "@opentelemetry/exporter-prometheus": "^0.212.0",
-    "@opentelemetry/instrumentation-http": "^0.212.0",
-    "@opentelemetry/instrumentation-ioredis": "^0.60.0",
-    "@opentelemetry/instrumentation-nestjs-core": "^0.58.0",
-    "@opentelemetry/instrumentation-pg": "^0.64.0",
+    "@opentelemetry/exporter-prometheus": "^0.213.0",
+    "@opentelemetry/instrumentation-http": "^0.213.0",
+    "@opentelemetry/instrumentation-ioredis": "^0.61.0",
+    "@opentelemetry/instrumentation-nestjs-core": "^0.59.0",
+    "@opentelemetry/instrumentation-pg": "^0.65.0",
    "@opentelemetry/resources": "^2.0.1",
    "@opentelemetry/sdk-metrics": "^2.0.1",
-    "@opentelemetry/sdk-node": "^0.212.0",
+    "@opentelemetry/sdk-node": "^0.213.0",
    "@opentelemetry/semantic-conventions": "^1.34.0",
    "@react-email/components": "^0.5.0",
    "@react-email/render": "^1.1.2",
@@ -66,7 +66,7 @@
    "bullmq": "^5.51.0",
    "chokidar": "^4.0.3",
    "class-transformer": "^0.5.1",
-    "class-validator": "^0.14.0",
+    "class-validator": "^0.15.0",
    "compression": "^1.8.0",
    "cookie": "^1.0.2",
    "cookie-parser": "^1.4.7",
@@ -82,7 +82,7 @@
    "jose": "^5.10.0",
    "js-yaml": "^4.1.0",
    "jsonwebtoken": "^9.0.2",
-    "kysely": "0.28.2",
+    "kysely": "0.28.11",
    "kysely-postgres-js": "^3.0.0",
    "lodash": "^4.17.21",
    "luxon": "^3.4.2",
@@ -136,7 +136,7 @@
    "@types/luxon": "^3.6.2",
    "@types/mock-fs": "^4.13.1",
    "@types/multer": "^2.0.0",
-    "@types/node": "^24.10.14",
+    "@types/node": "^24.11.0",
    "@types/nodemailer": "^7.0.0",
    "@types/picomatch": "^4.0.0",
    "@types/pngjs": "^6.0.5",
@@ -206,7 +206,7 @@ export const defaults = Object.freeze<SystemConfig>({
    targetVideoCodec: VideoCodec.H264,
    acceptedVideoCodecs: [VideoCodec.H264],
    targetAudioCodec: AudioCodec.Aac,
-    acceptedAudioCodecs: [AudioCodec.Aac, AudioCodec.Mp3, AudioCodec.LibOpus],
+    acceptedAudioCodecs: [AudioCodec.Aac, AudioCodec.Mp3, AudioCodec.Opus],
    acceptedContainers: [VideoContainer.Mov, VideoContainer.Ogg, VideoContainer.Webm],
    targetResolution: '720',
    maxBitrate: '0',
@@ -2,7 +2,7 @@ import { Duration } from 'luxon';
 import { readFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { SemVer } from 'semver';
-import { ApiTag, DatabaseExtension, ExifOrientation, VectorIndex } from 'src/enum';
+import { ApiTag, AudioCodec, DatabaseExtension, ExifOrientation, VectorIndex } from 'src/enum';

 export const ErrorMessages = {
  InconsistentMediaLocation:
@@ -201,3 +201,11 @@ export const endpointTags: Record<ApiTag, string> = {
  [ApiTag.Workflows]:
    'A workflow is a set of actions that run whenever a triggering event occurs. Workflows also can include filters to further limit execution.',
 };
+
+export const AUDIO_ENCODER: Record<AudioCodec, string> = {
+  [AudioCodec.Aac]: 'aac',
+  [AudioCodec.Mp3]: 'mp3',
+  [AudioCodec.Libopus]: 'libopus',
+  [AudioCodec.Opus]: 'libopus',
+  [AudioCodec.PcmS16le]: 'pcm_s16le',
+};
@@ -1,7 +1,8 @@
 import { SharedLinkController } from 'src/controllers/shared-link.controller';
-import { SharedLinkType } from 'src/enum';
+import { Permission, SharedLinkType } from 'src/enum';
 import { SharedLinkService } from 'src/services/shared-link.service';
 import request from 'supertest';
+import { factory } from 'test/small.factory';
 import { ControllerContext, controllerSetup, mockBaseService } from 'test/utils';

 describe(SharedLinkController.name, () => {
@@ -31,4 +32,16 @@ describe(SharedLinkController.name, () => {
      expect(service.create).toHaveBeenCalledWith(undefined, expect.objectContaining({ expiresAt: null }));
    });
  });
+
+  describe('DELETE /shared-links/:id/assets', () => {
+    it('should require shared link update permission', async () => {
+      await request(ctx.getHttpServer()).delete(`/shared-links/${factory.uuid()}/assets`).send({ assetIds: [] });
+
+      expect(ctx.authenticate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          metadata: expect.objectContaining({ permission: Permission.SharedLinkUpdate, sharedLinkRoute: false }),
+        }),
+      );
+    });
+  });
 });
@@ -180,7 +180,7 @@ export class SharedLinkController {
  }

  @Delete(':id/assets')
-  @Authenticated({ sharedLink: true })
+  @Authenticated({ permission: Permission.SharedLinkUpdate })
  @Endpoint({
    summary: 'Remove assets from a shared link',
    description:
@@ -154,10 +154,11 @@ export class StorageCore {
  }

  async moveAssetVideo(asset: StorageAsset) {
+    const encodedVideoFile = getAssetFile(asset.files, AssetFileType.EncodedVideo, { isEdited: false });
    return this.moveFile({
      entityId: asset.id,
      pathType: AssetPathType.EncodedVideo,
-      oldPath: asset.encodedVideoPath,
+      oldPath: encodedVideoFile?.path || null,
      newPath: StorageCore.getEncodedVideoPath(asset),
    });
  }
@@ -303,21 +304,15 @@ export class StorageCore {
      case AssetPathType.Original: {
        return this.assetRepository.update({ id, originalPath: newPath });
      }
-      case AssetFileType.FullSize: {
-        return this.assetRepository.upsertFile({ assetId: id, type: AssetFileType.FullSize, path: newPath });
-      }
-      case AssetFileType.Preview: {
-        return this.assetRepository.upsertFile({ assetId: id, type: AssetFileType.Preview, path: newPath });
-      }
-      case AssetFileType.Thumbnail: {
-        return this.assetRepository.upsertFile({ assetId: id, type: AssetFileType.Thumbnail, path: newPath });
-      }
-      case AssetPathType.EncodedVideo: {
-        return this.assetRepository.update({ id, encodedVideoPath: newPath });
-      }
+
+      case AssetFileType.FullSize:
+      case AssetFileType.EncodedVideo:
+      case AssetFileType.Thumbnail:
+      case AssetFileType.Preview:
      case AssetFileType.Sidecar: {
-        return this.assetRepository.upsertFile({ assetId: id, type: AssetFileType.Sidecar, path: newPath });
+        return this.assetRepository.upsertFile({ assetId: id, type: pathType as AssetFileType, path: newPath });
      }
+
      case PersonPathType.Face: {
        return this.personRepository.update({ id, thumbnailPath: newPath });
      }
@@ -1,4 +1,4 @@
-import { Selectable } from 'kysely';
+import { Selectable, ShallowDehydrateObject } from 'kysely';
 import { MapAsset } from 'src/dtos/asset-response.dto';
 import {
  AlbumUserRole,
@@ -16,6 +16,7 @@ import {
 } from 'src/enum';
 import { AlbumTable } from 'src/schema/tables/album.table';
 import { AssetExifTable } from 'src/schema/tables/asset-exif.table';
+import { AssetTable } from 'src/schema/tables/asset.table';
 import { PluginActionTable, PluginFilterTable, PluginTable } from 'src/schema/tables/plugin.table';
 import { WorkflowActionTable, WorkflowFilterTable, WorkflowTable } from 'src/schema/tables/workflow.table';
 import { UserMetadataItem } from 'src/types';
@@ -31,7 +32,7 @@ export type AuthUser = {
 };

 export type AlbumUser = {
-  user: User;
+  user: ShallowDehydrateObject<User>;
  role: AlbumUserRole;
 };

@@ -67,7 +68,7 @@ export type Activity = {
  updatedAt: Date;
  albumId: string;
  userId: string;
-  user: User;
+  user: ShallowDehydrateObject<User>;
  assetId: string | null;
  comment: string | null;
  isLiked: boolean;
@@ -105,7 +106,7 @@ export type Memory = {
  data: object;
  ownerId: string;
  isSaved: boolean;
-  assets: MapAsset[];
+  assets: ShallowDehydrateObject<MapAsset>[];
 };

 export type Asset = {
@@ -153,15 +154,14 @@ export type StorageAsset = {
  id: string;
  ownerId: string;
  files: AssetFile[];
-  encodedVideoPath: string | null;
 };

 export type Stack = {
  id: string;
  primaryAssetId: string;
-  owner?: User;
+  owner?: ShallowDehydrateObject<User>;
  ownerId: string;
-  assets: MapAsset[];
+  assets: ShallowDehydrateObject<MapAsset>[];
  assetCount?: number;
 };

@@ -177,11 +177,11 @@ export type AuthSharedLink = {

 export type SharedLink = {
  id: string;
-  album?: Album | null;
+  album?: ShallowDehydrateObject<Album> | null;
  albumId: string | null;
  allowDownload: boolean;
  allowUpload: boolean;
-  assets: MapAsset[];
+  assets: ShallowDehydrateObject<MapAsset>[];
  createdAt: Date;
  description: string | null;
  expiresAt: Date | null;
@@ -194,8 +194,8 @@ export type SharedLink = {
 };

 export type Album = Selectable<AlbumTable> & {
-  owner: User;
-  assets: MapAsset[];
+  owner: ShallowDehydrateObject<User>;
+  assets: ShallowDehydrateObject<Selectable<AssetTable>>[];
 };

 export type AuthSession = {
@@ -205,9 +205,9 @@ export type AuthSession = {

 export type Partner = {
  sharedById: string;
-  sharedBy: User;
+  sharedBy: ShallowDehydrateObject<User>;
  sharedWithId: string;
-  sharedWith: User;
+  sharedWith: ShallowDehydrateObject<User>;
  createdAt: Date;
  createId: string;
  updatedAt: Date;
@@ -270,7 +270,7 @@ export type AssetFace = {
  imageWidth: number;
  personId: string | null;
  sourceType: SourceType;
-  person?: Person | null;
+  person?: ShallowDehydrateObject<Person> | null;
  updatedAt: Date;
  updateId: string;
  isVisible: boolean;
@@ -1,18 +1,22 @@
 import { mapAlbum } from 'src/dtos/album.dto';
 import { AlbumFactory } from 'test/factories/album.factory';
+import { getForAlbum } from 'test/mappers';

 describe('mapAlbum', () => {
  it('should set start and end dates', () => {
    const startDate = new Date('2023-02-22T05:06:29.716Z');
    const endDate = new Date('2025-01-01T01:02:03.456Z');
-    const album = AlbumFactory.from().asset({ localDateTime: endDate }).asset({ localDateTime: startDate }).build();
-    const dto = mapAlbum(album, false);
-    expect(dto.startDate).toEqual(startDate);
-    expect(dto.endDate).toEqual(endDate);
+    const album = AlbumFactory.from()
+      .asset({ localDateTime: endDate }, (builder) => builder.exif())
+      .asset({ localDateTime: startDate }, (builder) => builder.exif())
+      .build();
+    const dto = mapAlbum(getForAlbum(album), false);
+    expect(dto.startDate).toEqual(startDate.toISOString());
+    expect(dto.endDate).toEqual(endDate.toISOString());
  });

  it('should not set start and end dates for empty assets', () => {
-    const dto = mapAlbum(AlbumFactory.create(), false);
+    const dto = mapAlbum(getForAlbum(AlbumFactory.create()), false);
    expect(dto.startDate).toBeUndefined();
    expect(dto.endDate).toBeUndefined();
  });
@@ -1,13 +1,16 @@
 import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
 import { Type } from 'class-transformer';
 import { ArrayNotEmpty, IsArray, IsString, ValidateNested } from 'class-validator';
+import { ShallowDehydrateObject } from 'kysely';
 import _ from 'lodash';
 import { AlbumUser, AuthSharedLink, User } from 'src/database';
 import { BulkIdErrorReason } from 'src/dtos/asset-ids.response.dto';
 import { AssetResponseDto, MapAsset, mapAsset } from 'src/dtos/asset-response.dto';
 import { AuthDto } from 'src/dtos/auth.dto';
-import { UserResponseDto, mapUser } from 'src/dtos/user.dto';
+import { mapUser, UserResponseDto } from 'src/dtos/user.dto';
 import { AlbumUserRole, AssetOrder } from 'src/enum';
+import { MaybeDehydrated } from 'src/types';
+import { asDateString } from 'src/utils/date';
 import { Optional, ValidateBoolean, ValidateEnum, ValidateUUID } from 'src/validation';

 export class AlbumInfoDto {
@@ -151,10 +154,10 @@ export class AlbumResponseDto {
  albumName!: string;
  @ApiProperty({ description: 'Album description' })
  description!: string;
-  @ApiProperty({ description: 'Creation date' })
-  createdAt!: Date;
-  @ApiProperty({ description: 'Last update date' })
-  updatedAt!: Date;
+  @ApiProperty({ description: 'Creation date', format: 'date-time' })
+  createdAt!: string;
+  @ApiProperty({ description: 'Last update date', format: 'date-time' })
+  updatedAt!: string;
  @ApiProperty({ description: 'Thumbnail asset ID' })
  albumThumbnailAssetId!: string | null;
  @ApiProperty({ description: 'Is shared album' })
@@ -172,12 +175,12 @@ export class AlbumResponseDto {
  owner!: UserResponseDto;
  @ApiProperty({ type: 'integer', description: 'Number of assets' })
  assetCount!: number;
-  @ApiPropertyOptional({ description: 'Last modified asset timestamp' })
-  lastModifiedAssetTimestamp?: Date;
-  @ApiPropertyOptional({ description: 'Start date (earliest asset)' })
-  startDate?: Date;
-  @ApiPropertyOptional({ description: 'End date (latest asset)' })
-  endDate?: Date;
+  @ApiPropertyOptional({ description: 'Last modified asset timestamp', format: 'date-time' })
+  lastModifiedAssetTimestamp?: string;
+  @ApiPropertyOptional({ description: 'Start date (earliest asset)', format: 'date-time' })
+  startDate?: string;
+  @ApiPropertyOptional({ description: 'End date (latest asset)', format: 'date-time' })
+  endDate?: string;
  @ApiProperty({ description: 'Activity feed enabled' })
  isActivityEnabled!: boolean;
  @ValidateEnum({ enum: AssetOrder, name: 'AssetOrder', description: 'Asset sort order', optional: true })
@@ -191,8 +194,8 @@ export class AlbumResponseDto {

 export type MapAlbumDto = {
  albumUsers?: AlbumUser[];
-  assets?: MapAsset[];
-  sharedLinks?: AuthSharedLink[];
+  assets?: ShallowDehydrateObject<MapAsset>[];
+  sharedLinks?: ShallowDehydrateObject<AuthSharedLink>[];
  albumName: string;
  description: string;
  albumThumbnailAssetId: string | null;
@@ -200,12 +203,16 @@ export type MapAlbumDto = {
  updatedAt: Date;
  id: string;
  ownerId: string;
-  owner: User;
+  owner: ShallowDehydrateObject<User>;
  isActivityEnabled: boolean;
  order: AssetOrder;
 };

-export const mapAlbum = (entity: MapAlbumDto, withAssets: boolean, auth?: AuthDto): AlbumResponseDto => {
+export const mapAlbum = (
+  entity: MaybeDehydrated<MapAlbumDto>,
+  withAssets: boolean,
+  auth?: AuthDto,
+): AlbumResponseDto => {
  const albumUsers: AlbumUserResponseDto[] = [];

  if (entity.albumUsers) {
@@ -236,16 +243,16 @@ export const mapAlbum = (entity: MapAlbumDto, withAssets: boolean, auth?: AuthDt
    albumName: entity.albumName,
    description: entity.description,
    albumThumbnailAssetId: entity.albumThumbnailAssetId,
-    createdAt: entity.createdAt,
-    updatedAt: entity.updatedAt,
+    createdAt: asDateString(entity.createdAt),
+    updatedAt: asDateString(entity.updatedAt),
    id: entity.id,
    ownerId: entity.ownerId,
    owner: mapUser(entity.owner),
    albumUsers: albumUsersSorted,
    shared: hasSharedUser || hasSharedLink,
    hasSharedLink,
-    startDate,
-    endDate,
+    startDate: asDateString(startDate),
+    endDate: asDateString(endDate),
    assets: (withAssets ? assets : []).map((asset) => mapAsset(asset, { auth })),
    assetCount: entity.assets?.length || 0,
    isActivityEnabled: entity.isActivityEnabled,
@@ -253,5 +260,5 @@ export const mapAlbum = (entity: MapAlbumDto, withAssets: boolean, auth?: AuthDt
  };
 };

-export const mapAlbumWithAssets = (entity: MapAlbumDto) => mapAlbum(entity, true);
-export const mapAlbumWithoutAssets = (entity: MapAlbumDto) => mapAlbum(entity, false);
+export const mapAlbumWithAssets = (entity: MaybeDehydrated<MapAlbumDto>) => mapAlbum(entity, true);
+export const mapAlbumWithoutAssets = (entity: MaybeDehydrated<MapAlbumDto>) => mapAlbum(entity, false);
@@ -3,6 +3,7 @@ import { AssetEditAction } from 'src/dtos/editing.dto';
 import { AssetFaceFactory } from 'test/factories/asset-face.factory';
 import { AssetFactory } from 'test/factories/asset.factory';
 import { PersonFactory } from 'test/factories/person.factory';
+import { getForAsset } from 'test/mappers';

 describe('mapAsset', () => {
  describe('peopleWithFaces', () => {
@@ -41,7 +42,7 @@ describe('mapAsset', () => {
        })
        .build();

-      const result = mapAsset(asset);
+      const result = mapAsset(getForAsset(asset));

      expect(result.people).toBeDefined();
      expect(result.people).toHaveLength(1);
@@ -80,7 +81,7 @@ describe('mapAsset', () => {
        .edit({ action: AssetEditAction.Crop, parameters: { x: 50, y: 50, width: 500, height: 400 } })
        .build();

-      const result = mapAsset(asset);
+      const result = mapAsset(getForAsset(asset));

      expect(result.unassignedFaces).toBeDefined();
      expect(result.unassignedFaces).toHaveLength(1);
@@ -130,7 +131,7 @@ describe('mapAsset', () => {
        .exif({ exifImageWidth: 1000, exifImageHeight: 800 })
        .build();

-      const result = mapAsset(asset);
+      const result = mapAsset(getForAsset(asset));

      expect(result.people).toBeDefined();
      expect(result.people).toHaveLength(2);
@@ -179,7 +180,7 @@ describe('mapAsset', () => {
        .exif({ exifImageWidth: 1000, exifImageHeight: 800 })
        .build();

-      const result = mapAsset(asset);
+      const result = mapAsset(getForAsset(asset));

      expect(result.people).toBeDefined();
      expect(result.people).toHaveLength(1);
@@ -1,5 +1,5 @@
 import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
-import { Selectable } from 'kysely';
+import { Selectable, ShallowDehydrateObject } from 'kysely';
 import { AssetFace, AssetFile, Exif, Stack, Tag, User } from 'src/database';
 import { HistoryBuilder, Property } from 'src/decorators';
 import { AuthDto } from 'src/dtos/auth.dto';
@@ -14,9 +14,10 @@ import {
 import { TagResponseDto, mapTag } from 'src/dtos/tag.dto';
 import { UserResponseDto, mapUser } from 'src/dtos/user.dto';
 import { AssetStatus, AssetType, AssetVisibility } from 'src/enum';
-import { ImageDimensions } from 'src/types';
+import { ImageDimensions, MaybeDehydrated } from 'src/types';
 import { getDimensions } from 'src/utils/asset.util';
 import { hexOrBufferToBase64 } from 'src/utils/bytes';
+import { asDateString } from 'src/utils/date';
 import { mimeTypes } from 'src/utils/mime-types';
 import { ValidateEnum, ValidateUUID } from 'src/validation';

@@ -39,7 +40,7 @@ export class SanitizedAssetResponseDto {
      'The local date and time when the photo/video was taken, derived from EXIF metadata. This represents the photographer\'s local time regardless of timezone, stored as a timezone-agnostic timestamp. Used for timeline grouping by "local" days and months.',
    example: '2024-01-15T14:30:00.000Z',
  })
-  localDateTime!: Date;
+  localDateTime!: string;
  @ApiProperty({ description: 'Video duration (for videos)' })
  duration!: string;
  @ApiPropertyOptional({ description: 'Live photo video ID' })
@@ -59,7 +60,7 @@ export class AssetResponseDto extends SanitizedAssetResponseDto {
    description: 'The UTC timestamp when the asset was originally uploaded to Immich.',
    example: '2024-01-15T20:30:00.000Z',
  })
-  createdAt!: Date;
+  createdAt!: string;
  @ApiProperty({ description: 'Device asset ID' })
  deviceAssetId!: string;
  @ApiProperty({ description: 'Device ID' })
@@ -86,7 +87,7 @@ export class AssetResponseDto extends SanitizedAssetResponseDto {
      '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.',
    example: '2024-01-15T19:30:00.000Z',
  })
-  fileCreatedAt!: Date;
+  fileCreatedAt!: string;
  @ApiProperty({
    type: 'string',
    format: 'date-time',
@@ -94,7 +95,7 @@ export class AssetResponseDto extends SanitizedAssetResponseDto {
      'The UTC timestamp when the file was last modified on the filesystem. This reflects the last time the physical file was changed, which may be different from when the photo was originally taken.',
    example: '2024-01-16T10:15:00.000Z',
  })
-  fileModifiedAt!: Date;
+  fileModifiedAt!: string;
  @ApiProperty({
    type: 'string',
    format: 'date-time',
@@ -102,7 +103,7 @@ export class AssetResponseDto extends SanitizedAssetResponseDto {
      'The UTC timestamp when the asset record was last updated in the database. This is automatically maintained by the database and reflects when any field in the asset was last modified.',
    example: '2024-01-16T12:45:30.000Z',
  })
-  updatedAt!: Date;
+  updatedAt!: string;
  @ApiProperty({ description: 'Is favorite' })
  isFavorite!: boolean;
  @ApiProperty({ description: 'Is archived' })
@@ -151,13 +152,12 @@ export type MapAsset = {
  deviceId: string;
  duplicateId: string | null;
  duration: string | null;
-  edits?: AssetEditActionItem[];
-  encodedVideoPath: string | null;
-  exifInfo?: Selectable<Exif> | null;
-  faces?: AssetFace[];
+  edits?: ShallowDehydrateObject<AssetEditActionItem>[];
+  exifInfo?: ShallowDehydrateObject<Selectable<Exif>> | null;
+  faces?: ShallowDehydrateObject<AssetFace>[];
  fileCreatedAt: Date;
  fileModifiedAt: Date;
-  files?: AssetFile[];
+  files?: ShallowDehydrateObject<AssetFile>[];
  isExternal: boolean;
  isFavorite: boolean;
  isOffline: boolean;
@@ -167,11 +167,11 @@ export type MapAsset = {
  localDateTime: Date;
  originalFileName: string;
  originalPath: string;
-  owner?: User | null;
+  owner?: ShallowDehydrateObject<User> | null;
  ownerId: string;
-  stack?: Stack | null;
+  stack?: (ShallowDehydrateObject<Stack> & { assets: Stack['assets'] }) | null;
  stackId: string | null;
-  tags?: Tag[];
+  tags?: ShallowDehydrateObject<Tag>[];
  thumbhash: Buffer<ArrayBufferLike> | null;
  type: AssetType;
  width: number | null;
@@ -197,7 +197,7 @@ export type AssetMapOptions = {
 };

 const peopleWithFaces = (
-  faces?: AssetFace[],
+  faces?: MaybeDehydrated<AssetFace>[],
  edits?: AssetEditActionItem[],
  assetDimensions?: ImageDimensions,
 ): PersonWithFacesResponseDto[] => {
@@ -213,7 +213,10 @@ const peopleWithFaces = (
    }

    if (!peopleFaces.has(face.person.id)) {
-      peopleFaces.set(face.person.id, { ...mapPerson(face.person), faces: [] });
+      peopleFaces.set(face.person.id, {
+        ...mapPerson(face.person),
+        faces: [],
+      });
    }
    const mappedFace = mapFacesWithoutPerson(face, edits, assetDimensions);
    peopleFaces.get(face.person.id)!.faces.push(mappedFace);
@@ -234,7 +237,7 @@ const mapStack = (entity: { stack?: Stack | null }) => {
  };
 };

-export function mapAsset(entity: MapAsset, options: AssetMapOptions = {}): AssetResponseDto {
+export function mapAsset(entity: MaybeDehydrated<MapAsset>, options: AssetMapOptions = {}): AssetResponseDto {
  const { stripMetadata = false, withStack = false } = options;

  if (stripMetadata) {
@@ -243,7 +246,7 @@ export function mapAsset(entity: MapAsset, options: AssetMapOptions = {}): Asset
      type: entity.type,
      originalMimeType: mimeTypes.lookup(entity.originalFileName),
      thumbhash: entity.thumbhash ? hexOrBufferToBase64(entity.thumbhash) : null,
-      localDateTime: entity.localDateTime,
+      localDateTime: asDateString(entity.localDateTime),
      duration: entity.duration ?? '0:00:00.00000',
      livePhotoVideoId: entity.livePhotoVideoId,
      hasMetadata: false,
@@ -257,7 +260,7 @@ export function mapAsset(entity: MapAsset, options: AssetMapOptions = {}): Asset

  return {
    id: entity.id,
-    createdAt: entity.createdAt,
+    createdAt: asDateString(entity.createdAt),
    deviceAssetId: entity.deviceAssetId,
    ownerId: entity.ownerId,
    owner: entity.owner ? mapUser(entity.owner) : undefined,
@@ -268,10 +271,10 @@ export function mapAsset(entity: MapAsset, options: AssetMapOptions = {}): Asset
    originalFileName: entity.originalFileName,
    originalMimeType: mimeTypes.lookup(entity.originalFileName),
    thumbhash: entity.thumbhash ? hexOrBufferToBase64(entity.thumbhash) : null,
-    fileCreatedAt: entity.fileCreatedAt,
-    fileModifiedAt: entity.fileModifiedAt,
-    localDateTime: entity.localDateTime,
-    updatedAt: entity.updatedAt,
+    fileCreatedAt: asDateString(entity.fileCreatedAt),
+    fileModifiedAt: asDateString(entity.fileModifiedAt),
+    localDateTime: asDateString(entity.localDateTime),
+    updatedAt: asDateString(entity.updatedAt),
    isFavorite: options.auth?.user.id === entity.ownerId && entity.isFavorite,
    isArchived: entity.visibility === AssetVisibility.Archive,
    isTrashed: !!entity.deletedAt,
@@ -283,7 +286,7 @@ export function mapAsset(entity: MapAsset, options: AssetMapOptions = {}): Asset
    people: peopleWithFaces(entity.faces, entity.edits, assetDimensions),
    unassignedFaces: entity.faces
      ?.filter((face) => !face.person)
-      .map((a) => mapFacesWithoutPerson(a, entity.edits, assetDimensions)),
+      .map((face) => mapFacesWithoutPerson(face, entity.edits, assetDimensions)),
    checksum: hexOrBufferToBase64(entity.checksum)!,
    stack: withStack ? mapStack(entity) : undefined,
    isOffline: entity.isOffline,
@@ -1,5 +1,7 @@
 import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
 import { Exif } from 'src/database';
+import { MaybeDehydrated } from 'src/types';
+import { asDateString } from 'src/utils/date';

 export class ExifResponseDto {
  @ApiPropertyOptional({ description: 'Camera make' })
@@ -16,9 +18,9 @@ export class ExifResponseDto {
  @ApiPropertyOptional({ description: 'Image orientation' })
  orientation?: string | null = null;
  @ApiPropertyOptional({ description: 'Original date/time', format: 'date-time' })
-  dateTimeOriginal?: Date | null = null;
+  dateTimeOriginal?: string | null = null;
  @ApiPropertyOptional({ description: 'Modification date/time', format: 'date-time' })
-  modifyDate?: Date | null = null;
+  modifyDate?: string | null = null;
  @ApiPropertyOptional({ description: 'Time zone' })
  timeZone?: string | null = null;
  @ApiPropertyOptional({ description: 'Lens model' })
@@ -49,7 +51,7 @@ export class ExifResponseDto {
  rating?: number | null = null;
 }

-export function mapExif(entity: Exif): ExifResponseDto {
+export function mapExif(entity: MaybeDehydrated<Exif>): ExifResponseDto {
  return {
    make: entity.make,
    model: entity.model,
@@ -57,8 +59,8 @@ export function mapExif(entity: Exif): ExifResponseDto {
    exifImageHeight: entity.exifImageHeight,
    fileSizeInByte: entity.fileSizeInByte ? Number.parseInt(entity.fileSizeInByte.toString()) : null,
    orientation: entity.orientation,
-    dateTimeOriginal: entity.dateTimeOriginal,
-    modifyDate: entity.modifyDate,
+    dateTimeOriginal: asDateString(entity.dateTimeOriginal),
+    modifyDate: asDateString(entity.modifyDate),
    timeZone: entity.timeZone,
    lensModel: entity.lensModel,
    fNumber: entity.fNumber,
@@ -80,7 +82,7 @@ export function mapSanitizedExif(entity: Exif): ExifResponseDto {
  return {
    fileSizeInByte: entity.fileSizeInByte ? Number.parseInt(entity.fileSizeInByte.toString()) : null,
    orientation: entity.orientation,
-    dateTimeOriginal: entity.dateTimeOriginal,
+    dateTimeOriginal: asDateString(entity.dateTimeOriginal),
    timeZone: entity.timeZone,
    projectionType: entity.projectionType,
    exifImageWidth: entity.exifImageWidth,
@@ -9,8 +9,8 @@ import { AuthDto } from 'src/dtos/auth.dto';
 import { AssetEditActionItem } from 'src/dtos/editing.dto';
 import { SourceType } from 'src/enum';
 import { AssetFaceTable } from 'src/schema/tables/asset-face.table';
-import { ImageDimensions } from 'src/types';
-import { asDateString } from 'src/utils/date';
+import { ImageDimensions, MaybeDehydrated } from 'src/types';
+import { asBirthDateString, asDateString } from 'src/utils/date';
 import { transformFaceBoundingBox } from 'src/utils/transform';
 import {
  IsDateStringFormat,
@@ -33,7 +33,7 @@ export class PersonCreateDto {
  @MaxDateString(() => DateTime.now(), { message: 'Birth date cannot be in the future' })
  @IsDateStringFormat('yyyy-MM-dd')
  @Optional({ nullable: true, emptyToNull: true })
-  birthDate?: Date | null;
+  birthDate?: string | null;

  @ValidateBoolean({ optional: true, description: 'Person visibility (hidden)' })
  isHidden?: boolean;
@@ -105,8 +105,12 @@ export class PersonResponseDto {
  thumbnailPath!: string;
  @ApiProperty({ description: 'Is hidden' })
  isHidden!: boolean;
-  @Property({ description: 'Last update date', history: new HistoryBuilder().added('v1.107.0').stable('v2') })
-  updatedAt?: Date;
+  @Property({
+    description: 'Last update date',
+    format: 'date-time',
+    history: new HistoryBuilder().added('v1.107.0').stable('v2'),
+  })
+  updatedAt?: string;
  @Property({ description: 'Is favorite', history: new HistoryBuilder().added('v1.126.0').stable('v2') })
  isFavorite?: boolean;
  @Property({ description: 'Person color (hex)', history: new HistoryBuilder().added('v1.126.0').stable('v2') })
@@ -222,21 +226,21 @@ export class PeopleResponseDto {
  hasNextPage?: boolean;
 }

-export function mapPerson(person: Person): PersonResponseDto {
+export function mapPerson(person: MaybeDehydrated<Person>): PersonResponseDto {
  return {
    id: person.id,
    name: person.name,
-    birthDate: asDateString(person.birthDate),
+    birthDate: asBirthDateString(person.birthDate),
    thumbnailPath: person.thumbnailPath,
    isHidden: person.isHidden,
    isFavorite: person.isFavorite,
    color: person.color ?? undefined,
-    updatedAt: person.updatedAt,
+    updatedAt: asDateString(person.updatedAt),
  };
 }

 export function mapFacesWithoutPerson(
-  face: Selectable<AssetFaceTable>,
+  face: MaybeDehydrated<Selectable<AssetFaceTable>>,
  edits?: AssetEditActionItem[],
  assetDimensions?: ImageDimensions,
 ): AssetFaceWithoutPersonResponseDto {
@@ -1,5 +1,5 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { Type } from 'class-transformer';
+import { Transform, Type } from 'class-transformer';
 import {
  ArrayMinSize,
  IsInt,
@@ -92,6 +92,16 @@ export class SystemConfigFFmpegDto {
  targetAudioCodec!: AudioCodec;

  @ValidateEnum({ enum: AudioCodec, name: 'AudioCodec', each: true, description: 'Accepted audio codecs' })
+  @Transform(({ value }) => {
+    if (Array.isArray(value)) {
+      const libopusIndex = value.indexOf('libopus');
+      if (libopusIndex !== -1) {
+        value[libopusIndex] = 'opus';
+      }
+    }
+
+    return value;
+  })
  acceptedAudioCodecs!: AudioCodec[];

  @ValidateEnum({ enum: VideoContainer, name: 'VideoContainer', each: true, description: 'Accepted containers' })
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
midzelis	168414d1ab	feat: web - view transitions from timeline to viewer, next/prev feat: web - view transitions from timeline to viewer, next/prev feat: web - swipe feedback - show image while swiping/dragging left/right feat: web - swipe feedback - show image while swiping/dragging left/right tweak animation - no crossfade by default refactor(web): replace ViewTransitionManager event-driven API with phase-based callbacks Change-Id: Ia52f300a08a725062acc19574b10593e6a6a6964 fix(web): graceful degradation for ViewTransitionManager, rename AssetViewerFree to AssetViewerReady, extract onClick handler Change-Id: I4ad85d43e9922742910748a6487cd41f6a6a6964 Change-Id: Ie9c55914b0e87635e0d9e5889ca0ec3d6a6a6964 Change-Id: I0a37b417ee4c247dcc93d442c976eede6a6a6964	2026-03-17 12:23:59 -04:00
midzelis	c852c58940	feat(web): image-relative overlays with zoom support for faces, OCR, and face editor	2026-03-17 03:17:04 +00:00
Mees Frensel	9dafc8e8e9	fix(web): make link fit album card (#26958 )	2026-03-16 19:17:55 +01:00
Michel Heusschen	4e44fb9cf7	fix(web): prevent search page error on missing album filter (#26948 )	2026-03-16 19:15:20 +01:00
Yaros	82db581cc5	feat(mobile): open in browser (#26369 ) * feat(mobile): open in browser * chore: open in browser instead of webview * chore: allow archived asset * fix: moved openinbrowser above unstack * feat: deeplink into favorites, trash & archived * fix: use remoteId (for tests to succeed) --------- Co-authored-by: Alex <alex.tran1502@gmail.com>	2026-03-16 18:06:51 +00:00
Mert	b66c97b785	fix(mobile): use shared auth for background_downloader (#26911 ) shared client for background_downloader on ios	2026-03-13 22:23:07 -05:00
Mert	ff936f901d	fix(mobile): duplicate server urls returned (#26864 ) remove server url Co-authored-by: Alex <alex.tran1502@gmail.com>	2026-03-13 22:09:42 -05:00
Min Idzelis	48fe111daa	feat(web): improve OCR overlay text fitting, reactivity, and accessibility (#26678 ) - Precise font sizing using canvas measureText instead of character-count heuristic - Fix overlay repositioning on viewport resize by computing metrics from reactive state instead of DOM reads - Fix animation delay on resize by using transition-colors instead of transition-all - Add keyboard accessibility: OCR boxes are focusable via Tab with reading-order sort - Show text on focus (same styling as hover) with proper ARIA attributes	2026-03-13 22:04:55 -05:00
bo0tzz	0581b49750	fix: ignore optional headers in pr template check (#26910 )	2026-03-13 22:55:00 +00:00
rthrth-svg	2c6d4f3fe1	fix(web): copy yearMonth in MonthGroup to avoid shared object reference with asset (#26890 ) Co-authored-by: Min Idzelis <min123@gmail.com>	2026-03-13 22:27:08 +01:00
Belnadifia	55513cd59f	feat(server): support IDPs that only send the userinfo in the ID token (#26717 ) Co-authored-by: irouply <irouply@secom.fr> Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>	2026-03-13 22:14:45 +01:00
bo0tzz	10fa928abe	feat: require pull requests to follow template (#26902 ) * feat: require pull requests to follow template * fix: persist-credentials: false	2026-03-13 09:43:00 -05:00
Nathaniel Hourt	e322d44f95	fix: SMTP over TLS (#26893 ) Final step on #22833 PReq #22833 is about adding support for SMTP-over-TLS rather than just STARTTLS when sending emails. That PReq adds almost everything; it just forgot to actually pass the flag to Nodemailer at the end. This adds that last line of code and makes it work correctly (for me, anyways!). Co-authored-by: Nathaniel <I@nathaniel.land>	2026-03-13 09:41:50 -05:00
Michel Heusschen	c2a279e49e	fix(web): keep header fixed on individual shared links (#26892 )	2026-03-13 09:40:04 -05:00
Mert	226b9390db	fix(mobile): video auth (#26887 ) * fix video auth * update commit	2026-03-13 09:38:21 -05:00
Michel Heusschen	754f072ef9	fix(web): disable drag and drop for internal items (#26897 )	2026-03-13 09:37:51 -05:00
luis15pt	c91d8745b4	fix: use correct original URL for 360 video panorama playback (#26831 ) Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-12 21:27:44 +01:00
Brandon Wees	f3b7cd6198	refactor: move encoded video to asset files table (#26863 ) * refactor: move encoded video to asset files table * chore: update	2026-03-12 16:15:21 -04:00
Jason Rasmussen	990aff441b	fix: add to shared link (#26886 )	2026-03-12 16:10:55 -04:00
Daniel Dietzler	001d7d083f	refactor: small test factories (#26862 )	2026-03-12 14:48:49 -04:00
Michel Heusschen	3fd24e2083	fix(server): restrict individual shared link asset removal to owners (#26868 ) * fix(server): restrict individual shared link asset removal to owners * make open-api	2026-03-12 14:48:00 -04:00
Jason Rasmussen	6bb8f4fcc4	refactor: clean class (#26885 )	2026-03-12 14:47:35 -04:00
Jason Rasmussen	d4605b21d9	refactor: external links (#26880 )	2026-03-12 14:55:33 +00:00
Jason Rasmussen	3bd37ebbfb	refactor: clean class (#26879 )	2026-03-12 09:53:46 -05:00
Min Idzelis	5c3777ab46	fix(web): fix zoom touch event handling (#26866 ) fix(web): fix zoom touch event handling and add clarifying comments - Suppress Safari's synthetic dblclick on double-tap which conflicts with zoom-image's touchstart-based zoom - Add comment explaining pointer-events-none on zoom transform wrapper - Add comments for touchAction and overflow style overrides	2026-03-12 09:37:29 -05:00
Alex	6c531e0a5a	chore: add shadow to video play/pause icon shadow (#26836 )	2026-03-11 14:15:31 -05:00
Thomas	471c27cd33	chore(mobile): remove background from asset viewer back button (#26851 ) We recently changed the asset viewer to use a gradient. The circle button looks out of place now.	2026-03-11 14:15:18 -05:00
bo0tzz	4773788a88	chore: more unused release workflow cleanup (#26817 )	2026-03-11 20:04:26 +01:00
renovate[bot]	d49d995611	chore(deps): update dependency exiftool-vendored to v35.13.1 (#26813 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-03-11 20:03:19 +01:00
Snowknight26	0ac3d6a83a	fix(web): face selection box position resetting on browser resize (#26766 )	2026-03-11 19:38:08 +01:00
Mees Frensel	9996ee12d0	refactor(web): crop area tool (#26843 )	2026-03-11 18:58:26 +01:00
Brendan Ngo	0a79dd1228	fix(server): extract make/model from sony video files (#26833 ) Co-authored-by: Your Name <brendan.ngo@okendo.io> Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>	2026-03-11 17:29:37 +00:00
Mees Frensel	e45308b949	fix(web): exclude emoji from translation string (#26852 )	2026-03-11 13:22:59 -04:00
Mert	c403e03a42	fix(mobile): logout on upgrade (#26827 ) * use cookiejar * cookie duping hook * remove old pref * handle network switching on logout * remove bootstrapCookies * dead code * fix cast * use constants * use new event name * update api	2026-03-11 12:07:27 -05:00
Luis Nachtigall	e7db3b220d	feat(mobile): show animated images in asset viewer (#26614 ) * Add support for showing animated images in AssetViewer with AnimatedImageStreamCompleter * Add GIF overlay to thumbnail tile for animated assets * formatting * require isAnimated parameter in image providers for better asset handling * feat: refactor AnimatedImageStreamCompleter to use streams for codec loading and initial image handling * formatting * add isAnimatedImage property to BaseAsset * remove ApiService.getRequestHeaders() usage	2026-03-11 12:07:06 -05:00
bo0tzz	28d5c169c0	chore: use pokedex-large runner for rocm (#26823 )	2026-03-11 11:15:48 -05:00
renovate[bot]	0f2fe656db	fix(deps): update typescript-projects (#26812 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-03-11 16:40:41 +01:00
Daniel Dietzler	34ce68095d	chore: upgrade to kysely 0.28.11 (#26744 )	2026-03-11 16:17:31 +01:00
Min Idzelis	8764a1894b	feat: adaptive progressive image loading for photo viewer (#26636 ) * feat(web): adaptive progressive image loading for photo viewer Replace ImageManager with a new AdaptiveImageLoader that progressively loads images through quality tiers (thumbnail → preview → original). New components and utilities: - AdaptiveImage: layered image renderer with thumbhash, thumbnail, preview, and original layers with visibility managed by load state - AdaptiveImageLoader: state machine driving the quality progression with per-quality callbacks and error handling - ImageLayer/Image: low-level image elements with load/error lifecycle - PreloadManager: preloads adjacent assets for instant navigation - AlphaBackground/DelayedLoadingSpinner: loading state UI Zoom is handled via a derived CSS transform applied to the content wrapper in AdaptiveImage, with the zoom library (zoomTarget: null) only tracking state without manipulating the DOM directly. Also adds scaleToCover to container-utils and getAssetUrls to utils. * fix: don't partially render images in firefox * add passive loading indicator to asset-viewer --------- Co-authored-by: Alex <alex.tran1502@gmail.com>	2026-03-11 09:48:46 -05:00
Michel Heusschen	27f69b39b2	fix(server): use correct day ordering in timeline buckets (#26821 ) * fix(web): sort timeline day groups received from server * fix(server): use correct day ordering in timeline buckets	2026-03-11 08:49:35 -04:00
Michel Heusschen	9fc6fbc373	fix(web): restore asset update events in asset viewer (#26845 )	2026-03-11 08:46:29 -04:00
Thomas	9fc32b6f7a	feat(mobile): use material design 3 slider (#26829 ) * feat(mobile): use material design 3 slider The new slider is easier to use, and looks more modern. * chore: add shadow to button and text for better visibility --------- Co-authored-by: Alex <alex.tran1502@gmail.com>	2026-03-11 01:58:01 +00:00
Thomas	4571940a4e	fix(mobile): wrap backup error message text (#26834 ) Refs: #25022	2026-03-10 20:40:01 -05:00
Thomas	1ceb6d2e21	fix(mobile): use tabular figures in backup page (#26830 ) The numbers in the backup page are not monospace, and so changes cause the layout to shift. Using tabular figures (monospace) will prevent that. Refs: #25021	2026-03-10 20:12:33 -05:00
Andreas Heinz	1a4c5d73ac	feat(web): add shortcut "p" to open/close the face tag box (#26826 )	2026-03-10 23:53:38 +01:00
renovate[bot]	22b43bf4d9	chore(deps): update dependency @types/node to ^24.11.0 (#26808 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-03-10 16:46:21 +00:00
Michel Heusschen	45eff1c663	fix(web): prevent unrelated assets from appearing in tag view (#26816 )	2026-03-10 17:43:30 +01:00
renovate[bot]	56b8e1b8a9	chore(deps): update docker.io/valkey/valkey:9 docker digest to 3eeb097 (#26807 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-03-10 17:34:20 +01:00
Thomas	f79c8cf1c1	feat(mobile): consolidate video controls (#26673 ) Videos have recently been changed to support zooming, but this can make the controls in the centre of the screen unergonomic as they will either stay in the centre when dismissing, or stick to the video when zooming. Neither is great. We should align the behaviour with other apps which has the play/pause toggle at the bottom of the screen with the seeker bar instead. Co-authored-by: Alex <alex.tran1502@gmail.com>	2026-03-10 10:55:31 -05:00
Min Idzelis	8e50d25f45	feat(web): animate zoom toggle with cubicOut easing (#26731 )	2026-03-10 10:42:02 -05:00
Michel Heusschen	8222781d1f	fix(web): correct tag rounding in search options (#26814 )	2026-03-10 15:25:13 +00:00
bo0tzz	08c4594cde	chore: remove release-pr workflow (#26742 ) It's not being used right now; can always add it back :P	2026-03-09 16:53:13 -04:00
Daniel Dietzler	d325231df2	chore: refactor test factories (#26804 )	2026-03-09 20:47:03 +00:00
Daniil Suvorov	f2726606e0	fix(web): context menu overflow (#26760 )	2026-03-09 19:47:54 +01:00
Andreas Heinz	0edbca24e4	fix(web): recalculate face bounding boxes (#26737 ) Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>	2026-03-09 18:44:47 +00:00
Snowknight26	4791d9c0c3	fix(web): show the correct cursor at crop bounds when editing an asset (#26748 )	2026-03-09 19:39:01 +01:00
Michel Heusschen	a47b232235	fix(web): refresh recent albums sidebar after album changes (#26757 )	2026-03-09 17:11:32 +01:00
Luis Nachtigall	df0c86920d	fix(mobile): restrict trashed asset migration to Android platform (#26726 ) * fix(migration): restrict trashed asset migration to Android platform * playbackStyle migration add different log depending on platform	2026-03-09 09:56:27 -05:00
Min Idzelis	422111d26e	test(e2e): fix flakiness: optimize resetDatabase with TRUNCATE and fix selectDay selector scoping (#26776 ) fix(e2e): optimize resetDatabase with TRUNCATE and fix selectDay selector scoping	2026-03-08 01:38:15 -06:00
Min Idzelis	7a83baaf27	feat: responsive video duration in thumbnail (#26770 )	2026-03-08 01:37:41 -06:00
Aleksander Pejcic	aaf34fa7d4	feat(ml): enable openvino for cpu (#22948 ) * Enable OpenVINO CPU acceleration in Immich * Remove unnecessary debug log * Removing checking for device_ids for openvino since cpu will always be available * Find OpenVINOExecutionProvider index instead of assuming index 0 * Fix openvino tests * Fix failing test mock. OpenVINO expects provider options, but cuda provide doesn't so use that for mocked tests. * Support empty provider options in OrtSessions in which case ONNXRuntime will use its own defaults * Use OpenVINOExecutionProvider for test_sets_provider_options_kwarg * fix mock * simplify * unused variable --------- Co-authored-by: Aleksander <pejcic@adobe.com> Co-authored-by: mertalev <101130780+mertalev@users.noreply.github.com>	2026-03-07 18:40:43 +00:00
Sergey Katsubo	4a384bca86	fix(server): opus handling as accepted audio codec in transcode policy (#26736 ) * Fix opus handling as accepted audio codec in transcode policy Fix the issue when opus is among accepted audio codecs in transcode policy (which is default) but it still triggers transcoding because the codec name from ffprobe (opus) does not match `libopus` literal in Immich. Make a distinction between a codec name and encoder: - codec name: switch to `opus` as the audio codec name. This matches what ffprobe returns for a media file with opus audio. - encoder: continue using the `libopus` encoder in ffmpeg. * Add unit tests for accepted audio codecs and for libopus encoder * Add db migration for ffmpeg.targetAudioCodec opus * backward compatibility * tweak * noisy logs * full mapping * make check happy * mark deprecated * update api * indexOf --------- Co-authored-by: mertalev <101130780+mertalev@users.noreply.github.com>	2026-03-07 13:08:42 -05:00
Thomas	dd72ec2621	fix(mobile): correct local asset dimensions (#26677 ) * fix(mobile): correct local asset dimensions We are constraining the size of videos so that they play nicely with hero animations, and don't stretch in weird ways. This however caused a regression as we are not account for local assets on Android which have un-oriented dimensions. * post-orientation width and height in local sync * migration * no need to handle it in asset viewer --------- Co-authored-by: mertalev <101130780+mertalev@users.noreply.github.com> Co-authored-by: Alex <alex.tran1502@gmail.com>	2026-03-07 13:07:34 -05:00
Luis Nachtigall	e73686bd76	feat(android): enhance playback style detection using MIME type, reducing glide exposure (#26747 ) * feat(android): enhance playback style detection using MIME type * feat(android): improve playback style detection for GIF and WebP formats * fix(android): make playback style detection faster * refactor(android): simplify XMP reading logic for API 29 and below * update playback style detection documentation * use DefaultImageHeaderParser instead of all available ones for webp playbackStyle type detection	2026-03-07 10:41:26 -05:00