refactor(web) open api client (#7103)

* refactor: person api * refactor: shared link and others
2024-02-14 08:09:49 -05:00
parent 5fc1d43012
commit d8631a00bb
81 changed files with 638 additions and 656 deletions
@@ -1,135 +1,15 @@
-import {
-  AssetApi,
-  AssetApiFp,
-  AssetJobName,
-  DownloadApi,
-  JobName,
-  PersonApi,
-  SearchApi,
-  SharedLinkApi,
-  UserApiFp,
-  base,
-  common,
-  configuration,
-} from '@immich/sdk/axios';
-import type { ApiParams as ApiParameters } from './types';
+import { AssetApi, DownloadApi, configuration } from '@immich/sdk/axios';

 class ImmichApi {
  public downloadApi: DownloadApi;
  public assetApi: AssetApi;
-  public searchApi: SearchApi;
-  public sharedLinkApi: SharedLinkApi;
-  public personApi: PersonApi;

  private config: configuration.Configuration;
-  private key?: string;
-
-  get isSharedLink() {
-    return !!this.key;
-  }

  constructor(parameters: configuration.ConfigurationParameters) {
    this.config = new configuration.Configuration(parameters);
-
    this.downloadApi = new DownloadApi(this.config);
    this.assetApi = new AssetApi(this.config);
-    this.searchApi = new SearchApi(this.config);
-    this.sharedLinkApi = new SharedLinkApi(this.config);
-    this.personApi = new PersonApi(this.config);
-  }
-
-  private createUrl(path: string, parameters?: Record<string, unknown>) {
-    const searchParameters = new URLSearchParams();
-    for (const key in parameters) {
-      const value = parameters[key];
-      if (value !== undefined && value !== null) {
-        searchParameters.set(key, value.toString());
-      }
-    }
-
-    const url = new URL(path, common.DUMMY_BASE_URL);
-    url.search = searchParameters.toString();
-
-    return (this.config.basePath || base.BASE_PATH) + common.toPathString(url);
-  }
-
-  public setKey(key: string) {
-    this.key = key;
-  }
-
-  public getKey(): string | undefined {
-    return this.key;
-  }
-
-  public setAccessToken(accessToken: string) {
-    this.config.accessToken = accessToken;
-  }
-
-  public removeAccessToken() {
-    this.config.accessToken = undefined;
-  }
-
-  public setBaseUrl(baseUrl: string) {
-    this.config.basePath = baseUrl;
-  }
-
-  public getAssetFileUrl(...[assetId, isThumb, isWeb]: ApiParameters<typeof AssetApiFp, 'serveFile'>) {
-    const path = `/asset/file/${assetId}`;
-    return this.createUrl(path, { isThumb, isWeb, key: this.getKey() });
-  }
-
-  public getAssetThumbnailUrl(...[assetId, format]: ApiParameters<typeof AssetApiFp, 'getAssetThumbnail'>) {
-    const path = `/asset/thumbnail/${assetId}`;
-    return this.createUrl(path, { format, key: this.getKey() });
-  }
-
-  public getProfileImageUrl(...[userId]: ApiParameters<typeof UserApiFp, 'getProfileImage'>) {
-    const path = `/user/profile-image/${userId}`;
-    return this.createUrl(path);
-  }
-
-  public getPeopleThumbnailUrl(personId: string) {
-    const path = `/person/${personId}/thumbnail`;
-    return this.createUrl(path);
-  }
-
-  public getJobName(jobName: JobName) {
-    const names: Record<JobName, string> = {
-      [JobName.ThumbnailGeneration]: 'Generate Thumbnails',
-      [JobName.MetadataExtraction]: 'Extract Metadata',
-      [JobName.Sidecar]: 'Sidecar Metadata',
-      [JobName.SmartSearch]: 'Smart Search',
-      [JobName.FaceDetection]: 'Face Detection',
-      [JobName.FacialRecognition]: 'Facial Recognition',
-      [JobName.VideoConversion]: 'Transcode Videos',
-      [JobName.StorageTemplateMigration]: 'Storage Template Migration',
-      [JobName.Migration]: 'Migration',
-      [JobName.BackgroundTask]: 'Background Tasks',
-      [JobName.Search]: 'Search',
-      [JobName.Library]: 'Library',
-    };
-
-    return names[jobName];
-  }
-
-  public getAssetJobName(job: AssetJobName) {
-    const names: Record<AssetJobName, string> = {
-      [AssetJobName.RefreshMetadata]: 'Refresh metadata',
-      [AssetJobName.RegenerateThumbnail]: 'Refresh thumbnails',
-      [AssetJobName.TranscodeVideo]: 'Refresh encoded videos',
-    };
-
-    return names[job];
-  }
-
-  public getAssetJobMessage(job: AssetJobName) {
-    const messages: Record<AssetJobName, string> = {
-      [AssetJobName.RefreshMetadata]: 'Refreshing metadata',
-      [AssetJobName.RegenerateThumbnail]: `Regenerating thumbnails`,
-      [AssetJobName.TranscodeVideo]: `Refreshing encoded video`,
-    };
-
-    return messages[job];
  }
 }

@@ -1,5 +1,5 @@
 import { finishOAuth, linkOAuthAccount, startOAuth, unlinkOAuthAccount } from '@immich/sdk';
-import type { UserResponseDto } from '@immich/sdk/axios';
+import { type UserResponseDto } from '@immich/sdk/axios';
 import type { AxiosError } from 'axios';
 import {
  NotificationType,
@@ -1,12 +1,10 @@
 <script lang="ts">
-  import { locale } from '$lib/stores/preferences.store';
-  import { createEventDispatcher } from 'svelte';
-  import { JobCommand, type JobCommandDto, type JobCountsDto, type QueueStatusDto } from '@api';
  import Badge from '$lib/components/elements/badge.svelte';
-  import JobTileButton from './job-tile-button.svelte';
-  import JobTileStatus from './job-tile-status.svelte';
  import Button from '$lib/components/elements/buttons/button.svelte';
  import Icon from '$lib/components/elements/icon.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import { type JobCommandDto, type JobCountsDto, type QueueStatusDto } from '@immich/sdk';
+  import { JobCommand } from '@immich/sdk/axios';
  import {
    mdiAlertCircle,
    mdiAllInclusive,
@@ -16,6 +14,9 @@
    mdiPlay,
    mdiSelectionSearch,
  } from '@mdi/js';
+  import { createEventDispatcher } from 'svelte';
+  import JobTileButton from './job-tile-button.svelte';
+  import JobTileStatus from './job-tile-status.svelte';

  export let title: string;
  export let subtitle: string | undefined;
@@ -4,9 +4,10 @@
    NotificationType,
  } from '$lib/components/shared-components/notification/notification';
  import { featureFlags } from '$lib/stores/server-config.store';
+  import { getJobName } from '$lib/utils';
  import { handleError } from '$lib/utils/handle-error';
-  import { type AllJobStatusResponseDto, api, JobCommand, type JobCommandDto, JobName } from '@api';
-  import type { ComponentType } from 'svelte';
+  import { sendJobCommand, type AllJobStatusResponseDto, type JobCommandDto } from '@immich/sdk';
+  import { JobCommand, JobName } from '@immich/sdk/axios';
  import {
    mdiFaceRecognition,
    mdiFileJpgBox,
@@ -18,10 +19,10 @@
    mdiTagFaces,
    mdiVideo,
  } from '@mdi/js';
+  import type { ComponentType } from 'svelte';
  import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
  import JobTile from './job-tile.svelte';
  import StorageMigrationDescription from './storage-migration-description.svelte';
-  import { sendJobCommand } from '@immich/sdk';

  export let jobs: AllJobStatusResponseDto;

@@ -59,23 +60,23 @@
  $: jobDetails = <Partial<Record<JobName, JobDetails>>>{
    [JobName.ThumbnailGeneration]: {
      icon: mdiFileJpgBox,
-      title: api.getJobName(JobName.ThumbnailGeneration),
+      title: getJobName(JobName.ThumbnailGeneration),
      subtitle: 'Generate large, small and blurred thumbnails for each asset, as well as thumbnails for each person',
    },
    [JobName.MetadataExtraction]: {
      icon: mdiTable,
-      title: api.getJobName(JobName.MetadataExtraction),
+      title: getJobName(JobName.MetadataExtraction),
      subtitle: 'Extract metadata information from each asset, such as GPS and resolution',
    },
    [JobName.Library]: {
      icon: mdiLibraryShelves,
-      title: api.getJobName(JobName.Library),
+      title: getJobName(JobName.Library),
      subtitle: 'Perform library tasks',
      allText: 'ALL',
      missingText: 'REFRESH',
    },
    [JobName.Sidecar]: {
-      title: api.getJobName(JobName.Sidecar),
+      title: getJobName(JobName.Sidecar),
      icon: mdiFileXmlBox,
      subtitle: 'Discover or synchronize sidecar metadata from the filesystem',
      allText: 'SYNC',
@@ -84,13 +85,13 @@
    },
    [JobName.SmartSearch]: {
      icon: mdiImageSearch,
-      title: api.getJobName(JobName.SmartSearch),
+      title: getJobName(JobName.SmartSearch),
      subtitle: 'Run machine learning on assets to support smart search',
      disabled: !$featureFlags.smartSearch,
    },
    [JobName.FaceDetection]: {
      icon: mdiFaceRecognition,
-      title: api.getJobName(JobName.FaceDetection),
+      title: getJobName(JobName.FaceDetection),
      subtitle:
        'Detect the faces in assets using machine learning. For videos, only the thumbnail is considered. "All" (re-)processes all assets. "Missing" queues assets that haven\'t been processed yet. Detected faces will be queued for Facial Recognition after Face Detection is complete, grouping them into existing or new people.',
      handleCommand: handleConfirmCommand,
@@ -98,7 +99,7 @@
    },
    [JobName.FacialRecognition]: {
      icon: mdiTagFaces,
-      title: api.getJobName(JobName.FacialRecognition),
+      title: getJobName(JobName.FacialRecognition),
      subtitle:
        'Group detected faces into people. This step runs after Face Detection is complete. "All" (re-)clusters all faces. "Missing" queues faces that don\'t have a person assigned.',
      handleCommand: handleConfirmCommand,
@@ -106,18 +107,18 @@
    },
    [JobName.VideoConversion]: {
      icon: mdiVideo,
-      title: api.getJobName(JobName.VideoConversion),
+      title: getJobName(JobName.VideoConversion),
      subtitle: 'Transcode videos for wider compatibility with browsers and devices',
    },
    [JobName.StorageTemplateMigration]: {
      icon: mdiFolderMove,
-      title: api.getJobName(JobName.StorageTemplateMigration),
+      title: getJobName(JobName.StorageTemplateMigration),
      allowForceCommand: false,
      component: StorageMigrationDescription,
    },
    [JobName.Migration]: {
      icon: mdiFolderMove,
-      title: api.getJobName(JobName.Migration),
+      title: getJobName(JobName.Migration),
      subtitle: 'Migrate thumbnails for assets and faces to the latest folder structure',
      allowForceCommand: false,
    },
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { locale } from '$lib/stores/preferences.store';
-  import type { ServerStatsResponseDto } from '@api';
-  import { asByteUnitString, getBytesWithUnit } from '$lib/utils/byte-units';
-  import StatsCard from './stats-card.svelte';
-  import { mdiCameraIris, mdiChartPie, mdiPlayCircle } from '@mdi/js';
  import Icon from '$lib/components/elements/icon.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import { asByteUnitString, getBytesWithUnit } from '$lib/utils/byte-units';
+  import type { ServerStatsResponseDto } from '@immich/sdk';
+  import { mdiCameraIris, mdiChartPie, mdiPlayCircle } from '@mdi/js';
+  import StatsCard from './stats-card.svelte';

  export let stats: ServerStatsResponseDto = {
    photos: 0,
@@ -1,5 +1,5 @@
 import type { ResetOptions } from '$lib/utils/dipatch';
-import type { SystemConfigDto } from '@api';
+import type { SystemConfigDto } from '@immich/sdk';

 export type SettingsEventType = {
  reset: ResetOptions & { configKeys: Array<keyof SystemConfigDto> };
@@ -1,25 +1,18 @@
 <script lang="ts">
-  import {
-    AudioCodec,
-    CQMode,
-    type SystemConfigDto,
-    ToneMapping,
-    TranscodeHWAccel,
-    TranscodePolicy,
-    VideoCodec,
-  } from '@api';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { type SystemConfigDto } from '@immich/sdk';
+  import { AudioCodec, CQMode, ToneMapping, TranscodeHWAccel, TranscodePolicy, VideoCodec } from '@immich/sdk/axios';
+  import { mdiHelpCircleOutline } from '@mdi/js';
+  import { isEqual, sortBy } from 'lodash-es';
+  import { createEventDispatcher } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import type { SettingsEventType } from '../admin-settings';
+  import SettingAccordion from '../setting-accordion.svelte';
  import SettingButtonsRow from '../setting-buttons-row.svelte';
+  import SettingCheckboxes from '../setting-checkboxes.svelte';
  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
  import SettingSelect from '../setting-select.svelte';
  import SettingSwitch from '../setting-switch.svelte';
-  import SettingCheckboxes from '../setting-checkboxes.svelte';
-  import { isEqual, sortBy } from 'lodash-es';
-  import { fade } from 'svelte/transition';
-  import SettingAccordion from '../setting-accordion.svelte';
-  import { mdiHelpCircleOutline } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { createEventDispatcher } from 'svelte';
-  import type { SettingsEventType } from '../admin-settings';

  export let savedConfig: SystemConfigDto;
  export let defaultConfig: SystemConfigDto;
@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { api, JobName, type SystemConfigDto, type SystemConfigJobDto } from '@api';
+  import { getJobName } from '$lib/utils';
+  import { type SystemConfigDto, type SystemConfigJobDto } from '@immich/sdk';
+  import { JobName } from '@immich/sdk/axios';
  import { isEqual } from 'lodash-es';
  import { createEventDispatcher } from 'svelte';
  import { fade } from 'svelte/transition';
@@ -41,7 +43,7 @@
            <SettingInputField
              inputType={SettingInputFieldType.NUMBER}
              {disabled}
-              label="{api.getJobName(jobName)} Concurrency"
+              label="{getJobName(jobName)} Concurrency"
              desc=""
              bind:value={config.job[jobName].concurrency}
              required={true}
@@ -50,7 +52,7 @@
          {:else}
            <SettingInputField
              inputType={SettingInputFieldType.NUMBER}
-              label="{api.getJobName(jobName)} Concurrency"
+              label="{getJobName(jobName)} Concurrency"
              desc=""
              value="1"
              disabled={true}
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { SystemConfigDto } from '@api';
+  import type { SystemConfigDto } from '@immich/sdk';
  import { isEqual } from 'lodash-es';
  import { createEventDispatcher } from 'svelte';
  import { fade } from 'svelte/transition';
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { LogLevel, type SystemConfigDto } from '@api';
+  import { type SystemConfigDto } from '@immich/sdk';
+  import { LogLevel } from '@immich/sdk/axios';
  import { isEqual } from 'lodash-es';
  import { createEventDispatcher } from 'svelte';
  import { fade } from 'svelte/transition';
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { SystemConfigDto } from '@api';
+  import type { SystemConfigDto } from '@immich/sdk';
  import { isEqual } from 'lodash-es';
  import { createEventDispatcher } from 'svelte';
  import { fade } from 'svelte/transition';
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { SystemConfigDto } from '@api';
+  import type { SystemConfigDto } from '@immich/sdk';
  import { isEqual } from 'lodash-es';
  import { createEventDispatcher } from 'svelte';
  import { fade } from 'svelte/transition';
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { SystemConfigDto } from '@api';
+  import type { SystemConfigDto } from '@immich/sdk';
  import { isEqual } from 'lodash-es';
  import { createEventDispatcher } from 'svelte';
  import { fade } from 'svelte/transition';
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { SystemConfigDto } from '@api';
+  import type { SystemConfigDto } from '@immich/sdk';
  import { isEqual } from 'lodash-es';
  import { createEventDispatcher } from 'svelte';
  import { fade } from 'svelte/transition';
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { SystemConfigDto } from '@api';
+  import type { SystemConfigDto } from '@immich/sdk';
  import { isEqual } from 'lodash-es';
  import { createEventDispatcher } from 'svelte';
  import { fade } from 'svelte/transition';
@@ -1,11 +1,11 @@
 <script lang="ts">
  import SettingButtonsRow from '$lib/components/admin-page/settings/setting-buttons-row.svelte';
-  import type { SystemConfigDto } from '@api';
+  import type { SystemConfigDto } from '@immich/sdk';
  import { isEqual } from 'lodash-es';
-  import { fade } from 'svelte/transition';
-  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
  import { createEventDispatcher } from 'svelte';
+  import { fade } from 'svelte/transition';
  import type { SettingsEventType } from '../admin-settings';
+  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';

  export let savedConfig: SystemConfigDto;
  export let defaultConfig: SystemConfigDto;
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { SystemConfigTemplateStorageOptionDto } from '@api';
+  import type { SystemConfigTemplateStorageOptionDto } from '@immich/sdk';
  import * as luxon from 'luxon';

  export let options: SystemConfigTemplateStorageOptionDto;
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { SystemConfigDto } from '@api';
+  import type { SystemConfigDto } from '@immich/sdk';
  import { isEqual } from 'lodash-es';
  import { createEventDispatcher } from 'svelte';
  import { fade } from 'svelte/transition';
@@ -1,7 +1,8 @@
 <script lang="ts">
  import SettingButtonsRow from '$lib/components/admin-page/settings/setting-buttons-row.svelte';
  import SettingSelect from '$lib/components/admin-page/settings/setting-select.svelte';
-  import { Colorspace, type SystemConfigDto } from '@api';
+  import { type SystemConfigDto } from '@immich/sdk';
+  import { Colorspace } from '@immich/sdk/axios';
  import { isEqual } from 'lodash-es';
  import { createEventDispatcher } from 'svelte';
  import { fade } from 'svelte/transition';
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { SystemConfigDto } from '@api';
+  import type { SystemConfigDto } from '@immich/sdk';
  import { isEqual } from 'lodash-es';
  import { createEventDispatcher } from 'svelte';
  import { fade } from 'svelte/transition';
@@ -3,6 +3,7 @@
  import Icon from '$lib/components/elements/icon.svelte';
  import { locale } from '$lib/stores/preferences.store';
  import { user } from '$lib/stores/user.store';
+  import { getAssetThumbnailUrl } from '$lib/utils';
  import { ThumbnailFormat, api, type AlbumResponseDto } from '@api';
  import { getUserById } from '@immich/sdk';
  import { mdiDotsVertical } from '@mdi/js';
@@ -19,7 +20,7 @@
  let showVerticalDots = false;

  $: imageData = album.albumThumbnailAssetId
-    ? api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)
+    ? getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)
    : noThumbnailUrl;

  const dispatchClick = createEventDispatcher<OnClick>();
@@ -1,4 +1,4 @@
-import type { AlbumResponseDto } from '@api';
+import type { AlbumResponseDto } from '@immich/sdk';

 export type OnShowContextMenu = {
  showalbumcontextmenu: OnShowContextMenuDetail;
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type AlbumResponseDto, type UserResponseDto } from '@api';
+  import { type AlbumResponseDto, type UserResponseDto } from '@immich/sdk';
  import { getMyUserInfo, removeUserFromAlbum } from '@immich/sdk';
  import { mdiDotsVertical } from '@mdi/js';
  import { createEventDispatcher, onMount } from 'svelte';
@@ -2,8 +2,13 @@
  import { goto } from '$app/navigation';
  import Icon from '$lib/components/elements/icon.svelte';
  import { AppRoute } from '$lib/constants';
-  import { api, type AlbumResponseDto, type SharedLinkResponseDto, type UserResponseDto } from '@api';
-  import { getAllUsers } from '@immich/sdk';
+  import {
+    getAllSharedLinks,
+    getAllUsers,
+    type AlbumResponseDto,
+    type SharedLinkResponseDto,
+    type UserResponseDto,
+  } from '@immich/sdk';
  import { mdiCheck, mdiLink, mdiShareCircle } from '@mdi/js';
  import { createEventDispatcher, onMount } from 'svelte';
  import Button from '../elements/buttons/button.svelte';
@@ -35,8 +40,7 @@
  });

  const getSharedLinks = async () => {
-    const { data } = await api.sharedLinkApi.getAllSharedLinks();
-
+    const data = await getAllSharedLinks();
    sharedLinks = data.filter((link) => link.album?.id === album.id);
  };

