From aec90cbc96598a57a597fae91d70b707272bdb85 Mon Sep 17 00:00:00 2001
From: TheMelmacian <76712303+TheMelmacian@users.noreply.github.com>
Date: Fri, 7 Jul 2023 22:51:19 +0200
Subject: [PATCH 1/6] use random backdrop image on item details pages

---
 CONTRIBUTORS.md                      |  1 +
 src/controllers/itemDetails/index.js | 29 ++-------------
 src/utils/url.ts                     | 55 ++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index 52006a7b46..eccfd4cf27 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -65,6 +65,7 @@
  - [Merlin Sievers](https://github.com/dann-merlin)
  - [Fishbigger](https://github.com/fishbigger)
  - [sleepycatcoding](https://github.com/sleepycatcoding)
+ - [TheMelmacian](https://github.com/TheMelmacian)
 
 # Emby Contributors
 
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index 37f5d3108a..719c1b2671 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -36,6 +36,7 @@ import Dashboard from '../../utils/dashboard';
 import ServerConnections from '../../components/ServerConnections';
 import confirm from '../../components/confirm/confirm';
 import { download } from '../../scripts/fileDownloader';
+import { getRandomItemBackdropImageUrl } from '../../utils/url';
 
 function autoFocus(container) {
     import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
@@ -501,34 +502,12 @@ function renderDetailPageBackdrop(page, item, apiClient) {
         return false;
     }
 
-    let imgUrl;
     let hasbackdrop = false;
     const itemBackdropElement = page.querySelector('#itemBackdrop');
 
-    if (item.BackdropImageTags?.length) {
-        imgUrl = apiClient.getScaledImageUrl(item.Id, {
-            type: 'Backdrop',
-            maxWidth: dom.getScreenWidth(),
-            index: 0,
-            tag: item.BackdropImageTags[0]
-        });
-        imageLoader.lazyImage(itemBackdropElement, imgUrl);
-        hasbackdrop = true;
-    } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
-        imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
-            type: 'Backdrop',
-            maxWidth: dom.getScreenWidth(),
-            index: 0,
-            tag: item.ParentBackdropImageTags[0]
-        });
-        imageLoader.lazyImage(itemBackdropElement, imgUrl);
-        hasbackdrop = true;
-    } else if (item.ImageTags?.Primary) {
-        imgUrl = apiClient.getScaledImageUrl(item.Id, {
-            type: 'Primary',
-            maxWidth: dom.getScreenWidth(),
-            tag: item.ImageTags.Primary
-        });
+    const imgUrl = getRandomItemBackdropImageUrl(apiClient, item, { maxWitdh: dom.getScreenWidth() });
+
+    if (imgUrl) {
         imageLoader.lazyImage(itemBackdropElement, imgUrl);
         hasbackdrop = true;
     } else {
diff --git a/src/utils/url.ts b/src/utils/url.ts
index 1c65b2343a..e65df92ab3 100644
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -1,3 +1,7 @@
+import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import { randomInt } from './number';
+import { ApiClient } from 'jellyfin-apiclient';
+
 /**
  * Gets the url search string.
  * This function should be used instead of location.search alone, because the app router
@@ -33,3 +37,54 @@ export const getParameterByName = (name: string, url?: string | null | undefined
     // eslint-disable-next-line compat/compat
     return new URLSearchParams(url).get(name) || '';
 };
+
+export interface ScaleImageOptions {
+    maxWidth?: number;
+    width?: number;
+    maxHeight?: number;
+    height?: number;
+    fillWidth?: number;
+    fillHeight?: number;
+    quality?: number;
+}
+
+/**
+ * Returns the url of a random backdrop image of an item.
+ * If the item has no backdrop image, the url of a random backdrop image of the parent item is returned.
+ * Falls back to the primary image (cover) of the item, if neither the item nor it's parent have at least one backdrop image.
+ * Returns undefined if no usable image was found.
+ * @param apiClient The ApiClient to generate the url.
+ * @param item The item for which the backdrop image is requested.
+ * @param options Optional; allows to scale the backdrop image.
+ * @returns The url of a random backdrop image of the provided item.
+ */
+export const getRandomItemBackdropImageUrl = (apiClient: ApiClient, item: BaseItemDto, options: ScaleImageOptions = {}): string | undefined => {
+    let imgUrl;
+
+    if (item.BackdropImageTags && item.BackdropImageTags.length) {
+        const backdropImgIndex = randomInt(0, item.BackdropImageTags.length - 1);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        imgUrl = apiClient.getScaledImageUrl(item.Id!, {
+            type: 'Backdrop',
+            index: backdropImgIndex,
+            tag: item.BackdropImageTags[backdropImgIndex],
+            ...options
+        });
+    } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
+        const backdropImgIndex = randomInt(0, item.ParentBackdropImageTags.length - 1);
+        imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
+            type: 'Backdrop',
+            index: backdropImgIndex,
+            tag: item.ParentBackdropImageTags[backdropImgIndex],
+            ...options
+        });
+    } else if (item.ImageTags && item.ImageTags.Primary) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        imgUrl = apiClient.getScaledImageUrl(item.Id!, {
+            type: 'Primary',
+            tag: item.ImageTags.Primary,
+            ...options
+        });
+    }
+    return imgUrl;
+};

