Merge branch 'main' into feature/improve_date_selection

immich-app · Apr 30, 2024 · bafd6ac · bafd6ac
2 parents 4d09ca9 + 3212069
commit bafd6ac
Show file tree

Hide file tree

Showing 33 changed files with 1,818 additions and 1,611 deletions.
diff --git a/cli/Dockerfile b/cli/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:20-alpine3.19@sha256:ec0c413b1d84f3f7f67ec986ba885930c57b5318d2eb3abc6960ee05d4f2eb28 as core
+FROM node:20-alpine3.19@sha256:7a91aa397f2e2dfbfcdad2e2d72599f374e0b0172be1d86eeb73f1d33f36a4b2 as core
 
 WORKDIR /usr/src/open-api/typescript-sdk
 COPY open-api/typescript-sdk/package*.json open-api/typescript-sdk/tsconfig*.json ./

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -25,7 +25,7 @@
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
     "docusaurus-lunr-search": "^3.3.2",
-    "docusaurus-preset-openapi": "^0.7.4",
+    "docusaurus-preset-openapi": "^0.7.5",
     "postcss": "^8.4.25",
     "prism-react-renderer": "^2.3.1",
     "raw-loader": "^4.0.2",

diff --git a/machine-learning/Dockerfile b/machine-learning/Dockerfile
@@ -1,6 +1,6 @@
 ARG DEVICE=cpu
 
-FROM python:3.11-bookworm@sha256:abe34d06fca0165d40375b0e840fd3296ad2d075954d3a400d4efefe0e9b3012 as builder-cpu
+FROM python:3.11-bookworm@sha256:adc02660aaaa7e7b482a2689237c5fa88d5b2218aebfa003f6af8fa7c8113378 as builder-cpu
 
 FROM openvino/ubuntu22_runtime:2023.3.0@sha256:176646df619032ea6c10faf842867119c393e7497b7f88b5e307e932a0fd5aa8 as builder-openvino
 USER root
@@ -36,7 +36,7 @@ RUN python3 -m venv /opt/venv
 COPY poetry.lock pyproject.toml ./
 RUN poetry install --sync --no-interaction --no-ansi --no-root --with ${DEVICE} --without dev
 
-FROM python:3.11-slim-bookworm@sha256:dad770592ab3582ab2dabcf0e18a863df9d86bd9d23efcfa614110ce49ac20e4 as prod-cpu
+FROM python:3.11-slim-bookworm@sha256:6d2502238109c929569ae99355e28890c438cb11bc88ef02cd189c173b3db07c as prod-cpu
 
 FROM openvino/ubuntu22_runtime:2023.3.0@sha256:176646df619032ea6c10faf842867119c393e7497b7f88b5e307e932a0fd5aa8 as prod-openvino
 USER root

diff --git a/machine-learning/export/Dockerfile b/machine-learning/export/Dockerfile
@@ -1,4 +1,4 @@
-FROM mambaorg/micromamba:bookworm-slim@sha256:cca06974c6ff7641cc4ec15bcc60d0147084d9b9476fc61a06e7524891349a1f as builder
+FROM mambaorg/micromamba:bookworm-slim@sha256:5e56b257abb52626c155dbbac1d394e85ed864030b458957386c8bfe9df48b96 as builder
 
 ENV NODE_ENV=production \
   TRANSFORMERS_CACHE=/cache \

diff --git a/machine-learning/poetry.lock b/machine-learning/poetry.lock
diff --git a/server/Dockerfile b/server/Dockerfile
@@ -25,7 +25,7 @@ COPY --from=dev /usr/src/app/node_modules/@img ./node_modules/@img
 COPY --from=dev /usr/src/app/node_modules/exiftool-vendored.pl ./node_modules/exiftool-vendored.pl
 
 # web build
-FROM node:iron-alpine3.18@sha256:d328c7bc3305e1ab26491817936c8151a47a8861ad617c16c1eeaa9c8075c8f6 as web
+FROM node:iron-alpine3.18@sha256:142644a60c2fd7b954d7de9dd3f2aba0ce9c99b14ce354ee2e65b47ee36f6baf as web
 
 WORKDIR /usr/src/open-api/typescript-sdk
 COPY open-api/typescript-sdk/package*.json open-api/typescript-sdk/tsconfig*.json ./

diff --git a/web/Dockerfile b/web/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:iron-alpine3.18@sha256:d328c7bc3305e1ab26491817936c8151a47a8861ad617c16c1eeaa9c8075c8f6
+FROM node:iron-alpine3.18@sha256:142644a60c2fd7b954d7de9dd3f2aba0ce9c99b14ce354ee2e65b47ee36f6baf
 
 RUN apk add --no-cache tini
 USER node

diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { user } from '$lib/stores/user.store';
   import type { AlbumResponseDto } from '@immich/sdk';
   import { mdiDotsVertical } from '@mdi/js';
   import { getContextMenuPosition, type ContextMenuPosition } from '$lib/utils/context-menu';
   import { getShortDateRange } from '$lib/utils/date-time';
-  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
   import AlbumCover from '$lib/components/album-page/album-cover.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let album: AlbumResponseDto;
   export let showOwner = false;
@@ -33,9 +32,15 @@
       class="absolute right-6 top-6 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
       data-testid="context-button-parent"
     >
-      <IconButton color="transparent-primary" title="Show album options" on:click={showAlbumContextMenu}>
-        <Icon path={mdiDotsVertical} size="20" class="icon-white-drop-shadow text-white" />
-      </IconButton>
+      <CircleIconButton
+        color="light"
+        title="Show album options"
+        icon={mdiDotsVertical}
+        size="20"
+        padding="2"
+        class="icon-white-drop-shadow"
+        on:click={showAlbumContextMenu}
+      />
     </div>
   {/if}
 

diff --git a/web/src/lib/components/album-page/albums-controls.svelte b/web/src/lib/components/album-page/albums-controls.svelte
@@ -100,7 +100,7 @@
 
 <!-- Search Albums -->
 <div class="hidden xl:block h-10 xl:w-60 2xl:w-80">
-  <SearchBar placeholder="Search albums" bind:name={searchQuery} isSearching={false} />
+  <SearchBar placeholder="Search albums" bind:name={searchQuery} showLoadingSpinner={false} />
 </div>
 
 <!-- Create Album -->

diff --git a/web/src/lib/components/elements/buttons/circle-icon-button.svelte b/web/src/lib/components/elements/buttons/circle-icon-button.svelte
@@ -2,13 +2,18 @@
   import Icon from '$lib/components/elements/icon.svelte';
   type Color = 'transparent' | 'light' | 'dark' | 'gray' | 'primary' | 'opaque';
 
+  export let type: 'button' | 'submit' | 'reset' = 'button';
   export let icon: string;
   export let color: Color = 'transparent';
   export let title: string;
   export let padding = '3';
   export let size = '24';
   export let hideMobile = false;
   export let buttonSize: string | undefined = undefined;
