Use icon url from client capabilities

src/components/cardbuilder/cardBuilder.js

@@ -11,8 +11,8 @@ import browser from 'scripts/browser';
 import datetime from 'scripts/datetime';
 import dom from 'scripts/dom';
 import globalize from 'scripts/globalize';
-import imageHelper from 'scripts/imagehelper';
 import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card';
+import imageHelper from 'utils/image';
 import { randomInt } from 'utils/number';
 
 import focusManager from '../focusManager';

src/components/homesections/sections/libraryButtons.ts

@@ -4,7 +4,7 @@ import escapeHtml from 'escape-html';
 import imageLoader from 'components/images/imageLoader';
 import { appRouter } from 'components/router/appRouter';
 import globalize from 'scripts/globalize';
-import imageHelper from 'scripts/imagehelper';
+import imageHelper from 'utils/image';
 
 function getLibraryButtonsHtml(items: BaseItemDto[]) {
     let html = '';

src/controllers/dashboard/dashboard.js

@@ -12,7 +12,7 @@ import playMethodHelper from '../../components/playback/playmethodhelper';
 import cardBuilder from '../../components/cardbuilder/cardBuilder';
 import imageLoader from '../../components/images/imageLoader';
 import ActivityLog from '../../components/activitylog';
-import imageHelper from '../../scripts/imagehelper';
+import imageHelper from '../../utils/image';
 import indicators from '../../components/indicators/indicators';
 import '../../components/listview/listview.scss';
 import '../../elements/emby-button/emby-button';

src/controllers/dashboard/devices/devices.js

@@ -3,7 +3,7 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
 import loading from '../../../components/loading/loading';
 import dom from '../../../scripts/dom';
 import globalize from '../../../scripts/globalize';
-import imageHelper from '../../../scripts/imagehelper';
+import imageHelper from '../../../utils/image';
 import { formatDistanceToNow } from 'date-fns';
 import { getLocaleWithSuffix } from '../../../utils/dateFnsLocale.ts';
 import '../../../elements/emby-button/emby-button';

src/controllers/dashboard/library.js

@@ -5,7 +5,7 @@ import loading from '../../components/loading/loading';
 import libraryMenu from '../../scripts/libraryMenu';
 import globalize from '../../scripts/globalize';
 import dom from '../../scripts/dom';
-import imageHelper from '../../scripts/imagehelper';
+import imageHelper from '../../utils/image';
 import '../../components/cardbuilder/card.scss';
 import '../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator';
 import Dashboard, { pageClassOn, pageIdOn } from '../../utils/dashboard';

src/scripts/libraryMenu.js

@@ -12,7 +12,7 @@ import { pluginManager } from '../components/pluginManager';
 import groupSelectionMenu from '../plugins/syncPlay/ui/groupSelectionMenu';
 import browser from './browser';
 import globalize from './globalize';
-import imageHelper from './imagehelper';
+import imageHelper from '../utils/image';
 import { getMenuLinks } from '../scripts/settings/webSettings';
 import Dashboard, { pageClassOn } from '../utils/dashboard';
 import ServerConnections from '../components/ServerConnections';

src/utils/image.ts

@@ -1,7 +1,10 @@
+import type { DeviceInfo } from '@jellyfin/sdk/lib/generated-client/models/device-info';
+import type { SessionInfo } from '@jellyfin/sdk/lib/generated-client/models/session-info';
+
 const BASE_DEVICE_IMAGE_URL = 'assets/img/devices/';
 
 // audit note: this module is expected to return safe text for use in HTML
-function getWebDeviceIcon(browser) {
+function getWebDeviceIcon(browser: string | null | undefined) {
     switch (browser) {
         case 'Opera':
         case 'Opera TV':
@@ -31,8 +34,8 @@ function getWebDeviceIcon(browser) {
     }
 }
 
-export function getDeviceIcon(device) {
+export function getDeviceIcon(info: DeviceInfo | SessionInfo) {
-    switch (device.AppName || device.Client) {
+    switch ((info as DeviceInfo).AppName || (info as SessionInfo).Client) {
         case 'Samsung Smart TV':
             return BASE_DEVICE_IMAGE_URL + 'samsung.svg';
         case 'Xbox One':
@@ -58,13 +61,13 @@ export function getDeviceIcon(device) {
         case 'Finamp':
             return BASE_DEVICE_IMAGE_URL + 'finamp.svg';
         case 'Jellyfin Web':
-            return getWebDeviceIcon(device.Name || device.DeviceName);
+            return getWebDeviceIcon((info as DeviceInfo).Name || (info as SessionInfo).DeviceName);
         default:
-            return BASE_DEVICE_IMAGE_URL + 'other.svg';
+            return info.Capabilities?.IconUrl || BASE_DEVICE_IMAGE_URL + 'other.svg';
     }
 }
 
-export function getLibraryIcon(library) {
+export function getLibraryIcon(library: string | null | undefined) {
     switch (library) {
         case 'movies':
             return 'video_library';
@@ -94,6 +97,6 @@ export function getLibraryIcon(library) {
 }
 
 export default {
-    getDeviceIcon: getDeviceIcon,
+    getDeviceIcon,
-    getLibraryIcon: getLibraryIcon
+    getLibraryIcon
 };