From 23a22d6b24c7e2808c2fb14a315061a9f5ce5c37 Mon Sep 17 00:00:00 2001
From: TheMelmacian <76712303+TheMelmacian@users.noreply.github.com>
Date: Fri, 7 Jul 2023 22:54:44 +0200
Subject: [PATCH 2/6] use random backdrop image in video player

---
 src/components/playback/playbackmanager.js | 25 ++--------------------
 src/plugins/htmlVideoPlayer/plugin.js      |  8 ++++++-
 2 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js
index 308acd79f5..8e09a45de0 100644
--- a/src/components/playback/playbackmanager.js
+++ b/src/components/playback/playbackmanager.js
@@ -14,6 +14,7 @@ import alert from '../alert';
 import { PluginType } from '../../types/plugin.ts';
 import { includesAny } from '../../utils/container.ts';
 import { getItems } from '../../utils/jellyfin-apiclient/getItems.ts';
+import { getRandomItemBackdropImageUrl } from '../../utils/url';
 
 const UNLIMITED_ITEMS = -1;
 
@@ -154,28 +155,6 @@ function mergePlaybackQueries(obj1, obj2) {
     return query;
 }
 
-function backdropImageUrl(apiClient, item, options) {
-    options = options || {};
-    options.type = options.type || 'Backdrop';
-
-    // If not resizing, get the original image
-    if (!options.maxWidth && !options.width && !options.maxHeight && !options.height && !options.fillWidth && !options.fillHeight) {
-        options.quality = 100;
-    }
-
-    if (item.BackdropImageTags?.length) {
-        options.tag = item.BackdropImageTags[0];
-        return apiClient.getScaledImageUrl(item.Id, options);
-    }
-
-    if (item.ParentBackdropImageTags?.length) {
-        options.tag = item.ParentBackdropImageTags[0];
-        return apiClient.getScaledImageUrl(item.ParentBackdropItemId, options);
-    }
-
-    return null;
-}
-
 function getMimeType(type, container) {
     container = (container || '').toLowerCase();
 
@@ -2693,7 +2672,7 @@ class PlaybackManager {
                 title: item.Name
             };
 
-            const backdropUrl = backdropImageUrl(apiClient, item, {});
+            const backdropUrl = getRandomItemBackdropImageUrl(apiClient, item);
             if (backdropUrl) {
                 resultInfo.backdropUrl = backdropUrl;
             }
diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js
index 9e5a5865ee..2283fc54c0 100644
--- a/src/plugins/htmlVideoPlayer/plugin.js
+++ b/src/plugins/htmlVideoPlayer/plugin.js
@@ -1664,7 +1664,13 @@ export class HtmlVideoPlayer {
                 }
             }
 
-            return Promise.resolve(dlg.querySelector('video'));
+            const videoElement = dlg.querySelector('video');
+            if (options.backdropUrl) {
+                // update backdrop image
+                videoElement.poster = options.backdropUrl;
+            }
+
+            return Promise.resolve(videoElement);
         }
     }
 

