fix: video thumbnail quality sharing

* chore: better slideshow transition

* chore: tune

* simplify setup

* better default

* fix: correctly zoom alternatively

* lint

e2e/src/specs/server/api/map.e2e-spec.ts

@@ -2,6 +2,7 @@ import { AssetVisibility, LoginResponseDto } from '@immich/sdk';
 import { readFile } from 'node:fs/promises';
 import { basename, join } from 'node:path';
 import { Socket } from 'socket.io-client';
+import { createUserDto } from 'src/fixtures';
 import { errorDto } from 'src/responses';
 import { app, testAssetDir, utils } from 'src/utils';
 import request from 'supertest';
@@ -9,28 +10,48 @@ import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 
 describe('/map', () => {
   let websocket: Socket;
+  let partnerWebsocket: Socket;
   let admin: LoginResponseDto;
+  let partner: LoginResponseDto;
+  let partnerArchivedAssetId: string;
+  let adminArchivedAssetId: string;
 
   beforeAll(async () => {
     await utils.resetDatabase();
     admin = await utils.adminSetup({ onboarding: false });
+    partner = await utils.userSetup(admin.accessToken, createUserDto.user1);
 
     websocket = await utils.connectWebsocket(admin.accessToken);
+    partnerWebsocket = await utils.connectWebsocket(partner.accessToken);
 
-    const files = ['formats/heic/IMG_2682.heic', 'metadata/gps-position/thompson-springs.jpg'];
+    const adminFiles = ['formats/heic/IMG_2682.heic', 'metadata/gps-position/thompson-springs.jpg'];
+    const adminArchivedFile = 'metadata/dates/datetimeoriginal-gps.jpg';
+    const partnerFile = 'metadata/gps-position/thompson-springs.jpg';
     utils.resetEvents();
-    const uploadFile = async (input: string) => {
+    const uploadFile = async (accessToken: string, input: string) => {
       const filepath = join(testAssetDir, input);
-      const { id } = await utils.createAsset(admin.accessToken, {
+      const { id } = await utils.createAsset(accessToken, {
         assetData: { bytes: await readFile(filepath), filename: basename(filepath) },
       });
       await utils.waitForWebsocketEvent({ event: 'assetUpload', id });
+      return id;
     };
-    await Promise.all(files.map((f) => uploadFile(f)));
+    await Promise.all(adminFiles.map((f) => uploadFile(admin.accessToken, f)));
+    [adminArchivedAssetId, partnerArchivedAssetId] = await Promise.all([
+      uploadFile(admin.accessToken, adminArchivedFile),
+      uploadFile(partner.accessToken, partnerFile),
+    ]);
+
+    await Promise.all([
+      utils.archiveAssets(admin.accessToken, [adminArchivedAssetId]),
+      utils.archiveAssets(partner.accessToken, [partnerArchivedAssetId]),
+      utils.createPartner(partner.accessToken, admin.userId),
+    ]);
   });
 
   afterAll(() => {
     utils.disconnectWebsocket(websocket);
+    utils.disconnectWebsocket(partnerWebsocket);
   });
 
   describe('GET /map/markers', () => {
@@ -40,7 +61,6 @@ describe('/map', () => {
       expect(body).toEqual(errorDto.unauthorized);
     });
 
-    // TODO archive one of these assets
     it('should get map markers for all non-archived assets', async () => {
       const { status, body } = await request(app)
         .get('/map/markers')
@@ -69,7 +89,28 @@ describe('/map', () => {
       ]);
     });
 
-    // TODO archive one of these assets
+    it('should not expose partner archived asset locations', async () => {
+      const { status, body } = await request(app)
+        .get('/map/markers')
+        .query({ withPartners: true, isArchived: true })
+        .set('Authorization', `Bearer ${admin.accessToken}`);
+
+      expect(status).toBe(200);
+      const ids = body.map((m: { id: string }) => m.id);
+      expect(ids).not.toContain(partnerArchivedAssetId);
+      expect(ids).toContain(adminArchivedAssetId);
+    });
+
+    it('should include own archived asset locations', async () => {
+      const { status, body } = await request(app)
+        .get('/map/markers')
+        .query({ isArchived: true })
+        .set('Authorization', `Bearer ${admin.accessToken}`);
+
+      expect(status).toBe(200);
+      expect(body.map((m: { id: string }) => m.id)).toContain(adminArchivedAssetId);
+    });
+
     it('should get all map markers', async () => {
       const { status, body } = await request(app)
         .get('/map/markers')

i18n/en_GB.json

@@ -0,0 +1 @@
+{}

mobile/lib/constants/locales.dart

@@ -15,6 +15,7 @@ const Map<String, Locale> locales = {
   'Czech (cs)': Locale('cs'),
   'Danish (da)': Locale('da'),
   'Dutch (nl)': Locale('nl'),
+  'English (United Kingdom) (en_GB)': Locale('en', 'GB'),
   'Estonian (et)': Locale('et'),
   'Filipino (tl)': Locale('tl'),
   'Finnish (fi)': Locale('fi'),

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

@@ -142,7 +142,6 @@ class AppConfig {
             .cleanupCutoffDaysAgo => cleanup.cutoffDaysAgo,
             .cleanupDefaultsInitialized => cleanup.defaultsInitialized,
             .shareFileType => share.fileType,
-            .slideshowTransition => slideshow.transition,
             .slideshowRepeat => slideshow.repeat,
             .slideshowDuration => slideshow.duration,
             .slideshowLook => slideshow.look,
@@ -196,7 +195,6 @@ class AppConfig {
       .cleanupCutoffDaysAgo => copyWith(cleanup: cleanup.copyWith(cutoffDaysAgo: value as int)),
       .cleanupDefaultsInitialized => copyWith(cleanup: cleanup.copyWith(defaultsInitialized: value as bool)),
       .shareFileType => copyWith(share: share.copyWith(fileType: value as ShareAssetType)),
-      .slideshowTransition => copyWith(slideshow: slideshow.copyWith(transition: value as bool)),
       .slideshowRepeat => copyWith(slideshow: slideshow.copyWith(repeat: value as bool)),
       .slideshowDuration => copyWith(slideshow: slideshow.copyWith(duration: value as int)),
       .slideshowLook => copyWith(slideshow: slideshow.copyWith(look: value as SlideshowLook)),

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

@@ -1,48 +1,38 @@
 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.look = SlideshowLook.blurredBackground,
     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,
-  );
+  SlideshowConfig copyWith({bool? repeat, int? duration, SlideshowLook? look, SlideshowDirection? direction}) =>
+      SlideshowConfig(
+        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);
+  int get hashCode => Object.hash(repeat, duration, look, direction);
 
   @override
-  String toString() =>
-      'SlideshowConfig(transition: $transition, repeat: $repeat, duration: $duration, look: $look, direction: $direction)';
+  String toString() => 'SlideshowConfig(repeat: $repeat, duration: $duration, look: $look, direction: $direction)';
 }

mobile/lib/domain/models/settings_key.dart

@@ -70,7 +70,6 @@ enum SettingsKey<T> {
   shareFileType<ShareAssetType>(codec: _EnumCodec(ShareAssetType.values)),
 
   // Slideshow
-  slideshowTransition<bool>(),
   slideshowRepeat<bool>(),
   slideshowDuration<int>(),
   slideshowLook<SlideshowLook>(codec: _EnumCodec(SlideshowLook.values)),

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

@@ -33,7 +33,9 @@ class DriftSlideshowPage extends ConsumerStatefulWidget {
   ConsumerState<DriftSlideshowPage> createState() => _DriftSlideshowPageState();
 }
 
-class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> {
+class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> with SingleTickerProviderStateMixin {
+  static const double _kenBurnsZoom = 0.1;
+
   late SlideshowConfig _config;
   late final PageController _pageController;
   late final Stopwatch _stopwatch;
@@ -43,6 +45,12 @@ class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> {
   bool _paused = false;
   bool _showAppBar = false;
 
+  late final AnimationController _crossfadeController;
+  late final Animation<double> _crossfadeOpacity;
+  int? _crossfadeFromIndex;
+  int? _crossfadeToIndex;
+  int _zoomCycle = 0;
+
   @override
   initState() {
     super.initState();
@@ -50,6 +58,8 @@ class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> {
     final asset = ref.read(assetViewerProvider).currentAsset;
     _index = asset == null ? 0 : widget.timeline.getIndex(asset.heroTag) ?? 0;
     _pageController = PageController(initialPage: _index);
+    _crossfadeController = AnimationController(vsync: this, duration: Durations.extralong2);
+    _crossfadeOpacity = Tween<double>(begin: 1.0, end: 0.0).animate(_crossfadeController);
     _stopwatch = Stopwatch();
     _createTimer();
     _updateNextIndex();
@@ -64,6 +74,7 @@ class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> {
     _timer.cancel();
     _stopwatch.stop();
     _pageController.dispose();
+    _crossfadeController.dispose();
     unawaited(WakelockPlus.disable());
     SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
     super.dispose();
@@ -150,11 +161,64 @@ class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> {
       await widget.timeline.preloadAssets(_nextIndex);
     }
 
-    if (_config.direction == SlideshowDirection.shuffle || !_config.transition) {
-      _pageController.jumpToPage(_nextIndex);
+    _crossFadeToPage(_nextIndex);
+  }
+
+  void _crossFadeToPage(int page) {
+    final previousIndex = _index;
+    _pageController.jumpToPage(page);
+    setState(() {
+      _crossfadeFromIndex = previousIndex;
+      _crossfadeToIndex = page;
+    });
+    _crossfadeController.forward(from: 0.0).whenComplete(() {
+      if (mounted) {
+        setState(() {
+          _crossfadeFromIndex = null;
+          _crossfadeToIndex = null;
+        });
+      }
+    });
+  }
+
+  Widget _getCrossfadeLayer(BuildContext context, int index, {required bool isIncoming}) {
+    final asset = widget.timeline.getAssetSafe(index);
+
+    final Widget child;
+    if (isIncoming && asset?.isImage == true) {
+      child = _getPhotoView(context, index);
     } else {
-      unawaited(_pageController.animateToPage(_nextIndex, duration: Durations.long2, curve: Curves.easeIn));
+      final zoomOut = isIncoming ? _zoomCycle.isOdd : _zoomCycle.isEven;
+      final zoom = isIncoming ? (zoomOut ? 1.0 : 0.0) : (zoomOut ? 0.0 : 1.0);
+      child = _getCrossfadeChild(context, index, zoom);
     }
+
+    return Stack(
+      fit: StackFit.expand,
+      children: [if (_config.look == SlideshowLook.blurredBackground) _getBlur(context, index), child],
+    );
+  }
+
+  Widget _getCrossfadeChild(BuildContext context, int index, double zoom) {
+    final asset = widget.timeline.getAssetSafe(index);
+
+    if (asset == null) {
+      return const SizedBox.shrink();
+    }
+
+    final scale = _config.look == SlideshowLook.cover
+        ? PhotoViewComputedScale.covered
+        : PhotoViewComputedScale.contained;
+
+    return PhotoView(
+      imageProvider: getFullImageProvider(asset, size: context.sizeData),
+      index: index,
+      disableScaleGestures: true,
+      gaplessPlayback: true,
+      filterQuality: FilterQuality.high,
+      initialScale: scale * (1.0 + zoom * _kenBurnsZoom),
+      controller: PhotoViewController(),
+    );
   }
 
   void _createTimer() {
@@ -172,6 +236,7 @@ class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> {
 
     setState(() {
       _index = page;
+      _zoomCycle++;
 
       if (!asset.isImage) {
         _paused = false;
@@ -268,7 +333,7 @@ class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> {
     final imageProvider = getFullImageProvider(asset, size: context.sizeData);
 
     if (asset.isImage) {
-      final zoomOut = index % 2 == 1;
+      final zoomOut = _zoomCycle.isOdd;
       final elapsed = _stopwatch.elapsedMilliseconds;
       final duration = _config.duration * 1000;
       final progress = zoomOut ? 1.0 - elapsed / duration.toDouble() : elapsed / duration.toDouble();
@@ -289,7 +354,7 @@ class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> {
           disableScaleGestures: true,
           gaplessPlayback: true,
           filterQuality: FilterQuality.high,
-          initialScale: scale * (1.0 + value / 10.0),
+          initialScale: scale * (1.0 + value * _kenBurnsZoom),
           controller: PhotoViewController(),
           onTapUp: (_, _, _) => _onTapUp(),
         ),
@@ -356,20 +421,43 @@ class _DriftSlideshowPageState extends ConsumerState<DriftSlideshowPage> {
       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),
-            ],
+      body: Stack(
+        children: [
+          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),
+                ],
+              ),
+            ),
           ),
-        ),
+          if (_crossfadeFromIndex != null && _crossfadeToIndex != null)
+            Positioned.fill(
+              child: IgnorePointer(
+                child: Stack(
+                  fit: StackFit.expand,
+                  children: [
+                    const ColoredBox(color: Colors.black),
+                    FadeTransition(
+                      opacity: _crossfadeController,
+                      child: _getCrossfadeLayer(context, _crossfadeToIndex!, isIncoming: true),
+                    ),
+                    FadeTransition(
+                      opacity: _crossfadeOpacity,
+                      child: _getCrossfadeLayer(context, _crossfadeFromIndex!, isIncoming: false),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+        ],
       ),
     );
   }

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

@@ -6,10 +6,12 @@ import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/constants/enums.dart';
+import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/settings_key.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/generated/translations.g.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/asset_viewer/asset_viewer.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/action.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/settings.provider.dart';
 import 'package:immich_mobile/providers/timeline/multiselect.provider.dart';
@@ -51,7 +53,9 @@ class _SharePreparingDialog extends StatelessWidget {
 }
 
 class _ShareFileTypeDialog extends StatelessWidget {
-  const _ShareFileTypeDialog();
+  final bool showPreview;
+
+  const _ShareFileTypeDialog({this.showPreview = true});
 
   @override
   Widget build(BuildContext context) {
@@ -66,11 +70,12 @@ class _ShareFileTypeDialog extends StatelessWidget {
             title: Text(context.t.share_original),
             onTap: () => context.pop(ShareAssetType.original),
           ),
-          ListTile(
-            leading: const Icon(Icons.photo_size_select_large_rounded),
-            title: Text(context.t.share_preview),
-            onTap: () => context.pop(ShareAssetType.preview),
-          ),
+          if (showPreview)
+            ListTile(
+              leading: const Icon(Icons.photo_size_select_large_rounded),
+              title: Text(context.t.share_preview),
+              onTap: () => context.pop(ShareAssetType.preview),
+            ),
         ],
       ),
       actions: [TextButton(onPressed: () => context.pop(), child: Text(context.t.cancel))],
@@ -85,6 +90,16 @@ class ShareActionButton extends ConsumerWidget {
 
   const ShareActionButton({super.key, required this.source, this.iconOnly = false, this.menuItem = false});
 
+  Set<BaseAsset> _getSelectedAssets(WidgetRef ref) {
+    return switch (source) {
+      ActionSource.timeline => ref.read(multiSelectProvider).selectedAssets,
+      ActionSource.viewer => switch (ref.read(assetViewerProvider).currentAsset) {
+        BaseAsset asset => {asset},
+        null => const {},
+      },
+    };
+  }
+
   void _onTap(BuildContext context, WidgetRef ref) async {
     if (!context.mounted) {
       return;
@@ -99,9 +114,14 @@ class ShareActionButton extends ConsumerWidget {
       return;
     }
 
+    // only show preview option when at least one of the assets is not a video
+    // we cant share previews of videos
+    final assets = _getSelectedAssets(ref);
+    final showPreview = assets.isEmpty || assets.any((asset) => !asset.isVideo);
+
     final fileType = await showDialog<ShareAssetType>(
       context: context,
-      builder: (_) => const _ShareFileTypeDialog(),
+      builder: (_) => _ShareFileTypeDialog(showPreview: showPreview),
       useRootNavigator: false,
     );
 

mobile/lib/repositories/asset_media.repository.dart

@@ -285,7 +285,9 @@ class AssetMediaRepository {
         return 0;
       }
 
-      final shareFile = switch (fileType) {
+      final effectiveFileType = asset.isVideo ? ShareAssetType.original : fileType;
+
+      final shareFile = switch (effectiveFileType) {
         ShareAssetType.original => await _getOriginalShareFile(
           asset,
           cancelCompleter: cancelCompleter,

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

@@ -16,15 +16,11 @@ class SlideshowSettings extends HookConsumerWidget {
   @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(settingsProvider).write(.slideshowTransition, useTransition.value);
-    });
     useValueChanged<bool, void>(useRepeat.value, (_, __) {
       ref.read(settingsProvider).write(.slideshowRepeat, useRepeat.value);
     });
@@ -45,11 +41,6 @@ class SlideshowSettings extends HookConsumerWidget {
           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),

server/src/repositories/map.repository.ts

@@ -78,8 +78,9 @@ export class MapRepository {
       .execute();
   }
 
-  @GenerateSql({ params: [[DummyValue.UUID], [DummyValue.UUID]] })
+  @GenerateSql({ params: [DummyValue.UUID, [DummyValue.UUID], [DummyValue.UUID]] })
   getMapMarkers(
+    authUserId: string,
     ownerIds: string[],
     albumIds: string[],
     { isArchived, isFavorite, fileCreatedAfter, fileCreatedBefore }: MapMarkerSearchOptions = {},
@@ -89,7 +90,7 @@ export class MapRepository {
         qb.where((eb) =>
           eb.or([
             eb('asset.visibility', '=', AssetVisibility.Timeline),
-            eb('asset.visibility', '=', AssetVisibility.Archive),
+            eb.and([eb('asset.ownerId', '=', authUserId), eb('asset.visibility', '=', AssetVisibility.Archive)]),
           ]),
         ),
       )

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

@@ -59,6 +59,7 @@ describe(MapService.name, () => {
       const markers = await sut.getMapMarkers(auth, { withPartners: true });
 
       expect(mocks.map.getMapMarkers).toHaveBeenCalledWith(
+        auth.user.id,
         [auth.user.id, partner.sharedById],
         expect.arrayContaining([]),
         { withPartners: true },

server/src/services/map.service.ts

@@ -15,7 +15,7 @@ export class MapService extends BaseService {
 
     const albumIds = options.withSharedAlbums ? await this.albumRepository.getAllIds(auth.user.id) : [];
 
-    return this.mapRepository.getMapMarkers(userIds, albumIds, options);
+    return this.mapRepository.getMapMarkers(auth.user.id, userIds, albumIds, options);
   }
 
   async reverseGeocode(dto: MapReverseGeocodeDto) {

web/src/lib/components/AdaptiveImage.svelte

@@ -261,10 +261,6 @@
         />
       {/if}
 
-      {#if show.brokenAsset}
-        <BrokenAsset class="absolute size-full text-xl" />
-      {/if}
-
       {#if show.preview}
         <ImageLayer
           {adaptiveImageLoader}
@@ -290,6 +286,10 @@
       {/if}
     </div>
 
+    {#if show.brokenAsset}
+      <BrokenAsset class="absolute inset-0 z-10 size-full text-xl" />
+    {/if}
+
     {#if overlays}
       <div class="pointer-events-none absolute inset-0">
         {@render overlays()}

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

@@ -15,7 +15,7 @@
   import { navigate } from '$lib/utils/navigation';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { type AlbumResponseDto, type AssetResponseDto, type PersonResponseDto, getAssetInfo } from '@immich/sdk';
-  import { onDestroy, onMount, untrack } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -82,7 +82,7 @@
   $effect(() => {
     const asset = assetViewerManager.asset;
     if (asset) {
-      untrack(() => handlePromiseError(loadCloseAssets(asset)));
+      handlePromiseError(loadCloseAssets(asset));
     }
   });
 

web/src/lib/elements/SearchBar.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { SearchOptions } from '$lib/utils/dipatch';
   import { IconButton, LoadingSpinner } from '@immich/ui';
   import { mdiClose, mdiMagnify } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -9,7 +8,7 @@
     roundedBottom?: boolean;
     showLoadingSpinner: boolean;
     placeholder: string;
-    onSearch?: (options: SearchOptions) => void;
+    onSearch?: (options: { force?: boolean }) => void;
     onReset?: () => void;
   }
 

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

@@ -44,7 +44,7 @@ class AssetViewerManager extends BaseEventManager<Events> {
   imageLoaderStatus = $state<ImageLoaderStatus | undefined>();
   #isImageLoading = $derived.by(() => {
     const quality = this.imageLoaderStatus?.quality;
-    if (!quality) {
+    if (!quality || this.imageLoaderStatus?.hasError) {
       return false;
     }
     const previewOrOriginalReady = quality.preview === 'success' || quality.original === 'success';

web/src/lib/utils/dipatch.ts

@@ -1,7 +0,0 @@
-export interface ResetOptions {
-  default?: boolean;
-}
-
-export interface SearchOptions {
-  force?: boolean;
-}

web/src/lib/utils/exif-utils.spec.ts

@@ -1,29 +0,0 @@
-import type { AssetResponseDto } from '@immich/sdk';
-import { getExifCount } from '$lib/utils/exif-utils';
-
-describe('getting the exif count', () => {
-  it('returns 0 when exifInfo is undefined', () => {
-    const asset = {};
-    expect(getExifCount(asset as AssetResponseDto)).toBe(0);
-  });
-
-  it('returns 0 when exifInfo is empty', () => {
-    const asset = { exifInfo: {} };
-    expect(getExifCount(asset as AssetResponseDto)).toBe(0);
-  });
-
-  it('returns the correct count of non-null exifInfo properties', () => {
-    const asset = { exifInfo: { fileSizeInByte: 200, rating: 5, fNumber: null } };
-    expect(getExifCount(asset as AssetResponseDto)).toBe(2);
-  });
-
-  it('ignores null, undefined and empty properties in exifInfo', () => {
-    const asset = { exifInfo: { fileSizeInByte: 200, rating: null, fNumber: undefined, description: '' } };
-    expect(getExifCount(asset as AssetResponseDto)).toBe(1);
-  });
-
-  it('returns the correct count when all exifInfo properties are non-null', () => {
-    const asset = { exifInfo: { fileSizeInByte: 200, rating: 5, fNumber: 1, description: 'test' } };
-    expect(getExifCount(asset as AssetResponseDto)).toBe(4);
-  });
-});

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

@@ -1,5 +0,0 @@
-import type { AssetResponseDto } from '@immich/sdk';
-
-export const getExifCount = (asset: AssetResponseDto) => {
-  return Object.values(asset.exifInfo ?? {}).filter(Boolean).length;
-};

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

@@ -5,13 +5,3 @@ export const removeAccents = (str: string) => {
 export const normalizeSearchString = (str: string) => {
   return removeAccents(str.toLocaleLowerCase());
 };
-
-export const buildDateString = (year: number, month?: number, day?: number) => {
-  return [
-    year.toString(),
-    month && !Number.isNaN(month) ? month.toString() : undefined,
-    day && !Number.isNaN(day) ? day.toString() : undefined,
-  ]
-    .filter((date) => date !== undefined)
-    .join('-');
-};

web/src/lib/utils/workflow.ts

@@ -30,9 +30,6 @@ export const getTriggerDescription = ($t: MessageFormatter, type: WorkflowTrigge
     case WorkflowTrigger.AssetMetadataExtraction: {
       return $t('trigger_asset_metadata_extraction_description');
     }
-    default: {
-      return type;
-    }
   }
 };
 
@@ -79,10 +76,6 @@ export const getWorkflowDefaultConfig = (schema: JSONSchemaProperty) => {
         config[key] = property.properties ? getWorkflowDefaultConfig(property) : {};
         break;
       }
-
-      default: {
-        console.log(`Unknown configuration type: ${property.type}`);
-      }
     }
   }
 

web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { locale } from '$lib/stores/preferences.store';
+  import { lang, locale } from '$lib/stores/preferences.store';
   import { getAssetMediaUrl } from '$lib/utils';
   import { getAllMetadataItems, type DifferingMetadataFields } from '$lib/utils/duplicate-utils';
   import { getAltText } from '$lib/utils/thumbnail-util';
@@ -30,7 +30,8 @@
     initialVisibleCount = 5,
   }: Props = $props();
 
-  let isFromExternalLibrary = $derived(!!asset.libraryId);
+  const listFormat = $derived(new Intl.ListFormat($lang));
+  const isFromExternalLibrary = $derived(!!asset.libraryId);
 
   const visibleMetadataItems = $derived(
     getAllMetadataItems(asset, $t, $locale)
@@ -116,7 +117,13 @@
       {#await getAllAlbums({ assetId: asset.id })}
         {$t('scanning_for_album')}
       {:then albums}
-        {$t('in_albums', { values: { count: albums.length } })}
+        {#if albums.length === 1}
+          {albums[0].albumName}
+        {:else}
+          <span title={listFormat.format(albums.map(({ albumName }) => albumName))}>
+            {$t('in_albums', { values: { count: albums.length } })}
+          </span>
+        {/if}
       {/await}
     </InfoRow>
   </div>

web/src/routes/UploadPanel.svelte

@@ -37,7 +37,7 @@
       }
       uploadAssetsStore.reset();
     }}
-    class="fixed inset-e-16 bottom-6"
+    class="fixed inset-e-16 bottom-6 z-60"
   >
     {#if showDetail}
       <div

web/src/routes/admin/system-settings/FFmpegSettings.svelte

@@ -88,6 +88,7 @@
               desc={$t('admin.transcoding_accepted_video_codecs_description')}
               bind:value={configToEdit.ffmpeg.acceptedVideoCodecs}
               name="videoCodecs"
+              lockedOptions={[configToEdit.ffmpeg.targetVideoCodec]}
               options={[
                 { value: VideoCodec.H264, text: 'H.264' },
                 { value: VideoCodec.Hevc, text: 'HEVC' },
@@ -106,6 +107,7 @@
               desc={$t('admin.transcoding_accepted_audio_codecs_description')}
               bind:value={configToEdit.ffmpeg.acceptedAudioCodecs}
               name="audioCodecs"
+              lockedOptions={[configToEdit.ffmpeg.targetAudioCodec]}
               options={[
                 { value: AudioCodec.Aac, text: 'AAC' },
                 { value: AudioCodec.Mp3, text: 'MP3' },

web/src/routes/admin/system-settings/SettingCheckboxes.svelte

@@ -1,17 +1,18 @@
-<script lang="ts">
+<script lang="ts" generics="T extends string">
   import { Checkbox, Label } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
 
   interface Props {
-    value: string[];
-    options: { value: string; text: string }[];
+    value: T[];
+    options: { value: T; text: string }[];
     label?: string;
     desc?: string;
     name?: string;
     isEdited?: boolean;
     disabled?: boolean;
+    lockedOptions?: T[];
   }
 
   let {
@@ -22,9 +23,10 @@
     name = '',
     isEdited = false,
     disabled = false,
+    lockedOptions = [],
   }: Props = $props();
 
-  function handleCheckboxChange(option: string) {
+  function handleCheckboxChange(option: T) {
     value = value.includes(option) ? value.filter((item) => item !== option) : [...value, option];
   }
 </script>
@@ -57,7 +59,7 @@
           size="tiny"
           id="{option.value}-checkbox"
           checked={value.includes(option.value)}
-          {disabled}
+          disabled={disabled || lockedOptions.includes(option.value)}
           onCheckedChange={() => handleCheckboxChange(option.value)}
         />
         <Label label={option.text} for="{option.value}-checkbox" size="small" />

web/src/routes/auth/login/+page.svelte

@@ -141,11 +141,11 @@
           <Alert color="danger" title={errorMessage} closable />
         {/if}
 
-        <Field label={$t('email')}>
+        <Field label={$t('email')} required="indicator">
           <Input id="email" name="email" type="email" autocomplete="email" bind:value={email} />
         </Field>
 
-        <Field label={$t('password')}>
+        <Field label={$t('password')} required="indicator">
           <PasswordInput id="password" bind:value={password} autocomplete="current-password" />
         </Field>