chore: code review

machine-learning/pyproject.toml

@@ -10,7 +10,7 @@ dependencies = [
     "fastapi>=0.95.2,<1.0",
     "gunicorn>=21.1.0",
     "huggingface-hub>=1.0,<2.0",
-    "insightface>=0.7.3,<2.0",
+    "insightface>=0.7.3,<1.0",
     "numpy>=2.4.0,<3.0",
     "opencv-python-headless>=4.7.0.72,<5.0",
     "orjson>=3.9.5",

machine-learning/uv.lock

@@ -1004,7 +1004,7 @@ requires-dist = [
     { name = "fastapi", specifier = ">=0.95.2,<1.0" },
     { name = "gunicorn", specifier = ">=21.1.0" },
     { name = "huggingface-hub", specifier = ">=1.0,<2.0" },
-    { name = "insightface", specifier = ">=0.7.3,<2.0" },
+    { name = "insightface", specifier = ">=0.7.3,<1.0" },
     { name = "numpy", specifier = ">=2.4.0,<3.0" },
     { name = "onnxruntime", marker = "extra == 'armnn'", specifier = ">=1.23.2,<2" },
     { name = "onnxruntime", marker = "extra == 'cpu'", specifier = ">=1.23.2,<2" },

web/src/lib/commands.ts

@@ -1,35 +1,17 @@
 import { defaultProvider, screencastManager, themeManager, ThemePreference, type ActionItem } from '@immich/ui';
 import {
   mdiAccountMultipleOutline,
-  mdiAccountOutline,
-  mdiArchiveArrowDownOutline,
   mdiBookshelf,
   mdiCog,
-  mdiContentDuplicate,
-  mdiCrosshairsGps,
-  mdiFolderOutline,
-  mdiHeartOutline,
-  mdiImageAlbum,
-  mdiImageMultipleOutline,
-  mdiImageSizeSelectLarge,
   mdiKeyboard,
-  mdiLink,
-  mdiLockOutline,
-  mdiMagnify,
-  mdiMapOutline,
   mdiServer,
-  mdiStateMachine,
   mdiSync,
-  mdiTagMultipleOutline,
   mdiThemeLightDark,
-  mdiToolboxOutline,
-  mdiTrashCanOutline,
 } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 import { goto } from '$app/navigation';
 import { page } from '$app/state';
 import { authManager } from '$lib/managers/auth-manager.svelte';
-import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
 import { Route } from '$lib/route';
 import { copyToClipboard } from '$lib/utils';
 
@@ -67,133 +49,7 @@ export const getPagesProvider = ($t: MessageFormatter) => {
     },
   ].map((route) => ({ ...route, $if: () => authManager.authenticated && authManager.user.isAdmin }));
 
-  const userPages: ActionItem[] = [
-    {
-      title: $t('photos'),
-      icon: mdiImageMultipleOutline,
-      onAction: () => goto(Route.photos()),
-    },
-    {
-      title: $t('explore'),
-      icon: mdiMagnify,
-      onAction: () => goto(Route.explore()),
-      $if: () => authManager.authenticated && featureFlagsManager.value.search,
-    },
-
-    {
-      title: $t('map'),
-      icon: mdiMapOutline,
-      onAction: () => goto(Route.map()),
-      $if: () => authManager.authenticated && featureFlagsManager.value.map,
-    },
-    {
-      title: $t('people'),
-      description: $t('people_feature_description'),
-      icon: mdiAccountOutline,
-      onAction: () => goto(Route.people()),
-      $if: () => authManager.authenticated && authManager.preferences.people.enabled,
-    },
-    {
-      title: $t('shared_links'),
-      icon: mdiLink,
-      onAction: () => goto(Route.sharedLinks()),
-      $if: () => authManager.authenticated && authManager.preferences.sharedLinks.enabled,
-    },
-    {
-      title: $t('recently_added'),
-      icon: mdiMagnify,
-      onAction: () => goto(Route.recentlyAdded()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('sharing'),
-      icon: mdiAccountMultipleOutline,
-      onAction: () => goto(Route.sharing()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('favorites'),
-      icon: mdiHeartOutline,
-      onAction: () => goto(Route.favorites()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('albums'),
-      description: $t('albums_feature_description'),
-      icon: mdiImageAlbum,
-      onAction: () => goto(Route.albums()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('tags'),
-      description: $t('tag_feature_description'),
-      icon: mdiTagMultipleOutline,
-      onAction: () => goto(Route.tags()),
-      $if: () => authManager.authenticated && authManager.preferences.tags.enabled,
-    },
-    {
-      title: $t('folders'),
-      description: $t('folders_feature_description'),
-      icon: mdiFolderOutline,
-      onAction: () => goto(Route.folders()),
-      $if: () => authManager.authenticated && authManager.preferences.folders.enabled,
-    },
-    {
-      title: $t('utilities'),
-      icon: mdiToolboxOutline,
-      onAction: () => goto(Route.utilities()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('archive'),
-      icon: mdiArchiveArrowDownOutline,
-      onAction: () => goto(Route.archive()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('locked_folder'),
-      icon: mdiLockOutline,
-      onAction: () => goto(Route.locked()),
-      $if: () => authManager.authenticated,
-    },
-    {
-      title: $t('trash'),
-      icon: mdiTrashCanOutline,
-      onAction: () => goto(Route.trash()),
-      $if: () => authManager.authenticated && featureFlagsManager.value.trash,
-    },
-    {
-      title: $t('admin.user_settings'),
-      icon: mdiCog,
-      onAction: () => goto(Route.userSettings()),
-      $if: () => authManager.authenticated,
-    },
-  ].map((route) => ({ $if: () => authManager.authenticated, ...route }));
-
-  const utilityPages: ActionItem[] = [
-    {
-      title: $t('review_duplicates'),
-      icon: mdiContentDuplicate,
-      onAction: () => goto(Route.duplicatesUtility()),
-    },
-    {
-      title: $t('review_large_files'),
-      icon: mdiImageSizeSelectLarge,
-      onAction: () => goto(Route.largeFileUtility()),
-    },
-    {
-      title: $t('manage_geolocation'),
-      icon: mdiCrosshairsGps,
-      onAction: () => goto(Route.geolocationUtility()),
-    },
-    {
-      title: $t('workflows'),
-      icon: mdiStateMachine,
-      onAction: () => goto(Route.workflows()),
-    },
-  ].map((route) => ({ ...route, $if: () => authManager.authenticated }));
-
-  return defaultProvider({ name: $t('page'), actions: [...userPages, ...utilityPages, ...adminPages] });
+  return defaultProvider({ name: $t('page'), actions: adminPages });
 };
 
 const getMyImmichLink = () => {

web/src/lib/components/AdaptiveImage.svelte

@@ -149,29 +149,35 @@
     return { width: 1, height: 1 };
   });
 
-  const { insetInlineStart, top, rasterWidth, rasterHeight, rasterScale } = $derived.by(() => {
-    const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
-    const { width, height } = scaleFn(imageDimensions, container);
-    if (maxRasterPixels === 0) {
+  const { insetInlineStart, top, displayWidth, displayHeight, rasterWidth, rasterHeight, rasterScale } = $derived.by(
+    () => {
+      const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
+      const { width, height } = scaleFn(imageDimensions, container);
+      if (maxRasterPixels === 0) {
+        return {
+          insetInlineStart: (container.width - width) / 2 + 'px',
+          top: (container.height - height) / 2 + 'px',
+          displayWidth: width + 'px',
+          displayHeight: height + 'px',
+          rasterWidth: width + 'px',
+          rasterHeight: height + 'px',
+          rasterScale: 1,
+        };
+      }
+      const nativeRatio = imageDimensions.width / width;
+      const budgetRatio = Math.sqrt(maxRasterPixels / Math.max(width * height, 1));
+      const rasterRatio = Math.max(1, Math.min(nativeRatio, budgetRatio));
       return {
         insetInlineStart: (container.width - width) / 2 + 'px',
         top: (container.height - height) / 2 + 'px',
-        rasterWidth: width + 'px',
-        rasterHeight: height + 'px',
-        rasterScale: 1,
+        displayWidth: width + 'px',
+        displayHeight: height + 'px',
+        rasterWidth: width * rasterRatio + 'px',
+        rasterHeight: height * rasterRatio + 'px',
+        rasterScale: 1 / rasterRatio,
       };
-    }
-    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',
-      rasterWidth: width * rasterRatio + 'px',
-      rasterHeight: height * rasterRatio + 'px',
-      rasterScale: 1 / rasterRatio,
-    };
-  });
+    },
+  );
 
   const { status } = $derived(adaptiveImageLoader);
   const alt = $derived(status.urls.preview ? $getAltText(toTimelineAsset(asset)) : '');
@@ -216,69 +222,78 @@
   {@render backdrop?.()}
 
   <div
-    class="pointer-events-none absolute"
+    class="pointer-events-none absolute overflow-hidden"
     style:inset-inline-start={insetInlineStart}
     style:top
-    style:width={rasterWidth}
-    style:height={rasterHeight}
-    style:transform="scale({rasterScale})"
-    style:transform-origin="0 0"
-    style:will-change={maxRasterPixels > 0 ? 'transform' : undefined}
+    style:width={displayWidth}
+    style:height={displayHeight}
   >
-    {#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={rasterWidth}
-        height={rasterHeight}
-        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={rasterWidth}
-        height={rasterHeight}
-        {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={rasterWidth}
-        height={rasterHeight}
-        {overlays}
-        quality="original"
-        src={status.urls.original}
-        bind:ref={originalElement}
-      />
+      {#if show.preview}
+        <ImageLayer
+          {adaptiveImageLoader}
+          {alt}
+          width={rasterWidth}
+          height={rasterHeight}
+          quality="preview"
+          src={status.urls.preview}
+          bind:ref={previewElement}
+        />
+      {/if}
+
+      {#if show.original}
+        <ImageLayer
+          {adaptiveImageLoader}
+          {alt}
+          width={rasterWidth}
+          height={rasterHeight}
+          quality="original"
+          src={status.urls.original}
+          bind:ref={originalElement}
+        />
+      {/if}
+    </div>
+
+    {#if overlays}
+      <div class="pointer-events-none absolute inset-0">
+        {@render overlays()}
+      </div>
     {/if}
   </div>
 </div>

web/src/lib/components/ImageLayer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Image from '$lib/components/Image.svelte';
   import type { AdaptiveImageLoader, ImageQuality } from '$lib/utils/adaptive-image-loader.svelte';
-  import type { Snippet } from 'svelte';
 
   type Props = {
     adaptiveImageLoader: AdaptiveImageLoader;
@@ -12,20 +11,9 @@
     ref?: HTMLImageElement;
     width: string;
     height: string;
-    overlays?: Snippet;
   };
 
-  let {
-    adaptiveImageLoader,
-    quality,
-    src,
-    alt = '',
-    role,
-    ref = $bindable(),
-    width,
-    height,
-    overlays,
-  }: Props = $props();
+  let { adaptiveImageLoader, quality, src, alt = '', role, ref = $bindable(), width, height }: Props = $props();
 </script>
 
 {#key adaptiveImageLoader}
@@ -42,6 +30,5 @@
       draggable={false}
       data-testid={quality}
     />
-    {@render overlays?.()}
   </div>
 {/key}

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   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';
@@ -30,14 +31,11 @@
 
   const transitionDuration = $derived(manager.suspendTransitions && !$isUploading ? 0 : 150);
   const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
-
-  const firstInOrNearViewport = $derived(viewerAssets.findIndex((a) => a.isInOrNearViewport));
-  const lastInOrNearViewport = $derived(viewerAssets.findLastIndex((a) => a.isInOrNearViewport));
 </script>
 
 <!-- Image grid -->
 <div data-image-grid class="relative overflow-clip" style:height={height + 'px'} style:width={width + 'px'}>
-  {#each viewerAssets.slice(firstInOrNearViewport, lastInOrNearViewport + 1) as viewerAsset (viewerAsset.id)}
+  {#each filterIsInOrNearViewport(viewerAssets) as viewerAsset (viewerAsset.id)}
     {@const position = viewerAsset.position!}
     {@const asset = viewerAsset.asset!}
 

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

@@ -17,13 +17,13 @@ export class TimelineDay {
 
   height = $state(0);
   width = $state(0);
+  isInOrNearViewport = $derived.by(() => this.viewerAssets.some((viewAsset) => viewAsset.isInOrNearViewport));
 
   #top: number = $state(0);
   #start: number = $state(0);
   #row = $state(0);
   #col = $state(0);
   #deferredLayout = false;
-  #lastInOrNearViewport = -1;
 
   constructor(timelineMonth: TimelineMonth, index: number, day: number, groupTitle: string, orderBy: AssetOrderBy) {
     this.index = index;
@@ -154,13 +154,4 @@ export class TimelineDay {
   get absoluteTimelineDayTop() {
     return this.timelineMonth.top + this.#top;
   }
-
-  get isInOrNearViewport() {
-    if (this.#lastInOrNearViewport !== -1 && this.viewerAssets[this.#lastInOrNearViewport].isInOrNearViewport) {
-      return true;
-    }
-
-    this.#lastInOrNearViewport = this.viewerAssets.findIndex((viewAsset) => viewAsset.isInOrNearViewport);
-    return this.#lastInOrNearViewport !== -1;
-  }
 }