From 5df5f6cdb2824040c0f65a989dcbe9d2ac17399f Mon Sep 17 00:00:00 2001
From: TheMelmacian <76712303+TheMelmacian@users.noreply.github.com>
Date: Wed, 19 Jul 2023 23:56:09 +0200
Subject: [PATCH 3/6] don't use random backdrop in item header

---
 src/components/playback/playbackmanager.js |  4 ++--
 src/controllers/itemDetails/index.js       |  4 ++--
 src/utils/url.ts                           | 19 ++++++++++---------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js
index 8e09a45de0..29fe4aaedc 100644
--- a/src/components/playback/playbackmanager.js
+++ b/src/components/playback/playbackmanager.js
@@ -14,7 +14,7 @@ import alert from '../alert';
 import { PluginType } from '../../types/plugin.ts';
 import { includesAny } from '../../utils/container.ts';
 import { getItems } from '../../utils/jellyfin-apiclient/getItems.ts';
-import { getRandomItemBackdropImageUrl } from '../../utils/url';
+import { getItemBackdropImageUrl } from '../../utils/url';
 
 const UNLIMITED_ITEMS = -1;
 
@@ -2672,7 +2672,7 @@ class PlaybackManager {
                 title: item.Name
             };
 
-            const backdropUrl = getRandomItemBackdropImageUrl(apiClient, item);
+            const backdropUrl = getItemBackdropImageUrl(apiClient, item, true);
             if (backdropUrl) {
                 resultInfo.backdropUrl = backdropUrl;
             }
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index 719c1b2671..37c559f888 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -36,7 +36,7 @@ import Dashboard from '../../utils/dashboard';
 import ServerConnections from '../../components/ServerConnections';
 import confirm from '../../components/confirm/confirm';
 import { download } from '../../scripts/fileDownloader';