+  /**
+   * viewBox attribute for the SVG icon.
+   */
+  export let viewBox: string | undefined = undefined;
 
   /**
    * Override the default styling of the button for specific use cases, such as the icon color.
@@ -32,10 +37,11 @@
 
 <button
   {title}
+  {type}
   style:width={buttonSize ? buttonSize + 'px' : ''}
   style:height={buttonSize ? buttonSize + 'px' : ''}
   class="flex place-content-center place-items-center rounded-full {colorClass} p-{padding} transition-all hover:dark:text-immich-dark-gray {className} {mobileClass}"
   on:click
 >
-  <Icon path={icon} {size} ariaLabel={title} color="currentColor" />
+  <Icon path={icon} {size} ariaLabel={title} {viewBox} color="currentColor" />
 </button>
diff --git a/web/src/lib/components/elements/buttons/icon-button.svelte b/web/src/lib/components/elements/buttons/icon-button.svelte
diff --git a/web/src/lib/components/elements/search-bar.svelte b/web/src/lib/components/elements/search-bar.svelte
@@ -7,7 +7,7 @@
 
   export let name: string;
   export let roundedBottom = true;
-  export let isSearching: boolean;
+  export let showLoadingSpinner: boolean;
   export let placeholder: string;
 
   const dispatch = createEventDispatcher<{ search: SearchOptions; reset: void }>();
@@ -16,6 +16,12 @@
     name = '';
     dispatch('reset');
   };
+
+  const handleSearch = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      dispatch('search', { force: true });
+    }
+  };
 </script>
 
 <div
@@ -33,9 +39,10 @@
     type="text"
     {placeholder}
     bind:value={name}
+    on:keydown={handleSearch}
     on:input={() => dispatch('search', { force: false })}
   />
-  {#if isSearching}
+  {#if showLoadingSpinner}
     <div class="flex place-items-center">
       <LoadingSpinner />
     </div>

diff --git a/web/src/lib/components/faces-page/assign-face-side-panel.svelte b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
@@ -1,23 +1,17 @@
 <script lang="ts">
-  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { photoViewer } from '$lib/stores/assets.store';
   import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import { getPersonNameWithHiddenValue, searchNameLocal } from '$lib/utils/person';
-  import {
-    AssetTypeEnum,
-    ThumbnailFormat,
-    searchPerson,
-    type AssetFaceResponseDto,
-    type PersonResponseDto,
-  } from '@immich/sdk';
+  import { getPersonNameWithHiddenValue } from '$lib/utils/person';
+  import { AssetTypeEnum, ThumbnailFormat, type AssetFaceResponseDto, type PersonResponseDto } from '@immich/sdk';
   import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
   import { linear } from 'svelte/easing';
   import { fly } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import Icon from '../elements/icon.svelte';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import SearchPeople from '$lib/components/faces-page/people-search.svelte';
 
   export let peopleWithFaces: AssetFaceResponseDto[];
   export let allPeople: PersonResponseDto[];
@@ -31,11 +25,11 @@
 
   // search people
   let searchedPeople: PersonResponseDto[] = [];
-  let searchedPeopleCopy: PersonResponseDto[] = [];
-  let searchWord: string;
   let searchFaces = false;
   let searchName = '';
 
+  $: showPeople = searchName ? searchedPeople : allPeople.filter((person) => !person.isHidden);
+
   const dispatch = createEventDispatcher<{
     close: void;
     createPerson: string | null;
@@ -116,33 +110,6 @@
     isShowLoadingNewPerson = false;
     dispatch('createPerson', newFeaturePhoto);
   };
-
-  const searchPeople = async () => {
-    if ((searchedPeople.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) || searchName === '') {
-      return;
-    }
-    const timeout = setTimeout(() => (isShowLoadingSearch = true), timeBeforeShowLoadingSpinner);
-    try {
-      const data = await searchPerson({ name: searchName });
-      searchedPeople = data;
-      searchedPeopleCopy = data;
-      searchWord = searchName;
-    } catch (error) {
-      handleError(error, "Can't search people");
-    } finally {
-      clearTimeout(timeout);
-    }
-
-    isShowLoadingSearch = false;
-  };
-
-  $: {
-    searchedPeople = searchNameLocal(searchName, searchedPeopleCopy, 20);
-  }
-
-  const initInput = (element: HTMLInputElement) => {
-    element.focus();
-  };
 </script>
 
 <section
@@ -200,13 +167,11 @@
         </div>
       </button>
       <div class="w-full flex">
-        <input
-          class="w-full gap-2 bg-immich-bg dark:bg-immich-dark-bg"
-          type="text"
-          placeholder="Name or nickname"
-          bind:value={searchName}
-          on:input={searchPeople}
-          use:initInput
+        <SearchPeople
+          type="input"
+          bind:searchName
+          bind:showLoadingSpinner={isShowLoadingSearch}
+          bind:searchedPeopleLocal={searchedPeople}
         />
         {#if isShowLoadingSearch}
           <div>
@@ -227,56 +192,31 @@
   <div class="px-4 py-4 text-sm">
     <h2 class="mb-8 mt-4 uppercase">All people</h2>
     <div class="immich-scrollbar mt-4 flex flex-wrap gap-2 overflow-y-auto">
-      {#if searchName == ''}
-        {#each allPeople as person (person.id)}
-          {#if person.id !== editedPerson.id}
-            <div class="w-fit">
-              <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
-                <div class="relative">
-                  <ImageThumbnail
-                    curve
-                    shadow
-                    url={getPeopleThumbnailUrl(person.id)}
-                    altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
-                    title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
-                    widthStyle="90px"
-                    heightStyle="90px"
-                    thumbhash={null}
-                    hidden={person.isHidden}
-                  />
-                </div>
-
-                <p class="mt-1 truncate font-medium" title={getPersonNameWithHiddenValue(person.name, person.isHidden)}>
-                  {person.name}
-                </p>
-              </button>
-            </div>
-          {/if}
-        {/each}
-      {:else}
-        {#each searchedPeople as person (person.id)}
-          {#if person.id !== editedPerson.id}
-            <div class="w-fit">
-              <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
-                <div class="relative">
-                  <ImageThumbnail
-                    curve
-                    shadow
-                    url={getPeopleThumbnailUrl(person.id)}
-                    altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
-                    title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
-                    widthStyle="90px"
-                    heightStyle="90px"
-                    thumbhash={null}
-                    hidden={person.isHidden}
-                  />
-                </div>
-                <p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
-              </button>
-            </div>
-          {/if}
-        {/each}
-      {/if}
+      {#each showPeople as person (person.id)}
+        {#if person.id !== editedPerson.id}
+          <div class="w-fit">
+            <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
+              <div class="relative">
+                <ImageThumbnail
+                  curve
+                  shadow
+                  url={getPeopleThumbnailUrl(person.id)}
+                  altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
+                  title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
+                  widthStyle="90px"
+                  heightStyle="90px"
+                  thumbhash={null}
+                  hidden={person.isHidden}
+                />
+              </div>
+
+              <p class="mt-1 truncate font-medium" title={getPersonNameWithHiddenValue(person.name, person.isHidden)}>
+                {person.name}
+              </p>
+            </button>
+          </div>
+        {/if}
+      {/each}
     </div>
   </div>
 </section>