wip first working version

wip uploading
format
2024-02-28 16:12:36 -05:00 · 2024-02-28 13:53:00 -05:00
65 changed files with 932 additions and 1057 deletions
@@ -60,12 +60,12 @@ services:

  redis:
    container_name: immich_redis
-    image: registry.hub.docker.com/library/redis:6.2-alpine@sha256:51d6c56749a4243096327e3fb964a48ed92254357108449cb6e23999c37773c5
+    image: redis:6.2-alpine@sha256:51d6c56749a4243096327e3fb964a48ed92254357108449cb6e23999c37773c5
    restart: always

  database:
    container_name: immich_postgres
-    image: registry.hub.docker.com/tensorchord/pgvecto-rs:pg14-v0.2.0@sha256:90724186f0a3517cf6914295b5ab410db9ce23190a2d9d0b9dd6463e3fa298f0
+    image: tensorchord/pgvecto-rs:pg14-v0.2.0@sha256:90724186f0a3517cf6914295b5ab410db9ce23190a2d9d0b9dd6463e3fa298f0
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_USER: ${DB_USERNAME}
@@ -88,7 +88,10 @@ Some basic examples:

 This feature - currently hidden in the config file - is considered experimental and for advanced users only. If enabled, it will allow automatic watching of the filesystem which means new assets are automatically imported to Immich without needing to rescan. Deleted assets are, as always, marked as offline and can be removed with the "Remove offline files" button.

-If your photos are on a network drive, automatic file watching likely won't work. In that case, you will have to rely on a periodic library refresh to pull in your changes.
+If your photos are on a network drive you will likely have to enable filesystem polling. The performance hit for polling large libraries is currently unknown, feel free to test this feature and report back. In addition to the boolean feature flag, the configuration file allows customization of the following parameters, please see the [chokidar documentation](https://github.com/paulmillr/chokidar?tab=readme-ov-file#performance) for reference.
+
+- `usePolling` (default: `false`).
+- `interval`. (default: 10000). When using polling, this is how often (in milliseconds) the filesystem is polled.

 ### Nightly job

@@ -17,7 +17,6 @@
        "@types/pg": "^8.11.0",
        "@types/supertest": "^6.0.2",
        "@vitest/coverage-v8": "^1.3.0",
-        "exiftool-vendored": "^24.5.0",
        "luxon": "^3.4.4",
        "pg": "^8.11.3",
        "socket.io-client": "^4.7.4",
@@ -595,12 +594,6 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
-    "node_modules/@photostructure/tz-lookup": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/@photostructure/tz-lookup/-/tz-lookup-9.0.2.tgz",
-      "integrity": "sha512-H8+tTt7ilJNkFyb+QgPnLEGUjQzGwiMb9n7lwRZNBgSKL3VZs9AkjI1E//FcwPjNafwAH932U92+xTqJiF3Bbw==",
-      "dev": true
-    },
    "node_modules/@playwright/test": {
      "version": "1.41.2",
      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.2.tgz",
@@ -1081,15 +1074,6 @@
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
      "dev": true
    },
-    "node_modules/batch-cluster": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/batch-cluster/-/batch-cluster-13.0.0.tgz",
-      "integrity": "sha512-EreW0Vi8TwovhYUHBXXRA5tthuU2ynGsZFlboyMJHCCUXYa2AjgwnE3ubBOJs2xJLcuXFJbi6c/8pH5+FVj8Og==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
    "node_modules/brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1407,43 +1391,6 @@
        "url": "https://github.com/sindresorhus/execa?sponsor=1"
      }
    },
-    "node_modules/exiftool-vendored": {
-      "version": "24.5.0",
-      "resolved": "https://registry.npmjs.org/exiftool-vendored/-/exiftool-vendored-24.5.0.tgz",
-      "integrity": "sha512-uLGYfeshak3mYn2ucCsebXfNFdOpeAULlMb84wiJv+4B236n+ypgK/vr8bJgAcsIPSRJXFSz9WonvjjQYYqR3w==",
-      "dev": true,
-      "dependencies": {
-        "@photostructure/tz-lookup": "^9.0.1",
-        "@types/luxon": "^3.4.2",
-        "batch-cluster": "^13.0.0",
-        "he": "^1.2.0",
-        "luxon": "^3.4.4"
-      },
-      "optionalDependencies": {
-        "exiftool-vendored.exe": "12.76.0",
-        "exiftool-vendored.pl": "12.76.0"
-      }
-    },
-    "node_modules/exiftool-vendored.exe": {
-      "version": "12.76.0",
-      "resolved": "https://registry.npmjs.org/exiftool-vendored.exe/-/exiftool-vendored.exe-12.76.0.tgz",
-      "integrity": "sha512-lbKPPs31qpjnhFiMRaVxJX+iNcJ+p0NrRSFLHHaX6KTsfMba6e5i6NykSvU3wMiafzUTef1Fen3XQ+8n1tjjNw==",
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/exiftool-vendored.pl": {
-      "version": "12.76.0",
-      "resolved": "https://registry.npmjs.org/exiftool-vendored.pl/-/exiftool-vendored.pl-12.76.0.tgz",
-      "integrity": "sha512-4DxqgnvL71YziVoY27ZMgVfLAWDH3pQLljuV5+ffTnTPvz/BWeV+/bVFwRvDqCD3lkCWds0YfVcsycfJgbQ5fA==",
-      "dev": true,
-      "optional": true,
-      "os": [
-        "!win32"
-      ]
-    },
    "node_modules/fast-safe-stringify": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
@@ -1637,15 +1584,6 @@
        "node": ">= 0.4"
      }
    },
-    "node_modules/he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "dev": true,
-      "bin": {
-        "he": "bin/he"
-      }
-    },
    "node_modules/hexoid": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/hexoid/-/hexoid-1.0.0.tgz",
@@ -21,7 +21,6 @@
    "@types/pg": "^8.11.0",
    "@types/supertest": "^6.0.2",
    "@vitest/coverage-v8": "^1.3.0",
-    "exiftool-vendored": "^24.5.0",
    "luxon": "^3.4.4",
    "pg": "^8.11.3",
    "socket.io-client": "^4.7.4",
@@ -1,39 +1,16 @@
 import {
  AssetFileUploadResponseDto,
  AssetResponseDto,
-  AssetTypeEnum,
  LoginResponseDto,
  SharedLinkType,
 } from '@immich/sdk';
-import { exiftool } from 'exiftool-vendored';
 import { DateTime } from 'luxon';
-import { createHash } from 'node:crypto';
-import { readFile, writeFile } from 'node:fs/promises';
-import { basename, join } from 'node:path';
 import { Socket } from 'socket.io-client';
 import { createUserDto, uuidDto } from 'src/fixtures';
 import { errorDto } from 'src/responses';
-import {
-  apiUtils,
-  app,
-  dbUtils,
-  tempDir,
-  testAssetDir,
-  wsUtils,
-} from 'src/utils';
+import { apiUtils, app, dbUtils } from 'src/utils';
 import request from 'supertest';