-import { getRandomItemBackdropImageUrl } from '../../utils/url';
+import { getItemBackdropImageUrl } from '../../utils/url';
 
 function autoFocus(container) {
     import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
@@ -505,7 +505,7 @@ function renderDetailPageBackdrop(page, item, apiClient) {
     let hasbackdrop = false;
     const itemBackdropElement = page.querySelector('#itemBackdrop');
 
-    const imgUrl = getRandomItemBackdropImageUrl(apiClient, item, { maxWitdh: dom.getScreenWidth() });
+    const imgUrl = getItemBackdropImageUrl(apiClient, item, false, { maxWitdh: dom.getScreenWidth() });
 
     if (imgUrl) {
         imageLoader.lazyImage(itemBackdropElement, imgUrl);
diff --git a/src/utils/url.ts b/src/utils/url.ts
index e65df92ab3..1768807bc8 100644
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -49,20 +49,21 @@ export interface ScaleImageOptions {
 }
 
 /**
- * Returns the url of a random backdrop image of an item.
- * If the item has no backdrop image, the url of a random backdrop image of the parent item is returned.
+ * Returns the url of the first or a random backdrop image of an item.
+ * If the item has no backdrop image, the url of the first or a random backdrop image of the parent item is returned.
  * Falls back to the primary image (cover) of the item, if neither the item nor it's parent have at least one backdrop image.
  * Returns undefined if no usable image was found.
  * @param apiClient The ApiClient to generate the url.
  * @param item The item for which the backdrop image is requested.
+ * @param random If set to true and the item has more than one backdrop, a random image is returned.
  * @param options Optional; allows to scale the backdrop image.
- * @returns The url of a random backdrop image of the provided item.
+ * @returns The url of the first or a random backdrop image of the provided item.
  */
-export const getRandomItemBackdropImageUrl = (apiClient: ApiClient, item: BaseItemDto, options: ScaleImageOptions = {}): string | undefined => {
+export const getItemBackdropImageUrl = (apiClient: ApiClient, item: BaseItemDto, random = false, options: ScaleImageOptions = {}): string | undefined => {
     let imgUrl;
 
-    if (item.BackdropImageTags && item.BackdropImageTags.length) {
-        const backdropImgIndex = randomInt(0, item.BackdropImageTags.length - 1);
+    if (item.BackdropImageTags?.length) {
+        const backdropImgIndex = random ? randomInt(0, item.BackdropImageTags.length - 1) : 0;
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         imgUrl = apiClient.getScaledImageUrl(item.Id!, {
             type: 'Backdrop',
@@ -70,15 +71,15 @@ export const getRandomItemBackdropImageUrl = (apiClient: ApiClient, item: BaseIt
             tag: item.BackdropImageTags[backdropImgIndex],
             ...options
         });
-    } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
-        const backdropImgIndex = randomInt(0, item.ParentBackdropImageTags.length - 1);
+    } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags?.length) {
+        const backdropImgIndex = random ? randomInt(0, item.ParentBackdropImageTags.length - 1) : 0;
         imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
             type: 'Backdrop',
             index: backdropImgIndex,
             tag: item.ParentBackdropImageTags[backdropImgIndex],
             ...options
         });
-    } else if (item.ImageTags && item.ImageTags.Primary) {
+    } else if (item.ImageTags?.Primary) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         imgUrl = apiClient.getScaledImageUrl(item.Id!, {
             type: 'Primary',

From 8ec943bc306e62941dd80600def666218d9d7689 Mon Sep 17 00:00:00 2001
From: TheMelmacian <76712303+TheMelmacian@users.noreply.github.com>
Date: Sat, 9 Sep 2023 15:24:52 +0200
Subject: [PATCH 4/6] move function to get backdrop image to api-client utils

---
 src/components/playback/playbackmanager.js    |  2 +-
 src/controllers/itemDetails/index.js          |  2 +-
 src/utils/jellyfin-apiclient/BackdropImage.ts | 55 ++++++++++++++++++
 src/utils/url.ts                              | 56 -------------------
 4 files changed, 57 insertions(+), 58 deletions(-)
 create mode 100644 src/utils/jellyfin-apiclient/BackdropImage.ts

diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js
index 29fe4aaedc..a8192885c6 100644
--- a/src/components/playback/playbackmanager.js
+++ b/src/components/playback/playbackmanager.js
@@ -14,7 +14,7 @@ import alert from '../alert';
 import { PluginType } from '../../types/plugin.ts';
 import { includesAny } from '../../utils/container.ts';
 import { getItems } from '../../utils/jellyfin-apiclient/getItems.ts';
-import { getItemBackdropImageUrl } from '../../utils/url';
+import { getItemBackdropImageUrl } from '../../utils/jellyfin-apiclient/BackdropImage';
 
 const UNLIMITED_ITEMS = -1;
 
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index 37c559f888..1de640f6ec 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -36,7 +36,7 @@ import Dashboard from '../../utils/dashboard';
 import ServerConnections from '../../components/ServerConnections';
 import confirm from '../../components/confirm/confirm';
 import { download } from '../../scripts/fileDownloader';
-import { getItemBackdropImageUrl } from '../../utils/url';
+import { getItemBackdropImageUrl } from '../../utils/jellyfin-apiclient/BackdropImage';
 
 function autoFocus(container) {
     import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
diff --git a/src/utils/jellyfin-apiclient/BackdropImage.ts b/src/utils/jellyfin-apiclient/BackdropImage.ts
new file mode 100644
index 0000000000..2d23fd506f
--- /dev/null
+++ b/src/utils/jellyfin-apiclient/BackdropImage.ts
@@ -0,0 +1,55 @@
+import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import { randomInt } from '../number';
+import { ApiClient } from 'jellyfin-apiclient';
+
+export interface ScaleImageOptions {
+    maxWidth?: number;
+    width?: number;
+    maxHeight?: number;
+    height?: number;
+    fillWidth?: number;
+    fillHeight?: number;
+    quality?: number;
+}
+
+/**
+ * Returns the url of the first or a random backdrop image of an item.
+ * If the item has no backdrop image, the url of the first or a random backdrop image of the parent item is returned.
+ * Falls back to the primary image (cover) of the item, if neither the item nor it's parent have at least one backdrop image.
+ * Returns undefined if no usable image was found.
+ * @param apiClient The ApiClient to generate the url.
+ * @param item The item for which the backdrop image is requested.
+ * @param random If set to true and the item has more than one backdrop, a random image is returned.
+ * @param options Optional; allows to scale the backdrop image.
+ * @returns The url of the first or a random backdrop image of the provided item.
+ */
+export const getItemBackdropImageUrl = (apiClient: ApiClient, item: BaseItemDto, random = false, options: ScaleImageOptions = {}): string | undefined => {
+    let imgUrl;
+
+    if (item.BackdropImageTags?.length) {
+        const backdropImgIndex = random ? randomInt(0, item.BackdropImageTags.length - 1) : 0;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        imgUrl = apiClient.getScaledImageUrl(item.Id!, {
+            type: 'Backdrop',
+            index: backdropImgIndex,
+            tag: item.BackdropImageTags[backdropImgIndex],
+            ...options
+        });
+    } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags?.length) {
+        const backdropImgIndex = random ? randomInt(0, item.ParentBackdropImageTags.length - 1) : 0;
+        imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
+            type: 'Backdrop',
+            index: backdropImgIndex,
+            tag: item.ParentBackdropImageTags[backdropImgIndex],
+            ...options
+        });
+    } else if (item.ImageTags?.Primary) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        imgUrl = apiClient.getScaledImageUrl(item.Id!, {
+            type: 'Primary',
+            tag: item.ImageTags.Primary,
+            ...options
+        });
+    }
+    return imgUrl;
+};
diff --git a/src/utils/url.ts b/src/utils/url.ts
index 1768807bc8..1c65b2343a 100644
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -1,7 +1,3 @@
-import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import { randomInt } from './number';
-import { ApiClient } from 'jellyfin-apiclient';
-
 /**
  * Gets the url search string.
  * This function should be used instead of location.search alone, because the app router
@@ -37,55 +33,3 @@ export const getParameterByName = (name: string, url?: string | null | undefined
     // eslint-disable-next-line compat/compat
     return new URLSearchParams(url).get(name) || '';
 };
-
-export interface ScaleImageOptions {
-    maxWidth?: number;
-    width?: number;
-    maxHeight?: number;
-    height?: number;
-    fillWidth?: number;
-    fillHeight?: number;
-    quality?: number;
-}
-
-/**
- * Returns the url of the first or a random backdrop image of an item.
- * If the item has no backdrop image, the url of the first or a random backdrop image of the parent item is returned.
- * Falls back to the primary image (cover) of the item, if neither the item nor it's parent have at least one backdrop image.
- * Returns undefined if no usable image was found.
- * @param apiClient The ApiClient to generate the url.
- * @param item The item for which the backdrop image is requested.
- * @param random If set to true and the item has more than one backdrop, a random image is returned.
- * @param options Optional; allows to scale the backdrop image.
- * @returns The url of the first or a random backdrop image of the provided item.
- */
-export const getItemBackdropImageUrl = (apiClient: ApiClient, item: BaseItemDto, random = false, options: ScaleImageOptions = {}): string | undefined => {
-    let imgUrl;
-
-    if (item.BackdropImageTags?.length) {
-        const backdropImgIndex = random ? randomInt(0, item.BackdropImageTags.length - 1) : 0;
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        imgUrl = apiClient.getScaledImageUrl(item.Id!, {
-            type: 'Backdrop',
-            index: backdropImgIndex,
-            tag: item.BackdropImageTags[backdropImgIndex],
-            ...options
-        });
-    } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags?.length) {
-        const backdropImgIndex = random ? randomInt(0, item.ParentBackdropImageTags.length - 1) : 0;
-        imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
-            type: 'Backdrop',
-            index: backdropImgIndex,
-            tag: item.ParentBackdropImageTags[backdropImgIndex],
-            ...options
-        });
-    } else if (item.ImageTags?.Primary) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        imgUrl = apiClient.getScaledImageUrl(item.Id!, {
-            type: 'Primary',
-            tag: item.ImageTags.Primary,
-            ...options
-        });
-    }
-    return imgUrl;
-};

