From a14092aaf4f3d8aff53260bcaabf6ea12316e590 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Tue, 5 Nov 2024 23:28:43 +0100
Subject: [PATCH] refactor: replace deprecated getItemImageUrl function (#2488)

---
 .../src/components/Item/Metadata/MetadataEditor.vue |  3 ++-
 .../src/components/Item/Metadata/PersonEditor.vue   |  3 ++-
 frontend/src/utils/images.ts                        | 13 +++++++++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Item/Metadata/MetadataEditor.vue b/frontend/src/components/Item/Metadata/MetadataEditor.vue
index bb3fff0963d..723d151d352 100644
--- a/frontend/src/components/Item/Metadata/MetadataEditor.vue
+++ b/frontend/src/components/Item/Metadata/MetadataEditor.vue
@@ -158,7 +158,7 @@
                     v-if="item.Id && item.PrimaryImageTag"
                     :alt="$t('person')"
                     :src="
-                      remote.sdk.api?.getItemImageUrl(
+                      getItemImageUrl(
                         item.Id,
                         ImageType.Primary
                       )
@@ -234,6 +234,7 @@ import { format, formatISO } from 'date-fns';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { watchImmediate } from '@vueuse/core';
+import { getItemImageUrl } from '@/utils/images';
 import { isArray } from '@/utils/validation';
 import { remote } from '@/plugins/remote';
 import { useSnackbar } from '@/composables/use-snackbar';
diff --git a/frontend/src/components/Item/Metadata/PersonEditor.vue b/frontend/src/components/Item/Metadata/PersonEditor.vue
index adee5401fb7..12e55163061 100644
--- a/frontend/src/components/Item/Metadata/PersonEditor.vue
+++ b/frontend/src/components/Item/Metadata/PersonEditor.vue
@@ -14,7 +14,7 @@
               class="ml-2">
               <JImg
                 :src="
-                  person?.Id && $remote.sdk.api?.getItemImageUrl(person.Id, ImageType.Primary)
+                  person?.Id && getItemImageUrl(person.Id, ImageType.Primary)
                 "
                 :alt="$t('person')">
                 <template #placeholder>
@@ -82,6 +82,7 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { type BaseItemPerson, ImageType } from '@jellyfin/sdk/lib/generated-client';
 import { watchImmediate } from '@vueuse/core';
+import { getItemImageUrl } from '@/utils/images';
 
 const { person } = defineProps<{ person: BaseItemPerson | undefined }>();
 
diff --git a/frontend/src/utils/images.ts b/frontend/src/utils/images.ts
index 3a3990f3182..b176cba9589 100644
--- a/frontend/src/utils/images.ts
+++ b/frontend/src/utils/images.ts
@@ -8,6 +8,8 @@ import {
   type BaseItemPerson,
   ImageType
 } from '@jellyfin/sdk/lib/generated-client';
+import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
+import type { ImageUrlsApi } from '@jellyfin/sdk/lib/utils/api/image-urls-api';
 import { remote } from '@/plugins/remote';
 import { CardShapes, getShapeFromItemType, isPerson } from '@/utils/items';
 
@@ -20,6 +22,13 @@ const excludedBlurhashTypes = Object.freeze(
   new Set<ImageType>([ImageType.Logo])
 );
 
+/**
+ * Gets the image URL given an item id and the image type requested
+ */
+export function getItemImageUrl(...args: Parameters<ImageUrlsApi['getItemImageUrlById']>) {
+  return remote.sdk.newUserApi(getImageApi).getItemImageUrlById(...args);
+}
+
 /**
  * Gets the tag of the image of an specific item and type.
  *
@@ -347,7 +356,7 @@ export function getImageInfo(
     };
   }
 
-  const url_string = remote.sdk.api?.getItemImageUrl(itemId, imgType);
+  const url_string = getItemImageUrl(itemId, imgType);
 
   if (imgTag && imgType && url_string) {
     url = new URL(url_string);
@@ -420,7 +429,7 @@ export function getLogo(
   }
 
   if (imgTag && imgType && itemId) {
-    url = new URL(remote.sdk.api?.getItemImageUrl(itemId, imgType) ?? '');
+    url = new URL(getItemImageUrl(itemId, imgType));
 
     const parameters: Record<string, string> = {
       imgTag,