-import { afterAll, beforeAll, describe, expect, it } from 'vitest';
-
-const locationAssetFilepath = `${testAssetDir}/metadata/gps-position/thompson-springs.jpg`;
-
-const sha1 = (bytes: Buffer) =>
-  createHash('sha1').update(bytes).digest('base64');
-
-const readTags = async (bytes: Buffer, filename: string) => {
-  const filepath = join(tempDir, filename);
-  await writeFile(filepath, bytes);
-  return exiftool.read(filepath);
-};
+import { beforeAll, describe, expect, it } from 'vitest';

 const today = DateTime.fromObject({
  year: 2023,
@@ -47,36 +24,25 @@ describe('/asset', () => {
  let user1: LoginResponseDto;
  let user2: LoginResponseDto;
  let userStats: LoginResponseDto;
-  let user1Assets: AssetFileUploadResponseDto[];
-  let user2Assets: AssetFileUploadResponseDto[];
-  let assetLocation: AssetFileUploadResponseDto;
+  let asset1: AssetFileUploadResponseDto;
+  let asset2: AssetFileUploadResponseDto;
+  let asset3: AssetFileUploadResponseDto;
+  let asset4: AssetFileUploadResponseDto; // user2 asset
+  let asset5: AssetFileUploadResponseDto;
+  let asset6: AssetFileUploadResponseDto;
  let ws: Socket;

  beforeAll(async () => {
    apiUtils.setup();
    await dbUtils.reset();
    admin = await apiUtils.adminSetup({ onboarding: false });
-
-    [ws, user1, user2, userStats] = await Promise.all([
-      wsUtils.connect(admin.accessToken),
+    [user1, user2, userStats] = await Promise.all([
      apiUtils.userSetup(admin.accessToken, createUserDto.user1),
      apiUtils.userSetup(admin.accessToken, createUserDto.user2),
      apiUtils.userSetup(admin.accessToken, createUserDto.user3),
    ]);

-    // asset location
-    assetLocation = await apiUtils.createAsset(
-      admin.accessToken,
-      {},
-      {
-        filename: 'thompson-springs.jpg',
-        bytes: await readFile(locationAssetFilepath),
-      },
-    );
-
-    await wsUtils.waitForEvent({ event: 'upload', assetId: assetLocation.id });
-
-    user1Assets = await Promise.all([
+    [asset1, asset2, asset3, asset4, asset5, asset6] = await Promise.all([
      apiUtils.createAsset(user1.accessToken),
      apiUtils.createAsset(user1.accessToken),
      apiUtils.createAsset(
@@ -90,13 +56,10 @@ describe('/asset', () => {
        },
        { filename: 'example.mp4' },
      ),
+      apiUtils.createAsset(user2.accessToken),
      apiUtils.createAsset(user1.accessToken),
      apiUtils.createAsset(user1.accessToken),
-    ]);

-    user2Assets = await Promise.all([apiUtils.createAsset(user2.accessToken)]);
-
-    await Promise.all([
      // stats
      apiUtils.createAsset(userStats.accessToken),
      apiUtils.createAsset(userStats.accessToken, { isFavorite: true }),
@@ -114,14 +77,7 @@ describe('/asset', () => {
    const person1 = await apiUtils.createPerson(user1.accessToken, {
      name: 'Test Person',
    });
-    await dbUtils.createFace({
-      assetId: user1Assets[0].id,
-      personId: person1.id,
-    });
-  }, 30_000);
-
-  afterAll(() => {
-    wsUtils.disconnect(ws);
+    await dbUtils.createFace({ assetId: asset1.id, personId: person1.id });
  });

  describe('GET /asset/:id', () => {
@@ -143,7 +99,7 @@ describe('/asset', () => {

    it('should require access', async () => {
      const { status, body } = await request(app)
-        .get(`/asset/${user2Assets[0].id}`)
+        .get(`/asset/${asset4.id}`)
        .set('Authorization', `Bearer ${user1.accessToken}`);
      expect(status).toBe(400);
      expect(body).toEqual(errorDto.noPermission);
@@ -151,33 +107,33 @@ describe('/asset', () => {

    it('should get the asset info', async () => {
      const { status, body } = await request(app)
-        .get(`/asset/${user1Assets[0].id}`)
+        .get(`/asset/${asset1.id}`)
        .set('Authorization', `Bearer ${user1.accessToken}`);
      expect(status).toBe(200);
-      expect(body).toMatchObject({ id: user1Assets[0].id });
+      expect(body).toMatchObject({ id: asset1.id });
    });

    it('should work with a shared link', async () => {
      const sharedLink = await apiUtils.createSharedLink(user1.accessToken, {
        type: SharedLinkType.Individual,
-        assetIds: [user1Assets[0].id],
+        assetIds: [asset1.id],
      });

      const { status, body } = await request(app).get(
-        `/asset/${user1Assets[0].id}?key=${sharedLink.key}`,
+        `/asset/${asset1.id}?key=${sharedLink.key}`,
      );
      expect(status).toBe(200);
-      expect(body).toMatchObject({ id: user1Assets[0].id });
+      expect(body).toMatchObject({ id: asset1.id });
    });

    it('should not send people data for shared links for un-authenticated users', async () => {
      const { status, body } = await request(app)
-        .get(`/asset/${user1Assets[0].id}`)
+        .get(`/asset/${asset1.id}`)
        .set('Authorization', `Bearer ${user1.accessToken}`);

      expect(status).toEqual(200);
      expect(body).toMatchObject({
-        id: user1Assets[0].id,
+        id: asset1.id,
        isFavorite: false,
        people: [
          {
@@ -192,11 +148,11 @@ describe('/asset', () => {

      const sharedLink = await apiUtils.createSharedLink(user1.accessToken, {
        type: SharedLinkType.Individual,
-        assetIds: [user1Assets[0].id],
+        assetIds: [asset1.id],
      });

      const data = await request(app).get(
-        `/asset/${user1Assets[0].id}?key=${sharedLink.key}`,
+        `/asset/${asset1.id}?key=${sharedLink.key}`,
      );
      expect(data.status).toBe(200);
      expect(data.body).toMatchObject({ people: [] });
@@ -290,11 +246,11 @@ describe('/asset', () => {
      const assets: AssetResponseDto[] = body;
      expect(assets.length).toBe(1);
      expect(assets[0].ownerId).toBe(user1.userId);
-
-      // assets owned by user1
-      expect([user1Assets.map(({ id }) => id)]).toContain(assets[0].id);
+      //
      // assets owned by user2
-      expect([user1Assets.map(({ id }) => id)]).not.toContain(assets[0].id);
+      expect(assets[0].id).not.toBe(asset4.id);
+      // assets owned by user1
+      expect([asset1.id, asset2.id, asset3.id]).toContain(assets[0].id);
    });

    it.each(Array(10))('should return 2 random assets', async () => {
@@ -310,9 +266,9 @@ describe('/asset', () => {
      for (const asset of assets) {
        expect(asset.ownerId).toBe(user1.userId);
        // assets owned by user1
-        expect([user1Assets.map(({ id }) => id)]).toContain(asset.id);
+        expect([asset1.id, asset2.id, asset3.id]).toContain(asset.id);
        // assets owned by user2
-        expect([user2Assets.map(({ id }) => id)]).not.toContain(asset.id);
+        expect(asset.id).not.toBe(asset4.id);
      }
    });

@@ -324,9 +280,7 @@ describe('/asset', () => {
          .set('Authorization', `Bearer ${user2.accessToken}`);

        expect(status).toBe(200);
-        expect(body).toEqual([
-          expect.objectContaining({ id: user2Assets[0].id }),
-        ]);
+        expect(body).toEqual([expect.objectContaining({ id: asset4.id })]);
      },
    );

@@ -358,50 +312,44 @@ describe('/asset', () => {

    it('should require access', async () => {
      const { status, body } = await request(app)
-        .put(`/asset/${user2Assets[0].id}`)
+        .put(`/asset/${asset4.id}`)
        .set('Authorization', `Bearer ${user1.accessToken}`);
      expect(status).toBe(400);
      expect(body).toEqual(errorDto.noPermission);
    });

    it('should favorite an asset', async () => {
-      const before = await apiUtils.getAssetInfo(
-        user1.accessToken,
-        user1Assets[0].id,
-      );
+      const before = await apiUtils.getAssetInfo(user1.accessToken, asset1.id);
      expect(before.isFavorite).toBe(false);

      const { status, body } = await request(app)
-        .put(`/asset/${user1Assets[0].id}`)
+        .put(`/asset/${asset1.id}`)
        .set('Authorization', `Bearer ${user1.accessToken}`)
        .send({ isFavorite: true });
-      expect(body).toMatchObject({ id: user1Assets[0].id, isFavorite: true });
+      expect(body).toMatchObject({ id: asset1.id, isFavorite: true });
      expect(status).toEqual(200);
    });

    it('should archive an asset', async () => {
-      const before = await apiUtils.getAssetInfo(
-        user1.accessToken,
-        user1Assets[0].id,
-      );
+      const before = await apiUtils.getAssetInfo(user1.accessToken, asset1.id);
      expect(before.isArchived).toBe(false);

      const { status, body } = await request(app)
-        .put(`/asset/${user1Assets[0].id}`)
+        .put(`/asset/${asset1.id}`)
        .set('Authorization', `Bearer ${user1.accessToken}`)
        .send({ isArchived: true });
-      expect(body).toMatchObject({ id: user1Assets[0].id, isArchived: true });
+      expect(body).toMatchObject({ id: asset1.id, isArchived: true });
      expect(status).toEqual(200);
    });

    it('should update date time original', async () => {
      const { status, body } = await request(app)
-        .put(`/asset/${user1Assets[0].id}`)
+        .put(`/asset/${asset1.id}`)
        .set('Authorization', `Bearer ${user1.accessToken}`)
        .send({ dateTimeOriginal: '2023-11-19T18:11:00.000-07:00' });

      expect(body).toMatchObject({
-        id: user1Assets[0].id,
+        id: asset1.id,
        exifInfo: expect.objectContaining({
          dateTimeOriginal: '2023-11-20T01:11:00.000Z',
        }),
@@ -423,7 +371,7 @@ describe('/asset', () => {
        { latitude: 12, longitude: 181 },
      ]) {
        const { status, body } = await request(app)
-          .put(`/asset/${user1Assets[0].id}`)
+          .put(`/asset/${asset1.id}`)
          .send(test)
          .set('Authorization', `Bearer ${user1.accessToken}`);
        expect(status).toBe(400);
@@ -433,12 +381,12 @@ describe('/asset', () => {

    it('should update gps data', async () => {
      const { status, body } = await request(app)
-        .put(`/asset/${user1Assets[0].id}`)
+        .put(`/asset/${asset1.id}`)
        .set('Authorization', `Bearer ${user1.accessToken}`)
        .send({ latitude: 12, longitude: 12 });

      expect(body).toMatchObject({
-        id: user1Assets[0].id,
+        id: asset1.id,
        exifInfo: expect.objectContaining({ latitude: 12, longitude: 12 }),
      });
      expect(status).toEqual(200);
@@ -446,11 +394,11 @@ describe('/asset', () => {

    it('should set the description', async () => {
      const { status, body } = await request(app)
-        .put(`/asset/${user1Assets[0].id}`)
+        .put(`/asset/${asset1.id}`)
        .set('Authorization', `Bearer ${user1.accessToken}`)
        .send({ description: 'Test asset description' });
      expect(body).toMatchObject({
-        id: user1Assets[0].id,
+        id: asset1.id,
        exifInfo: expect.objectContaining({
          description: 'Test asset description',
        }),
@@ -460,12 +408,12 @@ describe('/asset', () => {

    it('should return tagged people', async () => {
      const { status, body } = await request(app)
-        .put(`/asset/${user1Assets[0].id}`)
+        .put(`/asset/${asset1.id}`)
        .set('Authorization', `Bearer ${user1.accessToken}`)
        .send({ isFavorite: true });
      expect(status).toEqual(200);
      expect(body).toMatchObject({
-        id: user1Assets[0].id,
+        id: asset1.id,
        isFavorite: true,
        people: [
          {
@@ -530,279 +478,4 @@ describe('/asset', () => {
      expect(after.isTrashed).toBe(true);
    });
  });
-
-  describe('POST /asset/upload', () => {
-    const tests = [
-      {
-        input: 'formats/jpg/el_torcal_rocks.jpg',
-        expected: {
-          type: AssetTypeEnum.Image,
-          originalFileName: 'el_torcal_rocks',
-          resized: true,
-          exifInfo: {
-            dateTimeOriginal: '2012-08-05T11:39:59.000Z',
-            exifImageWidth: 512,
-            exifImageHeight: 341,
-            latitude: null,
-            longitude: null,
-            focalLength: 75,
-            iso: 200,
-            fNumber: 11,
-            exposureTime: '1/160',
-            fileSizeInByte: 53_493,
-            make: 'SONY',
-            model: 'DSLR-A550',
-            orientation: null,
-            description: 'SONY DSC',
-          },
-        },
-      },
-      {
-        input: 'formats/heic/IMG_2682.heic',
-        expected: {
-          type: AssetTypeEnum.Image,
-          originalFileName: 'IMG_2682',
-          resized: true,
-          fileCreatedAt: '2019-03-21T16:04:22.348Z',
-          exifInfo: {
-            dateTimeOriginal: '2019-03-21T16:04:22.348Z',
-            exifImageWidth: 4032,
-            exifImageHeight: 3024,
-            latitude: 41.2203,
-            longitude: -96.071_625,
-            make: 'Apple',
-            model: 'iPhone 7',
-            lensModel: 'iPhone 7 back camera 3.99mm f/1.8',
-            fileSizeInByte: 880_703,
-            exposureTime: '1/887',
-            iso: 20,
-            focalLength: 3.99,
-            fNumber: 1.8,
-            timeZone: 'America/Chicago',
-          },
-        },
-      },
-      {
-        input: 'formats/png/density_plot.png',
-        expected: {
-          type: AssetTypeEnum.Image,
-          originalFileName: 'density_plot',
-          resized: true,
-          exifInfo: {
-            exifImageWidth: 800,
-            exifImageHeight: 800,
-            latitude: null,
-            longitude: null,
-            fileSizeInByte: 25_408,
-          },
-        },
-      },
-      {
-        input: 'formats/raw/Nikon/D80/glarus.nef',
-        expected: {
-          type: AssetTypeEnum.Image,
-          originalFileName: 'glarus',
-          resized: true,
-          fileCreatedAt: '2010-07-20T17:27:12.000Z',
-          exifInfo: {
-            make: 'NIKON CORPORATION',
-            model: 'NIKON D80',
-            exposureTime: '1/200',
-            fNumber: 10,
-            focalLength: 18,
-            iso: 100,
-            fileSizeInByte: 9_057_784,
-            dateTimeOriginal: '2010-07-20T17:27:12.000Z',
-            latitude: null,
-            longitude: null,
-            orientation: '1',
-          },
-        },
-      },
-      {
-        input: 'formats/raw/Nikon/D700/philadelphia.nef',
-        expected: {
-          type: AssetTypeEnum.Image,
-          originalFileName: 'philadelphia',
-          resized: true,
-          fileCreatedAt: '2016-09-22T22:10:29.060Z',
-          exifInfo: {
-            make: 'NIKON CORPORATION',
-            model: 'NIKON D700',
-            exposureTime: '1/400',
-            fNumber: 11,
-            focalLength: 85,
-            iso: 200,
-            fileSizeInByte: 15_856_335,
-            dateTimeOriginal: '2016-09-22T22:10:29.060Z',
-            latitude: null,
-            longitude: null,
-            orientation: '1',
-            timeZone: 'UTC-5',
-          },
-        },
-      },
-    ];
-
-    for (const { input, expected } of tests) {
-      it(`should generate a thumbnail for ${input}`, async () => {
-        const filepath = join(testAssetDir, input);
-        const { id, duplicate } = await apiUtils.createAsset(
-          admin.accessToken,
-          {},
-          { bytes: await readFile(filepath), filename: basename(filepath) },
-        );
-
-        expect(duplicate).toBe(false);
-
-        await wsUtils.waitForEvent({ event: 'upload', assetId: id });
-
-        const asset = await apiUtils.getAssetInfo(admin.accessToken, id);
-
-        expect(asset.exifInfo).toBeDefined();
-        expect(asset.exifInfo).toMatchObject(expected.exifInfo);
-        expect(asset).toMatchObject(expected);
-      });
-    }
-
-    it('should handle a duplicate', async () => {
-      const filepath = 'formats/jpeg/el_torcal_rocks.jpeg';
-      const { duplicate } = await apiUtils.createAsset(
-        admin.accessToken,
-        {},
-        {
-          bytes: await readFile(join(testAssetDir, filepath)),
-          filename: basename(filepath),
-        },
-      );
-
-      expect(duplicate).toBe(true);
-    });
-
-    // These hashes were created by copying the image files to a Samsung phone,
-    // exporting the video from Samsung's stock Gallery app, and hashing them locally.
-    // This ensures that immich+exiftool are extracting the videos the same way Samsung does.
-    // DO NOT assume immich+exiftool are doing things correctly and just copy whatever hash it gives
-    // into the test here.
-    const motionTests = [
-      {
-        filepath: 'formats/motionphoto/Samsung One UI 5.jpg',
-        checksum: 'fr14niqCq6N20HB8rJYEvpsUVtI=',
-      },
-      {
-        filepath: 'formats/motionphoto/Samsung One UI 6.jpg',
-        checksum: 'lT9Uviw/FFJYCjfIxAGPTjzAmmw=',
-      },
-      {
-        filepath: 'formats/motionphoto/Samsung One UI 6.heic',
-        checksum: '/ejgzywvgvzvVhUYVfvkLzFBAF0=',
-      },
-    ];
-
-    for (const { filepath, checksum } of motionTests) {
-      it(`should extract motionphoto video from ${filepath}`, async () => {
-        const response = await apiUtils.createAsset(
-          admin.accessToken,
-          {},
-          {
-            bytes: await readFile(join(testAssetDir, filepath)),
-            filename: basename(filepath),
-          },
-        );
-
-        await wsUtils.waitForEvent({ event: 'upload', assetId: response.id });
-
-        expect(response.duplicate).toBe(false);
-
-        const asset = await apiUtils.getAssetInfo(
-          admin.accessToken,
-          response.id,
-        );
-        expect(asset.livePhotoVideoId).toBeDefined();
-
-        const video = await apiUtils.getAssetInfo(
-          admin.accessToken,
-          asset.livePhotoVideoId as string,
-        );
-        expect(video.checksum).toStrictEqual(checksum);
-      });
-    }
-  });
-
-  describe('GET /asset/thumbnail/:id', () => {
-    it('should require authentication', async () => {
-      const { status, body } = await request(app).get(
-        `/asset/thumbnail/${assetLocation.id}`,
-      );
-
-      expect(status).toBe(401);
-      expect(body).toEqual(errorDto.unauthorized);
-    });
-
-    it('should not include gps data for webp thumbnails', async () => {
-      const { status, body, type } = await request(app)
-        .get(`/asset/thumbnail/${assetLocation.id}?format=WEBP`)
-        .set('Authorization', `Bearer ${admin.accessToken}`);
-
-      await wsUtils.waitForEvent({
-        event: 'upload',
-        assetId: assetLocation.id,
-      });
-
-      expect(status).toBe(200);
-      expect(body).toBeDefined();
-      expect(type).toBe('image/webp');
-
-      const exifData = await readTags(body, 'thumbnail.webp');
-      expect(exifData).not.toHaveProperty('GPSLongitude');
-      expect(exifData).not.toHaveProperty('GPSLatitude');
-    });
-
-    it('should not include gps data for jpeg thumbnails', async () => {
-      const { status, body, type } = await request(app)
-        .get(`/asset/thumbnail/${assetLocation.id}?format=JPEG`)
-        .set('Authorization', `Bearer ${admin.accessToken}`);
-
-      expect(status).toBe(200);
-      expect(body).toBeDefined();
-      expect(type).toBe('image/jpeg');
-
-      const exifData = await readTags(body, 'thumbnail.jpg');
-      expect(exifData).not.toHaveProperty('GPSLongitude');
-      expect(exifData).not.toHaveProperty('GPSLatitude');
-    });
-  });
-
-  describe('GET /asset/file/:id', () => {
-    it('should require authentication', async () => {
-      const { status, body } = await request(app).get(
-        `/asset/thumbnail/${assetLocation.id}`,
-      );
-
-      expect(status).toBe(401);
-      expect(body).toEqual(errorDto.unauthorized);
-    });
-
-    it('should download the original', async () => {
-      const { status, body, type } = await request(app)
-        .get(`/asset/file/${assetLocation.id}`)
-        .set('Authorization', `Bearer ${admin.accessToken}`);
-
-      expect(status).toBe(200);
-      expect(body).toBeDefined();
-      expect(type).toBe('image/jpeg');
-
-      const asset = await apiUtils.getAssetInfo(
-        admin.accessToken,
-        assetLocation.id,
-      );
-
-      const original = await readFile(locationAssetFilepath);
-      const originalChecksum = sha1(original);
-      const downloadChecksum = sha1(body);
-
-      expect(originalChecksum).toBe(downloadChecksum);
-      expect(downloadChecksum).toBe(asset.checksum);
-    });
-  });
 });
@@ -29,14 +29,14 @@ describe('/audit', () => {
      await Promise.all([
        deleteAssets(
          { assetBulkDeleteDto: { ids: [trashedAsset.id] } },
-          { headers: asBearerAuth(admin.accessToken) },
+          { headers: asBearerAuth(admin.accessToken) }
        ),
        updateAsset(
          {
            id: archivedAsset.id,
            updateAssetDto: { isArchived: true },
          },
-          { headers: asBearerAuth(admin.accessToken) },
+          { headers: asBearerAuth(admin.accessToken) }
        ),
      ]);

@@ -44,7 +44,7 @@ describe('/trash', () => {
        .set('Authorization', `Bearer ${admin.accessToken}`);
      expect(status).toBe(204);

-      await wsUtils.waitForEvent({ event: 'delete', assetId });
+      await wsUtils.once(ws, 'on_asset_delete');

      const after = await getAllAssets(
        {},
@@ -2,25 +2,25 @@ import { spawn, exec } from 'child_process';

 export default async () => {
  let _resolve: () => unknown;
-  const ready = new Promise<void>((resolve) => (_resolve = resolve));
+  const promise = new Promise<void>((resolve) => (_resolve = resolve));

  const child = spawn('docker', ['compose', 'up'], { stdio: 'pipe' });

  child.stdout.on('data', (data) => {
    const input = data.toString();
    console.log(input);
-    if (input.includes('Immich Microservices is listening')) {
+    if (input.includes('Immich Server is listening')) {
      _resolve();
    }
  });

  child.stderr.on('data', (data) => console.log(data.toString()));

-  await ready;
+  await promise;

  return async () => {
    await new Promise<void>((resolve) =>
-      exec('docker compose down', () => resolve()),
+      exec('docker compose down', () => resolve())
    );
  };
 };
@@ -1,6 +1,5 @@
 import {
  AssetFileUploadResponseDto,
-  AssetResponseDto,
  CreateAlbumDto,
  CreateAssetDto,
  CreateUserDto,
@@ -20,12 +19,10 @@ import {
  updatePerson,
 } from '@immich/sdk';
 import { BrowserContext } from '@playwright/test';
-import { exec, spawn } from 'node:child_process';
+import { exec, spawn } from 'child_process';
 import { randomBytes } from 'node:crypto';
 import { access } from 'node:fs/promises';
-import { tmpdir } from 'node:os';
 import path from 'node:path';
-import { EventEmitter } from 'node:stream';
 import { promisify } from 'node:util';
 import pg from 'pg';
 import { io, type Socket } from 'socket.io-client';
@@ -43,7 +40,6 @@ const directoryExists = (directory: string) =>

 // TODO move test assets into e2e/assets
 export const testAssetDir = path.resolve(`./../server/test/assets/`);
-export const tempDir = tmpdir();

 const serverContainerName = 'immich-e2e-server';
 const mediaDir = '/usr/src/app/upload';
@@ -51,7 +47,6 @@ const dirs = [
  `"${mediaDir}/thumbs"`,
  `"${mediaDir}/upload"`,
  `"${mediaDir}/library"`,
-  `"${mediaDir}/encoded-video"`,
 ].join(' ');

 if (!(await directoryExists(`${testAssetDir}/albums`))) {
@@ -182,85 +177,33 @@ export interface AdminSetupOptions {
  onboarding?: boolean;
 }

-export enum SocketEvent {
-  UPLOAD = 'upload',
-  DELETE = 'delete',
-}
-
-export type EventType = 'upload' | 'delete';
-export interface WaitOptions {
-  event: EventType;
-  assetId: string;
-  timeout?: number;
-}
-
-const events: Record<EventType, Set<string>> = {
-  upload: new Set<string>(),
-  delete: new Set<string>(),
-};
-
-const callbacks: Record<string, () => void> = {};
-
-const onEvent = ({ event, assetId }: { event: EventType; assetId: string }) => {
-  events[event].add(assetId);
-  const callback = callbacks[assetId];
-  if (callback) {
-    callback();
-    delete callbacks[assetId];
-  }
-};
-
 export const wsUtils = {
  connect: async (accessToken: string) => {
    const websocket = io('http://127.0.0.1:2283', {
      path: '/api/socket.io',
      transports: ['websocket'],
      extraHeaders: { Authorization: `Bearer ${accessToken}` },
-      autoConnect: true,
+      autoConnect: false,
      forceNew: true,
    });

    return new Promise<Socket>((resolve) => {
-      websocket
-        .on('connect', () => resolve(websocket))
-        .on('on_upload_success', (data: AssetResponseDto) =>
-          onEvent({ event: 'upload', assetId: data.id }),
-        )
-        .on('on_asset_delete', (assetId: string) =>
-          onEvent({ event: 'delete', assetId }),
-        )
-        .connect();
+      websocket.on('connect', () => resolve(websocket));
+      websocket.connect();
    });
  },
  disconnect: (ws: Socket) => {
    if (ws?.connected) {
      ws.disconnect();
    }
-
-    for (const set of Object.values(events)) {
-      set.clear();
-    }
  },
-  waitForEvent: async ({
-    event,
-    assetId,
-    timeout: ms,
-  }: WaitOptions): Promise<void> => {
-    const set = events[event];
-    if (set.has(assetId)) {
-      return;
-    }
-
-    return new Promise<void>((resolve, reject) => {
-      const timeout = setTimeout(
-        () => reject(new Error(`Timed out waiting for ${event} event`)),
-        ms || 5000,
-      );
-
-      callbacks[assetId] = () => {
+  once: <T = any>(ws: Socket, event: string): Promise<T> => {
+    return new Promise<T>((resolve, reject) => {
+      const timeout = setTimeout(() => reject(new Error('Timeout')), 4000);
+      ws.once(event, (data: T) => {
        clearTimeout(timeout);
-        resolve();
-      };
+        resolve(data);
+      });
    });
  },
 };
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "machine-learning"
-version = "1.97.0"
+version = "1.96.0"
 description = ""
 authors = ["Hau Tran <alex.tran1502@gmail.com>"]
 readme = "README.md"
@@ -276,7 +276,7 @@ class BackupWorker(ctx: Context, params: WorkerParameters) : ListenableWorker(ct
        private const val NOTIFICATION_CHANNEL_ERROR_ID = "immich/backgroundServiceError"
        private const val NOTIFICATION_DEFAULT_TITLE = "Immich"
        private const val NOTIFICATION_ID = 1
-        private const val NOTIFICATION_ERROR_ID = 2 
+        private const val NOTIFICATION_ERROR_ID = 2
        private const val NOTIFICATION_DETAIL_ID = 3
        private const val ONE_MINUTE = 60000L

@@ -304,12 +304,12 @@ class BackupWorker(ctx: Context, params: WorkerParameters) : ListenableWorker(ct
                val workInfoList = workInfoFuture.get(1000, TimeUnit.MILLISECONDS)
                if (workInfoList != null) {
                    for (workInfo in workInfoList) {
-                        if (workInfo.getState() == WorkInfo.State.ENQUEUED) {
+                        //if (workInfo.getState() == WorkInfo.State.ENQUEUED) {
                            val workRequest = buildWorkRequest(requireWifi, requireCharging)
                            wm.enqueueUniqueWork(TASK_NAME_BACKUP, ExistingWorkPolicy.REPLACE, workRequest)
                            Log.d(TAG, "updateBackupWorker updated BackupWorker constraints")
                            return
-                        }
+                        // }
                    }
                }
                Log.d(TAG, "updateBackupWorker: BackupWorker not enqueued")
@@ -346,7 +346,7 @@ class BackupWorker(ctx: Context, params: WorkerParameters) : ListenableWorker(ct
                .setRequiresBatteryNotLow(true)
                .setRequiresCharging(requireCharging)
                .build();
-            
+
            val work = OneTimeWorkRequest.Builder(BackupWorker::class.java)
                .setConstraints(constraints)
                .setBackoffCriteria(BackoffPolicy.EXPONENTIAL, ONE_MINUTE, TimeUnit.MILLISECONDS)
@@ -359,4 +359,4 @@ class BackupWorker(ctx: Context, params: WorkerParameters) : ListenableWorker(ct
    }
 }

-private const val TAG = "BackupWorker"
+private const val TAG = "BackupWorker"
@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlin_version = '1.8.20'
+    ext.kotlin_version = '1.9.21'
    ext.kotlin_coroutines_version = '1.7.1'
    ext.work_version = '2.7.1'
    ext.concurrent_version = '1.1.0'
@@ -35,8 +35,8 @@ platform :android do
      task: 'bundle', 
      build_type: 'Release',
      properties: {
-        "android.injected.version.code" => 125,
-        "android.injected.version.name" => "1.97.0",
+        "android.injected.version.code" => 124,
+        "android.injected.version.name" => "1.96.0",
      }
    )
    upload_to_play_store(skip_upload_apk: true, skip_upload_images: true, skip_upload_screenshots: true, aab: '../build/app/outputs/bundle/release/app-release.aab')
@@ -5,17 +5,17 @@
    
    
      
-      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000271">
+      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000232">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="1: bundleRelease" time="74.334294">
+      <testcase classname="fastlane.lanes" name="1: bundleRelease" time="78.881681">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="2: upload_to_play_store" time="29.507669">
+      <testcase classname="fastlane.lanes" name="2: upload_to_play_store" time="32.080999">
        
      </testcase>
    
@@ -379,7 +379,7 @@
 				CODE_SIGN_ENTITLEMENTS = Runner/RunnerProfile.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 140;
+				CURRENT_PROJECT_VERSION = 139;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -515,7 +515,7 @@
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 140;
+				CURRENT_PROJECT_VERSION = 139;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -543,7 +543,7 @@
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 140;
+				CURRENT_PROJECT_VERSION = 139;
 				DEVELOPMENT_TEAM = 2F67MQ8R79;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -55,11 +55,11 @@
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
-    <string>1.96.0</string>
+    <string>1.95.0</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleVersion</key>
-    <string>140</string>
+    <string>139</string>
    <key>FLTEnableImpeller</key>
    <true />
    <key>ITSAppUsesNonExemptEncryption</key>
@@ -19,7 +19,7 @@ platform :ios do
  desc "iOS Beta"
  lane :beta do
    increment_version_number(
-      version_number: "1.97.0"
+      version_number: "1.96.0"
    )
    increment_build_number(
      build_number: latest_testflight_build_number + 1,
@@ -5,32 +5,32 @@
    
    
      
-      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000316">
+      <testcase classname="fastlane.lanes" name="0: default_platform" time="0.000255">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="1: increment_version_number" time="0.190055">
+      <testcase classname="fastlane.lanes" name="1: increment_version_number" time="0.157832">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="2: latest_testflight_build_number" time="4.109364">
+      <testcase classname="fastlane.lanes" name="2: latest_testflight_build_number" time="4.825919">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="3: increment_build_number" time="0.15926">
+      <testcase classname="fastlane.lanes" name="3: increment_build_number" time="0.18815">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="4: build_app" time="80.90681">
+      <testcase classname="fastlane.lanes" name="4: build_app" time="110.912709">
        
      </testcase>
    
      
-      <testcase classname="fastlane.lanes" name="5: upload_to_testflight" time="71.634559">
+      <testcase classname="fastlane.lanes" name="5: upload_to_testflight" time="78.396901">
        
      </testcase>
    
@@ -1,4 +1,3 @@
-import 'dart:async';
 import 'dart:io';
 import 'dart:math';
 import 'dart:ui' as ui;
@@ -133,7 +132,7 @@ class GalleryViewerPage extends HookConsumerWidget {
    void toggleFavorite(Asset asset) =>
        ref.read(assetProvider.notifier).toggleFavorite([asset]);

-    Future<void> precacheNextImage(int index) async {
+    void precacheNextImage(int index) {
      void onError(Object exception, StackTrace? stackTrace) {
        // swallow error silently
        debugPrint('Error precaching next image: $exception, $stackTrace');
@@ -141,7 +140,7 @@ class GalleryViewerPage extends HookConsumerWidget {

      if (index < totalAssets && index >= 0) {
        final asset = loadAsset(index);
-        await precacheImage(
+        precacheImage(
          ImmichImage.imageProvider(asset: asset),
          context,
          onError: onError,
@@ -712,21 +711,6 @@ class GalleryViewerPage extends HookConsumerWidget {
      [],
    );

-    useEffect(
-      () {
-        // No need to await this
-        unawaited(
-          // Delay this a bit so we can finish loading the page
-          Future.delayed(const Duration(milliseconds: 400)).then(
-            // Precache the next image
-            (_) => precacheNextImage(currentIndex.value + 1),
-          ),
-        );
-        return null;
-      },
-      [],
-    );
-
    ref.listen(showControlsProvider, (_, show) {
      if (show) {
        SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
@@ -751,21 +735,14 @@ class GalleryViewerPage extends HookConsumerWidget {
                isZoomed.value = state != PhotoViewScaleState.initial;
                ref.read(showControlsProvider.notifier).show = !isZoomed.value;
              },
-              loadingBuilder: (context, event, index) => ClipRect(
-                child: Stack(
-                  fit: StackFit.expand,
-                  children: [
-                    BackdropFilter(
-                      filter: ui.ImageFilter.blur(
-                        sigmaX: 10,
-                        sigmaY: 10,
-                      ),
-                    ),
-                    ImmichThumbnail(
-                      asset: asset(),
-                      fit: BoxFit.contain,
-                    ),
-                  ],
+              loadingBuilder: (context, event, index) => ImageFiltered(
+                imageFilter: ui.ImageFilter.blur(
+                  sigmaX: 1,
+                  sigmaY: 1,
+                ),
+                child: ImmichThumbnail(
+                  asset: asset(),
+                  fit: BoxFit.contain,
                ),
              ),
              pageController: controller,
@@ -777,16 +754,12 @@ class GalleryViewerPage extends HookConsumerWidget {
                  ),
              itemCount: totalAssets,
              scrollDirection: Axis.horizontal,
-              onPageChanged: (value) async {
+              onPageChanged: (value) {
                final next = currentIndex.value < value ? value + 1 : value - 1;
-                HapticFeedback.selectionClick();
+                precacheNextImage(next);
                currentIndex.value = value;
                stackIndex.value = -1;
-
-                // Wait for page change animation to finish
-                await Future.delayed(const Duration(milliseconds: 400));
-                // Then precache the next image
-                unawaited(precacheNextImage(next));
+                HapticFeedback.selectionClick();
              },
              builder: (context, index) {
                final a =
@@ -845,7 +818,7 @@ class GalleryViewerPage extends HookConsumerWidget {
                      isMotionVideo: isPlayingMotionVideo.value,
                      placeholder: Image(
                        image: provider,
-                        fit: BoxFit.contain,
+                        fit: BoxFit.fitWidth,
                        height: context.height,
                        width: context.width,
                        alignment: Alignment.center,
@@ -40,7 +40,7 @@ class VideoViewerPage extends HookWidget {
      controlsSafeAreaMinimum: const EdgeInsets.only(
        bottom: 100,
      ),
-      placeholder: placeholder,
+      placeholder: SizedBox.expand(child: placeholder),
      showControls: showControls && !isMotionVideo,
      hideControlsTimer: hideControlsTimer,
      customControls: const VideoPlayerControls(),
@@ -58,13 +58,9 @@ class VideoViewerPage extends HookWidget {
            if (controller == null) {
              return Stack(
                children: [
-                  if (placeholder != null) placeholder!,
-                  const Positioned.fill(
-                    child: Center(
-                      child: DelayedLoadingIndicator(
-                        fadeInDuration: Duration(milliseconds: 500),
-                      ),
-                    ),
+                  if (placeholder != null) SizedBox.expand(child: placeholder!),
+                  const DelayedLoadingIndicator(
+                    fadeInDuration: Duration(milliseconds: 500),
                  ),
                ],
              );
@@ -2,6 +2,7 @@ import 'dart:async';
 import 'dart:convert';
 import 'dart:io';

+import 'package:background_downloader/background_downloader.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -33,6 +34,7 @@ final backupServiceProvider = Provider(

 class BackupService {
  final httpClient = http.Client();
+  final _fileDownloader = FileDownloader();
  final ApiService _apiService;
  final Isar _db;
  final Logger _log = Logger("BackupService");
@@ -242,117 +244,146 @@ class BackupService {
          )
        : assetList.toList();

+    final tasks = <UploadTask>[];
    for (var entity in assetsToUpload) {
-      File? file;
-      File? livePhotoFile;
+      final isAvailableLocally =
+          await entity.isLocallyAvailable(isOrigin: true);

-      try {
-        final isAvailableLocally =
-            await entity.isLocallyAvailable(isOrigin: true);
-
-        // Handle getting files from iCloud
-        if (!isAvailableLocally && Platform.isIOS) {
-          // Skip iCloud assets if the user has disabled this feature
-          if (isIgnoreIcloudAssets) {
-            continue;
-          }
-
-          setCurrentUploadAssetCb(
-            CurrentUploadAsset(
-              id: entity.id,
-              fileCreatedAt: entity.createDateTime.year == 1970
-                  ? entity.modifiedDateTime
-                  : entity.createDateTime,
-              fileName: await entity.titleAsync,
-              fileType: _getAssetType(entity.type),
-              iCloudAsset: true,
-            ),
-          );
-
-          file = await entity.loadFile(progressHandler: pmProgressHandler);
-          livePhotoFile = await entity.loadFile(
-            withSubtype: true,
-            progressHandler: pmProgressHandler,
-          );
-        } else {
-          if (entity.type == AssetType.video) {
-            file = await entity.originFile;
-          } else {
-            file = await entity.originFile.timeout(const Duration(seconds: 5));
-            if (entity.isLivePhoto) {
-              livePhotoFile = await entity.originFileWithSubtype
-                  .timeout(const Duration(seconds: 5));
-            }
-          }
+      // Handle getting files from iCloud
+      if (!isAvailableLocally && Platform.isIOS) {
+        // Skip iCloud assets if the user has disabled this feature
+        if (isIgnoreIcloudAssets) {
+          continue;
        }

-        if (file != null) {
-          String originalFileName = await entity.titleAsync;
-          var fileStream = file.openRead();
-          var assetRawUploadData = http.MultipartFile(
-            "assetData",
-            fileStream,
-            file.lengthSync(),
-            filename: originalFileName,
-          );
+        setCurrentUploadAssetCb(
+          CurrentUploadAsset(
+            id: entity.id,
+            fileCreatedAt: entity.createDateTime.year == 1970
+                ? entity.modifiedDateTime
+                : entity.createDateTime,
+            fileName: await entity.titleAsync,
+            fileType: _getAssetType(entity.type),
+            iCloudAsset: true,
+          ),
+        );
+      }

-          var req = MultipartRequest(
-            'POST',
-            Uri.parse('$savedEndpoint/asset/upload'),
-            onProgress: ((bytes, totalBytes) =>
-                uploadProgressCb(bytes, totalBytes)),
-          );
-          req.headers["x-immich-user-token"] = Store.get(StoreKey.accessToken);
-          req.headers["Transfer-Encoding"] = "chunked";
+      final files = [];
+      // TODO: This is silly to have to load the file just to access the path
+      // But there doesn't seem to be any other way to do it
+      final fileName = (await entity.originFile)?.path;
+      files.add(fileName);

-          req.fields['deviceAssetId'] = entity.id;
-          req.fields['deviceId'] = deviceId;
-          req.fields['fileCreatedAt'] =
-              entity.createDateTime.toUtc().toIso8601String();
-          req.fields['fileModifiedAt'] =
-              entity.modifiedDateTime.toUtc().toIso8601String();
-          req.fields['isFavorite'] = entity.isFavorite.toString();
-          req.fields['duration'] = entity.videoDuration.toString();
+      if (entity.isLivePhoto) {
+        final livePhotoFileName = (await entity.originFileWithSubtype)?.path;
+        if (livePhotoFileName != null) {
+          files.add(livePhotoFileName);
+        }
+      }

-          req.files.add(assetRawUploadData);
+      final url = '$savedEndpoint/asset/upload';
+      final headers = {
+        'x-immich-user-token': Store.get(StoreKey.accessToken),
+        'Transfer-Encoding': 'chunked',
+      };

-          if (entity.isLivePhoto) {
-            if (livePhotoFile != null) {
-              final livePhotoTitle = p.setExtension(
-                originalFileName,
-                p.extension(livePhotoFile.path),
-              );
-              final fileStream = livePhotoFile.openRead();
-              final livePhotoRawUploadData = http.MultipartFile(
-                "livePhotoData",
-                fileStream,
-                livePhotoFile.lengthSync(),
-                filename: livePhotoTitle,
-              );
-              req.files.add(livePhotoRawUploadData);
-            } else {
-              _log.warning(
-                "Failed to obtain motion part of the livePhoto - $originalFileName",
-              );
-            }
-          }
+      final fields = {
+        'deviceAssetId': entity.id,
+        'deviceId': deviceId,
+        'fileCreatedAt': entity.createDateTime.toUtc().toIso8601String(),
+        'fileModifiedAt': entity.modifiedDateTime.toUtc().toIso8601String(),
+        'isFavorite': entity.isFavorite.toString(),
+        'duration': entity.videoDuration.toString(),
+      };

-          setCurrentUploadAssetCb(
-            CurrentUploadAsset(
-              id: entity.id,
-              fileCreatedAt: entity.createDateTime.year == 1970
-                  ? entity.modifiedDateTime
-                  : entity.createDateTime,
-              fileName: originalFileName,
-              fileType: _getAssetType(entity.type),
-              iCloudAsset: false,
-            ),
-          );
+      if (files.length == 1) {
+        final String file = files.first;
+        final split = file.split('/');
+        final name = split.last;
+        final directory = split.take(split.length - 1).join('/');

-          var response =
-              await httpClient.send(req, cancellationToken: cancelToken);
+        final task = UploadTask(
+          url: url,
+          group: 'backup',
+          fileField: 'assetData',
+          taskId: entity.id,
+          fields: fields,
+          headers: headers,
+          updates: Updates.statusAndProgress,
+          retries: 0,
+          httpRequestMethod: 'POST',
+          displayName: 'Immich',
+          filename: name,
+          directory: directory,
+          baseDirectory: BaseDirectory.root,
+        );
+        tasks.add(task);
+      } else {
+        final task = MultiUploadTask(
+          url: url,
+          files: files,
+          headers: headers,
+          fields: fields,
+          updates: Updates.statusAndProgress,
+          group: 'backup',
+          taskId: entity.id,
+          retries: 0,
+          displayName: 'Immich',
+          httpRequestMethod: 'POST',
+          baseDirectory: BaseDirectory.root,
+        );

-          if (response.statusCode == 200) {
+        print('created task $task for files $files');
+
+        tasks.add(task);
+      }
+    }
+
+    final permission = await _fileDownloader.permissions
+        .status(PermissionType.androidSharedStorage);
+    print('has permission $permission');
+
+    if (tasks.length == 1) {
+      final result = await _fileDownloader.upload(
+        tasks.first,
+        onProgress: (percent) => print('${percent * 100} done'),
+        onStatus: (status) => print('status $status'),
+        onElapsedTime: (t) => print('time is $t'),
+        elapsedTimeInterval: const Duration(seconds: 1),
+      );
+
+      print('$result is done with ${result.status}');
+      print('result ${result.responseBody}');
+      print('result ${result.responseHeaders}');
+    } else {
+      final result = await _fileDownloader.uploadBatch(
+        tasks,
+        batchProgressCallback: (succeeded, failed) =>
+            print('$succeeded succeeded, $failed failed'),
+        taskStatusCallback: (status) => print('status $status'),
+        taskProgressCallback: (update) => print('update $update'),
+        onElapsedTime: (t) => print('time is $t'),
+        elapsedTimeInterval: const Duration(seconds: 1),
+      );
+
+      print(
+        '$result is done with ${result.succeeded.length} succeeded and ${result.failed.length} failed',
+      );
+
+      for (final task in result.succeeded) {
+        final r = result.results[task];
+        print('successful task $task with result $r');
+      }
+
+      for (final task in result.failed) {
+        final r = result.results[task];
+        print('failed task $task with result $r');
+      }
+    }
+
+    /*
+          if (result.status == 200) {
            // asset is a duplicate (already exists on the server)
            duplicatedAssetIds.add(entity.id);
            uploadSuccessCb(entity.id, deviceId, true);
@@ -405,6 +436,7 @@ class BackupService {
        }
      }
    }
+    */
    if (duplicatedAssetIds.isNotEmpty) {
      await _saveDuplicatedAssetIds(duplicatedAssetIds);
    }
@@ -6,7 +6,7 @@ part of 'map_state.provider.dart';
 // RiverpodGenerator
 // **************************************************************************

-String _$mapStateNotifierHash() => r'3b509b57b7400b09817e9caee9debf899172cd52';
+String _$mapStateNotifierHash() => r'6408d616ec9fc0d1ff26e25692417c43504ff754';

 /// See also [MapStateNotifier].
@ProviderFor(MapStateNotifier)
@@ -124,14 +124,11 @@ class MemoryPage extends HookConsumerWidget {
          .then((_) => precacheAsset(1));
    }

-    Future<void> onAssetChanged(int otherIndex) async {
+    onAssetChanged(int otherIndex) {
      HapticFeedback.selectionClick();
      currentAssetPage.value = otherIndex;
+      precacheAsset(otherIndex + 1);
      updateProgressText();
-      // Wait for page change animation to finish
-      await Future.delayed(const Duration(milliseconds: 400));
-      // And then precache the next asset
-      await precacheAsset(otherIndex + 1);
    }

    /* Notification listener is used instead of OnPageChanged callback since OnPageChanged is called
@@ -1393,7 +1393,7 @@ class VideoViewerRoute extends PageRouteInfo<VideoViewerRouteArgs> {
    void Function()? onPaused,
    Widget? placeholder,
    bool showControls = true,
-    Duration hideControlsTimer = const Duration(milliseconds: 1500),
+    Duration hideControlsTimer = const Duration(seconds: 5),
    bool showDownloadingIndicator = true,
    List<PageRouteInfo>? children,
  }) : super(
@@ -1429,7 +1429,7 @@ class VideoViewerRouteArgs {
    this.onPaused,
    this.placeholder,
    this.showControls = true,
-    this.hideControlsTimer = const Duration(milliseconds: 1500),
+    this.hideControlsTimer = const Duration(seconds: 5),
    this.showDownloadingIndicator = true,
  });

@@ -20,24 +20,21 @@ class DelayedLoadingIndicator extends StatelessWidget {

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

-        return AnimatedSwitcher(
-          duration: fadeInDuration ?? Duration.zero,
-          child: c,
-        );
-      },
+          return Container(key: const ValueKey('hiding'));
+        },
+      ),
    );
  }
 }
@@ -58,11 +58,9 @@ class ImmichImage extends StatelessWidget {
    }
  }

-  // Whether to use the local asset image provider or a remote one
  static bool useLocal(Asset asset) =>
      !asset.isRemote ||
      asset.isLocal && !Store.get(StoreKey.preferRemoteImage, false);
-
  @override
  Widget build(BuildContext context) {
    if (asset == null) {
@@ -6,7 +6,6 @@ import 'package:immich_mobile/modules/asset_viewer/image_providers/immich_local_
 import 'package:immich_mobile/modules/asset_viewer/image_providers/immich_remote_image_provider.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/ui/hooks/blurhash_hook.dart';
-import 'package:immich_mobile/shared/ui/immich_image.dart';
 import 'package:immich_mobile/shared/ui/thumbhash_placeholder.dart';
 import 'package:octo_image/octo_image.dart';

@@ -44,7 +43,7 @@ class ImmichThumbnail extends HookWidget {
      );
    }

-    if (ImmichImage.useLocal(asset)) {
+    if (useLocal(asset)) {
      return ImmichLocalThumbnailProvider(
        asset: asset,
        height: thumbnailSize,
@@ -58,6 +57,8 @@ class ImmichThumbnail extends HookWidget {
    }
  }

+  static bool useLocal(Asset asset) => !asset.isRemote || asset.isLocal;
+
  @override
  Widget build(BuildContext context) {
    Uint8List? blurhash = useBlurHashRef(asset).value;
@@ -3,7 +3,7 @@ Immich API

 This Dart package is automatically generated by the [OpenAPI Generator](https://openapi-generator.tech) project:

- API version: 1.97.0
+- API version: 1.96.0
 - Build package: org.openapitools.codegen.languages.DartClientCodegen

 ## Requirements
@@ -9,6 +9,8 @@ import 'package:openapi/api.dart';
 Name | Type | Description | Notes
 ------------ | ------------- | ------------- | -------------
 **enabled** | **bool** |  | 
+**interval** | **int** |  | 
+**usePolling** | **bool** |  | 

 [[Back to Model list]](../README.md#documentation-for-models) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to README]](../README.md)

@@ -14,25 +14,37 @@ class SystemConfigLibraryWatchDto {
  /// Returns a new [SystemConfigLibraryWatchDto] instance.
  SystemConfigLibraryWatchDto({
    required this.enabled,
+    required this.interval,
+    required this.usePolling,
  });

  bool enabled;

+  int interval;
+
+  bool usePolling;
+
  @override
  bool operator ==(Object other) => identical(this, other) || other is SystemConfigLibraryWatchDto &&
-    other.enabled == enabled;
+    other.enabled == enabled &&
+    other.interval == interval &&
+    other.usePolling == usePolling;

  @override
  int get hashCode =>
    // ignore: unnecessary_parenthesis
-    (enabled.hashCode);
+    (enabled.hashCode) +
+    (interval.hashCode) +
+    (usePolling.hashCode);

  @override
-  String toString() => 'SystemConfigLibraryWatchDto[enabled=$enabled]';
+  String toString() => 'SystemConfigLibraryWatchDto[enabled=$enabled, interval=$interval, usePolling=$usePolling]';

  Map<String, dynamic> toJson() {
    final json = <String, dynamic>{};
      json[r'enabled'] = this.enabled;
+      json[r'interval'] = this.interval;
+      json[r'usePolling'] = this.usePolling;
    return json;
  }

@@ -45,6 +57,8 @@ class SystemConfigLibraryWatchDto {

      return SystemConfigLibraryWatchDto(
        enabled: mapValueOfType<bool>(json, r'enabled')!,
+        interval: mapValueOfType<int>(json, r'interval')!,
+        usePolling: mapValueOfType<bool>(json, r'usePolling')!,
      );
    }
    return null;
@@ -93,6 +107,8 @@ class SystemConfigLibraryWatchDto {
  /// The list of required keys that must be present in a JSON.
  static const requiredKeys = <String>{
    'enabled',
+    'interval',
+    'usePolling',
  };
 }

@@ -21,6 +21,16 @@ void main() {
      // TODO
    });

+    // int interval
+    test('to test the property `interval`', () async {
+      // TODO
+    });
+
+    // bool usePolling
+    test('to test the property `usePolling`', () async {
+      // TODO
+    });
+

  });

@@ -73,6 +73,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "7.3.2"
+  background_downloader:
+    dependency: "direct main"
+    description:
+      name: background_downloader
+      sha256: "39ac21607259ec24012cbf81816aa209e0d765fa086ca03a3a1d112cfad68b52"
+      url: "https://pub.dev"
+    source: hosted
+    version: "8.2.1"
  boolean_selector:
    dependency: transitive
    description:
@@ -707,10 +715,10 @@ packages:
    dependency: "direct main"
    description:
      name: http
-      sha256: "6aa2946395183537c8b880962d935877325d6a09a2867c3970c05c0fed6ac482"
+      sha256: a2bbf9d017fcced29139daa8ed2bba4ece450ab222871df93ca9eec6f80c34ba
      url: "https://pub.dev"
    source: hosted
-    version: "0.13.5"
+    version: "1.2.0"
  http_multi_server:
    dependency: transitive
    description:
@@ -2,7 +2,7 @@ name: immich_mobile
 description: Immich - selfhosted backup media file on mobile phone

 publish_to: "none"
-version: 1.97.0+125
+version: 1.96.0+124
 isar_version: &isar_version 3.1.0+1

 environment:
@@ -58,6 +58,7 @@ dependencies:
  timezone: ^0.9.2
  octo_image: ^2.0.0
  thumbhash: 0.1.0+1
+  background_downloader: ^8.0.0

  openapi:
    path: openapi
@@ -80,6 +81,7 @@ dependency_overrides:
 #f      url: https://github.com/Zverik/flutter-geolocator.git
 #f      ref: floss
 #f      path: geolocator_android
+  http: ^1.1.0

 dev_dependencies:
  flutter_test:
@@ -6458,7 +6458,7 @@
  "info": {
    "title": "Immich",
    "description": "Immich API",
-    "version": "1.97.0",
+    "version": "1.96.0",
    "contact": {}
  },
  "tags": [],
@@ -9831,10 +9831,18 @@
        "properties": {
          "enabled": {
            "type": "boolean"
+          },
+          "interval": {
+            "type": "integer"
+          },
+          "usePolling": {
+            "type": "boolean"
          }
        },
        "required": [
-          "enabled"
+          "enabled",
+          "interval",
+          "usePolling"
        ],
        "type": "object"
      },
@@ -4,7 +4,7 @@
 * Immich
 * Immich API
 *
- * The version of the OpenAPI document: 1.97.0
+ * The version of the OpenAPI document: 1.96.0
 * 
 *
 * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
@@ -4401,6 +4401,18 @@ export interface SystemConfigLibraryWatchDto {
     * @memberof SystemConfigLibraryWatchDto
     */
    'enabled': boolean;
+    /**
+     * 
+     * @type {number}
+     * @memberof SystemConfigLibraryWatchDto
+     */
+    'interval': number;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SystemConfigLibraryWatchDto
+     */
+    'usePolling': boolean;
 }
 /**
 * 
@@ -4,7 +4,7 @@
 * Immich
 * Immich API
 *
- * The version of the OpenAPI document: 1.97.0
+ * The version of the OpenAPI document: 1.96.0
 * 
 *
 * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
@@ -4,7 +4,7 @@
 * Immich
 * Immich API
 *
- * The version of the OpenAPI document: 1.97.0
+ * The version of the OpenAPI document: 1.96.0
 * 
 *
 * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
@@ -4,7 +4,7 @@
 * Immich
 * Immich API
 *
- * The version of the OpenAPI document: 1.97.0
+ * The version of the OpenAPI document: 1.96.0
 * 
 *
 * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
@@ -4,7 +4,7 @@
 * Immich
 * Immich API
 *
- * The version of the OpenAPI document: 1.97.0
+ * The version of the OpenAPI document: 1.96.0
 * 
 *
 * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
@@ -1,6 +1,6 @@
 /**
 * Immich
- * 1.97.0
+ * 1.96.0
 * DO NOT MODIFY - This file has been generated using oazapfts.
 * See https://www.npmjs.com/package/oazapfts
 */
@@ -835,6 +835,8 @@ export type SystemConfigLibraryScanDto = {
 };
 export type SystemConfigLibraryWatchDto = {
    enabled: boolean;
+    interval: number;
+    usePolling: boolean;
 };
 export type SystemConfigLibraryDto = {
    scan: SystemConfigLibraryScanDto;
@@ -0,0 +1,158 @@
+import { LoginResponseDto } from '@app/domain';
+import { AssetType } from '@app/infra/entities';
+import { readFile } from 'node:fs/promises';
+import { basename, join } from 'node:path';
+import { IMMICH_TEST_ASSET_PATH, testApp } from '../../../src/test-utils/utils';
+import { api } from '../../client';
+
+const JPEG = {
+  type: AssetType.IMAGE,
+  originalFileName: 'el_torcal_rocks',
+  resized: true,
+  exifInfo: {
+    dateTimeOriginal: '2012-08-05T11:39:59.000Z',
+    exifImageWidth: 512,
+    exifImageHeight: 341,
+    latitude: null,
+    longitude: null,
+    focalLength: 75,
+    iso: 200,
+    fNumber: 11,
+    exposureTime: '1/160',
+    fileSizeInByte: 53_493,
+    make: 'SONY',
+    model: 'DSLR-A550',
+    orientation: null,
+    description: 'SONY DSC',
+  },
+};
+
+const tests = [
+  { input: 'formats/jpg/el_torcal_rocks.jpg', expected: JPEG },
+  { input: 'formats/jpeg/el_torcal_rocks.jpeg', expected: JPEG },
+  {
+    input: 'formats/heic/IMG_2682.heic',
+    expected: {
+      type: AssetType.IMAGE,
+      originalFileName: 'IMG_2682',
+      resized: true,
+      fileCreatedAt: '2019-03-21T16:04:22.348Z',
+      exifInfo: {
+        dateTimeOriginal: '2019-03-21T16:04:22.348Z',
+        exifImageWidth: 4032,
+        exifImageHeight: 3024,
+        latitude: 41.2203,
+        longitude: -96.071_625,
+        make: 'Apple',
+        model: 'iPhone 7',
+        lensModel: 'iPhone 7 back camera 3.99mm f/1.8',
+        fileSizeInByte: 880_703,
+        exposureTime: '1/887',
+        iso: 20,
+        focalLength: 3.99,
+        fNumber: 1.8,
+        timeZone: 'America/Chicago',
+      },
+    },
+  },
+  {
+    input: 'formats/png/density_plot.png',
+    expected: {
+      type: AssetType.IMAGE,
+      originalFileName: 'density_plot',
+      resized: true,
+      exifInfo: {
+        exifImageWidth: 800,
+        exifImageHeight: 800,
+        latitude: null,
+        longitude: null,
+        fileSizeInByte: 25_408,
+      },
+    },
+  },
+  {
+    input: 'formats/raw/Nikon/D80/glarus.nef',
+    expected: {
+      type: AssetType.IMAGE,
+      originalFileName: 'glarus',
+      resized: true,
+      fileCreatedAt: '2010-07-20T17:27:12.000Z',
+      exifInfo: {
+        make: 'NIKON CORPORATION',
+        model: 'NIKON D80',
+        exposureTime: '1/200',
+        fNumber: 10,
+        focalLength: 18,
+        iso: 100,
+        fileSizeInByte: 9_057_784,
+        dateTimeOriginal: '2010-07-20T17:27:12.000Z',
+        latitude: null,
+        longitude: null,
+        orientation: '1',
+      },
+    },
+  },
+  {
+    input: 'formats/raw/Nikon/D700/philadelphia.nef',
+    expected: {
+      type: AssetType.IMAGE,
+      originalFileName: 'philadelphia',
+      resized: true,
+      fileCreatedAt: '2016-09-22T22:10:29.060Z',
+      exifInfo: {
+        make: 'NIKON CORPORATION',
+        model: 'NIKON D700',
+        exposureTime: '1/400',
+        fNumber: 11,
+        focalLength: 85,
+        iso: 200,
+        fileSizeInByte: 15_856_335,
+        dateTimeOriginal: '2016-09-22T22:10:29.060Z',
+        latitude: null,
+        longitude: null,
+        orientation: '1',
+        timeZone: 'UTC-5',
+      },
+    },
+  },
+];
+
+describe(`Format (e2e)`, () => {
+  let server: any;
+  let admin: LoginResponseDto;
+
+  beforeAll(async () => {
+    const app = await testApp.create();
+    server = app.getHttpServer();
+  });
+
+  beforeEach(async () => {
+    await testApp.reset();
+    await api.authApi.adminSignUp(server);
+    admin = await api.authApi.adminLogin(server);
+  });
+
+  afterAll(async () => {
+    await testApp.teardown();
+  });
+
+  for (const { input, expected } of tests) {
+    it(`should generate a thumbnail for ${input}`, async () => {
+      const filepath = join(IMMICH_TEST_ASSET_PATH, input);
+      const content = await readFile(filepath);
+      await api.assetApi.upload(server, admin.accessToken, 'test-device-id', {
+        content,
+        filename: basename(filepath),
+      });
+      const assets = await api.assetApi.getAllAssets(server, admin.accessToken);
+
+      expect(assets).toHaveLength(1);
+
+      const asset = assets[0];
+
+      expect(asset.exifInfo).toBeDefined();
+      expect(asset.exifInfo).toMatchObject(expected.exifInfo);
+      expect(asset).toMatchObject(expected);
+    });
+  }
+});
@@ -0,0 +1,102 @@
+import { AssetResponseDto, LoginResponseDto } from '@app/domain';
+import { AssetController } from '@app/immich';
+import { exiftool } from 'exiftool-vendored';
+import { readFile, writeFile } from 'fs/promises';
+import {
+  IMMICH_TEST_ASSET_PATH,
+  IMMICH_TEST_ASSET_TEMP_PATH,
+  db,
+  restoreTempFolder,
+  testApp,
+} from '../../../src/test-utils/utils';
+import { api } from '../../client';
+
+describe(`${AssetController.name} (e2e)`, () => {
+  let server: any;
+  let admin: LoginResponseDto;
+
+  beforeAll(async () => {
+    server = (await testApp.create()).getHttpServer();
+  });
+
+  beforeEach(async () => {
+    await testApp.reset();
+    await restoreTempFolder();
+    await api.authApi.adminSignUp(server);
+    admin = await api.authApi.adminLogin(server);
+  });
+
+  afterAll(async () => {
+    await testApp.teardown();
+    await restoreTempFolder();
+  });
+
+  describe('should strip metadata of', () => {
+    let assetWithLocation: AssetResponseDto;
+
+    beforeEach(async () => {
+      const fileContent = await readFile(`${IMMICH_TEST_ASSET_PATH}/metadata/gps-position/thompson-springs.jpg`);
+
+      await api.assetApi.upload(server, admin.accessToken, 'test-asset-id', { content: fileContent });
+
+      const assets = await api.assetApi.getAllAssets(server, admin.accessToken);
+
+      expect(assets).toHaveLength(1);
+      assetWithLocation = assets[0];
+
+      expect(assetWithLocation).toEqual(
+        expect.objectContaining({
+          exifInfo: expect.objectContaining({ latitude: 39.115, longitude: -108.400968333333 }),
+        }),
+      );
+    });
+
+    it('small webp thumbnails', async () => {
+      const assetId = assetWithLocation.id;
+
+      const thumbnail = await api.assetApi.getWebpThumbnail(server, admin.accessToken, assetId);
+
+      await writeFile(`${IMMICH_TEST_ASSET_TEMP_PATH}/thumbnail.webp`, thumbnail);
+
+      const exifData = await exiftool.read(`${IMMICH_TEST_ASSET_TEMP_PATH}/thumbnail.webp`);
+
+      expect(exifData).not.toHaveProperty('GPSLongitude');
+      expect(exifData).not.toHaveProperty('GPSLatitude');
+    });
+
+    it('large jpeg thumbnails', async () => {
+      const assetId = assetWithLocation.id;
+
+      const thumbnail = await api.assetApi.getJpegThumbnail(server, admin.accessToken, assetId);
+
+      await writeFile(`${IMMICH_TEST_ASSET_TEMP_PATH}/thumbnail.jpg`, thumbnail);
+
+      const exifData = await exiftool.read(`${IMMICH_TEST_ASSET_TEMP_PATH}/thumbnail.jpg`);
+
+      expect(exifData).not.toHaveProperty('GPSLongitude');
+      expect(exifData).not.toHaveProperty('GPSLatitude');
+    });
+  });
+
+  describe.each([
+    // These hashes were created by copying the image files to a Samsung phone,
+    // exporting the video from Samsung's stock Gallery app, and hashing them locally.
+    // This ensures that immich+exiftool are extracting the videos the same way Samsung does.
+    // DO NOT assume immich+exiftool are doing things correctly and just copy whatever hash it gives
+    // into the test here.
+    ['Samsung One UI 5.jpg', 'fr14niqCq6N20HB8rJYEvpsUVtI='],
+    ['Samsung One UI 6.jpg', 'lT9Uviw/FFJYCjfIxAGPTjzAmmw='],
+    ['Samsung One UI 6.heic', '/ejgzywvgvzvVhUYVfvkLzFBAF0='],
+  ])('should extract motionphoto video', (file, checksum) => {
+    it(`with checksum ${checksum} from ${file}`, async () => {
+      const fileContent = await readFile(`${IMMICH_TEST_ASSET_PATH}/formats/motionphoto/${file}`);
+
+      const response = await api.assetApi.upload(server, admin.accessToken, 'test-asset-id', { content: fileContent });
+      const asset = await api.assetApi.get(server, admin.accessToken, response.id);
+      expect(asset).toHaveProperty('livePhotoVideoId');
+      const video = await api.assetApi.get(server, admin.accessToken, asset.livePhotoVideoId as string);
+
+      expect(video.checksum).toStrictEqual(checksum);
+    });
+  });
+});
@@ -1,12 +1,12 @@
 {
  "name": "immich",
-  "version": "1.97.0",
+  "version": "1.96.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "immich",
-      "version": "1.97.0",
+      "version": "1.96.0",
      "license": "GNU Affero General Public License version 3",
      "dependencies": {
        "@babel/runtime": "^7.22.11",
@@ -1,6 +1,6 @@
 {
  "name": "immich",
-  "version": "1.97.0",
+  "version": "1.96.0",
  "description": "",
  "author": "",
  "private": true,
@@ -112,13 +112,20 @@ export class LibraryService extends EventEmitter {
      ignore: library.exclusionPatterns,
    });

+    const config = await this.configCore.getConfig();
+    const { usePolling, interval } = config.library.watch;
+
+    this.logger.debug(`Settings for watcher: usePolling: ${usePolling}, interval: ${interval}`);
+
    let _resolve: () => void;
    const ready$ = new Promise<void>((resolve) => (_resolve = resolve));

    this.watchers[id] = this.storageRepository.watch(
      library.importPaths,
      {
-        usePolling: false,
+        usePolling,
+        interval,
+        binaryInterval: interval,
        ignoreInitial: true,
      },
      {
@@ -1,9 +1,12 @@
 import { validateCronExpression } from '@app/domain';
+import { ApiProperty } from '@nestjs/swagger';
 import { Type } from 'class-transformer';
 import {
  IsBoolean,
+  IsInt,
  IsNotEmpty,
  IsObject,
+  IsPositive,
  IsString,
  Validate,
  ValidateIf,
@@ -35,6 +38,14 @@ export class SystemConfigLibraryScanDto {
 export class SystemConfigLibraryWatchDto {
  @IsBoolean()
  enabled!: boolean;
+
+  @IsBoolean()
+  usePolling!: boolean;
+
+  @IsInt()
+  @IsPositive()
+  @ApiProperty({ type: 'integer' })
+  interval!: number;
 }

 export class SystemConfigLibraryDto {
@@ -132,6 +132,8 @@ export const defaults = Object.freeze<SystemConfig>({
    },
    watch: {
      enabled: false,
+      usePolling: false,
+      interval: 10_000,
    },
  },
  server: {
@@ -136,6 +136,8 @@ const updatedConfig = Object.freeze<SystemConfig>({
    },
    watch: {
      enabled: false,
+      usePolling: false,
+      interval: 10_000,
    },
  },
 });
@@ -51,6 +51,8 @@ export enum SystemConfigKey {
  LIBRARY_SCAN_CRON_EXPRESSION = 'library.scan.cronExpression',

  LIBRARY_WATCH_ENABLED = 'library.watch.enabled',
+  LIBRARY_WATCH_USE_POLLING = 'library.watch.usePolling',
+  LIBRARY_WATCH_INTERVAL = 'library.watch.interval',

  LOGGING_ENABLED = 'logging.enabled',
  LOGGING_LEVEL = 'logging.level',
@@ -266,6 +268,8 @@ export interface SystemConfig {
    };
    watch: {
      enabled: boolean;
+      usePolling: boolean;
+      interval: number;
    };
  };
  server: {
@@ -1,12 +0,0 @@
-import { MigrationInterface, QueryRunner } from 'typeorm';
-
-export class RemoveLibraryWatchPollingOption1709150004123 implements MigrationInterface {
-  public async up(queryRunner: QueryRunner): Promise<void> {
-    await queryRunner.query(`DELETE FROM "system_config" WHERE key = 'library.watch.usePolling'`);
-    await queryRunner.query(`DELETE FROM "system_config" WHERE key = 'library.watch.interval'`);
-  }
-
-  public async down(): Promise<void> {
-    // noop
-  }
-}
@@ -1,12 +1,12 @@
 {
  "name": "immich-web",
-  "version": "1.3.0",
+  "version": "1.2.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "immich-web",
-      "version": "1.3.0",
+      "version": "1.2.0",
      "license": "GNU Affero General Public License version 3",
      "dependencies": {
        "@immich/sdk": "file:../open-api/typescript-sdk",
@@ -1,6 +1,6 @@
 {
  "name": "immich-web",
-  "version": "1.3.0",
+  "version": "1.2.0",
  "license": "GNU Affero General Public License version 3",
  "scripts": {
    "dev": "vite dev --host 0.0.0.0 --port 3000",
@@ -42,6 +42,28 @@
            subtitle="Watch external libraries for file changes"
            bind:checked={config.library.watch.enabled}
          />
+
+          <SettingSwitch
+            title="Use filesystem polling (EXPERIMENTAL)"
+            disabled={disabled || !config.library.watch.enabled}
+            subtitle="Use polling instead of native filesystem watching. This is required for network shares but can be very resource intensive. Use with care!"
+            bind:checked={config.library.watch.usePolling}
+          />
+
+          <SettingInputField
+            inputType={SettingInputFieldType.NUMBER}
+            required={config.library.watch.usePolling}
+            disabled={disabled || !config.library.watch.usePolling || !config.library.watch.enabled}
+            label="Polling interval"
+            bind:value={config.library.watch.interval}
+            isEdited={config.library.watch.interval !== savedConfig.library.watch.interval}
+          >
+            <svelte:fragment slot="desc">
+              <p class="text-sm dark:text-immich-dark-fg">
+                Interval of filesystem polling, in milliseconds. Lower values will result in higher CPU usage.
+              </p>
+            </svelte:fragment>
+          </SettingInputField>
        </div>

        <div class="ml-4">
@@ -1,45 +0,0 @@
-<script lang="ts">
-  import { autoGrowHeight } from '$lib/utils/autogrow';
-  import { updateAlbumInfo } from '@immich/sdk';
-  import { handleError } from '$lib/utils/handle-error';
-
-  export let id: string;
-  export let description: string;
-  export let isOwned: boolean;
-
-  $: newDescription = description;
-
-  const handleUpdateDescription = async () => {
-    if (newDescription === description) {
-      return;
-    }
-
-    try {
-      await updateAlbumInfo({
-        id,
-        updateAlbumDto: {
-          description: newDescription,
-        },
-      });
-    } catch (error) {
-      handleError(error, 'Error updating album description');
-      return;
-    }
-    description = newDescription;
-  };
-</script>
-
-{#if isOwned}
-  <textarea
-    class="w-full mt-2 resize-none overflow-hidden text-black dark:text-white border-b-2 border-transparent border-gray-500 bg-transparent text-base outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:focus:border-immich-dark-primary hover:border-gray-400"
-    bind:value={newDescription}
-    on:input={(e) => autoGrowHeight(e.currentTarget)}
-    on:focusout={handleUpdateDescription}
-    use:autoGrowHeight
-    placeholder="Add description"
-  />
-{:else if description}
-  <p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">
-    {description}
-  </p>
-{/if}
@@ -1,42 +0,0 @@
-<script lang="ts">
-  import { updateAlbumInfo } from '@immich/sdk';
-  import { handleError } from '$lib/utils/handle-error';
-
-  export let id: string;
-  export let albumName: string;
-  export let isOwned: boolean;
-
-  $: newAlbumName = albumName;
-
-  const handleUpdateName = async () => {
-    if (newAlbumName === albumName) {
-      return;
-    }
-
-    try {
-      await updateAlbumInfo({
-        id,
-        updateAlbumDto: {
-          albumName: newAlbumName,
-        },
-      });
-    } catch (error) {
-      handleError(error, 'Unable to update album name');
-      return;
-    }
-    albumName = newAlbumName;
-  };
-</script>
-
-<input
-  on:keydown={(e) => e.key === 'Enter' && e.currentTarget.blur()}
-  on:blur={handleUpdateName}
-  class="w-[99%] mb-2 border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
-    ? 'hover:border-gray-400'
-    : 'hover:border-transparent'} bg-immich-bg focus:border-b-2 focus:border-immich-primary focus:outline-none dark:bg-immich-dark-bg dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray"
-  type="text"
-  bind:value={newAlbumName}
-  disabled={!isOwned}
-  title="Edit Title"
-  placeholder="Add a title"
-/>
@@ -10,7 +10,7 @@
 </script>

 {#if $notificationList.length > 0}
-  <section transition:fade={{ duration: 250 }} id="notification-list" class="fixed right-5 top-[80px] z-[99999999]">
+  <section transition:fade={{ duration: 250 }} id="notification-list" class="absolute right-5 top-[80px] z-[99999999]">
    {#each $notificationList as notificationInfo (notificationInfo.id)}
      <div animate:flip={{ duration: 250, easing: quintOut }}>
        <NotificationCard {notificationInfo} />
@@ -1,35 +0,0 @@
-<script lang="ts" context="module">
-  export type AccordionState = Set<string>;
-
-  const { get: getAccordionState, set: setAccordionState } = createContext<Writable<AccordionState>>();
-  export { getAccordionState };
-</script>
-
-<script lang="ts">
-  import { writable, type Writable } from 'svelte/store';
-  import { createContext } from '$lib/utils/context';
-  import { page } from '$app/stores';
-  import { handlePromiseError } from '$lib/utils';
-  import { goto } from '$app/navigation';
-
-  const getParamValues = (param: string) => {
-    return new Set(($page.url.searchParams.get(param) || '').split(' ').filter((x) => x !== ''));
-  };
-
-  export let queryParam: string;
-  export let state: Writable<AccordionState> = writable(getParamValues(queryParam));
-  setAccordionState(state);
-
-  $: if (queryParam && $state) {
-    const searchParams = new URLSearchParams($page.url.searchParams);
-    if ($state.size > 0) {
-      searchParams.set(queryParam, [...$state].join(' '));
-    } else {
-      searchParams.delete(queryParam);
-    }
-
-    handlePromiseError(goto(`?${searchParams.toString()}`, { replaceState: true, noScroll: true, keepFocus: true }));
-  }
-</script>
-
-<slot />
@@ -1,28 +1,28 @@
 <script lang="ts">
+  import { page } from '$app/stores';
+  import { QueryParameter } from '$lib/constants';
+  import { hasParamValue, handlePromiseError, updateParamList } from '$lib/utils';
  import { slide } from 'svelte/transition';
-  import { getAccordionState } from './setting-accordion-state.svelte';
-
-  const accordionState = getAccordionState();

  export let title: string;
  export let subtitle = '';
  export let key: string;
-  export let isOpen = $accordionState.has(key);
+  export let isOpen = false;

-  $: setIsOpen(isOpen);
+  const syncFromUrl = () => (isOpen = hasParamValue(QueryParameter.IS_OPEN, key));
+  const syncToUrl = (isOpen: boolean) => updateParamList({ param: QueryParameter.IS_OPEN, value: key, add: isOpen });

-  const setIsOpen = (isOpen: boolean) => {
-    if (isOpen) {
-      $accordionState = $accordionState.add(key);
-    } else {
-      $accordionState.delete(key);
-      $accordionState = $accordionState;
-    }
+  isOpen ? handlePromiseError(syncToUrl(true)) : syncFromUrl();
+  $: $page.url && syncFromUrl();
+
+  const toggle = async () => {
+    isOpen = !isOpen;
+    await syncToUrl(isOpen);
  };
 </script>

 <div class="border-b-[1px] border-gray-200 py-4 dark:border-gray-700">
-  <button on:click={() => (isOpen = !isOpen)} class="flex w-full place-items-center justify-between text-left">
+  <button on:click={toggle} class="flex w-full place-items-center justify-between text-left">
    <div>
      <h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
        {title}
@@ -11,7 +11,7 @@
  export let isEdited = false;

  const dispatch = createEventDispatcher<{ toggle: boolean }>();
-  const onToggle = (ischecked: boolean) => dispatch('toggle', ischecked);
+  const onToggle = (event: Event) => dispatch('toggle', (event.target as HTMLInputElement).checked);
 </script>

 <div class="flex place-items-center justify-between">
@@ -34,5 +34,5 @@
    <slot />
  </div>

-  <Slider bind:checked {disabled} on:toggle={({ detail }) => onToggle(detail)} />
+  <Slider bind:checked {disabled} on:click={onToggle} />
 </div>
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { browser } from '$app/environment';
  import { page } from '$app/stores';
  import { OpenSettingQueryParameterValue, QueryParameter } from '$lib/constants';
  import { featureFlags } from '$lib/stores/server-config.store';
@@ -16,56 +17,60 @@
  import TrashSettings from './trash-settings.svelte';
  import UserAPIKeyList from './user-api-key-list.svelte';
  import UserProfileSettings from './user-profile-settings.svelte';
-  import SettingAccordionState from '../shared-components/settings/setting-accordion-state.svelte';

  export let keys: ApiKeyResponseDto[] = [];
  export let devices: AuthDeviceResponseDto[] = [];

-  let oauthOpen =
-    oauth.isCallback(window.location) ||
-    $page.url.searchParams.get(QueryParameter.OPEN_SETTING) === OpenSettingQueryParameterValue.OAUTH;
+  let oauthOpen = false;
+  if (browser) {
+    oauthOpen = oauth.isCallback(window.location);
+  }
 </script>

-<SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
-  <SettingAccordion key="appearance" title="Appearance" subtitle="Manage the app appearance">
-    <AppearanceSettings />
-  </SettingAccordion>
+<SettingAccordion key="appearance" title="Appearance" subtitle="Manage the app appearance">
+  <AppearanceSettings />
+</SettingAccordion>

-  <SettingAccordion key="account" title="Account" subtitle="Manage your account">
-    <UserProfileSettings />
-  </SettingAccordion>
+<SettingAccordion key="account" title="Account" subtitle="Manage your account">
+  <UserProfileSettings />
+</SettingAccordion>

-  <SettingAccordion key="api-keys" title="API Keys" subtitle="Manage your API keys">
-    <UserAPIKeyList bind:keys />
-  </SettingAccordion>
+<SettingAccordion key="api-keys" title="API Keys" subtitle="Manage your API keys">
+  <UserAPIKeyList bind:keys />
+</SettingAccordion>

-  <SettingAccordion key="authorized-devices" title="Authorized Devices" subtitle="Manage your logged-in devices">
-    <DeviceList bind:devices />
-  </SettingAccordion>
+<SettingAccordion key="authorized-devices" title="Authorized Devices" subtitle="Manage your logged-in devices">
+  <DeviceList bind:devices />
+</SettingAccordion>

-  <SettingAccordion key="libraries" title="Libraries" subtitle="Manage your asset libraries">
-    <LibraryList />
-  </SettingAccordion>
+<SettingAccordion key="libraries" title="Libraries" subtitle="Manage your asset libraries">
+  <LibraryList />
+</SettingAccordion>

-  <SettingAccordion key="memories" title="Memories" subtitle="Manage what you see in your memories.">
-    <MemoriesSettings user={$user} />
-  </SettingAccordion>
+<SettingAccordion key="memories" title="Memories" subtitle="Manage what you see in your memories.">
+  <MemoriesSettings user={$user} />
+</SettingAccordion>

-  {#if $featureFlags.loaded && $featureFlags.oauth}
-    <SettingAccordion key="oauth" title="OAuth" subtitle="Manage your OAuth connection" isOpen={oauthOpen || undefined}>
-      <OAuthSettings user={$user} />
-    </SettingAccordion>
-  {/if}
-
-  <SettingAccordion key="password" title="Password" subtitle="Change your password">
-    <ChangePasswordSettings />
+{#if $featureFlags.loaded && $featureFlags.oauth}
+  <SettingAccordion
+    key="oauth"
+    title="OAuth"
+    subtitle="Manage your OAuth connection"
+    isOpen={oauthOpen ||
+      $page.url.searchParams.get(QueryParameter.OPEN_SETTING) === OpenSettingQueryParameterValue.OAUTH}
+  >
+    <OAuthSettings user={$user} />
  </SettingAccordion>
+{/if}

-  <SettingAccordion key="sharing" title="Sharing" subtitle="Manage sharing with partners">
-    <PartnerSettings user={$user} />
-  </SettingAccordion>
+<SettingAccordion key="password" title="Password" subtitle="Change your password">
+  <ChangePasswordSettings />
+</SettingAccordion>

-  <SettingAccordion key="trash" title="Trash" subtitle="Manage trash settings">
-    <TrashSettings />
-  </SettingAccordion>
-</SettingAccordionState>
+<SettingAccordion key="sharing" title="Sharing" subtitle="Manage sharing with partners">
+  <PartnerSettings user={$user} />
+</SettingAccordion>
+
+<SettingAccordion key="trash" title="Trash" subtitle="Manage trash settings">
+  <TrashSettings />
+</SettingAccordion>
@@ -1,3 +1,5 @@
+import { goto } from '$app/navigation';
+import { page } from '$app/stores';
 import { NotificationType, notificationController } from '$lib/components/shared-components/notification/notification';
 import { locales } from '$lib/constants';
 import { handleError } from '$lib/utils/handle-error';
@@ -12,6 +14,37 @@ import {
  unlinkOAuthAccount,
  type UserResponseDto,
 } from '@immich/sdk';
+import { get } from 'svelte/store';
+
+interface UpdateParamAction {
+  param: string;
+  value: string;
+  add: boolean;
+}
+
+const getParamValues = (param: string) =>
+  new Set((get(page).url.searchParams.get(param) || '').split(' ').filter((x) => x !== ''));
+
+export const hasParamValue = (param: string, value: string) => getParamValues(param).has(value);
+
+export const updateParamList = async ({ param, value, add }: UpdateParamAction) => {
+  const values = getParamValues(param);
+
+  if (add) {
+    values.add(value);
+  } else {
+    values.delete(value);
+  }
+
+  const searchParams = new URLSearchParams(get(page).url.searchParams);
+  searchParams.set(param, [...values.values()].join(' '));
+
+  if (values.size === 0) {
+    searchParams.delete(param);
+  }
+
+  await goto(`?${searchParams.toString()}`, { replaceState: true, noScroll: true, keepFocus: true });
+};

 export const getJobName = (jobName: JobName) => {
  const names: Record<JobName, string> = {
@@ -41,6 +41,7 @@
  import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
  import { user } from '$lib/stores/user.store';
  import { downloadArchive } from '$lib/utils/asset-utils';
+  import { autoGrowHeight } from '$lib/utils/autogrow';
  import { clickOutside } from '$lib/utils/click-outside';
  import { getContextMenuPosition } from '$lib/utils/context-menu';
  import { openFileUploadDialog } from '$lib/utils/file-uploader';
@@ -70,19 +71,17 @@
    mdiPlus,
    mdiShareVariantOutline,
  } from '@mdi/js';
+  import { onMount } from 'svelte';
  import { fly } from 'svelte/transition';
  import type { PageData } from './$types';
-  import AlbumTitle from '$lib/components/album-page/album-title.svelte';
-  import AlbumDescription from '$lib/components/album-page/album-description.svelte';
-  import { handlePromiseError } from '$lib/utils';

  export let data: PageData;

  let { isViewing: showAssetViewer, setAssetId } = assetViewingStore;
  let { slideshowState, slideshowShuffle } = slideshowStore;

-  $: album = data.album;
-  $: albumId = album.id;
+  let album = data.album;
+  let description = album.description;

  $: {
    if (!album.isActivityEnabled && $numberOfComments === 0) {
@@ -104,7 +103,9 @@

  let backUrl: string = AppRoute.ALBUMS;
  let viewMode = ViewMode.VIEW;
+  let titleInput: HTMLInputElement;
  let isCreatingSharedAlbum = false;
+  let currentAlbumName = album.albumName;
  let contextMenuPosition: { x: number; y: number } = { x: 0, y: 0 };
  let isShowActivity = false;
  let isLiked: ActivityResponseDto | null = null;
@@ -113,11 +114,11 @@
  let assetGridWidth: number;
  let textArea: HTMLTextAreaElement;

-  $: assetStore = new AssetStore({ albumId });
+  const assetStore = new AssetStore({ albumId: album.id });
  const assetInteractionStore = createAssetInteractionStore();
  const { isMultiSelectState, selectedAssets } = assetInteractionStore;

-  $: timelineStore = new AssetStore({ isArchived: false }, albumId);
+  const timelineStore = new AssetStore({ isArchived: false }, album.id);
  const timelineInteractionStore = createAssetInteractionStore();
  const { selectedAssets: timelineSelected } = timelineInteractionStore;

@@ -131,7 +132,7 @@
  $: showActivityStatus =
    album.sharedUsers.length > 0 && !$showAssetViewer && (album.isActivityEnabled || $numberOfComments > 0);

-  afterNavigate(({ from }) => {
+  $: afterNavigate(({ from }) => {
    assetViewingStore.showAssetViewer(false);

    let url: string | undefined = from?.url?.pathname;
@@ -217,10 +218,11 @@
    isShowActivity = !isShowActivity;
  };

-  $: if (album.sharedUsers.length > 0) {
-    handlePromiseError(getFavorite());
-    handlePromiseError(getNumberOfComments());
-  }
+  onMount(async () => {
+    if (album.sharedUsers.length > 0) {
+      await Promise.all([getFavorite(), getNumberOfComments()]);
+    }
+  });

  const handleKeypress = (event: KeyboardEvent) => {
    if (event.target !== textArea) {
@@ -414,6 +416,42 @@
      handleError(error, 'Unable to update album cover');
    }
  };
+
+  const handleUpdateName = async () => {
+    if (currentAlbumName === album.albumName) {
+      return;
+    }
+
+    try {
+      await updateAlbumInfo({
+        id: album.id,
+        updateAlbumDto: {
+          albumName: album.albumName,
+        },
+      });
+      currentAlbumName = album.albumName;
+    } catch (error) {
+      handleError(error, 'Unable to update album name');
+    }
+  };
+
+  const handleUpdateDescription = async () => {
+    if (album.description === description) {
+      return;
+    }
+    try {
+      await updateAlbumInfo({
+        id: album.id,
+        updateAlbumDto: {
+          description,
+        },
+      });
+
+      album.description = description;
+    } catch (error) {
+      handleError(error, 'Error updating album description');
+    }
+  };
 </script>

 <svelte:window on:keydown={handleKeypress} />
@@ -538,115 +576,134 @@
      class="relative h-screen overflow-hidden bg-immich-bg px-6 pt-[var(--navbar-height)] dark:bg-immich-dark-bg"
      style={`width:${assetGridWidth}px`}
    >
-      <!-- Use key because AssetGrid can't deal with changing stores -->
-      {#key albumId}
-        {#if viewMode === ViewMode.SELECT_ASSETS}
-          <AssetGrid
-            assetStore={timelineStore}
-            assetInteractionStore={timelineInteractionStore}
-            isSelectionMode={true}
-          />
-        {:else}
-          <AssetGrid
-            {album}
-            {assetStore}
-            {assetInteractionStore}
-            isShared={album.sharedUsers.length > 0}
-            isSelectionMode={viewMode === ViewMode.SELECT_THUMBNAIL}
-            singleSelect={viewMode === ViewMode.SELECT_THUMBNAIL}
-            showArchiveIcon
-            on:select={({ detail: asset }) => handleUpdateThumbnail(asset.id)}
-            on:escape={handleEscape}
-          >
-            {#if viewMode !== ViewMode.SELECT_THUMBNAIL}
-              <!-- ALBUM TITLE -->
-              <section class="pt-24">
-                <AlbumTitle id={album.id} albumName={album.albumName} {isOwned} />
+      {#if viewMode === ViewMode.SELECT_ASSETS}
+        <AssetGrid assetStore={timelineStore} assetInteractionStore={timelineInteractionStore} isSelectionMode={true} />
+      {:else}
+        <AssetGrid
+          {album}
+          {assetStore}
+          {assetInteractionStore}
+          isShared={album.sharedUsers.length > 0}
+          isSelectionMode={viewMode === ViewMode.SELECT_THUMBNAIL}
+          singleSelect={viewMode === ViewMode.SELECT_THUMBNAIL}
+          showArchiveIcon
+          on:select={({ detail: asset }) => handleUpdateThumbnail(asset.id)}
+          on:escape={handleEscape}
+        >
+          {#if viewMode !== ViewMode.SELECT_THUMBNAIL}
+            <!-- ALBUM TITLE -->
+            <section class="pt-24">
+              <input
+                on:keydown={(e) => e.key === 'Enter' && titleInput.blur()}
+                on:blur={handleUpdateName}
+                class="w-[99%] mb-2 border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
+                  ? 'hover:border-gray-400'
+                  : 'hover:border-transparent'} bg-immich-bg focus:border-b-2 focus:border-immich-primary focus:outline-none dark:bg-immich-dark-bg dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray"
+                type="text"
+                bind:value={album.albumName}
+                disabled={!isOwned}
+                bind:this={titleInput}
+                title="Edit Title"
+                placeholder="Add a title"
+              />

-                <!-- ALBUM SUMMARY -->
-                {#if album.assetCount > 0}
-                  <span class="my-2 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
-                    <p class="">{getDateRange()}</p>
-                    <p>·</p>
-                    <p>{album.assetCount} items</p>
-                  </span>
-                {/if}
+              <!-- ALBUM SUMMARY -->
+              {#if album.assetCount > 0}
+                <span class="my-2 flex gap-2 text-sm font-medium text-gray-500" data-testid="album-details">
+                  <p class="">{getDateRange()}</p>
+                  <p>·</p>
+                  <p>{album.assetCount} items</p>
+                </span>
+              {/if}

-                <!-- ALBUM SHARING -->
-                {#if album.sharedUsers.length > 0 || (album.hasSharedLink && isOwned)}
-                  <div class="my-3 flex gap-x-1">
-                    <!-- link -->
-                    {#if album.hasSharedLink && isOwned}
-                      <CircleIconButton
-                        backgroundColor="#d3d3d3"
-                        forceDark
-                        size="20"
-                        icon={mdiLink}
-                        on:click={() => (viewMode = ViewMode.LINK_SHARING)}
-                      />
-                    {/if}
+              <!-- ALBUM SHARING -->
+              {#if album.sharedUsers.length > 0 || (album.hasSharedLink && isOwned)}
+                <div class="my-3 flex gap-x-1">
+                  <!-- link -->
+                  {#if album.hasSharedLink && isOwned}
+                    <CircleIconButton
+                      backgroundColor="#d3d3d3"
+                      forceDark
+                      size="20"
+                      icon={mdiLink}
+                      on:click={() => (viewMode = ViewMode.LINK_SHARING)}
+                    />
+                  {/if}

-                    <!-- owner -->
-                    <button on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
-                      <UserAvatar user={album.owner} size="md" />
-                    </button>
-
-                    <!-- users -->
-                    {#each album.sharedUsers as user (user.id)}
-                      <button on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
-                        <UserAvatar {user} size="md" />
-                      </button>
-                    {/each}
-
-                    {#if isOwned}
-                      <CircleIconButton
-                        backgroundColor="#d3d3d3"
-                        forceDark
-                        size="20"
-                        icon={mdiPlus}
-                        on:click={() => (viewMode = ViewMode.SELECT_USERS)}
-                        title="Add more users"
-                      />
-                    {/if}
-                  </div>
-                {/if}
-                <!-- ALBUM DESCRIPTION -->
-                <AlbumDescription id={album.id} description={album.description} {isOwned} />
-              </section>
-            {/if}
-
-            {#if album.assetCount === 0}
-              <section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
-                <div class="w-[300px]">
-                  <p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
-                  <button
-                    on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
-                    class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
-                  >
-                    <span class="text-text-immich-primary dark:text-immich-dark-primary"
-                      ><Icon path={mdiPlus} size="24" />
-                    </span>
-                    <span class="text-lg">Select photos</span>
+                  <!-- owner -->
+                  <button on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
+                    <UserAvatar user={album.owner} size="md" />
                  </button>
-                </div>
-              </section>
-            {/if}
-          </AssetGrid>
-        {/if}

-        {#if showActivityStatus}
-          <div class="absolute z-[2] bottom-0 right-0 mb-6 mr-6 justify-self-end">
-            <ActivityStatus
-              disabled={!album.isActivityEnabled}
-              {isLiked}
-              numberOfComments={$numberOfComments}
-              {isShowActivity}
-              on:favorite={handleFavorite}
-              on:openActivityTab={handleOpenAndCloseActivityTab}
-            />
-          </div>
-        {/if}
-      {/key}
+                  <!-- users -->
+                  {#each album.sharedUsers as user (user.id)}
+                    <button on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
+                      <UserAvatar {user} size="md" />
+                    </button>
+                  {/each}
+
+                  {#if isOwned}
+                    <CircleIconButton
+                      backgroundColor="#d3d3d3"
+                      forceDark
+                      size="20"
+                      icon={mdiPlus}
+                      on:click={() => (viewMode = ViewMode.SELECT_USERS)}
+                      title="Add more users"
+                    />
+                  {/if}
+                </div>
+              {/if}
+              <!-- ALBUM DESCRIPTION -->
+              {#if isOwned}
+                <textarea
+                  class="w-full mt-2 resize-none overflow-hidden text-black dark:text-white border-b-2 border-transparent border-gray-500 bg-transparent text-base outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:focus:border-immich-dark-primary hover:border-gray-400"
+                  bind:this={textArea}
+                  bind:value={description}
+                  on:input={() => autoGrowHeight(textArea)}
+                  on:focusout={handleUpdateDescription}
+                  use:autoGrowHeight
+                  placeholder="Add description"
+                />
+              {:else if description}
+                <p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">
+                  {description}
+                </p>
+              {/if}
+            </section>
+          {/if}
+
+          {#if album.assetCount === 0}
+            <section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
+              <div class="w-[300px]">
+                <p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
+                <button
+                  on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
+                  class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
+                >
+                  <span class="text-text-immich-primary dark:text-immich-dark-primary"
+                    ><Icon path={mdiPlus} size="24" />
+                  </span>
+                  <span class="text-lg">Select photos</span>
+                </button>
+              </div>
+            </section>
+          {/if}
+        </AssetGrid>
+      {/if}
+
+      {#if showActivityStatus}
+        <div class="absolute z-[2] bottom-0 right-0 mb-6 mr-6 justify-self-end">
+          <ActivityStatus
+            disabled={!album.isActivityEnabled}
+            {isLiked}
+            numberOfComments={$numberOfComments}
+            {isShowActivity}
+            on:favorite={handleFavorite}
+            on:openActivityTab={handleOpenAndCloseActivityTab}
+          />
+        </div>
+      {/if}
    </main>
  </div>
  {#if album.sharedUsers.length > 0 && album && isShowActivity && $user && !$showAssetViewer}
@@ -24,8 +24,6 @@
  import { downloadBlob } from '$lib/utils/asset-utils';
  import { mdiAlert, mdiContentCopy, mdiDownload } from '@mdi/js';
  import type { PageData } from './$types';
-  import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
-  import { QueryParameter } from '$lib/constants';

  export let data: PageData;

@@ -178,21 +176,19 @@
    <AdminSettings bind:config let:handleReset let:handleSave let:savedConfig let:defaultConfig>
      <section id="setting-content" class="flex place-content-center sm:mx-4">
        <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
-          <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
-            {#each settings as { item, title, subtitle, key }}
-              <SettingAccordion {title} {subtitle} {key}>
-                <svelte:component
-                  this={item}
-                  on:save={({ detail }) => handleSave(detail)}
-                  on:reset={({ detail }) => handleReset(detail)}
-                  disabled={$featureFlags.configFile}
-                  {defaultConfig}
-                  {config}
-                  {savedConfig}
-                />
-              </SettingAccordion>
-            {/each}
-          </SettingAccordionState>
+          {#each settings as { item, title, subtitle, key }}
+            <SettingAccordion {title} {subtitle} {key}>
+              <svelte:component
+                this={item}
+                on:save={({ detail }) => handleSave(detail)}
+                on:reset={({ detail }) => handleReset(detail)}
+                disabled={$featureFlags.configFile}
+                {defaultConfig}
+                {config}
+                {savedConfig}
+              />
+            </SettingAccordion>
+          {/each}
        </section>
      </section>
    </AdminSettings>
Author	SHA1	Message	Date
Marty Fuhry	694de3c9c0	wip first working version	2024-02-28 16:12:36 -05:00
Marty Fuhry	cb3bccf169	wip uploading format	2024-02-28 13:53:00 -05:00