Merge branch 'main' into upload-to-album

Change-Id: Ic5a5b1a476c2af93b465ef23dabc601a6a6a6964

Co-authored-by: Alex <alex.tran1502@gmail.com>

i18n/en.json

@@ -778,6 +778,7 @@
   "clear": "Clear",
   "clear_all": "Clear all",
   "clear_all_recent_searches": "Clear all recent searches",
+  "clear_failed_count": "Clear failed ({count})",
   "clear_file_cache": "Clear File Cache",
   "clear_message": "Clear message",
   "clear_value": "Clear value",

mobile/android/app/src/main/kotlin/app/alextran/immich/images/RemoteImagesImpl.kt

@@ -23,6 +23,8 @@ import java.io.IOException
 import java.nio.ByteBuffer
 import java.util.concurrent.ConcurrentHashMap
 
+private const val MAX_PREALLOC_BYTES = 128 * 1024 * 1024
+
 private class RemoteRequest(val cancellationSignal: CancellationSignal)
 
 class RemoteImagesImpl(context: Context) : RemoteImageApi {
@@ -228,7 +230,6 @@ private class CronetImageFetcher : ImageFetcher {
     private val onComplete: () -> Unit,
   ) : UrlRequest.Callback() {
     private var buffer: NativeByteBuffer? = null
-    private var wrapped: ByteBuffer? = null
     private var error: Exception? = null
 
     override fun onRedirectReceived(request: UrlRequest, info: UrlResponseInfo, newUrl: String) {
@@ -242,15 +243,16 @@ private class CronetImageFetcher : ImageFetcher {
       }
 
       try {
+        // Content-Length is a size hint only. With Content-Encoding (gzip/br/...),
+        // Cronet auto-decompresses and writes decompressed bytes to our buffer, which
+        // may exceed the wire/compressed Content-Length. Always use the growable
+        // buffer path so we can't overflow.
         val contentLength = info.allHeaders["content-length"]?.firstOrNull()?.toIntOrNull() ?: 0
-        if (contentLength > 0) {
-          buffer = NativeByteBuffer(contentLength + 1)
-          wrapped = NativeBuffer.wrap(buffer!!.pointer, contentLength + 1)
-          request.read(wrapped)
-        } else {
-          buffer = NativeByteBuffer(INITIAL_BUFFER_SIZE)
-          request.read(buffer!!.wrapRemaining())
-        }
+        // Cap the up-front alloc: Content-Length is untrusted and can be huge or near
+        // Int.MAX_VALUE (overflowing `+1`). For larger responses the grow path takes over.
+        val initialSize = if (contentLength in 1..MAX_PREALLOC_BYTES) contentLength + 1 else INITIAL_BUFFER_SIZE
+        buffer = NativeByteBuffer(initialSize)
+        request.read(buffer!!.wrapRemaining())
       } catch (e: Exception) {
         error = e
         return request.cancel()
@@ -263,14 +265,14 @@ private class CronetImageFetcher : ImageFetcher {
       byteBuffer: ByteBuffer
     ) {
       try {
-        val buf = if (wrapped == null) {
-          buffer!!.run {
-            advance(byteBuffer.position())
-            ensureHeadroom()
-            wrapRemaining()
-          }
-        } else {
-          wrapped
+        // Always pass a fresh wrap so byteBuffer.position() represents only the
+        // bytes Cronet wrote in this iteration. Reusing the caller-supplied
+        // ByteBuffer breaks advance(): Cronet's position keeps accumulating
+        // across reads, which would double-count previous iterations' bytes.
+        val buf = buffer!!.run {
+          advance(byteBuffer.position())
+          ensureHeadroom()
+          wrapRemaining()
         }
         request.read(buf)
       } catch (e: Exception) {
@@ -280,7 +282,6 @@ private class CronetImageFetcher : ImageFetcher {
     }
 
     override fun onSucceeded(request: UrlRequest, info: UrlResponseInfo) {
-      wrapped?.let { buffer!!.advance(it.position()) }
       onSuccess(buffer!!)
       onComplete()
     }

mobile/ios/Runner/Sync/MessagesImpl.swift

@@ -110,7 +110,7 @@ class NativeSyncApiImpl: ImmichPlugin, NativeSyncApi, FlutterPlugin {
         
         var domainAlbum = PlatformAlbum(
           id: album.localIdentifier,
-          name: album.localizedTitle!,
+          name: album.localizedTitle ?? album.localIdentifier,
           updatedAt: nil,
           isCloud: isCloud,
           assetCount: Int64(assets.count)

mobile/lib/constants/enums.dart

@@ -18,3 +18,7 @@ enum CleanupStep { selectDate, scan, delete }
 enum AssetKeepType { none, photosOnly, videosOnly }
 
 enum AssetDateAggregation { start, end }
+
+enum SlideshowLook { contain, cover, blurredBackground }
+
+enum SlideshowDirection { forward, backward, shuffle }

mobile/lib/domain/models/config/app_config.dart

@@ -4,6 +4,7 @@ import 'package:immich_mobile/domain/models/config/map_config.dart';
 import 'package:immich_mobile/domain/models/config/theme_config.dart';
 import 'package:immich_mobile/domain/models/config/timeline_config.dart';
 import 'package:immich_mobile/domain/models/config/viewer_config.dart';
+import 'package:immich_mobile/domain/models/config/slideshow_config.dart';
 
 class AppConfig {
   final ThemeConfig theme;
@@ -12,6 +13,7 @@ class AppConfig {
   final TimelineConfig timeline;
   final ImageConfig image;
   final ViewerConfig viewer;
+  final SlideshowConfig slideshow;
 
   const AppConfig({
     this.theme = const .new(),
@@ -20,6 +22,7 @@ class AppConfig {
     this.timeline = const .new(),
     this.image = const .new(),
     this.viewer = const .new(),
+    this.slideshow = const .new(),
   });
 
   AppConfig copyWith({
@@ -29,6 +32,7 @@ class AppConfig {
     TimelineConfig? timeline,
     ImageConfig? image,
     ViewerConfig? viewer,
+    SlideshowConfig? slideshow,
   }) => .new(
     theme: theme ?? this.theme,
     cleanup: cleanup ?? this.cleanup,
@@ -36,6 +40,7 @@ class AppConfig {
     timeline: timeline ?? this.timeline,
     image: image ?? this.image,
     viewer: viewer ?? this.viewer,
+    slideshow: slideshow ?? this.slideshow,
   );
 
   @override
@@ -47,12 +52,13 @@ class AppConfig {
           other.map == map &&
           other.timeline == timeline &&
           other.image == image &&
-          other.viewer == viewer);
+          other.viewer == viewer &&
+          other.slideshow == slideshow);
 
   @override
-  int get hashCode => Object.hash(theme, cleanup, map, timeline, image, viewer);
+  int get hashCode => Object.hash(theme, cleanup, map, timeline, image, viewer, slideshow);
 
   @override
   String toString() =>
-      'AppConfig(theme: $theme, cleanup: $cleanup, map: $map, timeline: $timeline, image: $image, viewer: $viewer)';
+      'AppConfig(theme: $theme, cleanup: $cleanup, map: $map, timeline: $timeline, image: $image, viewer: $viewer, slideshow: $slideshow)';
 }

mobile/lib/domain/models/config/slideshow_config.dart

@@ -0,0 +1,48 @@
+import 'package:immich_mobile/constants/enums.dart';
+
+class SlideshowConfig {
+  final bool transition;
+  final bool repeat;
+  final int duration;
+  final SlideshowLook look;
+  final SlideshowDirection direction;
+
+  const SlideshowConfig({
+    this.transition = true,
+    this.repeat = true,
+    this.duration = 5,
+    this.look = SlideshowLook.contain,
+    this.direction = SlideshowDirection.forward,
+  });
+
+  SlideshowConfig copyWith({
+    bool? transition,
+    bool? repeat,
+    int? duration,
+    SlideshowLook? look,
+    SlideshowDirection? direction,
+  }) => SlideshowConfig(
+    transition: transition ?? this.transition,
+    repeat: repeat ?? this.repeat,
+    duration: duration ?? this.duration,
+    look: look ?? this.look,
+    direction: direction ?? this.direction,
+  );
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      (other is SlideshowConfig &&
+          other.transition == transition &&
+          other.repeat == repeat &&
+          other.duration == duration &&
+          other.look == look &&
+          other.direction == direction);
+
+  @override
+  int get hashCode => Object.hash(transition, repeat, duration, look, direction);
+
+  @override
+  String toString() =>
+      'SlideshowConfig(transition: $transition, repeat: $repeat, duration: $duration, look: $look, direction: $direction)';
+}

mobile/lib/domain/models/metadata_key.dart

@@ -64,7 +64,19 @@ enum MetadataKey<T extends Object> {
   ),
   cleanupKeepAlbumIds<List<String>>(.appConfig, 'cleanup.keepAlbumIds', [], _ListCodec(_PrimitiveCodec.string)),
   cleanupCutoffDaysAgo<int>(.appConfig, 'cleanup.cutoffDaysAgo', -1),
-  cleanupDefaultsInitialized<bool>(.appConfig, 'cleanup.defaultsInitialized', false);
+  cleanupDefaultsInitialized<bool>(.appConfig, 'cleanup.defaultsInitialized', false),
+
+  // Slideshow
+  slideshowTransition<bool>(.appConfig, 'slideshow.transition', true),
+  slideshowRepeat<bool>(.appConfig, 'slideshow.repeat', true),
+  slideshowDuration<int>(.appConfig, 'slideshow.duration', 5),
+  slideshowLook<SlideshowLook>(.appConfig, 'slideshow.look', SlideshowLook.contain, _EnumCodec(SlideshowLook.values)),
+  slideshowDirection<SlideshowDirection>(
+    .appConfig,
+    'slideshow.direction',
+    SlideshowDirection.forward,
+    _EnumCodec(SlideshowDirection.values),
+  );
 
   final MetadataDomain domain;
   final String name;

mobile/lib/domain/models/store.model.dart

@@ -29,6 +29,9 @@ enum StoreKey<T> {
   readonlyModeEnabled<bool>._(138),
   albumGridView<bool>._(140),
 
+  // Image viewer navigation settings
+  tapToNavigate<bool>._(141),
+
   // Experimental stuff
   enableBackup<bool>._(1003),
   useWifiForUploadVideos<bool>._(1004),

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

@@ -9,12 +9,47 @@ import 'package:immich_mobile/infrastructure/repositories/remote_album.repositor
 import 'package:immich_mobile/models/albums/album_search.model.dart';
 import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
 import 'package:immich_mobile/repositories/drift_album_api_repository.dart';
+import 'package:immich_mobile/services/foreground_upload.service.dart';
+import 'package:logging/logging.dart';
+
+/// Categorizes a heterogeneous asset selection into the candidates that can
+/// be added to an album immediately (already on the server) and the local-only
+/// candidates that must be uploaded first.
+class AlbumAssetCandidates {
+  final List<String> remoteAssetIds;
+  final List<LocalAsset> localAssetsToUpload;
+
+  const AlbumAssetCandidates({required this.remoteAssetIds, required this.localAssetsToUpload});
+}
 
 class RemoteAlbumService {
+  static final _logger = Logger('RemoteAlbumService');
+
   final DriftRemoteAlbumRepository _repository;
   final DriftAlbumApiRepository _albumApiRepository;
+  final ForegroundUploadService _uploadService;
 
-  const RemoteAlbumService(this._repository, this._albumApiRepository);
+  const RemoteAlbumService(this._repository, this._albumApiRepository, this._uploadService);
+
+  /// Categorizes a heterogeneous asset selection into already-on-server IDs
+  /// and local assets that still need to be uploaded.
+  static AlbumAssetCandidates categorizeCandidates(Iterable<BaseAsset> assets) {
+    final remoteIds = <String>[];
+    final localToUpload = <LocalAsset>[];
+    for (final asset in assets) {
+      if (asset is RemoteAsset) {
+        remoteIds.add(asset.id);
+      } else if (asset is LocalAsset) {
+        final remoteId = asset.remoteId;
+        if (remoteId != null) {
+          remoteIds.add(remoteId);
+        } else {
+          localToUpload.add(asset);
+        }
+      }
+    }
+    return AlbumAssetCandidates(remoteAssetIds: remoteIds, localAssetsToUpload: localToUpload);
+  }
 
   Stream<RemoteAlbum?> watchAlbum(String albumId) {
     return _repository.watchAlbum(albumId);
@@ -148,6 +183,122 @@ class RemoteAlbumService {
     return album.added.length;
   }
 
+  /// !TODO The name here is not clear as we have addAssets method above,
+  /// which is only add remote assets to album, for the next PR, we will allow
+  /// adding local assets from album from the timeline as well with this flow.
+  /// So saving that for the next refactor
+  Future<int> addAssetsToAlbum({
+    required String albumId,
+    required UserDto uploader,
+    required AlbumAssetCandidates candidates,
+    UploadCallbacks uploadCallbacks = const UploadCallbacks(),
+  }) async {
+    int addedCount = 0;
+    if (candidates.remoteAssetIds.isNotEmpty) {
+      addedCount += await addAssets(albumId: albumId, assetIds: candidates.remoteAssetIds);
+    }
+    if (candidates.localAssetsToUpload.isNotEmpty) {
+      addedCount += await _uploadAndAddLocals(albumId, uploader, candidates.localAssetsToUpload, uploadCallbacks);
+    }
+    return addedCount;
+  }
+
+  /// Creates an album, seeding it with already-remote asset IDs, then uploads
+  /// local-only assets and links each one as it finishes.
+  Future<RemoteAlbum> createAlbumWithAssets({
+    required String title,
+    required UserDto owner,
+    String? description,
+    AlbumAssetCandidates candidates = const AlbumAssetCandidates(remoteAssetIds: [], localAssetsToUpload: []),
+    UploadCallbacks uploadCallbacks = const UploadCallbacks(),
+  }) async {
+    final album = await createAlbum(
+      title: title,
+      owner: owner,
+      description: description,
+      assetIds: candidates.remoteAssetIds,
+    );
+    if (candidates.localAssetsToUpload.isNotEmpty) {
+      await _uploadAndAddLocals(album.id, owner, candidates.localAssetsToUpload, uploadCallbacks);
+    }
+    return album;
+  }
+
+  Future<int> _uploadAndAddLocals(
+    String albumId,
+    UserDto uploader,
+    List<LocalAsset> localAssets,
+    UploadCallbacks userCallbacks,
+  ) async {
+    int addedCount = 0;
+    final pendingAdds = <Future<void>>[];
+    final localById = {for (final a in localAssets) a.id: a};
+
+    final wrappedCallbacks = UploadCallbacks(
+      onProgress: (localId, filename, bytes, totalBytes) => _runUploadCallback(
+        'Upload progress callback failed for $localId',
+        () => userCallbacks.onProgress?.call(localId, filename, bytes, totalBytes),
+      ),
+      onICloudProgress: (localId, progress) => _runUploadCallback(
+        'iCloud progress callback failed for $localId',
+        () => userCallbacks.onICloudProgress?.call(localId, progress),
+      ),
+      onError: (localId, errorMessage) => _runUploadCallback(
+        'Upload error callback failed for $localId',
+        () => userCallbacks.onError?.call(localId, errorMessage),
+      ),
+      onSuccess: (localId, remoteId) {
+        _runUploadCallback(
+          'Upload success callback failed for $localId',
+          () => userCallbacks.onSuccess?.call(localId, remoteId),
+        );
+        final source = localById[localId];
+        if (source == null) {
+          _logger.warning('Upload success for $localId but source LocalAsset missing; skipping album link');
+          return;
+        }
+        pendingAdds.add(
+          _linkUploadedAssetToAlbum(albumId, remoteId, uploader, source)
+              .then<void>((added) {
+                addedCount += added;
+              })
+              .catchError((Object error, StackTrace stack) {
+                _logger.warning('Failed to add uploaded asset $remoteId to album $albumId', error, stack);
+              }),
+        );
+      },
+    );
+
+    await _uploadService.uploadManual(localAssets, callbacks: wrappedCallbacks);
+    await Future.wait(pendingAdds);
+    return addedCount;
+  }
+
+  void _runUploadCallback(String message, void Function() callback) {
+    try {
+      callback();
+    } catch (error, stack) {
+      _logger.warning(message, error, stack);
+    }
+  }
+
+  /// Links a freshly-uploaded asset to an album, ensuring the local DB
+  /// reflects the change without waiting for the next sync. We call the API
+  /// (server is the source of truth), then upsert a placeholder
+  /// `remote_asset_entity` row from the local source so the FK-protected
+  /// junction insert succeeds. Sync overwrites the placeholder later with
+  /// the authoritative server data.
+  Future<int> _linkUploadedAssetToAlbum(String albumId, String remoteId, UserDto uploader, LocalAsset source) async {
+    final result = await _albumApiRepository.addAssets(albumId, [remoteId]);
+    if (result.added.isEmpty) {
+      return 0;
+    }
+
+    await _repository.upsertRemoteAssetStub(remoteId: remoteId, ownerId: uploader.id, source: source);
+    await _repository.addAssets(albumId, result.added);
+    return result.added.length;
+  }
+
   Future<void> deleteAlbum(String albumId) async {
     await _albumApiRepository.deleteAlbum(albumId);
 

mobile/lib/infrastructure/repositories/metadata.repository.dart

@@ -139,6 +139,13 @@ extension<T extends Object> on MetadataDomain<T> {
             autoPlayVideo: repo._read(.viewerAutoPlayVideo),
             tapToNavigate: repo._read(.viewerTapToNavigate),
           ),
+          slideshow: .new(
+            transition: repo._read(.slideshowTransition),
+            repeat: repo._read(.slideshowRepeat),
+            duration: repo._read(.slideshowDuration),
+            look: repo._read(.slideshowLook),
+            direction: repo._read(.slideshowDirection),
+          ),
         );
       case .systemConfig:
         repo._systemConfig = .new(logLevel: repo._read(.logLevel));

mobile/lib/infrastructure/repositories/remote_album.repository.dart

@@ -10,6 +10,7 @@ import 'package:immich_mobile/infrastructure/entities/remote_album.entity.drift.
 import 'package:immich_mobile/infrastructure/entities/remote_album_asset.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/entities/remote_album_user.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.dart';
+import 'package:immich_mobile/infrastructure/entities/remote_asset.entity.drift.dart';
 import 'package:immich_mobile/infrastructure/repositories/db.repository.dart';
 
 enum SortRemoteAlbumsBy { id, updatedAt }
@@ -159,7 +160,7 @@ class DriftRemoteAlbumRepository extends DriftDatabaseRepository {
         createdAt: Value(album.createdAt),
         updatedAt: Value(album.updatedAt),
         description: Value(album.description),
-        thumbnailAssetId: Value(album.thumbnailAssetId),
+        thumbnailAssetId: Value(album.thumbnailAssetId ?? (assetIds.isNotEmpty ? assetIds.first : null)),
         isActivityEnabled: Value(album.isActivityEnabled),
         order: Value(album.order),
       );
@@ -274,17 +275,59 @@ class DriftRemoteAlbumRepository extends DriftDatabaseRepository {
   }
 
   Future<int> addAssets(String albumId, List<String> assetIds) async {
+    if (assetIds.isEmpty) {
+      return 0;
+    }
+
     final albumAssets = assetIds.map(
       (assetId) => RemoteAlbumAssetEntityCompanion(albumId: Value(albumId), assetId: Value(assetId)),
     );
 
-    await _db.batch((batch) {
-      batch.insertAll(_db.remoteAlbumAssetEntity, albumAssets);
+    await _db.transaction(() async {
+      await _db.batch((batch) {
+        batch.insertAll(_db.remoteAlbumAssetEntity, albumAssets);
+      });
+
+      final album = _db.update(_db.remoteAlbumEntity)
+        ..where((row) => row.id.equals(albumId) & row.thumbnailAssetId.isNull());
+
+      await album.write(RemoteAlbumEntityCompanion(thumbnailAssetId: Value(assetIds.first)));
     });
 
     return assetIds.length;
   }
 
+  /// Inserts a placeholder `remote_asset_entity` row from a freshly-uploaded
+  /// local asset. Skips silently if a row with the same id or
+  /// (owner_id, checksum) already exists — sync will overwrite with the
+  /// authoritative server data once the AssetUploadReadyV1 event is processed.
+  Future<void> upsertRemoteAssetStub({
+    required String remoteId,
+    required String ownerId,
+    required LocalAsset source,
+  }) async {
+    await _db
+        .into(_db.remoteAssetEntity)
+        .insert(
+          RemoteAssetEntityCompanion(
+            id: Value(remoteId),
+            ownerId: Value(ownerId),
+            checksum: Value(source.checksum ?? remoteId),
+            name: Value(source.name),
+            type: Value(source.type),
+            createdAt: Value(source.createdAt),
+            updatedAt: Value(source.updatedAt),
+            width: Value(source.width),
+            height: Value(source.height),
+            durationMs: Value(source.durationMs),
+            isFavorite: Value(source.isFavorite),
+            visibility: const Value(AssetVisibility.timeline),
+            isEdited: Value(source.isEdited),
+          ),
+          mode: InsertMode.insertOrIgnore,
+        );
+  }
+
   Future<void> addUsers(String albumId, List<String> userIds) {
     final albumUsers = userIds.map(
       (assetId) => RemoteAlbumUserEntityCompanion(

mobile/lib/presentation/pages/drift_album.page.dart

@@ -37,6 +37,7 @@ class _DriftAlbumsPageState extends ConsumerState<DriftAlbumsPage> {
 
     final scrollView = CustomScrollView(
       controller: _scrollController,
+      physics: const AlwaysScrollableScrollPhysics(),
       slivers: [
         ImmichSliverAppBar(
           snap: false,

mobile/lib/presentation/pages/drift_asset_selection_timeline.page.dart

@@ -5,7 +5,6 @@ import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
-import 'package:immich_mobile/providers/user.provider.dart';
 
 @RoutePage()
 class DriftAssetSelectionTimelinePage extends ConsumerWidget {
@@ -22,17 +21,13 @@ class DriftAssetSelectionTimelinePage extends ConsumerWidget {
           ),
         ),
         timelineServiceProvider.overrideWith((ref) {
-          final user = ref.watch(currentUserProvider);
-          if (user == null) {
-            throw Exception('User must be logged in to access asset selection timeline');
-          }
-
-          final timelineService = ref.watch(timelineFactoryProvider).remoteAssets(user.id);
+          final timelineUsers = ref.watch(timelineUsersProvider).valueOrNull ?? [];
+          final timelineService = ref.watch(timelineFactoryProvider).main(timelineUsers);
           ref.onDispose(timelineService.dispose);
           return timelineService;
         }),
       ],
-      child: const Timeline(),
+      child: const Timeline(showStorageIndicator: true),
     );
   }
 }

mobile/lib/presentation/pages/drift_create_album.page.dart

@@ -179,17 +179,14 @@ class _DriftCreateAlbumPageState extends ConsumerState<DriftCreateAlbumPage> {
     }
 
     final album = await ref
-        .watch(remoteAlbumProvider.notifier)
-        .createAlbum(
+        .read(remoteAlbumProvider.notifier)
+        .createAlbumWithAssets(
           title: title,
           description: albumDescriptionController.text.trim(),
-          assetIds: selectedAssets.map((asset) {
-            final remoteAsset = asset as RemoteAsset;
-            return remoteAsset.id;
-          }).toList(),
+          assets: selectedAssets,
         );
 
-    if (album != null) {
+    if (album != null && context.mounted) {
       unawaited(context.replaceRoute(RemoteAlbumRoute(album: album)));
     }
   }

mobile/lib/presentation/pages/drift_remote_album.page.dart

@@ -8,6 +8,7 @@ import 'package:immich_mobile/domain/models/album/album.model.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/album/pending_uploads_banner.widget.dart';
 import 'package:immich_mobile/presentation/widgets/bottom_sheet/remote_album_bottom_sheet.widget.dart';
 import 'package:immich_mobile/presentation/widgets/remote_album/drift_album_option.widget.dart';
 import 'package:immich_mobile/presentation/widgets/timeline/timeline.widget.dart';
@@ -39,7 +40,8 @@ class _RemoteAlbumPageState extends ConsumerState<RemoteAlbumPage> {
   }
 
   Future<void> addAssets(BuildContext context) async {
-    final albumAssets = await ref.read(remoteAlbumProvider.notifier).getAssets(_album.id);
+    final notifier = ref.read(remoteAlbumProvider.notifier);
+    final albumAssets = await notifier.getAssets(_album.id);
 
     final newAssets = await context.pushRoute<Set<BaseAsset>>(
       DriftAssetSelectionTimelineRoute(lockedSelectionAssets: albumAssets.toSet()),
@@ -49,17 +51,9 @@ class _RemoteAlbumPageState extends ConsumerState<RemoteAlbumPage> {
       return;
     }
 
-    final added = await ref
-        .read(remoteAlbumProvider.notifier)
-        .addAssets(
-          _album.id,
-          newAssets.map((asset) {
-            final remoteAsset = asset as RemoteAsset;
-            return remoteAsset.id;
-          }).toList(),
-        );
+    final added = await notifier.addAssetsToAlbum(_album.id, newAssets);
 
-    if (added > 0) {
+    if (added > 0 && context.mounted) {
       ImmichToast.show(
         context: context,
         msg: "assets_added_to_album_count".t(context: context, args: {'count': added.toString()}),
@@ -186,6 +180,7 @@ class _RemoteAlbumPageState extends ConsumerState<RemoteAlbumPage> {
         currentRemoteAlbumScopedProvider.overrideWithValue(_album),
       ],
       child: Timeline(
+        topSliverWidget: PendingUploadsBanner(albumId: _album.id),
         appBar: RemoteAlbumSliverAppBar(
           icon: Icons.photo_album_outlined,
           kebabMenu: _AlbumKebabMenu(

mobile/lib/presentation/pages/drift_slideshow.page.dart

@@ -0,0 +1,350 @@
+import 'dart:async';
+import 'dart:math';
+import 'dart:ui';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/config/slideshow_config.dart';
+import 'package:immich_mobile/domain/services/timeline.service.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/scroll_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/pages/common/settings.page.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/video_viewer.widget.dart';
+import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
+import 'package:immich_mobile/providers/asset_viewer/video_player_provider.dart';
+import 'package:immich_mobile/providers/infrastructure/metadata.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+import 'package:immich_mobile/widgets/common/immich_loading_indicator.dart';
+import 'package:immich_mobile/widgets/photo_view/photo_view.dart';
+
+@RoutePage()
+class DriftSlideshowPage extends ConsumerStatefulWidget {
+  final TimelineService timeline;
+
+  const DriftSlideshowPage({super.key, required this.timeline});
+
+  @override
+  ConsumerState<DriftSlideshowPage> createState() => _DriftSlideshowPageState();
+}
+
+class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> {
+  late final SlideshowConfig _config;
+  late final PageController _pageController;
+  late final Stopwatch _stopwatch;
+  late Timer _timer;
+  late int _index;
+  late int _nextIndex;
+  bool _paused = false;
+  bool _showAppBar = false;
+
+  @override
+  initState() {
+    super.initState();
+    _config = ref.read(appConfigProvider.select((s) => s.slideshow));
+    final asset = ref.read(assetViewerProvider).currentAsset;
+    _index = asset == null ? 0 : widget.timeline.getIndex(asset.heroTag) ?? 0;
+    _pageController = PageController(initialPage: _index);
+    _stopwatch = Stopwatch();
+    _createTimer();
+    _updateNextIndex();
+
+    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
+  }
+
+  @override
+  dispose() {
+    _timer.cancel();
+    _stopwatch.stop();
+    _pageController.dispose();
+    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
+    super.dispose();
+  }
+
+  void _play() {
+    final asset = widget.timeline.getAssetSafe(_index)!;
+
+    if (asset.isImage) {
+      _createTimer();
+    } else if (ref.read(videoPlayerProvider(asset.heroTag)).status == VideoPlaybackStatus.paused) {
+      ref.read(videoPlayerProvider(asset.heroTag).notifier).play();
+    } else {
+      _nextPage();
+    }
+
+    _updateNextIndex();
+
+    setState(() {
+      _paused = false;
+    });
+  }
+
+  void _pause() {
+    _timer.cancel();
+    _stopwatch.stop();
+
+    final asset = widget.timeline.getAssetSafe(_index)!;
+
+    if (!asset.isImage) {
+      ref.read(videoPlayerProvider(asset.heroTag).notifier).pause();
+    }
+
+    setState(() {
+      _paused = true;
+    });
+  }
+
+  void _updateNextIndex() {
+    _nextIndex = switch (_config.direction) {
+      SlideshowDirection.forward => _index + 1,
+      SlideshowDirection.backward => _index - 1,
+      SlideshowDirection.shuffle => widget.timeline.getIndex(widget.timeline.getRandomAsset().heroTag)!,
+    };
+
+    if (!widget.timeline.hasRange(_nextIndex, 1)) {
+      widget.timeline.preloadAssets(_nextIndex);
+    }
+  }
+
+  void _nextPage() async {
+    if (_nextIndex < 0 || _nextIndex >= widget.timeline.totalAssets) {
+      if (_config.repeat) {
+        final wrapped = _config.direction == SlideshowDirection.forward ? 0 : widget.timeline.totalAssets - 1;
+        await widget.timeline.preloadAssets(wrapped);
+        _pageController.jumpToPage(wrapped);
+      }
+      return;
+    }
+
+    if (!widget.timeline.hasRange(_nextIndex, 1)) {
+      await widget.timeline.preloadAssets(_nextIndex);
+    }
+
+    if (_config.direction == SlideshowDirection.shuffle || !_config.transition) {
+      _pageController.jumpToPage(_nextIndex);
+    } else {
+      unawaited(_pageController.animateToPage(_nextIndex, duration: Durations.long2, curve: Curves.easeIn));
+    }
+  }
+
+  void _createTimer() {
+    _timer = Timer(Duration(milliseconds: _config.duration * 1000 - _stopwatch.elapsedMilliseconds), () {
+      _stopwatch.stop();
+      _stopwatch.reset();
+      _nextPage();
+    });
+
+    _stopwatch.start();
+  }
+
+  void _pageChanged(int page) {
+    final asset = widget.timeline.getAssetSafe(page)!;
+
+    setState(() {
+      _index = page;
+
+      if (!asset.isImage) {
+        _paused = false;
+      }
+    });
+
+    _timer.cancel();
+    _stopwatch.stop();
+    _stopwatch.reset();
+
+    if (!_paused && asset.isImage) {
+      _createTimer();
+    }
+
+    _updateNextIndex();
+  }
+
+  void _onTapUp() async {
+    await SystemChrome.setEnabledSystemUIMode(_showAppBar ? SystemUiMode.immersive : SystemUiMode.edgeToEdge);
+
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      setState(() {
+        _showAppBar = !_showAppBar;
+      });
+    });
+  }
+
+  Widget _getProgressBar(BuildContext context) {
+    final asset = widget.timeline.getAssetSafe(_index);
+
+    if (asset == null) {
+      return Container();
+    }
+
+    if (asset.isImage) {
+      final elapsed = _stopwatch.elapsedMilliseconds;
+      final duration = _config.duration * 1000;
+
+      return TweenAnimationBuilder(
+        key: Key(_index.toString()),
+        tween: Tween<double>(begin: elapsed / duration.toDouble(), end: _paused ? elapsed / duration.toDouble() : 1.0),
+        duration: Duration(milliseconds: _paused ? 1 : max(duration - elapsed, 1)),
+        builder: (context, value, _) => LinearProgressIndicator(
+          color: context.colorScheme.primary,
+          borderRadius: const BorderRadius.all(Radius.zero),
+          minHeight: 5,
+          value: value,
+        ),
+      );
+    } else {
+      return LinearProgressIndicator(
+        color: context.colorScheme.primary,
+        borderRadius: const BorderRadius.all(Radius.zero),
+        minHeight: 5,
+        value:
+            ref.watch(videoPlayerProvider(asset.heroTag).select((s) => s.position)).inMilliseconds /
+            asset.duration.inMilliseconds,
+      );
+    }
+  }
+
+  Widget _getBlur(BuildContext context, int index) {
+    final asset = widget.timeline.getAssetSafe(index);
+
+    if (asset == null) {
+      return Container();
+    }
+
+    return ImageFiltered(
+      imageFilter: ImageFilter.blur(sigmaX: 30, sigmaY: 30),
+      child: Container(
+        decoration: BoxDecoration(
+          image: DecorationImage(
+            image: getFullImageProvider(asset, size: Size(context.width, context.height)),
+            fit: BoxFit.cover,
+          ),
+        ),
+        child: Container(color: Colors.black.withValues(alpha: 0.2)),
+      ),
+    );
+  }
+
+  Widget _getPhotoView(BuildContext context, int index) {
+    final asset = widget.timeline.getAssetSafe(index);
+
+    if (asset == null) {
+      return const Center(child: ImmichLoadingIndicator());
+    }
+
+    final scale = _config.look == SlideshowLook.cover
+        ? PhotoViewComputedScale.covered
+        : PhotoViewComputedScale.contained;
+    final isCurrent = _index == index;
+    final imageProvider = getFullImageProvider(asset, size: context.sizeData);
+
+    if (asset.isImage) {
+      final zoomOut = index % 2 == 1;
+      final elapsed = _stopwatch.elapsedMilliseconds;
+      final duration = _config.duration * 1000;
+      final progress = zoomOut ? 1.0 - elapsed / duration.toDouble() : elapsed / duration.toDouble();
+
+      return TweenAnimationBuilder(
+        tween: Tween<double>(
+          begin: progress,
+          end: _paused
+              ? progress
+              : zoomOut
+              ? 0.0
+              : 1.0,
+        ),
+        duration: Duration(milliseconds: _paused ? 1 : max(duration - elapsed, 1)),
+        builder: (context, value, _) => PhotoView(
+          imageProvider: imageProvider,
+          index: index,
+          disableScaleGestures: true,
+          gaplessPlayback: true,
+          filterQuality: FilterQuality.high,
+          initialScale: scale * (1.0 + value / 10.0),
+          controller: PhotoViewController(),
+          onTapUp: (_, _, _) => _onTapUp(),
+        ),
+      );
+    } else {
+      final status = ref.watch(videoPlayerProvider(asset.heroTag).select((s) => s.status));
+      final position = ref.read(videoPlayerProvider(asset.heroTag)).position;
+
+      if (status == VideoPlaybackStatus.completed && isCurrent && position.inMicroseconds > 0) {
+        _nextPage();
+      } else if (status == VideoPlaybackStatus.playing) {
+        ref.read(videoPlayerProvider(asset.heroTag).notifier).setLoop(false);
+      }
+
+      return PhotoView.customChild(
+        onTapUp: (_, _, _) => _onTapUp(),
+        disableScaleGestures: true,
+        filterQuality: FilterQuality.high,
+        initialScale: scale,
+        child: NativeVideoViewer(
+          asset: asset,
+          isCurrent: isCurrent,
+          image: Image(image: imageProvider, fit: BoxFit.contain, alignment: Alignment.center),
+        ),
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: PreferredSize(
+        preferredSize: Size(AppBar().preferredSize.width, AppBar().preferredSize.height + 5),
+        child: IgnorePointer(
+          ignoring: !_showAppBar,
+          child: AnimatedOpacity(
+            opacity: _showAppBar ? 1.0 : 0.0,
+            duration: Durations.short2,
+            child: Column(
+              children: [
+                AppBar(
+                  backgroundColor: context.scaffoldBackgroundColor,
+                  title: Text("slideshow".t(context: context)),
+                  actions: [
+                    IconButton(
+                      onPressed: _paused ? _play : _pause,
+                      icon: Icon(_paused ? Icons.play_arrow : Icons.pause),
+                    ),
+                    IconButton(
+                      onPressed: () {
+                        _pause();
+                        context.pushRoute(SettingsSubRoute(section: SettingSection.assetViewer));
+                      },
+                      icon: const Icon(Icons.settings),
+                    ),
+                  ],
+                ),
+                _getProgressBar(context),
+              ],
+            ),
+          ),
+        ),
+      ),
+      extendBody: true,
+      extendBodyBehindAppBar: true,
+      backgroundColor: Colors.black,
+      body: PhotoViewGestureDetectorScope(
+        axis: Axis.horizontal,
+        child: PageView.builder(
+          controller: _pageController,
+          physics: const FastClampingScrollPhysics(),
+          itemCount: widget.timeline.totalAssets,
+          onPageChanged: _pageChanged,
+          itemBuilder: (context, index) => Stack(
+            children: [
+              if (_config.look == SlideshowLook.blurredBackground) _getBlur(context, index),
+              _getPhotoView(context, index),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -50,10 +50,13 @@ class BaseActionButton extends ConsumerWidget {
       final iconColor = this.iconColor;
 
       return MenuItemButton(
-        style: MenuItemButton.styleFrom(alignment: Alignment.centerLeft, padding: const EdgeInsets.all(16)),
-        leadingIcon: Icon(iconData, color: iconColor),
+        style: MenuItemButton.styleFrom(
+          alignment: Alignment.centerLeft,
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+        ),
+        leadingIcon: Icon(iconData, color: iconColor, size: 20),
         onPressed: onPressed,
-        child: Text(label, style: TextStyle(fontSize: 16, color: iconColor)),
+        child: Text(label, style: TextStyle(fontSize: 15, color: iconColor)),
       );
     }
 

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

@@ -0,0 +1,34 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
+
+class SlideshowActionButton extends ConsumerWidget {
+  final bool iconOnly;
+  final bool menuItem;
+
+  const SlideshowActionButton({super.key, this.iconOnly = false, this.menuItem = false});
+
+  void _onTap(BuildContext context, WidgetRef ref) {
+    if (!context.mounted) {
+      return;
+    }
+
+    context.pushRoute(DriftSlideshowRoute(timeline: ref.read(timelineServiceProvider)));
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return BaseActionButton(
+      iconData: Icons.slideshow,
+      label: "slideshow".t(context: context),
+      iconOnly: iconOnly,
+      menuItem: menuItem,
+      onPressed: () => _onTap(context, ref),
+      maxWidth: 100,
+    );
+  }
+}

mobile/lib/presentation/widgets/album/pending_uploads_banner.widget.dart

@@ -0,0 +1,252 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart';
+import 'package:immich_mobile/providers/album/pending_album_uploads.provider.dart';
+
+/// Pinned banner sliver that surfaces in-flight album uploads directly under
+/// the album app bar. Renders nothing while the queue is empty. Tapping the
+/// banner opens a bottom sheet with per-asset progress.
+class PendingUploadsBanner extends ConsumerWidget {
+  static const double _height = 52;
+
+  final String albumId;
+
+  const PendingUploadsBanner({super.key, required this.albumId});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final pending = ref.watch(pendingAlbumUploadsProvider(albumId));
+    if (pending.isEmpty) {
+      return const SliverToBoxAdapter(child: SizedBox.shrink());
+    }
+
+    final hasFailures = pending.any((p) => p.failed);
+    final clamped = pending.map((p) => p.progress.clamp(0.0, 1.0)).toList(growable: false);
+    final overallProgress = clamped.isEmpty ? 0.0 : clamped.reduce((a, b) => a + b) / clamped.length;
+    final isIndeterminate = overallProgress <= 0.0;
+
+    return SliverPersistentHeader(
+      pinned: true,
+      delegate: _PendingUploadsBannerDelegate(
+        height: _height,
+        child: _PendingUploadsBannerContent(
+          albumId: albumId,
+          previewAsset: pending.first.asset,
+          count: pending.length,
+          overallProgress: overallProgress,
+          isIndeterminate: isIndeterminate,
+          hasFailures: hasFailures,
+        ),
+      ),
+    );
+  }
+
+  static void _openSheet(BuildContext context, String albumId) {
+    showModalBottomSheet(
+      context: context,
+      showDragHandle: true,
+      builder: (_) => _PendingUploadsSheet(albumId: albumId),
+    );
+  }
+}
+
+class _PendingUploadsBannerDelegate extends SliverPersistentHeaderDelegate {
+  final double height;
+  final Widget child;
+
+  const _PendingUploadsBannerDelegate({required this.height, required this.child});
+
+  @override
+  double get minExtent => height;
+
+  @override
+  double get maxExtent => height;
+
+  @override
+  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) => child;
+
+  @override
+  bool shouldRebuild(covariant _PendingUploadsBannerDelegate oldDelegate) =>
+      height != oldDelegate.height || child != oldDelegate.child;
+}
+
+class _PendingUploadsBannerContent extends StatelessWidget {
+  final String albumId;
+  final BaseAsset previewAsset;
+  final int count;
+  final double overallProgress;
+  final bool isIndeterminate;
+  final bool hasFailures;
+
+  const _PendingUploadsBannerContent({
+    required this.albumId,
+    required this.previewAsset,
+    required this.count,
+    required this.overallProgress,
+    required this.isIndeterminate,
+    required this.hasFailures,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final percentLabel = isIndeterminate ? '' : ' · ${(overallProgress * 100).toInt()}%';
+    return Material(
+      color: hasFailures ? context.colorScheme.errorContainer : context.colorScheme.surfaceContainerHigh,
+      child: InkWell(
+        onTap: () => PendingUploadsBanner._openSheet(context, albumId),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 16),
+                child: Row(
+                  children: [
+                    ClipRRect(
+                      borderRadius: const BorderRadius.all(Radius.circular(4)),
+                      child: SizedBox(width: 32, height: 32, child: Thumbnail.fromAsset(asset: previewAsset)),
+                    ),
+                    const SizedBox(width: 12),
+                    Expanded(
+                      child: Text(
+                        '${'uploading'.t(context: context)} $count$percentLabel',
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: context.textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w500),
+                      ),
+                    ),
+                    if (hasFailures)
+                      Padding(
+                        padding: const EdgeInsets.only(left: 8),
+                        child: Icon(Icons.error_outline, color: context.colorScheme.error, size: 20),
+                      ),
+                    Icon(Icons.chevron_right_rounded, color: context.colorScheme.onSurfaceVariant),
+                  ],
+                ),
+              ),
+            ),
+            SizedBox(
+              height: 3,
+              child: LinearProgressIndicator(
+                value: isIndeterminate ? null : overallProgress,
+                backgroundColor: context.colorScheme.surfaceContainerHighest,
+                valueColor: AlwaysStoppedAnimation<Color>(
+                  hasFailures ? context.colorScheme.error : context.colorScheme.primary,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _PendingUploadsSheet extends ConsumerWidget {
+  final String albumId;
+
+  const _PendingUploadsSheet({required this.albumId});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final pending = ref.watch(pendingAlbumUploadsProvider(albumId));
+
+    // Auto-dismiss when the queue empties.
+    if (pending.isEmpty) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (Navigator.of(context).canPop()) {
+          Navigator.of(context).pop();
+        }
+      });
+      return const SizedBox.shrink();
+    }
+
+    final failedCount = pending.where((p) => p.failed).length;
+
+    return SafeArea(
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Padding(
+              padding: const EdgeInsets.only(bottom: 12),
+              child: Row(
+                children: [
+                  Expanded(
+                    child: Text(
+                      '${'uploading'.t(context: context)} (${pending.length})',
+                      style: context.textTheme.titleMedium,
+                    ),
+                  ),
+                  if (failedCount > 0)
+                    TextButton.icon(
+                      onPressed: () => ref.read(pendingAlbumUploadsProvider(albumId).notifier).clearFailed(),
+                      icon: const Icon(Icons.clear_rounded, size: 18),
+                      label: Text('clear_failed_count'.t(context: context, args: {'count': failedCount})),
+                      style: TextButton.styleFrom(foregroundColor: context.colorScheme.error),
+                    ),
+                ],
+              ),
+            ),
+            SizedBox(
+              height: 96,
+              child: ListView.separated(
+                scrollDirection: Axis.horizontal,
+                itemCount: pending.length,
+                separatorBuilder: (_, __) => const SizedBox(width: 8),
+                itemBuilder: (_, index) => _PendingUploadTile(entry: pending[index]),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _PendingUploadTile extends StatelessWidget {
+  final PendingAlbumUpload entry;
+
+  const _PendingUploadTile({required this.entry});
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipRRect(
+      borderRadius: const BorderRadius.all(Radius.circular(8)),
+      child: SizedBox(
+        width: 96,
+        height: 96,
+        child: Stack(
+          fit: StackFit.expand,
+          children: [
+            Thumbnail.fromAsset(asset: entry.asset),
+            Positioned.fill(
+              child: ColoredBox(
+                color: entry.failed ? Colors.red.withValues(alpha: 0.6) : Colors.black54,
+                child: Center(
+                  child: entry.failed
+                      ? const Icon(Icons.error_outline, color: Colors.white, size: 28)
+                      : SizedBox(
+                          width: 32,
+                          height: 32,
+                          child: CircularProgressIndicator(
+                            value: entry.progress > 0 ? entry.progress : null,
+                            strokeWidth: 2.5,
+                            backgroundColor: Colors.white24,
+                            valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
+                          ),
+                        ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mobile/lib/presentation/widgets/images/thumbnail_tile.widget.dart

@@ -120,6 +120,9 @@ class _ThumbnailTileState extends ConsumerState<ThumbnailTile> {
                     },
                     flightShuttleBuilder: (context, animation, direction, from, to) {
                       void animationStatusListener(AnimationStatus status) {
+                        if (!mounted) {
+                          return;
+                        }
                         final heroInFlight = status == AnimationStatus.forward || status == AnimationStatus.reverse;
                         if (_hideIndicators != heroInFlight) {
                           setState(() => _hideIndicators = heroInFlight);

mobile/lib/presentation/widgets/timeline/fixed/segment.model.dart

@@ -242,7 +242,11 @@ class _AssetTileWidget extends ConsumerWidget {
       return false;
     }
 
-    return lockSelectionAssets.contains(asset);
+    // Iterate with `==` instead of `Set.contains` because `RemoteAsset.hashCode`
+    // includes `localId` while `==` does not — so the same server asset can
+    // hash to a different bucket when its `localId` differs (e.g., album-fetched
+    // copy has localId=null, merged-timeline copy has it populated).
+    return lockSelectionAssets.any((a) => a == asset);
   }
 
   @override

mobile/lib/providers/album/pending_album_uploads.provider.dart

@@ -0,0 +1,81 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
+
+class PendingAlbumUpload {
+  final LocalAsset asset;
+  final double progress;
+  final bool failed;
+
+  const PendingAlbumUpload({required this.asset, this.progress = 0.0, this.failed = false});
+
+  PendingAlbumUpload copyWith({double? progress, bool? failed}) =>
+      PendingAlbumUpload(asset: asset, progress: progress ?? this.progress, failed: failed ?? this.failed);
+}
+
+class AlbumPendingUploadsNotifier extends AutoDisposeFamilyNotifier<List<PendingAlbumUpload>, String> {
+  KeepAliveLink? _keepAliveLink;
+
+  @override
+  List<PendingAlbumUpload> build(String albumId) {
+    ref.onDispose(() {
+      _keepAliveLink?.close();
+      _keepAliveLink = null;
+    });
+
+    return const [];
+  }
+
+  void enqueue(Iterable<LocalAsset> assets) {
+    if (assets.isEmpty) {
+      return;
+    }
+
+    final existingIds = state.map((e) => e.asset.id).toSet();
+    final additions = assets.where((a) => !existingIds.contains(a.id)).map((a) => PendingAlbumUpload(asset: a));
+    state = [...state, ...additions];
+    _syncKeepAlive();
+  }
+
+  void updateProgress(String localAssetId, double progress) {
+    state = [
+      for (final entry in state)
+        if (entry.asset.id == localAssetId) entry.copyWith(progress: progress, failed: false) else entry,
+    ];
+    _syncKeepAlive();
+  }
+
+  void markFailed(String localAssetId) {
+    state = [
+      for (final entry in state)
+        if (entry.asset.id == localAssetId) entry.copyWith(failed: true) else entry,
+    ];
+    _syncKeepAlive();
+  }
+
+  void markAllFailed() {
+    state = [for (final entry in state) entry.copyWith(failed: true)];
+    _syncKeepAlive();
+  }
+
+  void remove(String localAssetId) {
+    state = state.where((e) => e.asset.id != localAssetId).toList();
+    _syncKeepAlive();
+  }
+
+  void clearFailed() {
+    state = state.where((e) => !e.failed).toList();
+    _syncKeepAlive();
+  }
+
+  void _syncKeepAlive() {
+    if (state.isEmpty) {
+      _keepAliveLink?.close();
+      _keepAliveLink = null;
+    } else {
+      _keepAliveLink ??= ref.keepAlive();
+    }
+  }
+}
+
+final pendingAlbumUploadsProvider = NotifierProvider.autoDispose
+    .family<AlbumPendingUploadsNotifier, List<PendingAlbumUpload>, String>(AlbumPendingUploadsNotifier.new);

mobile/lib/providers/infrastructure/album.provider.dart

@@ -9,6 +9,7 @@ import 'package:immich_mobile/infrastructure/repositories/remote_album.repositor
 import 'package:immich_mobile/providers/infrastructure/db.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/remote_album.provider.dart';
 import 'package:immich_mobile/repositories/drift_album_api_repository.dart';
+import 'package:immich_mobile/services/foreground_upload.service.dart';
 
 final localAlbumRepository = Provider<DriftLocalAlbumRepository>(
   (ref) => DriftLocalAlbumRepository(ref.watch(driftProvider)),
@@ -33,7 +34,11 @@ final remoteAlbumRepository = Provider<DriftRemoteAlbumRepository>(
 );
 
 final remoteAlbumServiceProvider = Provider<RemoteAlbumService>(
-  (ref) => RemoteAlbumService(ref.watch(remoteAlbumRepository), ref.watch(driftAlbumApiRepositoryProvider)),
+  (ref) => RemoteAlbumService(
+    ref.watch(remoteAlbumRepository),
+    ref.watch(driftAlbumApiRepositoryProvider),
+    ref.watch(foregroundUploadServiceProvider),
+  ),
   dependencies: [remoteAlbumRepository],
 );
 

mobile/lib/providers/infrastructure/remote_album.provider.dart

@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:collection/collection.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/album/album.model.dart';
@@ -6,8 +8,10 @@ import 'package:immich_mobile/domain/models/user.model.dart';
 import 'package:immich_mobile/domain/services/remote_album.service.dart';
 import 'package:immich_mobile/models/albums/album_search.model.dart';
 import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
+import 'package:immich_mobile/providers/album/pending_album_uploads.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/album.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/services/foreground_upload.service.dart';
 import 'package:logging/logging.dart';
 
 class RemoteAlbumState {
@@ -105,6 +109,46 @@ class RemoteAlbumNotifier extends Notifier<RemoteAlbumState> {
     }
   }
 
+  /// Creates an album from a heterogeneous asset selection. Already-remote
+  /// assets seed the album immediately; local-only assets are uploaded in the
+  /// background and linked one-by-one as each upload completes.
+  Future<RemoteAlbum?> createAlbumWithAssets({
+    required String title,
+    String? description,
+    Iterable<BaseAsset> assets = const [],
+  }) async {
+    try {
+      final currentUser = ref.read(currentUserProvider);
+      if (currentUser == null) {
+        throw Exception('User not logged in');
+      }
+
+      final candidates = RemoteAlbumService.categorizeCandidates(assets);
+      final album = await _remoteAlbumService.createAlbum(
+        title: title,
+        owner: currentUser,
+        description: description,
+        assetIds: candidates.remoteAssetIds,
+      );
+
+      state = state.copyWith(albums: [...state.albums, album]);
+
+      if (candidates.localAssetsToUpload.isNotEmpty) {
+        unawaited(
+          addAssetsToAlbum(
+            album.id,
+            candidates.localAssetsToUpload,
+          ).then<void>((_) {}).catchError((Object _, StackTrace _) {}),
+        );
+      }
+
+      return album;
+    } catch (error, stack) {
+      _logger.severe('Failed to create album with assets', error, stack);
+      rethrow;
+    }
+  }
+
   Future<RemoteAlbum?> updateAlbum(
     String albumId, {
     String? name,
@@ -155,8 +199,65 @@ class RemoteAlbumNotifier extends Notifier<RemoteAlbumState> {
     return _remoteAlbumService.getAssets(albumId);
   }
 
-  Future<int> addAssets(String albumId, List<String> assetIds) {
-    return _remoteAlbumService.addAssets(albumId: albumId, assetIds: assetIds);
+  Future<int> addAssets(String albumId, List<String> assetIds) async {
+    final added = await _remoteAlbumService.addAssets(albumId: albumId, assetIds: assetIds);
+    if (added > 0) {
+      await _refreshAlbumInState(albumId);
+    }
+    return added;
+  }
+
+  /// Adds a heterogeneous asset selection to an album. Already-remote assets
+  /// are linked immediately; local-only assets are queued in
+  /// [pendingAlbumUploadsProvider] (so the album page can show them with
+  /// progress indicators), uploaded, and linked one-by-one as each finishes.
+  Future<int> addAssetsToAlbum(String albumId, Iterable<BaseAsset> assets) async {
+    final currentUser = ref.read(currentUserProvider);
+    if (currentUser == null) {
+      throw Exception('User not logged in');
+    }
+
+    final candidates = RemoteAlbumService.categorizeCandidates(assets);
+    final pendingNotifier = ref.read(pendingAlbumUploadsProvider(albumId).notifier);
+    pendingNotifier.enqueue(candidates.localAssetsToUpload);
+
+    try {
+      final added = await _remoteAlbumService.addAssetsToAlbum(
+        albumId: albumId,
+        uploader: currentUser,
+        candidates: candidates,
+        uploadCallbacks: UploadCallbacks(
+          onProgress: (localAssetId, _, bytes, totalBytes) {
+            final progress = totalBytes > 0 ? bytes / totalBytes : 0.0;
+            pendingNotifier.updateProgress(localAssetId, progress);
+          },
+          onSuccess: (localAssetId, _) => pendingNotifier.remove(localAssetId),
+          onError: (localAssetId, _) => pendingNotifier.markFailed(localAssetId),
+        ),
+      );
+      if (added > 0) {
+        await _refreshAlbumInState(albumId);
+      }
+      return added;
+    } catch (error, stack) {
+      if (candidates.localAssetsToUpload.isNotEmpty) {
+        pendingNotifier.markAllFailed();
+      }
+      _logger.severe('Failed to add assets to album $albumId', error, stack);
+      rethrow;
+    }
+  }
+
+  /// Re-reads a single album from the local DB and replaces it in [state] so
+  /// that views bound to the album list (counts, thumbnails) reflect the
+  /// latest junction-table changes without a full `refresh()`.
+  Future<void> _refreshAlbumInState(String albumId) async {
+    final updated = await _remoteAlbumService.get(albumId);
+    if (updated == null) {
+      return;
+    }
+
+    state = state.copyWith(albums: state.albums.map((album) => album.id == albumId ? updated : album).toList());
   }
 
   Future<void> addUsers(String albumId, List<String> userIds) {

mobile/lib/routing/router.dart

@@ -60,6 +60,7 @@ import 'package:immich_mobile/presentation/pages/drift_place_detail.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_recently_taken.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_recently_added.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_remote_album.page.dart';
+import 'package:immich_mobile/presentation/pages/drift_slideshow.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_trash.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_user_selection.page.dart';
 import 'package:immich_mobile/presentation/pages/drift_video.page.dart';
@@ -189,6 +190,7 @@ class AppRouter extends RootStackRouter {
     AutoRoute(page: AssetTroubleshootRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: DownloadInfoRoute.page, guards: [_authGuard, _duplicateGuard]),
     AutoRoute(page: CleanupPreviewRoute.page, guards: [_authGuard, _duplicateGuard]),
+    AutoRoute(page: DriftSlideshowRoute.page, guards: [_authGuard, _duplicateGuard]),
     // required to handle all deeplinks in deep_link.service.dart
     // auto_route_library#1722
     RedirectRoute(path: '*', redirectTo: '/'),

mobile/lib/routing/router.gr.dart

@@ -1095,6 +1095,53 @@ class DriftSearchRoute extends PageRouteInfo<void> {
   );
 }
 
+/// generated route for
+/// [DriftSlideshowPage]
+class DriftSlideshowRoute extends PageRouteInfo<DriftSlideshowRouteArgs> {
+  DriftSlideshowRoute({
+    Key? key,
+    required TimelineService timeline,
+    List<PageRouteInfo>? children,
+  }) : super(
+         DriftSlideshowRoute.name,
+         args: DriftSlideshowRouteArgs(key: key, timeline: timeline),
+         initialChildren: children,
+       );
+
+  static const String name = 'DriftSlideshowRoute';
+
+  static PageInfo page = PageInfo(
+    name,
+    builder: (data) {
+      final args = data.argsAs<DriftSlideshowRouteArgs>();
+      return DriftSlideshowPage(key: args.key, timeline: args.timeline);
+    },
+  );
+}
+
+class DriftSlideshowRouteArgs {
+  const DriftSlideshowRouteArgs({this.key, required this.timeline});
+
+  final Key? key;
+
+  final TimelineService timeline;
+
+  @override
+  String toString() {
+    return 'DriftSlideshowRouteArgs{key: $key, timeline: $timeline}';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) return true;
+    if (other is! DriftSlideshowRouteArgs) return false;
+    return key == other.key && timeline == other.timeline;
+  }
+
+  @override
+  int get hashCode => key.hashCode ^ timeline.hashCode;
+}
+
 /// generated route for
 /// [DriftTrashPage]
 class DriftTrashRoute extends PageRouteInfo<void> {

mobile/lib/utils/action_button.utils.dart

@@ -27,6 +27,7 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/set_profile_pi
 import 'package:immich_mobile/presentation/widgets/action_buttons/share_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/share_link_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/similar_photos_action_button.widget.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/slideshow_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/trash_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unarchive_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unstack_action_button.widget.dart';
@@ -73,6 +74,7 @@ enum ActionButtonType {
   similarPhotos,
   setProfilePicture,
   viewInTimeline,
+  slideshow,
   download,
   upload,
   openInBrowser,
@@ -179,6 +181,7 @@ enum ActionButtonType {
             context.timelineOrigin != TimelineOrigin.localAlbum &&
             context.isOwner,
       ActionButtonType.cast => context.isCasting || context.asset.hasRemote,
+      ActionButtonType.slideshow => true,
     };
   }
 
@@ -200,6 +203,7 @@ enum ActionButtonType {
         iconOnly: iconOnly,
         menuItem: menuItem,
       ),
+      ActionButtonType.slideshow => SlideshowActionButton(iconOnly: iconOnly, menuItem: menuItem),
       ActionButtonType.archive => ArchiveActionButton(source: context.source, iconOnly: iconOnly, menuItem: menuItem),
       ActionButtonType.unarchive => UnArchiveActionButton(
         source: context.source,

mobile/lib/widgets/common/remote_album_sliver_app_bar.dart

@@ -18,6 +18,7 @@ import 'package:immich_mobile/providers/infrastructure/current_album.provider.da
 import 'package:immich_mobile/providers/infrastructure/remote_album.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
+import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/widgets/album/remote_album_shared_user_icons.dart';
 
 class RemoteAlbumSliverAppBar extends ConsumerStatefulWidget {
@@ -89,6 +90,10 @@ class _MesmerizingSliverAppBarState extends ConsumerState<RemoteAlbumSliverAppBa
               onPressed: () => context.maybePop(),
             ),
       actions: [
+        IconButton(
+          onPressed: () => context.pushRoute(DriftSlideshowRoute(timeline: ref.read(timelineServiceProvider))),
+          icon: Icon(Icons.slideshow_outlined, color: actionIconColor, shadows: actionIconShadows),
+        ),
         if (currentAlbum.isActivityEnabled && currentAlbum.isShared)
           IconButton(
             icon: Icon(Icons.chat_outlined, color: actionIconColor, shadows: actionIconShadows),

mobile/lib/widgets/settings/asset_viewer_settings/asset_viewer_settings.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:immich_mobile/widgets/settings/asset_viewer_settings/image_viewer_quality_setting.dart';
 import 'package:immich_mobile/widgets/settings/asset_viewer_settings/image_viewer_tap_to_navigate_setting.dart';
 import 'package:immich_mobile/widgets/settings/asset_viewer_settings/video_viewer_settings.dart';
+import 'package:immich_mobile/widgets/settings/asset_viewer_settings/slideshow_settings.dart';
 import 'package:immich_mobile/widgets/settings/settings_sub_page_scaffold.dart';
 
 class AssetViewerSettings extends StatelessWidget {
@@ -13,6 +14,7 @@ class AssetViewerSettings extends StatelessWidget {
       const ImageViewerQualitySetting(),
       const ImageViewerTapToNavigateSetting(),
       const VideoViewerSettings(),
+      const SlideshowSettings(),
     ];
 
     return SettingsSubPageScaffold(settings: assetViewerSetting, showDivider: true);

mobile/lib/widgets/settings/asset_viewer_settings/slideshow_settings.dart

@@ -0,0 +1,123 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/providers/infrastructure/metadata.provider.dart';
+import 'package:immich_mobile/widgets/settings/setting_group_title.dart';
+import 'package:immich_mobile/widgets/settings/settings_radio_list_tile.dart';
+import 'package:immich_mobile/widgets/settings/settings_slider_list_tile.dart';
+import 'package:immich_mobile/widgets/settings/settings_sub_title.dart';
+import 'package:immich_mobile/widgets/settings/settings_switch_list_tile.dart';
+
+class SlideshowSettings extends HookConsumerWidget {
+  const SlideshowSettings({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final slideshow = ref.read(appConfigProvider).slideshow;
+    final useTransition = useState(slideshow.transition);
+    final useRepeat = useState(slideshow.repeat);
+    final useDuration = useState(slideshow.duration);
+    final useLook = useState(slideshow.look);
+    final useDirection = useState(slideshow.direction);
+
+    useValueChanged<bool, void>(useTransition.value, (_, __) {
+      ref.read(metadataProvider).write(.slideshowTransition, useTransition.value);
+    });
+    useValueChanged<bool, void>(useRepeat.value, (_, __) {
+      ref.read(metadataProvider).write(.slideshowRepeat, useRepeat.value);
+    });
+    useValueChanged<int, void>(useDuration.value, (_, __) {
+      ref.read(metadataProvider).write(.slideshowDuration, useDuration.value);
+    });
+    useValueChanged<SlideshowLook, void>(useLook.value, (_, __) {
+      ref.read(metadataProvider).write(.slideshowLook, useLook.value);
+    });
+    useValueChanged<SlideshowDirection, void>(useDirection.value, (_, __) {
+      ref.read(metadataProvider).write(.slideshowDirection, useDirection.value);
+    });
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SettingGroupTitle(
+          title: 'slideshow'.t(context: context),
+          icon: Icons.slideshow_outlined,
+        ),
+        SettingsSwitchListTile(
+          valueNotifier: useTransition,
+          title: "show_slideshow_transition".t(context: context),
+          enabled: useDirection.value != SlideshowDirection.shuffle,
+        ),
+        SettingsSwitchListTile(
+          valueNotifier: useRepeat,
+          title: "slideshow_repeat".t(context: context),
+          subtitle: "slideshow_repeat_description".t(context: context),
+        ),
+        SettingsSliderListTile(
+          valueNotifier: useDuration,
+          text: "duration".t(context: context),
+          minValue: 5,
+          noDivisons: 5,
+          maxValue: 30,
+        ),
+        Padding(
+          padding: const EdgeInsets.only(top: 20),
+          child: SettingsSubTitle(title: 'look'.t(context: context)),
+        ),
+        SettingsRadioListTile(
+          groups: [
+            SettingsRadioGroup(
+              title: 'contain'.t(context: context),
+              value: SlideshowLook.contain,
+            ),
+            SettingsRadioGroup(
+              title: 'cover'.t(context: context),
+              value: SlideshowLook.cover,
+            ),
+            SettingsRadioGroup(
+              title: 'blurred_background'.t(context: context),
+              value: SlideshowLook.blurredBackground,
+            ),
+          ],
+          groupBy: useLook.value,
+          onRadioChanged: (value) {
+            if (value != null) {
+              useLook.value = value;
+            }
+          },
+        ),
+        Padding(
+          padding: const EdgeInsets.only(top: 20),
+          child: SettingsSubTitle(title: 'direction'.t(context: context)),
+        ),
+        Padding(
+          padding: const EdgeInsets.only(bottom: 32),
+          child: SettingsRadioListTile(
+            groups: [
+              SettingsRadioGroup(
+                title: 'forward'.t(context: context),
+                value: SlideshowDirection.forward,
+              ),
+              SettingsRadioGroup(
+                title: 'backward'.t(context: context),
+                value: SlideshowDirection.backward,
+              ),
+              SettingsRadioGroup(
+                title: 'shuffle'.t(context: context),
+                value: SlideshowDirection.shuffle,
+              ),
+            ],
+            groupBy: useDirection.value,
+            onRadioChanged: (value) {
+              if (value != null) {
+                useDirection.value = value;
+              }
+            },
+          ),
+        ),
+      ],
+    );
+  }
+}

mobile/test/medium/repositories/remote_album_repository_test.dart

@@ -17,6 +17,33 @@ void main() {
     await ctx.dispose();
   });
 
+  group('addAssets', () {
+    test('sets the first added asset as thumbnail when the album has no thumbnail', () async {
+      final user = await ctx.newUser();
+      final album = await ctx.newRemoteAlbum(ownerId: user.id);
+      final asset = await ctx.newRemoteAsset(ownerId: user.id);
+
+      await sut.addAssets(album.id, [asset.id]);
+
+      final updated = await sut.get(album.id);
+      expect(updated?.thumbnailAssetId, asset.id);
+      expect(updated?.assetCount, 1);
+    });
+
+    test('preserves an existing thumbnail when adding assets', () async {
+      final user = await ctx.newUser();
+      final thumbnail = await ctx.newRemoteAsset(ownerId: user.id);
+      final album = await ctx.newRemoteAlbum(ownerId: user.id, thumbnailAssetId: thumbnail.id);
+      final asset = await ctx.newRemoteAsset(ownerId: user.id);
+
+      await sut.addAssets(album.id, [asset.id]);
+
+      final updated = await sut.get(album.id);
+      expect(updated?.thumbnailAssetId, thumbnail.id);
+      expect(updated?.assetCount, 1);
+    });
+  });
+
   group('getSortedAlbumIds', () {
     late String userId;
 

web/src/lib/components/AdaptiveImage.svelte

@@ -1,3 +1,54 @@
+<script module lang="ts">
+  import { TUNABLES } from '$lib/utils/tunables';
+
+  // Chrome renders HDR images with normally invisible seam lines in a regular
+  // grid pattern. When the user pinch/scroll zooms, these seams become visible
+  // and grow more prominent at higher zoom levels.
+  //
+  // Adding `will-change: transform` prevents the seams by converting the
+  // element into a GPU texture that Chrome rasterizes once and reuses. But
+  // this texture is frozen at a fixed resolution and never re-renders from
+  // the source image, so zooming in magnifies the frozen texture rather than
+  // the source, which can appear blurry.
+  //
+  // To keep the texture sharp, we size this div closer to the image's native
+  // dimensions and apply a CSS counter-scale. Chrome renders these textures
+  // as a grid of small tiles backed by a shared GPU memory budget — if the
+  // texture is too large, tiles go missing and show up as transparent gaps.
+  // We cap the texture size based on the device's GPU capability.
+  //
+  // This workaround is only needed in Chromium-based browsers. Firefox and
+  // Safari use different rasterization pipelines and don't exhibit this bug.
+  // See https://issues.chromium.org/issues/40084005
+  const isChromium = 'chrome' in globalThis;
+
+  function getMaxRasterPixels() {
+    const override = TUNABLES.IMAGE_RASTER.MAX_PIXELS;
+    if (override > 0) {
+      return override;
+    }
+    if (override < 0 || !isChromium) {
+      return 0;
+    }
+    try {
+      const canvas = document.createElement('canvas');
+      const gl = canvas.getContext('webgl');
+      const maxTextureSize = gl?.getParameter(gl.MAX_TEXTURE_SIZE) ?? 0;
+      if (maxTextureSize >= 16_384) {
+        return 16_000_000;
+      }
+      if (maxTextureSize >= 8192) {
+        return 10_000_000;
+      }
+      return 4_000_000;
+    } catch {
+      return 4_000_000;
+    }
+  }
+
+  const maxRasterPixels = getMaxRasterPixels();
+</script>
+
 <script lang="ts">
   import AlphaBackground from '$lib/components/AlphaBackground.svelte';
   import BrokenAsset from '$lib/components/assets/BrokenAsset.svelte';
@@ -98,14 +149,27 @@
     return { width: 1, height: 1 };
   });
 
-  const { width, height, insetInlineStart, top } = $derived.by(() => {
+  const { insetInlineStart, top, rasterWidth, rasterHeight, rasterScale } = $derived.by(() => {
     const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
     const { width, height } = scaleFn(imageDimensions, container);
+    if (maxRasterPixels === 0) {
+      return {
+        insetInlineStart: (container.width - width) / 2 + 'px',
+        top: (container.height - height) / 2 + 'px',
+        rasterWidth: width + 'px',
+        rasterHeight: height + 'px',
+        rasterScale: 1,
+      };
+    }
+    const nativeRatio = imageDimensions.width / width;
+    const budgetRatio = Math.sqrt(maxRasterPixels / Math.max(width * height, 1));
+    const rasterRatio = Math.max(1, Math.min(nativeRatio, budgetRatio));
     return {
-      width: width + 'px',
-      height: height + 'px',
       insetInlineStart: (container.width - width) / 2 + 'px',
       top: (container.height - height) / 2 + 'px',
+      rasterWidth: width * rasterRatio + 'px',
+      rasterHeight: height * rasterRatio + 'px',
+      rasterScale: 1 / rasterRatio,
     };
   });
 
@@ -152,11 +216,14 @@
   {@render backdrop?.()}
 
   <div
-    class="pointer-events-none absolute inset-0"
+    class="pointer-events-none absolute"
     style:inset-inline-start={insetInlineStart}
     style:top
-    style:width
-    style:height
+    style:width={rasterWidth}
+    style:height={rasterHeight}
+    style:transform="scale({rasterScale})"
+    style:transform-origin="0 0"
+    style:will-change={maxRasterPixels > 0 ? 'transform' : undefined}
   >
     {#if show.alphaBackground}
       <AlphaBackground />
@@ -174,8 +241,8 @@
     {#if show.thumbnail}
       <ImageLayer
         {adaptiveImageLoader}
-        {width}
-        {height}
+        width={rasterWidth}
+        height={rasterHeight}
         quality="thumbnail"
         src={status.urls.thumbnail}
         alt=""
@@ -192,8 +259,8 @@
       <ImageLayer
         {adaptiveImageLoader}
         {alt}
-        {width}
-        {height}
+        width={rasterWidth}
+        height={rasterHeight}
         {overlays}
         quality="preview"
         src={status.urls.preview}
@@ -205,8 +272,8 @@
       <ImageLayer
         {adaptiveImageLoader}
         {alt}
-        {width}
-        {height}
+        width={rasterWidth}
+        height={rasterHeight}
         {overlays}
         quality="original"
         src={status.urls.original}

web/src/lib/utils/tunables.ts

@@ -31,4 +31,7 @@ export const TUNABLES = {
   IMAGE_THUMBNAIL: {
     THUMBHASH_FADE_DURATION: getNumber(storage.getItem('THUMBHASH_FADE_DURATION'), 100),
   },
+  IMAGE_RASTER: {
+    MAX_PIXELS: getNumber(storage.getItem('IMAGE_RASTER.MAX_PIXELS'), 0),
+  },
 };