@@ -1,20 +1,21 @@
 <script lang="ts">
  import Icon from '$lib/components/elements/icon.svelte';
  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { getAssetThumbnailUrl } from '$lib/utils';
  import { getAssetType } from '$lib/utils/asset-utils';
  import { autoGrowHeight } from '$lib/utils/autogrow';
  import { clickOutside } from '$lib/utils/click-outside';
  import { handleError } from '$lib/utils/handle-error';
  import { isTenMinutesApart } from '$lib/utils/timesince';
  import {
-    AssetTypeEnum,
-    ReactionType,
-    ThumbnailFormat,
-    api,
+    createActivity,
+    deleteActivity,
+    getActivities,
    type ActivityResponseDto,
+    type AssetTypeEnum,
    type UserResponseDto,
-  } from '@api';
-  import { createActivity, deleteActivity, getActivities } from '@immich/sdk';
+  } from '@immich/sdk';
+  import { ReactionType, ThumbnailFormat } from '@immich/sdk/axios';
  import { mdiClose, mdiDotsVertical, mdiHeart, mdiSend } from '@mdi/js';
  import * as luxon from 'luxon';
  import { createEventDispatcher, onMount } from 'svelte';
@@ -191,7 +192,7 @@
                <div class="aspect-square w-[75px] h-[75px]">
                  <img
                    class="rounded-lg w-[75px] h-[75px] object-cover"
