chore: merge main into feat/hero_view_transitions

Change-Id: I4b00ee8b7c4201c926bf53b12900a4ea6a6a6964

docs/docs/developer/_view-transitions.md

@@ -0,0 +1,218 @@
+#### View Transitions
+
+This page describes the architecture behind hero view transitions between the timeline grid and the asset viewer.
+
+##### View Transitions 101
+
+The [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) lets the browser animate between two DOM states automatically. The basic flow:
+
+1. **Tag elements with names**: You assign `view-transition-name: hero` (via CSS or inline style) to a DOM element on the current page, such as a thumbnail.
+2. **Capture old snapshot**: The browser takes a screenshot of every named element (position, size, appearance).
+3. **Update the DOM**: You make your changes: navigate to a new page, swap components, update state. The browser holds the old screenshot on screen while this happens, so the user sees no flash.
+4. **Tag the new element**: A completely different element on the new page can be given the same `view-transition-name: hero` (which is the case here: the image element in `AssetViewer`).
+5. **Capture new snapshot**: The browser screenshots the new named elements.
+6. **Animate**: The browser automatically performs a [FLIP-style animation](https://aerotwist.com/blog/flip-your-animations/) (First, Last, Invert, Play). It calculates the position/size delta between old and new snapshots and animates between them. The thumbnail smoothly morphs into the viewer image.
+
+The animation is customizable via CSS pseudo-elements (`::view-transition-old(hero)`, `::view-transition-new(hero)`). Any element without a `view-transition-name` gets cross-faded as part of the page-level `::view-transition-group(root)` transition.
+
+The key challenge is **timing**: the browser needs both snapshots tagged at exactly the right moments, but the thumbnail and viewer live in different components on different routes. We solve this with a lightweight event protocol between the participating components.
+
+##### Why events?
+
+The View Transition API itself is simple, but in our case the elements being animated (`Timeline` thumbnails and `AssetViewer` images) are owned by components spread across different routes and subtrees. Props and bindings can't reach across these boundaries, but a shared event bus can. Events let any component signal "I'm ready" and any other component await that signal, regardless of where they live in the tree.
+
+##### BaseEventManager + `untilNext`
+
+`BaseEventManager` is a typed event bus (`on`, `emit`, `once`, `hasListeners`). The key addition is `untilNext(event)`: it returns a promise that resolves the next time that event fires. This turns event-driven coordination into sequential async code:
+
+```typescript
+// Instead of callback nesting:
+manager.on({
+  SomeEvent: (...args) => {
+    doNextThing(args);
+  },
+});
+
+// You can write:
+const args = await manager.untilNext('SomeEvent');
+doNextThing(args);
+```
+
+It also supports a `signal` option. If the signal aborts before the event fires, the promise **resolves** (not rejects) with `undefined`. This allows graceful fallback: "wait for this event, but if nobody responds in time, move on."
+
+##### ViewTransitionManager
+
+Wraps the View Transition API into a request-based model with named lifecycle callbacks:
+
+```typescript
+viewTransitionManager.startTransition({
+  // CSS transition type filters
+  types: ['viewer'],
+  // Set up view-transition-names BEFORE old snapshot
+  prepareOldSnapshot: () => {},
+  // Do DOM changes (navigation, state updates, set up names for new snapshot)
+  performUpdate: async (signal) => {},
+  // Last-chance adjustments before new snapshot
+  prepareNewSnapshot: () => {},
+  // Cleanup after animation completes
+  onFinished: () => {},
+});
+```
+
+When `viewTransitionManager.startTransition()` is called, the following sequence occurs:
+
+1. Emits `PrepareOldSnapshot` event. Calls `prepareOldSnapshot` callback (e.g. assign `view-transition-name: hero` to the thumbnail). `await tick()` flushes the DOM.
+2. Calls `document.startViewTransition()`. Browser captures old state, then invokes the transition's update callback.
+3. Inside the update callback: calls `performUpdate(signal)` (e.g. navigate to viewer, wait for image to load).
+4. After `performUpdate` returns: emits `PrepareNewSnapshot` event, then calls `prepareNewSnapshot` callback. This gives both event listeners and the caller a chance to tag elements for the new snapshot (e.g. `AssetViewer` listens for this to set exclusion names on its nav bar and buttons). `await tick()` flushes the DOM.
+5. The update callback returns. Browser captures new state. `updateCallbackDone` resolves.
+6. `transition.ready` resolves. Animation plays.
+7. `transition.finished` resolves. Emits `Finished` event, then calls `onFinished` callback. Listeners use this to clean up all `view-transition-name` values.
+
+The three events (`PrepareOldSnapshot`, `PrepareNewSnapshot`, `Finished`) are broadcast with the transition's `types` array, so listeners can filter by transition type (e.g. only act on `'viewer'` or `'timeline'` transitions).
+
+```mermaid
+sequenceDiagram
+    participant C as Caller
+    participant M as ViewTransitionManager
+    participant L as Event Listeners
+    participant B as Browser
+
+    C->>M: startTransition({ callbacks })
+    M->>L: emit('PrepareOldSnapshot', types)
+    M->>C: prepareOldSnapshot()
+    M->>B: document.startViewTransition()
+    B->>B: Capture old state
+    M->>C: performUpdate(signal)
+    C-->>M: returns
+    M->>L: emit('PrepareNewSnapshot', types)
+    M->>C: prepareNewSnapshot()
+    B->>B: Capture new state
+    B->>B: Animation plays
+    M->>L: emit('Finished', types)
+    M->>C: onFinished()
+```
+
+The manager also handles a few edge cases:
+
+- **Browser compatibility**: The View Transition API has two calling conventions. The newer form `startViewTransition({ update, types })` accepts an object with a `types` array that lets you target specific transitions with different CSS animations. Older browsers only support the function form `startViewTransition(update)`. The manager tries the object form first and falls back to the function form if it throws.
+- **Overlapping transitions**: If a new transition starts while one is already active, the active transition is skipped via `skipTransition()`.
+- **Abort signal**: An `AbortSignal` is created and passed to `performUpdate`. It aborts if `transition.ready` rejects, which is usually caused by coding errors like duplicate `view-transition-name` values on the same page.
+
+##### Timeline visibility
+
+The timeline is always rendered, even when the asset viewer is open. It is hidden using CSS `visibility: hidden` (Tailwind's `invisible` class) rather than `display: none`. The difference matters: `display: none` removes the element from the layout tree entirely (dimensions are 0), while `visibility: hidden` keeps the element fully laid out but unpainted.
+
+The timeline's virtualization pipeline depends on real viewport dimensions:
+
+```svelte
+bind:clientHeight={timelineManager.viewportHeight}
+bind:clientWidth={timelineManager.viewportWidth}
+```
+
+With `display: none`, `viewportHeight`/`viewportWidth` would be 0 and the entire virtualization would break. No months would be "near viewport," nothing would load, no positions would be calculated, and no `Month` components would mount.
+
+With `visibility: hidden`, the timeline stays fully functional while hidden: months load, layout is computed, scroll position tracks the viewer (via `scrollAfterNavigate`), and `Month` components mount/unmount based on viewport proximity as usual. This means:
+
+- **Closing the viewer is instant** because the timeline is already laid out (no bootstrap needed)
+- **Direct navigation to `/photos/{id}` doesn't flicker** because the timeline renders silently behind the viewer
+- **`Month` components are mounted** and can receive `ViewerCloseTransition` events to start the hero animation
+
+##### View transition name assignments
+
+Two elements participate in the hero animation:
+
+- **Timeline thumbnail** (`AssetLayout.svelte`): When `heroTransitionAssetId` matches an asset, that thumbnail's wrapper gets `style:view-transition-name="hero"`
+- **Viewer image** (`AssetViewer.svelte`): `assetViewerManager.transitionName` is set to `'hero'` during transitions
+
+Other viewer elements get their own unique transition names during transitions (`'exclude'` for the navigation bar, `'exclude-previousbutton'` and `'exclude-nextbutton'` for the nav buttons, `'info'` for the detail panel). Without these, the browser would cross-fade them as part of the default page-level `::view-transition-group(root)` animation, creating a messy visual. Assigning unique names isolates them into separate transition groups that can be styled independently via CSS (e.g. faded out or held static). They're `undefined` outside of transitions so they don't affect normal rendering.
+
+##### Open protocol (thumbnail to viewer)
+
+Participants: `Timeline`, `ViewTransitionManager`, `AssetViewer`
+
+```mermaid
+sequenceDiagram
+    participant T as Timeline
+    participant VTM as ViewTransitionManager
+    participant VT as Browser
+    participant AV as AssetViewer
+
+    Note over T: User clicks thumbnail
+    T->>VTM: startTransition()
+    VTM->>AV: emit('PrepareOldSnapshot', ['viewer'])
+    Note over T: prepareOldSnapshot()
+    T->>T: Assign view-transition-name: "hero" to thumbnail
+    VTM->>VT: startViewTransition()
+    VT->>VT: Capture OLD snapshot
+    Note over T: performUpdate()
+    T->>T: Remove "hero" from thumbnail
+    T->>AV: navigate to /photos/{id}
+    AV->>AV: Mount, load image
+    AV-->>T: emit(ViewerOpenTransitionReady)
+    T->>AV: emit(ViewerOpenTransition)
+    AV->>AV: Assign view-transition-name: "hero"<br/>to viewer image
+    VTM->>AV: emit('PrepareNewSnapshot', ['viewer'])
+    AV->>AV: Assign exclusion names to nav bar,<br/>buttons
+    Note over T: performUpdate() returns
+    VT->>VT: Capture NEW snapshot
+    VT->>VT: Animate thumbnail to image
+    VT-->>VTM: transition.finished
+    VTM->>AV: emit('Finished')
+    AV->>AV: Clear all view-transition-names
+    Note over T: onFinished()
+```
+
+##### Close protocol (viewer to thumbnail)
+
+The close is more complex than the open: `TimelineAssetViewer` knows the asset but needs to find which mounted `Month` owns it, and the timeline must scroll into position and become visible before the new snapshot can be captured.
+
+Participants: `TimelineAssetViewer`, `Month`, `ViewTransitionManager`, `AssetViewer`, `Timeline`
+
+```mermaid
+sequenceDiagram
+    participant TAV as TimelineAssetViewer
+    participant M as Month
+    participant VTM as ViewTransitionManager
+    participant VT as Browser
+    participant AV as AssetViewer
+    participant TL as Timeline
+
+    Note over TAV: User closes viewer
+    TAV->>TAV: untilNext('ViewerCloseTransitionReady',<br/>signal: timeout(200ms))
+    TAV->>M: emit(ViewerCloseTransition, {id})
+    M->>M: Find asset in this month<br/>(early return if not found)
+    M->>VTM: startTransition()
+    VTM->>AV: emit('PrepareOldSnapshot', ['timeline'])
+    AV->>AV: Assign exclusion names to nav bar,<br/>buttons
+    Note over M: prepareOldSnapshot()
+    VTM->>VT: startViewTransition()
+    VT->>VT: Capture OLD snapshot
+    Note over M: performUpdate()
+    M-->>TAV: emit(ViewerCloseTransitionReady)
+    Note over TAV: untilNext resolves
+    TAV->>TAV: Set timeline to invisible
+    TAV->>TL: navigate(close viewer)
+    TL->>TL: afterNavigate: scroll to asset,<br/>set timeline to visible
+    TL-->>M: emit(TimelineLoaded, {id})
+    M->>M: Assign view-transition-name: "hero"<br/>to thumbnail
+    VTM->>AV: emit('PrepareNewSnapshot', ['timeline'])
+    Note over M: performUpdate() returns
+    VT->>VT: Capture NEW snapshot
+    VT->>VT: Animate image to thumbnail
+    VT-->>VTM: transition.finished
+    VTM->>AV: emit('Finished')
+    AV->>AV: Clear all view-transition-names
+    Note over M: onFinished()
+    M->>M: Focus asset
+```
+
+##### Timeout and error handling
+
+`untilNext` has a default 10s timeout. If the awaited event never fires, the promise **rejects**, which causes `performUpdate` to throw. By the View Transition spec, a failed update callback aborts the transition. No animation plays; the browser just shows the current DOM state.
+
+**Open timeout (10s default)**: If `ViewerOpenTransitionReady` never fires, `performUpdate` rejects and the hero animation is skipped, but the navigation to the viewer already happened (`openViewer()` fired before the `await`). The viewer opens normally, just without the animation. The likely cause would be something preventing the viewer from mounting. Every viewer type (photo, video, panorama, editor) emits `ViewerOpenTransitionReady` on both success and error, so even a failed image load or network error still emits. The 10s timeout is defensive code, just in case.
+
+**Close timeout (200ms, explicit `AbortSignal.timeout`)**: If no mounted `Month` claims the asset, the signal aborts and `untilNext` **resolves** (not rejects) with `undefined`. `handleClose` continues normally: viewer closes, timeline appears, no hero animation. This is a shorter, intentional timeout because month virtualization creates a known (if rare) structural gap where the event can't fire.
+
+In both cases, the navigation always succeeds. State cleanup always happens (`transition.finished` fires regardless, emitting `Finished` and clearing all `view-transition-name` values), and the app is in a consistent state afterward. The hero animation is a visual enhancement; its failure is invisible beyond the missing animation.

docs/docs/developer/architecture.mdx

@@ -1,9 +1,11 @@
 ---
 sidebar_position: 1
+toc_max_heading_level: 4
 ---
 
 import AppArchitecture from './img/app-architecture.webp';
 import MobileArchitecture from './img/immich_mobile_architecture.svg';
+import ViewTransitions from './_view-transitions.md';
 
 # Architecture
 
@@ -42,6 +44,8 @@ The Repositories should be the only place where other data classes are used inte
 
 The web app is a [TypeScript](https://www.typescriptlang.org/) project that uses [SvelteKit](https://kit.svelte.dev) and [Tailwindcss](https://tailwindcss.com/).
 
+<ViewTransitions />
+
 ### CLI
 
 The Immich CLI is an [npm](https://www.npmjs.com/) package that lets users control their Immich instance from the command line. It uses the API to perform various tasks, especially uploading assets. See the [CLI documentation](/features/command-line-interface.md) for more information.

e2e/src/ui/specs/timeline/utils.ts

@@ -143,8 +143,9 @@ export const timelineUtils = {
     return page.locator('#asset-grid');
   },
   async waitForTimelineLoad(page: Page) {
-    await expect(timelineUtils.locator(page)).toBeInViewport();
+    await page.locator('#asset-grid[data-initialized]').waitFor();
     await expect.poll(() => thumbnailUtils.locator(page).count()).toBeGreaterThan(0);
+    await page.locator('#virtual-timeline:not(.invisible)').waitFor();
   },
   async getScrollTop(page: Page) {
     const queryTop = () =>
@@ -163,14 +164,17 @@ export const assetViewerUtils = {
     return page.locator('#immich-asset-viewer');
   },
   async waitForViewerLoad(page: Page, asset: TimelineAssetConfig) {
-    await page
-      .locator(
-        `img[draggable="false"][src="/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.thumbhash}&edited=true"]`,
-      )
-      .or(
-        page.locator(`video[poster="/api/assets/${asset.id}/thumbnail?size=preview&c=${asset.thumbhash}&edited=true"]`),
-      )
-      .waitFor();
+    const imgLocator = page.locator(`[data-viewer-content] img[data-testid="preview"][src*="${asset.id}"]`);
+    const videoLocator = page.locator(`[data-viewer-content] video[poster*="${asset.id}"]`);
+    await imgLocator.or(videoLocator).waitFor();
+
+    if ((await videoLocator.count()) === 0) {
+      await expect
+        .poll(() => imgLocator.evaluate((img: HTMLImageElement) => img.complete && img.naturalWidth > 0))
+        .toBe(true);
+    }
+
+    await expect(page.locator('#immich-asset-viewer')).not.toHaveAttribute('data-navigating');
   },
   async expectActiveAssetToBe(page: Page, assetId: string) {
     const activeElement = () =>

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/infrastructure/repositories/db.repository.dart

@@ -1,8 +1,7 @@
 import 'dart:async';
-import 'dart:io';
 
 import 'package:drift/drift.dart';
-import 'package:drift_sqlite_async/drift_sqlite_async.dart';
+import 'package:drift_flutter/drift_flutter.dart';
 import 'package:flutter/foundation.dart';
 import 'package:immich_mobile/infrastructure/entities/asset_edit.entity.dart';
 import 'package:immich_mobile/infrastructure/entities/asset_face.entity.dart';
@@ -32,10 +31,6 @@ import 'package:immich_mobile/infrastructure/entities/user_metadata.entity.dart'
 import 'package:immich_mobile/infrastructure/repositories/db.repository.drift.dart';
 import 'package:immich_mobile/infrastructure/repositories/db.repository.steps.dart';
 import 'package:logging/logging.dart';
-import 'package:path/path.dart' as p;
-import 'package:path_provider/path_provider.dart';
-import 'package:sqlite3/sqlite3.dart';
-import 'package:sqlite_async/sqlite_async.dart';
 
 @DriftDatabase(
   tables: [
@@ -65,9 +60,8 @@ import 'package:sqlite_async/sqlite_async.dart';
   include: {'package:immich_mobile/infrastructure/entities/merged_asset.drift'},
 )
 class Drift extends $Drift {
-  Drift(super.executor);
-
-  Drift.sqlite(SqliteConnection db) : super(SqliteAsyncDriftConnection(db));
+  Drift([QueryExecutor? executor])
+    : super(executor ?? driftDatabase(name: 'immich', native: const DriftNativeOptions(shareAcrossIsolates: true)));
 
   Future<void> reset() async {
     // https://github.com/simolus3/drift/commit/bd80a46264b6dd833ef4fd87fffc03f5a832ab41#diff-3f879e03b4a35779344ef16170b9353608dd9c42385f5402ec6035aac4dd8a04R76-R94
@@ -311,18 +305,3 @@ class DriftDatabaseRepository {
 
   Future<T> transaction<T>(Future<T> Function() callback) => _db.transaction(callback);
 }
-
-Future<SqliteConnection> openSqliteConnection({required String name}) async {
-  final dbFolder = await getApplicationDocumentsDirectory();
-  final file = File(p.join(dbFolder.path, '$name.sqlite'));
-  return SqliteDatabase(path: file.path);
-}
-
-Future<void> configureSqliteCache() async {
-  // Make sqlite3 pick a more suitable location for temporary files - the
-  // one from the system may be inaccessible due to sand-boxing.
-  final cacheBase = (await getTemporaryDirectory()).path;
-  // We can't access /tmp on Android, which sqlite3 would try by default.
-  // Explicitly tell it about the correct temporary directory.
-  sqlite3.tempDirectory = cacheBase;
-}

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

@@ -1,14 +1,14 @@
 import 'package:drift/drift.dart';
-import 'package:drift_sqlite_async/drift_sqlite_async.dart';
+import 'package:drift_flutter/drift_flutter.dart';
 import 'package:immich_mobile/infrastructure/entities/log.entity.dart';
 import 'package:immich_mobile/infrastructure/repositories/logger_db.repository.drift.dart';
-import 'package:sqlite_async/sqlite_async.dart';
 
 @DriftDatabase(tables: [LogMessageEntity])
 class DriftLogger extends $DriftLogger {
-  DriftLogger.fromExecutor(super.executor);
-
-  DriftLogger.sqlite(SqliteConnection db) : super(SqliteAsyncDriftConnection(db));
+  DriftLogger([QueryExecutor? executor])
+    : super(
+        executor ?? driftDatabase(name: 'immich_logs', native: const DriftNativeOptions(shareAcrossIsolates: true)),
+      );
 
   @override
   int get schemaVersion => 1;
@@ -19,8 +19,7 @@ class DriftLogger extends $DriftLogger {
       await customStatement('PRAGMA foreign_keys = ON');
       await customStatement('PRAGMA synchronous = NORMAL');
       await customStatement('PRAGMA journal_mode = WAL');
-      await customStatement('PRAGMA busy_timeout = 30000'); // 30s
-      await customStatement('PRAGMA cache_size = -32000'); // 32MB
+      await customStatement('PRAGMA busy_timeout = 500');
       await customStatement('PRAGMA temp_store = MEMORY');
     },
   );

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/presentation/pages/drift_slideshow.page.dart

@@ -0,0 +1,376 @@
+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';
+import 'package:wakelock_plus/wakelock_plus.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 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();
+    ref.listenManual(appConfigProvider.select((s) => s.slideshow), _onConfigChanged);
+
+    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
+    unawaited(WakelockPlus.enable());
+  }
+
+  @override
+  dispose() {
+    _timer.cancel();
+    _stopwatch.stop();
+    _pageController.dispose();
+    unawaited(WakelockPlus.disable());
+    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 _onConfigChanged(SlideshowConfig? previous, SlideshowConfig next) {
+    if (_config == next) {
+      return;
+    }
+
+    final durationChanged = _config.duration != next.duration;
+    _config = next;
+    _updateNextIndex();
+
+    final asset = widget.timeline.getAssetSafe(_index);
+    if (durationChanged && !_paused && asset?.isImage == true) {
+      _timer.cancel();
+      _createTimer();
+    }
+
+    setState(() {});
+  }
+
+  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);
+      } else {
+        setState(() {
+          _paused = true;
+        });
+      }
+      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/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/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/utils/bootstrap.dart

@@ -43,9 +43,8 @@ void configureFileDownloaderNotifications() {
 
 abstract final class Bootstrap {
   static Future<(Drift, DriftLogger)> initDomain({bool listenStoreUpdates = true, bool shouldBufferLogs = true}) async {
-    await configureSqliteCache();
-    final drift = Drift.sqlite(await openSqliteConnection(name: 'immich'));
-    final logDb = DriftLogger.sqlite(await openSqliteConnection(name: 'immich_logs'));
+    final drift = Drift();
+    final logDb = DriftLogger();
     final DriftStoreRepository storeRepo = DriftStoreRepository(drift);
 
     await StoreService.init(storeRepository: storeRepo, listenUpdates: listenStoreUpdates);

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/pubspec.lock

@@ -370,11 +370,11 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.32.1"
-  drift_sqlite_async:
+  drift_flutter:
     dependency: "direct main"
     description:
-      name: drift_sqlite_async
-      sha256: "1b6e99562fc5d35fe5e3696741720a8aca47f4c3eee35d4b9b94be819f53a6f6"
+      name: drift_flutter
+      sha256: "887fdec622174dc7eaefd0048403e34ee07cc18626ac8a7544cc3b8a4a172166"
       url: "https://pub.dev"
     source: hosted
     version: "0.3.0"
@@ -1619,38 +1619,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.10.2"
+  sqlcipher_flutter_libs:
+    dependency: transitive
+    description:
+      name: sqlcipher_flutter_libs
+      sha256: "38d62d659d2fb8739bf25a42c9a350d1fdd6c29a5a61f13a946778ec75d27929"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.0+eol"
   sqlite3:
-    dependency: "direct main"
+    dependency: transitive
     description:
       name: sqlite3
       sha256: "56da3e13ed7d28a66f930aa2b2b29db6736a233f08283326e96321dd812030f5"
       url: "https://pub.dev"
     source: hosted
     version: "3.3.1"
-  sqlite3_connection_pool:
+  sqlite3_flutter_libs:
     dependency: transitive
     description:
-      name: sqlite3_connection_pool
-      sha256: "90b25972c7699d84da97df1c5919804275560b4ab8a158bbec890434b9718f65"
+      name: sqlite3_flutter_libs
+      sha256: "3ed7553eee7bb368f8950f58ba29f634e06e813c029aff6a0d60862b96de8454"
       url: "https://pub.dev"
     source: hosted
-    version: "0.2.4"
-  sqlite3_web:
-    dependency: transitive
-    description:
-      name: sqlite3_web
-      sha256: d876398a9f2cbf115d93fc34901f8fa129b58b13b5fa9377156ed3a9a05695e3
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.7.1"
-  sqlite_async:
-    dependency: "direct main"
-    description:
-      name: sqlite_async
-      sha256: "4c243c5386eba3a7102f98999388a7e0a7f2632e4e06dafb3b4f5a44170a26f6"
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.14.1"
+    version: "0.6.0+eol"
   sqlparser:
     dependency: transitive
     description:

mobile/pubspec.yaml

@@ -19,7 +19,7 @@ dependencies:
   crypto: ^3.0.7
   device_info_plus: ^12.4.0
   drift: ^2.32.1
-  drift_sqlite_async: 0.3.0
+  drift_flutter: ^0.3.0
   dynamic_color: ^1.8.1
   easy_localization: ^3.0.8
   ffi: ^2.2.0
@@ -66,8 +66,6 @@ dependencies:
   share_plus: ^10.1.4
   sliver_tools: ^0.2.12
   stream_transform: ^2.1.1
-  sqlite3: ^3.3.1
-  sqlite_async: 0.14.1
   thumbhash: 0.1.0+1
   timezone: ^0.9.4
   url_launcher: ^6.3.2

mobile/test/domain/services/local_sync_service_test.dart

@@ -131,7 +131,7 @@ void main() {
         durationMs: 0,
         orientation: 0,
         isFavorite: false,
-        playbackStyle: PlatformAssetPlaybackStyle.image,
+        playbackStyle: PlatformAssetPlaybackStyle.image
       );
 
       final assetsToRestore = [LocalAssetStub.image1];
@@ -215,7 +215,7 @@ void main() {
         isFavorite: false,
         createdAt: 1700000000,
         updatedAt: 1732000000,
-        playbackStyle: PlatformAssetPlaybackStyle.image,
+        playbackStyle: PlatformAssetPlaybackStyle.image
       );
 
       final localAsset = platformAsset.toLocalAsset();

readme_i18n/README_ar_JO.md

@@ -37,29 +37,24 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-## تنصل
+> [!WARNING]
+> ⚠️ اتبع دائمًا خطة النسخ الاحتياطي [١-٢-٣](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) لصورك ومقاطع الفيديو الثمينة الخاصة بك
+>
 
-- ⚠️ هذا التطبيق قيد التطوير النشط للغاية
-- ⚠️ توقع الأخطاء والتغييرات العاجلة
-- ⚠️ **لا تستخدم التطبيق باعتباره الطريقة الوحيدة لتخزين الصور ومقاطع الفيديو الخاصة بك**
-- ⚠️ اتبع دائمًا خطة النسخ الاحتياطي [١-٢-٣](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) لصورك ومقاطع الفيديو الثمينة الخاصة بك
+> [!NOTE]
+> يمكنك العثور على الوثائق الرئيسية، بما في ذلك أدلة التثبيت، على https://immich.app/
 
+## روابط
 
-## محتوى
-
-- [الوثائق الرسمية](https://docs.immich.app)
-- [خريطة الطريق](https://github.com/orgs/immich-app/projects/1)
-- [تجريبي](#demo)
-- [سمات](#features)
+- [الوثائق الرسمية](https://docs.immich.app/)
 - [مقدمة](https://docs.immich.app/overview/introduction)
 - [تعليمات التحميل](https://docs.immich.app/install/requirements)
+- [خريطة الطريق](https://immich.app/roadmap)
+- [تجريبي](#تجريبي)
+- [سمات](#سمات)
+- [الترجمات](https://docs.immich.app/developer/translations)
 - [قواعد المساهمة](https://docs.immich.app/overview/support-the-project)
 
-## توثيق
-
-يمكنك العثور على الوثائق الرئيسية، بما في ذلك أدلة التثبيت، هنا 
-https://immich.app
-
 ## تجريبي
 
 يمكنك الوصول إلى العرض التوضيحي على الويب على

readme_i18n/README_ca_ES.md

@@ -37,26 +37,24 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-## Avís legal
+> [!WARNING]
+> ⚠️ Always follow [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) backup plan for your precious photos and videos!
+>
 
-- ⚠️ El projecte està en desenvolupament **molt actiu**.
-- ⚠️ Espereu errors i canvis que poden trencar coses.
-- ⚠️ **No utilitzeu l'aplicació com a única manera de guardar les vostres fotos i vídeos!**
+> [!NOTE]
+> Podeu trobar la documentació principal, incloent les guies d'instal·lació, a https://immich.app/.
 
 ## Contingut
 
-- [Documentació oficial](https://docs.immich.app)
-- [Mapa de ruta](https://github.com/orgs/immich-app/projects/1)
-- [Demo](#demo)
-- [Funcionalitats](#funcionalitats)
+- [Documentació](https://docs.immich.app/)
 - [Introducció](https://docs.immich.app/overview/introduction)
 - [Instal·lació](https://docs.immich.app/install/requirements)
+- [Mapa de ruta](https://immich.app/roadmap)
+- [Demo](#demo)
+- [Funcionalitats](#funcionalitats)
+- [Traduccions](https://docs.immich.app/developer/translations)
 - [Directrius de contribució](https://docs.immich.app/overview/support-the-project)
 
-## Documentació
-
-Podeu trobar la documentació principal, incloent les guies d'instal·lació, a https://immich.app/.
-
 ## Demo
 
 Podeu accedir a la demostració web a https://demo.immich.app. Per a l'aplicació mòbil, podeu utilitzar `https://demo.immich.app` com a "URL de punt final del servidor".

readme_i18n/README_de_DE.md

@@ -38,7 +38,9 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-- ⚠️ Befolge immer die [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) Backup-Regel für deine wertvollen Fotos und Videos!
+> [!WARNING]
+> ⚠️ Befolge immer die [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) Backup-Regel für deine wertvollen Fotos und Videos!
+>
 
 > [!NOTE]
 > Die Hauptdokumentation, einschließlich der Installationsanleitungen, befinden sich unter https://immich.app/.
@@ -49,7 +51,7 @@
 - [Offizielle Dokumentation](https://docs.immich.app)
 - [Über Immich](https://docs.immich.app/overview/introduction)
 - [Installation](https://docs.immich.app/install/requirements)
-- [Roadmap](https://github.com/orgs/immich-app/projects/1)
+- [Roadmap](https://immich.app/roadmap)
 - [Demo](#demo)
 - [Funktionen](#funktionen)
 - [Übersetzungen](https://docs.immich.app/developer/translations)

readme_i18n/README_es_ES.md

@@ -37,27 +37,24 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-## Advertencia
+> [!WARNING]
+> ⚠️ Siempre sigue el plan de backups [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) para tus fotos y videos.
+>
 
-- ⚠️ El proyecto está en **activo desarrollo**.
-- ⚠️ Es probable que haya errores y cambios disruptivos.
-- ⚠️ **¡No utilices la aplicación como única forma de almacenar tus fotos y videos!**
-- ⚠️ Siempre sigue el plan de backups [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) para tus fotos y videos.
+> [!NOTE]
+> Puedes encontrar la documentación oficial, incluidas las guías de instalación, en <https://immich.app/>.
 
 ## Contenido
 
-- [Documentación oficial](https://docs.immich.app)
-- [Hoja de ruta](https://github.com/orgs/immich-app/projects/1)
-- [Demo](#demo)
-- [Funciones](#funciones)
+- [Documentación](https://docs.immich.app/)
 - [Introducción](https://docs.immich.app/overview/introduction)
 - [Instalación](https://docs.immich.app/install/requirements)
+- [Hoja de ruta](https://immich.app/roadmap)
+- [Demo](#demo)
+- [Funciones](#funciones)
+- [Traducciones](https://docs.immich.app/developer/translations)
 - [Directrices para contribuir](https://docs.immich.app/overview/support-the-project)
 
-## Documentación
-
-Puedes encontrar la documentación oficial, incluidas las guías de instalación, en <https://immich.app/>.
-
 ## Demo
 
 Puedes acceder a la demostración web en <https://demo.immich.app>. Para la aplicación móvil, puedes usar `https://demo.immich.app` en la `URL del servidor`.

readme_i18n/README_fr_FR.md

@@ -37,27 +37,24 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-## Clause de non-responsabilité
+> [!WARNING]
+> ⚠️ Ayez toujours un plan de sauvegarde en [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) pour vos précieuses photos et vidéos !
+>
 
-- ⚠️ Le projet est en **très fort** développement.
-- ⚠️ Attendez-vous à rencontrer des bogues et des changements importants.
-- ⚠️ **N'utilisez pas cette application comme seul support de sauvegarde de vos photos et vos vidéos.**
-- ⚠️ Ayez toujours un plan de sauvegarde en [3-2-1](https://www.seagate.com/fr/fr/blog/what-is-a-3-2-1-backup-strategy/) pour vos précieuses photos et vidéos !
+> [!NOTE]
+> Vous pouvez trouver la documentation principale ainsi que les guides d'installation sur https://immich.app/.
 
 ## Sommaire
 
-- [Documentation officielle](https://docs.immich.app)
-- [Feuille de route](https://github.com/orgs/immich-app/projects/1)
-- [Démo](#démo)
-- [Fonctionnalités](#fonctionnalités)
+- [Documentation](https://docs.immich.app/)
 - [Introduction](https://docs.immich.app/overview/introduction)
 - [Installation](https://docs.immich.app/install/requirements)
+- [Feuille de route](https://immich.app/roadmap)
+- [Démo](#démo)
+- [Fonctionnalités](#fonctionnalités)
+- [Traductions](https://docs.immich.app/developer/translations)
 - [Contribution](https://docs.immich.app/overview/support-the-project)
 
-## Documentation
-
-Vous pouvez trouver la documentation principale ainsi que les guides d'installation sur https://immich.app/.
-
 ## Démo
 
 Vous pouvez accéder à la démo en ligne sur https://demo.immich.app. Pour l'application mobile, vous pouvez utiliser `https://demo.immich.app` dans le champ `URL du point d'accès au serveur`

readme_i18n/README_it_IT.md

@@ -38,12 +38,9 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-## Avvertenze
-
-- ⚠️ Il progetto è in fase di sviluppo **molto attivo**.  
-- ⚠️ Possono esserci bug o cambiamenti radicali, che possono non essere retrocompatibili (breaking changes).
-- ⚠️ **Non usare l’app come unico modo per archiviare le tue foto e i tuoi video.**  
-- ⚠️ Segui sempre la regola di backup [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) per proteggere i tuoi ricordi e le foto a cui tieni!  
+> [!WARNING]
+> ⚠️ Segui sempre la regola di backup [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) per proteggere i tuoi ricordi e le foto a cui tieni!
+>
 
 > [!NOTE]  
 > La documentazione principale, comprese le guide all’installazione, si trova su https://immich.app/.  

readme_i18n/README_ja_JP.md

@@ -36,27 +36,24 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-## 免責事項
+> [!WARNING]
+> ⚠️ 大切な写真やビデオは、常に [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) のバックアッププランに従ってください！
+>
 
-- ⚠️ このプロジェクトは **非常に活発に** 開発中です。
-- ⚠️ バグの存在や変更が入ることも予想されます。
-- ⚠️ **写真やビデオを保存する唯一の方法としてこのアプリを使用しないでください。**
-- ⚠️ 大切な写真やビデオは、常に [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) のバックアッププランに従ってください！
+> [!NOTE]
+> インストールガイドを含む主なドキュメントは、https://immich.app/ です。
 
 ## コンテンツ
 
-- [公式ドキュメント](https://docs.immich.app)
-- [ロードマップ](https://github.com/orgs/immich-app/projects/1)
-- [デモ](#デモ)
-- [機能](#機能)
+- [公式ドキュメント](https://docs.immich.app/)
 - [紹介](https://docs.immich.app/overview/introduction)
 - [インストール](https://docs.immich.app/install/requirements)
+- [ロードマップ](https://immich.app/roadmap)
+- [デモ](#デモ)
+- [機能](#機能)
+- [翻訳](https://docs.immich.app/developer/translations)
 - [コントリビューションガイド](https://docs.immich.app/overview/support-the-project)
 
-## ドキュメント
-
-インストールガイドを含む主なドキュメントは、https://immich.app/ です。
-
 ## デモ
 
 web デモは https://demo.immich.app からアクセスできます。モバイルアプリの場合、`Server Endpoint URL` には `https://demo.immich.app` を使用することができます

readme_i18n/README_ko_KR.md

@@ -39,12 +39,9 @@
 
 </p>
 
-## 주의 사항
-
-- ⚠️ 이 프로젝트는 **매우 활발하게** 개발 중입니다.
-- ⚠️ 버그와 잦은 변경 사항이 있을 것으로 예상됩니다.
-- ⚠️ **사진과 동영상을 이 앱에만 단독으로 저장하지 마세요.**
-- ⚠️ 중요한 사진과 동영상을 위해 항상 [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) 백업 계획을 따르세요!
+> [!WARNING]
+> ⚠️ 중요한 사진과 동영상을 위해 항상 [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) 백업 계획을 따르세요!
+>
 
 > [!NOTE]
 > 설치하는 방법을 포함한 주요 문서는 https://immich.app/ 에서 확인할 수 있습니다.
@@ -57,7 +54,7 @@
 - [로드맵](https://immich.app/roadmap)
 - [데모](#데모)
 - [기능](#기능)
-- [번역](https://docs.immich.app/developer/tranlations)
+- [번역](https://docs.immich.app/developer/translations)
 - [기여](https://docs.immich.app/overview/support-the-project)
 
 ## 데모

readme_i18n/README_nl_NL.md

@@ -37,27 +37,24 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-## Disclaimer
+> [!WARNING]
+> ⚠️ Volg altijd het [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) backup plan voor je kostbare foto's en video's!
+>
 
-- ⚠️ Het project wordt momenteel **zeer actief** ontwikkeld.
-- ⚠️ Verwacht bugs en ingrijpende wijzigingen.
-- ⚠️ **Gebruik de app niet als de enige manier om uw foto's en video's op te slaan.**
-- ⚠️ Volg altijd het [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) backup plan voor je kostbare foto's en video's!
+> [!NOTE]
+> De belangrijkste documentatie, inclusief installatie handleidingen, zijn te vinden op https://immich.app/.
 
 ## Inhoud
 
-- [Officiële documentatie](https://docs.immich.app)
-- [Toekomstplannen](https://github.com/orgs/immich-app/projects/1)
-- [Demo](#demo)
-- [Functies](#functies)
+- [Officiële documentatie](https://docs.immich.app/)
 - [Introductie](https://docs.immich.app/overview/introduction)
 - [Installatie](https://docs.immich.app/install/requirements)
+- [Toekomstplannen](https://immich.app/roadmap)
+- [Demo](#demo)
+- [Functies](#functies)
+- [Vertalingen](https://docs.immich.app/developer/translations)
 - [Richtlijnen voor bijdragen](https://docs.immich.app/overview/support-the-project)
 
-## Documentatie
-
-De belangrijkste documentatie, inclusief installatie handleidingen, zijn te vinden op https://immich.app/.
-
 ## Demo
 
 Je kunt de demo [hier](https://demo.immich.app/) bekijken. Voor de mobiele app kun je gebruik maken van `https://demo.immich.app` voor de `Server Endpoint URL`.

readme_i18n/README_pt_BR.md

@@ -40,16 +40,9 @@
 
 </p>
 
-## Avisos
-
-- ⚠️ Este projeto está sob **desenvolvimento constante**.
-- ⚠️ Podem ocorrer bugs e _breaking changes_ (alterações que quebram a
-  compatibilidade com versões anteriores).
-- ⚠️ **Não use esta solução como a única forma de fazer backup das suas fotos e
-  vídeos.**
-- ⚠️ Sempre siga o plano
-  [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) de backup
-  para as suas mídias preciosas!
+> [!WARNING]
+> ⚠️ Sempre siga o plano [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) de backup para as suas mídias preciosas!
+>
 
 > [!NOTE]
 > Você pode encontrar a documentação principal, incluindo guias de instalação, em https://immich.app/.

readme_i18n/README_ru_RU.md

@@ -39,13 +39,9 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-## Предупреждение
-
-- ⚠️ Этот проект находится **в очень активной** разработке.
-- ⚠️ Ожидайте недоработки и глобальные изменения.
-- ⚠️ **Не используйте это приложение как единственное хранилище своих фото и видео.**
-- ⚠️ Всегда следуйте [плану резервного копирования «3-2-1»](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/ "Стратегии резервного копирования: Почему стратегия резервного копирования «3-2-1» — лучшая") для ваших драгоценных фотографий и видео!
-
+> [!WARNING]
+> ⚠️ Всегда следуйте [плану резервного копирования «3-2-1»](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) для ваших драгоценных фотографий и видео!
+>
 
 > [!NOTE]
 > Инструкции по установке и документация по ссылке https://immich.app/
@@ -55,7 +51,7 @@
 - [Официальная документация](https://docs.immich.app)
 - [Введение](https://docs.immich.app/overview/introduction)
 - [Установка](https://docs.immich.app/install/requirements)
-- [План разработки](https://github.com/orgs/immich-app/projects/1)
+- [План разработки](https://immich.app/roadmap)
 - [Демо](#demo)
 - [Возможности](#features)
 - [Перевод](https://docs.immich.app/developer/translations)

readme_i18n/README_sv_SE.md

@@ -38,27 +38,24 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-## Ansvarsfriskrivning
+> [!WARNING]
+> ⚠️ Tillämpa alltid [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/)-strategin för säkerhetskopiering av dina foton och videor!
+>
 
-- ⚠️ Projektet är under **mycket aktiv** utveckling.
-- ⚠️ Förvänta dig buggar och brytande förändringar.
-- ⚠️ **Använd inte appen som enda lagringssätt för dina foton och videor.**
-- ⚠️ Tillämpa alltid [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/)-strategin för säkerhetskopiering av dina foton och videor!
+> [!NOTE]
+> Dokumentation och installationsguider hittas på https://immich.app/.
 
 ## Innehåll
 
-- [Officiell Dokumentation](https://docs.immich.app)
-- [Roadmap](https://github.com/orgs/immich-app/projects/1)
-- [Demo](#demo)
-- [Funktioner](#features)
+- [Officiell Dokumentation](https://docs.immich.app/)
 - [Introduktion](https://docs.immich.app/overview/introduction)
 - [Installation](https://docs.immich.app/install/requirements)
+- [Roadmap](https://immich.app/roadmap)
+- [Demo](#demo)
+- [Funktioner](#funktioner)
+- [Översättningar](https://docs.immich.app/developer/translations)
 - [Riktlinjer för Bidrag](https://docs.immich.app/overview/support-the-project)
 
-## Dokumentation
-
-Dokumentation och installationsguider hittas på https://imiich.app/.
-
 ## Demo
 
 Ett webb-demo finns att testa på https://demo.immich.app. Använd `https://demo.immich.app` i mobilappen som `Server Endpoint URL`

readme_i18n/README_tr_TR.md

@@ -37,26 +37,24 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-## Feragatname
+> [!WARNING]
+> ⚠️ Always follow [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) backup plan for your precious photos and videos!
+>
 
-- ⚠️ Proje **çok aktif** bir şekilde geliştirilmektedir.
-- ⚠️ Hatalar ve uygulama yapısını bozan değişiklikler olabilir.
-- ⚠️ **Uygulamayı, fotoğraflarınızı ve videolarınızı saklamanın tek yöntemi olarak kullanmayın!**
+> [!NOTE]
+> Kurulum dahil olmak üzere resmi belgeleri https://immich.app/ adresinde bulabilirsiniz.
 
-## Content
+## Bağlantılar
 
-- [Resmi Belgeler](https://docs.immich.app)
-- [Yol Haritası](https://github.com/orgs/immich-app/projects/1)
-- [Demo](#demo)
-- [Özellikler](#özellikler)
+- [Resmi Belgeler](https://docs.immich.app/)
 - [Giriş](https://docs.immich.app/overview/introduction)
 - [Kurulum](https://docs.immich.app/install/requirements)
+- [Yol Haritası](https://immich.app/roadmap)
+- [Demo](#demo)
+- [Özellikler](#özellikler)
+- [Çeviriler](https://docs.immich.app/developer/translations)
 - [Katkı Sağlama Rehberi](https://docs.immich.app/overview/support-the-project)
 
-## Belgeler
-
-Kurulum dahil olmak üzere resmi belgeleri https://immich.app/ adresinde bulabilirsiniz.
-
 ## Demo
 
 Web demo adresi: https://demo.immich.app. Mobil uygulama için `Server Endpoint URL` olarak `https://demo.immich.app` adresini kullanabilirsiniz.

readme_i18n/README_uk_UA.md

@@ -39,12 +39,9 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-## Застереження
-
-- ⚠️ Цей проєкт перебуває **в дуже активній** розробці.
-- ⚠️ Очікуйте безліч помилок і глобальних змін.
-- ⚠️ **Не використовуйте цей застосунок як єдине сховище своїх фото та відео.**
-- ⚠️ Завжди дотримуйтесь [плану резервного копіювання 3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) для ваших дорогоцінних фотографій та відео!
+> [!WARNING]
+> ⚠️ Завжди дотримуйтесь [плану резервного копіювання 3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) для ваших дорогоцінних фотографій та відео!
+>
 
 > [!NOTE]
 > Основну документацію, зокрема посібники зі встановлення, можна знайти за адресою https://immich.app/.

readme_i18n/README_vi_VN.md

@@ -41,12 +41,9 @@
 
 </p>
 
-## Tuyên bố miễn trừ trách nhiệm
-
-- ⚠️ Dự án đang được phát triển **rất tích cực**.
-- ⚠️ Dự kiến ​​sẽ có lỗi và thay đổi đột ngột.
-- ⚠️ **Không sử dụng ứng dụng như là cách duy nhất để lưu trữ ảnh và video của bạn.**
-- ⚠️ Luôn tuân thủ kế hoạch sao lưu [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) cho những bức ảnh và video quý giá của bạn!
+> [!WARNING]
+> ⚠️ Luôn tuân thủ kế hoạch sao lưu [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) cho những bức ảnh và video quý giá của bạn!
+>
 
 > [!NOTE]
 > Bạn có thể tìm thấy tài liệu chính, bao gồm hướng dẫn cài đặt, tại https://immich.app/.

readme_i18n/README_zh_CN.md

@@ -43,12 +43,9 @@
 
 </p>
 
-## 免责声明
-
-- ⚠️ 本项目正在 **非常活跃** 地开发中。
-- ⚠️ 可能存在 bug 或者随时有重大变更。
-- ⚠️ **不要把本软件作为您存储照片或视频的唯一方式。**
-- ⚠️ 为了您宝贵的照片与视频，请始终遵守 [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) 备份方案！
+> [!WARNING]
+> ⚠️ 为了您宝贵的照片与视频，请始终遵守 [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) 备份方案！
+>
 
 > [!NOTE]
 > 完整的项目文档以及安装教程请参见：<https://immich.app/>。

web/src/app.css

@@ -76,6 +76,11 @@
     --immich-dark-bg: 10 10 10;
     --immich-dark-fg: 229 231 235;
     --immich-dark-gray: 33 33 33;
+
+    /* view transition variables */
+    --vt-duration-default: 250ms;
+    --vt-duration-hero: 280ms;
+    --vt-memory-easing: cubic-bezier(0.2, 0, 0, 1);
   }
 
   button:not(:disabled),
@@ -176,3 +181,173 @@
     @apply bg-subtle rounded-lg;
   }
 }
+
+@layer base {
+  ::view-transition {
+    background: var(--color-black);
+    animation-duration: var(--vt-duration-default);
+  }
+
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    mix-blend-mode: normal;
+    animation-duration: inherit;
+  }
+
+  ::view-transition-old(*) {
+    animation-name: fadeOut;
+    animation-fill-mode: forwards;
+  }
+  ::view-transition-new(*) {
+    animation-name: fadeIn;
+    animation-fill-mode: forwards;
+  }
+
+  ::view-transition-old(root) {
+    animation: var(--vt-duration-default) 0s fadeOut forwards;
+  }
+  ::view-transition-new(root) {
+    animation: var(--vt-duration-default) 0s fadeIn forwards;
+  }
+
+  ::view-transition-image-pair(info) {
+    isolation: auto;
+  }
+  ::view-transition-old(info) {
+    animation: var(--vt-duration-default) 0s panelSlideOutRight forwards;
+  }
+  ::view-transition-new(info) {
+    animation: var(--vt-duration-default) 0s panelSlideInRight forwards;
+  }
+
+  html[dir='rtl']::view-transition-old(info) {
+    animation: var(--vt-duration-default) 0s panelSlideOutLeft forwards;
+  }
+  html[dir='rtl']::view-transition-new(info) {
+    animation: var(--vt-duration-default) 0s panelSlideInLeft forwards;
+  }
+
+  ::view-transition-group(exclude-previousbutton),
+  ::view-transition-group(exclude-nextbutton),
+  ::view-transition-group(exclude) {
+    animation: none;
+    z-index: 5;
+  }
+  ::view-transition-old(exclude-previousbutton),
+  ::view-transition-old(exclude-nextbutton),
+  ::view-transition-old(exclude) {
+    visibility: hidden;
+  }
+  ::view-transition-new(exclude-previousbutton),
+  ::view-transition-new(exclude-nextbutton),
+  ::view-transition-new(exclude) {
+    animation: none;
+    z-index: 5;
+  }
+
+  ::view-transition-group(hero) {
+    animation-duration: var(--vt-duration-hero);
+    animation-timing-function: var(--vt-memory-easing);
+  }
+  ::view-transition-old(hero) {
+    animation: none;
+    display: none;
+  }
+  ::view-transition-new(hero) {
+    animation: none;
+    align-content: center;
+  }
+
+  @keyframes panelSlideInRight {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes panelSlideOutRight {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes panelSlideInLeft {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes panelSlideOutLeft {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    50% {
+      opacity: 0.85;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.85;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ::view-transition-group(hero) {
+      animation-name: none;
+    }
+
+    ::view-transition-old(hero) {
+      animation: none;
+      display: none;
+    }
+
+    ::view-transition-new(hero) {
+      animation: none;
+    }
+
+    html:active-view-transition-type(viewer) {
+      &::view-transition-old(hero) {
+        animation: none;
+        display: none;
+      }
+      &::view-transition-new(hero) {
+        animation: var(--vt-duration-default) 0s fadeIn forwards;
+      }
+    }
+
+    html:active-view-transition-type(timeline) {
+      &::view-transition-old(hero) {
+        animation: var(--vt-duration-default) 0s fadeOut forwards;
+      }
+      &::view-transition-new(hero) {
+        animation: var(--vt-duration-default) 0s fadeIn forwards;
+      }
+    }
+  }
+}

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';
@@ -18,6 +69,8 @@
     sharedLink?: SharedLinkResponseDto;
     objectFit?: 'contain' | 'cover';
     container: Size;
+    imageClass?: string;
+    transitionName?: string;
     onUrlChange?: (url: string) => void;
     onImageReady?: () => void;
     onError?: () => void;
@@ -35,6 +88,8 @@
     sharedLink,
     objectFit = 'contain',
     container,
+    imageClass,
+    transitionName,
     onUrlChange,
     onImageReady,
     onError,
@@ -98,16 +153,37 @@
     return { width: 1, height: 1 };
   });
 
-  const { width, height, insetInlineStart, top } = $derived.by(() => {
-    const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
-    const { width, height } = scaleFn(imageDimensions, container);
-    return {
-      width: width + 'px',
-      height: height + 'px',
-      insetInlineStart: (container.width - width) / 2 + 'px',
-      top: (container.height - height) / 2 + 'px',
-    };
-  });
+  const { insetInlineStart, top, visualWidth, visualHeight, rasterWidth, rasterHeight, rasterScale } = $derived.by(
+    () => {
+      const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
+      const { width, height } = scaleFn(imageDimensions, container);
+      const visualWidth = width + 'px';
+      const visualHeight = height + 'px';
+      if (maxRasterPixels === 0) {
+        return {
+          insetInlineStart: (container.width - width) / 2 + 'px',
+          top: (container.height - height) / 2 + 'px',
+          visualWidth,
+          visualHeight,
+          rasterWidth: visualWidth,
+          rasterHeight: visualHeight,
+          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 {
+        insetInlineStart: (container.width - width) / 2 + 'px',
+        top: (container.height - height) / 2 + 'px',
+        visualWidth,
+        visualHeight,
+        rasterWidth: width * rasterRatio + 'px',
+        rasterHeight: height * rasterRatio + 'px',
+        rasterScale: 1 / rasterRatio,
+      };
+    },
+  );
 
   const { status } = $derived(adaptiveImageLoader);
   const alt = $derived(status.urls.preview ? $getAltText(toTimelineAsset(asset)) : '');
@@ -152,66 +228,75 @@
   {@render backdrop?.()}
 
   <div
-    class="pointer-events-none absolute inset-0"
+    class={['pointer-events-none absolute', imageClass]}
     style:inset-inline-start={insetInlineStart}
     style:top
-    style:width
-    style:height
+    style:width={visualWidth}
+    style:height={visualHeight}
+    style:view-transition-name={transitionName ?? assetViewerManager.transitionName}
   >
-    {#if show.alphaBackground}
-      <AlphaBackground />
-    {/if}
-
-    {#if show.thumbhash}
-      {#if asset.thumbhash}
-        <!-- Thumbhash / spinner layer  -->
-        <Thumbhash base64ThumbHash={asset.thumbhash} class="absolute size-full" />
-      {:else if show.spinner}
-        <DelayedLoadingSpinner />
+    <div
+      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 />
       {/if}
-    {/if}
 
-    {#if show.thumbnail}
-      <ImageLayer
-        {adaptiveImageLoader}
-        {width}
-        {height}
-        quality="thumbnail"
-        src={status.urls.thumbnail}
-        alt=""
-        role="presentation"
-        bind:ref={thumbnailElement}
-      />
-    {/if}
+      {#if show.thumbhash}
+        {#if asset.thumbhash}
+          <!-- Thumbhash / spinner layer  -->
+          <Thumbhash base64ThumbHash={asset.thumbhash} class="absolute size-full" />
+        {:else if show.spinner}
+          <DelayedLoadingSpinner />
+        {/if}
+      {/if}
 
-    {#if show.brokenAsset}
-      <BrokenAsset class="absolute size-full text-xl" />
-    {/if}
+      {#if show.thumbnail}
+        <ImageLayer
+          {adaptiveImageLoader}
+          width={rasterWidth}
+          height={rasterHeight}
+          quality="thumbnail"
+          src={status.urls.thumbnail}
+          alt=""
+          role="presentation"
+          bind:ref={thumbnailElement}
+        />
+      {/if}
 
-    {#if show.preview}
-      <ImageLayer
-        {adaptiveImageLoader}
-        {alt}
-        {width}
-        {height}
-        {overlays}
-        quality="preview"
-        src={status.urls.preview}
-        bind:ref={previewElement}
-      />
-    {/if}
+      {#if show.brokenAsset}
+        <BrokenAsset class="absolute size-full text-xl" />
+      {/if}
 
-    {#if show.original}
-      <ImageLayer
-        {adaptiveImageLoader}
-        {alt}
-        {width}
-        {height}
-        {overlays}
-        quality="original"
-        src={status.urls.original}
-        bind:ref={originalElement}
-      />
-    {/if}
+      {#if show.preview}
+        <ImageLayer
+          {adaptiveImageLoader}
+          {alt}
+          width={rasterWidth}
+          height={rasterHeight}
+          {overlays}
+          quality="preview"
+          src={status.urls.preview}
+          bind:ref={previewElement}
+        />
+      {/if}
+
+      {#if show.original}
+        <ImageLayer
+          {adaptiveImageLoader}
+          {alt}
+          width={rasterWidth}
+          height={rasterHeight}
+          {overlays}
+          quality="original"
+          src={status.urls.original}
+          bind:ref={originalElement}
+        />
+      {/if}
+    </div>
   </div>
 </div>

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

@@ -14,6 +14,7 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { editManager, EditToolType } from '$lib/managers/edit/edit-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
+  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
   import { getAssetActions } from '$lib/services/asset.service';
   import { faceManager } from '$lib/stores/face.svelte';
   import { ocrManager } from '$lib/stores/ocr.svelte';
@@ -39,7 +40,7 @@
   import { onDestroy, onMount, untrack } from 'svelte';
   import type { SwipeCustomEvent } from 'svelte-gestures';
   import { t } from 'svelte-i18n';
-  import { fly } from 'svelte/transition';
+  import { slide } from 'svelte/transition';
   import Thumbnail from '../assets/thumbnail/Thumbnail.svelte';
   import ActivityStatus from './ActivityStatus.svelte';
   import ActivityViewer from './ActivityViewer.svelte';
@@ -149,8 +150,45 @@
     }
   };
 
+  let detailPanelTransitionName = $state<string | undefined>();
+  let navigationBarTransitionName = $state<string | undefined>();
+  let previousButtonTransitionName = $state<string | undefined>();
+  let nextButtonTransitionName = $state<string | undefined>();
+
+  const activateViewTransitionNames = () => {
+    detailPanelTransitionName = 'info';
+    assetViewerManager.transitionName = 'hero';
+  };
+
   onMount(() => {
     syncAssetViewerOpenClass(true);
+
+    const unsubAssetViewerEvents = assetViewerManager.on({
+      ViewerOpenTransition: activateViewTransitionNames,
+      ViewerCloseTransition: activateViewTransitionNames,
+    });
+    const unsubViewTransitionEvents = viewTransitionManager.on({
+      PrepareOldSnapshot: (types) => {
+        if (types.includes('timeline')) {
+          navigationBarTransitionName = 'exclude';
+          previousButtonTransitionName = 'exclude-previousbutton';
+          nextButtonTransitionName = 'exclude-nextbutton';
+        }
+      },
+      PrepareNewSnapshot: (types) => {
+        const isViewer = types.includes('viewer');
+        navigationBarTransitionName = isViewer ? 'exclude' : undefined;
+        previousButtonTransitionName = isViewer ? 'exclude-previousbutton' : undefined;
+        nextButtonTransitionName = isViewer ? 'exclude-nextbutton' : undefined;
+      },
+      Finished: () => {
+        navigationBarTransitionName = undefined;
+        previousButtonTransitionName = undefined;
+        nextButtonTransitionName = undefined;
+        assetViewerManager.transitionName = undefined;
+        detailPanelTransitionName = undefined;
+      },
+    });
     const slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
       if (value === SlideshowState.PlaySlideshow) {
         slideshowHistory.reset();
@@ -169,6 +207,8 @@
     });
 
     return () => {
+      unsubAssetViewerEvents();
+      unsubViewTransitionEvents();
       slideshowStateUnsubscribe();
       slideshowNavigationUnsubscribe();
     };
@@ -195,6 +235,7 @@
   };
 
   const tracker = new InvocationTracker();
+  let navigating = $state(false);
   const navigateAsset = (order?: 'previous' | 'next') => {
     if (!order) {
       if ($slideshowState === SlideshowState.PlaySlideshow) {
@@ -210,7 +251,8 @@
       return;
     }
 
-    void tracker.invoke(async () => {
+    navigating = true;
+    const navigation = tracker.invoke(async () => {
       const isShuffle =
         $slideshowState === SlideshowState.PlaySlideshow && $slideshowNavigation === SlideshowNavigation.Shuffle;
 
@@ -247,6 +289,7 @@
 
       await handleStopSlideshow();
     }, $t('error_while_navigating'));
+    void navigation.finally(() => (navigating = false));
   };
 
   const navigateStack = (direction: 'previous' | 'next') => {
@@ -480,7 +523,8 @@
 
 <section
   id="immich-asset-viewer"
-  class="fixed inset-s-0 top-0 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
+  class="fixed inset-s-0 top-0 z-10 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
+  data-navigating={navigating || undefined}
   use:focusTrap
   use:shortcuts={[
     { shortcut: { key: 'ArrowUp' }, onShortcut: () => navigateStack('previous') },
@@ -490,7 +534,10 @@
 >
   <!-- Top navigation bar -->
   {#if $slideshowState === SlideshowState.None && !assetViewerManager.isShowEditor}
-    <div class="col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
+    <div
+      class="col-span-4 col-start-1 row-span-1 row-start-1 transition-transform"
+      style:view-transition-name={navigationBarTransitionName}
+    >
       <AssetViewerNavBar
         {asset}
         {album}
@@ -523,7 +570,11 @@
   {/if}
 
   {#if $slideshowState === SlideshowState.None && showNavigation && !assetViewerManager.isShowEditor && !assetViewerManager.isFaceEditMode && previousAsset}
-    <div class="col-span-1 col-start-1 row-span-full row-start-1 my-auto justify-self-start">
+    <div
+      data-test-id="previous-asset"
+      class="col-span-1 col-start-1 row-span-full row-start-1 my-auto justify-self-start"
+      style:view-transition-name={previousButtonTransitionName}
+    >
       <PreviousAssetAction onPreviousAsset={() => navigateAsset('previous')} />
     </div>
   {/if}
@@ -601,19 +652,24 @@
   </div>
 
   {#if $slideshowState === SlideshowState.None && showNavigation && !assetViewerManager.isShowEditor && !assetViewerManager.isFaceEditMode && nextAsset}
-    <div class="col-span-1 col-start-4 row-span-full row-start-1 my-auto justify-self-end">
+    <div
+      data-test-id="next-asset"
+      class="col-span-1 col-start-4 row-span-full row-start-1 my-auto justify-self-end"
+      style:view-transition-name={nextButtonTransitionName}
+    >
       <NextAssetAction onNextAsset={() => navigateAsset('next')} />
     </div>
   {/if}
 
   {#if showDetailPanel || assetViewerManager.isShowEditor}
     <div
-      transition:fly={{ duration: 150 }}
+      transition:slide={{ axis: 'x', duration: 150 }}
       id="detail-panel"
       class={[
         'row-span-4 row-start-1 overflow-y-auto bg-light transition-all dark:border-l dark:border-s-immich-dark-gray',
         showDetailPanel ? 'w-90' : 'w-100',
       ]}
+      style:view-transition-name={detailPanelTransitionName}
       translate="yes"
     >
       {#if showDetailPanel}
@@ -662,7 +718,7 @@
 
   {#if isShared && album && assetViewerManager.isShowActivityPanel && authManager.authenticated}
     <div
-      transition:fly={{ duration: 150 }}
+      transition:slide={{ axis: 'x', duration: 150 }}
       id="activity-panel"
       class="row-span-5 row-start-1 w-90 overflow-y-auto transition-all md:w-115 dark:border-l dark:border-s-immich-dark-gray"
       translate="yes"

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

@@ -4,7 +4,6 @@
   import { AssetMediaSize, viewAsset, type AssetResponseDto } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
 
   type Props = {
     asset: AssetResponseDto;
@@ -20,7 +19,7 @@
   };
 </script>
 
-<div transition:fade={{ duration: 150 }} class="flex h-full place-content-center place-items-center select-none">
+<div class="flex h-dvh w-dvw place-content-center place-items-center select-none">
   {#await Promise.all([loadAssetData(assetId), import('./PhotoSphereViewerAdapter.svelte')])}
     <LoadingSpinner />
   {:then [data, { default: PhotoSphereViewer }]}

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

@@ -205,6 +205,7 @@
       zoomSpeed: 0.5,
       fisheye: false,
     });
+    viewer.addEventListener('ready', () => assetViewerManager.emit('ViewerOpenTransitionReady'), { once: true });
     const resolutionPlugin = viewer.getPlugin<ResolutionPlugin>(ResolutionPlugin);
     const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
       // zoomLevel is 0-100
@@ -250,7 +251,12 @@
 <AssetViewerEvents {onZoom} />
 
 <svelte:document use:shortcuts={[{ shortcut: { key: 'z' }, onShortcut: onZoom, preventDefault: true }]} />
-<div class="mb-0 size-full" bind:this={container}></div>
+<div
+  id="sphere"
+  class="mb-0 h-dvh w-dvw"
+  bind:this={container}
+  style:view-transition-name={assetViewerManager.transitionName}
+></div>
 
 <style>
   /* Reset the default tooltip styling */

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

@@ -28,12 +28,11 @@
     cursor: AssetCursor;
     element?: HTMLDivElement;
     sharedLink?: SharedLinkResponseDto;
-    onReady?: () => void;
     onError?: () => void;
     onSwipe?: (event: SwipeCustomEvent) => void;
   };
 
-  let { cursor, element = $bindable(), sharedLink, onReady, onError, onSwipe }: Props = $props();
+  let { cursor, element = $bindable(), sharedLink, onError, onSwipe }: Props = $props();
 
   const { slideshowState, slideshowLook } = slideshowStore;
   const asset = $derived(cursor.current);
@@ -228,11 +227,11 @@
     {onUrlChange}
     onImageReady={() => {
       visibleImageReady = true;
-      onReady?.();
+      assetViewerManager.emit('ViewerOpenTransitionReady');
     }}
     onError={() => {
       onError?.();
-      onReady?.();
+      assetViewerManager.emit('ViewerOpenTransitionReady');
     }}
     bind:imgRef={assetViewerManager.imgRef}
     bind:ref={adaptiveImage}

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

@@ -181,6 +181,8 @@
           playsinline
           {...useSwipe(onSwipe)}
           class="h-full object-contain"
+          style:view-transition-name={assetViewerManager.transitionName}
+          onloadedmetadata={() => assetViewerManager.emit('ViewerOpenTransitionReady')}
           oncanplay={(e) => handleCanPlay(e.currentTarget)}
           onended={onVideoEnded}
           onplaying={(e) => {

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

@@ -3,7 +3,6 @@
   import type { AssetResponseDto } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
 
   interface Props {
     asset: AssetResponseDto;
@@ -19,7 +18,7 @@
   ]);
 </script>
 
-<div transition:fade={{ duration: 150 }} class="flex h-full place-content-center place-items-center select-none">
+<div class="flex h-full place-content-center place-items-center select-none">
   {#await modules}
     <LoadingSpinner />
   {:then [PhotoSphereViewer, adapter, videoPlugin]}

web/src/lib/components/asset-viewer/editor/transform-tool/CropArea.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { ResizeBoundary, transformManager } from '$lib/managers/edit/transform-manager.svelte';
   import { getAssetMediaUrl } from '$lib/utils';
   import { getAltText } from '$lib/utils/thumbnail-util';
@@ -74,6 +75,8 @@
       alt={$getAltText(toTimelineAsset(asset))}
       class="h-full transition-transform select-none motion-reduce:transition-none"
       style:transform={imageTransform}
+      onload={() => assetViewerManager.emit('ViewerOpenTransitionReady')}
+      onerror={() => assetViewerManager.emit('ViewerOpenTransitionReady')}
     />
     <div
       class={[

web/src/lib/components/layouts/UserPageLayout.svelte

@@ -7,6 +7,8 @@
   import NavigationBar from '$lib/components/shared-components/navigation-bar/NavigationBar.svelte';
   import UserSidebar from '$lib/components/shared-components/side-bar/UserSidebar.svelte';
   import type { HeaderButtonActionItem } from '$lib/types';
+  import { page } from '$app/state';
+  import { isAssetViewerRoute } from '$lib/utils/navigation';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { Button, ContextMenuButton, HStack, isMenuItemType, type MenuItemType } from '@immich/ui';
   import type { Snippet } from 'svelte';
@@ -48,7 +50,7 @@
 
 <header>
   {#if !hideNavbar}
-    <NavigationBar onUploadClick={() => openFileUploadDialog()} />
+    <NavigationBar hidden={isAssetViewerRoute(page)} onUploadClick={() => openFileUploadDialog()} />
   {/if}
 </header>
 <div
@@ -64,7 +66,7 @@
     <UserSidebar />
   {/if}
 
-  <main class="relative">
+  <main class="relative w-full">
     <div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto p-2" use:useActions={use}>
       {@render children?.()}
     </div>

web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte

@@ -10,6 +10,7 @@
   import SkipLink from '$lib/elements/SkipLink.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
   import { Route } from '$lib/route';
   import { getGlobalActions } from '$lib/services/app.service';
   import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
@@ -27,21 +28,35 @@
     onUploadClick?: () => void;
     // TODO: remove once this is only used in <AppShellHeader>
     noBorder?: boolean;
+    hidden?: boolean;
   };
 
-  let { onUploadClick, noBorder = false }: Props = $props();
+  let { onUploadClick, noBorder = false, hidden = false }: Props = $props();
 
+  let viewTransitionName = $state<string | undefined>();
   let shouldShowAccountInfoPanel = $state(false);
   let shouldShowNotificationPanel = $state(false);
   let innerWidth: number = $state(0);
   const hasUnreadNotifications = $derived(notificationManager.notifications.length > 0);
 
-  onMount(async () => {
-    try {
-      await notificationManager.refresh();
-    } catch (error) {
+  onMount(() => {
+    notificationManager.refresh().catch((error) => {
       console.error('Failed to load notifications on mount', error);
-    }
+    });
+
+    return viewTransitionManager.on({
+      PrepareOldSnapshot: (types) => {
+        if (types.includes('viewer')) {
+          viewTransitionName = 'exclude';
+        }
+      },
+      PrepareNewSnapshot: (types) => {
+        viewTransitionName = types.includes('timeline') ? 'exclude' : undefined;
+      },
+      Finished: () => {
+        viewTransitionName = undefined;
+      },
+    });
   });
 
   const { Cast } = $derived(getGlobalActions($t));
@@ -49,7 +64,11 @@
 
 <svelte:window bind:innerWidth />
 
-<nav id="dashboard-navbar" class="h-(--navbar-height) w-dvw text-sm max-md:h-(--navbar-height-md)">
+<nav
+  id="dashboard-navbar"
+  class={['h-(--navbar-height) w-dvw text-sm max-md:h-(--navbar-height-md)', hidden && 'invisible']}
+  style:view-transition-name={viewTransitionName}
+>
   <SkipLink text={$t('skip_to_content')} />
   <div
     class="grid h-full grid-cols-[--spacing(32)_auto] items-center py-2 sidebar:grid-cols-[--spacing(64)_auto] {noBorder

web/src/lib/components/timeline/AssetLayout.svelte

@@ -2,7 +2,6 @@
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { filterIsInOrNearViewport } from '$lib/managers/timeline-manager/utils.svelte';
   import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
-  import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
   import { uploadAssetsStore } from '$lib/stores/upload';
   import type { CommonPosition } from '$lib/utils/layout-utils';
   import type { Snippet } from 'svelte';
@@ -12,10 +11,11 @@
   let { isUploading } = uploadAssetsStore;
 
   type Props = {
+    heroTransitionAssetId?: string | null;
+    suspendTransitions?: boolean;
     viewerAssets: ViewerAsset[];
     width: number;
     height: number;
-    manager: VirtualScrollManager;
     thumbnail: Snippet<
       [
         {
@@ -27,9 +27,17 @@
     customThumbnailLayout?: Snippet<[asset: TimelineAsset]>;
   };
 
-  const { viewerAssets, width, height, manager, thumbnail, customThumbnailLayout }: Props = $props();
+  const {
+    heroTransitionAssetId,
+    suspendTransitions = false,
+    viewerAssets,
+    width,
+    height,
+    thumbnail,
+    customThumbnailLayout,
+  }: Props = $props();
 
-  const transitionDuration = $derived(manager.suspendTransitions && !$isUploading ? 0 : 150);
+  const transitionDuration = $derived(suspendTransitions && !$isUploading ? 0 : 150);
   const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
 </script>
 
@@ -38,11 +46,13 @@
   {#each filterIsInOrNearViewport(viewerAssets) as viewerAsset (viewerAsset.id)}
     {@const position = viewerAsset.position!}
     {@const asset = viewerAsset.asset!}
+    {@const transitionName = heroTransitionAssetId === asset.id ? 'hero' : undefined}
 
     <!-- note: don't remove data-asset-id - its used by web e2e tests -->
     <div
       data-asset-id={asset.id}
       class="absolute"
+      style:view-transition-name={transitionName}
       style:top={position.top + 'px'}
       style:inset-inline-start={position.left + 'px'}
       style:width={position.width + 'px'}

web/src/lib/components/timeline/Month.svelte

@@ -1,19 +1,24 @@
 <script lang="ts">
+  import { focusAsset } from '$lib/components/timeline/actions/focus-actions';
   import AssetLayout from '$lib/components/timeline/AssetLayout.svelte';
+  import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { TimelineDay } from '$lib/managers/timeline-manager/timeline-day.svelte';
   import type { TimelineMonth } from '$lib/managers/timeline-manager/timeline-month.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { assetsSnapshot, filterIsInOrNearViewport } from '$lib/managers/timeline-manager/utils.svelte';
-  import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
+  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
   import { uploadAssetsStore } from '$lib/stores/upload';
+  import { handlePromiseError } from '$lib/utils';
   import type { CommonPosition } from '$lib/utils/layout-utils';
   import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
   import { Icon } from '@immich/ui';
   import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-  import type { Snippet } from 'svelte';
+  import { onMount, tick, type Snippet } from 'svelte';
 
   type Props = {
+    toViewerHeroAssetId?: string | null;
     thumbnail: Snippet<
       [
         {
@@ -28,16 +33,16 @@
     singleSelect: boolean;
     assetInteraction: AssetMultiSelectManager;
     timelineMonth: TimelineMonth;
-    manager: VirtualScrollManager;
     onTimelineDaySelect: (timelineDay: TimelineDay, assets: TimelineAsset[]) => void;
   };
+
   let {
+    toViewerHeroAssetId,
     thumbnail: thumbnailWithGroup,
     customThumbnailLayout,
     singleSelect,
     assetInteraction,
     timelineMonth,
-    manager,
     onTimelineDaySelect,
   }: Props = $props();
 
@@ -55,6 +60,34 @@
     });
     return getDateLocaleString(date);
   };
+
+  let toTimelineHeroAssetId = $state<string | null>(null);
+  let heroTransitionAssetId = $derived(toTimelineHeroAssetId ?? toViewerHeroAssetId ?? null);
+
+  const handleViewerCloseTransition = ({ id }: { id: string }) => {
+    const asset = timelineMonth.findAssetById({ id });
+    if (!asset) {
+      return;
+    }
+    handlePromiseError(
+      viewTransitionManager.startTransition({
+        types: ['timeline'],
+        performUpdate: async () => {
+          assetViewerManager.emit('ViewerCloseTransitionReady');
+          const event = await eventManager.untilNext('TimelineLoaded');
+          toTimelineHeroAssetId = event.id;
+          await tick();
+        },
+        onFinished: () => {
+          toTimelineHeroAssetId = null;
+          focusAsset(asset.id);
+        },
+      }),
+    );
+  };
+  if (viewTransitionManager.isSupported()) {
+    onMount(() => assetViewerManager.on({ ViewerCloseTransition: handleViewerCloseTransition }));
+  }
 </script>
 
 {#each filterIsInOrNearViewport(timelineMonth.timelineDays) as timelineDay, groupIndex (timelineDay.day)}
@@ -99,7 +132,8 @@
     </div>
 
     <AssetLayout
-      {manager}
+      {heroTransitionAssetId}
+      suspendTransitions={timelineMonth.timelineManager.suspendTransitions}
       viewerAssets={timelineDay.viewerAssets}
       height={timelineDay.height}
       width={timelineDay.width}

web/src/lib/components/timeline/Scrubber.svelte

@@ -11,6 +11,7 @@
   import { fade, fly } from 'svelte/transition';
 
   interface Props {
+    invisible: boolean;
     /** Offset from the top of the timeline (e.g., for headers) */
     timelineTopOffset?: number;
     /** Offset from the bottom of the timeline (e.g., for footers) */
@@ -39,6 +40,7 @@
   }
 
   let {
+    invisible = false,
     timelineTopOffset = 0,
     timelineBottomOffset = 0,
     height = 0,
@@ -509,6 +511,7 @@
   aria-valuemin={toScrollY(0)}
   data-id="scrubber"
   class="absolute inset-e-0 z-1 select-none hover:cursor-row-resize"
+  class:invisible
   style:padding-top={PADDING_TOP + 'px'}
   style:padding-bottom={PADDING_BOTTOM + 'px'}
   style:width

web/src/lib/components/timeline/Timeline.svelte

@@ -13,6 +13,8 @@
   import Skeleton from '$lib/elements/Skeleton.svelte';
   import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
+  import { startViewerTransition } from '$lib/utils/transition-utils';
   import type { TimelineDay } from '$lib/managers/timeline-manager/timeline-day.svelte';
   import { isIntersecting } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
   import type { TimelineMonth } from '$lib/managers/timeline-manager/timeline-month.svelte';
@@ -20,6 +22,7 @@
   import type { TimelineAsset, TimelineManagerOptions, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
   import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
   import { mediaQueryManager } from '$lib/stores/media-query-manager.svelte';
+  import { handlePromiseError } from '$lib/utils';
   import { isAssetViewerRoute, navigate } from '$lib/utils/navigation';
   import { getTimes, type ScrubberListener } from '$lib/utils/timeline-util';
   import { type AlbumResponseDto, type PersonResponseDto, type UserResponseDto } from '@immich/sdk';
@@ -99,6 +102,7 @@
   // Overall scroll percentage through the entire timeline (0-1)
   let timelineScrollPercent: number = $state(0);
   let scrubberWidth = $state(0);
+  let toViewerHeroAssetId = $state<string | null>(null);
 
   const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
   const maxMd = $derived(mediaQueryManager.maxMd);
@@ -207,7 +211,7 @@
         timelineManager.viewportWidth = rect.width;
       }
     }
-    const scrollTarget = assetViewerManager.gridScrollTarget?.at;
+    const scrollTarget = getScrollTarget();
     let scrolled = false;
     if (scrollTarget) {
       scrolled = await scrollAndLoadAsset(scrollTarget);
@@ -219,7 +223,7 @@
       await tick();
       focusAsset(scrollTarget);
     }
-    invisible = false;
+    invisible = isAssetViewerRoute(page) ? true : false;
   };
 
   // note: only modified once in afterNavigate()
@@ -237,10 +241,13 @@
     hasNavigatedToOrFromAssetViewer = isNavigatingToAssetViewer !== isNavigatingFromAssetViewer;
   });
 
+  const getScrollTarget = () => {
+    return assetViewerManager.gridScrollTarget?.at ?? page.params.assetId ?? null;
+  };
   // afterNavigate is only called after navigation to a new URL, {complete} will resolve
   // after successful navigation.
   afterNavigate(({ complete }) => {
-    void complete.finally(() => {
+    void complete.finally(async () => {
       const isAssetViewerPage = isAssetViewerRoute(page);
 
       // Set initial load state only once - if initialLoadWasAssetViewer is null, then
@@ -251,6 +258,12 @@
       }
 
       void scrollAfterNavigate();
+      if (!isAssetViewerPage) {
+        const scrollTarget = getScrollTarget();
+        await tick();
+
+        eventManager.emit('TimelineLoaded', { id: scrollTarget });
+      }
     });
   });
 
@@ -258,7 +271,7 @@
   // note: don't throttle, debounch, or otherwise do this function async - it causes flicker
 
   onMount(() => {
-    if (!enableRouting) {
+    if (!enableRouting && !isAssetViewerRoute(page)) {
       invisible = false;
     }
   });
@@ -545,7 +558,7 @@
     assetInteraction.selectAll = timelineManager.assetCount === assetInteraction.assets.length;
   };
 
-  const _onClick = (
+  const defaultThumbnailClick = (
     timelineManager: TimelineManager,
     assets: TimelineAsset[],
     groupTitle: string,
@@ -557,6 +570,27 @@
     }
     void navigate({ targetRoute: 'current', assetId: asset.id });
   };
+
+  const handleThumbnailClick = (asset: TimelineAsset, timelineDay: TimelineDay) => {
+    if (typeof onThumbnailClick === 'function' || isSelectionMode || assetInteraction.selectionActive) {
+      if (typeof onThumbnailClick === 'function') {
+        onThumbnailClick(asset, timelineManager, timelineDay, defaultThumbnailClick);
+      } else {
+        defaultThumbnailClick(timelineManager, timelineDay.getAssets(), timelineDay.groupTitle, asset);
+      }
+      return;
+    }
+
+    const openViewer = () => void navigate({ targetRoute: 'current', assetId: asset.id });
+    handlePromiseError(
+      startViewerTransition(
+        asset.id,
+        openViewer,
+        (id) => (toViewerHeroAssetId = id),
+        () => (toViewerHeroAssetId = null),
+      ),
+    );
+  };
 </script>
 
 <svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
@@ -587,6 +621,7 @@
 {#if timelineManager.months.length > 0}
   <Scrubber
     {timelineManager}
+    {invisible}
     height={timelineManager.viewportHeight}
     timelineTopOffset={timelineManager.topSectionHeight}
     timelineBottomOffset={timelineManager.bottomSectionHeight}
@@ -618,6 +653,7 @@
   id="asset-grid"
   class={['h-full overflow-y-auto outline-none scrollbar-hidden', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
   style:margin-inline-end={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
+  data-initialized={timelineManager.isInitialized || undefined}
   tabindex="-1"
   bind:clientHeight={timelineManager.viewportHeight}
   bind:clientWidth={timelineManager.viewportWidth}
@@ -666,11 +702,11 @@
           style:width="100%"
         >
           <Month
+            {toViewerHeroAssetId}
             {assetInteraction}
             {customThumbnailLayout}
             {singleSelect}
             {timelineMonth}
-            manager={timelineManager}
             onTimelineDaySelect={handleGroupSelect}
           >
             {#snippet thumbnail({ asset, position, timelineDay, groupIndex })}
@@ -684,13 +720,7 @@
                 {asset}
                 {albumUsers}
                 {groupIndex}
-                onClick={(asset) => {
-                  if (typeof onThumbnailClick === 'function') {
-                    onThumbnailClick(asset, timelineManager, timelineDay, _onClick);
-                  } else {
-                    _onClick(timelineManager, timelineDay.getAssets(), timelineDay.groupTitle, asset);
-                  }
-                }}
+                onClick={(asset) => handleThumbnailClick(asset, timelineDay)}
                 onSelect={() => {
                   if (isSelectionMode || assetInteraction.selectionActive) {
                     assetSelectHandler(timelineManager, asset, timelineDay.getAssets(), timelineDay.groupTitle);

web/src/lib/components/timeline/TimelineAssetViewer.svelte

@@ -5,6 +5,7 @@
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { websocketEvents } from '$lib/stores/websocket';
@@ -97,6 +98,14 @@
   };
 
   const handleClose = async (assetId: string) => {
+    if (viewTransitionManager.isSupported()) {
+      const transitionReady = assetViewerManager.untilNext('ViewerCloseTransitionReady', {
+        signal: AbortSignal.timeout(200),
+      });
+      assetViewerManager.emit('ViewerCloseTransition', { id: assetId });
+      await transitionReady;
+    }
+
     invisible = true;
     assetViewerManager.gridScrollTarget = { at: assetId };
     await navigate({

web/src/lib/managers/ViewTransitionManager.svelte.spec.ts

@@ -0,0 +1,327 @@
+import { ViewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
+
+function mockViewTransition({
+  updateCallbackDone = Promise.resolve(),
+  finished = Promise.resolve(),
+  ready = Promise.resolve(),
+  skipTransition = vi.fn(),
+}: {
+  updateCallbackDone?: Promise<void>;
+  finished?: Promise<void>;
+  ready?: Promise<void>;
+  skipTransition?: ReturnType<typeof vi.fn>;
+} = {}) {
+  // eslint-disable-next-line tscompat/tscompat
+  document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
+    const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
+    void updateFn();
+    return { updateCallbackDone, finished, ready, skipTransition };
+  });
+}
+
+describe('ViewTransitionManager', () => {
+  let manager: ViewTransitionManager;
+
+  beforeEach(() => {
+    manager = new ViewTransitionManager();
+  });
+
+  afterEach(() => {
+    delete (document as Partial<typeof document> & { startViewTransition?: unknown }).startViewTransition;
+  });
+
+  describe('when View Transition API is not supported', () => {
+    it('should still call performUpdate', async () => {
+      const performUpdate = vi.fn().mockResolvedValue(undefined);
+
+      await manager.startTransition({ performUpdate });
+
+      expect(performUpdate).toHaveBeenCalledOnce();
+    });
+
+    it('should call onFinished after performUpdate', async () => {
+      const callOrder: string[] = [];
+      const performUpdate = vi.fn().mockImplementation(() => {
+        callOrder.push('performUpdate');
+      });
+      const onFinished = vi.fn().mockImplementation(() => {
+        callOrder.push('onFinished');
+      });
+
+      await manager.startTransition({ performUpdate, onFinished });
+
+      expect(onFinished).toHaveBeenCalledOnce();
+      expect(callOrder).toEqual(['performUpdate', 'onFinished']);
+    });
+
+    it('should not call prepareOldSnapshot or prepareNewSnapshot', async () => {
+      const prepareOldSnapshot = vi.fn();
+      const prepareNewSnapshot = vi.fn();
+      const performUpdate = vi.fn().mockResolvedValue(undefined);
+
+      await manager.startTransition({ performUpdate, prepareOldSnapshot, prepareNewSnapshot });
+
+      expect(prepareOldSnapshot).not.toHaveBeenCalled();
+      expect(prepareNewSnapshot).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when a transition is already active', () => {
+    it('should skip the first transition and run the second', async () => {
+      let resolveFirstUpdate!: () => void;
+      const firstUpdateCallbackDone = new Promise<void>((resolve) => {
+        resolveFirstUpdate = resolve;
+      });
+      const firstFinished = new Promise<void>(() => {});
+      const firstSkipTransition = vi.fn();
+
+      let callCount = 0;
+      // eslint-disable-next-line tscompat/tscompat
+      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
+        callCount++;
+        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
+        void updateFn();
+        if (callCount === 1) {
+          return {
+            updateCallbackDone: firstUpdateCallbackDone,
+            finished: firstFinished,
+            ready: Promise.resolve(),
+            skipTransition: firstSkipTransition,
+          };
+        }
+        return {
+          updateCallbackDone: Promise.resolve(),
+          finished: Promise.resolve(),
+          ready: Promise.resolve(),
+          skipTransition: vi.fn(),
+        };
+      });
+
+      const secondPerformUpdate = vi.fn().mockResolvedValue(undefined);
+
+      const firstPromise = manager.startTransition({
+        performUpdate: async () => {},
+      });
+
+      await new Promise<void>((r) => queueMicrotask(r));
+
+      // While first is active, start a second — should skip the first and proceed
+      await manager.startTransition({ performUpdate: secondPerformUpdate });
+      expect(firstSkipTransition).toHaveBeenCalledOnce();
+      expect(secondPerformUpdate).toHaveBeenCalledOnce();
+
+      resolveFirstUpdate();
+      await firstPromise;
+    });
+  });
+
+  describe('skipTransitions', () => {
+    it('should return false when no transition is active', () => {
+      expect(manager.skipTransitions()).toBe(false);
+    });
+
+    it('should call skipTransition on the active transition and return true', async () => {
+      let resolveFinished!: () => void;
+      const finished = new Promise<void>((resolve) => {
+        resolveFinished = resolve;
+      });
+      let resolveUpdate!: () => void;
+      const updateCallbackDone = new Promise<void>((resolve) => {
+        resolveUpdate = resolve;
+      });
+      const skipTransition = vi.fn();
+
+      mockViewTransition({ updateCallbackDone, finished, skipTransition });
+
+      const promise = manager.startTransition({ performUpdate: async () => {} });
+      await new Promise<void>((r) => queueMicrotask(r));
+
+      const skipped = manager.skipTransitions();
+      expect(skipped).toBe(true);
+      expect(skipTransition).toHaveBeenCalledOnce();
+
+      resolveUpdate();
+      resolveFinished();
+      await promise;
+    });
+
+    it('should allow a new transition after skipping', async () => {
+      let resolveFinished!: () => void;
+      const finished = new Promise<void>((resolve) => {
+        resolveFinished = resolve;
+      });
+      let resolveUpdate!: () => void;
+      const updateCallbackDone = new Promise<void>((resolve) => {
+        resolveUpdate = resolve;
+      });
+
+      mockViewTransition({ updateCallbackDone, finished });
+
+      const promise = manager.startTransition({ performUpdate: async () => {} });
+      await new Promise<void>((r) => queueMicrotask(r));
+
+      manager.skipTransitions();
+      resolveUpdate();
+      resolveFinished();
+      await promise;
+
+      const secondUpdate = vi.fn().mockResolvedValue(undefined);
+      mockViewTransition({ updateCallbackDone: Promise.resolve(), finished: Promise.resolve() });
+
+      await manager.startTransition({ performUpdate: secondUpdate });
+      expect(secondUpdate).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('error handling', () => {
+    it('should propagate error from performUpdate when API is not supported', async () => {
+      const error = new Error('update failed');
+      const performUpdate = vi.fn().mockRejectedValue(error);
+
+      await expect(manager.startTransition({ performUpdate })).rejects.toThrow('update failed');
+    });
+
+    it('should clean up activeViewTransition when performUpdate throws (API supported)', async () => {
+      const error = new Error('update failed');
+      let resolveFinished!: () => void;
+      const finished = new Promise<void>((resolve) => {
+        resolveFinished = resolve;
+      });
+
+      // eslint-disable-next-line tscompat/tscompat
+      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
+        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
+        const updateCallbackDone = updateFn();
+        return { updateCallbackDone, finished, ready: Promise.resolve(), skipTransition: vi.fn() };
+      });
+
+      await expect(manager.startTransition({ performUpdate: () => Promise.reject(error) })).rejects.toThrow(
+        'update failed',
+      );
+
+      resolveFinished();
+      await new Promise<void>((r) => queueMicrotask(r));
+
+      const secondUpdate = vi.fn().mockResolvedValue(undefined);
+      mockViewTransition();
+
+      await manager.startTransition({ performUpdate: secondUpdate });
+      expect(secondUpdate).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('fallback path', () => {
+    it('should fall back to function argument when object argument throws', async () => {
+      const performUpdate = vi.fn().mockResolvedValue(undefined);
+      const prepareNewSnapshot = vi.fn();
+      const finished = Promise.resolve();
+      const updateCallbackDone = Promise.resolve();
+
+      let callCount = 0;
+      // eslint-disable-next-line tscompat/tscompat
+      document.startViewTransition = vi.fn().mockImplementation((arg: unknown) => {
+        callCount++;
+        if (callCount === 1 && typeof arg !== 'function') {
+          throw new TypeError('object form not supported');
+        }
+        const updateFn = typeof arg === 'function' ? arg : (arg as { update: () => Promise<void> }).update;
+        void updateFn();
+        return { updateCallbackDone, finished, ready: Promise.resolve(), skipTransition: vi.fn() };
+      });
+
+      await manager.startTransition({ performUpdate, prepareNewSnapshot, types: ['test'] });
+
+      expect(performUpdate).toHaveBeenCalledOnce();
+      expect(prepareNewSnapshot).toHaveBeenCalledOnce();
+      // eslint-disable-next-line tscompat/tscompat
+      expect(document.startViewTransition).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('abort signal', () => {
+    it('should pass an AbortSignal to performUpdate', async () => {
+      const performUpdate = vi.fn().mockResolvedValue(undefined);
+
+      mockViewTransition();
+
+      await manager.startTransition({ performUpdate });
+
+      expect(performUpdate).toHaveBeenCalledWith(expect.any(AbortSignal));
+    });
+
+    it('should abort the signal when transition.ready rejects', async () => {
+      let capturedSignal: AbortSignal | undefined;
+      let resolveUpdate!: () => void;
+      const updateCallbackDone = new Promise<void>((resolve) => {
+        resolveUpdate = resolve;
+      });
+
+      const readyError = new Error('Transition was aborted because of timeout in DOM update');
+
+      mockViewTransition({
+        updateCallbackDone,
+        finished: Promise.reject(readyError),
+        ready: Promise.reject(readyError),
+      });
+
+      const performUpdate = vi.fn().mockImplementation((signal: AbortSignal) => {
+        capturedSignal = signal;
+        return new Promise<void>((resolve) => {
+          signal.addEventListener('abort', () => resolve(), { once: true });
+        });
+      });
+
+      const promise = manager.startTransition({ performUpdate });
+
+      await new Promise<void>((r) => queueMicrotask(r));
+      await new Promise<void>((r) => queueMicrotask(r));
+
+      expect(capturedSignal?.aborted).toBe(true);
+
+      resolveUpdate();
+      await promise;
+    });
+
+    it('should not abort the signal when transition completes normally', async () => {
+      let capturedSignal: AbortSignal | undefined;
+
+      mockViewTransition();
+
+      await manager.startTransition({
+        performUpdate: (signal) => {
+          capturedSignal = signal;
+          return Promise.resolve();
+        },
+      });
+
+      expect(capturedSignal?.aborted).toBe(false);
+    });
+
+    it('should pass a non-aborted signal in the unsupported fallback path', async () => {
+      let capturedSignal: AbortSignal | undefined;
+
+      await manager.startTransition({
+        performUpdate: (signal) => {
+          capturedSignal = signal;
+          return Promise.resolve();
+        },
+      });
+
+      expect(capturedSignal).toBeInstanceOf(AbortSignal);
+      expect(capturedSignal?.aborted).toBe(false);
+    });
+  });
+
+  describe('isSupported', () => {
+    it('should return false when startViewTransition is not in document', () => {
+      expect(manager.isSupported()).toBe(false);
+    });
+
+    it('should return true when startViewTransition is in document', () => {
+      // eslint-disable-next-line tscompat/tscompat
+      document.startViewTransition = vi.fn();
+
+      expect(manager.isSupported()).toBe(true);
+    });
+  });
+});

web/src/lib/managers/ViewTransitionManager.svelte.ts

@@ -0,0 +1,102 @@
+import { tick } from 'svelte';
+import { BaseEventManager } from '$lib/utils/base-event-manager.svelte';
+
+type TransitionEvents = {
+  PrepareOldSnapshot: [string[]];
+  PrepareNewSnapshot: [string[]];
+  Finished: [string[]];
+};
+
+interface TransitionRequest {
+  types?: string[];
+  prepareOldSnapshot?: () => void;
+  performUpdate: (signal: AbortSignal) => Promise<void>;
+  prepareNewSnapshot?: () => void;
+  onFinished?: () => void;
+}
+
+export class ViewTransitionManager extends BaseEventManager<TransitionEvents> {
+  #activeViewTransition: ViewTransition | null = null;
+  #activeOnFinished: (() => void) | undefined = undefined;
+
+  isSupported() {
+    return 'startViewTransition' in document;
+  }
+
+  skipTransitions() {
+    const skipped = !!this.#activeViewTransition;
+    this.#activeViewTransition?.skipTransition();
+    this.#activeViewTransition = null;
+    const onFinished = this.#activeOnFinished;
+    this.#activeOnFinished = undefined;
+    onFinished?.();
+    return skipped;
+  }
+
+  async startTransition({
+    types,
+    prepareOldSnapshot,
+    performUpdate,
+    prepareNewSnapshot,
+    onFinished,
+  }: TransitionRequest) {
+    if (this.#activeViewTransition) {
+      this.skipTransitions();
+    }
+
+    const resolvedTypes = types ?? [];
+
+    if (!this.isSupported()) {
+      await performUpdate(AbortSignal.timeout(10_000));
+      onFinished?.();
+      return;
+    }
+
+    this.emit('PrepareOldSnapshot', resolvedTypes);
+    prepareOldSnapshot?.();
+    await tick();
+
+    const abortController = new AbortController();
+    const update = async () => {
+      await performUpdate(abortController.signal);
+      this.emit('PrepareNewSnapshot', resolvedTypes);
+      prepareNewSnapshot?.();
+      await tick();
+    };
+
+    let transition: ViewTransition;
+    try {
+      // eslint-disable-next-line tscompat/tscompat
+      transition = document.startViewTransition({ update, types });
+    } catch {
+      // Fallback: browsers supporting VT Level 1 but not Level 2 (object form with types) will throw
+      // eslint-disable-next-line tscompat/tscompat
+      transition = document.startViewTransition(update);
+    }
+
+    this.#activeViewTransition = transition;
+    this.#activeOnFinished = onFinished;
+
+    // eslint-disable-next-line tscompat/tscompat
+    void transition.ready.catch((error: unknown) => {
+      abortController.abort(error);
+    });
+
+    // eslint-disable-next-line tscompat/tscompat
+    void transition.finished
+      .catch(() => {})
+      .finally(() => {
+        if (this.#activeViewTransition === transition) {
+          this.#activeViewTransition = null;
+          this.#activeOnFinished = undefined;
+          this.emit('Finished', resolvedTypes);
+          onFinished?.();
+        }
+      });
+
+    // eslint-disable-next-line tscompat/tscompat
+    await transition.updateCallbackDone;
+  }
+}
+
+export const viewTransitionManager = new ViewTransitionManager();

web/src/lib/managers/asset-viewer-manager.svelte.ts

@@ -34,12 +34,17 @@ export type Events = {
   ZoomChange: [ZoomImageWheelState];
   Copy: [];
   FaceEditModeChange: [boolean];
+  ViewerOpenTransitionReady: [];
+  ViewerOpenTransition: [];
+  ViewerCloseTransition: [{ id: string }];
+  ViewerCloseTransitionReady: [];
 };
 
 class AssetViewerManager extends BaseEventManager<Events> {
   #zoomState = $state(createDefaultZoomState());
   #animationFrameId: number | null = null;
 
+  transitionName = $state<string | undefined>();
   imgRef = $state<HTMLImageElement | undefined>();
   imageLoaderStatus = $state<ImageLoaderStatus | undefined>();
   #isImageLoading = $derived.by(() => {

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

@@ -89,6 +89,8 @@ export type Events = {
   ReleaseEvent: [ReleaseEvent];
 
   WebsocketConnect: [];
+
+  TimelineLoaded: [{ id: string | null }];
 };
 
 export const eventManager = new BaseEventManager<Events>();

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

@@ -19,7 +19,7 @@ class LanguageManager {
 
     this.rtl = item.rtl ?? false;
 
-    document.body.setAttribute('dir', item.rtl ? 'rtl' : 'ltr');
+    document.documentElement.setAttribute('dir', item.rtl ? 'rtl' : 'ltr');
 
     eventManager.emit('LanguageChange', item);
   }

web/src/lib/utils/base-event-manager.svelte.ts

@@ -43,6 +43,50 @@ export class BaseEventManager<Events extends EventsBase> {
     };
   }
 
+  private once<T extends keyof Events>(event: T, callback: EventCallback<Events, T>) {
+    const unsubscribe = this.#onEvent(event, (...args: Events[T]) => {
+      unsubscribe();
+      return callback(...args);
+    });
+    return unsubscribe;
+  }
+
+  untilNext<T extends keyof Events>(
+    event: T,
+    { timeoutMs = 10_000, signal }: { timeoutMs?: number; signal?: AbortSignal } = {},
+  ): Promise<Events[T] extends [] ? void : Events[T][0]> {
+    type Result = Events[T] extends [] ? void : Events[T][0];
+    return new Promise<Result>((resolve, reject) => {
+      let settled = false;
+      const settle = () => {
+        if (settled) {
+          return false;
+        }
+        settled = true;
+        unsubscribe();
+        clearTimeout(timer);
+        signal?.removeEventListener('abort', onAbort);
+        return true;
+      };
+      const unsubscribe = this.once(event, (...args: Events[T]) => {
+        if (settle()) {
+          resolve(args[0] as Result);
+        }
+      });
+      const timer = setTimeout(() => {
+        if (settle()) {
+          reject(new Error(`untilNext('${String(event)}') timed out after ${timeoutMs}ms`));
+        }
+      }, timeoutMs);
+      const onAbort = () => {
+        if (settle()) {
+          resolve(undefined as Result);
+        }
+      };
+      signal?.addEventListener('abort', onAbort, { once: true });
+    });
+  }
+
   emit<T extends keyof Events>(event: T, ...params: Events[T]) {
     const listeners = this.getListeners(event);
     for (const listener of listeners) {

web/src/lib/utils/transition-utils.ts

@@ -0,0 +1,25 @@
+import { tick } from 'svelte';
+import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
+import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
+
+export async function startViewerTransition(
+  heroAssetId: string,
+  openViewer: () => void,
+  activateHeroAsset: (assetId: string) => void,
+  deactivateHeroAsset: () => void,
+) {
+  await viewTransitionManager.startTransition({
+    types: ['viewer'],
+    prepareOldSnapshot: () => {
+      activateHeroAsset(heroAssetId);
+    },
+    performUpdate: async (signal) => {
+      deactivateHeroAsset();
+      const ready = assetViewerManager.untilNext('ViewerOpenTransitionReady', { signal });
+      openViewer();
+      await ready;
+      assetViewerManager.emit('ViewerOpenTransition');
+      await tick();
+    },
+  });
+}

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),
+  },
 };

web/src/routes/(user)/+layout.svelte

@@ -22,7 +22,7 @@
   });
 </script>
 
-<div class:display-none={assetViewerManager.isViewing}>
+<div class:invisible={assetViewerManager.isViewing}>
   {@render children?.()}
 </div>
 <UploadCover />
@@ -31,7 +31,4 @@
   :root {
     overscroll-behavior: none;
   }
-  .display-none {
-    display: none;
-  }
 </style>