feat: timeline-manager improvement to use AssetResponseDto efficiently

Co-authored-by: Harrison <frith.harry@gmail.com>

docs/docs/administration/reverse-proxy.md

@@ -32,8 +32,6 @@ server {
 
     # enable websockets: http://nginx.org/en/docs/http/websocket.html
     proxy_http_version 1.1;
-    proxy_set_header   Upgrade    $http_upgrade;
-    proxy_set_header   Connection "upgrade";
     proxy_redirect     off;
 
     # set timeout
@@ -43,6 +41,8 @@ server {
 
     location / {
         proxy_pass http://<backend_url>:2283;
+        proxy_set_header   Upgrade    $http_upgrade;
+        proxy_set_header   Connection "upgrade";
     }
 
     # useful when using Let's Encrypt http-01 challenge

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

@@ -37,7 +37,7 @@ class DriftActivitiesPage extends HookConsumerWidget {
       child: Scaffold(
         appBar: AppBar(
           title: Text(album.name),
-          actions: [const LikeActivityActionButton(menuItem: true)],
+          actions: [const LikeActivityActionButton(iconOnly: true)],
           actionsPadding: const EdgeInsets.only(right: 8),
         ),
         body: activities.widgetWhen(

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

@@ -21,12 +21,34 @@ import 'package:immich_mobile/presentation/widgets/bottom_sheet/base_bottom_shee
 
 enum AddToMenuItem { album, archive, unarchive, lockedFolder }
 
-class AddActionButton extends ConsumerWidget {
+class AddActionButton extends ConsumerStatefulWidget {
   const AddActionButton({super.key});
 
-  Future<void> _showAddOptions(BuildContext context, WidgetRef ref) async {
+  @override
+  ConsumerState<AddActionButton> createState() => _AddActionButtonState();
+}
+
+class _AddActionButtonState extends ConsumerState<AddActionButton> {
+  void _handleMenuSelection(AddToMenuItem selected) {
+    switch (selected) {
+      case AddToMenuItem.album:
+        _openAlbumSelector();
+        break;
+      case AddToMenuItem.archive:
+        performArchiveAction(context, ref, source: ActionSource.viewer);
+        break;
+      case AddToMenuItem.unarchive:
+        performUnArchiveAction(context, ref, source: ActionSource.viewer);
+        break;
+      case AddToMenuItem.lockedFolder:
+        performMoveToLockFolderAction(context, ref, source: ActionSource.viewer);
+        break;
+    }
+  }
+
+  List<Widget> _buildMenuChildren() {
     final asset = ref.read(currentAssetNotifier);
-    if (asset == null) return;
+    if (asset == null) return [];
 
     final user = ref.read(currentUserProvider);
     final isOwner = asset is RemoteAsset && asset.ownerId == user?.id;
@@ -35,93 +57,57 @@ class AddActionButton extends ConsumerWidget {
     final hasRemote = asset is RemoteAsset;
     final showArchive = isOwner && !isInLockedView && hasRemote && !isArchived;
     final showUnarchive = isOwner && !isInLockedView && hasRemote && isArchived;
-    final menuItemHeight = 30.0;
 
-    final List<PopupMenuEntry<AddToMenuItem>> items = [
-      PopupMenuItem(
-        enabled: false,
-        textStyle: context.textTheme.labelMedium,
-        height: 40,
-        child: Text("add_to_bottom_bar".tr()),
+    return [
+      Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        child: Text("add_to_bottom_bar".tr(), style: context.textTheme.labelMedium),
       ),
-      PopupMenuItem(
-        height: menuItemHeight,
-        value: AddToMenuItem.album,
-        child: ListTile(leading: const Icon(Icons.photo_album_outlined), title: Text("album".tr())),
+      BaseActionButton(
+        iconData: Icons.photo_album_outlined,
+        label: "album".tr(),
+        menuItem: true,
+        onPressed: () => _handleMenuSelection(AddToMenuItem.album),
       ),
-      const PopupMenuDivider(),
-      PopupMenuItem(enabled: false, textStyle: context.textTheme.labelMedium, height: 40, child: Text("move_to".tr())),
+
       if (isOwner) ...[
+        const PopupMenuDivider(),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          child: Text("move_to".tr(), style: context.textTheme.labelMedium),
+        ),
         if (showArchive)
-          PopupMenuItem(
-            height: menuItemHeight,
-            value: AddToMenuItem.archive,
-            child: ListTile(leading: const Icon(Icons.archive_outlined), title: Text("archive".tr())),
+          BaseActionButton(
+            iconData: Icons.archive_outlined,
+            label: "archive".tr(),
+            menuItem: true,
+            onPressed: () => _handleMenuSelection(AddToMenuItem.archive),
           ),
         if (showUnarchive)
-          PopupMenuItem(
-            height: menuItemHeight,
-            value: AddToMenuItem.unarchive,
-            child: ListTile(leading: const Icon(Icons.unarchive_outlined), title: Text("unarchive".tr())),
+          BaseActionButton(
+            iconData: Icons.unarchive_outlined,
+            label: "unarchive".tr(),
+            menuItem: true,
+            onPressed: () => _handleMenuSelection(AddToMenuItem.unarchive),
           ),
-        PopupMenuItem(
-          height: menuItemHeight,
-          value: AddToMenuItem.lockedFolder,
-          child: ListTile(leading: const Icon(Icons.lock_outline), title: Text("locked_folder".tr())),
+        BaseActionButton(
+          iconData: Icons.lock_outline,
+          label: "locked_folder".tr(),
+          menuItem: true,
+          onPressed: () => _handleMenuSelection(AddToMenuItem.lockedFolder),
         ),
       ],
     ];
-
-    final AddToMenuItem? selected = await showMenu<AddToMenuItem>(
-      context: context,
-      color: context.themeData.scaffoldBackgroundColor,
-      position: _menuPosition(context),
-      items: items,
-      popUpAnimationStyle: AnimationStyle.noAnimation,
-    );
-
-    if (selected == null) {
-      return;
-    }
-
-    switch (selected) {
-      case AddToMenuItem.album:
-        _openAlbumSelector(context, ref);
-        break;
-      case AddToMenuItem.archive:
-        await performArchiveAction(context, ref, source: ActionSource.viewer);
-        break;
-      case AddToMenuItem.unarchive:
-        await performUnArchiveAction(context, ref, source: ActionSource.viewer);
-        break;
-      case AddToMenuItem.lockedFolder:
-        await performMoveToLockFolderAction(context, ref, source: ActionSource.viewer);
-        break;
-    }
   }
 
-  RelativeRect _menuPosition(BuildContext context) {
-    final renderObject = context.findRenderObject();
-    if (renderObject is! RenderBox) {
-      return RelativeRect.fill;
-    }
-
-    final size = renderObject.size;
-    final position = renderObject.localToGlobal(Offset.zero);
-
-    return RelativeRect.fromLTRB(position.dx, position.dy - size.height - 200, position.dx + size.width, position.dy);
-  }
-
-  void _openAlbumSelector(BuildContext context, WidgetRef ref) {
+  void _openAlbumSelector() {
     final currentAsset = ref.read(currentAssetNotifier);
     if (currentAsset == null) {
       ImmichToast.show(context: context, msg: "Cannot load asset information.", toastType: ToastType.error);
       return;
     }
 
-    final List<Widget> slivers = [
-      AlbumSelector(onAlbumSelected: (album) => _addCurrentAssetToAlbum(context, ref, album)),
-    ];
+    final List<Widget> slivers = [AlbumSelector(onAlbumSelected: (album) => _addCurrentAssetToAlbum(album))];
 
     showModalBottomSheet(
       context: context,
@@ -141,7 +127,7 @@ class AddActionButton extends ConsumerWidget {
     );
   }
 
-  Future<void> _addCurrentAssetToAlbum(BuildContext context, WidgetRef ref, RemoteAlbum album) async {
+  Future<void> _addCurrentAssetToAlbum(RemoteAlbum album) async {
     final latest = ref.read(currentAssetNotifier);
 
     if (latest == null) {
@@ -174,17 +160,27 @@ class AddActionButton extends ConsumerWidget {
   }
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  Widget build(BuildContext context) {
     final asset = ref.watch(currentAssetNotifier);
     if (asset == null) {
       return const SizedBox.shrink();
     }
-    return Builder(
-      builder: (buttonContext) {
+
+    return MenuAnchor(
+      consumeOutsideTap: true,
+      style: MenuStyle(
+        backgroundColor: WidgetStatePropertyAll(context.themeData.scaffoldBackgroundColor),
+        elevation: const WidgetStatePropertyAll(4),
+        shape: const WidgetStatePropertyAll(
+          RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
+        ),
+      ),
+      menuChildren: _buildMenuChildren(),
+      builder: (context, controller, child) {
         return BaseActionButton(
           iconData: Icons.add,
           label: "add_to_bottom_bar".tr(),
-          onPressed: () => _showAddOptions(buttonContext, ref),
+          onPressed: () => controller.isOpen ? controller.close() : controller.open(),
         );
       },
     );

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

@@ -11,6 +11,7 @@ class BaseActionButton extends StatelessWidget {
     this.onLongPressed,
     this.maxWidth = 90.0,
     this.minWidth,
+    this.iconOnly = false,
     this.menuItem = false,
   });
 
@@ -19,6 +20,11 @@ class BaseActionButton extends StatelessWidget {
   final Color? iconColor;
   final double maxWidth;
   final double? minWidth;
+
+  /// When true, renders only an IconButton without text label
+  final bool iconOnly;
+
+  /// When true, renders as a MenuItemButton for use in MenuAnchor menus
   final bool menuItem;
   final void Function()? onPressed;
   final void Function()? onLongPressed;
@@ -31,13 +37,26 @@ class BaseActionButton extends StatelessWidget {
     final iconColor = this.iconColor ?? iconTheme.color ?? context.themeData.iconTheme.color;
     final textColor = context.themeData.textTheme.labelLarge?.color;
 
-    if (menuItem) {
+    if (iconOnly) {
       return IconButton(
         onPressed: onPressed,
         icon: Icon(iconData, size: iconSize, color: iconColor),
       );
     }
 
+    if (menuItem) {
+      final theme = context.themeData;
+      final effectiveStyle = theme.textTheme.labelLarge;
+      final effectiveIconColor = iconColor ?? theme.iconTheme.color ?? theme.colorScheme.onSurfaceVariant;
+
+      return MenuItemButton(
+        style: MenuItemButton.styleFrom(padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12)),
+        leadingIcon: Icon(iconData, color: effectiveIconColor, size: 20),
+        onPressed: onPressed,
+        child: Text(label, style: effectiveStyle),
+      );
+    }
+
     return ConstrainedBox(
       constraints: BoxConstraints(maxWidth: maxWidth),
       child: MaterialButton(

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

@@ -7,8 +7,9 @@ import 'package:immich_mobile/providers/cast.provider.dart';
 import 'package:immich_mobile/widgets/asset_viewer/cast_dialog.dart';
 
 class CastActionButton extends ConsumerWidget {
-  const CastActionButton({super.key, this.menuItem = true});
+  const CastActionButton({super.key, this.iconOnly = true, this.menuItem = false});
 
+  final bool iconOnly;
   final bool menuItem;
 
   @override
@@ -22,6 +23,7 @@ class CastActionButton extends ConsumerWidget {
       onPressed: () {
         showDialog(context: context, builder: (context) => const CastDialog());
       },
+      iconOnly: iconOnly,
       menuItem: menuItem,
     );
   }

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

@@ -10,8 +10,9 @@ import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
 
 class DownloadActionButton extends ConsumerWidget {
   final ActionSource source;
+  final bool iconOnly;
   final bool menuItem;
-  const DownloadActionButton({super.key, required this.source, this.menuItem = false});
+  const DownloadActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
 
   void _onTap(BuildContext context, WidgetRef ref, BackgroundSyncManager backgroundSyncManager) async {
     if (!context.mounted) {
@@ -38,6 +39,7 @@ class DownloadActionButton extends ConsumerWidget {
       iconData: Icons.download,
       maxWidth: 95,
       label: "download".t(context: context),
+      iconOnly: iconOnly,
       menuItem: menuItem,
       onPressed: () => _onTap(context, ref, backgroundManager),
     );

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

@@ -10,9 +10,10 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 
 class FavoriteActionButton extends ConsumerWidget {
   final ActionSource source;
+  final bool iconOnly;
   final bool menuItem;
 
-  const FavoriteActionButton({super.key, required this.source, this.menuItem = false});
+  const FavoriteActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
 
   void _onTap(BuildContext context, WidgetRef ref) async {
     if (!context.mounted) {
@@ -44,6 +45,7 @@ class FavoriteActionButton extends ConsumerWidget {
     return BaseActionButton(
       iconData: Icons.favorite_border_rounded,
       label: "favorite".t(context: context),
+      iconOnly: iconOnly,
       menuItem: menuItem,
       onPressed: () => _onTap(context, ref),
     );

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

@@ -12,8 +12,9 @@ import 'package:immich_mobile/providers/infrastructure/current_album.provider.da
 import 'package:immich_mobile/providers/user.provider.dart';
 
 class LikeActivityActionButton extends ConsumerWidget {
-  const LikeActivityActionButton({super.key, this.menuItem = false});
+  const LikeActivityActionButton({super.key, this.iconOnly = false, this.menuItem = false});
 
+  final bool iconOnly;
   final bool menuItem;
 
   @override
@@ -49,6 +50,7 @@ class LikeActivityActionButton extends ConsumerWidget {
           iconData: liked != null ? Icons.favorite : Icons.favorite_border,
           label: "like".t(context: context),
           onPressed: () => onTap(liked),
+          iconOnly: iconOnly,
           menuItem: menuItem,
         );
       },
@@ -57,6 +59,7 @@ class LikeActivityActionButton extends ConsumerWidget {
       loading: () => BaseActionButton(
         iconData: Icons.favorite_border,
         label: "like".t(context: context),
+        iconOnly: iconOnly,
         menuItem: menuItem,
       ),
       error: (error, stack) => Text('error_saving_image'.tr(args: [error.toString()])),

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

@@ -5,8 +5,9 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_bu
 import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
 
 class MotionPhotoActionButton extends ConsumerWidget {
-  const MotionPhotoActionButton({super.key, this.menuItem = true});
+  const MotionPhotoActionButton({super.key, this.iconOnly = true, this.menuItem = false});
 
+  final bool iconOnly;
   final bool menuItem;
 
   @override
@@ -17,6 +18,7 @@ class MotionPhotoActionButton extends ConsumerWidget {
       iconData: isPlaying ? Icons.motion_photos_pause_outlined : Icons.play_circle_outline_rounded,
       label: "play_motion_photo".t(context: context),
       onPressed: ref.read(isPlayingMotionVideoProvider.notifier).toggle,
+      iconOnly: iconOnly,
       menuItem: menuItem,
     );
   }

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

@@ -10,9 +10,10 @@ import 'package:immich_mobile/widgets/common/immich_toast.dart';
 
 class UnFavoriteActionButton extends ConsumerWidget {
   final ActionSource source;
+  final bool iconOnly;
   final bool menuItem;
 
-  const UnFavoriteActionButton({super.key, required this.source, this.menuItem = false});
+  const UnFavoriteActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
 
   void _onTap(BuildContext context, WidgetRef ref) async {
     if (!context.mounted) {
@@ -45,6 +46,7 @@ class UnFavoriteActionButton extends ConsumerWidget {
       iconData: Icons.favorite_rounded,
       label: "unfavorite".t(context: context),
       onPressed: () => _onTap(context, ref),
+      iconOnly: iconOnly,
       menuItem: menuItem,
     );
   }

mobile/lib/presentation/widgets/asset_viewer/top_app_bar.widget.dart

@@ -14,6 +14,7 @@ import 'package:immich_mobile/presentation/widgets/action_buttons/favorite_actio
 import 'package:immich_mobile/presentation/widgets/action_buttons/motion_photo_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unfavorite_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/presentation/widgets/asset_viewer/viewer_kebab_menu.widget.dart';
 import 'package:immich_mobile/providers/activity.provider.dart';
 import 'package:immich_mobile/providers/cast.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
@@ -65,8 +66,8 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
     final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
 
     final actions = <Widget>[
-      if (asset.isRemoteOnly) const DownloadActionButton(source: ActionSource.viewer, menuItem: true),
-      if (isCasting || (asset.hasRemote)) const CastActionButton(menuItem: true),
+      if (asset.isRemoteOnly) const DownloadActionButton(source: ActionSource.viewer, iconOnly: true),
+      if (isCasting || (asset.hasRemote)) const CastActionButton(iconOnly: true),
       if (album != null && album.isActivityEnabled && album.isShared)
         IconButton(
           icon: const Icon(Icons.chat_outlined),
@@ -85,16 +86,16 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
           tooltip: 'view_in_timeline'.t(context: context),
         ),
       if (asset.hasRemote && isOwner && !asset.isFavorite)
-        const FavoriteActionButton(source: ActionSource.viewer, menuItem: true),
+        const FavoriteActionButton(source: ActionSource.viewer, iconOnly: true),
       if (asset.hasRemote && isOwner && asset.isFavorite)
-        const UnFavoriteActionButton(source: ActionSource.viewer, menuItem: true),
-      if (asset.isMotionPhoto) const MotionPhotoActionButton(menuItem: true),
-      const _KebabMenu(),
+        const UnFavoriteActionButton(source: ActionSource.viewer, iconOnly: true),
+      if (asset.isMotionPhoto) const MotionPhotoActionButton(iconOnly: true),
+      const ViewerKebabMenu(),
     ];
 
     final lockedViewActions = <Widget>[
-      if (isCasting || (asset.hasRemote)) const CastActionButton(menuItem: true),
-      const _KebabMenu(),
+      if (isCasting || (asset.hasRemote)) const CastActionButton(iconOnly: true),
+      const ViewerKebabMenu(),
     ];
 
     return IgnorePointer(
@@ -122,20 +123,6 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
   Size get preferredSize => const Size.fromHeight(60.0);
 }
 
-class _KebabMenu extends ConsumerWidget {
-  const _KebabMenu();
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return IconButton(
-      onPressed: () {
-        EventStream.shared.emit(const ViewerOpenBottomSheetEvent());
-      },
-      icon: const Icon(Icons.more_vert_rounded),
-    );
-  }
-}
-
 class _AppBarBackButton extends ConsumerWidget {
   const _AppBarBackButton();
 

mobile/lib/presentation/widgets/asset_viewer/viewer_kebab_menu.widget.dart

@@ -0,0 +1,47 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/domain/models/events.model.dart';
+import 'package:immich_mobile/domain/utils/event_stream.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
+
+class ViewerKebabMenu extends ConsumerWidget {
+  const ViewerKebabMenu({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final asset = ref.watch(currentAssetNotifier);
+    if (asset == null) {
+      return const SizedBox.shrink();
+    }
+
+    final menuChildren = <Widget>[
+      BaseActionButton(
+        label: 'about'.tr(),
+        iconData: Icons.info_outline,
+        menuItem: true,
+        onPressed: () => EventStream.shared.emit(const ViewerOpenBottomSheetEvent()),
+      ),
+    ];
+
+    return MenuAnchor(
+      consumeOutsideTap: true,
+      style: MenuStyle(
+        backgroundColor: WidgetStatePropertyAll(context.themeData.scaffoldBackgroundColor),
+        elevation: const WidgetStatePropertyAll(4),
+        shape: const WidgetStatePropertyAll(
+          RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
+        ),
+      ),
+      menuChildren: menuChildren,
+      builder: (context, controller, child) {
+        return IconButton(
+          icon: const Icon(Icons.more_vert_rounded),
+          onPressed: () => controller.isOpen ? controller.close() : controller.open(),
+        );
+      },
+    );
+  }
+}

mobile/lib/routing/router.dart

@@ -167,7 +167,7 @@ class AppRouter extends RootStackRouter {
     AutoRoute(page: LoginRoute.page, guards: [_duplicateGuard]),
     AutoRoute(page: ChangePasswordRoute.page),
     AutoRoute(page: SearchRoute.page, guards: [_authGuard, _duplicateGuard], maintainState: false),
-    CustomRoute(
+    AutoRoute(
       page: TabControllerRoute.page,
       guards: [_authGuard, _duplicateGuard],
       children: [
@@ -176,9 +176,8 @@ class AppRouter extends RootStackRouter {
         AutoRoute(page: LibraryRoute.page, guards: [_authGuard, _duplicateGuard]),
         AutoRoute(page: AlbumsRoute.page, guards: [_authGuard, _duplicateGuard]),
       ],
-      transitionsBuilder: TransitionsBuilders.fadeIn,
     ),
-    CustomRoute(
+    AutoRoute(
       page: TabShellRoute.page,
       guards: [_authGuard, _duplicateGuard],
       children: [
@@ -187,7 +186,6 @@ class AppRouter extends RootStackRouter {
         AutoRoute(page: DriftLibraryRoute.page, guards: [_authGuard, _duplicateGuard]),
         AutoRoute(page: DriftAlbumsRoute.page, guards: [_authGuard, _duplicateGuard]),
       ],
-      transitionsBuilder: TransitionsBuilders.fadeIn,
     ),
     CustomRoute(
       page: GalleryViewerRoute.page,

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

@@ -188,7 +188,7 @@
       // the performance benefits of deferred layouts while still supporting deep linking
       // to assets at the end of the timeline.
       timelineManager.isScrollingOnLoad = true;
-      const monthGroup = await timelineManager.findMonthGroupForAsset(assetId);
+      const monthGroup = await timelineManager.findMonthGroupForAsset({ id: assetId });
       if (!monthGroup) {
         return false;
       }

web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts

@@ -1,5 +1,5 @@
 import { plainDateTimeCompare, type TimelineYearMonth } from '$lib/utils/timeline-util';
-import { AssetOrder } from '@immich/sdk';
+import { AssetOrder, type AssetResponseDto } from '@immich/sdk';
 import { DateTime } from 'luxon';
 import type { MonthGroup } from '../month-group.svelte';
 import { TimelineManager } from '../timeline-manager.svelte';
@@ -7,12 +7,16 @@ import type { AssetDescriptor, Direction, TimelineAsset } from '../types';
 
 export async function getAssetWithOffset(
   timelineManager: TimelineManager,
-  assetDescriptor: AssetDescriptor,
+  assetDescriptor: AssetDescriptor | AssetResponseDto,
   interval: 'asset' | 'day' | 'month' | 'year' = 'asset',
   direction: Direction,
 ): Promise<TimelineAsset | undefined> {
-  const { asset, monthGroup } = findMonthGroupForAsset(timelineManager, assetDescriptor.id) ?? {};
-  if (!monthGroup || !asset) {
+  const monthGroup = await timelineManager.findMonthGroupForAsset(assetDescriptor);
+  if (!monthGroup) {
+    return;
+  }
+  const asset = monthGroup.findAssetById(assetDescriptor);
+  if (!asset) {
     return;
   }
 

web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts

@@ -524,6 +524,7 @@ describe('TimelineManager', () => {
         { count: 3, timeBucket: '2024-01-01T00:00:00.000Z' },
       ]);
       sdkMock.getTimeBucket.mockImplementation(({ timeBucket }) => Promise.resolve(bucketAssetsResponse[timeBucket]));
+      sdkMock.getAssetInfo.mockRejectedValue(new Error('Asset not found'));
       await timelineManager.updateViewport({ width: 1588, height: 1000 });
     });
 

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

@@ -16,12 +16,13 @@ import { WebsocketSupport } from '$lib/managers/timeline-manager/internal/websoc
 import { CancellableTask } from '$lib/utils/cancellable-task';
 import { PersistedLocalStorage } from '$lib/utils/persisted';
 import {
+  isAssetResponseDto,
   setDifference,
   toTimelineAsset,
   type TimelineDateTime,
   type TimelineYearMonth,
 } from '$lib/utils/timeline-util';
-import { AssetOrder, getAssetInfo, getTimeBuckets } from '@immich/sdk';
+import { AssetOrder, getAssetInfo, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
 import { clamp, isEqual } from 'lodash-es';
 import { SvelteDate, SvelteSet } from 'svelte/reactivity';
 import { DayGroup } from './day-group.svelte';
@@ -343,27 +344,30 @@ export class TimelineManager extends VirtualScrollManager {
     this.addAssetsUpsertSegments([...notExcluded]);
   }
 
-  async findMonthGroupForAsset(id: string) {
+  async findMonthGroupForAsset(asset: AssetDescriptor | AssetResponseDto) {
     if (!this.isInitialized) {
       await this.initTask.waitUntilCompletion();
     }
 
+    const { id } = asset;
     let { monthGroup } = findMonthGroupForAssetUtil(this, id) ?? {};
     if (monthGroup) {
       return monthGroup;
     }
 
-    const response = await getAssetInfo({ ...authManager.params, id }).catch(() => null);
+    const response = isAssetResponseDto(asset)
+      ? asset
+      : await getAssetInfo({ ...authManager.params, id }).catch(() => null);
     if (!response) {
       return;
     }
 
-    const asset = toTimelineAsset(response);
-    if (!asset || this.isExcluded(asset)) {
+    const timelineAsset = toTimelineAsset(response);
+    if (this.isExcluded(timelineAsset)) {
       return;
     }
 
-    monthGroup = await this.#loadMonthGroupAtTime(asset.localDateTime, { cancelable: false });
+    monthGroup = await this.#loadMonthGroupAtTime(timelineAsset.localDateTime, { cancelable: false });
     if (monthGroup?.findAssetById({ id })) {
       return monthGroup;
     }
@@ -532,14 +536,14 @@ export class TimelineManager extends VirtualScrollManager {
   }
 
   async getLaterAsset(
-    assetDescriptor: AssetDescriptor,
+    assetDescriptor: AssetDescriptor | AssetResponseDto,
     interval: 'asset' | 'day' | 'month' | 'year' = 'asset',
   ): Promise<TimelineAsset | undefined> {
     return await getAssetWithOffset(this, assetDescriptor, interval, 'later');
   }
 
   async getEarlierAsset(
-    assetDescriptor: AssetDescriptor,
+    assetDescriptor: AssetDescriptor | AssetResponseDto,
     interval: 'asset' | 'day' | 'month' | 'year' = 'asset',
   ): Promise<TimelineAsset | undefined> {
     return await getAssetWithOffset(this, assetDescriptor, interval, 'earlier');

web/src/lib/utils/cast/gcast-destination.svelte.ts

@@ -115,17 +115,12 @@ export class GCastDestination implements ICastDestination {
     // build the authenticated media request and send it to the cast device
     const authenticatedUrl = `${mediaUrl}&sessionKey=${sessionKey}`;
     const mediaInfo = new chrome.cast.media.MediaInfo(authenticatedUrl, contentType);
-
-    // Create a queue with a single item and set it to repeat
-    const queueItem = new chrome.cast.media.QueueItem(mediaInfo);
-    const queueLoadRequest = new chrome.cast.media.QueueLoadRequest([queueItem]);
-    queueLoadRequest.repeatMode = chrome.cast.media.RepeatMode.SINGLE;
-
+    const request = new chrome.cast.media.LoadRequest(mediaInfo);
     const successCallback = this.onMediaDiscovered.bind(this, SESSION_DISCOVERY_CAUSE.LOAD_MEDIA);
 
     this.currentUrl = mediaUrl;
 
-    return this.session.queueLoad(queueLoadRequest, successCallback, this.onError.bind(this));
+    return this.session.loadMedia(request, successCallback, this.onError.bind(this));
   }
 
   ///

web/src/lib/utils/timeline-util.ts

@@ -1,4 +1,4 @@
-import type { TimelineAsset, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
+import type { AssetDescriptor, TimelineAsset, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
 import { locale } from '$lib/stores/preferences.store';
 import { getAssetRatio } from '$lib/utils/asset-utils';
 import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
@@ -192,8 +192,13 @@ export const toTimelineAsset = (unknownAsset: AssetResponseDto | TimelineAsset):
   };
 };
 
-export const isTimelineAsset = (unknownAsset: AssetResponseDto | TimelineAsset): unknownAsset is TimelineAsset =>
-  (unknownAsset as TimelineAsset).ratio !== undefined;
+export const isTimelineAsset = (
+  unknownAsset: AssetDescriptor | AssetResponseDto | TimelineAsset,
+): unknownAsset is TimelineAsset => (unknownAsset as TimelineAsset).ratio !== undefined;
+
+export const isAssetResponseDto = (
+  unknownAsset: AssetDescriptor | AssetResponseDto | TimelineAsset,
+): unknownAsset is AssetResponseDto => (unknownAsset as AssetResponseDto).type !== undefined;
 
 export const isTimelineAssets = (assets: AssetResponseDto[] | TimelineAsset[]): assets is TimelineAsset[] =>
   assets.length === 0 || 'ratio' in assets[0];