-                    src={api.getAssetThumbnailUrl(reaction.assetId, ThumbnailFormat.Webp)}
+                    src={getAssetThumbnailUrl(reaction.assetId, ThumbnailFormat.Webp)}
                    alt="comment-thumbnail"
                  />
                </div>
@@ -237,7 +238,7 @@
                  <div class="aspect-square w-[75px] h-[75px]">
                    <img
                      class="rounded-lg w-[75px] h-[75px] object-cover"
-                      src={api.getAssetThumbnailUrl(reaction.assetId, ThumbnailFormat.Webp)}
+                      src={getAssetThumbnailUrl(reaction.assetId, ThumbnailFormat.Webp)}
                      alt="like-thumbnail"
                    />
                  </div>
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { type AlbumResponseDto, ThumbnailFormat, api } from '@api';
+  import { getAssetThumbnailUrl } from '$lib/utils';
+  import { ThumbnailFormat, type AlbumResponseDto } from '@api';
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher<{
@@ -32,7 +33,7 @@
  <div class="h-12 w-12 shrink-0 rounded-xl bg-slate-300">
    {#if album.albumThumbnailAssetId}
      <img
-        src={api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)}
+        src={getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)}
        alt={album.albumName}
        class="z-0 h-full w-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg"
        data-testid="album-image"