From 2b547f5a5313b47c6fac9142ae65c8762dd6e734 Mon Sep 17 00:00:00 2001
From: TheMelmacian <76712303+TheMelmacian@users.noreply.github.com>
Date: Sat, 9 Sep 2023 15:28:50 +0200
Subject: [PATCH 5/6] small improvements

---
 src/utils/jellyfin-apiclient/BackdropImage.ts | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/utils/jellyfin-apiclient/BackdropImage.ts b/src/utils/jellyfin-apiclient/BackdropImage.ts
index 2d23fd506f..82387b8a72 100644
--- a/src/utils/jellyfin-apiclient/BackdropImage.ts
+++ b/src/utils/jellyfin-apiclient/BackdropImage.ts
@@ -24,12 +24,9 @@ export interface ScaleImageOptions {
  * @returns The url of the first or a random backdrop image of the provided item.
  */
 export const getItemBackdropImageUrl = (apiClient: ApiClient, item: BaseItemDto, random = false, options: ScaleImageOptions = {}): string | undefined => {
-    let imgUrl;
-
-    if (item.BackdropImageTags?.length) {
+    if (item.Id && item.BackdropImageTags?.length) {
         const backdropImgIndex = random ? randomInt(0, item.BackdropImageTags.length - 1) : 0;
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        imgUrl = apiClient.getScaledImageUrl(item.Id!, {
+        return apiClient.getScaledImageUrl(item.Id, {
             type: 'Backdrop',
             index: backdropImgIndex,
             tag: item.BackdropImageTags[backdropImgIndex],
@@ -37,19 +34,19 @@ export const getItemBackdropImageUrl = (apiClient: ApiClient, item: BaseItemDto,
         });
     } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags?.length) {
         const backdropImgIndex = random ? randomInt(0, item.ParentBackdropImageTags.length - 1) : 0;
-        imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
+        return apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
             type: 'Backdrop',
             index: backdropImgIndex,
             tag: item.ParentBackdropImageTags[backdropImgIndex],
             ...options
         });
-    } else if (item.ImageTags?.Primary) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        imgUrl = apiClient.getScaledImageUrl(item.Id!, {
+    } else if (item.Id && item.ImageTags?.Primary) {
+        return apiClient.getScaledImageUrl(item.Id, {
             type: 'Primary',
             tag: item.ImageTags.Primary,
             ...options
         });
+    } else {
+        return undefined;
     }
-    return imgUrl;
 };

From 5d6756778b3236dcdfa7f8d2b0a1b21f4fb545d4 Mon Sep 17 00:00:00 2001
From: TheMelmacian <76712303+TheMelmacian@users.noreply.github.com>
Date: Tue, 12 Sep 2023 11:07:27 +0200
Subject: [PATCH 6/6] apply suggested changes from code review

---
 src/components/playback/playbackmanager.js     |  4 ++--
 src/controllers/itemDetails/index.js           |  4 ++--
 .../{BackdropImage.ts => backdropImage.ts}     | 18 +++++++++---------
 3 files changed, 13 insertions(+), 13 deletions(-)
 rename src/utils/jellyfin-apiclient/{BackdropImage.ts => backdropImage.ts} (82%)

diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js
index a8192885c6..15de6a7e26 100644
--- a/src/components/playback/playbackmanager.js
+++ b/src/components/playback/playbackmanager.js
@@ -14,7 +14,7 @@ import alert from '../alert';
 import { PluginType } from '../../types/plugin.ts';
 import { includesAny } from '../../utils/container.ts';
 import { getItems } from '../../utils/jellyfin-apiclient/getItems.ts';
-import { getItemBackdropImageUrl } from '../../utils/jellyfin-apiclient/BackdropImage';
+import { getItemBackdropImageUrl } from '../../utils/jellyfin-apiclient/backdropImage';
 
 const UNLIMITED_ITEMS = -1;
 
@@ -2672,7 +2672,7 @@ class PlaybackManager {
                 title: item.Name
             };
 
-            const backdropUrl = getItemBackdropImageUrl(apiClient, item, true);
+            const backdropUrl = getItemBackdropImageUrl(apiClient, item, {}, true);
             if (backdropUrl) {
                 resultInfo.backdropUrl = backdropUrl;
             }
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index 1de640f6ec..102940f65c 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -36,7 +36,7 @@ import Dashboard from '../../utils/dashboard';
 import ServerConnections from '../../components/ServerConnections';
 import confirm from '../../components/confirm/confirm';
 import { download } from '../../scripts/fileDownloader';
-import { getItemBackdropImageUrl } from '../../utils/jellyfin-apiclient/BackdropImage';
+import { getItemBackdropImageUrl } from '../../utils/jellyfin-apiclient/backdropImage';
 
 function autoFocus(container) {
     import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
@@ -505,7 +505,7 @@ function renderDetailPageBackdrop(page, item, apiClient) {
     let hasbackdrop = false;
     const itemBackdropElement = page.querySelector('#itemBackdrop');
 
-    const imgUrl = getItemBackdropImageUrl(apiClient, item, false, { maxWitdh: dom.getScreenWidth() });
+    const imgUrl = getItemBackdropImageUrl(apiClient, item, { maxWitdh: dom.getScreenWidth() }, false);
 
     if (imgUrl) {
         imageLoader.lazyImage(itemBackdropElement, imgUrl);
diff --git a/src/utils/jellyfin-apiclient/BackdropImage.ts b/src/utils/jellyfin-apiclient/backdropImage.ts
similarity index 82%
rename from src/utils/jellyfin-apiclient/BackdropImage.ts
rename to src/utils/jellyfin-apiclient/backdropImage.ts
index 82387b8a72..2f9b3c5da8 100644
--- a/src/utils/jellyfin-apiclient/BackdropImage.ts
+++ b/src/utils/jellyfin-apiclient/backdropImage.ts
@@ -1,6 +1,7 @@
-import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models/base-item-dto';
+import type { ApiClient } from 'jellyfin-apiclient';
+import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
 import { randomInt } from '../number';
-import { ApiClient } from 'jellyfin-apiclient';
 
 export interface ScaleImageOptions {
     maxWidth?: number;
@@ -19,15 +20,15 @@ export interface ScaleImageOptions {
  * Returns undefined if no usable image was found.
  * @param apiClient The ApiClient to generate the url.
  * @param item The item for which the backdrop image is requested.
- * @param random If set to true and the item has more than one backdrop, a random image is returned.
  * @param options Optional; allows to scale the backdrop image.
+ * @param random If set to true and the item has more than one backdrop, a random image is returned.
  * @returns The url of the first or a random backdrop image of the provided item.
  */
-export const getItemBackdropImageUrl = (apiClient: ApiClient, item: BaseItemDto, random = false, options: ScaleImageOptions = {}): string | undefined => {
+export const getItemBackdropImageUrl = (apiClient: ApiClient, item: BaseItemDto, options: ScaleImageOptions = {}, random = false): string | undefined => {
     if (item.Id && item.BackdropImageTags?.length) {
         const backdropImgIndex = random ? randomInt(0, item.BackdropImageTags.length - 1) : 0;
         return apiClient.getScaledImageUrl(item.Id, {
-            type: 'Backdrop',
+            type: ImageType.Backdrop,
             index: backdropImgIndex,
             tag: item.BackdropImageTags[backdropImgIndex],
             ...options
@@ -35,18 +36,17 @@ export const getItemBackdropImageUrl = (apiClient: ApiClient, item: BaseItemDto,
     } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags?.length) {
         const backdropImgIndex = random ? randomInt(0, item.ParentBackdropImageTags.length - 1) : 0;
         return apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
-            type: 'Backdrop',
+            type: ImageType.Backdrop,
             index: backdropImgIndex,
             tag: item.ParentBackdropImageTags[backdropImgIndex],
             ...options
         });
     } else if (item.Id && item.ImageTags?.Primary) {
         return apiClient.getScaledImageUrl(item.Id, {
-            type: 'Primary',
+            type: ImageType.Primary,
             tag: item.ImageTags.Primary,
             ...options
         });
-    } else {
-        return undefined;
     }
+    return undefined;
 };