use Date

We would like to move away from the concept of finding and removing pending
jobs. The only place this is used is for album update notifications, and this
is done so that users who initially uploaded assets to an album will also
receive a notification if someone else then adds assets to the same album. This
can also be achieved with a job for each recipient. Multiple jobs also has the
advantage that it will scale better for albums with many users, it's possible
to send notifications concurrently, retries are possible without sending
duplicate notifications, and it's clear what recipient a job failed for.

api.mustache

@@ -0,0 +1,194 @@
+{{>header}}
+{{>part_of}}
+{{#operations}}
+
+class {{{classname}}} {
+  {{{classname}}}([ApiClient? apiClient]) : apiClient = apiClient ?? defaultApiClient;
+
+  final ApiClient apiClient;
+  {{#operation}}
+
+  {{#summary}}
+  /// {{{.}}}
+  {{/summary}}
+  {{#notes}}
+    {{#summary}}
+  ///
+    {{/summary}}
+  /// {{{notes}}}
+  ///
+  /// Note: This method returns the HTTP [Response].
+  {{/notes}}
+  {{^notes}}
+    {{#summary}}
+  ///
+  /// Note: This method returns the HTTP [Response].
+    {{/summary}}
+    {{^summary}}
+  /// Performs an HTTP '{{{httpMethod}}} {{{path}}}' operation and returns the [Response].
+    {{/summary}}
+  {{/notes}}
+  {{#hasParams}}
+    {{#summary}}
+  ///
+    {{/summary}}
+    {{^summary}}
+      {{#notes}}
+  ///
+      {{/notes}}
+    {{/summary}}
+  /// Parameters:
+  ///
+  {{/hasParams}}
+  {{#allParams}}
+  /// * [{{{dataType}}}] {{{paramName}}}{{#required}} (required){{/required}}{{#optional}} (optional){{/optional}}:
+    {{#description}}
+  ///   {{{.}}}
+    {{/description}}
+    {{^-last}}
+  ///
+    {{/-last}}
+  {{/allParams}}
+  Future<Response> {{{nickname}}}WithHttpInfo({{#allParams}}{{#required}}{{{dataType}}} {{{paramName}}},{{^-last}} {{/-last}}{{/required}}{{/allParams}}{{#hasOptionalParams}}{ {{#allParams}}{{^required}}{{{dataType}}}? {{{paramName}}},{{^-last}} {{/-last}}{{/required}}{{/allParams}} }{{/hasOptionalParams}}) async {
+    // ignore: prefer_const_declarations
+    final path = r'{{{path}}}'{{#pathParams}}
+      .replaceAll({{=<% %>=}}'{<% baseName %>}'<%={{ }}=%>, {{{paramName}}}{{^isString}}.toString(){{/isString}}){{/pathParams}};
+
+    // ignore: prefer_final_locals
+    Object? postBody{{#bodyParam}} = {{{paramName}}}{{/bodyParam}};
+
+    final queryParams = <QueryParam>[];
+    final headerParams = <String, String>{};
+    final formParams = <String, String>{};
+    {{#hasQueryParams}}
+
+      {{#queryParams}}
+        {{^required}}
+    if ({{{paramName}}} != null) {
+          {{/required}}
+      queryParams.addAll(_queryParams('{{{collectionFormat}}}', '{{{baseName}}}', {{{paramName}}}));
+          {{^required}}
+    }
+        {{/required}}
+      {{/queryParams}}
+    {{/hasQueryParams}}
+    {{#hasHeaderParams}}
+
+      {{#headerParams}}
+        {{#required}}
+    headerParams[r'{{{baseName}}}'] = parameterToString({{{paramName}}});
+        {{/required}}
+        {{^required}}
+    if ({{{paramName}}} != null) {
+      headerParams[r'{{{baseName}}}'] = parameterToString({{{paramName}}});
+    }
+        {{/required}}
+      {{/headerParams}}
+    {{/hasHeaderParams}}
+
+    const contentTypes = <String>[{{#prioritizedContentTypes}}'{{{mediaType}}}'{{^-last}}, {{/-last}}{{/prioritizedContentTypes}}];
+
+    {{#isMultipart}}
+    bool hasFields = false;
+    final mp = MultipartRequest('{{{httpMethod}}}', Uri.parse(path));
+    {{#formParams}}
+    {{^isFile}}
+    if ({{{paramName}}} != null) {
+      hasFields = true;
+      mp.fields[r'{{{baseName}}}'] = parameterToString({{{paramName}}});
+    }
+    {{/isFile}}
+    {{#isFile}}
+    if ({{{paramName}}} != null) {
+      hasFields = true;
+      mp.fields[r'{{{baseName}}}'] = {{{paramName}}}.field;
+      mp.files.add({{{paramName}}});
+    }
+    {{/isFile}}
+    {{/formParams}}
+    if (hasFields) {
+      postBody = mp;
+    }
+    {{/isMultipart}}
+    {{^isMultipart}}
+    {{#formParams}}
+    {{^isFile}}
+    if ({{{paramName}}} != null) {
+      formParams[r'{{{baseName}}}'] = parameterToString({{{paramName}}});
+    }
+    {{/isFile}}
+    {{/formParams}}
+    {{/isMultipart}}
+
+    return apiClient.invokeAPI(
+      path,
+      '{{{httpMethod}}}',
+      queryParams,
+      postBody,
+      headerParams,
+      formParams,
+      contentTypes.isEmpty ? null : contentTypes.first,
+    );
+  }
+
+  {{#summary}}
+  /// {{{.}}}
+  {{/summary}}
+  {{#notes}}
+  {{#summary}}
+  ///
+  {{/summary}}
+  /// {{{notes}}}
+  {{/notes}}
+  {{#hasParams}}
+    {{#summary}}
+  ///
+    {{/summary}}
+    {{^summary}}
+      {{#notes}}
+  ///
+      {{/notes}}
+    {{/summary}}
+  /// Parameters:
+  ///
+  {{/hasParams}}
+  {{#allParams}}
+  /// * [{{{dataType}}}] {{{paramName}}}{{#required}} (required){{/required}}{{#optional}} (optional){{/optional}}:
+    {{#description}}
+  ///   {{{.}}}
+    {{/description}}
+    {{^-last}}
+  ///
+    {{/-last}}
+  {{/allParams}}
+  Future<{{#returnType}}{{{.}}}?{{/returnType}}{{^returnType}}void{{/returnType}}> {{{nickname}}}({{#allParams}}{{#required}}{{{dataType}}} {{{paramName}}},{{^-last}} {{/-last}}{{/required}}{{/allParams}}{{#hasOptionalParams}}{ {{#allParams}}{{^required}}{{{dataType}}}? {{{paramName}}},{{^-last}} {{/-last}}{{/required}}{{/allParams}} }{{/hasOptionalParams}}) async {
+    final response = await {{{nickname}}}WithHttpInfo({{#allParams}}{{#required}}{{{paramName}}},{{^-last}} {{/-last}}{{/required}}{{/allParams}}{{#hasOptionalParams}} {{#allParams}}{{^required}}{{{paramName}}}: {{{paramName}}},{{^-last}} {{/-last}}{{/required}}{{/allParams}} {{/hasOptionalParams}});
+    if (response.statusCode >= HttpStatus.badRequest) {
+      throw ApiException(response.statusCode, await _decodeBodyBytes(response));
+    }
+    {{#returnType}}
+    // When a remote server returns no body with a status of 204, we shall not decode it.
+    // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
+    // FormatException when trying to decode an empty string.
+    if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
+    {{#native_serialization}}
+    {{#isArray}}
+      final responseBody = await _decodeBodyBytes(response);
+      return (await apiClient.deserializeAsync(responseBody, '{{{returnType}}}') as List)
+        .cast<{{{returnBaseType}}}>()
+        .{{#uniqueItems}}toSet(){{/uniqueItems}}{{^uniqueItems}}toList(growable: false){{/uniqueItems}};
+    {{/isArray}}
+    {{^isArray}}
+    {{#isMap}}
+      return {{{returnType}}}.from(await apiClient.deserializeAsync(await _decodeBodyBytes(response), '{{{returnType}}}'),);
+    {{/isMap}}
+    {{^isMap}}
+      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), '{{{returnType}}}',) as {{{returnType}}};
+    {{/isMap}}{{/isArray}}{{/native_serialization}}
+    }
+    return null;
+    {{/returnType}}
+  }
+  {{/operation}}
+}
+{{/operations}}

e2e/src/api/specs/timeline.e2e-spec.ts

@@ -1,4 +1,4 @@
-import { AssetMediaResponseDto, LoginResponseDto, SharedLinkType, TimeBucketSize } from '@immich/sdk';
+import { AssetMediaResponseDto, LoginResponseDto, SharedLinkType } from '@immich/sdk';
 import { DateTime } from 'luxon';
 import { createUserDto } from 'src/fixtures';
 import { errorDto } from 'src/responses';
@@ -52,7 +52,7 @@ describe('/timeline', () => {
 
   describe('GET /timeline/buckets', () => {
     it('should require authentication', async () => {
-      const { status, body } = await request(app).get('/timeline/buckets').query({ size: TimeBucketSize.Month });
+      const { status, body } = await request(app).get('/timeline/buckets').query({});
       expect(status).toBe(401);
       expect(body).toEqual(errorDto.unauthorized);
     });
@@ -61,7 +61,7 @@ describe('/timeline', () => {
       const { status, body } = await request(app)
         .get('/timeline/buckets')
         .set('Authorization', `Bearer ${timeBucketUser.accessToken}`)
-        .query({ size: TimeBucketSize.Month });
+        .query({});
 
       expect(status).toBe(200);
       expect(body).toEqual(
@@ -78,33 +78,17 @@ describe('/timeline', () => {
         assetIds: userAssets.map(({ id }) => id),
       });
 
-      const { status, body } = await request(app)
+      const { status, body } = await request(app).get('/timeline/buckets').query({ key: sharedLink.key });
-        .get('/timeline/buckets')
-        .query({ key: sharedLink.key, size: TimeBucketSize.Month });
 
       expect(status).toBe(400);
       expect(body).toEqual(errorDto.noPermission);
     });
 
-    it('should get time buckets by day', async () => {
-      const { status, body } = await request(app)
-        .get('/timeline/buckets')
-        .set('Authorization', `Bearer ${timeBucketUser.accessToken}`)
-        .query({ size: TimeBucketSize.Day });
-
-      expect(status).toBe(200);
-      expect(body).toEqual([
-        { count: 2, timeBucket: '1970-02-11T00:00:00.000Z' },
-        { count: 1, timeBucket: '1970-02-10T00:00:00.000Z' },
-        { count: 1, timeBucket: '1970-01-01T00:00:00.000Z' },
-      ]);
-    });
-
     it('should return error if time bucket is requested with partners asset and archived', async () => {
       const req1 = await request(app)
         .get('/timeline/buckets')
         .set('Authorization', `Bearer ${timeBucketUser.accessToken}`)
-        .query({ size: TimeBucketSize.Month, withPartners: true, isArchived: true });
+        .query({ withPartners: true, isArchived: true });
 
       expect(req1.status).toBe(400);
       expect(req1.body).toEqual(errorDto.badRequest());
@@ -112,7 +96,7 @@ describe('/timeline', () => {
       const req2 = await request(app)
         .get('/timeline/buckets')
         .set('Authorization', `Bearer ${user.accessToken}`)
-        .query({ size: TimeBucketSize.Month, withPartners: true, isArchived: undefined });
+        .query({ withPartners: true, isArchived: undefined });
 
       expect(req2.status).toBe(400);
       expect(req2.body).toEqual(errorDto.badRequest());
@@ -122,7 +106,7 @@ describe('/timeline', () => {
       const req1 = await request(app)
         .get('/timeline/buckets')
         .set('Authorization', `Bearer ${timeBucketUser.accessToken}`)
-        .query({ size: TimeBucketSize.Month, withPartners: true, isFavorite: true });
+        .query({ withPartners: true, isFavorite: true });
 
       expect(req1.status).toBe(400);
       expect(req1.body).toEqual(errorDto.badRequest());
@@ -130,7 +114,7 @@ describe('/timeline', () => {
       const req2 = await request(app)
         .get('/timeline/buckets')
         .set('Authorization', `Bearer ${timeBucketUser.accessToken}`)
-        .query({ size: TimeBucketSize.Month, withPartners: true, isFavorite: false });
+        .query({ withPartners: true, isFavorite: false });
 
       expect(req2.status).toBe(400);
       expect(req2.body).toEqual(errorDto.badRequest());
@@ -140,7 +124,7 @@ describe('/timeline', () => {
       const req = await request(app)
         .get('/timeline/buckets')
         .set('Authorization', `Bearer ${user.accessToken}`)
-        .query({ size: TimeBucketSize.Month, withPartners: true, isTrashed: true });
+        .query({ withPartners: true, isTrashed: true });
 
       expect(req.status).toBe(400);
       expect(req.body).toEqual(errorDto.badRequest());
@@ -150,7 +134,6 @@ describe('/timeline', () => {
   describe('GET /timeline/bucket', () => {
     it('should require authentication', async () => {
       const { status, body } = await request(app).get('/timeline/bucket').query({
-        size: TimeBucketSize.Month,
         timeBucket: '1900-01-01',
       });
 
@@ -161,11 +144,27 @@ describe('/timeline', () => {
     it('should handle 5 digit years', async () => {
       const { status, body } = await request(app)
         .get('/timeline/bucket')
-        .query({ size: TimeBucketSize.Month, timeBucket: '012345-01-01' })
+        .query({ timeBucket: '012345-01-01' })
         .set('Authorization', `Bearer ${timeBucketUser.accessToken}`);
 
       expect(status).toBe(200);
-      expect(body).toEqual([]);
+      expect(body).toEqual({
+        city: [],
+        country: [],
+        duration: [],
+        id: [],
+        isArchived: [],
+        isFavorite: [],
+        isImage: [],
+        isTrashed: [],
+        livePhotoVideoId: [],
+        localDateTime: [],
+        ownerId: [],
+        projectionType: [],
+        ratio: [],
+        status: [],
+        thumbhash: [],
+      });
     });
 
     // TODO enable date string validation while still accepting 5 digit years
@@ -173,7 +172,7 @@ describe('/timeline', () => {
     //   const { status, body } = await request(app)
     //     .get('/timeline/bucket')
     //     .set('Authorization', `Bearer ${user.accessToken}`)
-    //     .query({ size: TimeBucketSize.Month, timeBucket: 'foo' });
+    //     .query({  timeBucket: 'foo' });
 
     //   expect(status).toBe(400);
     //   expect(body).toEqual(errorDto.badRequest);
@@ -183,10 +182,26 @@ describe('/timeline', () => {
       const { status, body } = await request(app)
         .get('/timeline/bucket')
         .set('Authorization', `Bearer ${timeBucketUser.accessToken}`)
-        .query({ size: TimeBucketSize.Month, timeBucket: '1970-02-10' });
+        .query({ timeBucket: '1970-02-10' });
 
       expect(status).toBe(200);
-      expect(body).toEqual([]);
+      expect(body).toEqual({
+        city: [],
+        country: [],
+        duration: [],
+        id: [],
+        isArchived: [],
+        isFavorite: [],
+        isImage: [],
+        isTrashed: [],
+        livePhotoVideoId: [],
+        localDateTime: [],
+        ownerId: [],
+        projectionType: [],
+        ratio: [],
+        status: [],
+        thumbhash: [],
+      });
     });
   });
 });

mobile/openapi/README.md

@@ -477,8 +477,8 @@ Class | Method | HTTP request | Description
  - [TemplateDto](doc//TemplateDto.md)
  - [TemplateResponseDto](doc//TemplateResponseDto.md)
  - [TestEmailResponseDto](doc//TestEmailResponseDto.md)
- - [TimeBucketResponseDto](doc//TimeBucketResponseDto.md)
+ - [TimeBucketAssetResponseDto](doc//TimeBucketAssetResponseDto.md)
- - [TimeBucketSize](doc//TimeBucketSize.md)
+ - [TimeBucketsResponseDto](doc//TimeBucketsResponseDto.md)
  - [ToneMapping](doc//ToneMapping.md)
  - [TranscodeHWAccel](doc//TranscodeHWAccel.md)
  - [TranscodePolicy](doc//TranscodePolicy.md)

mobile/openapi/lib/api.dart

@@ -281,8 +281,8 @@ part 'model/tags_update.dart';
 part 'model/template_dto.dart';
 part 'model/template_response_dto.dart';
 part 'model/test_email_response_dto.dart';
-part 'model/time_bucket_response_dto.dart';
+part 'model/time_bucket_asset_response_dto.dart';
-part 'model/time_bucket_size.dart';
+part 'model/time_buckets_response_dto.dart';
 part 'model/tone_mapping.dart';
 part 'model/transcode_hw_accel.dart';
 part 'model/transcode_policy.dart';

mobile/openapi/lib/api/timeline_api.dart

@@ -19,8 +19,6 @@ class TimelineApi {
   /// Performs an HTTP 'GET /timeline/bucket' operation and returns the [Response].
   /// Parameters:
   ///
-  /// * [TimeBucketSize] size (required):
-  ///
   /// * [String] timeBucket (required):
   ///
   /// * [String] albumId:
@@ -35,6 +33,10 @@ class TimelineApi {
   ///
   /// * [AssetOrder] order:
   ///
+  /// * [num] page:
+  ///
+  /// * [num] pageSize:
+  ///
   /// * [String] personId:
   ///
   /// * [String] tagId:
@@ -44,7 +46,7 @@ class TimelineApi {
   /// * [bool] withPartners:
   ///
   /// * [bool] withStacked:
-  Future<Response> getTimeBucketWithHttpInfo(TimeBucketSize size, String timeBucket, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, }) async {
+  Future<Response> getTimeBucketWithHttpInfo(String timeBucket, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, num? page, num? pageSize, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/timeline/bucket';
 
@@ -73,10 +75,15 @@ class TimelineApi {
     if (order != null) {
       queryParams.addAll(_queryParams('', 'order', order));
     }
+    if (page != null) {
+      queryParams.addAll(_queryParams('', 'page', page));
+    }
+    if (pageSize != null) {
+      queryParams.addAll(_queryParams('', 'pageSize', pageSize));
+    }
     if (personId != null) {
       queryParams.addAll(_queryParams('', 'personId', personId));
     }
-      queryParams.addAll(_queryParams('', 'size', size));
     if (tagId != null) {
       queryParams.addAll(_queryParams('', 'tagId', tagId));
     }
@@ -107,8 +114,6 @@ class TimelineApi {
 
   /// Parameters:
   ///
-  /// * [TimeBucketSize] size (required):
-  ///
   /// * [String] timeBucket (required):
   ///
   /// * [String] albumId:
@@ -123,6 +128,10 @@ class TimelineApi {
   ///
   /// * [AssetOrder] order:
   ///
+  /// * [num] page:
+  ///
+  /// * [num] pageSize:
+  ///
   /// * [String] personId:
   ///
   /// * [String] tagId:
@@ -132,8 +141,8 @@ class TimelineApi {
   /// * [bool] withPartners:
   ///
   /// * [bool] withStacked:
-  Future<List<AssetResponseDto>?> getTimeBucket(TimeBucketSize size, String timeBucket, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, }) async {
+  Future<TimeBucketAssetResponseDto?> getTimeBucket(String timeBucket, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, num? page, num? pageSize, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, }) async {
-    final response = await getTimeBucketWithHttpInfo(size, timeBucket,  albumId: albumId, isArchived: isArchived, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, tagId: tagId, userId: userId, withPartners: withPartners, withStacked: withStacked, );
+    final response = await getTimeBucketWithHttpInfo(timeBucket,  albumId: albumId, isArchived: isArchived, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, page: page, pageSize: pageSize, personId: personId, tagId: tagId, userId: userId, withPartners: withPartners, withStacked: withStacked, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -141,11 +150,8 @@ class TimelineApi {
     // At the time of writing this, `dart:convert` will throw an "Unexpected end of input"
     // FormatException when trying to decode an empty string.
     if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
-      final responseBody = await _decodeBodyBytes(response);
+      return await apiClient.deserializeAsync(await _decodeBodyBytes(response), 'TimeBucketAssetResponseDto',) as TimeBucketAssetResponseDto;
-      return (await apiClient.deserializeAsync(responseBody, 'List<AssetResponseDto>') as List)
+    
-        .cast<AssetResponseDto>()
-        .toList(growable: false);
-
     }
     return null;
   }
@@ -153,8 +159,6 @@ class TimelineApi {
   /// Performs an HTTP 'GET /timeline/buckets' operation and returns the [Response].
   /// Parameters:
   ///
-  /// * [TimeBucketSize] size (required):
-  ///
   /// * [String] albumId:
   ///
   /// * [bool] isArchived:
@@ -176,7 +180,7 @@ class TimelineApi {
   /// * [bool] withPartners:
   ///
   /// * [bool] withStacked:
-  Future<Response> getTimeBucketsWithHttpInfo(TimeBucketSize size, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, }) async {
+  Future<Response> getTimeBucketsWithHttpInfo({ String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/timeline/buckets';
 
@@ -208,7 +212,6 @@ class TimelineApi {
     if (personId != null) {
       queryParams.addAll(_queryParams('', 'personId', personId));
     }
-      queryParams.addAll(_queryParams('', 'size', size));
     if (tagId != null) {
       queryParams.addAll(_queryParams('', 'tagId', tagId));
     }
@@ -238,8 +241,6 @@ class TimelineApi {
 
   /// Parameters:
   ///
-  /// * [TimeBucketSize] size (required):
-  ///
   /// * [String] albumId:
   ///
   /// * [bool] isArchived:
@@ -261,8 +262,8 @@ class TimelineApi {
   /// * [bool] withPartners:
   ///
   /// * [bool] withStacked:
-  Future<List<TimeBucketResponseDto>?> getTimeBuckets(TimeBucketSize size, { String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, }) async {
+  Future<List<TimeBucketsResponseDto>?> getTimeBuckets({ String? albumId, bool? isArchived, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? tagId, String? userId, bool? withPartners, bool? withStacked, }) async {
-    final response = await getTimeBucketsWithHttpInfo(size,  albumId: albumId, isArchived: isArchived, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, tagId: tagId, userId: userId, withPartners: withPartners, withStacked: withStacked, );
+    final response = await getTimeBucketsWithHttpInfo( albumId: albumId, isArchived: isArchived, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, tagId: tagId, userId: userId, withPartners: withPartners, withStacked: withStacked, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -271,8 +272,8 @@ class TimelineApi {
     // FormatException when trying to decode an empty string.
     if (response.body.isNotEmpty && response.statusCode != HttpStatus.noContent) {
       final responseBody = await _decodeBodyBytes(response);
-      return (await apiClient.deserializeAsync(responseBody, 'List<TimeBucketResponseDto>') as List)
+      return (await apiClient.deserializeAsync(responseBody, 'List<TimeBucketsResponseDto>') as List)
-        .cast<TimeBucketResponseDto>()
+        .cast<TimeBucketsResponseDto>()
         .toList(growable: false);
 
     }

mobile/openapi/lib/api_client.dart

@@ -618,10 +618,10 @@ class ApiClient {
           return TemplateResponseDto.fromJson(value);
         case 'TestEmailResponseDto':
           return TestEmailResponseDto.fromJson(value);
-        case 'TimeBucketResponseDto':
+        case 'TimeBucketAssetResponseDto':
-          return TimeBucketResponseDto.fromJson(value);
+          return TimeBucketAssetResponseDto.fromJson(value);
-        case 'TimeBucketSize':
+        case 'TimeBucketsResponseDto':
-          return TimeBucketSizeTypeTransformer().decode(value);
+          return TimeBucketsResponseDto.fromJson(value);
         case 'ToneMapping':
           return ToneMappingTypeTransformer().decode(value);
         case 'TranscodeHWAccel':

mobile/openapi/lib/api_helper.dart

@@ -136,9 +136,6 @@ String parameterToString(dynamic value) {
   if (value is SyncRequestType) {
     return SyncRequestTypeTypeTransformer().encode(value).toString();
   }
-  if (value is TimeBucketSize) {
-    return TimeBucketSizeTypeTransformer().encode(value).toString();
-  }
   if (value is ToneMapping) {
     return ToneMappingTypeTransformer().encode(value).toString();
   }

mobile/openapi/lib/model/time_bucket_asset_response_dto.dart

@@ -0,0 +1,243 @@
+//
+// AUTO-GENERATED FILE, DO NOT MODIFY!
+//
+// @dart=2.18
+
+// ignore_for_file: unused_element, unused_import
+// ignore_for_file: always_put_required_named_parameters_first
+// ignore_for_file: constant_identifier_names
+// ignore_for_file: lines_longer_than_80_chars
+
+part of openapi.api;
+
+class TimeBucketAssetResponseDto {
+  /// Returns a new [TimeBucketAssetResponseDto] instance.
+  TimeBucketAssetResponseDto({
+    this.city = const [],
+    this.country = const [],
+    this.duration = const [],
+    this.id = const [],
+    this.isArchived = const [],
+    this.isFavorite = const [],
+    this.isImage = const [],
+    this.isTrashed = const [],
+    this.livePhotoVideoId = const [],
+    this.localDateTime = const [],
+    this.ownerId = const [],
+    this.projectionType = const [],
+    this.ratio = const [],
+    this.stack = const [],
+    this.thumbhash = const [],
+  });
+
+  List<String?> city;
+
+  List<String?> country;
+
+  List<String?> duration;
+
+  List<String> id;
+
+  List<num> isArchived;
+
+  List<num> isFavorite;
+
+  List<num> isImage;
+
+  List<num> isTrashed;
+
+  List<String?> livePhotoVideoId;
+
+  List<String> localDateTime;
+
+  List<String> ownerId;
+
+  List<String?> projectionType;
+
+  List<num> ratio;
+
+  /// (stack ID, stack asset count) tuple
+  List<List<String>?> stack;
+
+  List<String?> thumbhash;
+
+  @override
+  bool operator ==(Object other) => identical(this, other) || other is TimeBucketAssetResponseDto &&
+    _deepEquality.equals(other.city, city) &&
+    _deepEquality.equals(other.country, country) &&
+    _deepEquality.equals(other.duration, duration) &&
+    _deepEquality.equals(other.id, id) &&
+    _deepEquality.equals(other.isArchived, isArchived) &&
+    _deepEquality.equals(other.isFavorite, isFavorite) &&
+    _deepEquality.equals(other.isImage, isImage) &&
+    _deepEquality.equals(other.isTrashed, isTrashed) &&
+    _deepEquality.equals(other.livePhotoVideoId, livePhotoVideoId) &&
+    _deepEquality.equals(other.localDateTime, localDateTime) &&
+    _deepEquality.equals(other.ownerId, ownerId) &&
+    _deepEquality.equals(other.projectionType, projectionType) &&
+    _deepEquality.equals(other.ratio, ratio) &&
+    _deepEquality.equals(other.stack, stack) &&
+    _deepEquality.equals(other.thumbhash, thumbhash);
+
+  @override
+  int get hashCode =>
+    // ignore: unnecessary_parenthesis
+    (city.hashCode) +
+    (country.hashCode) +
+    (duration.hashCode) +
+    (id.hashCode) +
+    (isArchived.hashCode) +
+    (isFavorite.hashCode) +
+    (isImage.hashCode) +
+    (isTrashed.hashCode) +
+    (livePhotoVideoId.hashCode) +
+    (localDateTime.hashCode) +
+    (ownerId.hashCode) +
+    (projectionType.hashCode) +
+    (ratio.hashCode) +
+    (stack.hashCode) +
+    (thumbhash.hashCode);
+
+  @override
+  String toString() => 'TimeBucketAssetResponseDto[city=$city, country=$country, duration=$duration, id=$id, isArchived=$isArchived, isFavorite=$isFavorite, isImage=$isImage, isTrashed=$isTrashed, livePhotoVideoId=$livePhotoVideoId, localDateTime=$localDateTime, ownerId=$ownerId, projectionType=$projectionType, ratio=$ratio, stack=$stack, thumbhash=$thumbhash]';
+
+  Map<String, dynamic> toJson() {
+    final json = <String, dynamic>{};
+      json[r'city'] = this.city;
+      json[r'country'] = this.country;
+      json[r'duration'] = this.duration;
+      json[r'id'] = this.id;
+      json[r'isArchived'] = this.isArchived;
+      json[r'isFavorite'] = this.isFavorite;
+      json[r'isImage'] = this.isImage;
+      json[r'isTrashed'] = this.isTrashed;
+      json[r'livePhotoVideoId'] = this.livePhotoVideoId;
+      json[r'localDateTime'] = this.localDateTime;
+      json[r'ownerId'] = this.ownerId;
+      json[r'projectionType'] = this.projectionType;
+      json[r'ratio'] = this.ratio;
+      json[r'stack'] = this.stack;
+      json[r'thumbhash'] = this.thumbhash;
+    return json;
+  }
+
+  /// Returns a new [TimeBucketAssetResponseDto] instance and imports its values from
+  /// [value] if it's a [Map], null otherwise.
+  // ignore: prefer_constructors_over_static_methods
+  static TimeBucketAssetResponseDto? fromJson(dynamic value) {
+    upgradeDto(value, "TimeBucketAssetResponseDto");
+    if (value is Map) {
+      final json = value.cast<String, dynamic>();
+
+      return TimeBucketAssetResponseDto(
+        city: json[r'city'] is Iterable
+            ? (json[r'city'] as Iterable).cast<String>().toList(growable: false)
+            : const [],
+        country: json[r'country'] is Iterable
+            ? (json[r'country'] as Iterable).cast<String>().toList(growable: false)
+            : const [],
+        duration: json[r'duration'] is Iterable
+            ? (json[r'duration'] as Iterable).cast<String>().toList(growable: false)
+            : const [],
+        id: json[r'id'] is Iterable
+            ? (json[r'id'] as Iterable).cast<String>().toList(growable: false)
+            : const [],
+        isArchived: json[r'isArchived'] is Iterable
+            ? (json[r'isArchived'] as Iterable).cast<num>().toList(growable: false)
+            : const [],
+        isFavorite: json[r'isFavorite'] is Iterable
+            ? (json[r'isFavorite'] as Iterable).cast<num>().toList(growable: false)
+            : const [],
+        isImage: json[r'isImage'] is Iterable
+            ? (json[r'isImage'] as Iterable).cast<num>().toList(growable: false)
+            : const [],
+        isTrashed: json[r'isTrashed'] is Iterable
+            ? (json[r'isTrashed'] as Iterable).cast<num>().toList(growable: false)
+            : const [],
+        livePhotoVideoId: json[r'livePhotoVideoId'] is Iterable
+            ? (json[r'livePhotoVideoId'] as Iterable).cast<String>().toList(growable: false)
+            : const [],
+        localDateTime: json[r'localDateTime'] is Iterable
+            ? (json[r'localDateTime'] as Iterable).cast<String>().toList(growable: false)
+            : const [],
+        ownerId: json[r'ownerId'] is Iterable
+            ? (json[r'ownerId'] as Iterable).cast<String>().toList(growable: false)
+            : const [],
+        projectionType: json[r'projectionType'] is Iterable
+            ? (json[r'projectionType'] as Iterable).cast<String>().toList(growable: false)
+            : const [],
+        ratio: json[r'ratio'] is Iterable
+            ? (json[r'ratio'] as Iterable).cast<num>().toList(growable: false)
+            : const [],
+        stack: json[r'stack'] is List
+          ? (json[r'stack'] as List).map((e) =>
+              e == null ? null : (e as List).cast<String>()
+            ).toList()
+          :  const [],
+        thumbhash: json[r'thumbhash'] is Iterable
+            ? (json[r'thumbhash'] as Iterable).cast<String>().toList(growable: false)
+            : const [],
+      );
+    }
+    return null;
+  }
+
+  static List<TimeBucketAssetResponseDto> listFromJson(dynamic json, {bool growable = false,}) {
+    final result = <TimeBucketAssetResponseDto>[];
+    if (json is List && json.isNotEmpty) {
+      for (final row in json) {
+        final value = TimeBucketAssetResponseDto.fromJson(row);
+        if (value != null) {
+          result.add(value);
+        }
+      }
+    }
+    return result.toList(growable: growable);
+  }
+
+  static Map<String, TimeBucketAssetResponseDto> mapFromJson(dynamic json) {
+    final map = <String, TimeBucketAssetResponseDto>{};
+    if (json is Map && json.isNotEmpty) {
+      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
+      for (final entry in json.entries) {
+        final value = TimeBucketAssetResponseDto.fromJson(entry.value);
+        if (value != null) {
+          map[entry.key] = value;
+        }
+      }
+    }
+    return map;
+  }
+
+  // maps a json object with a list of TimeBucketAssetResponseDto-objects as value to a dart map
+  static Map<String, List<TimeBucketAssetResponseDto>> mapListFromJson(dynamic json, {bool growable = false,}) {
+    final map = <String, List<TimeBucketAssetResponseDto>>{};
+    if (json is Map && json.isNotEmpty) {
+      // ignore: parameter_assignments
+      json = json.cast<String, dynamic>();
+      for (final entry in json.entries) {
+        map[entry.key] = TimeBucketAssetResponseDto.listFromJson(entry.value, growable: growable,);
+      }
+    }
+    return map;
+  }
+
+  /// The list of required keys that must be present in a JSON.
+  static const requiredKeys = <String>{
+    'city',
+    'country',
+    'duration',
+    'id',
+    'isArchived',
+    'isFavorite',
+    'isImage',
+    'isTrashed',
+    'livePhotoVideoId',
+    'localDateTime',
+    'ownerId',
+    'projectionType',
+    'ratio',
+    'thumbhash',
+  };
+}
+

mobile/openapi/lib/model/time_bucket_size.dart

@@ -1,85 +0,0 @@
-//
-// AUTO-GENERATED FILE, DO NOT MODIFY!
-//
-// @dart=2.18
-
-// ignore_for_file: unused_element, unused_import
-// ignore_for_file: always_put_required_named_parameters_first
-// ignore_for_file: constant_identifier_names
-// ignore_for_file: lines_longer_than_80_chars
-
-part of openapi.api;
-
-
-class TimeBucketSize {
-  /// Instantiate a new enum with the provided [value].
-  const TimeBucketSize._(this.value);
-
-  /// The underlying value of this enum member.
-  final String value;
-
-  @override
-  String toString() => value;
-
-  String toJson() => value;
-
-  static const DAY = TimeBucketSize._(r'DAY');
-  static const MONTH = TimeBucketSize._(r'MONTH');
-
-  /// List of all possible values in this [enum][TimeBucketSize].
-  static const values = <TimeBucketSize>[
-    DAY,
-    MONTH,
-  ];
-
-  static TimeBucketSize? fromJson(dynamic value) => TimeBucketSizeTypeTransformer().decode(value);
-
-  static List<TimeBucketSize> listFromJson(dynamic json, {bool growable = false,}) {
-    final result = <TimeBucketSize>[];
-    if (json is List && json.isNotEmpty) {
-      for (final row in json) {
-        final value = TimeBucketSize.fromJson(row);
-        if (value != null) {
-          result.add(value);
-        }
-      }
-    }
-    return result.toList(growable: growable);
-  }
-}
-
-/// Transformation class that can [encode] an instance of [TimeBucketSize] to String,
-/// and [decode] dynamic data back to [TimeBucketSize].
-class TimeBucketSizeTypeTransformer {
-  factory TimeBucketSizeTypeTransformer() => _instance ??= const TimeBucketSizeTypeTransformer._();
-
-  const TimeBucketSizeTypeTransformer._();
-
-  String encode(TimeBucketSize data) => data.value;
-
-  /// Decodes a [dynamic value][data] to a TimeBucketSize.
-  ///
-  /// If [allowNull] is true and the [dynamic value][data] cannot be decoded successfully,
-  /// then null is returned. However, if [allowNull] is false and the [dynamic value][data]
-  /// cannot be decoded successfully, then an [UnimplementedError] is thrown.
-  ///
-  /// The [allowNull] is very handy when an API changes and a new enum value is added or removed,
-  /// and users are still using an old app with the old code.
-  TimeBucketSize? decode(dynamic data, {bool allowNull = true}) {
-    if (data != null) {
-      switch (data) {
-        case r'DAY': return TimeBucketSize.DAY;
-        case r'MONTH': return TimeBucketSize.MONTH;
-        default:
-          if (!allowNull) {
-            throw ArgumentError('Unknown enum value to decode: $data');
-          }
-      }
-    }
-    return null;
-  }
-
-  /// Singleton [TimeBucketSizeTypeTransformer] instance.
-  static TimeBucketSizeTypeTransformer? _instance;
-}
-

mobile/openapi/lib/model/time_buckets_response_dto.dart

@@ -10,9 +10,9 @@
 
 part of openapi.api;
 
-class TimeBucketResponseDto {
+class TimeBucketsResponseDto {
-  /// Returns a new [TimeBucketResponseDto] instance.
+  /// Returns a new [TimeBucketsResponseDto] instance.
-  TimeBucketResponseDto({
+  TimeBucketsResponseDto({
     required this.count,
     required this.timeBucket,
   });
@@ -22,7 +22,7 @@ class TimeBucketResponseDto {
   String timeBucket;
 
   @override
-  bool operator ==(Object other) => identical(this, other) || other is TimeBucketResponseDto &&
+  bool operator ==(Object other) => identical(this, other) || other is TimeBucketsResponseDto &&
     other.count == count &&
     other.timeBucket == timeBucket;
 
@@ -33,7 +33,7 @@ class TimeBucketResponseDto {
     (timeBucket.hashCode);
 
   @override
-  String toString() => 'TimeBucketResponseDto[count=$count, timeBucket=$timeBucket]';
+  String toString() => 'TimeBucketsResponseDto[count=$count, timeBucket=$timeBucket]';
 
   Map<String, dynamic> toJson() {
     final json = <String, dynamic>{};
@@ -42,15 +42,15 @@ class TimeBucketResponseDto {
     return json;
   }
 
-  /// Returns a new [TimeBucketResponseDto] instance and imports its values from
+  /// Returns a new [TimeBucketsResponseDto] instance and imports its values from
   /// [value] if it's a [Map], null otherwise.
   // ignore: prefer_constructors_over_static_methods
-  static TimeBucketResponseDto? fromJson(dynamic value) {
+  static TimeBucketsResponseDto? fromJson(dynamic value) {
-    upgradeDto(value, "TimeBucketResponseDto");
+    upgradeDto(value, "TimeBucketsResponseDto");
     if (value is Map) {
       final json = value.cast<String, dynamic>();
 
-      return TimeBucketResponseDto(
+      return TimeBucketsResponseDto(
         count: mapValueOfType<int>(json, r'count')!,
         timeBucket: mapValueOfType<String>(json, r'timeBucket')!,
       );
@@ -58,11 +58,11 @@ class TimeBucketResponseDto {
     return null;
   }
 
-  static List<TimeBucketResponseDto> listFromJson(dynamic json, {bool growable = false,}) {
+  static List<TimeBucketsResponseDto> listFromJson(dynamic json, {bool growable = false,}) {
-    final result = <TimeBucketResponseDto>[];
+    final result = <TimeBucketsResponseDto>[];
     if (json is List && json.isNotEmpty) {
       for (final row in json) {
-        final value = TimeBucketResponseDto.fromJson(row);
+        final value = TimeBucketsResponseDto.fromJson(row);
         if (value != null) {
           result.add(value);
         }
@@ -71,12 +71,12 @@ class TimeBucketResponseDto {
     return result.toList(growable: growable);
   }
 
-  static Map<String, TimeBucketResponseDto> mapFromJson(dynamic json) {
+  static Map<String, TimeBucketsResponseDto> mapFromJson(dynamic json) {
-    final map = <String, TimeBucketResponseDto>{};
+    final map = <String, TimeBucketsResponseDto>{};
     if (json is Map && json.isNotEmpty) {
       json = json.cast<String, dynamic>(); // ignore: parameter_assignments
       for (final entry in json.entries) {
-        final value = TimeBucketResponseDto.fromJson(entry.value);
+        final value = TimeBucketsResponseDto.fromJson(entry.value);
         if (value != null) {
           map[entry.key] = value;
         }
@@ -85,14 +85,14 @@ class TimeBucketResponseDto {
     return map;
   }
 
-  // maps a json object with a list of TimeBucketResponseDto-objects as value to a dart map
+  // maps a json object with a list of TimeBucketsResponseDto-objects as value to a dart map
-  static Map<String, List<TimeBucketResponseDto>> mapListFromJson(dynamic json, {bool growable = false,}) {
+  static Map<String, List<TimeBucketsResponseDto>> mapListFromJson(dynamic json, {bool growable = false,}) {
-    final map = <String, List<TimeBucketResponseDto>>{};
+    final map = <String, List<TimeBucketsResponseDto>>{};
     if (json is Map && json.isNotEmpty) {
       // ignore: parameter_assignments
       json = json.cast<String, dynamic>();
       for (final entry in json.entries) {
-        map[entry.key] = TimeBucketResponseDto.listFromJson(entry.value, growable: growable,);
+        map[entry.key] = TimeBucketsResponseDto.listFromJson(entry.value, growable: growable,);
       }
     }
     return map;

open-api/bin/generate-open-api.sh

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-OPENAPI_GENERATOR_VERSION=v7.8.0
+OPENAPI_GENERATOR_VERSION=v7.12.0
 
 # usage: ./bin/generate-open-api.sh
 
@@ -8,6 +8,7 @@ function dart {
   cd ./templates/mobile/serialization/native
   wget -O native_class.mustache https://raw.githubusercontent.com/OpenAPITools/openapi-generator/$OPENAPI_GENERATOR_VERSION/modules/openapi-generator/src/main/resources/dart2/serialization/native/native_class.mustache
   patch --no-backup-if-mismatch -u native_class.mustache <native_class.mustache.patch
+  patch --no-backup-if-mismatch -u native_class.mustache <native_class_nullable_items_in_arrays.patch
 
   cd ../../
   wget -O api.mustache https://raw.githubusercontent.com/OpenAPITools/openapi-generator/$OPENAPI_GENERATOR_VERSION/modules/openapi-generator/src/main/resources/dart2/api.mustache

open-api/bin/native_class.mustache

@@ -0,0 +1,301 @@
+class {{{classname}}} {
+{{>dart_constructor}}
+{{#vars}}
+  {{#description}}
+  /// {{{.}}}
+  {{/description}}
+  {{^isEnum}}
+    {{#minimum}}
+      {{#description}}
+  ///
+      {{/description}}
+  /// Minimum value: {{{.}}}
+    {{/minimum}}
+    {{#maximum}}
+      {{#description}}
+        {{^minimum}}
+  ///
+        {{/minimum}}
+      {{/description}}
+  /// Maximum value: {{{.}}}
+    {{/maximum}}
+    {{^isNullable}}
+      {{^required}}
+        {{^defaultValue}}
+  ///
+  /// Please note: This property should have been non-nullable! Since the specification file
+  /// does not include a default value (using the "default:" property), however, the generated
+  /// source code must fall back to having a nullable type.
+  /// Consider adding a "default:" property in the specification file to hide this note.
+  ///
+        {{/defaultValue}}
+      {{/required}}
+    {{/isNullable}}
+  {{/isEnum}}
+  {{{datatypeWithEnum}}}{{#isNullable}}?{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}?{{/defaultValue}}{{/required}}{{/isNullable}} {{{name}}};
+
+{{/vars}}
+  @override
+  bool operator ==(Object other) => identical(this, other) || other is {{{classname}}} &&
+  {{#vars}}
+    {{#isMap}}_deepEquality.equals(other.{{{name}}}, {{{name}}}){{/isMap}}{{^isMap}}{{#isArray}}_deepEquality.equals(other.{{{name}}}, {{{name}}}){{/isArray}}{{^isArray}}other.{{{name}}} == {{{name}}}{{/isArray}}{{/isMap}}{{^-last}} &&{{/-last}}{{#-last}};{{/-last}}
+  {{/vars}}
+
+  @override
+  int get hashCode =>
+    // ignore: unnecessary_parenthesis
+  {{#vars}}
+    ({{#isNullable}}{{{name}}} == null ? 0 : {{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}{{{name}}} == null ? 0 : {{/defaultValue}}{{/required}}{{/isNullable}}{{{name}}}{{#isNullable}}!{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}!{{/defaultValue}}{{/required}}{{/isNullable}}.hashCode){{^-last}} +{{/-last}}{{#-last}};{{/-last}}
+  {{/vars}}
+
+  @override
+  String toString() => '{{{classname}}}[{{#vars}}{{{name}}}=${{{name}}}{{^-last}}, {{/-last}}{{/vars}}]';
+
+  Map<String, dynamic> toJson() {
+    final json = <String, dynamic>{};
+  {{#vars}}
+    {{#isNullable}}
+    if (this.{{{name}}} != null) {
+    {{/isNullable}}
+    {{^isNullable}}
+      {{^required}}
+        {{^defaultValue}}
+    if (this.{{{name}}} != null) {
+        {{/defaultValue}}
+      {{/required}}
+    {{/isNullable}}
+    {{#isDateTime}}
+      {{#pattern}}
+      json[r'{{{baseName}}}'] = _isEpochMarker(r'{{{pattern}}}')
+        ? this.{{{name}}}{{#isNullable}}!{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}!{{/defaultValue}}{{/required}}{{/isNullable}}.millisecondsSinceEpoch
+        : this.{{{name}}}{{#isNullable}}!{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}!{{/defaultValue}}{{/required}}{{/isNullable}}.toUtc().toIso8601String();
+      {{/pattern}}
+      {{^pattern}}
+      json[r'{{{baseName}}}'] = this.{{{name}}}{{#isNullable}}!{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}!{{/defaultValue}}{{/required}}{{/isNullable}}.toUtc().toIso8601String();
+      {{/pattern}}
+    {{/isDateTime}}
+    {{#isDate}}
+      {{#pattern}}
+      json[r'{{{baseName}}}'] = _isEpochMarker(r'{{{pattern}}}')
+        ? this.{{{name}}}{{#isNullable}}!{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}!{{/defaultValue}}{{/required}}{{/isNullable}}.millisecondsSinceEpoch
+        : _dateFormatter.format(this.{{{name}}}{{#isNullable}}!{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}!{{/defaultValue}}{{/required}}{{/isNullable}}.toUtc());
+      {{/pattern}}
+      {{^pattern}}
+      json[r'{{{baseName}}}'] = _dateFormatter.format(this.{{{name}}}{{#isNullable}}!{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}!{{/defaultValue}}{{/required}}{{/isNullable}}.toUtc());
+      {{/pattern}}
+    {{/isDate}}
+    {{^isDateTime}}
+      {{^isDate}}
+      json[r'{{{baseName}}}'] = this.{{{name}}}{{#isArray}}{{#uniqueItems}}{{#isNullable}}!{{/isNullable}}.toList(growable: false){{/uniqueItems}}{{/isArray}};
+      {{/isDate}}
+    {{/isDateTime}}
+    {{#isNullable}}
+    } else {
+      json[r'{{{baseName}}}'] = null;
+    }
+    {{/isNullable}}
+    {{^isNullable}}
+      {{^required}}
+        {{^defaultValue}}
+    } else {
+      json[r'{{{baseName}}}'] = null;
+    }
+        {{/defaultValue}}
+      {{/required}}
+    {{/isNullable}}
+  {{/vars}}
+    return json;
+  }
+
+  /// Returns a new [{{{classname}}}] instance and imports its values from
+  /// [value] if it's a [Map], null otherwise.
+  // ignore: prefer_constructors_over_static_methods
+  static {{{classname}}}? fromJson(dynamic value) {
+    if (value is Map) {
+      final json = value.cast<String, dynamic>();
+
+      // Ensure that the map contains the required keys.
+      // Note 1: the values aren't checked for validity beyond being non-null.
+      // Note 2: this code is stripped in release mode!
+      assert(() {
+        requiredKeys.forEach((key) {
+          assert(json.containsKey(key), 'Required key "{{{classname}}}[$key]" is missing from JSON.');
+          assert(json[key] != null, 'Required key "{{{classname}}}[$key]" has a null value in JSON.');
+        });
+        return true;
+      }());
+
+      return {{{classname}}}(
+  {{#vars}}
+    {{#isDateTime}}
+        {{{name}}}: mapDateTime(json, r'{{{baseName}}}', r'{{{pattern}}}'){{#required}}{{^isNullable}}!{{/isNullable}}{{/required}}{{^required}}{{#defaultValue}} ?? {{{.}}}{{/defaultValue}}{{/required}},
+    {{/isDateTime}}
+    {{#isDate}}
+        {{{name}}}: mapDateTime(json, r'{{{baseName}}}', r'{{{pattern}}}'){{#required}}{{^isNullable}}!{{/isNullable}}{{/required}}{{^required}}{{#defaultValue}} ?? {{{.}}}{{/defaultValue}}{{/required}},
+    {{/isDate}}
+    {{^isDateTime}}
+      {{^isDate}}
+        {{#complexType}}
+          {{#isArray}}
+            {{#items.isArray}}
+        {{{name}}}: json[r'{{{baseName}}}'] is List
+          ? (json[r'{{{baseName}}}'] as List).map((e) =>
+              {{#items.complexType}}
+              {{items.complexType}}.listFromJson(json[r'{{{baseName}}}']){{#uniqueItems}}.toSet(){{/uniqueItems}}
+              {{/items.complexType}}
+              {{^items.complexType}}
+              e == null ? {{#items.isNullable}}null{{/items.isNullable}}{{^items.isNullable}}const  <{{items.items.dataType}}>[]{{/items.isNullable}} : (e as List).cast<{{items.items.dataType}}>()
+              {{/items.complexType}}
+            ).toList()
+          :  {{#isNullable}}null{{/isNullable}}{{^isNullable}}const []{{/isNullable}},
+            {{/items.isArray}}
+            {{^items.isArray}}
+        {{{name}}}: {{{complexType}}}.listFromJson(json[r'{{{baseName}}}']){{#uniqueItems}}.toSet(){{/uniqueItems}},
+            {{/items.isArray}}
+          {{/isArray}}
+          {{^isArray}}
+            {{#isMap}}
+              {{#items.isArray}}
+        {{{name}}}: json[r'{{{baseName}}}'] == null
+          ? {{#defaultValue}}{{{.}}}{{/defaultValue}}{{^defaultValue}}null{{/defaultValue}}
+                {{#items.complexType}}
+            : {{items.complexType}}.mapListFromJson(json[r'{{{baseName}}}']),
+                {{/items.complexType}}
+                {{^items.complexType}}
+            : mapCastOfType<String, List>(json, r'{{{baseName}}}'),
+                {{/items.complexType}}
+              {{/items.isArray}}
+              {{^items.isArray}}
+                {{#items.isMap}}
+                  {{#items.complexType}}
+        {{{name}}}: {{items.complexType}}.mapFromJson(json[r'{{{baseName}}}']),
+                  {{/items.complexType}}
+                  {{^items.complexType}}
+        {{{name}}}: mapCastOfType<String, dynamic>(json, r'{{{baseName}}}'){{#required}}{{^isNullable}}!{{/isNullable}}{{/required}}{{^required}}{{#defaultValue}} ?? {{{.}}}{{/defaultValue}}{{/required}},
+                  {{/items.complexType}}
+                {{/items.isMap}}
+                {{^items.isMap}}
+                  {{#items.complexType}}
+        {{{name}}}: {{{items.complexType}}}.mapFromJson(json[r'{{{baseName}}}']),
+                  {{/items.complexType}}
+                  {{^items.complexType}}
+        {{{name}}}: mapCastOfType<String, {{items.dataType}}>(json, r'{{{baseName}}}'){{#required}}{{^isNullable}}!{{/isNullable}}{{/required}}{{^required}}{{#defaultValue}} ?? {{{.}}}{{/defaultValue}}{{/required}},
+                  {{/items.complexType}}
+                {{/items.isMap}}
+              {{/items.isArray}}
+            {{/isMap}}
+            {{^isMap}}
+              {{#isBinary}}
+        {{{name}}}: null, // No support for decoding binary content from JSON
+              {{/isBinary}}
+              {{^isBinary}}
+        {{{name}}}: {{{complexType}}}.fromJson(json[r'{{{baseName}}}']){{#required}}{{^isNullable}}!{{/isNullable}}{{/required}}{{^required}}{{#defaultValue}} ?? {{{.}}}{{/defaultValue}}{{/required}},
+              {{/isBinary}}
+            {{/isMap}}
+          {{/isArray}}
+        {{/complexType}}
+        {{^complexType}}
+          {{#isArray}}
+            {{#isEnum}}
+        {{{name}}}: {{{items.datatypeWithEnum}}}.listFromJson(json[r'{{{baseName}}}']){{#uniqueItems}}.toSet(){{/uniqueItems}},
+            {{/isEnum}}
+            {{^isEnum}}
+        {{{name}}}: json[r'{{{baseName}}}'] is Iterable
+            ? (json[r'{{{baseName}}}'] as Iterable).cast<{{{items.datatype}}}>().{{#uniqueItems}}toSet(){{/uniqueItems}}{{^uniqueItems}}toList(growable: false){{/uniqueItems}}
+            : {{#defaultValue}}{{{.}}}{{/defaultValue}}{{^defaultValue}}null{{/defaultValue}},
+            {{/isEnum}}
+          {{/isArray}}
+          {{^isArray}}
+            {{#isMap}}
+        {{{name}}}: mapCastOfType<String, {{{items.datatype}}}>(json, r'{{{baseName}}}'){{#required}}{{^isNullable}}!{{/isNullable}}{{/required}}{{^required}}{{#defaultValue}} ?? {{{.}}}{{/defaultValue}}{{/required}},
+            {{/isMap}}
+            {{^isMap}}
+              {{#isNumber}}
+        {{{name}}}: {{#isNullable}}json[r'{{{baseName}}}'] == null
+            ? {{#defaultValue}}{{{.}}}{{/defaultValue}}{{^defaultValue}}null{{/defaultValue}}
+            : {{/isNullable}}{{{datatypeWithEnum}}}.parse('${json[r'{{{baseName}}}']}'),
+              {{/isNumber}}
+              {{^isNumber}}
+                {{^isEnum}}
+        {{{name}}}: mapValueOfType<{{{datatypeWithEnum}}}>(json, r'{{{baseName}}}'){{#required}}{{^isNullable}}!{{/isNullable}}{{/required}}{{^required}}{{#defaultValue}} ?? {{{.}}}{{/defaultValue}}{{/required}},
+                {{/isEnum}}
+                {{#isEnum}}
+        {{{name}}}: {{{enumName}}}.fromJson(json[r'{{{baseName}}}']){{#required}}{{^isNullable}}!{{/isNullable}}{{/required}}{{^required}}{{#defaultValue}} ?? {{{.}}}{{/defaultValue}}{{/required}},
+                {{/isEnum}}
+              {{/isNumber}}
+            {{/isMap}}
+          {{/isArray}}
+        {{/complexType}}
+      {{/isDate}}
+    {{/isDateTime}}
+  {{/vars}}
+      );
+    }
+    return null;
+  }
+
+  static List<{{{classname}}}> listFromJson(dynamic json, {bool growable = false,}) {
+    final result = <{{{classname}}}>[];
+    if (json is List && json.isNotEmpty) {
+      for (final row in json) {
+        final value = {{{classname}}}.fromJson(row);
+        if (value != null) {
+          result.add(value);
+        }
+      }
+    }
+    return result.toList(growable: growable);
+  }
+
+  static Map<String, {{{classname}}}> mapFromJson(dynamic json) {
+    final map = <String, {{{classname}}}>{};
+    if (json is Map && json.isNotEmpty) {
+      json = json.cast<String, dynamic>(); // ignore: parameter_assignments
+      for (final entry in json.entries) {
+        final value = {{{classname}}}.fromJson(entry.value);
+        if (value != null) {
+          map[entry.key] = value;
+        }
+      }
+    }
+    return map;
+  }
+
+  // maps a json object with a list of {{{classname}}}-objects as value to a dart map
+  static Map<String, List<{{{classname}}}>> mapListFromJson(dynamic json, {bool growable = false,}) {
+    final map = <String, List<{{{classname}}}>>{};
+    if (json is Map && json.isNotEmpty) {
+      // ignore: parameter_assignments
+      json = json.cast<String, dynamic>();
+      for (final entry in json.entries) {
+        map[entry.key] = {{{classname}}}.listFromJson(entry.value, growable: growable,);
+      }
+    }
+    return map;
+  }
+
+  /// The list of required keys that must be present in a JSON.
+  static const requiredKeys = <String>{
+{{#vars}}
+  {{#required}}
+    '{{{baseName}}}',
+  {{/required}}
+{{/vars}}
+  };
+}
+{{#vars}}
+    {{^isModel}}
+    {{#isEnum}}
+        {{^isContainer}}
+
+{{>serialization/native/native_enum_inline}}
+        {{/isContainer}}
+        {{#isContainer}}
+            {{#mostInnerItems}}
+
+{{>serialization/native/native_enum_inline}}
+            {{/mostInnerItems}}
+        {{/isContainer}}
+    {{/isEnum}}
+    {{/isModel}}
+{{/vars}}

open-api/immich-openapi-specs.json

@@ -6949,6 +6949,24 @@
               "$ref": "#/components/schemas/AssetOrder"
             }
           },
+          {
+            "name": "page",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "minimum": 1,
+              "type": "number"
+            }
+          },
+          {
+            "name": "pageSize",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "minimum": 1,
+              "type": "number"
+            }
+          },
           {
             "name": "personId",
             "required": false,
@@ -6958,14 +6976,6 @@
               "type": "string"
             }
           },
-          {
-            "name": "size",
-            "required": true,
-            "in": "query",
-            "schema": {
-              "$ref": "#/components/schemas/TimeBucketSize"
-            }
-          },
           {
             "name": "tagId",
             "required": false,
@@ -7014,10 +7024,7 @@
             "content": {
               "application/json": {
                 "schema": {
-                  "items": {
+                  "$ref": "#/components/schemas/TimeBucketAssetResponseDto"
-                    "$ref": "#/components/schemas/AssetResponseDto"
-                  },
-                  "type": "array"
                 }
               }
             },
@@ -7102,14 +7109,6 @@
               "type": "string"
             }
           },
-          {
-            "name": "size",
-            "required": true,
-            "in": "query",
-            "schema": {
-              "$ref": "#/components/schemas/TimeBucketSize"
-            }
-          },
           {
             "name": "tagId",
             "required": false,
@@ -7151,7 +7150,7 @@
               "application/json": {
                 "schema": {
                   "items": {
-                    "$ref": "#/components/schemas/TimeBucketResponseDto"
+                    "$ref": "#/components/schemas/TimeBucketsResponseDto"
                   },
                   "type": "array"
                 }
@@ -13561,7 +13560,131 @@
         ],
         "type": "object"
       },
-      "TimeBucketResponseDto": {
+      "TimeBucketAssetResponseDto": {
+        "properties": {
+          "city": {
+            "items": {
+              "nullable": true,
+              "type": "string"
+            },
+            "type": "array"
+          },
+          "country": {
+            "items": {
+              "nullable": true,
+              "type": "string"
+            },
+            "type": "array"
+          },
+          "duration": {
+            "items": {
+              "nullable": true,
+              "type": "string"
+            },
+            "type": "array"
+          },
+          "id": {
+            "items": {
+              "type": "string"
+            },
+            "type": "array"
+          },
+          "isArchived": {
+            "items": {
+              "type": "number"
+            },
+            "type": "array"
+          },
+          "isFavorite": {
+            "items": {
+              "type": "number"
+            },
+            "type": "array"
+          },
+          "isImage": {
+            "items": {
+              "type": "number"
+            },
+            "type": "array"
+          },
+          "isTrashed": {
+            "items": {
+              "type": "number"
+            },
+            "type": "array"
+          },
+          "livePhotoVideoId": {
+            "items": {
+              "nullable": true,
+              "type": "string"
+            },
+            "type": "array"
+          },
+          "localDateTime": {
+            "items": {
+              "type": "string"
+            },
+            "type": "array"
+          },
+          "ownerId": {
+            "items": {
+              "type": "string"
+            },
+            "type": "array"
+          },
+          "projectionType": {
+            "items": {
+              "nullable": true,
+              "type": "string"
+            },
+            "type": "array"
+          },
+          "ratio": {
+            "items": {
+              "type": "number"
+            },
+            "type": "array"
+          },
+          "stack": {
+            "description": "(stack ID, stack asset count) tuple",
+            "items": {
+              "items": {
+                "type": "string"
+              },
+              "maxItems": 2,
+              "minItems": 2,
+              "nullable": true,
+              "type": "array"
+            },
+            "type": "array"
+          },
+          "thumbhash": {
+            "items": {
+              "nullable": true,
+              "type": "string"
+            },
+            "type": "array"
+          }
+        },
+        "required": [
+          "city",
+          "country",
+          "duration",
+          "id",
+          "isArchived",
+          "isFavorite",
+          "isImage",
+          "isTrashed",
+          "livePhotoVideoId",
+          "localDateTime",
+          "ownerId",
+          "projectionType",
+          "ratio",
+          "thumbhash"
+        ],
+        "type": "object"
+      },
+      "TimeBucketsResponseDto": {
         "properties": {
           "count": {
             "type": "integer"
@@ -13576,13 +13699,6 @@
         ],
         "type": "object"
       },
-      "TimeBucketSize": {
-        "enum": [
-          "DAY",
-          "MONTH"
-        ],
-        "type": "string"
-      },
       "ToneMapping": {
         "enum": [
           "hable",

open-api/templates/mobile/serialization/native/native_class.mustache

@@ -32,7 +32,7 @@ class {{{classname}}} {
       {{/required}}
     {{/isNullable}}
   {{/isEnum}}
-  {{{datatypeWithEnum}}}{{#isNullable}}?{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}?{{/defaultValue}}{{/required}}{{/isNullable}} {{{name}}};
+  {{#isArray}}{{#uniqueItems}}Set{{/uniqueItems}}{{^uniqueItems}}List{{/uniqueItems}}<{{{items.dataType}}}{{#items.isNullable}}?{{/items.isNullable}}>{{/isArray}}{{^isArray}}{{{datatypeWithEnum}}}{{/isArray}}{{#isNullable}}?{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}?{{/defaultValue}}{{/required}}{{/isNullable}} {{{name}}};
 
 {{/vars}}
   @override

open-api/templates/mobile/serialization/native/native_class_nullable_items_in_arrays.patch

@@ -0,0 +1,13 @@
+diff --git a/open-api/templates/mobile/serialization/native/native_class.mustache b/open-api/templates/mobile/serialization/native/native_class.mustache
+index 9a7b1439b..9f40d5b0b 100644
+--- a/open-api/templates/mobile/serialization/native/native_class.mustache
++++ b/open-api/templates/mobile/serialization/native/native_class.mustache
+@@ -32,7 +32,7 @@ class {{{classname}}} {
+       {{/required}}
+     {{/isNullable}}
+   {{/isEnum}}
+-  {{{datatypeWithEnum}}}{{#isNullable}}?{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}?{{/defaultValue}}{{/required}}{{/isNullable}} {{{name}}};
++  {{#isArray}}{{#uniqueItems}}Set{{/uniqueItems}}{{^uniqueItems}}List{{/uniqueItems}}<{{{items.dataType}}}{{#items.isNullable}}?{{/items.isNullable}}>{{/isArray}}{{^isArray}}{{{datatypeWithEnum}}}{{/isArray}}{{#isNullable}}?{{/isNullable}}{{^isNullable}}{{^required}}{{^defaultValue}}?{{/defaultValue}}{{/required}}{{/isNullable}} {{{name}}};
+ 
+ {{/vars}}
+   @override

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

@@ -1384,7 +1384,25 @@ export type TagBulkAssetsResponseDto = {
 export type TagUpdateDto = {
     color?: string | null;
 };
-export type TimeBucketResponseDto = {
+export type TimeBucketAssetResponseDto = {
+    city: (string | null)[];
+    country: (string | null)[];
+    duration: (string | null)[];
+    id: string[];
+    isArchived: number[];
+    isFavorite: number[];
+    isImage: number[];
+    isTrashed: number[];
+    livePhotoVideoId: (string | null)[];
+    localDateTime: string[];
+    ownerId: string[];
+    projectionType: (string | null)[];
+    ratio: number[];
+    /** (stack ID, stack asset count) tuple */
+    stack?: (string[] | null)[];
+    thumbhash: (string | null)[];
+};
+export type TimeBucketsResponseDto = {
     count: number;
     timeBucket: string;
 };
@@ -3242,15 +3260,16 @@ export function tagAssets({ id, bulkIdsDto }: {
         body: bulkIdsDto
     })));
 }
-export function getTimeBucket({ albumId, isArchived, isFavorite, isTrashed, key, order, personId, size, tagId, timeBucket, userId, withPartners, withStacked }: {
+export function getTimeBucket({ albumId, isArchived, isFavorite, isTrashed, key, order, page, pageSize, personId, tagId, timeBucket, userId, withPartners, withStacked }: {
     albumId?: string;
     isArchived?: boolean;
     isFavorite?: boolean;
     isTrashed?: boolean;
     key?: string;
     order?: AssetOrder;
+    page?: number;
+    pageSize?: number;
     personId?: string;
-    size: TimeBucketSize;
     tagId?: string;
     timeBucket: string;
     userId?: string;
@@ -3259,7 +3278,7 @@ export function getTimeBucket({ albumId, isArchived, isFavorite, isTrashed, key,
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
         status: 200;
-        data: AssetResponseDto[];
+        data: TimeBucketAssetResponseDto;
     }>(`/timeline/bucket${QS.query(QS.explode({
         albumId,
         isArchived,
@@ -3267,8 +3286,9 @@ export function getTimeBucket({ albumId, isArchived, isFavorite, isTrashed, key,
         isTrashed,
         key,
         order,
+        page,
+        pageSize,
         personId,
-        size,
         tagId,
         timeBucket,
         userId,
@@ -3278,7 +3298,7 @@ export function getTimeBucket({ albumId, isArchived, isFavorite, isTrashed, key,
         ...opts
     }));
 }
-export function getTimeBuckets({ albumId, isArchived, isFavorite, isTrashed, key, order, personId, size, tagId, userId, withPartners, withStacked }: {
+export function getTimeBuckets({ albumId, isArchived, isFavorite, isTrashed, key, order, personId, tagId, userId, withPartners, withStacked }: {
     albumId?: string;
     isArchived?: boolean;
     isFavorite?: boolean;
@@ -3286,7 +3306,6 @@ export function getTimeBuckets({ albumId, isArchived, isFavorite, isTrashed, key
     key?: string;
     order?: AssetOrder;
     personId?: string;
-    size: TimeBucketSize;
     tagId?: string;
     userId?: string;
     withPartners?: boolean;
@@ -3294,7 +3313,7 @@ export function getTimeBuckets({ albumId, isArchived, isFavorite, isTrashed, key
 }, opts?: Oazapfts.RequestOpts) {
     return oazapfts.ok(oazapfts.fetchJson<{
         status: 200;
-        data: TimeBucketResponseDto[];
+        data: TimeBucketsResponseDto[];
     }>(`/timeline/buckets${QS.query(QS.explode({
         albumId,
         isArchived,
@@ -3303,7 +3322,6 @@ export function getTimeBuckets({ albumId, isArchived, isFavorite, isTrashed, key
         key,
         order,
         personId,
-        size,
         tagId,
         userId,
         withPartners,
@@ -3782,7 +3800,3 @@ export enum OAuthTokenEndpointAuthMethod {
     ClientSecretPost = "client_secret_post",
     ClientSecretBasic = "client_secret_basic"
 }
-export enum TimeBucketSize {
-    Day = "DAY",
-    Month = "MONTH"
-}

server/package-lock.json

@@ -28,7 +28,7 @@
         "archiver": "^7.0.0",
         "async-lock": "^1.4.0",
         "bcrypt": "^5.1.1",
-        "bullmq": "^4.8.0",
+        "bullmq": "^5.51.0",
         "chokidar": "^3.5.3",
         "class-transformer": "^0.5.1",
         "class-validator": "^0.14.0",
@@ -6886,63 +6886,20 @@
       }
     },
     "node_modules/bullmq": {
-      "version": "4.18.2",
+      "version": "5.51.0",
-      "resolved": "https://registry.npmjs.org/bullmq/-/bullmq-4.18.2.tgz",
+      "resolved": "https://registry.npmjs.org/bullmq/-/bullmq-5.51.0.tgz",
-      "integrity": "sha512-Cx0O98IlGiFw7UBa+zwGz+nH0Pcl1wfTvMVBlsMna3s0219hXroVovh1xPRgomyUcbyciHiugGCkW0RRNZDHYQ==",
+      "integrity": "sha512-YjX+CO2U4nmbCq2ZgNb/Hnu6Xk953j8EFmp0eehTuudavPyNstoZsbnyvvM6PX9rfD9clhcc5kRLyyWoFEM3Lg==",
       "license": "MIT",
       "dependencies": {
-        "cron-parser": "^4.6.0",
+        "cron-parser": "^4.9.0",
-        "glob": "^8.0.3",
+        "ioredis": "^5.4.1",
-        "ioredis": "^5.3.2",
+        "msgpackr": "^1.11.2",
-        "lodash": "^4.17.21",
-        "msgpackr": "^1.6.2",
         "node-abort-controller": "^3.1.1",
         "semver": "^7.5.4",
         "tslib": "^2.0.0",
         "uuid": "^9.0.0"
       }
     },
-    "node_modules/bullmq/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/bullmq/node_modules/glob": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
-      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "license": "ISC",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^5.0.1",
-        "once": "^1.3.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/bullmq/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",

server/package.json

@@ -53,7 +53,7 @@
     "archiver": "^7.0.0",
     "async-lock": "^1.4.0",
     "bcrypt": "^5.1.1",
-    "bullmq": "^4.8.0",
+    "bullmq": "^5.51.0",
     "chokidar": "^3.5.3",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",

server/src/bin/migrations.ts

@@ -67,7 +67,7 @@ const runQuery = async (query: string) => {
 
 const runMigrations = async () => {
   const configRepository = new ConfigRepository();
-  const logger = new LoggingRepository(undefined, configRepository);
+  const logger = LoggingRepository.create();
   const db = getDatabaseClient();
   const databaseRepository = new DatabaseRepository(db, logger, configRepository);
   await databaseRepository.runMigrations();

server/src/bin/sync-sql.ts

@@ -72,7 +72,9 @@ class SqlGenerator {
     await rm(this.options.targetDir, { force: true, recursive: true });
     await mkdir(this.options.targetDir);
 
-    process.env.DB_HOSTNAME = 'localhost';
+    if (!process.env.DB_HOSTNAME) {
+      process.env.DB_HOSTNAME = 'localhost';
+    }
     const { database, cls, otel } = new ConfigRepository().getEnv();
 
     const moduleFixture = await Test.createTestingModule({

server/src/controllers/timeline.controller.ts

@@ -1,8 +1,8 @@
-import { Controller, Get, Query } from '@nestjs/common';
+import { Controller, Get, Query, Res } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
-import { AssetResponseDto } from 'src/dtos/asset-response.dto';
+import { Response } from 'express';
 import { AuthDto } from 'src/dtos/auth.dto';
-import { TimeBucketAssetDto, TimeBucketDto, TimeBucketResponseDto } from 'src/dtos/time-bucket.dto';
+import { TimeBucketAssetDto, TimeBucketAssetResponseDto, TimeBucketDto } from 'src/dtos/time-bucket.dto';
 import { Permission } from 'src/enum';
 import { Auth, Authenticated } from 'src/middleware/auth.guard';
 import { TimelineService } from 'src/services/timeline.service';
@@ -14,13 +14,19 @@ export class TimelineController {
 
   @Get('buckets')
   @Authenticated({ permission: Permission.ASSET_READ, sharedLink: true })
-  getTimeBuckets(@Auth() auth: AuthDto, @Query() dto: TimeBucketDto): Promise<TimeBucketResponseDto[]> {
+  getTimeBuckets(@Auth() auth: AuthDto, @Query() dto: TimeBucketDto) {
     return this.service.getTimeBuckets(auth, dto);
   }
 
   @Get('bucket')
   @Authenticated({ permission: Permission.ASSET_READ, sharedLink: true })
-  getTimeBucket(@Auth() auth: AuthDto, @Query() dto: TimeBucketAssetDto): Promise<AssetResponseDto[]> {
+  async getTimeBucket(
-    return this.service.getTimeBucket(auth, dto) as Promise<AssetResponseDto[]>;
+    @Auth() auth: AuthDto,
+    @Query() dto: TimeBucketAssetDto,
+    @Res({ passthrough: true }) res: Response,
+  ): Promise<TimeBucketAssetResponseDto> {
+    res.contentType('application/json');
+    const jsonBucket = await this.service.getTimeBucket(auth, dto);
+    return jsonBucket as unknown as TimeBucketAssetResponseDto;
   }
 }

server/src/database.ts

@@ -165,6 +165,12 @@ export type Stack = {
   assetCount?: number;
 };
 
+export type TimelineStack = {
+  id: string;
+  primaryAssetId: string;
+  assetCount: number;
+};
+
 export type AuthSharedLink = {
   id: string;
   expiresAt: Date | null;

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

@@ -13,6 +13,7 @@ import {
 import { TagResponseDto, mapTag } from 'src/dtos/tag.dto';
 import { UserResponseDto, mapUser } from 'src/dtos/user.dto';
 import { AssetStatus, AssetType } from 'src/enum';
+import { hexOrBufferToBase64 } from 'src/utils/bytes';
 import { mimeTypes } from 'src/utils/mime-types';
 
 export class SanitizedAssetResponseDto {
@@ -140,15 +141,6 @@ const mapStack = (entity: { stack?: Stack | null }) => {
   };
 };
 
-// if an asset is jsonified in the DB before being returned, its buffer fields will be hex-encoded strings
-export const hexOrBufferToBase64 = (encoded: string | Buffer) => {
-  if (typeof encoded === 'string') {
-    return Buffer.from(encoded.slice(2), 'hex').toString('base64');
-  }
-
-  return encoded.toString('base64');
-};
-
 export function mapAsset(entity: MapAsset, options: AssetMapOptions = {}): AssetResponseDto {
   const { stripMetadata = false, withStack = false } = options;
 
@@ -191,7 +183,7 @@ export function mapAsset(entity: MapAsset, options: AssetMapOptions = {}): Asset
     tags: entity.tags?.map((tag) => mapTag(tag)),
     people: peopleWithFaces(entity.faces),
     unassignedFaces: entity.faces?.filter((face) => !face.person).map((a) => mapFacesWithoutPerson(a)),
-    checksum: hexOrBufferToBase64(entity.checksum),
+    checksum: hexOrBufferToBase64(entity.checksum)!,
     stack: withStack ? mapStack(entity) : undefined,
     isOffline: entity.isOffline,
     hasMetadata: true,

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

@@ -1,15 +1,11 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { IsEnum, IsNotEmpty, IsString } from 'class-validator';
+
+import { IsEnum, IsInt, IsString, Min } from 'class-validator';
 import { AssetOrder } from 'src/enum';
-import { TimeBucketSize } from 'src/repositories/asset.repository';
+import { TimeBucketAssets, TimelineStack } from 'src/services/timeline.service.types';
 import { Optional, ValidateBoolean, ValidateUUID } from 'src/validation';
 
 export class TimeBucketDto {
-  @IsNotEmpty()
-  @IsEnum(TimeBucketSize)
-  @ApiProperty({ enum: TimeBucketSize, enumName: 'TimeBucketSize' })
-  size!: TimeBucketSize;
-
   @ValidateUUID({ optional: true })
   userId?: string;
 
@@ -46,9 +42,75 @@ export class TimeBucketDto {
 export class TimeBucketAssetDto extends TimeBucketDto {
   @IsString()
   timeBucket!: string;
+
+  @IsInt()
+  @Min(1)
+  @Optional()
+  page?: number;
+
+  @IsInt()
+  @Min(1)
+  @Optional()
+  pageSize?: number;
 }
 
-export class TimeBucketResponseDto {
+export class TimelineStackResponseDto implements TimelineStack {
+  id!: string;
+  primaryAssetId!: string;
+  assetCount!: number;
+}
+
+export class TimeBucketAssetResponseDto implements TimeBucketAssets {
+  id!: string[];
+
+  ownerId!: string[];
+
+  ratio!: number[];
+
+  isFavorite!: number[];
+
+  isArchived!: number[];
+
+  isTrashed!: number[];
+
+  isImage!: number[];
+
+  @ApiProperty({ type: 'array', items: { type: 'string', nullable: true } })
+  thumbhash!: (string | null)[];
+
+  localDateTime!: string[];
+
+  @ApiProperty({ type: 'array', items: { type: 'string', nullable: true } })
+  duration!: (string | null)[];
+
+  // id, count
+  @ApiProperty({
+    type: 'array',
+    items: {
+      type: 'array',
+      items: { type: 'string' },
+      minItems: 2,
+      maxItems: 2,
+      nullable: true,
+    },
+    description: '(stack ID, stack asset count) tuple',
+  })
+  stack?: ([string, string] | null)[];
+
+  @ApiProperty({ type: 'array', items: { type: 'string', nullable: true } })
+  projectionType!: (string | null)[];
+
+  @ApiProperty({ type: 'array', items: { type: 'string', nullable: true } })
+  livePhotoVideoId!: (string | null)[];
+
+  @ApiProperty({ type: 'array', items: { type: 'string', nullable: true } })
+  city!: (string | null)[];
+
+  @ApiProperty({ type: 'array', items: { type: 'string', nullable: true } })
+  country!: (string | null)[];
+}
+
+export class TimeBucketsResponseDto {
   @ApiProperty({ type: 'string' })
   timeBucket!: string;
 

server/src/queries/asset.repository.sql

@@ -236,12 +236,12 @@ limit
 with
   "assets" as (
     select
-      date_trunc($1, "localDateTime" at time zone 'UTC') at time zone 'UTC' as "timeBucket"
+      date_trunc('MONTH', "localDateTime" at time zone 'UTC') at time zone 'UTC' as "timeBucket"
     from
       "assets"
     where
       "assets"."deletedAt" is null
-      and "assets"."isVisible" = $2
+      and "assets"."isVisible" = $1
   )
 select
   "timeBucket",
@@ -254,37 +254,95 @@ order by
   "timeBucket" desc
 
 -- AssetRepository.getTimeBucket
-select
+with
-  "assets".*,
+  "cte" as (
-  to_json("exif") as "exifInfo",
-  to_json("stacked_assets") as "stack"
-from
-  "assets"
-  left join "exif" on "assets"."id" = "exif"."assetId"
-  left join "asset_stack" on "asset_stack"."id" = "assets"."stackId"
-  left join lateral (
     select
-      "asset_stack".*,
+      "assets"."duration",
-      count("stacked") as "assetCount"
+      "assets"."id",
+      assets."isArchived"::int as "isArchived",
+      assets."isFavorite"::int as "isFavorite",
+      (assets.type = 'IMAGE')::int as "isImage",
+      (assets."deletedAt" is null)::int as "isTrashed",
+      (assets.type = 'VIDEO')::int as "isVideo",
+      "assets"."livePhotoVideoId",
+      "assets"."localDateTime",
+      "assets"."ownerId",
+      "assets"."status",
+      encode("assets"."thumbhash", 'base64') as "thumbhash",
+      "exif"."city",
+      "exif"."country",
+      "exif"."projectionType",
+      coalesce(
+        case
+          when exif."exifImageHeight" = 0
+          or exif."exifImageWidth" = 0 then 1
+          when "exif"."orientation" in ('5', '6', '7', '8', '-90', '90') then round(
+            exif."exifImageHeight"::numeric / exif."exifImageWidth"::numeric,
+            3
+          )
+          else round(
+            exif."exifImageWidth"::numeric / exif."exifImageHeight"::numeric,
+            3
+          )
+        end,
+        1
+      ) as "ratio",
+      "stack"
     from
-      "assets" as "stacked"
+      "assets"
+      inner join "exif" on "assets"."id" = "exif"."assetId"
+      left join lateral (
+        select
+          array[stacked."stackId"::text, count('stacked')::text] as "stack"
+        from
+          "assets" as "stacked"
+        where
+          "stacked"."stackId" = "assets"."stackId"
+          and "stacked"."deletedAt" is null
+          and "stacked"."isArchived" = $1
+        group by
+          "stacked"."stackId"
+      ) as "stacked_assets" on true
     where
-      "stacked"."stackId" = "asset_stack"."id"
+      "assets"."deletedAt" is null
-      and "stacked"."deletedAt" is null
+      and "assets"."isVisible" = $2
-      and "stacked"."isArchived" = $1
+      and date_trunc('MONTH', "localDateTime" at time zone 'UTC') at time zone 'UTC' = $3
-    group by
+      and not exists (
-      "asset_stack"."id"
+        select
-  ) as "stacked_assets" on "asset_stack"."id" is not null
+        from
-where
+          "asset_stack"
-  (
+        where
-    "asset_stack"."primaryAssetId" = "assets"."id"
+          "asset_stack"."id" = "assets"."stackId"
-    or "assets"."stackId" is null
+          and "asset_stack"."primaryAssetId" != "assets"."id"
+      )
+    order by
+      "assets"."localDateTime" desc
+  ),
+  "agg" as (
+    select
+      coalesce(array_agg("city"), '{}') as "city",
+      coalesce(array_agg("country"), '{}') as "country",
+      coalesce(array_agg("duration"), '{}') as "duration",
+      coalesce(array_agg("id"), '{}') as "id",
+      coalesce(array_agg("isArchived"), '{}') as "isArchived",
+      coalesce(array_agg("isFavorite"), '{}') as "isFavorite",
+      coalesce(array_agg("isImage"), '{}') as "isImage",
+      coalesce(array_agg("isTrashed"), '{}') as "isTrashed",
+      coalesce(array_agg("livePhotoVideoId"), '{}') as "livePhotoVideoId",
+      coalesce(array_agg("localDateTime"), '{}') as "localDateTime",
+      coalesce(array_agg("ownerId"), '{}') as "ownerId",
+      coalesce(array_agg("projectionType"), '{}') as "projectionType",
+      coalesce(array_agg("ratio"), '{}') as "ratio",
+      coalesce(array_agg("status"), '{}') as "status",
+      coalesce(array_agg("thumbhash"), '{}') as "thumbhash",
+      coalesce(json_agg("stack"), '[]') as "stack"
+    from
+      "cte"
   )
-  and "assets"."deletedAt" is null
+select
-  and "assets"."isVisible" = $2
+  to_json(agg)::text as "assets"
-  and date_trunc($3, "localDateTime" at time zone 'UTC') at time zone 'UTC' = $4
+from
-order by
+  "agg"
-  "assets"."localDateTime" desc
 
 -- AssetRepository.getDuplicates
 with

server/src/repositories/asset.repository.ts

@@ -67,7 +67,6 @@ export interface AssetBuilderOptions {
 }
 
 export interface TimeBucketOptions extends AssetBuilderOptions {
-  size: TimeBucketSize;
   order?: AssetOrder;
 }
 
@@ -539,7 +538,7 @@ export class AssetRepository {
         .with('assets', (qb) =>
           qb
             .selectFrom('assets')
-            .select(truncatedDate<Date>(options.size).as('timeBucket'))
+            .select(truncatedDate<Date>(TimeBucketSize.MONTH).as('timeBucket'))
             .$if(!!options.isTrashed, (qb) => qb.where('assets.status', '!=', AssetStatus.DELETED))
             .where('assets.deletedAt', options.isTrashed ? 'is not' : 'is', null)
             .where('assets.isVisible', '=', true)
@@ -581,53 +580,125 @@ export class AssetRepository {
     );
   }
 
-  @GenerateSql({ params: [DummyValue.TIME_BUCKET, { size: TimeBucketSize.MONTH, withStacked: true }] })
+  @GenerateSql({
-  async getTimeBucket(timeBucket: string, options: TimeBucketOptions) {
+    params: [DummyValue.TIME_BUCKET, { size: TimeBucketSize.MONTH, withStacked: true }, { skip: 0, take: 1000 }],
-    return this.db
+  })
-      .selectFrom('assets')
+  getTimeBucket(timeBucket: string, options: TimeBucketOptions) {
-      .selectAll('assets')
+    const query = this.db
-      .$call(withExif)
+      .with('cte', (qb) =>
-      .$if(!!options.albumId, (qb) =>
         qb
-          .innerJoin('albums_assets_assets', 'albums_assets_assets.assetsId', 'assets.id')
+          .selectFrom('assets')
-          .where('albums_assets_assets.albumsId', '=', options.albumId!),
+          .innerJoin('exif', 'assets.id', 'exif.assetId')
+          .select((eb) => [
+            'assets.duration',
+            'assets.id',
+            sql`assets."isArchived"::int`.as('isArchived'),
+            sql`assets."isFavorite"::int`.as('isFavorite'),
+            sql`(assets.type = 'IMAGE')::int`.as('isImage'),
+            sql`(assets."deletedAt" is null)::int`.as('isTrashed'),
+            sql`(assets.type = 'VIDEO')::int`.as('isVideo'),
+            'assets.livePhotoVideoId',
+            'assets.localDateTime',
+            'assets.ownerId',
+            'assets.status',
+            eb.fn('encode', ['assets.thumbhash', sql.lit('base64')]).as('thumbhash'),
+            'exif.city',
+            'exif.country',
+            'exif.projectionType',
+            eb.fn
+              .coalesce(
+                eb
+                  .case()
+                  .when(sql`exif."exifImageHeight" = 0 or exif."exifImageWidth" = 0`)
+                  .then(eb.lit(1))
+                  .when('exif.orientation', 'in', sql<string>`('5', '6', '7', '8', '-90', '90')`)
+                  .then(sql`round(exif."exifImageHeight"::numeric / exif."exifImageWidth"::numeric, 3)`)
+                  .else(sql`round(exif."exifImageWidth"::numeric / exif."exifImageHeight"::numeric, 3)`)
+                  .end(),
+                eb.lit(1),
+              )
+              .as('ratio'),
+          ])
+          .where('assets.deletedAt', options.isTrashed ? 'is not' : 'is', null)
+          .where('assets.isVisible', '=', true)
+          .where(truncatedDate(TimeBucketSize.MONTH), '=', timeBucket.replace(/^[+-]/, ''))
+          .$if(!!options.albumId, (qb) =>
+            qb.where((eb) =>
+              eb.exists(
+                eb
+                  .selectFrom('albums_assets_assets')
+                  .whereRef('albums_assets_assets.assetsId', '=', 'assets.id')
+                  .where('albums_assets_assets.albumsId', '=', asUuid(options.albumId!)),
+              ),
+            ),
+          )
+          .$if(!!options.personId, (qb) => hasPeople(qb, [options.personId!]))
+          .$if(!!options.userIds, (qb) => qb.where('assets.ownerId', '=', anyUuid(options.userIds!)))
+          .$if(options.isArchived !== undefined, (qb) => qb.where('assets.isArchived', '=', options.isArchived!))
+          .$if(options.isFavorite !== undefined, (qb) => qb.where('assets.isFavorite', '=', options.isFavorite!))
+          .$if(!!options.withStacked, (qb) =>
+            qb
+              .where((eb) =>
+                eb.not(
+                  eb.exists(
+                    eb
+                      .selectFrom('asset_stack')
+                      .whereRef('asset_stack.id', '=', 'assets.stackId')
+                      .whereRef('asset_stack.primaryAssetId', '!=', 'assets.id'),
+                  ),
+                ),
+              )
+              .leftJoinLateral(
+                (eb) =>
+                  eb
+                    .selectFrom('assets as stacked')
+                    .select(sql`array[stacked."stackId"::text, count('stacked')::text]`.as('stack'))
+                    .whereRef('stacked.stackId', '=', 'assets.stackId')
+                    .where('stacked.deletedAt', 'is', null)
+                    .where('stacked.isArchived', '=', false)
+                    .groupBy('stacked.stackId')
+                    .as('stacked_assets'),
+                (join) => join.onTrue(),
+              )
+              .select('stack'),
+          )
+          .$if(!!options.assetType, (qb) => qb.where('assets.type', '=', options.assetType!))
+          .$if(options.isDuplicate !== undefined, (qb) =>
+            qb.where('assets.duplicateId', options.isDuplicate ? 'is not' : 'is', null),
+          )
+          .$if(!!options.isTrashed, (qb) => qb.where('assets.status', '!=', AssetStatus.DELETED))
+          .$if(!!options.tagId, (qb) => withTagId(qb, options.tagId!))
+          .orderBy('assets.localDateTime', options.order ?? 'desc'),
       )
-      .$if(!!options.personId, (qb) => hasPeople(qb, [options.personId!]))
+      .with('agg', (qb) =>
-      .$if(!!options.userIds, (qb) => qb.where('assets.ownerId', '=', anyUuid(options.userIds!)))
-      .$if(options.isArchived !== undefined, (qb) => qb.where('assets.isArchived', '=', options.isArchived!))
-      .$if(options.isFavorite !== undefined, (qb) => qb.where('assets.isFavorite', '=', options.isFavorite!))
-      .$if(!!options.withStacked, (qb) =>
         qb
-          .leftJoin('asset_stack', 'asset_stack.id', 'assets.stackId')
+          .selectFrom('cte')
-          .where((eb) =>
+          .select((eb) => [
-            eb.or([eb('asset_stack.primaryAssetId', '=', eb.ref('assets.id')), eb('assets.stackId', 'is', null)]),
+            eb.fn.coalesce(eb.fn('array_agg', ['city']), sql.lit('{}')).as('city'),
-          )
+            eb.fn.coalesce(eb.fn('array_agg', ['country']), sql.lit('{}')).as('country'),
-          .leftJoinLateral(
+            eb.fn.coalesce(eb.fn('array_agg', ['duration']), sql.lit('{}')).as('duration'),
-            (eb) =>
+            eb.fn.coalesce(eb.fn('array_agg', ['id']), sql.lit('{}')).as('id'),
-              eb
+            eb.fn.coalesce(eb.fn('array_agg', ['isArchived']), sql.lit('{}')).as('isArchived'),
-                .selectFrom('assets as stacked')
+            eb.fn.coalesce(eb.fn('array_agg', ['isFavorite']), sql.lit('{}')).as('isFavorite'),
-                .selectAll('asset_stack')
+            eb.fn.coalesce(eb.fn('array_agg', ['isImage']), sql.lit('{}')).as('isImage'),
-                .select((eb) => eb.fn.count(eb.table('stacked')).as('assetCount'))
+            // TODO: isTrashed is redundant as it will always be all 0s or 1s depending on the options
-                .whereRef('stacked.stackId', '=', 'asset_stack.id')
+            eb.fn.coalesce(eb.fn('array_agg', ['isTrashed']), sql.lit('{}')).as('isTrashed'),
-                .where('stacked.deletedAt', 'is', null)
+            eb.fn.coalesce(eb.fn('array_agg', ['livePhotoVideoId']), sql.lit('{}')).as('livePhotoVideoId'),
-                .where('stacked.isArchived', '=', false)
+            eb.fn.coalesce(eb.fn('array_agg', ['localDateTime']), sql.lit('{}')).as('localDateTime'),
-                .groupBy('asset_stack.id')
+            eb.fn.coalesce(eb.fn('array_agg', ['ownerId']), sql.lit('{}')).as('ownerId'),
-                .as('stacked_assets'),
+            eb.fn.coalesce(eb.fn('array_agg', ['projectionType']), sql.lit('{}')).as('projectionType'),
-            (join) => join.on('asset_stack.id', 'is not', null),
+            eb.fn.coalesce(eb.fn('array_agg', ['ratio']), sql.lit('{}')).as('ratio'),
-          )
+            eb.fn.coalesce(eb.fn('array_agg', ['status']), sql.lit('{}')).as('status'),
-          .select((eb) => eb.fn.toJson(eb.table('stacked_assets').$castTo<Stack | null>()).as('stack')),
+            eb.fn.coalesce(eb.fn('array_agg', ['thumbhash']), sql.lit('{}')).as('thumbhash'),
+          ])
+          .$if(!!options.withStacked, (qb) =>
+            qb.select((eb) => eb.fn.coalesce(eb.fn('json_agg', ['stack']), sql.lit('[]')).as('stack')),
+          ),
       )
-      .$if(!!options.assetType, (qb) => qb.where('assets.type', '=', options.assetType!))
+      .selectFrom('agg')
-      .$if(options.isDuplicate !== undefined, (qb) =>
+      .select(sql<string>`to_json(agg)::text`.as('assets'));
-        qb.where('assets.duplicateId', options.isDuplicate ? 'is not' : 'is', null),
+
-      )
+    return query.executeTakeFirstOrThrow();
-      .$if(!!options.isTrashed, (qb) => qb.where('assets.status', '!=', AssetStatus.DELETED))
-      .$if(!!options.tagId, (qb) => withTagId(qb, options.tagId!))
-      .where('assets.deletedAt', options.isTrashed ? 'is not' : 'is', null)
-      .where('assets.isVisible', '=', true)
-      .where(truncatedDate(options.size), '=', timeBucket.replace(/^[+-]/, ''))
-      .orderBy('assets.localDateTime', options.order ?? 'desc')
-      .execute();
   }
 
   @GenerateSql({ params: [DummyValue.UUID] })

server/src/repositories/event.repository.ts

@@ -19,7 +19,7 @@ import { ReleaseNotification, ServerVersionResponseDto } from 'src/dtos/server.d
 import { ImmichWorker, MetadataKey, QueueName } from 'src/enum';
 import { ConfigRepository } from 'src/repositories/config.repository';
 import { LoggingRepository } from 'src/repositories/logging.repository';
-import { JobItem } from 'src/types';
+import { JobItem, JobSource } from 'src/types';
 import { handlePromiseError } from 'src/utils/misc';
 
 type EmitHandlers = Partial<{ [T in EmitEvent]: Array<EventItem<T>> }>;
@@ -48,7 +48,7 @@ type EventMap = {
   'config.validate': [{ newConfig: SystemConfig; oldConfig: SystemConfig }];
 
   // album events
-  'album.update': [{ id: string; recipientIds: string[] }];
+  'album.update': [{ id: string; recipientId: string }];
   'album.invite': [{ id: string; userId: string }];
 
   // asset events
@@ -58,6 +58,7 @@ type EventMap = {
   'asset.show': [{ assetId: string; userId: string }];
   'asset.trash': [{ assetId: string; userId: string }];
   'asset.delete': [{ assetId: string; userId: string }];
+  'asset.metadataExtracted': [{ assetId: string; userId: string; source?: JobSource }];
 
   // asset bulk events
   'assets.trash': [{ assetIds: string[]; userId: string }];

server/src/repositories/job.repository.ts

@@ -9,7 +9,7 @@ import { JobName, JobStatus, MetadataKey, QueueCleanType, QueueName } from 'src/
 import { ConfigRepository } from 'src/repositories/config.repository';
 import { EventRepository } from 'src/repositories/event.repository';
 import { LoggingRepository } from 'src/repositories/logging.repository';
-import { IEntityJob, JobCounts, JobItem, JobOf, QueueStatus } from 'src/types';
+import { JobCounts, JobItem, JobOf, QueueStatus } from 'src/types';
 import { getKeyByValue, getMethodNames, ImmichStartupError } from 'src/utils/misc';
 
 type JobMapItem = {
@@ -206,7 +206,10 @@ export class JobRepository {
   private getJobOptions(item: JobItem): JobsOptions | null {
     switch (item.name) {
       case JobName.NOTIFY_ALBUM_UPDATE: {
-        return { jobId: item.data.id, delay: item.data?.delay };
+        return {
+          jobId: `${item.data.id}/${item.data.recipientId}`,
+          delay: item.data?.delay,
+        };
       }
       case JobName.STORAGE_TEMPLATE_MIGRATION_SINGLE: {
         return { jobId: item.data.id };
@@ -227,19 +230,12 @@ export class JobRepository {
     return this.moduleRef.get<Queue>(getQueueToken(queue), { strict: false });
   }
 
-  public async removeJob(jobId: string, name: JobName): Promise<IEntityJob | undefined> {
+  /** @deprecated */
-    const existingJob = await this.getQueue(this.getQueueName(name)).getJob(jobId);
+  // todo: remove this when asset notifications no longer need it.
-    if (!existingJob) {
+  public async removeJob(name: JobName, jobID: string): Promise<void> {
-      return;
+    const existingJob = await this.getQueue(this.getQueueName(name)).getJob(jobID);
-    }
+    if (existingJob) {
-    try {
       await existingJob.remove();
-    } catch (error: any) {
-      if (error.message?.includes('Missing key for job')) {
-        return;
-      }
-      throw error;
     }
-    return existingJob.data;
   }
 }

server/src/services/album.service.spec.ts

@@ -606,7 +606,7 @@ describe(AlbumService.name, () => {
       expect(mocks.album.addAssetIds).toHaveBeenCalledWith('album-123', ['asset-1', 'asset-2', 'asset-3']);
       expect(mocks.event.emit).toHaveBeenCalledWith('album.update', {
         id: 'album-123',
-        recipientIds: ['admin_id'],
+        recipientId: 'admin_id',
       });
     });
 

server/src/services/album.service.ts

@@ -170,8 +170,8 @@ export class AlbumService extends BaseService {
         (userId) => userId !== auth.user.id,
       );
 
-      if (allUsersExceptUs.length > 0) {
+      for (const recipientId of allUsersExceptUs) {
-        await this.eventRepository.emit('album.update', { id, recipientIds: allUsersExceptUs });
+        await this.eventRepository.emit('album.update', { id, recipientId });
       }
     }
 

server/src/services/job.service.spec.ts

@@ -239,10 +239,6 @@ describe(JobService.name, () => {
         item: { name: JobName.SIDECAR_DISCOVERY, data: { id: 'asset-1' } },
         jobs: [JobName.METADATA_EXTRACTION],
       },
-      {
-        item: { name: JobName.METADATA_EXTRACTION, data: { id: 'asset-1' } },
-        jobs: [JobName.STORAGE_TEMPLATE_MIGRATION_SINGLE],
-      },
       {
         item: { name: JobName.STORAGE_TEMPLATE_MIGRATION_SINGLE, data: { id: 'asset-1', source: 'upload' } },
         jobs: [JobName.GENERATE_THUMBNAILS],

server/src/services/job.service.ts

@@ -264,17 +264,6 @@ export class JobService extends BaseService {
         break;
       }
 
-      case JobName.METADATA_EXTRACTION: {
-        if (item.data.source === 'sidecar-write') {
-          const [asset] = await this.assetRepository.getByIdsWithAllRelationsButStacks([item.data.id]);
-          if (asset) {
-            this.eventRepository.clientSend('on_asset_update', asset.ownerId, mapAsset(asset));
-          }
-        }
-        await this.jobRepository.queue({ name: JobName.STORAGE_TEMPLATE_MIGRATION_SINGLE, data: item.data });
-        break;
-      }
-
       case JobName.STORAGE_TEMPLATE_MIGRATION_SINGLE: {
         if (item.data.source === 'upload' || item.data.source === 'copy') {
           await this.jobRepository.queue({ name: JobName.GENERATE_THUMBNAILS, data: item.data });

server/src/services/media.service.ts

@@ -266,7 +266,9 @@ export class MediaService extends BaseService {
 
     const { info, data, colorspace } = await this.decodeImage(
       extracted ? extracted.buffer : asset.originalPath,
-      asset.exifInfo,
+      // only specify orientation to extracted images which don't have EXIF orientation data
+      // or it can double rotate the image
+      extracted ? asset.exifInfo : { ...asset.exifInfo, orientation: null },
       convertFullsize ? undefined : image.preview.size,
     );
 

server/src/services/metadata.service.spec.ts

@@ -143,7 +143,8 @@ describe(MetadataService.name, () => {
 
     it('should handle an asset that could not be found', async () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(void 0);
-      await expect(sut.handleMetadataExtraction({ id: assetStub.image.id })).resolves.toBe(JobStatus.FAILED);
+
+      await sut.handleMetadataExtraction({ id: assetStub.image.id });
 
       expect(mocks.assetJob.getForMetadataExtraction).toHaveBeenCalledWith(assetStub.image.id);
       expect(mocks.asset.upsertExif).not.toHaveBeenCalled();
@@ -526,7 +527,7 @@ describe(MetadataService.name, () => {
         ContainerDirectory: [{ Foo: 100 }],
       });
 
-      await expect(sut.handleMetadataExtraction({ id: assetStub.image.id })).resolves.toBe(JobStatus.SUCCESS);
+      await sut.handleMetadataExtraction({ id: assetStub.image.id });
     });
 
     it('should extract the correct video orientation', async () => {
@@ -1201,7 +1202,7 @@ describe(MetadataService.name, () => {
     it('should handle livePhotoCID not set', async () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(assetStub.image);
 
-      await expect(sut.handleMetadataExtraction({ id: assetStub.image.id })).resolves.toBe(JobStatus.SUCCESS);
+      await sut.handleMetadataExtraction({ id: assetStub.image.id });
 
       expect(mocks.assetJob.getForMetadataExtraction).toHaveBeenCalledWith(assetStub.image.id);
       expect(mocks.asset.findLivePhotoMatch).not.toHaveBeenCalled();
@@ -1214,9 +1215,7 @@ describe(MetadataService.name, () => {
       mocks.assetJob.getForMetadataExtraction.mockResolvedValue(assetStub.livePhotoMotionAsset);
       mockReadTags({ ContentIdentifier: 'CID' });
 
-      await expect(sut.handleMetadataExtraction({ id: assetStub.livePhotoMotionAsset.id })).resolves.toBe(
+      await sut.handleMetadataExtraction({ id: assetStub.livePhotoMotionAsset.id });
-        JobStatus.SUCCESS,
-      );
 
       expect(mocks.assetJob.getForMetadataExtraction).toHaveBeenCalledWith(assetStub.livePhotoMotionAsset.id);
       expect(mocks.asset.findLivePhotoMatch).toHaveBeenCalledWith({
@@ -1235,9 +1234,7 @@ describe(MetadataService.name, () => {
       mocks.asset.findLivePhotoMatch.mockResolvedValue(assetStub.livePhotoMotionAsset);
       mockReadTags({ ContentIdentifier: 'CID' });
 
-      await expect(sut.handleMetadataExtraction({ id: assetStub.livePhotoStillAsset.id })).resolves.toBe(
+      await sut.handleMetadataExtraction({ id: assetStub.livePhotoStillAsset.id });
-        JobStatus.SUCCESS,
-      );
 
       expect(mocks.assetJob.getForMetadataExtraction).toHaveBeenCalledWith(assetStub.livePhotoStillAsset.id);
       expect(mocks.asset.findLivePhotoMatch).toHaveBeenCalledWith({
@@ -1261,9 +1258,7 @@ describe(MetadataService.name, () => {
       mocks.asset.findLivePhotoMatch.mockResolvedValue(assetStub.livePhotoMotionAsset);
       mockReadTags({ ContentIdentifier: 'CID' });
 
-      await expect(sut.handleMetadataExtraction({ id: assetStub.livePhotoStillAsset.id })).resolves.toBe(
+      await sut.handleMetadataExtraction({ id: assetStub.livePhotoStillAsset.id });
-        JobStatus.SUCCESS,
-      );
 
       expect(mocks.event.emit).toHaveBeenCalledWith('asset.hide', {
         userId: assetStub.livePhotoMotionAsset.ownerId,
@@ -1279,10 +1274,12 @@ describe(MetadataService.name, () => {
       mocks.asset.findLivePhotoMatch.mockResolvedValue(assetStub.livePhotoMotionAsset);
       mockReadTags({ ContentIdentifier: 'CID' });
 
-      await expect(sut.handleMetadataExtraction({ id: assetStub.livePhotoStillAsset.id })).resolves.toBe(
+      await sut.handleMetadataExtraction({ id: assetStub.livePhotoStillAsset.id });
-        JobStatus.SUCCESS,
-      );
 
+      expect(mocks.event.emit).toHaveBeenCalledWith('asset.metadataExtracted', {
+        assetId: assetStub.livePhotoStillAsset.id,
+        userId: assetStub.livePhotoStillAsset.ownerId,
+      });
       expect(mocks.asset.findLivePhotoMatch).toHaveBeenCalledWith({
         ownerId: 'user-id',
         otherAssetId: 'live-photo-still-asset',

server/src/services/metadata.service.ts

@@ -182,14 +182,14 @@ export class MetadataService extends BaseService {
   }
 
   @OnJob({ name: JobName.METADATA_EXTRACTION, queue: QueueName.METADATA_EXTRACTION })
-  async handleMetadataExtraction(data: JobOf<JobName.METADATA_EXTRACTION>): Promise<JobStatus> {
+  async handleMetadataExtraction(data: JobOf<JobName.METADATA_EXTRACTION>) {
     const [{ metadata, reverseGeocoding }, asset] = await Promise.all([
       this.getConfig({ withCache: true }),
       this.assetJobRepository.getForMetadataExtraction(data.id),
     ]);
 
     if (!asset) {
-      return JobStatus.FAILED;
+      return;
     }
 
     const [exifTags, stats] = await Promise.all([
@@ -283,7 +283,11 @@ export class MetadataService extends BaseService {
 
     await this.assetRepository.upsertJobStatus({ assetId: asset.id, metadataExtractedAt: new Date() });
 
-    return JobStatus.SUCCESS;
+    await this.eventRepository.emit('asset.metadataExtracted', {
+      assetId: asset.id,
+      userId: asset.ownerId,
+      source: data.source,
+    });
   }
 
   @OnJob({ name: JobName.QUEUE_SIDECAR, queue: QueueName.SIDECAR })

server/src/services/notification.service.spec.ts

@@ -154,10 +154,10 @@ describe(NotificationService.name, () => {
 
   describe('onAlbumUpdateEvent', () => {
     it('should queue notify album update event', async () => {
-      await sut.onAlbumUpdate({ id: 'album', recipientIds: ['42'] });
+      await sut.onAlbumUpdate({ id: 'album', recipientId: '42' });
       expect(mocks.job.queue).toHaveBeenCalledWith({
         name: JobName.NOTIFY_ALBUM_UPDATE,
-        data: { id: 'album', recipientIds: ['42'], delay: 300_000 },
+        data: { id: 'album', recipientId: '42', delay: 300_000 },
       });
     });
   });
@@ -414,14 +414,14 @@ describe(NotificationService.name, () => {
 
   describe('handleAlbumUpdate', () => {
     it('should skip if album could not be found', async () => {
-      await expect(sut.handleAlbumUpdate({ id: '', recipientIds: ['1'] })).resolves.toBe(JobStatus.SKIPPED);
+      await expect(sut.handleAlbumUpdate({ id: '', recipientId: '1' })).resolves.toBe(JobStatus.SKIPPED);
       expect(mocks.user.get).not.toHaveBeenCalled();
     });
 
     it('should skip if owner could not be found', async () => {
       mocks.album.getById.mockResolvedValue(albumStub.emptyWithValidThumbnail);
 
-      await expect(sut.handleAlbumUpdate({ id: '', recipientIds: ['1'] })).resolves.toBe(JobStatus.SKIPPED);
+      await expect(sut.handleAlbumUpdate({ id: '', recipientId: '1' })).resolves.toBe(JobStatus.SKIPPED);
       expect(mocks.systemMetadata.get).not.toHaveBeenCalled();
     });
 
@@ -434,7 +434,7 @@ describe(NotificationService.name, () => {
       mocks.email.renderEmail.mockResolvedValue({ html: '', text: '' });
       mocks.assetJob.getAlbumThumbnailFiles.mockResolvedValue([]);
 
-      await sut.handleAlbumUpdate({ id: '', recipientIds: [userStub.user1.id] });
+      await sut.handleAlbumUpdate({ id: '', recipientId: userStub.user1.id });
       expect(mocks.user.get).toHaveBeenCalledWith(userStub.user1.id, { withDeleted: false });
       expect(mocks.email.renderEmail).not.toHaveBeenCalled();
     });
@@ -456,7 +456,7 @@ describe(NotificationService.name, () => {
       mocks.email.renderEmail.mockResolvedValue({ html: '', text: '' });
       mocks.assetJob.getAlbumThumbnailFiles.mockResolvedValue([]);
 
-      await sut.handleAlbumUpdate({ id: '', recipientIds: [userStub.user1.id] });
+      await sut.handleAlbumUpdate({ id: '', recipientId: userStub.user1.id });
       expect(mocks.user.get).toHaveBeenCalledWith(userStub.user1.id, { withDeleted: false });
       expect(mocks.email.renderEmail).not.toHaveBeenCalled();
     });
@@ -478,7 +478,7 @@ describe(NotificationService.name, () => {
       mocks.email.renderEmail.mockResolvedValue({ html: '', text: '' });
       mocks.assetJob.getAlbumThumbnailFiles.mockResolvedValue([]);
 
-      await sut.handleAlbumUpdate({ id: '', recipientIds: [userStub.user1.id] });
+      await sut.handleAlbumUpdate({ id: '', recipientId: userStub.user1.id });
       expect(mocks.user.get).toHaveBeenCalledWith(userStub.user1.id, { withDeleted: false });
       expect(mocks.email.renderEmail).not.toHaveBeenCalled();
     });
@@ -492,21 +492,21 @@ describe(NotificationService.name, () => {
       mocks.email.renderEmail.mockResolvedValue({ html: '', text: '' });
       mocks.assetJob.getAlbumThumbnailFiles.mockResolvedValue([]);
 
-      await sut.handleAlbumUpdate({ id: '', recipientIds: [userStub.user1.id] });
+      await sut.handleAlbumUpdate({ id: '', recipientId: userStub.user1.id });
       expect(mocks.user.get).toHaveBeenCalledWith(userStub.user1.id, { withDeleted: false });
       expect(mocks.email.renderEmail).toHaveBeenCalled();
       expect(mocks.job.queue).toHaveBeenCalled();
     });
 
     it('should add new recipients for new images if job is already queued', async () => {
-      mocks.job.removeJob.mockResolvedValue({ id: '1', recipientIds: ['2', '3', '4'] } as INotifyAlbumUpdateJob);
+      await sut.onAlbumUpdate({ id: '1', recipientId: '2' } as INotifyAlbumUpdateJob);
-      await sut.onAlbumUpdate({ id: '1', recipientIds: ['1', '2', '3'] } as INotifyAlbumUpdateJob);
+      expect(mocks.job.removeJob).toHaveBeenCalledWith(JobName.NOTIFY_ALBUM_UPDATE, '1/2');
       expect(mocks.job.queue).toHaveBeenCalledWith({
         name: JobName.NOTIFY_ALBUM_UPDATE,
         data: {
           id: '1',
           delay: 300_000,
-          recipientIds: ['1', '2', '3', '4'],
+          recipientId: '2',
         },
       });
     });

server/src/services/notification.service.ts

@@ -1,5 +1,6 @@
 import { BadRequestException, Injectable } from '@nestjs/common';
 import { OnEvent, OnJob } from 'src/decorators';
+import { mapAsset } from 'src/dtos/asset-response.dto';
 import { AuthDto } from 'src/dtos/auth.dto';
 import {
   mapNotification,
@@ -22,7 +23,7 @@ import {
 import { EmailTemplate } from 'src/repositories/email.repository';
 import { ArgOf } from 'src/repositories/event.repository';
 import { BaseService } from 'src/services/base.service';
-import { EmailImageAttachment, IEntityJob, INotifyAlbumUpdateJob, JobItem, JobOf } from 'src/types';
+import { EmailImageAttachment, JobOf } from 'src/types';
 import { getFilenameExtension } from 'src/utils/file';
 import { getExternalDomain } from 'src/utils/misc';
 import { isEqualObject } from 'src/utils/object';
@@ -152,6 +153,18 @@ export class NotificationService extends BaseService {
     this.eventRepository.clientSend('on_asset_trash', userId, assetIds);
   }
 
+  @OnEvent({ name: 'asset.metadataExtracted' })
+  async onAssetMetadataExtracted({ assetId, userId, source }: ArgOf<'asset.metadataExtracted'>) {
+    if (source !== 'sidecar-write') {
+      return;
+    }
+
+    const [asset] = await this.assetRepository.getByIdsWithAllRelationsButStacks([assetId]);
+    if (asset) {
+      this.eventRepository.clientSend('on_asset_update', userId, mapAsset(asset));
+    }
+  }
+
   @OnEvent({ name: 'assets.restore' })
   onAssetsRestore({ assetIds, userId }: ArgOf<'assets.restore'>) {
     this.eventRepository.clientSend('on_asset_restore', userId, assetIds);
@@ -185,30 +198,12 @@ export class NotificationService extends BaseService {
   }
 
   @OnEvent({ name: 'album.update' })
-  async onAlbumUpdate({ id, recipientIds }: ArgOf<'album.update'>) {
+  async onAlbumUpdate({ id, recipientId }: ArgOf<'album.update'>) {
-    // if recipientIds is empty, album likely only has one user part of it, don't queue notification if so
+    await this.jobRepository.removeJob(JobName.NOTIFY_ALBUM_UPDATE, `${id}/${recipientId}`);
-    if (recipientIds.length === 0) {
+    await this.jobRepository.queue({
-      return;
-    }
-
-    const job: JobItem = {
       name: JobName.NOTIFY_ALBUM_UPDATE,
-      data: { id, recipientIds, delay: NotificationService.albumUpdateEmailDelayMs },
+      data: { id, recipientId, delay: NotificationService.albumUpdateEmailDelayMs },
-    };
+    });
-
-    const previousJobData = await this.jobRepository.removeJob(id, JobName.NOTIFY_ALBUM_UPDATE);
-    if (previousJobData && this.isAlbumUpdateJob(previousJobData)) {
-      for (const id of previousJobData.recipientIds) {
-        if (!recipientIds.includes(id)) {
-          recipientIds.push(id);
-        }
-      }
-    }
-    await this.jobRepository.queue(job);
-  }
-
-  private isAlbumUpdateJob(job: IEntityJob): job is INotifyAlbumUpdateJob {
-    return 'recipientIds' in job;
   }
 
   @OnEvent({ name: 'album.invite' })
@@ -399,7 +394,7 @@ export class NotificationService extends BaseService {
   }
 
   @OnJob({ name: JobName.NOTIFY_ALBUM_UPDATE, queue: QueueName.NOTIFICATION })
-  async handleAlbumUpdate({ id, recipientIds }: JobOf<JobName.NOTIFY_ALBUM_UPDATE>) {
+  async handleAlbumUpdate({ id, recipientId }: JobOf<JobName.NOTIFY_ALBUM_UPDATE>) {
     const album = await this.albumRepository.getById(id, { withAssets: false });
 
     if (!album) {
@@ -411,49 +406,44 @@ export class NotificationService extends BaseService {
       return JobStatus.SKIPPED;
     }
 
-    const recipients = [...album.albumUsers.map((user) => user.user), owner].filter((user) =>
-      recipientIds.includes(user.id),
-    );
     const attachment = await this.getAlbumThumbnailAttachment(album);
 
     const { server, templates } = await this.getConfig({ withCache: false });
 
-    for (const recipient of recipients) {
+    const user = await this.userRepository.get(recipientId, { withDeleted: false });
-      const user = await this.userRepository.get(recipient.id, { withDeleted: false });
+    if (!user) {
-      if (!user) {
+      return JobStatus.SKIPPED;
-        continue;
-      }
-
-      const { emailNotifications } = getPreferences(user.metadata);
-
-      if (!emailNotifications.enabled || !emailNotifications.albumUpdate) {
-        continue;
-      }
-
-      const { html, text } = await this.emailRepository.renderEmail({
-        template: EmailTemplate.ALBUM_UPDATE,
-        data: {
-          baseUrl: getExternalDomain(server),
-          albumId: album.id,
-          albumName: album.albumName,
-          recipientName: recipient.name,
-          cid: attachment ? attachment.cid : undefined,
-        },
-        customTemplate: templates.email.albumUpdateTemplate,
-      });
-
-      await this.jobRepository.queue({
-        name: JobName.SEND_EMAIL,
-        data: {
-          to: recipient.email,
-          subject: `New media has been added to an album - ${album.albumName}`,
-          html,
-          text,
-          imageAttachments: attachment ? [attachment] : undefined,
-        },
-      });
     }
 
+    const { emailNotifications } = getPreferences(user.metadata);
+
+    if (!emailNotifications.enabled || !emailNotifications.albumUpdate) {
+      return JobStatus.SKIPPED;
+    }
+
+    const { html, text } = await this.emailRepository.renderEmail({
+      template: EmailTemplate.ALBUM_UPDATE,
+      data: {
+        baseUrl: getExternalDomain(server),
+        albumId: album.id,
+        albumName: album.albumName,
+        recipientName: user.name,
+        cid: attachment ? attachment.cid : undefined,
+      },
+      customTemplate: templates.email.albumUpdateTemplate,
+    });
+
+    await this.jobRepository.queue({
+      name: JobName.SEND_EMAIL,
+      data: {
+        to: user.email,
+        subject: `New media has been added to an album - ${album.albumName}`,
+        html,
+        text,
+        imageAttachments: attachment ? [attachment] : undefined,
+      },
+    });
+
     return JobStatus.SUCCESS;
   }
 

server/src/services/storage-template.service.ts

@@ -116,6 +116,11 @@ export class StorageTemplateService extends BaseService {
     return { ...storageTokens, presetOptions: storagePresets };
   }
 
+  @OnEvent({ name: 'asset.metadataExtracted' })
+  async onAssetMetadataExtracted({ source, assetId }: ArgOf<'asset.metadataExtracted'>) {
+    await this.jobRepository.queue({ name: JobName.STORAGE_TEMPLATE_MIGRATION_SINGLE, data: { source, id: assetId } });
+  }
+
   @OnJob({ name: JobName.STORAGE_TEMPLATE_MIGRATION_SINGLE, queue: QueueName.STORAGE_TEMPLATE_MIGRATION })
   async handleMigrationSingle({ id }: JobOf<JobName.STORAGE_TEMPLATE_MIGRATION_SINGLE>): Promise<JobStatus> {
     const config = await this.getConfig({ withCache: true });

server/src/services/sync.service.ts

@@ -4,7 +4,7 @@ import { DateTime } from 'luxon';
 import { Writable } from 'node:stream';
 import { AUDIT_LOG_MAX_DURATION } from 'src/constants';
 import { SessionSyncCheckpoints } from 'src/db';
-import { AssetResponseDto, hexOrBufferToBase64, mapAsset } from 'src/dtos/asset-response.dto';
+import { AssetResponseDto, mapAsset } from 'src/dtos/asset-response.dto';
 import { AuthDto } from 'src/dtos/auth.dto';
 import {
   AssetDeltaSyncDto,
@@ -18,6 +18,7 @@ import { DatabaseAction, EntityType, Permission, SyncEntityType, SyncRequestType
 import { BaseService } from 'src/services/base.service';
 import { SyncAck } from 'src/types';
 import { getMyPartnerIds } from 'src/utils/asset.util';
+import { hexOrBufferToBase64 } from 'src/utils/bytes';
 import { setIsEqual } from 'src/utils/set';
 import { fromAck, serialize } from 'src/utils/sync';
 
@@ -141,7 +142,7 @@ export class SyncService extends BaseService {
                 updateId,
                 data: {
                   ...data,
-                  checksum: hexOrBufferToBase64(checksum),
+                  checksum: hexOrBufferToBase64(checksum)!,
                   thumbhash: thumbhash ? hexOrBufferToBase64(thumbhash) : null,
                 },
               }),
@@ -171,7 +172,7 @@ export class SyncService extends BaseService {
                 updateId,
                 data: {
                   ...data,
-                  checksum: hexOrBufferToBase64(checksum),
+                  checksum: hexOrBufferToBase64(checksum)!,
                   thumbhash: thumbhash ? hexOrBufferToBase64(thumbhash) : null,
                 },
               }),

server/src/services/timeline.service.spec.ts

@@ -1,9 +1,6 @@
 import { BadRequestException } from '@nestjs/common';
-import { TimeBucketSize } from 'src/repositories/asset.repository';
 import { TimelineService } from 'src/services/timeline.service';
-import { assetStub } from 'test/fixtures/asset.stub';
 import { authStub } from 'test/fixtures/auth.stub';
-import { factory } from 'test/small.factory';
 import { newTestService, ServiceMocks } from 'test/utils';
 
 describe(TimelineService.name, () => {
@@ -18,13 +15,10 @@ describe(TimelineService.name, () => {
     it("should return buckets if userId and albumId aren't set", async () => {
       mocks.asset.getTimeBuckets.mockResolvedValue([{ timeBucket: 'bucket', count: 1 }]);
 
-      await expect(
+      await expect(sut.getTimeBuckets(authStub.admin, {})).resolves.toEqual(
-        sut.getTimeBuckets(authStub.admin, {
+        expect.arrayContaining([{ timeBucket: 'bucket', count: 1 }]),
-          size: TimeBucketSize.DAY,
+      );
-        }),
-      ).resolves.toEqual(expect.arrayContaining([{ timeBucket: 'bucket', count: 1 }]));
       expect(mocks.asset.getTimeBuckets).toHaveBeenCalledWith({
-        size: TimeBucketSize.DAY,
         userIds: [authStub.admin.user.id],
       });
     });
@@ -33,35 +27,34 @@ describe(TimelineService.name, () => {
   describe('getTimeBucket', () => {
     it('should return the assets for a album time bucket if user has album.read', async () => {
       mocks.access.album.checkOwnerAccess.mockResolvedValue(new Set(['album-id']));
-      mocks.asset.getTimeBucket.mockResolvedValue([assetStub.image]);
+      const json = `[{ id: ['asset-id'] }]`;
+      mocks.asset.getTimeBucket.mockResolvedValue({ assets: json });
 
-      await expect(
+      await expect(sut.getTimeBucket(authStub.admin, { timeBucket: 'bucket', albumId: 'album-id' })).resolves.toEqual(
-        sut.getTimeBucket(authStub.admin, { size: TimeBucketSize.DAY, timeBucket: 'bucket', albumId: 'album-id' }),
+        json,
-      ).resolves.toEqual(expect.arrayContaining([expect.objectContaining({ id: 'asset-id' })]));
+      );
 
       expect(mocks.access.album.checkOwnerAccess).toHaveBeenCalledWith(authStub.admin.user.id, new Set(['album-id']));
       expect(mocks.asset.getTimeBucket).toHaveBeenCalledWith('bucket', {
-        size: TimeBucketSize.DAY,
         timeBucket: 'bucket',
         albumId: 'album-id',
       });
     });
 
     it('should return the assets for a archive time bucket if user has archive.read', async () => {
-      mocks.asset.getTimeBucket.mockResolvedValue([assetStub.image]);
+      const json = `[{ id: ['asset-id'] }]`;
+      mocks.asset.getTimeBucket.mockResolvedValue({ assets: json });
 
       await expect(
         sut.getTimeBucket(authStub.admin, {
-          size: TimeBucketSize.DAY,
           timeBucket: 'bucket',
           isArchived: true,
           userId: authStub.admin.user.id,
         }),
-      ).resolves.toEqual(expect.arrayContaining([expect.objectContaining({ id: 'asset-id' })]));
+      ).resolves.toEqual(json);
       expect(mocks.asset.getTimeBucket).toHaveBeenCalledWith(
         'bucket',
         expect.objectContaining({
-          size: TimeBucketSize.DAY,
           timeBucket: 'bucket',
           isArchived: true,
           userIds: [authStub.admin.user.id],
@@ -70,20 +63,19 @@ describe(TimelineService.name, () => {
     });
 
     it('should include partner shared assets', async () => {
-      mocks.asset.getTimeBucket.mockResolvedValue([assetStub.image]);
+      const json = `[{ id: ['asset-id'] }]`;
+      mocks.asset.getTimeBucket.mockResolvedValue({ assets: json });
       mocks.partner.getAll.mockResolvedValue([]);
 
       await expect(
         sut.getTimeBucket(authStub.admin, {
-          size: TimeBucketSize.DAY,
           timeBucket: 'bucket',
           isArchived: false,
           userId: authStub.admin.user.id,
           withPartners: true,
         }),
-      ).resolves.toEqual(expect.arrayContaining([expect.objectContaining({ id: 'asset-id' })]));
+      ).resolves.toEqual(json);
       expect(mocks.asset.getTimeBucket).toHaveBeenCalledWith('bucket', {
-        size: TimeBucketSize.DAY,
         timeBucket: 'bucket',
         isArchived: false,
         withPartners: true,
@@ -92,62 +84,37 @@ describe(TimelineService.name, () => {
     });
 
     it('should check permissions to read tag', async () => {
-      mocks.asset.getTimeBucket.mockResolvedValue([assetStub.image]);
+      const json = `[{ id: ['asset-id'] }]`;
+      mocks.asset.getTimeBucket.mockResolvedValue({ assets: json });
       mocks.access.tag.checkOwnerAccess.mockResolvedValue(new Set(['tag-123']));
 
       await expect(
         sut.getTimeBucket(authStub.admin, {
-          size: TimeBucketSize.DAY,
           timeBucket: 'bucket',
           userId: authStub.admin.user.id,
           tagId: 'tag-123',
         }),
-      ).resolves.toEqual(expect.arrayContaining([expect.objectContaining({ id: 'asset-id' })]));
+      ).resolves.toEqual(json);
       expect(mocks.asset.getTimeBucket).toHaveBeenCalledWith('bucket', {
-        size: TimeBucketSize.DAY,
         tagId: 'tag-123',
         timeBucket: 'bucket',
         userIds: [authStub.admin.user.id],
       });
     });
 
-    it('should strip metadata if showExif is disabled', async () => {
-      mocks.access.album.checkSharedLinkAccess.mockResolvedValue(new Set(['album-id']));
-      mocks.asset.getTimeBucket.mockResolvedValue([assetStub.image]);
-
-      const auth = factory.auth({ sharedLink: { showExif: false } });
-
-      const buckets = await sut.getTimeBucket(auth, {
-        size: TimeBucketSize.DAY,
-        timeBucket: 'bucket',
-        isArchived: true,
-        albumId: 'album-id',
-      });
-
-      expect(buckets).toEqual([expect.objectContaining({ id: 'asset-id' })]);
-      expect(buckets[0]).not.toHaveProperty('exif');
-      expect(mocks.asset.getTimeBucket).toHaveBeenCalledWith('bucket', {
-        size: TimeBucketSize.DAY,
-        timeBucket: 'bucket',
-        isArchived: true,
-        albumId: 'album-id',
-      });
-    });
-
     it('should return the assets for a library time bucket if user has library.read', async () => {
-      mocks.asset.getTimeBucket.mockResolvedValue([assetStub.image]);
+      const json = `[{ id: ['asset-id'] }]`;
+      mocks.asset.getTimeBucket.mockResolvedValue({ assets: json });
 
       await expect(
         sut.getTimeBucket(authStub.admin, {
-          size: TimeBucketSize.DAY,
           timeBucket: 'bucket',
           userId: authStub.admin.user.id,
         }),
-      ).resolves.toEqual(expect.arrayContaining([expect.objectContaining({ id: 'asset-id' })]));
+      ).resolves.toEqual(json);
       expect(mocks.asset.getTimeBucket).toHaveBeenCalledWith(
         'bucket',
         expect.objectContaining({
-          size: TimeBucketSize.DAY,
           timeBucket: 'bucket',
           userIds: [authStub.admin.user.id],
         }),
@@ -157,7 +124,6 @@ describe(TimelineService.name, () => {
     it('should throw an error if withParners is true and isArchived true or undefined', async () => {
       await expect(
         sut.getTimeBucket(authStub.admin, {
-          size: TimeBucketSize.DAY,
           timeBucket: 'bucket',
           isArchived: true,
           withPartners: true,
@@ -167,7 +133,6 @@ describe(TimelineService.name, () => {
 
       await expect(
         sut.getTimeBucket(authStub.admin, {
-          size: TimeBucketSize.DAY,
           timeBucket: 'bucket',
           isArchived: undefined,
           withPartners: true,
@@ -179,7 +144,6 @@ describe(TimelineService.name, () => {
     it('should throw an error if withParners is true and isFavorite is either true or false', async () => {
       await expect(
         sut.getTimeBucket(authStub.admin, {
-          size: TimeBucketSize.DAY,
           timeBucket: 'bucket',
           isFavorite: true,
           withPartners: true,
@@ -189,7 +153,6 @@ describe(TimelineService.name, () => {
 
       await expect(
         sut.getTimeBucket(authStub.admin, {
-          size: TimeBucketSize.DAY,
           timeBucket: 'bucket',
           isFavorite: false,
           withPartners: true,
@@ -201,7 +164,6 @@ describe(TimelineService.name, () => {
     it('should throw an error if withParners is true and isTrash is true', async () => {
       await expect(
         sut.getTimeBucket(authStub.admin, {
-          size: TimeBucketSize.DAY,
           timeBucket: 'bucket',
           isTrashed: true,
           withPartners: true,

server/src/services/timeline.service.ts

@@ -1,7 +1,7 @@
 import { BadRequestException, Injectable } from '@nestjs/common';
-import { AssetResponseDto, SanitizedAssetResponseDto, mapAsset } from 'src/dtos/asset-response.dto';
+import { Stack } from 'src/database';
 import { AuthDto } from 'src/dtos/auth.dto';
-import { TimeBucketAssetDto, TimeBucketDto, TimeBucketResponseDto } from 'src/dtos/time-bucket.dto';
+import { TimeBucketAssetDto, TimeBucketDto, TimeBucketsResponseDto } from 'src/dtos/time-bucket.dto';
 import { Permission } from 'src/enum';
 import { TimeBucketOptions } from 'src/repositories/asset.repository';
 import { BaseService } from 'src/services/base.service';
@@ -9,22 +9,32 @@ import { getMyPartnerIds } from 'src/utils/asset.util';
 
 @Injectable()
 export class TimelineService extends BaseService {
-  async getTimeBuckets(auth: AuthDto, dto: TimeBucketDto): Promise<TimeBucketResponseDto[]> {
+  async getTimeBuckets(auth: AuthDto, dto: TimeBucketDto): Promise<TimeBucketsResponseDto[]> {
     await this.timeBucketChecks(auth, dto);
     const timeBucketOptions = await this.buildTimeBucketOptions(auth, dto);
-    return this.assetRepository.getTimeBuckets(timeBucketOptions);
+    return await this.assetRepository.getTimeBuckets(timeBucketOptions);
   }
 
-  async getTimeBucket(
+  // pre-jsonified response
-    auth: AuthDto,
+  async getTimeBucket(auth: AuthDto, dto: TimeBucketAssetDto): Promise<string> {
-    dto: TimeBucketAssetDto,
-  ): Promise<AssetResponseDto[] | SanitizedAssetResponseDto[]> {
     await this.timeBucketChecks(auth, dto);
-    const timeBucketOptions = await this.buildTimeBucketOptions(auth, dto);
+    const timeBucketOptions = await this.buildTimeBucketOptions(auth, { ...dto });
-    const assets = await this.assetRepository.getTimeBucket(dto.timeBucket, timeBucketOptions);
+
-    return !auth.sharedLink || auth.sharedLink?.showExif
+    // TODO: use id cursor for pagination
-      ? assets.map((asset) => mapAsset(asset, { withStack: true, auth }))
+    const bucket = await this.assetRepository.getTimeBucket(dto.timeBucket, timeBucketOptions);
-      : assets.map((asset) => mapAsset(asset, { stripMetadata: true, auth }));
+    return bucket.assets;
+  }
+
+  mapStack(entity?: Stack | null) {
+    if (!entity) {
+      return null;
+    }
+
+    return {
+      id: entity.id!,
+      primaryAssetId: entity.primaryAssetId!,
+      assetCount: entity.assetCount as number,
+    };
   }
 
   private async buildTimeBucketOptions(auth: AuthDto, dto: TimeBucketDto): Promise<TimeBucketOptions> {

server/src/services/timeline.service.types.ts

@@ -0,0 +1,28 @@
+export type TimelineStack = {
+  id: string;
+  primaryAssetId: string;
+  assetCount: number;
+};
+
+export type AssetDescription = {
+  city: string | null;
+  country: string | null;
+};
+
+export type TimeBucketAssets = {
+  id: string[];
+  ownerId: string[];
+  ratio: number[];
+  isFavorite: number[];
+  isArchived: number[];
+  isTrashed: number[];
+  isImage: number[];
+  thumbhash: (string | null)[];
+  localDateTime: string[];
+  stack?: ([string, string] | null)[];
+  duration: (string | null)[];
+  projectionType: (string | null)[];
+  livePhotoVideoId: (string | null)[];
+  city: (string | null)[];
+  country: (string | null)[];
+};

server/src/types.ts

@@ -177,9 +177,10 @@ export interface IDelayedJob extends IBaseJob {
   delay?: number;
 }
 
+export type JobSource = 'upload' | 'sidecar-write' | 'copy';
 export interface IEntityJob extends IBaseJob {
   id: string;
-  source?: 'upload' | 'sidecar-write' | 'copy';
+  source?: JobSource;
   notify?: boolean;
 }
 
@@ -251,7 +252,7 @@ export interface INotifyAlbumInviteJob extends IEntityJob {
 }
 
 export interface INotifyAlbumUpdateJob extends IEntityJob, IDelayedJob {
-  recipientIds: string[];
+  recipientId: string;
 }
 
 export interface JobCounts {

server/src/utils/asset.util.ts

@@ -197,3 +197,16 @@ export const asRequest = (request: AuthRequest, file: Express.Multer.File) => {
     file: mapToUploadFile(file as ImmichFile),
   };
 };
+
+function isRotated90CW(orientation: number) {
+  return orientation === 5 || orientation === 6 || orientation === 90;
+}
+
+function isRotated270CW(orientation: number) {
+  return orientation === 7 || orientation === 8 || orientation === -90;
+}
+
+export function isFlipped(orientation?: string | null) {
+  const value = Number(orientation);
+  return value && (isRotated270CW(value) || isRotated90CW(value));
+}

server/src/utils/bytes.ts

@@ -22,3 +22,15 @@ export function asHumanReadable(bytes: number, precision = 1): string {
 
   return `${remainder.toFixed(magnitude == 0 ? 0 : precision)} ${units[magnitude]}`;
 }
+
+// if an asset is jsonified in the DB before being returned, its buffer fields will be hex-encoded strings
+export const hexOrBufferToBase64 = (encoded: string | Buffer | null) => {
+  if (!encoded) {
+    return null;
+  }
+  if (typeof encoded === 'string') {
+    return Buffer.from(encoded.slice(2), 'hex').toString('base64');
+  }
+
+  return encoded.toString('base64');
+};

server/src/utils/database.ts

@@ -262,7 +262,7 @@ export function withTags(eb: ExpressionBuilder<DB, 'assets'>) {
 }
 
 export function truncatedDate<O>(size: TimeBucketSize) {
-  return sql<O>`date_trunc(${size}, "localDateTime" at time zone 'UTC') at time zone 'UTC'`;
+  return sql<O>`date_trunc(${sql.lit(size)}, "localDateTime" at time zone 'UTC') at time zone 'UTC'`;
 }
 
 export function withTagId<O>(qb: SelectQueryBuilder<DB, 'assets', O>, tagId: string) {
@@ -276,6 +276,7 @@ export function withTagId<O>(qb: SelectQueryBuilder<DB, 'assets', O>, tagId: str
     ),
   );
 }
+
 const joinDeduplicationPlugin = new DeduplicateJoinsPlugin();
 /** TODO: This should only be used for search-related queries, not as a general purpose query builder */
 

server/src/workers/api.ts

@@ -14,7 +14,6 @@ import { LoggingRepository } from 'src/repositories/logging.repository';
 import { bootstrapTelemetry } from 'src/repositories/telemetry.repository';
 import { ApiService } from 'src/services/api.service';
 import { isStartUpError, useSwagger } from 'src/utils/misc';
-
 async function bootstrap() {
   process.title = 'immich-api';
 

server/test/fixtures/asset.stub.ts

@@ -257,6 +257,10 @@ export const assetStub = {
     duplicateId: null,
     isOffline: false,
     stack: null,
+    orientation: '',
+    projectionType: null,
+    height: 3840,
+    width: 2160,
   }),
 
   trashed: Object.freeze({

server/test/medium.factory.ts

@@ -142,18 +142,15 @@ export const getRepository = <K extends keyof RepositoriesTypes>(key: K, db: Kys
     }
 
     case 'database': {
-      const configRepo = new ConfigRepository();
+      return new DatabaseRepository(db, LoggingRepository.create(), new ConfigRepository());
-      return new DatabaseRepository(db, new LoggingRepository(undefined, configRepo), configRepo);
     }
 
     case 'email': {
-      const logger = new LoggingRepository(undefined, new ConfigRepository());
+      return new EmailRepository(LoggingRepository.create());
-      return new EmailRepository(logger);
     }
 
     case 'logger': {
-      const configMock = { getEnv: () => ({ noColor: false }) };
+      return LoggingRepository.create();
-      return new LoggingRepository(undefined, configMock as ConfigRepository);
     }
 
     case 'memory': {

server/test/medium/globalSetup.ts

@@ -42,7 +42,7 @@ const globalSetup = async () => {
   const db = new Kysely<DB>(getKyselyConfig({ connectionType: 'url', url: postgresUrl }));
 
   const configRepository = new ConfigRepository();
-  const logger = new LoggingRepository(undefined, configRepository);
+  const logger = LoggingRepository.create();
   await new DatabaseRepository(db, logger, configRepository).runMigrations();
 
   await db.destroy();

server/test/repositories/config.repository.mock.ts

@@ -10,6 +10,7 @@ const envData: EnvData = {
   buildMetadata: {},
   bull: {
     config: {
+      connection: {},
       prefix: 'immich_bull',
     },
     queues: [{ name: 'queue-1' }],

typescript-open-api/typescript-sdk/package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "typescript-sdk",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

web/package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@formatjs/icu-messageformat-parser": "^2.9.8",
         "@immich/sdk": "file:../open-api/typescript-sdk",
-        "@immich/ui": "^0.18.1",
+        "@immich/ui": "^0.19.0",
         "@mapbox/mapbox-gl-rtl-text": "0.2.3",
         "@mdi/js": "^7.4.47",
         "@photo-sphere-viewer/core": "^5.11.5",
@@ -1320,9 +1320,9 @@
       "link": true
     },
     "node_modules/@immich/ui": {
-      "version": "0.18.1",
+      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.19.0.tgz",
-      "integrity": "sha512-XWWO6OTfH3MektyxCn0hWefZyOGyWwwx/2zHinuShpxTHSyfveJ4mOkFP8DkyMz0dnvJ1EfdkPBMkld3y5R/Hw==",
+      "integrity": "sha512-XVjSUoQVIoe83pxM4q8kmlejb2xep/TZEfoGbasI7takEGKNiWEyXr5eZaXZCSVgq78fcNRr4jyWz290ZAXh7A==",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@mdi/js": "^7.4.47",

web/package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.18.1",
+    "@immich/ui": "^0.19.0",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",

web/src/app.css

@@ -8,7 +8,6 @@
     --immich-primary: 66 80 175;
     --immich-bg: 255 255 255;
     --immich-fg: 0 0 0;
-    --immich-gray: 246 246 244;
     --immich-error: 229 115 115;
     --immich-success: 129 199 132;
     --immich-warning: 255 183 77;
@@ -33,6 +32,7 @@
     --immich-ui-warning: 255 170 0;
     --immich-ui-info: 14 165 233;
     --immich-ui-default-border: 209 213 219;
+    --immich-ui-gray: 246 246 246;
   }
 
   .dark {
@@ -45,6 +45,7 @@
     --immich-ui-warning: 255 170 0;
     --immich-ui-info: 14 165 233;
     --immich-ui-default-border: 55 65 81;
+    --immich-ui-gray: 33 33 33;
   }
 }
 

web/src/lib/components/admin-page/delete-confirm-dialogue.svelte

@@ -47,8 +47,7 @@
 <ConfirmDialog
   title={$t('delete_user')}
   confirmText={forceDelete ? $t('permanently_delete') : $t('delete')}
-  onConfirm={handleDeleteUser}
+  onClose={(confirmed) => (confirmed ? handleDeleteUser() : onCancel())}
-  {onCancel}
   disabled={deleteButtonDisabled}
 >
   {#snippet promptSnippet()}

web/src/lib/components/admin-page/restore-dialogue.svelte

@@ -33,8 +33,7 @@
   title={$t('restore_user')}
   confirmText={$t('continue')}
   confirmColor="success"
-  onConfirm={handleRestoreUser}
+  onClose={(confirmed) => (confirmed ? handleRestoreUser() : onCancel())}
-  {onCancel}
 >
   {#snippet promptSnippet()}
     <p>

web/src/lib/components/admin-page/settings/auth/auth-settings.svelte

@@ -49,8 +49,7 @@
 {#if isConfirmOpen}
   <ConfirmDialog
     title={$t('admin.disable_login')}
-    onCancel={() => (isConfirmOpen = false)}
+    onClose={(confirmed) => (confirmed ? handleSave(true) : (isConfirmOpen = false))}
-    onConfirm={() => handleSave(true)}
   >
     {#snippet promptSnippet()}
       <div class="flex flex-col gap-4">

web/src/lib/components/album-page/album-options.svelte

@@ -1,27 +1,27 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import { handleError } from '$lib/utils/handle-error';
   import {
-    updateAlbumInfo,
+    AlbumUserRole,
+    AssetOrder,
     removeUserFromAlbum,
+    updateAlbumInfo,
+    updateAlbumUser,
     type AlbumResponseDto,
     type UserResponseDto,
-    AssetOrder,
-    AlbumUserRole,
-    updateAlbumUser,
   } from '@immich/sdk';
-  import { mdiArrowDownThin, mdiArrowUpThin, mdiPlus, mdiDotsVertical } from '@mdi/js';
+  import { mdiArrowDownThin, mdiArrowUpThin, mdiDotsVertical, mdiPlus } from '@mdi/js';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import SettingDropdown from '../shared-components/settings/setting-dropdown.svelte';
-  import type { RenderedOption } from '../elements/dropdown.svelte';
-  import { handleError } from '$lib/utils/handle-error';
   import { findKey } from 'lodash-es';
   import { t } from 'svelte-i18n';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import type { RenderedOption } from '../elements/dropdown.svelte';
-  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import SettingDropdown from '../shared-components/settings/setting-dropdown.svelte';
 
   interface Props {
     album: AlbumResponseDto;
@@ -195,7 +195,6 @@
     title={$t('album_remove_user')}
     prompt={$t('album_remove_user_confirmation', { values: { user: selectedRemoveUser.name } })}
     confirmText={$t('remove_user')}
-    onConfirm={handleRemoveUser}
+    onClose={(confirmed) => (confirmed ? handleRemoveUser() : (selectedRemoveUser = null))}
-    onCancel={() => (selectedRemoveUser = null)}
   />
 {/if}

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

@@ -1,25 +1,25 @@
 <script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
+  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { AssetStore } from '$lib/stores/assets-store.svelte';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
+  import { handlePromiseError } from '$lib/utils';
+  import { cancelMultiselect, downloadAlbum } from '$lib/utils/asset-utils';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
   import type { AlbumResponseDto, SharedLinkResponseDto, UserResponseDto } from '@immich/sdk';
-  import { AssetStore } from '$lib/stores/assets-store.svelte';
+  import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
-  import { cancelMultiselect, downloadAlbum } from '$lib/utils/asset-utils';
+  import { onDestroy } from 'svelte';
+  import { t } from 'svelte-i18n';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import DownloadAction from '../photos-page/actions/download-action.svelte';
   import AssetGrid from '../photos-page/asset-grid.svelte';
-  import AssetSelectControlBar from '../photos-page/asset-select-control-bar.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import ImmichLogoSmallLink from '../shared-components/immich-logo-small-link.svelte';
   import ThemeButton from '../shared-components/theme-button.svelte';
-  import { shortcut } from '$lib/actions/shortcut';
-  import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
-  import { handlePromiseError } from '$lib/utils';
   import AlbumSummary from './album-summary.svelte';
-  import { t } from 'svelte-i18n';
-  import { onDestroy } from 'svelte';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;

web/src/lib/components/album-page/share-info-modal.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import {
+    AlbumUserRole,
     getMyUser,
     removeUserFromAlbum,
+    updateAlbumUser,
     type AlbumResponseDto,
     type UserResponseDto,
-    updateAlbumUser,
-    AlbumUserRole,
   } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
   import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
   import { handleError } from '../../utils/handle-error';
-  import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
+  import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import UserAvatar from '../shared-components/user-avatar.svelte';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import { t } from 'svelte-i18n';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
 
   interface Props {
     album: AlbumResponseDto;
@@ -144,8 +144,7 @@
     title={$t('album_leave')}
     prompt={$t('album_leave_confirmation', { values: { album: album.albumName } })}
     confirmText={$t('leave')}
-    onConfirm={handleRemoveUser}
+    onClose={(confirmed) => (confirmed ? handleRemoveUser() : (selectedRemoveUser = null))}
-    onCancel={() => (selectedRemoveUser = null)}
   />
 {/if}
 
@@ -154,7 +153,6 @@
     title={$t('album_remove_user')}
     prompt={$t('album_remove_user_confirmation', { values: { user: selectedRemoveUser.name } })}
     confirmText={$t('remove_user')}
-    onConfirm={handleRemoveUser}
+    onClose={(confirmed) => (confirmed ? handleRemoveUser() : (selectedRemoveUser = null))}
-    onCancel={() => (selectedRemoveUser = null)}
   />
 {/if}

web/src/lib/components/asset-viewer/actions/action.ts

@@ -1,18 +1,19 @@
 import type { AssetAction } from '$lib/constants';
-import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
+import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
+import type { AlbumResponseDto } from '@immich/sdk';
 
 type ActionMap = {
-  [AssetAction.ARCHIVE]: { asset: AssetResponseDto };
+  [AssetAction.ARCHIVE]: { asset: TimelineAsset };
-  [AssetAction.UNARCHIVE]: { asset: AssetResponseDto };
+  [AssetAction.UNARCHIVE]: { asset: TimelineAsset };
-  [AssetAction.FAVORITE]: { asset: AssetResponseDto };
+  [AssetAction.FAVORITE]: { asset: TimelineAsset };
-  [AssetAction.UNFAVORITE]: { asset: AssetResponseDto };
+  [AssetAction.UNFAVORITE]: { asset: TimelineAsset };
-  [AssetAction.TRASH]: { asset: AssetResponseDto };
+  [AssetAction.TRASH]: { asset: TimelineAsset };
-  [AssetAction.DELETE]: { asset: AssetResponseDto };
+  [AssetAction.DELETE]: { asset: TimelineAsset };
-  [AssetAction.RESTORE]: { asset: AssetResponseDto };
+  [AssetAction.RESTORE]: { asset: TimelineAsset };
-  [AssetAction.ADD]: { asset: AssetResponseDto };
+  [AssetAction.ADD]: { asset: TimelineAsset };
-  [AssetAction.ADD_TO_ALBUM]: { asset: AssetResponseDto; album: AlbumResponseDto };
+  [AssetAction.ADD_TO_ALBUM]: { asset: TimelineAsset; album: AlbumResponseDto };
-  [AssetAction.UNSTACK]: { assets: AssetResponseDto[] };
+  [AssetAction.UNSTACK]: { assets: TimelineAsset[] };
-  [AssetAction.KEEP_THIS_DELETE_OTHERS]: { asset: AssetResponseDto };
+  [AssetAction.KEEP_THIS_DELETE_OTHERS]: { asset: TimelineAsset };
 };
 
 export type Action = {

web/src/lib/components/asset-viewer/actions/add-to-album-action.svelte

@@ -6,6 +6,7 @@
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
   import { AssetAction } from '$lib/constants';
   import { addAssetsToAlbum, addAssetsToNewAlbum } from '$lib/utils/asset-utils';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
   import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -24,14 +25,14 @@
     showSelectionModal = false;
     const album = await addAssetsToNewAlbum(albumName, [asset.id]);
     if (album) {
-      onAction({ type: AssetAction.ADD_TO_ALBUM, asset, album });
+      onAction({ type: AssetAction.ADD_TO_ALBUM, asset: toTimelineAsset(asset), album });
     }
   };
 
   const handleAddToAlbum = async (album: AlbumResponseDto) => {
     showSelectionModal = false;
     await addAssetsToAlbum(album.id, [asset.id]);
-    onAction({ type: AssetAction.ADD_TO_ALBUM, asset, album });
+    onAction({ type: AssetAction.ADD_TO_ALBUM, asset: toTimelineAsset(asset), album });
   };
 </script>
 

web/src/lib/components/asset-viewer/actions/archive-action.svelte

@@ -4,6 +4,7 @@
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { AssetAction } from '$lib/constants';
   import { toggleArchive } from '$lib/utils/asset-utils';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import type { AssetResponseDto } from '@immich/sdk';
   import { mdiArchiveArrowDownOutline, mdiArchiveArrowUpOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -18,11 +19,11 @@
 
   const onArchive = async () => {
     if (!asset.isArchived) {
-      preAction({ type: AssetAction.ARCHIVE, asset });
+      preAction({ type: AssetAction.ARCHIVE, asset: toTimelineAsset(asset) });
     }
     const updatedAsset = await toggleArchive(asset);
     if (updatedAsset) {
-      onAction({ type: asset.isArchived ? AssetAction.ARCHIVE : AssetAction.UNARCHIVE, asset });
+      onAction({ type: asset.isArchived ? AssetAction.ARCHIVE : AssetAction.UNARCHIVE, asset: toTimelineAsset(asset) });
     }
   };
 </script>

web/src/lib/components/asset-viewer/actions/delete-action.svelte

@@ -11,6 +11,7 @@
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { handleError } from '$lib/utils/handle-error';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { deleteAssets, type AssetResponseDto } from '@immich/sdk';
   import { mdiDeleteForeverOutline, mdiDeleteOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -42,9 +43,9 @@
 
   const trashAsset = async () => {
     try {
-      preAction({ type: AssetAction.TRASH, asset });
+      preAction({ type: AssetAction.TRASH, asset: toTimelineAsset(asset) });
       await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id] } });
-      onAction({ type: AssetAction.TRASH, asset });
+      onAction({ type: AssetAction.TRASH, asset: toTimelineAsset(asset) });
 
       notificationController.show({
         message: $t('moved_to_trash'),
@@ -58,7 +59,7 @@
   const deleteAsset = async () => {
     try {
       await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });
-      onAction({ type: AssetAction.DELETE, asset });
+      onAction({ type: AssetAction.DELETE, asset: toTimelineAsset(asset) });
 
       notificationController.show({
         message: $t('permanently_deleted_asset'),

web/src/lib/components/asset-viewer/actions/favorite-action.svelte

@@ -7,6 +7,7 @@
   } from '$lib/components/shared-components/notification/notification';
   import { AssetAction } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { updateAsset, type AssetResponseDto } from '@immich/sdk';
   import { mdiHeart, mdiHeartOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -30,7 +31,10 @@
 
       asset = { ...asset, isFavorite: data.isFavorite };
 
-      onAction({ type: asset.isFavorite ? AssetAction.FAVORITE : AssetAction.UNFAVORITE, asset });
+      onAction({
+        type: asset.isFavorite ? AssetAction.FAVORITE : AssetAction.UNFAVORITE,
+        asset: toTimelineAsset(asset),
+      });
 
       notificationController.show({
         type: NotificationType.Info,

web/src/lib/components/asset-viewer/actions/keep-this-delete-others.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import { AssetAction } from '$lib/constants';
   import { keepThisDeleteOthers } from '$lib/utils/asset-utils';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import type { AssetResponseDto, StackResponseDto } from '@immich/sdk';
   import { mdiPinOutline } from '@mdi/js';
-  import type { OnAction } from './action';
   import { t } from 'svelte-i18n';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
+  import type { OnAction } from './action';
 
   interface Props {
     stack: StackResponseDto;
@@ -29,7 +30,7 @@
 
     const keptAsset = await keepThisDeleteOthers(asset, stack);
     if (keptAsset) {
-      onAction({ type: AssetAction.UNSTACK, assets: [keptAsset] });
+      onAction({ type: AssetAction.UNSTACK, assets: [toTimelineAsset(keptAsset)] });
     }
   };
 </script>

web/src/lib/components/asset-viewer/actions/restore-action.svelte

@@ -6,6 +6,7 @@
   } from '$lib/components/shared-components/notification/notification';
   import { AssetAction } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { restoreAssets, type AssetResponseDto } from '@immich/sdk';
   import { mdiHistory } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -23,7 +24,7 @@
       await restoreAssets({ bulkIdsDto: { ids: [asset.id] } });
       asset.isTrashed = false;
 
-      onAction({ type: AssetAction.RESTORE, asset });
+      onAction({ type: AssetAction.RESTORE, asset: toTimelineAsset(asset) });
 
       notificationController.show({
         type: NotificationType.Info,

web/src/lib/components/asset-viewer/actions/unstack-action.svelte

@@ -2,6 +2,7 @@
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { AssetAction } from '$lib/constants';
   import { deleteStack } from '$lib/utils/asset-utils';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import type { StackResponseDto } from '@immich/sdk';
   import { mdiImageMinusOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -17,7 +18,7 @@
   const handleUnstack = async () => {
     const unstackedAssets = await deleteStack([stack.id]);
     if (unstackedAssets) {
-      onAction({ type: AssetAction.UNSTACK, assets: unstackedAssets });
+      onAction({ type: AssetAction.UNSTACK, assets: unstackedAssets.map((a) => toTimelineAsset(a)) });
     }
   };
 </script>

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts

@@ -13,6 +13,7 @@ describe('AssetViewerNavBar component', () => {
     showDownloadButton: false,
     showMotionPlayButton: false,
     showShareButton: false,
+    preAction: () => {},
     onZoomImage: () => {},
     onCopyImage: () => {},
     onAction: () => {},

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

@@ -9,6 +9,7 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { closeEditorCofirm } from '$lib/stores/asset-editor.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
   import { isShowDetail } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { user } from '$lib/stores/user.store';
@@ -16,6 +17,7 @@
   import { getAssetJobMessage, getSharedLink, handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { SlideshowHistory } from '$lib/utils/slideshow-history';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import {
     AssetJobName,
     AssetTypeEnum,
@@ -47,7 +49,7 @@
 
   interface Props {
     asset: AssetResponseDto;
-    preloadAssets?: AssetResponseDto[];
+    preloadAssets?: TimelineAsset[];
     showNavigation?: boolean;
     withStacked?: boolean;
     isShared?: boolean;
@@ -56,10 +58,10 @@
     preAction?: PreAction | undefined;
     onAction?: OnAction | undefined;
     showCloseButton?: boolean;
-    onClose: (dto: { asset: AssetResponseDto }) => void;
+    onClose: (asset: AssetResponseDto) => void;
     onNext: () => Promise<HasAsset>;
     onPrevious: () => Promise<HasAsset>;
-    onRandom: () => Promise<AssetResponseDto | undefined>;
+    onRandom: () => Promise<{ id: string } | undefined>;
     copyImage?: () => Promise<void>;
   }
 
@@ -81,7 +83,7 @@
     copyImage = $bindable(),
   }: Props = $props();
 
-  const { setAsset } = assetViewingStore;
+  const { setAssetId } = assetViewingStore;
   const {
     restartProgress: restartSlideshowProgress,
     stopProgress: stopSlideshowProgress,
@@ -121,7 +123,7 @@
 
     untrack(() => {
       if (stack && stack?.assets.length > 1) {
-        preloadAssets.push(stack.assets[1]);
+        preloadAssets.push(toTimelineAsset(stack.assets[1]));
       }
     });
   };
@@ -161,7 +163,7 @@
     slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
       if (value === SlideshowState.PlaySlideshow) {
         slideshowHistory.reset();
-        slideshowHistory.queue(asset);
+        slideshowHistory.queue(toTimelineAsset(asset));
         handlePromiseError(handlePlaySlideshow());
       } else if (value === SlideshowState.StopSlideshow) {
         handlePromiseError(handleStopSlideshow());
@@ -171,7 +173,7 @@
     shuffleSlideshowUnsubscribe = slideshowNavigation.subscribe((value) => {
       if (value === SlideshowNavigation.Shuffle) {
         slideshowHistory.reset();
-        slideshowHistory.queue(asset);
+        slideshowHistory.queue(toTimelineAsset(asset));
       }
     });
 
@@ -225,7 +227,7 @@
   };
 
   const closeViewer = () => {
-    onClose({ asset });
+    onClose(asset);
   };
 
   const closeEditor = () => {
@@ -292,8 +294,7 @@
   let assetViewerHtmlElement = $state<HTMLElement>();
 
   const slideshowHistory = new SlideshowHistory((asset) => {
-    setAsset(asset);
+    handlePromiseError(setAssetId(asset.id).then(() => ($restartSlideshowProgress = true)));
-    $restartSlideshowProgress = true;
   });
 
   const handleVideoStarted = () => {
@@ -562,8 +563,8 @@
               imageClass={{ 'border-2 border-white': stackedAsset.id === asset.id }}
               brokenAssetClass="text-xs"
               dimmed={stackedAsset.id !== asset.id}
-              asset={stackedAsset}
+              asset={toTimelineAsset(stackedAsset)}
-              onClick={(stackedAsset) => {
+              onClick={() => {
                 asset = stackedAsset;
               }}
               onMouseEvent={({ isMouseOver }) => handleStackedAssetMouseEvent(isMouseOver, stackedAsset)}

web/src/lib/components/asset-viewer/editor/crop-tool/crop-area.svelte

@@ -1,15 +1,10 @@
 <script lang="ts">
-  import { onMount, onDestroy, tick } from 'svelte';
-  import { t } from 'svelte-i18n';
   import { getAssetOriginalUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { getAltText } from '$lib/utils/thumbnail-util';
+  import { onDestroy, onMount, tick } from 'svelte';
+  import { t } from 'svelte-i18n';
 
-  import { imgElement, cropAreaEl, resetCropStore, overlayEl, isResizingOrDragging, cropFrame } from './crop-store';
-  import { draw } from './drawing';
-  import { onImageLoad, resizeCanvas } from './image-loading';
-  import { handleMouseDown, handleMouseMove, handleMouseUp } from './mouse-handlers';
-  import { recalculateCrop, animateCropChange } from './crop-settings';
   import {
     changedOriention,
     cropAspectRatio,
@@ -17,7 +12,13 @@
     resetGlobalCropStore,
     rotateDegrees,
   } from '$lib/stores/asset-editor.store';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import type { AssetResponseDto } from '@immich/sdk';
+  import { animateCropChange, recalculateCrop } from './crop-settings';
+  import { cropAreaEl, cropFrame, imgElement, isResizingOrDragging, overlayEl, resetCropStore } from './crop-store';
+  import { draw } from './drawing';
+  import { onImageLoad, resizeCanvas } from './image-loading';
+  import { handleMouseDown, handleMouseMove, handleMouseUp } from './mouse-handlers';
 
   interface Props {
     asset: AssetResponseDto;
@@ -81,7 +82,7 @@
     aria-label="Crop area"
     type="button"
   >
-    <img draggable="false" src={img?.src} alt={$getAltText(asset)} />
+    <img draggable="false" src={img?.src} alt={$getAltText(toTimelineAsset(asset))} />
     <div class={`${$isResizingOrDragging ? 'resizing' : ''} crop-frame`} bind:this={$cropFrame}>
       <div class="grid"></div>
       <div class="corner top-left"></div>

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

@@ -1,13 +1,13 @@
 <script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  import { editTypes, showCancelConfirmDialog } from '$lib/stores/asset-editor.store';
   import { websocketEvents } from '$lib/stores/websocket';
   import { type AssetResponseDto } from '@immich/sdk';
   import { mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
-  import CircleIconButton from '../../elements/buttons/circle-icon-button.svelte';
   import { t } from 'svelte-i18n';
-  import { editTypes, showCancelConfirmDialog } from '$lib/stores/asset-editor.store';
+  import CircleIconButton from '../../elements/buttons/circle-icon-button.svelte';
-  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
-  import { shortcut } from '$lib/actions/shortcut';
 
   onMount(() => {
     return websocketEvents.on('on_asset_update', (assetUpdate) => {
@@ -31,10 +31,13 @@
   setTimeout(() => {
     onUpdateSelectedType(selectedType);
   }, 1);
+
   function selectType(name: string) {
     selectedType = name;
     onUpdateSelectedType(selectedType);
   }
+
+  const onConfirm = () => (typeof $showCancelConfirmDialog === 'boolean' ? null : $showCancelConfirmDialog());
 </script>
 
 <svelte:window use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onClose }} />
@@ -71,9 +74,6 @@
     cancelColor="secondary"
     confirmColor="danger"
     confirmText={$t('close')}
-    onCancel={() => {
+    onClose={(confirmed) => (confirmed ? onConfirm() : ($showCancelConfirmDialog = false))}
-      $showCancelConfirmDialog = false;
-    }}
-    onConfirm={() => (typeof $showCancelConfirmDialog === 'boolean' ? null : $showCancelConfirmDialog())}
   />
 {/if}

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

@@ -1,31 +1,32 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
   import { zoomImageAction, zoomed } from '$lib/actions/zoom-image';
+  import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
+  import { photoViewerImgElement, type TimelineAsset } from '$lib/stores/assets-store.svelte';
+  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
   import { SlideshowLook, SlideshowState, slideshowLookCssMapping, slideshowStore } from '$lib/stores/slideshow.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
   import { getAssetOriginalUrl, getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { canCopyImageToClipboard, copyImageToClipboard, isWebCompatibleImage } from '$lib/utils/asset-utils';
+  import { handleError } from '$lib/utils/handle-error';
   import { getBoundingBox } from '$lib/utils/people-utils';
+  import { cancelImageUrl } from '$lib/utils/sw-messaging';
   import { getAltText } from '$lib/utils/thumbnail-util';
-  import { AssetMediaSize, AssetTypeEnum, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { AssetMediaSize, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
   import { onDestroy, onMount } from 'svelte';
+  import { swipe, type SwipeCustomEvent } from 'svelte-gestures';
   import { t } from 'svelte-i18n';
-  import { type SwipeCustomEvent, swipe } from 'svelte-gestures';
   import { fade } from 'svelte/transition';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import { handleError } from '$lib/utils/handle-error';
-  import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
-  import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
-  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
-  import { cancelImageUrl, preloadImageUrl } from '$lib/utils/sw-messaging';
 
   interface Props {
     asset: AssetResponseDto;
-    preloadAssets?: AssetResponseDto[] | undefined;
+    preloadAssets?: TimelineAsset[] | undefined;
     element?: HTMLDivElement | undefined;
     haveFadeTransition?: boolean;
     sharedLink?: SharedLinkResponseDto | undefined;
@@ -69,10 +70,11 @@
     $boundingBoxesArray = [];
   });
 
-  const preload = (targetSize: AssetMediaSize | 'original', preloadAssets?: AssetResponseDto[]) => {
+  const preload = (targetSize: AssetMediaSize | 'original', preloadAssets?: TimelineAsset[]) => {
     for (const preloadAsset of preloadAssets || []) {
-      if (preloadAsset.type === AssetTypeEnum.Image) {
+      if (preloadAsset.isImage) {
-        preloadImageUrl(getAssetUrl(preloadAsset.id, targetSize, preloadAsset.thumbhash));
+        let img = new Image();
+        img.src = getAssetUrl(preloadAsset.id, targetSize, preloadAsset.thumbhash);
       }
     }
   };
@@ -197,7 +199,7 @@
   bind:clientWidth={containerWidth}
   bind:clientHeight={containerHeight}
 >
-  <img style="display:none" src={imageLoaderUrl} alt={$getAltText(asset)} {onload} {onerror} />
+  <img style="display:none" src={imageLoaderUrl} alt="" {onload} {onerror} />
   {#if !imageLoaded}
     <div id="spinner" class="flex h-full items-center justify-center">
       <LoadingSpinner />
@@ -213,7 +215,7 @@
       {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
         <img
           src={assetFileUrl}
-          alt={$getAltText(asset)}
+          alt=""
           class="absolute top-0 start-0 -z-10 object-cover h-full w-full blur-lg"
           draggable="false"
         />
@@ -221,7 +223,7 @@
       <img
         bind:this={$photoViewerImgElement}
         src={assetFileUrl}
-        alt={$getAltText(asset)}
+        alt={$getAltText(toTimelineAsset(asset))}
         class="h-full w-full {$slideshowState === SlideshowState.None
           ? 'object-contain'
           : slideshowLookCssMapping[$slideshowLook]}"

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

@@ -5,7 +5,7 @@
   import { getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
   import { timeToSeconds } from '$lib/utils/date-time';
   import { getAltText } from '$lib/utils/thumbnail-util';
-  import { AssetMediaSize, AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
+  import { AssetMediaSize } from '@immich/sdk';
   import {
     mdiArchiveArrowDownOutline,
     mdiCameraBurst,
@@ -18,6 +18,7 @@
 
   import { thumbhash } from '$lib/actions/thumbhash';
   import { authManager } from '$lib/managers/auth-manager.svelte';
+  import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
   import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { focusNext } from '$lib/utils/focus-util';
   import { currentUrlReplaceAssetId } from '$lib/utils/navigation';
@@ -29,11 +30,11 @@
   import VideoThumbnail from './video-thumbnail.svelte';
 
   interface Props {
-    asset: AssetResponseDto;
+    asset: TimelineAsset;
     groupIndex?: number;
-    thumbnailSize?: number | undefined;
+    thumbnailSize?: number;
-    thumbnailWidth?: number | undefined;
+    thumbnailWidth?: number;
-    thumbnailHeight?: number | undefined;
+    thumbnailHeight?: number;
     selected?: boolean;
     selectionCandidate?: boolean;
     disabled?: boolean;
@@ -44,10 +45,10 @@
     imageClass?: ClassValue;
     brokenAssetClass?: ClassValue;
     dimmed?: boolean;
-    onClick?: ((asset: AssetResponseDto) => void) | undefined;
+    onClick?: (asset: TimelineAsset) => void;
-    onSelect?: ((asset: AssetResponseDto) => void) | undefined;
+    onSelect?: (asset: TimelineAsset) => void;
-    onMouseEvent?: ((event: { isMouseOver: boolean; selectedGroupIndex: number }) => void) | undefined;
+    onMouseEvent?: (event: { isMouseOver: boolean; selectedGroupIndex: number }) => void;
-    handleFocus?: (() => void) | undefined;
+    handleFocus?: () => void;
   }
 
   let {
@@ -319,7 +320,7 @@
           </div>
         {/if}
 
-        {#if asset.type === AssetTypeEnum.Image && asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR}
+        {#if asset.isImage && asset.projectionType === ProjectionType.EQUIRECTANGULAR}
           <div class="absolute end-0 top-0 z-10 flex place-items-center gap-1 text-xs font-medium text-white">
             <span class="pe-2 pt-2">
               <Icon path={mdiRotate360} size="24" />
@@ -332,7 +333,7 @@
           <div
             class={[
               'absolute z-10 flex place-items-center gap-1 text-xs font-medium text-white',
-              asset.type == AssetTypeEnum.Image && !asset.livePhotoVideoId ? 'top-0 end-0' : 'top-7 end-1',
+              asset.isImage && !asset.livePhotoVideoId ? 'top-0 end-0' : 'top-7 end-1',
             ]}
           >
             <span class="pe-2 pt-2 flex place-items-center gap-1">
@@ -352,17 +353,17 @@
         curve={selected}
         onComplete={(errored) => ((loaded = true), (thumbError = errored))}
       />
-      {#if asset.type === AssetTypeEnum.Video}
+      {#if asset.isVideo}
         <div class="absolute top-0 h-full w-full">
           <VideoThumbnail
             url={getAssetPlaybackUrl({ id: asset.id, cacheKey: asset.thumbhash })}
             enablePlayback={mouseOver && $playVideoThumbnailOnHover}
             curve={selected}
-            durationInSeconds={timeToSeconds(asset.duration)}
+            durationInSeconds={timeToSeconds(asset.duration!)}
             playbackOnIconHover={!$playVideoThumbnailOnHover}
           />
         </div>
-      {:else if asset.type === AssetTypeEnum.Image && asset.livePhotoVideoId}
+      {:else if asset.isImage && asset.livePhotoVideoId}
         <div class="absolute top-0 h-full w-full">
           <VideoThumbnail
             url={getAssetPlaybackUrl({ id: asset.livePhotoVideoId, cacheKey: asset.thumbhash })}

web/src/lib/components/forms/create-user-form.svelte

@@ -1,21 +1,29 @@
 <script lang="ts">
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { userInteraction } from '$lib/stores/user.svelte';
   import { ByteUnit, convertToBytes } from '$lib/utils/byte-units';
   import { handleError } from '$lib/utils/handle-error';
-  import { createUserAdmin } from '@immich/sdk';
+  import { createUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Alert, Button, Field, HelperText, Input, PasswordInput, Stack, Switch } from '@immich/ui';
+  import {
+    Alert,
+    Button,
+    Field,
+    HelperText,
+    Input,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    PasswordInput,
+    Stack,
+    Switch,
+  } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
-    onClose: () => void;
+    onClose: (user?: UserAdminResponseDto) => void;
-    onSubmit: () => void;
-    onCancel: () => void;
-    oauthEnabled?: boolean;
   }
 
-  let { onClose, onSubmit: onDone, onCancel, oauthEnabled = false }: Props = $props();
+  let { onClose }: Props = $props();
 
   let error = $state('');
   let success = $state(false);
@@ -50,7 +58,7 @@
     error = '';
 
     try {
-      await createUserAdmin({
+      const user = await createUserAdmin({
         userAdminCreateDto: {
           email,
           password,
@@ -63,8 +71,7 @@
 
       success = true;
 
-      onDone();
+      onClose(user);
-
       return;
     } catch (error) {
       handleError(error, $t('errors.unable_to_create_user'));
@@ -74,55 +81,60 @@
   };
 </script>
 
-<form onsubmit={onSubmit} autocomplete="off" id="create-new-user-form">
+<Modal title={$t('create_new_user')} {onClose} size="small" class="text-dark bg-light">
-  <FullScreenModal title={$t('create_new_user')} showLogo {onClose}>
+  <ModalBody>
-    {#if error}
+    <form onsubmit={onSubmit} autocomplete="off" id="create-new-user-form">
-      <Alert color="danger" size="small" title={error} closable />
+      {#if error}
-    {/if}
+        <Alert color="danger" size="small" title={error} closable />
-
-    {#if success}
-      <p class="text-sm text-immich-primary">{$t('new_user_created')}</p>
-    {/if}
-
-    <Stack gap={4}>
-      <Field label={$t('email')} required>
-        <Input bind:value={email} type="email" />
-      </Field>
-
-      {#if $featureFlags.email}
-        <Field label={$t('admin.send_welcome_email')}>
-          <Switch id="send-welcome-email" bind:checked={notify} class="text-sm" />
-        </Field>
       {/if}
 
-      <Field label={$t('password')} required={!oauthEnabled}>
+      {#if success}
-        <PasswordInput id="password" bind:value={password} autocomplete="new-password" />
+        <p class="text-sm text-immich-primary">{$t('new_user_created')}</p>
-      </Field>
+      {/if}
 
-      <Field label={$t('confirm_password')} required={!oauthEnabled}>
+      <Stack gap={4}>
-        <PasswordInput id="confirmPassword" bind:value={passwordConfirm} autocomplete="new-password" />
+        <Field label={$t('email')} required>
-        <HelperText color="danger">{passwordMismatchMessage}</HelperText>
+          <Input bind:value={email} type="email" />
-      </Field>
+        </Field>
 
-      <Field label={$t('admin.require_password_change_on_login')}>
+        {#if $featureFlags.email}
-        <Switch id="require-password-change" bind:checked={shouldChangePassword} class="text-sm" />
+          <Field label={$t('admin.send_welcome_email')}>
-      </Field>
+            <Switch id="send-welcome-email" bind:checked={notify} class="text-sm" />
-
+          </Field>
-      <Field label={$t('name')} required>
-        <Input bind:value={name} />
-      </Field>
-
-      <Field label={$t('admin.quota_size_gib')}>
-        <Input bind:value={quotaSize} type="number" placeholder={$t('unlimited')} min="0" />
-        {#if quotaSizeWarning}
-          <HelperText color="danger">{$t('errors.quota_higher_than_disk_size')}</HelperText>
         {/if}
-      </Field>
-    </Stack>
 
-    {#snippet stickyBottom()}
+        <Field label={$t('password')} required={!$featureFlags.oauth}>
-      <Button color="secondary" fullWidth onclick={onCancel} shape="round">{$t('cancel')}</Button>
+          <PasswordInput id="password" bind:value={password} autocomplete="new-password" />
-      <Button type="submit" disabled={!valid} fullWidth shape="round">{$t('create')}</Button>
+        </Field>
-    {/snippet}
+
-  </FullScreenModal>
+        <Field label={$t('confirm_password')} required={!$featureFlags.oauth}>
-</form>
+          <PasswordInput id="confirmPassword" bind:value={passwordConfirm} autocomplete="new-password" />
+          <HelperText color="danger">{passwordMismatchMessage}</HelperText>
+        </Field>
+
+        <Field label={$t('admin.require_password_change_on_login')}>
+          <Switch id="require-password-change" bind:checked={shouldChangePassword} class="text-sm text-start" />
+        </Field>
+
+        <Field label={$t('name')} required>
+          <Input bind:value={name} />
+        </Field>
+
+        <Field label={$t('admin.quota_size_gib')}>
+          <Input bind:value={quotaSize} type="number" placeholder={$t('unlimited')} min="0" />
+          {#if quotaSizeWarning}
+            <HelperText color="danger">{$t('errors.quota_higher_than_disk_size')}</HelperText>
+          {/if}
+        </Field>
+      </Stack>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-3 w-full">
+      <Button color="secondary" fullWidth onclick={() => onClose()} shape="round">{$t('cancel')}</Button>
+      <Button type="submit" disabled={!valid} fullWidth shape="round" form="create-new-user-form">{$t('create')}</Button
+      >
+    </div>
+  </ModalFooter>
+</Modal>

web/src/lib/components/forms/edit-user-form.svelte

@@ -1,34 +1,26 @@
 <script lang="ts">
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import { AppRoute } from '$lib/constants';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { userInteraction } from '$lib/stores/user.svelte';
   import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
   import { handleError } from '$lib/utils/handle-error';
   import { updateUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiAccountEditOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
     user: UserAdminResponseDto;
     canResetPassword?: boolean;
-    newPassword: string;
+    onClose: (
-    onClose: () => void;
+      data?: { action: 'update'; data: UserAdminResponseDto } | { action: 'resetPassword'; data: string },
-    onResetPasswordSuccess: () => void;
+    ) => void;
-    onEditSuccess: () => void;
   }
 
-  let {
+  let { user, canResetPassword = true, onClose }: Props = $props();
-    user,
-    canResetPassword = true,
-    newPassword = $bindable(),
-    onClose,
-    onResetPasswordSuccess,
-    onEditSuccess,
-  }: Props = $props();
 
   let quotaSize = $state(user.quotaSizeInBytes === null ? null : convertFromBytes(user.quotaSizeInBytes, ByteUnit.GiB));
+  let newPassword = $state<string>('');
 
   const previousQutoa = user.quotaSizeInBytes;
 
@@ -42,7 +34,7 @@
   const editUser = async () => {
     try {
       const { id, email, name, storageLabel } = user;
-      await updateUserAdmin({
+      const newUser = await updateUserAdmin({
         id,
         userAdminUpdateDto: {
           email,
@@ -52,14 +44,14 @@
         },
       });
 
-      onEditSuccess();
+      onClose({ action: 'update', data: newUser });
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_user'));
     }
   };
 
   const resetPassword = async () => {
-    const isConfirmed = await dialogController.show({
+    const isConfirmed = await modalManager.openDialog({
       prompt: $t('admin.confirm_user_password_reset', { values: { user: user.name } }),
     });
 
@@ -78,7 +70,7 @@
         },
       });
 
-      onResetPasswordSuccess();
+      onClose({ action: 'resetPassword', data: newPassword });
     } catch (error) {
       handleError(error, $t('errors.unable_to_reset_password'));
     }
@@ -107,61 +99,65 @@
   };
 </script>
 
-<FullScreenModal title={$t('edit_user')} icon={mdiAccountEditOutline} {onClose}>
+<Modal title={$t('edit_user')} size="small" icon={mdiAccountEditOutline} {onClose}>
-  <form onsubmit={onSubmit} autocomplete="off" id="edit-user-form">
+  <ModalBody>
-    <div class="my-4 flex flex-col gap-2">
+    <form onsubmit={onSubmit} autocomplete="off" id="edit-user-form">
-      <label class="immich-form-label" for="email">{$t('email')}</label>
+      <div class="my-4 flex flex-col gap-2">
-      <input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
+        <label class="immich-form-label" for="email">{$t('email')}</label>
+        <input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
+      </div>
+
+      <div class="my-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="name">{$t('name')}</label>
+        <input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
+      </div>
+
+      <div class="my-4 flex flex-col gap-2">
+        <label class="flex items-center gap-2 immich-form-label" for="quotaSize">
+          {$t('admin.quota_size_gib')}
+          {#if quotaSizeWarning}
+            <p class="text-red-400 text-sm">{$t('errors.quota_higher_than_disk_size')}</p>
+          {/if}</label
+        >
+        <input
+          class="immich-form-input"
+          id="quotaSize"
+          name="quotaSize"
+          placeholder={$t('unlimited')}
+          type="number"
+          min="0"
+          bind:value={quotaSize}
+        />
+      </div>
+
+      <div class="my-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="storage-label">{$t('storage_label')}</label>
+        <input
+          class="immich-form-input"
+          id="storage-label"
+          name="storage-label"
+          type="text"
+          bind:value={user.storageLabel}
+        />
+
+        <p>
+          {$t('admin.note_apply_storage_label_previous_assets')}
+          <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
+            {$t('admin.storage_template_migration_job')}
+          </a>
+        </p>
+      </div>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-3 w-full">
+      {#if canResetPassword}
+        <Button shape="round" color="warning" variant="filled" fullWidth onclick={resetPassword}
+          >{$t('reset_password')}</Button
+        >
+      {/if}
+      <Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
     </div>
-
+  </ModalFooter>
-    <div class="my-4 flex flex-col gap-2">
+</Modal>
-      <label class="immich-form-label" for="name">{$t('name')}</label>
-      <input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
-    </div>
-
-    <div class="my-4 flex flex-col gap-2">
-      <label class="flex items-center gap-2 immich-form-label" for="quotaSize">
-        {$t('admin.quota_size_gib')}
-        {#if quotaSizeWarning}
-          <p class="text-red-400 text-sm">{$t('errors.quota_higher_than_disk_size')}</p>
-        {/if}</label
-      >
-      <input
-        class="immich-form-input"
-        id="quotaSize"
-        name="quotaSize"
-        placeholder={$t('unlimited')}
-        type="number"
-        min="0"
-        bind:value={quotaSize}
-      />
-    </div>
-
-    <div class="my-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="storage-label">{$t('storage_label')}</label>
-      <input
-        class="immich-form-input"
-        id="storage-label"
-        name="storage-label"
-        type="text"
-        bind:value={user.storageLabel}
-      />
-
-      <p>
-        {$t('admin.note_apply_storage_label_previous_assets')}
-        <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
-          {$t('admin.storage_template_migration_job')}
-        </a>
-      </p>
-    </div>
-  </form>
-
-  {#snippet stickyBottom()}
-    {#if canResetPassword}
-      <Button shape="round" color="warning" variant="filled" fullWidth onclick={resetPassword}
-        >{$t('reset_password')}</Button
-      >
-    {/if}
-    <Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
-  {/snippet}
-</FullScreenModal>

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

@@ -24,16 +24,18 @@
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import { AppRoute, QueryParameter } from '$lib/constants';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { type Viewport } from '$lib/stores/assets-store.svelte';
+  import { type TimelineAsset, type Viewport } from '$lib/stores/assets-store.svelte';
   import { type MemoryAsset, memoryStore } from '$lib/stores/memory.store.svelte';
   import { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
   import { preferences } from '$lib/stores/user.store';
   import { getAssetPlaybackUrl, getAssetThumbnailUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
   import { cancelMultiselect } from '$lib/utils/asset-utils';
-  import { fromLocalDateTime } from '$lib/utils/timeline-util';
+  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { AssetMediaSize, type AssetResponseDto, AssetTypeEnum } from '@immich/sdk';
+  import { fromLocalDateTime, toTimelineAsset } from '$lib/utils/timeline-util';
+  import { AssetMediaSize, getAssetInfo } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
   import {
     mdiCardsOutline,
@@ -66,6 +68,11 @@
   let playerInitialized = $state(false);
   let paused = $state(false);
   let current = $state<MemoryAsset | undefined>(undefined);
+  let currentMemoryAssetFull = $derived.by(async () =>
+    current?.asset ? await getAssetInfo({ id: current?.asset.id, key: authManager.key }) : undefined,
+  );
+  let currentTimelineAssets = $derived(current?.memory.assets.map((a) => toTimelineAsset(a)) || []);
+
   let isSaved = $derived(current?.memory.isSaved);
   let viewerHeight = $state(0);
 
@@ -76,8 +83,8 @@
   const assetInteraction = new AssetInteraction();
   let progressBarController: Tween<number> | undefined = $state(undefined);
   let videoPlayer: HTMLVideoElement | undefined = $state();
-  const asHref = (asset: AssetResponseDto) => `?${QueryParameter.ID}=${asset.id}`;
+  const asHref = (asset: { id: string }) => `?${QueryParameter.ID}=${asset.id}`;
-  const handleNavigate = async (asset?: AssetResponseDto) => {
+  const handleNavigate = async (asset?: { id: string }) => {
     if ($isViewing) {
       return asset;
     }
@@ -88,9 +95,9 @@
 
     await goto(asHref(asset));
   };
-  const setProgressDuration = (asset: AssetResponseDto) => {
+  const setProgressDuration = (asset: TimelineAsset) => {
-    if (asset.type === AssetTypeEnum.Video) {
+    if (asset.isVideo) {
-      const timeParts = asset.duration.split(':').map(Number);
+      const timeParts = asset.duration!.split(':').map(Number);
       const durationInMilliseconds = (timeParts[0] * 3600 + timeParts[1] * 60 + timeParts[2]) * 1000;
       progressBarController = new Tween<number>(0, {
         duration: (from: number, to: number) => (to ? durationInMilliseconds * (to - from) : 0),
@@ -106,7 +113,8 @@
   const handleNextMemory = () => handleNavigate(current?.nextMemory?.assets[0]);
   const handlePreviousMemory = () => handleNavigate(current?.previousMemory?.assets[0]);
   const handleEscape = async () => goto(AppRoute.PHOTOS);
-  const handleSelectAll = () => assetInteraction.selectAssets(current?.memory.assets || []);
+  const handleSelectAll = () =>
+    assetInteraction.selectAssets(current?.memory.assets.map((a) => toTimelineAsset(a)) || []);
   const handleAction = async (callingContext: string, action: 'reset' | 'pause' | 'play') => {
     // leaving these log statements here as comments. Very useful to figure out what's going on during dev!
     // console.log(`handleAction[${callingContext}] called with: ${action}`);
@@ -239,7 +247,7 @@
   };
 
   const initPlayer = () => {
-    const isVideoAssetButPlayerHasNotLoadedYet = current && current.asset.type === AssetTypeEnum.Video && !videoPlayer;
+    const isVideoAssetButPlayerHasNotLoadedYet = current && current.asset.isVideo && !videoPlayer;
     if (playerInitialized || isVideoAssetButPlayerHasNotLoadedYet) {
       return;
     }
@@ -439,7 +447,7 @@
           <div class="relative h-full w-full rounded-2xl bg-black">
             {#key current.asset.id}
               <div transition:fade class="h-full w-full">
-                {#if current.asset.type === AssetTypeEnum.Video}
+                {#if current.asset.isVideo}
                   <video
                     bind:this={videoPlayer}
                     autoplay
@@ -456,7 +464,7 @@
                   <img
                     class="h-full w-full rounded-2xl object-contain transition-all"
                     src={getAssetThumbnailUrl({ id: current.asset.id, size: AssetMediaSize.Preview })}
-                    alt={current.asset.exifInfo?.description}
+                    alt={$getAltText(current.asset)}
                     draggable="false"
                     transition:fade
                   />
@@ -549,8 +557,10 @@
                 })}
               </p>
               <p>
-                {current.asset.exifInfo?.city || ''}
+                {#await currentMemoryAssetFull then asset}
-                {current.asset.exifInfo?.country || ''}
+                  {asset?.exifInfo?.city || ''}
+                  {asset?.exifInfo?.country || ''}
+                {/await}
               </p>
             </div>
           </div>
@@ -621,7 +631,7 @@
       <GalleryViewer
         onNext={handleNextAsset}
         onPrevious={handlePreviousAsset}
-        assets={current.memory.assets}
+        assets={currentTimelineAssets}
         viewport={galleryViewport}
         {assetInteraction}
         slidingWindowOffset={viewerHeight}

web/src/lib/components/photos-page/actions/archive-action.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import type { OnArchive } from '$lib/utils/actions';
+  import { archiveAssets } from '$lib/utils/asset-utils';
   import { mdiArchiveArrowDownOutline, mdiArchiveArrowUpOutline, mdiTimerSand } from '@mdi/js';
+  import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { archiveAssets } from '$lib/utils/asset-utils';
-  import { t } from 'svelte-i18n';
 
   interface Props {
     onArchive?: OnArchive;

web/src/lib/components/photos-page/actions/asset-job-actions.svelte

@@ -6,9 +6,10 @@
   } from '$lib/components/shared-components/notification/notification';
   import { getAssetJobIcon, getAssetJobMessage, getAssetJobName } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
-  import { AssetJobName, AssetTypeEnum, runAssetJobs } from '@immich/sdk';
+  import { isTimelineAsset } from '$lib/utils/timeline-util';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { AssetJobName, AssetTypeEnum, runAssetJobs, type AssetResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     jobs?: AssetJobName[];
@@ -19,7 +20,11 @@
 
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
-  let isAllVideos = $derived([...getOwnedAssets()].every((asset) => asset.type === AssetTypeEnum.Video));
+  let isAllVideos = $derived(
+    [...getOwnedAssets()].every((asset) =>
+      isTimelineAsset(asset) ? asset.isVideo : (asset as AssetResponseDto).type === AssetTypeEnum.Video,
+    ),
+  );
 
   const handleRunJob = async (name: AssetJobName) => {
     try {

web/src/lib/components/photos-page/actions/change-date-action.svelte

@@ -4,11 +4,11 @@
   import { getSelectedAssets } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAssets } from '@immich/sdk';
+  import { mdiCalendarEditOutline } from '@mdi/js';
   import { DateTime } from 'luxon';
+  import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import { mdiCalendarEditOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
   interface Props {
     menuItem?: boolean;
   }

web/src/lib/components/photos-page/actions/download-action.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
-  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { shortcut } from '$lib/actions/shortcut';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+
+  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
+  import { getAssetInfo } from '@immich/sdk';
   import { mdiCloudDownloadOutline, mdiFileDownloadOutline, mdiFolderDownloadOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     filename?: string;
@@ -20,7 +23,8 @@
     const assets = [...getAssets()];
     if (assets.length === 1) {
       clearSelect();
-      await downloadFile(assets[0]);
+      let asset = await getAssetInfo({ id: assets[0].id, key: authManager.key });
+      await downloadFile(asset);
       return;
     }
 

web/src/lib/components/photos-page/actions/link-live-photo-action.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
+  import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
+
+  import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { OnLink, OnUnlink } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
-  import { AssetTypeEnum, getAssetInfo, updateAsset } from '@immich/sdk';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { getAssetInfo, updateAsset } from '@immich/sdk';
   import { mdiLinkOff, mdiMotionPlayOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   interface Props {
     onLink: OnLink;
@@ -28,14 +32,14 @@
 
   const handleLink = async () => {
     let [still, motion] = [...getOwnedAssets()];
-    if (still.type === AssetTypeEnum.Video) {
+    if ((still as TimelineAsset).isVideo) {
       [still, motion] = [motion, still];
     }
 
     try {
       loading = true;
       const stillResponse = await updateAsset({ id: still.id, updateAssetDto: { livePhotoVideoId: motion.id } });
-      onLink({ still: stillResponse, motion });
+      onLink({ still: toTimelineAsset(stillResponse), motion: motion as TimelineAsset });
       clearSelect();
     } catch (error) {
       handleError(error, $t('errors.unable_to_link_motion_video'));
@@ -46,22 +50,22 @@
 
   const handleUnlink = async () => {
     const [still] = [...getOwnedAssets()];
-
+    if (still) {
-    const motionId = still?.livePhotoVideoId;
+      const motionId = still.livePhotoVideoId;
-    if (!motionId) {
+      if (!motionId) {
-      return;
+        return;
-    }
+      }
-
+      try {
-    try {
+        loading = true;
-      loading = true;
+        const stillResponse = await updateAsset({ id: still.id, updateAssetDto: { livePhotoVideoId: null } });
-      const stillResponse = await updateAsset({ id: still.id, updateAssetDto: { livePhotoVideoId: null } });
+        const motionResponse = await getAssetInfo({ id: motionId, key: authManager.key });
-      const motionResponse = await getAssetInfo({ id: motionId });
+        onUnlink({ still: toTimelineAsset(stillResponse), motion: toTimelineAsset(motionResponse) });
-      onUnlink({ still: stillResponse, motion: motionResponse });
+        clearSelect();
-      clearSelect();
+      } catch (error) {
-    } catch (error) {
+        handleError(error, $t('errors.unable_to_unlink_motion_video'));
-      handleError(error, $t('errors.unable_to_unlink_motion_video'));
+      } finally {
-    } finally {
+        loading = false;
-      loading = false;
+      }
     }
   };
 </script>

web/src/lib/components/photos-page/actions/select-all-assets.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { type AssetStore, isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
-  import { mdiSelectAll, mdiSelectRemove } from '@mdi/js';
-  import { selectAllAssets, cancelMultiselect } from '$lib/utils/asset-utils';
-  import { t } from 'svelte-i18n';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { type AssetStore, isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
+  import { cancelMultiselect, selectAllAssets } from '$lib/utils/asset-utils';
+  import { mdiSelectAll, mdiSelectRemove } from '@mdi/js';
+  import { t } from 'svelte-i18n';
 
   interface Props {
     assetStore: AssetStore;

web/src/lib/components/photos-page/actions/stack-action.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import { mdiImageMinusOutline, mdiImageMultipleOutline } from '@mdi/js';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import { stackAssets, deleteStack } from '$lib/utils/asset-utils';
   import type { OnStack, OnUnstack } from '$lib/utils/actions';
+  import { deleteStack, stackAssets } from '$lib/utils/asset-utils';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { mdiImageMinusOutline, mdiImageMultipleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -34,7 +35,7 @@
     }
     const unstackedAssets = await deleteStack([stack.id]);
     if (unstackedAssets) {
-      onUnstack?.(unstackedAssets);
+      onUnstack?.(unstackedAssets.map((a) => toTimelineAsset(a)));
     }
     clearSelect();
   };

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import {
-    type AssetStore,
     type AssetBucket,
     assetSnapshot,
     assetsSnapshot,
+    type AssetStore,
     isSelectingAllAssets,
+    type TimelineAsset,
   } from '$lib/stores/assets-store.svelte';
   import { navigate } from '$lib/utils/navigation';
   import { getDateLocaleString } from '$lib/utils/timeline-util';
-  import type { AssetResponseDto } from '@immich/sdk';
+
-  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-  import { fly } from 'svelte/transition';
-  import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { scale } from 'svelte/transition';
+  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
+  import { fly, scale } from 'svelte/transition';
+  import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
 
   import { flip } from 'svelte/animate';
 
@@ -31,9 +31,9 @@
     assetStore: AssetStore;
     assetInteraction: AssetInteraction;
 
-    onSelect: ({ title, assets }: { title: string; assets: AssetResponseDto[] }) => void;
+    onSelect: ({ title, assets }: { title: string; assets: TimelineAsset[] }) => void;
-    onSelectAssets: (asset: AssetResponseDto) => void;
+    onSelectAssets: (asset: TimelineAsset) => void;
-    onSelectAssetCandidates: (asset: AssetResponseDto | null) => void;
+    onSelectAssetCandidates: (asset: TimelineAsset | null) => void;
   }
 
   let {
@@ -54,7 +54,7 @@
 
   const transitionDuration = $derived.by(() => (bucket.store.suspendTransitions && !$isUploading ? 0 : 150));
   const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
-  const onClick = (assetStore: AssetStore, assets: AssetResponseDto[], groupTitle: string, asset: AssetResponseDto) => {
+  const onClick = (assetStore: AssetStore, assets: TimelineAsset[], groupTitle: string, asset: TimelineAsset) => {
     if (isSelectionMode || assetInteraction.selectionActive) {
       assetSelectHandler(assetStore, asset, assets, groupTitle);
       return;
@@ -62,12 +62,12 @@
     void navigate({ targetRoute: 'current', assetId: asset.id });
   };
 
-  const handleSelectGroup = (title: string, assets: AssetResponseDto[]) => onSelect({ title, assets });
+  const handleSelectGroup = (title: string, assets: TimelineAsset[]) => onSelect({ title, assets });
 
   const assetSelectHandler = (
     assetStore: AssetStore,
-    asset: AssetResponseDto,
+    asset: TimelineAsset,
-    assetsInDateGroup: AssetResponseDto[],
+    assetsInDateGroup: TimelineAsset[],
     groupTitle: string,
   ) => {
     onSelectAssets(asset);
@@ -91,7 +91,7 @@
     }
   };
 
-  const assetMouseEventHandler = (groupTitle: string, asset: AssetResponseDto | null) => {
+  const assetMouseEventHandler = (groupTitle: string, asset: TimelineAsset | null) => {
     // Show multi select icon on hover on date group
     hoveredDateGroup = groupTitle;
 

web/src/lib/components/photos-page/asset-grid.svelte

@@ -1,32 +1,39 @@
 <script lang="ts">
   import { afterNavigate, beforeNavigate, goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
   import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
   import type { Action } from '$lib/components/asset-viewer/actions/action';
+  import Skeleton from '$lib/components/photos-page/skeleton.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { AssetBucket, assetsSnapshot, AssetStore, isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
+  import {
+    AssetBucket,
+    assetsSnapshot,
+    AssetStore,
+    isSelectingAllAssets,
+    type TimelineAsset,
+  } from '$lib/stores/assets-store.svelte';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { searchStore } from '$lib/stores/search.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { handlePromiseError } from '$lib/utils';
   import { deleteAssets, updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
   import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
+  import { focusNext } from '$lib/utils/focus-util';
   import { navigate } from '$lib/utils/navigation';
   import { type ScrubberListener } from '$lib/utils/timeline-util';
-  import type { AlbumResponseDto, AssetResponseDto, PersonResponseDto } from '@immich/sdk';
+  import { getAssetInfo, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
   import { onMount, type Snippet } from 'svelte';
+  import type { UpdatePayload } from 'vite';
   import Portal from '../shared-components/portal/portal.svelte';
   import Scrubber from '../shared-components/scrubber/scrubber.svelte';
   import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
   import AssetDateGroup from './asset-date-group.svelte';
   import DeleteAssetDialog from './delete-asset-dialog.svelte';
-  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
-  import Skeleton from '$lib/components/photos-page/skeleton.svelte';
-  import { page } from '$app/stores';
-  import type { UpdatePayload } from 'vite';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
-  import { focusNext } from '$lib/utils/focus-util';
 
   interface Props {
     isSelectionMode?: boolean;
@@ -44,7 +51,7 @@
     album?: AlbumResponseDto | null;
     person?: PersonResponseDto | null;
     isShowDeleteConfirmation?: boolean;
-    onSelect?: (asset: AssetResponseDto) => void;
+    onSelect?: (asset: TimelineAsset) => void;
     onEscape?: () => void;
     children?: Snippet;
     empty?: Snippet;
@@ -362,7 +369,7 @@
     }
   };
 
-  const handleSelectAsset = (asset: AssetResponseDto) => {
+  const handleSelectAsset = (asset: TimelineAsset) => {
     if (!assetStore.albumAssets.has(asset.id)) {
       assetInteraction.selectAsset(asset);
     }
@@ -373,7 +380,8 @@
 
     if (previousAsset) {
       const preloadAsset = await assetStore.getPreviousAsset(previousAsset);
-      assetViewingStore.setAsset(previousAsset, preloadAsset ? [preloadAsset] : []);
+      const asset = await getAssetInfo({ id: previousAsset.id, key: authManager.key });
+      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
       await navigate({ targetRoute: 'current', assetId: previousAsset.id });
     }
 
@@ -385,7 +393,8 @@
 
     if (nextAsset) {
       const preloadAsset = await assetStore.getNextAsset(nextAsset);
-      assetViewingStore.setAsset(nextAsset, preloadAsset ? [preloadAsset] : []);
+      const asset = await getAssetInfo({ id: nextAsset.id, key: authManager.key });
+      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
       await navigate({ targetRoute: 'current', assetId: nextAsset.id });
     }
 
@@ -397,14 +406,14 @@
 
     if (randomAsset) {
       const preloadAsset = await assetStore.getNextAsset(randomAsset);
-      assetViewingStore.setAsset(randomAsset, preloadAsset ? [preloadAsset] : []);
+      const asset = await getAssetInfo({ id: randomAsset.id, key: authManager.key });
+      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
       await navigate({ targetRoute: 'current', assetId: randomAsset.id });
+      return asset;
     }
-
-    return randomAsset;
   };
 
-  const handleClose = async ({ asset }: { asset: AssetResponseDto }) => {
+  const handleClose = async (asset: { id: string }) => {
     assetViewingStore.showAssetViewer(false);
     showSkeleton = true;
     $gridScrollTarget = { at: asset.id };
@@ -420,7 +429,7 @@
       case AssetAction.ARCHIVE: {
         // find the next asset to show or close the viewer
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        (await handleNext()) || (await handlePrevious()) || (await handleClose({ asset: action.asset }));
+        (await handleNext()) || (await handlePrevious()) || (await handleClose(action.asset));
 
         // delete after find the next one
         assetStore.removeAssets([action.asset.id]);
@@ -449,7 +458,7 @@
     }
   };
 
-  let lastAssetMouseEvent: AssetResponseDto | null = $state(null);
+  let lastAssetMouseEvent: TimelineAsset | null = $state(null);
 
   let shiftKeyIsDown = $state(false);
 
@@ -479,14 +488,14 @@
     }
   };
 
-  const handleSelectAssetCandidates = (asset: AssetResponseDto | null) => {
+  const handleSelectAssetCandidates = (asset: TimelineAsset | null) => {
     if (asset) {
       selectAssetCandidates(asset);
     }
     lastAssetMouseEvent = asset;
   };
 
-  const handleGroupSelect = (assetStore: AssetStore, group: string, assets: AssetResponseDto[]) => {
+  const handleGroupSelect = (assetStore: AssetStore, group: string, assets: TimelineAsset[]) => {
     if (assetInteraction.selectedGroup.has(group)) {
       assetInteraction.removeGroupFromMultiselectGroup(group);
       for (const asset of assets) {
@@ -506,7 +515,7 @@
     }
   };
 
-  const handleSelectAssets = async (asset: AssetResponseDto) => {
+  const handleSelectAssets = async (asset: TimelineAsset) => {
     if (!asset) {
       return;
     }
@@ -589,7 +598,7 @@
     assetInteraction.setAssetSelectionStart(deselect ? null : asset);
   };
 
-  const selectAssetCandidates = (endAsset: AssetResponseDto) => {
+  const selectAssetCandidates = (endAsset: TimelineAsset) => {
     if (!shiftKeyIsDown) {
       return;
     }

web/src/lib/components/photos-page/asset-select-control-bar.svelte

@@ -4,8 +4,8 @@
 
   export interface AssetControlContext {
     // Wrap assets in a function, because context isn't reactive.
-    getAssets: () => AssetResponseDto[]; // All assets includes partners' assets
+    getAssets: () => TimelineAsset[]; // All assets includes partners' assets
-    getOwnedAssets: () => AssetResponseDto[]; // Only assets owned by the user
+    getOwnedAssets: () => TimelineAsset[]; // Only assets owned by the user
     clearSelect: () => void;
   }
 
@@ -14,13 +14,13 @@
 </script>
 
 <script lang="ts">
-  import type { AssetResponseDto } from '@immich/sdk';
+  import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
   import { mdiClose } from '@mdi/js';
-  import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import type { Snippet } from 'svelte';
+  import ControlAppBar from '../shared-components/control-app-bar.svelte';
 
   interface Props {
-    assets: AssetResponseDto[];
+    assets: TimelineAsset[];
     clearSelect: () => void;
     ownerId?: string | undefined;
     children?: Snippet;

web/src/lib/components/photos-page/delete-asset-dialog.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
-  import { showDeleteModal } from '$lib/stores/preferences.store';
   import Checkbox from '$lib/components/elements/checkbox.svelte';
-  import { t } from 'svelte-i18n';
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
+  import { showDeleteModal } from '$lib/stores/preferences.store';
+  import { t } from 'svelte-i18n';
+  import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
 
   interface Props {
     size: number;
@@ -26,8 +26,7 @@
 <ConfirmDialog
   title={$t('permanently_delete_assets_count', { values: { count: size } })}
   confirmText={$t('delete')}
-  onConfirm={handleConfirm}
+  onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
-  {onCancel}
 >
   {#snippet promptSnippet()}
     <p>

web/src/lib/components/photos-page/memory-lane.svelte

@@ -5,6 +5,7 @@
   import { memoryStore } from '$lib/stores/memory.store.svelte';
   import { getAssetThumbnailUrl, memoryLaneTitle } from '$lib/utils';
   import { getAltText } from '$lib/utils/thumbnail-util';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -82,7 +83,7 @@
           <img
             class="h-full w-full rounded-xl object-cover"
             src={getAssetThumbnailUrl(memory.assets[0].id)}
-            alt={$t('memory_lane_title', { values: { title: $getAltText(memory.assets[0]) } })}
+            alt={$t('memory_lane_title', { values: { title: $getAltText(toTimelineAsset(memory.assets[0])) } })}
             draggable="false"
           />
           <p class="absolute bottom-2 start-4 z-10 text-lg text-white max-md:text-sm">

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -11,7 +11,8 @@
   import { cancelMultiselect, downloadArchive } from '$lib/utils/asset-utils';
   import { fileUploadHandler, openFileUploadDialog } from '$lib/utils/file-uploader';
   import { handleError } from '$lib/utils/handle-error';
-  import { addSharedLinkAssets, type SharedLinkResponseDto } from '@immich/sdk';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
+  import { addSharedLinkAssets, getAssetInfo, type SharedLinkResponseDto } from '@immich/sdk';
   import { mdiArrowLeft, mdiFileImagePlusOutline, mdiFolderDownloadOutline, mdiSelectAll } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../asset-viewer/asset-viewer.svelte';
@@ -33,7 +34,8 @@
   const viewport: Viewport = $state({ width: 0, height: 0 });
   const assetInteraction = new AssetInteraction();
 
-  let assets = $derived(sharedLink.assets);
+  let assets = $derived(sharedLink.assets.map((a) => toTimelineAsset(a)));
+  let fullAsset = $derived(assets[0] ? getAssetInfo({ id: assets[0]?.id, key: authManager.key }) : null);
 
   dragAndDropFilesStore.subscribe((value) => {
     if (value.isDragging && value.files.length > 0) {
@@ -127,14 +129,16 @@
       <GalleryViewer {assets} {assetInteraction} {viewport} />
     </section>
   {:else}
-    <AssetViewer
+    {#await fullAsset then asset}
-      asset={assets[0]}
+      <AssetViewer
-      showCloseButton={false}
+        asset={asset!}
-      onAction={handleAction}
+        showCloseButton={false}
-      onPrevious={() => Promise.resolve(false)}
+        onAction={handleAction}
-      onNext={() => Promise.resolve(false)}
+        onPrevious={() => Promise.resolve(false)}
-      onRandom={() => Promise.resolve(undefined)}
+        onNext={() => Promise.resolve(false)}
-      onClose={() => {}}
+        onRandom={() => Promise.resolve(undefined)}
-    />
+        onClose={() => {}}
+      />
+    {/await}
   {/if}
 </section>

web/src/lib/components/shared-components/change-date.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { DateTime } from 'luxon';
-  import ConfirmDialog from './dialog/confirm-dialog.svelte';
-  import Combobox, { type ComboBoxOption } from './combobox.svelte';
-  import DateInput from '../elements/date-input.svelte';
   import { t } from 'svelte-i18n';
+  import DateInput from '../elements/date-input.svelte';
+  import Combobox, { type ComboBoxOption } from './combobox.svelte';
+  import ConfirmDialog from './dialog/confirm-dialog.svelte';
 
   interface Props {
     initialDate?: DateTime;
@@ -138,8 +138,7 @@
   title={$t('edit_date_and_time')}
   prompt="Please select a new date:"
   disabled={!date.isValid}
-  onConfirm={handleConfirm}
+  onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
-  {onCancel}
 >
   <!-- @migration-task: migrate this slot by hand, `prompt` would shadow a prop on the parent component -->
   <!-- @migration-task: migrate this slot by hand, `prompt` would shadow a prop on the parent component -->

web/src/lib/components/shared-components/change-location.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-  import ConfirmDialog from './dialog/confirm-dialog.svelte';
   import { timeDebounceOnSearch } from '$lib/constants';
-  import { handleError } from '$lib/utils/handle-error';
   import { lastChosenLocation } from '$lib/stores/asset-editor.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import ConfirmDialog from './dialog/confirm-dialog.svelte';
 
   import { clickOutside } from '$lib/actions/click-outside';
-  import LoadingSpinner from './loading-spinner.svelte';
-  import { delay } from '$lib/utils/asset-utils';
-  import { timeToLoadTheMap } from '$lib/constants';
-  import { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
-  import SearchBar from '../elements/search-bar.svelte';
   import { listNavigation } from '$lib/actions/list-navigation';
-  import { t } from 'svelte-i18n';
   import CoordinatesInput from '$lib/components/shared-components/coordinates-input.svelte';
   import type Map from '$lib/components/shared-components/map/map.svelte';
+  import { timeToLoadTheMap } from '$lib/constants';
+  import { delay } from '$lib/utils/asset-utils';
+  import { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
+  import { t } from 'svelte-i18n';
   import { get } from 'svelte/store';
+  import SearchBar from '../elements/search-bar.svelte';
+  import LoadingSpinner from './loading-spinner.svelte';
   interface Point {
     lng: number;
     lat: number;
@@ -112,7 +112,12 @@
   };
 </script>
 
-<ConfirmDialog confirmColor="primary" title={$t('change_location')} width="wide" onConfirm={handleConfirm} {onCancel}>
+<ConfirmDialog
+  confirmColor="primary"
+  title={$t('change_location')}
+  size="medium"
+  onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
+>
   {#snippet promptSnippet()}
     <div class="flex flex-col w-full h-full gap-2">
       <div class="relative w-64 sm:w-96">

web/src/lib/components/shared-components/dialog/confirm-dialog.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import FullScreenModal from '../full-screen-modal.svelte';
+  import { Button, Modal, ModalBody, ModalFooter, type Color } from '@immich/ui';
-  import { t } from 'svelte-i18n';
   import type { Snippet } from 'svelte';
-  import { Button, type Color } from '@immich/ui';
+  import { t } from 'svelte-i18n';
 
   interface Props {
     title?: string;
@@ -13,9 +12,8 @@
     cancelColor?: Color;
     hideCancelButton?: boolean;
     disabled?: boolean;
-    width?: 'wide' | 'narrow';
+    size?: 'small' | 'medium';
-    onCancel: () => void;
+    onClose: (confirmed: boolean) => void;
-    onConfirm: () => void;
     promptSnippet?: Snippet;
   }
 
@@ -28,32 +26,33 @@
     cancelColor = 'secondary',
     hideCancelButton = false,
     disabled = false,
-    width = 'narrow',
+    size = 'small',
-    onCancel,
+    onClose,
-    onConfirm,
     promptSnippet,
   }: Props = $props();
 
   const handleConfirm = () => {
-    onConfirm();
+    onClose(true);
   };
 </script>
 
-<FullScreenModal {title} onClose={onCancel} {width}>
+<Modal {title} onClose={() => onClose(false)} {size} class="bg-light text-dark">
-  <div class="text-md py-5 text-center">
+  <ModalBody>
     {#if promptSnippet}{@render promptSnippet()}{:else}
       <p>{prompt}</p>
     {/if}
-  </div>
+  </ModalBody>
 
-  {#snippet stickyBottom()}
+  <ModalFooter>
-    {#if !hideCancelButton}
+    <div class="flex gap-3 w-full">
-      <Button shape="round" color={cancelColor} fullWidth onclick={onCancel}>
+      {#if !hideCancelButton}
-        {cancelText}
+        <Button shape="round" color={cancelColor} fullWidth onclick={() => onClose(false)}>
+          {cancelText}
+        </Button>
+      {/if}
+      <Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
+        {confirmText}
       </Button>
-    {/if}
+    </div>
-    <Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
+  </ModalFooter>
-      {confirmText}
+</Modal>
-    </Button>
-  {/snippet}
-</FullScreenModal>

web/src/lib/components/shared-components/dialog/dialog.ts

@@ -1,8 +1,7 @@
 import { writable } from 'svelte/store';
 
 type DialogActions = {
-  onConfirm: () => void;
+  onClose: (confirmed: boolean) => void;
-  onCancel: () => void;
 };
 
 type DialogOptions = {
@@ -24,13 +23,9 @@ function createDialogWrapper() {
     return new Promise<boolean>((resolve) => {
       const newDialog: Dialog = {
         ...options,
-        onConfirm: () => {
+        onClose: (confirmed) => {
           dialog.set(undefined);
-          resolve(true);
+          resolve(confirmed);
-        },
-        onCancel: () => {
-          dialog.set(undefined);
-          resolve(false);
         },
       };
 

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -1,31 +1,32 @@
 <script lang="ts">
-  import { type ShortcutOptions, shortcuts } from '$lib/actions/shortcut';
   import { goto } from '$app/navigation';
+  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import type { Viewport } from '$lib/stores/assets-store.svelte';
+  import type { TimelineAsset, Viewport } from '$lib/stores/assets-store.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import { handlePromiseError } from '$lib/utils';
   import { deleteAssets } from '$lib/utils/actions';
   import { archiveAssets, cancelMultiselect } from '$lib/utils/asset-utils';
-  import { featureFlags } from '$lib/stores/server-config.store';
+  import { focusNext } from '$lib/utils/focus-util';
   import { handleError } from '$lib/utils/handle-error';
+  import { getJustifiedLayoutFromAssets, type CommonJustifiedLayout } from '$lib/utils/layout-utils';
   import { navigate } from '$lib/utils/navigation';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { type AssetResponseDto } from '@immich/sdk';
+  import { debounce } from 'lodash-es';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
-  import ShowShortcuts from '../show-shortcuts.svelte';
-  import Portal from '../portal/portal.svelte';
-  import { handlePromiseError } from '$lib/utils';
   import DeleteAssetDialog from '../../photos-page/delete-asset-dialog.svelte';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import Portal from '../portal/portal.svelte';
-  import { debounce } from 'lodash-es';
+  import ShowShortcuts from '../show-shortcuts.svelte';
-  import { getJustifiedLayoutFromAssets, type CommonJustifiedLayout } from '$lib/utils/layout-utils';
-  import { focusNext } from '$lib/utils/focus-util';
 
   interface Props {
-    assets: AssetResponseDto[];
+    assets: (TimelineAsset | AssetResponseDto)[];
     assetInteraction: AssetInteraction;
     disableAssetSelect?: boolean;
     showArchiveIcon?: boolean;
@@ -33,9 +34,9 @@
     onIntersected?: (() => void) | undefined;
     showAssetName?: boolean;
     isShowDeleteConfirmation?: boolean;
-    onPrevious?: (() => Promise<AssetResponseDto | undefined>) | undefined;
+    onPrevious?: (() => Promise<{ id: string } | undefined>) | undefined;
-    onNext?: (() => Promise<AssetResponseDto | undefined>) | undefined;
+    onNext?: (() => Promise<{ id: string } | undefined>) | undefined;
-    onRandom?: (() => Promise<AssetResponseDto | undefined>) | undefined;
+    onRandom?: (() => Promise<{ id: string } | undefined>) | undefined;
     pageHeaderOffset?: number;
     slidingWindowOffset?: number;
   }
@@ -56,7 +57,7 @@
     pageHeaderOffset = 0,
   }: Props = $props();
 
-  let { isViewing: isViewerOpen, asset: viewingAsset, setAsset } = assetViewingStore;
+  let { isViewing: isViewerOpen, asset: viewingAsset, setAssetId } = assetViewingStore;
 
   let geometry: CommonJustifiedLayout | undefined = $state();
 
@@ -83,19 +84,26 @@
       containerHeight = geometry.containerHeight;
       containerWidth = geometry.containerWidth;
       for (const [i, asset] of assets.entries()) {
-        const layout = {
+        const top = geometry.getTop(i);
-          asset,
+        const left = geometry.getLeft(i);
-          top: geometry.getTop(i),
+        const width = geometry.getWidth(i);
-          left: geometry.getLeft(i),
+        const height = geometry.getHeight(i);
-          width: geometry.getWidth(i),
+
-          height: geometry.getHeight(i),
+        const layoutTopWithOffset = top + pageHeaderOffset;
-        };
+        const layoutBottom = layoutTopWithOffset + height;
-        // 54 is the content height of the asset-selection-app-bar
-        const layoutTopWithOffset = layout.top + pageHeaderOffset;
-        const layoutBottom = layoutTopWithOffset + layout.height;
 
         const display = layoutTopWithOffset < slidingWindow.bottom && layoutBottom > slidingWindow.top;
-        assetLayout.push({ ...layout, display });
+
+        const layout = {
+          asset,
+          top,
+          left,
+          width,
+          height,
+          display,
+        };
+
+        assetLayout.push(layout);
       }
     }
 
@@ -109,7 +117,7 @@
   let showShortcuts = $state(false);
   let currentViewAssetIndex = 0;
   let shiftKeyIsDown = $state(false);
-  let lastAssetMouseEvent: AssetResponseDto | null = $state(null);
+  let lastAssetMouseEvent: TimelineAsset | null = $state(null);
   let slidingWindow = $state({ top: 0, bottom: 0 });
 
   const updateSlidingWindow = () => {
@@ -139,14 +147,14 @@
       }
     }
   });
-  const viewAssetHandler = async (asset: AssetResponseDto) => {
+  const viewAssetHandler = async (asset: TimelineAsset) => {
     currentViewAssetIndex = assets.findIndex((a) => a.id == asset.id);
-    setAsset(assets[currentViewAssetIndex]);
+    await setAssetId(assets[currentViewAssetIndex].id);
     await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
   };
 
   const selectAllAssets = () => {
-    assetInteraction.selectAssets(assets);
+    assetInteraction.selectAssets(assets.map((a) => toTimelineAsset(a)));
   };
 
   const deselectAllAssets = () => {
@@ -168,7 +176,7 @@
     }
   };
 
-  const handleSelectAssets = (asset: AssetResponseDto) => {
+  const handleSelectAssets = (asset: TimelineAsset) => {
     if (!asset) {
       return;
     }
@@ -191,14 +199,14 @@
     assetInteraction.setAssetSelectionStart(deselect ? null : asset);
   };
 
-  const handleSelectAssetCandidates = (asset: AssetResponseDto | null) => {
+  const handleSelectAssetCandidates = (asset: TimelineAsset | null) => {
     if (asset) {
       selectAssetCandidates(asset);
     }
     lastAssetMouseEvent = asset;
   };
 
-  const selectAssetCandidates = (endAsset: AssetResponseDto) => {
+  const selectAssetCandidates = (endAsset: TimelineAsset) => {
     if (!shiftKeyIsDown) {
       return;
     }
@@ -215,7 +223,7 @@
       [start, end] = [end, start];
     }
 
-    assetInteraction.setAssetSelectionCandidates(assets.slice(start, end + 1));
+    assetInteraction.setAssetSelectionCandidates(assets.slice(start, end + 1).map((a) => toTimelineAsset(a)));
   };
 
   const onSelectStart = (e: Event) => {
@@ -293,7 +301,7 @@
 
   const handleNext = async (): Promise<boolean> => {
     try {
-      let asset: AssetResponseDto | undefined;
+      let asset: { id: string } | undefined;
       if (onNext) {
         asset = await onNext();
       } else {
@@ -317,9 +325,9 @@
     }
   };
 
-  const handleRandom = async (): Promise<AssetResponseDto | undefined> => {
+  const handleRandom = async (): Promise<{ id: string } | undefined> => {
     try {
-      let asset: AssetResponseDto | undefined;
+      let asset: { id: string } | undefined;
       if (onRandom) {
         asset = await onRandom();
       } else {
@@ -343,7 +351,7 @@
 
   const handlePrevious = async (): Promise<boolean> => {
     try {
-      let asset: AssetResponseDto | undefined;
+      let asset: { id: string } | undefined;
       if (onPrevious) {
         asset = await onPrevious();
       } else {
@@ -367,9 +375,9 @@
     }
   };
 
-  const navigateToAsset = async (asset?: AssetResponseDto) => {
+  const navigateToAsset = async (asset?: { id: string }) => {
     if (asset && asset.id !== $viewingAsset.id) {
-      setAsset(asset);
+      await setAssetId(asset.id);
       await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
     }
   };
@@ -388,14 +396,14 @@
         } else if (currentViewAssetIndex === assets.length) {
           await handlePrevious();
         } else {
-          setAsset(assets[currentViewAssetIndex]);
+          await setAssetId(assets[currentViewAssetIndex].id);
         }
         break;
       }
     }
   };
 
-  const assetMouseEventHandler = (asset: AssetResponseDto | null) => {
+  const assetMouseEventHandler = (asset: TimelineAsset | null) => {
     if (assetInteraction.selectionActive) {
       handleSelectAssetCandidates(asset);
     }
@@ -457,31 +465,31 @@
           class="absolute"
           style:overflow="clip"
           style="width: {layout.width}px; height: {layout.height}px; top: {layout.top}px; left: {layout.left}px"
-          title={showAssetName ? asset.originalFileName : ''}
         >
           <Thumbnail
             readonly={disableAssetSelect}
-            onClick={(asset) => {
+            onClick={() => {
               if (assetInteraction.selectionActive) {
-                handleSelectAssets(asset);
+                handleSelectAssets(toTimelineAsset(asset));
                 return;
               }
-              void viewAssetHandler(asset);
+              void viewAssetHandler(toTimelineAsset(asset));
             }}
-            onSelect={(asset) => handleSelectAssets(asset)}
+            onSelect={() => handleSelectAssets(toTimelineAsset(asset))}
-            onMouseEvent={() => assetMouseEventHandler(asset)}
+            onMouseEvent={() => assetMouseEventHandler(toTimelineAsset(asset))}
             {showArchiveIcon}
-            {asset}
+            asset={toTimelineAsset(asset)}
             selected={assetInteraction.hasSelectedAsset(asset.id)}
             selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
             thumbnailWidth={layout.width}
             thumbnailHeight={layout.height}
           />
+          <!-- note: if using showAssetName then the 'assets' prop must be AssetResponseDto (only used by folders) -->
           {#if showAssetName}
             <div
               class="absolute text-center p-1 text-xs font-mono font-semibold w-full bottom-0 bg-gradient-to-t bg-slate-50/75 overflow-clip text-ellipsis whitespace-pre-wrap"
             >
-              {asset.originalFileName}
+              {(asset as AssetResponseDto).originalFileName}
             </div>
           {/if}
         </div>

web/src/lib/components/utilities-page/duplicates/duplicate-asset.svelte

@@ -3,6 +3,7 @@
   import { getAssetThumbnailUrl } from '$lib/utils';
   import { getAssetResolution, getFileSize } from '$lib/utils/asset-utils';
   import { getAltText } from '$lib/utils/thumbnail-util';
+  import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { type AssetResponseDto, getAllAlbums } from '@immich/sdk';
   import { mdiHeart, mdiImageMultipleOutline, mdiMagnifyPlus } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -36,7 +37,7 @@
       <!-- THUMBNAIL-->
       <img
         src={getAssetThumbnailUrl(asset.id)}
-        alt={$getAltText(asset)}
+        alt={$getAltText(toTimelineAsset(asset))}
         title={assetData}
         class="h-60 object-cover rounded-t-xl w-full"
         draggable="false"

web/src/lib/forms/password-reset-success.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  import { copyToClipboard } from '$lib/utils';
+  import { Code, IconButton, Text } from '@immich/ui';
+  import { mdiContentCopy } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    onClose: () => void;
+    newPassword: string;
+  };
+
+  const { onClose, newPassword }: Props = $props();
+</script>
+
+<ConfirmDialog
+  title={$t('password_reset_success')}
+  confirmText={$t('done')}
+  {onClose}
+  hideCancelButton={true}
+  confirmColor="success"
+>
+  {#snippet promptSnippet()}
+    <div class="flex flex-col gap-4">
+      <Text>{$t('admin.user_password_has_been_reset')}</Text>
+
+      <div class="flex justify-center gap-2 items-center">
+        <Code color="primary">{newPassword}</Code>
+        <IconButton
+          icon={mdiContentCopy}
+          shape="round"
+          color="secondary"
+          variant="ghost"
+          onclick={() => copyToClipboard(newPassword)}
+          title={$t('copy_password')}
+          aria-label={$t('copy_password')}
+        />
+      </div>
+
+      <Text>{$t('admin.user_password_reset_description')}</Text>
+    </div>
+  {/snippet}
+</ConfirmDialog>

web/src/lib/managers/modal-manager.svelte.ts

@@ -0,0 +1,33 @@
+import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+import { mount, unmount, type Component, type ComponentProps } from 'svelte';
+
+type OnCloseData<T> = T extends { onClose: (data: infer R) => void } ? R : never;
+// TODO make `props` optional if component only has `onClose`
+// type OptionalIfEmpty<T extends object> = keyof T extends never ? undefined : T;
+
+class ModalManager {
+  open<T extends object, K = OnCloseData<T>>(Component: Component<T>, props: Omit<T, 'onClose'>) {
+    return new Promise<K>((resolve) => {
+      let modal: object = {};
+
+      const onClose = async (data: K) => {
+        await unmount(modal);
+        resolve(data);
+      };
+
+      modal = mount(Component, {
+        target: document.body,
+        props: {
+          ...(props as T),
+          onClose,
+        },
+      });
+    });
+  }
+
+  openDialog(options: Omit<ComponentProps<typeof ConfirmDialog>, 'onClose'>) {
+    return this.open(ConfirmDialog, options);
+  }
+}
+
+export const modalManager = new ModalManager();

web/src/lib/stores/asset-interaction.svelte.spec.ts

@@ -1,6 +1,6 @@
 import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
 import { resetSavedUser, user } from '$lib/stores/user.store';
-import { assetFactory } from '@test-data/factories/asset-factory';
+import { timelineAssetFactory } from '@test-data/factories/asset-factory';
 import { userAdminFactory } from '@test-data/factories/user-factory';
 
 describe('AssetInteraction', () => {
@@ -11,8 +11,8 @@ describe('AssetInteraction', () => {
   });
 
   it('calculates derived values from selection', () => {
-    assetInteraction.selectAsset(assetFactory.build({ isFavorite: true, isArchived: true, isTrashed: true }));
+    assetInteraction.selectAsset(timelineAssetFactory.build({ isFavorite: true, isArchived: true, isTrashed: true }));
-    assetInteraction.selectAsset(assetFactory.build({ isFavorite: true, isArchived: false, isTrashed: false }));
+    assetInteraction.selectAsset(timelineAssetFactory.build({ isFavorite: true, isArchived: false, isTrashed: false }));
 
     expect(assetInteraction.selectionActive).toBe(true);
     expect(assetInteraction.isAllTrashed).toBe(false);
@@ -22,7 +22,7 @@ describe('AssetInteraction', () => {
 
   it('updates isAllUserOwned when the active user changes', () => {
     const [user1, user2] = userAdminFactory.buildList(2);
-    assetInteraction.selectAsset(assetFactory.build({ ownerId: user1.id }));
+    assetInteraction.selectAsset(timelineAssetFactory.build({ ownerId: user1.id }));
 
     const cleanup = $effect.root(() => {
       expect(assetInteraction.isAllUserOwned).toBe(false);