@@ -1,9 +1,11 @@
 <script lang="ts">
  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { user } from '$lib/stores/user.store';
  import { photoZoomState } from '$lib/stores/zoom-image.store';
+  import { getAssetJobName } from '$lib/utils';
  import { clickOutside } from '$lib/utils/click-outside';
  import { getContextMenuPosition } from '$lib/utils/context-menu';
-  import { AssetJobName, type AssetResponseDto, AssetTypeEnum, api } from '@api';
+  import { AssetJobName, AssetTypeEnum, type AssetResponseDto } from '@api';
  import {
    mdiAlertOutline,
    mdiArrowLeft,
@@ -22,7 +24,6 @@
  import { createEventDispatcher } from 'svelte';
  import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
  import MenuOption from '../shared-components/context-menu/menu-option.svelte';
-  import { user } from '$lib/stores/user.store';

  export let asset: AssetResponseDto;
  export let showCopyButton: boolean;
@@ -182,16 +183,16 @@

              <MenuOption
                on:click={() => onJobClick(AssetJobName.RefreshMetadata)}
-                text={api.getAssetJobName(AssetJobName.RefreshMetadata)}
+                text={getAssetJobName(AssetJobName.RefreshMetadata)}
              />
              <MenuOption
                on:click={() => onJobClick(AssetJobName.RegenerateThumbnail)}
-                text={api.getAssetJobName(AssetJobName.RegenerateThumbnail)}
+                text={getAssetJobName(AssetJobName.RegenerateThumbnail)}
              />
              {#if asset.type === AssetTypeEnum.Video}
                <MenuOption
                  on:click={() => onJobClick(AssetJobName.TranscodeVideo)}
-                  text={api.getAssetJobName(AssetJobName.TranscodeVideo)}
+                  text={getAssetJobName(AssetJobName.TranscodeVideo)}
                />
              {/if}
            {/if}
@@ -11,6 +11,7 @@
  import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
  import { stackAssetsStore } from '$lib/stores/stacked-asset.store';
  import { user } from '$lib/stores/user.store';
+  import { getAssetJobMessage, isSharedLink } from '$lib/utils';
  import { addAssetsToAlbum, downloadFile } from '$lib/utils/asset-utils';
  import { handleError } from '$lib/utils/handle-error';
  import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
@@ -19,7 +20,6 @@
    AssetJobName,
    AssetTypeEnum,
    ReactionType,
-    api,
    type ActivityResponseDto,
    type AlbumResponseDto,
    type AssetResponseDto,
@@ -29,9 +29,13 @@
    createActivity,
    createAlbum,
    deleteActivity,
+    deleteAssets,
    getActivities,
    getActivityStatistics,
    getAllAlbums,
+    runAssetJobs,
+    updateAsset,
+    updateAssets,
  } from '@immich/sdk';
  import { mdiChevronLeft, mdiChevronRight, mdiImageBrokenVariant } from '@mdi/js';
  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
@@ -235,7 +239,7 @@
  $: asset.id && !sharedLink && handleGetAllAlbums(); // Update the album information when the asset ID changes

  const handleGetAllAlbums = async () => {
-    if (api.isSharedLink) {
+    if (isSharedLink()) {
      return;
    }

@@ -386,7 +390,7 @@

  const trashAsset = async () => {
    try {
-      await api.assetApi.deleteAssets({ assetBulkDeleteDto: { ids: [asset.id] } });
+      await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id] } });

      dispatch('action', { type: AssetAction.TRASH, asset });

@@ -401,7 +405,7 @@

  const deleteAsset = async () => {
    try {
-      await api.assetApi.deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });
+      await deleteAssets({ assetBulkDeleteDto: { ids: [asset.id], force: true } });

      dispatch('action', { type: AssetAction.DELETE, asset });

@@ -418,7 +422,7 @@

  const toggleFavorite = async () => {
    try {
-      const { data } = await api.assetApi.updateAsset({
+      const data = await updateAsset({
        id: asset.id,
        updateAssetDto: {
          isFavorite: !asset.isFavorite,
@@ -470,7 +474,7 @@

  const toggleArchive = async () => {
    try {
-      const { data } = await api.assetApi.updateAsset({
+      const data = await updateAsset({
        id: asset.id,
        updateAssetDto: {
          isArchived: !asset.isArchived,
@@ -491,8 +495,8 @@

  const handleRunJob = async (name: AssetJobName) => {
    try {
-      await api.assetApi.runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
-      notificationController.show({ type: NotificationType.Info, message: api.getAssetJobMessage(name) });
+      await runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
+      notificationController.show({ type: NotificationType.Info, message: getAssetJobMessage(name) });
    } catch (error) {
      await handleError(error, `Unable to submit job`);
    }
@@ -552,7 +556,7 @@
  const handleUnstack = async () => {
    try {
      const ids = $stackAssetsStore.map(({ id }) => id);
-      await api.assetApi.updateAssets({ assetBulkUpdateDto: { ids, removeParent: true } });
+      await updateAssets({ assetBulkUpdateDto: { ids, removeParent: true } });
      for (const child of $stackAssetsStore) {
        child.stackParentId = null;
        child.stackCount = 0;
@@ -1,15 +1,18 @@
 <script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import ChangeDate from '$lib/components/shared-components/change-date.svelte';
+  import { AppRoute, QueryParameter } from '$lib/constants';
+  import { boundingBoxesArray } from '$lib/stores/people.store';
  import { locale } from '$lib/stores/preferences.store';
  import { featureFlags } from '$lib/stores/server-config.store';
+  import { user } from '$lib/stores/user.store';
+  import { websocketStore } from '$lib/stores/websocket';
+  import { getAssetThumbnailUrl, getPeopleThumbnailUrl, isSharedLink } from '$lib/utils';
  import { getAssetFilename } from '$lib/utils/asset-utils';
-  import { type AlbumResponseDto, type AssetResponseDto, ThumbnailFormat, api } from '@api';
-  import { DateTime } from 'luxon';
-  import { createEventDispatcher, onDestroy } from 'svelte';
-  import { slide } from 'svelte/transition';
-  import { asByteUnitString } from '../../utils/byte-units';
-  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
-  import ChangeDate from '$lib/components/shared-components/change-date.svelte';
+  import { autoGrowHeight } from '$lib/utils/autogrow';
+  import { clickOutside } from '$lib/utils/click-outside';
+  import { ThumbnailFormat, type AlbumResponseDto, type AssetResponseDto } from '@api';
+  import { getAssetInfo, updateAsset } from '@immich/sdk';
  import {
    mdiCalendar,
    mdiCameraIris,
@@ -17,22 +20,21 @@
    mdiEye,
    mdiEyeOff,
    mdiImageOutline,
-    mdiMapMarkerOutline,
    mdiInformationOutline,
+    mdiMapMarkerOutline,
    mdiPencil,
  } from '@mdi/js';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import PersonSidePanel from '../faces-page/person-side-panel.svelte';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-  import Map from '../shared-components/map/map.svelte';
-  import { boundingBoxesArray } from '$lib/stores/people.store';
-  import { websocketStore } from '$lib/stores/websocket';
-  import { AppRoute, QueryParameter } from '$lib/constants';
-  import ChangeLocation from '../shared-components/change-location.svelte';
+  import { DateTime } from 'luxon';
+  import { createEventDispatcher, onDestroy } from 'svelte';
+  import { slide } from 'svelte/transition';
+  import { asByteUnitString } from '../../utils/byte-units';
  import { handleError } from '../../utils/handle-error';
-  import { user } from '$lib/stores/user.store';
-  import { autoGrowHeight } from '$lib/utils/autogrow';
-  import { clickOutside } from '$lib/utils/click-outside';
+  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import PersonSidePanel from '../faces-page/person-side-panel.svelte';
+  import ChangeLocation from '../shared-components/change-location.svelte';
+  import Map from '../shared-components/map/map.svelte';
+  import UserAvatar from '../shared-components/user-avatar.svelte';

  export let asset: AssetResponseDto;
  export let albums: AlbumResponseDto[] = [];
@@ -61,8 +63,8 @@
    description = newAsset?.exifInfo?.description || '';

    // Get latest description from server
-    if (newAsset.id && !api.isSharedLink) {
-      const { data } = await api.assetApi.getAssetInfo({ id: asset.id });
+    if (newAsset.id && !isSharedLink()) {
+      const data = await getAssetInfo({ id: asset.id });
      people = data?.people || [];

      description = data.exifInfo?.description || '';
@@ -127,9 +129,9 @@
  };

  const handleRefreshPeople = async () => {
-    await api.assetApi.getAssetInfo({ id: asset.id }).then((res) => {
-      people = res.data?.people || [];
-      textArea.value = res.data?.exifInfo?.description || '';
+    await getAssetInfo({ id: asset.id }).then((data) => {
+      people = data?.people || [];
+      textArea.value = data?.exifInfo?.description || '';
    });
    showEditFaces = false;
  };
@@ -146,10 +148,7 @@
    originalDescription = description;
    dispatch('descriptionFocusOut');
    try {
-      await api.assetApi.updateAsset({
-        id: asset.id,
-        updateAssetDto: { description },
-      });
+      await updateAsset({ id: asset.id, updateAssetDto: { description } });
    } catch (error) {
      handleError(error, 'Cannot update the description');
    }
@@ -162,7 +161,7 @@
  async function handleConfirmChangeDate(dateTimeOriginal: string) {
    isShowChangeDate = false;
    try {
-      await api.assetApi.updateAsset({ id: asset.id, updateAssetDto: { dateTimeOriginal } });
+      await updateAsset({ id: asset.id, updateAssetDto: { dateTimeOriginal } });
    } catch (error) {
      handleError(error, 'Unable to change date');
    }
@@ -174,13 +173,7 @@
    isShowChangeLocation = false;

    try {
-      await api.assetApi.updateAsset({
-        id: asset.id,
-        updateAssetDto: {
-          latitude: gps.lat,
-          longitude: gps.lng,
-        },
-      });
+      await updateAsset({ id: asset.id, updateAssetDto: { latitude: gps.lat, longitude: gps.lng } });
    } catch (error) {
      handleError(error, 'Unable to change location');
    }
@@ -219,7 +212,7 @@
    <section class="px-4 mt-10">
      {#key asset.id}
        <textarea
-          disabled={!isOwner || api.isSharedLink}
+          disabled={!isOwner || isSharedLink()}
          bind:this={textArea}
          class="max-h-[500px]
      w-full resize-none overflow-hidden border-b border-gray-500 bg-transparent text-base text-black outline-none transition-all focus:border-b-2 focus:border-immich-primary disabled:border-none dark:text-white dark:focus:border-immich-dark-primary"
@@ -238,7 +231,7 @@
    <p class="px-4 break-words whitespace-pre-line w-full text-black dark:text-white text-base">{description}</p>
  {/if}

-  {#if !api.isSharedLink && people.length > 0}
+  {#if !isSharedLink() && people.length > 0}
    <section class="px-4 py-4 text-sm">
      <div class="flex h-10 w-full items-center justify-between">
        <h2>PEOPLE</h2>
@@ -284,7 +277,7 @@
                  <ImageThumbnail
                    curve
                    shadow
-                    url={api.getPeopleThumbnailUrl(person.id)}
+                    url={getPeopleThumbnailUrl(person.id)}
                    altText={person.name}
                    title={person.name}
                    widthStyle="90px"
@@ -670,7 +663,7 @@
              alt={album.albumName}
              class="h-[50px] w-[50px] rounded object-cover"
              src={album.albumThumbnailAssetId &&
-                api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Jpeg)}
+                getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Jpeg)}
              draggable="false"
            />
          </div>
@@ -2,12 +2,13 @@
  import { fade } from 'svelte/transition';
  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
  import { api, type AssetResponseDto } from '@api';
+  import { getKey } from '$lib/utils';

  export let asset: AssetResponseDto;

  const loadAssetData = async () => {
    const { data } = await api.assetApi.serveFile(
-      { id: asset.id, isThumb: false, isWeb: false, key: api.getKey() },
+      { id: asset.id, isThumb: false, isWeb: false, key: getKey() },
      { responseType: 'blob' },
    );
    if (data instanceof Blob) {
--- a/Show More
+++ b/Show More