Update dependency hls.js to v1.6.15

Translation: Jellyfin/Jellyfin Web
Translate-URL: https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/es_419/

.github/CODEOWNERS

@@ -1 +1,5 @@
 *               @jellyfin/web
+# Joshua must review all changes to bump_version
+bump_version    @joshuaboniface
+# Core must approve all changes within the repo config
+.github/        @jellyfin/core

.github/workflows/__codeql.yml

@@ -20,21 +20,21 @@ jobs:
 
     steps:
       - name: Checkout repository ⬇️
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
         with:
           ref: ${{ inputs.commit }}
           show-progress: false
 
       - name: Initialize CodeQL 🛠️
-        uses: github/codeql-action/init@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
+        uses: github/codeql-action/init@c3d42c5d08633d8b33635fbd94b000a0e2585b3c # v3.31.4
         with:
           queries: security-and-quality
           languages: ${{ matrix.language }}
 
       - name: Autobuild 📦
-        uses: github/codeql-action/autobuild@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
+        uses: github/codeql-action/autobuild@c3d42c5d08633d8b33635fbd94b000a0e2585b3c # v3.31.4
 
       - name: Perform CodeQL Analysis 🧪
-        uses: github/codeql-action/analyze@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
+        uses: github/codeql-action/analyze@c3d42c5d08633d8b33635fbd94b000a0e2585b3c # v3.31.4
         with:
           category: '/language:${{matrix.language}}'

.github/workflows/__package.yml

@@ -14,7 +14,7 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
         with:
           ref: ${{ inputs.commit || github.sha }}
 

.github/workflows/__quality_checks.yml

@@ -14,13 +14,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
         with:
           ref: ${{ inputs.commit }}
           show-progress: false
 
       - name: Scan
-        uses: actions/dependency-review-action@595b5aeba73380359d98a5e087f648dbb0edce1b # v4.7.3
+        uses: actions/dependency-review-action@3c4e3dcb1aa7874d2c16be7d79418e9b7efd6261 # v4.8.2
         with:
           ## Workaround from https://github.com/actions/dependency-review-action/issues/456
           ## TODO: Remove when necessary
@@ -42,7 +42,7 @@ jobs:
 
     steps:
       - name: Checkout ⬇️
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
         with:
           ref: ${{ inputs.commit }}
           show-progress: false

.github/workflows/pull_request.yml

@@ -80,7 +80,7 @@ jobs:
     
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
         with:
           ref: ${{ github.event.pull_request.head.sha }}
     
@@ -95,6 +95,6 @@ jobs:
         run: npm ci --no-audit
     
       - name: Run eslint
-        uses: CatChen/eslint-suggestion-action@4dda35decf912ab18ea3e071acec2c6c2eda00b6 # v4.1.18
+        uses: CatChen/eslint-suggestion-action@4ee415529307a8ca0260b4a3775484802523e5af # v4.1.19
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "jellyfin-web",
-  "version": "10.11.6",
+  "version": "10.12.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "jellyfin-web",
-      "version": "10.11.6",
+      "version": "10.12.0",
       "license": "GPL-2.0-or-later",
       "dependencies": {
         "@emotion/react": "11.14.0",
@@ -18,7 +18,7 @@
         "@fontsource/noto-sans-sc": "5.2.6",
         "@fontsource/noto-sans-tc": "5.2.6",
         "@jellyfin/libass-wasm": "4.2.3",
-        "@jellyfin/sdk": "0.12.0",
+        "@jellyfin/sdk": "0.0.0-unstable.202512091852",
         "@jellyfin/ux-web": "1.0.0",
         "@mui/icons-material": "6.4.12",
         "@mui/material": "6.4.12",
@@ -40,7 +40,7 @@
         "flv.js": "1.6.2",
         "headroom.js": "0.12.0",
         "history": "5.3.0",
-        "hls.js": "1.6.13",
+        "hls.js": "1.6.15",
         "intersection-observer": "0.12.2",
         "jellyfin-apiclient": "1.11.0",
         "jquery": "3.7.1",
@@ -129,6 +129,7 @@
         "ts-loader": "9.5.2",
         "typescript": "5.8.3",
         "typescript-eslint": "8.35.1",
+        "vite-tsconfig-paths": "5.1.4",
         "vitest": "3.2.4",
         "webpack": "5.99.9",
         "webpack-bundle-analyzer": "4.10.2",
@@ -4129,9 +4130,9 @@
       "license": "LGPL-2.1-or-later AND (FTL OR GPL-2.0-or-later) AND MIT AND MIT-Modern-Variant AND ISC AND NTP AND Zlib AND BSL-1.0"
     },
     "node_modules/@jellyfin/sdk": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@jellyfin/sdk/-/sdk-0.12.0.tgz",
-      "integrity": "sha512-do3cks7TD316Qw27lBMHZQ7ufaS1MC8HMsQF5rFv5/DUInuwEOqWthqVyHl3sIjThOThF1zxQyE6OdpUl0dNUg==",
+      "version": "0.0.0-unstable.202512091852",
+      "resolved": "https://registry.npmjs.org/@jellyfin/sdk/-/sdk-0.0.0-unstable.202512091852.tgz",
+      "integrity": "sha512-N+QEsrKk4KculkV6KMBb7XpzTLWcXEzqTHbS+b4rov0VYVwR6DIsJkmUzB3hM2YZsrLIHEFKhFRy/r4itkFeHw==",
       "license": "MPL-2.0",
       "peerDependencies": {
         "axios": "^1.12.0"
@@ -12368,6 +12369,13 @@
       "integrity": "sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=",
       "dev": true
     },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/gonzales-pe": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz",
@@ -12624,9 +12632,9 @@
       }
     },
     "node_modules/hls.js": {
-      "version": "1.6.13",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.13.tgz",
-      "integrity": "sha512-hNEzjZNHf5bFrUNvdS4/1RjIanuJ6szpWNfTaX5I6WfGynWXGT7K/YQLYtemSvFExzeMdgdE4SsyVLJbd5PcZA==",
+      "version": "1.6.15",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz",
+      "integrity": "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==",
       "license": "Apache-2.0"
     },
     "node_modules/hoist-non-react-statics": {
@@ -18232,7 +18240,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "license": "MIT",
       "peer": true
     },
     "node_modules/proxy-polyfill": {
@@ -23187,6 +23194,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/tsconfck": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.6.tgz",
+      "integrity": "sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tsconfck": "bin/tsconfck.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      },
+      "peerDependencies": {
+        "typescript": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -23837,6 +23865,26 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/vite-tsconfig-paths": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.4.tgz",
+      "integrity": "sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "globrex": "^0.1.2",
+        "tsconfck": "^3.0.3"
+      },
+      "peerDependencies": {
+        "vite": "*"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vite/node_modules/fdir": {
       "version": "6.4.4",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
@@ -27102,9 +27150,9 @@
       "integrity": "sha512-C0OlBxIr9NdeFESMTA/OVDqNSWtog6Mi7wwzwH12xbZpxsMD0RgCupUcIP7zZgcpTNecW3fZq5d6xVo7Q8HEJw=="
     },
     "@jellyfin/sdk": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@jellyfin/sdk/-/sdk-0.12.0.tgz",
-      "integrity": "sha512-do3cks7TD316Qw27lBMHZQ7ufaS1MC8HMsQF5rFv5/DUInuwEOqWthqVyHl3sIjThOThF1zxQyE6OdpUl0dNUg==",
+      "version": "0.0.0-unstable.202512091852",
+      "resolved": "https://registry.npmjs.org/@jellyfin/sdk/-/sdk-0.0.0-unstable.202512091852.tgz",
+      "integrity": "sha512-N+QEsrKk4KculkV6KMBb7XpzTLWcXEzqTHbS+b4rov0VYVwR6DIsJkmUzB3hM2YZsrLIHEFKhFRy/r4itkFeHw==",
       "requires": {}
     },
     "@jellyfin/ux-web": {
@@ -32684,6 +32732,12 @@
       "integrity": "sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=",
       "dev": true
     },
+    "globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true
+    },
     "gonzales-pe": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz",
@@ -32865,9 +32919,9 @@
       }
     },
     "hls.js": {
-      "version": "1.6.13",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.13.tgz",
-      "integrity": "sha512-hNEzjZNHf5bFrUNvdS4/1RjIanuJ6szpWNfTaX5I6WfGynWXGT7K/YQLYtemSvFExzeMdgdE4SsyVLJbd5PcZA=="
+      "version": "1.6.15",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz",
+      "integrity": "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA=="
     },
     "hoist-non-react-statics": {
       "version": "3.3.2",
@@ -40118,6 +40172,13 @@
         }
       }
     },
+    "tsconfck": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.1.6.tgz",
+      "integrity": "sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==",
+      "dev": true,
+      "requires": {}
+    },
     "tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -40559,6 +40620,17 @@
         "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
       }
     },
+    "vite-tsconfig-paths": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.1.4.tgz",
+      "integrity": "sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "globrex": "^0.1.2",
+        "tsconfck": "^3.0.3"
+      }
+    },
     "vitest": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.4.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jellyfin-web",
-  "version": "10.11.6",
+  "version": "10.12.0",
   "description": "Web interface for Jellyfin",
   "repository": "https://github.com/jellyfin/jellyfin-web",
   "license": "GPL-2.0-or-later",
@@ -66,6 +66,7 @@
     "ts-loader": "9.5.2",
     "typescript": "5.8.3",
     "typescript-eslint": "8.35.1",
+    "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack": "5.99.9",
     "webpack-bundle-analyzer": "4.10.2",
@@ -84,7 +85,7 @@
     "@fontsource/noto-sans-sc": "5.2.6",
     "@fontsource/noto-sans-tc": "5.2.6",
     "@jellyfin/libass-wasm": "4.2.3",
-    "@jellyfin/sdk": "0.12.0",
+    "@jellyfin/sdk": "0.0.0-unstable.202512091852",
     "@jellyfin/ux-web": "1.0.0",
     "@mui/icons-material": "6.4.12",
     "@mui/material": "6.4.12",
@@ -106,7 +107,7 @@
     "flv.js": "1.6.2",
     "headroom.js": "0.12.0",
     "history": "5.3.0",
-    "hls.js": "1.6.13",
+    "hls.js": "1.6.15",
     "intersection-observer": "0.12.2",
     "jellyfin-apiclient": "1.11.0",
     "jquery": "3.7.1",
@@ -161,7 +162,7 @@
     "build:check": "tsc --noEmit",
     "build:es-check": "npm run build:production && npm run escheck",
     "escheck": "es-check",
-    "lint": "eslint \"./\"",
+    "lint": "eslint",
     "test": "vitest --watch=false --config vite.config.ts",
     "test:watch": "vitest --config vite.config.ts",
     "stylelint": "stylelint \"src/**/*.{css,scss}\""

src/RootAppRouter.tsx

@@ -13,13 +13,16 @@ import { STABLE_APP_ROUTES } from 'apps/stable/routes/routes';
 import { WIZARD_APP_ROUTES } from 'apps/wizard/routes/routes';
 import AppHeader from 'components/AppHeader';
 import Backdrop from 'components/Backdrop';
+import { SETTING_KEY as LAYOUT_SETTING_KEY } from 'components/layoutManager';
 import BangRedirect from 'components/router/BangRedirect';
 import { createRouterHistory } from 'components/router/routerHistory';
-import appTheme from 'themes/themes';
+import { LayoutMode } from 'constants/layoutMode';
+import browser from 'scripts/browser';
+import appTheme from 'themes';
 import { ThemeStorageManager } from 'themes/themeStorageManager';
 
-const layoutMode = localStorage.getItem('layout');
-const isExperimentalLayout = layoutMode === 'experimental';
+const layoutMode = browser.tv ? LayoutMode.Tv : localStorage.getItem(LAYOUT_SETTING_KEY);
+const isExperimentalLayout = !layoutMode || layoutMode === LayoutMode.Experimental;
 
 const router = createHashRouter([
     {

src/apiclient.d.ts

@@ -136,6 +136,7 @@ declare module 'jellyfin-apiclient' {
         getInstantMixFromItem(itemId: string, options?: any): Promise<BaseItemDtoQueryResult>;
         getIntros(itemId: string): Promise<BaseItemDtoQueryResult>;
         getItemCounts(userId?: string): Promise<ItemCounts>;
+        /** @deprecated This function returns a URL with a legacy auth parameter.*/
         getItemDownloadUrl(itemId: string): string;
         getItemImageInfos(itemId: string): Promise<ImageInfo[]>;
         getItems(userId: string, options?: any): Promise<BaseItemDtoQueryResult>;

src/apps/dashboard/features/users/api/useAuthProviders.ts

@@ -0,0 +1,21 @@
+import { Api } from '@jellyfin/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { getSessionApi } from '@jellyfin/sdk/lib/utils/api/session-api';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchAuthProviders = async (api: Api, options?: AxiosRequestConfig) => {
+    const response = await getSessionApi(api).getAuthProviders(options);
+
+    return response.data;
+};
+
+export const useAuthProviders = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ 'AuthProviders' ],
+        queryFn: ({ signal }) => fetchAuthProviders(api!, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/users/api/useChannels.ts

@@ -0,0 +1,22 @@
+import { Api } from '@jellyfin/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { getChannelsApi } from '@jellyfin/sdk/lib/utils/api/channels-api';
+import { ChannelsApiGetChannelsRequest } from '@jellyfin/sdk/lib/generated-client/api/channels-api';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchChannels = async (api: Api, params?: ChannelsApiGetChannelsRequest, options?: AxiosRequestConfig) => {
+    const response = await getChannelsApi(api).getChannels(params, options);
+
+    return response.data;
+};
+
+export const useChannels = (params?: ChannelsApiGetChannelsRequest) => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ 'Channels' ],
+        queryFn: ({ signal }) => fetchChannels(api!, params, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/users/api/useCreateUser.ts

@@ -0,0 +1,15 @@
+import { UserApiCreateUserByNameRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
+import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
+import { useMutation } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+
+export const useCreateUser = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: UserApiCreateUserByNameRequest) => (
+            getUserApi(api!)
+                .createUserByName(params)
+        )
+    });
+};

src/apps/dashboard/features/users/api/useDeleteUser.ts

@@ -0,0 +1,22 @@
+import { UserApiDeleteUserRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
+import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
+import { useMutation } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { QUERY_KEY } from 'hooks/useUsers';
+import { queryClient } from 'utils/query/queryClient';
+
+export const useDeleteUser = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: UserApiDeleteUserRequest) => (
+            getUserApi(api!)
+                .deleteUser(params)
+        ),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({
+                queryKey: [ QUERY_KEY ]
+            });
+        }
+    });
+};

src/apps/dashboard/features/users/api/useLibraryMediaFolders.ts

@@ -0,0 +1,22 @@
+import { Api } from '@jellyfin/sdk';
+import { LibraryApiGetMediaFoldersRequest } from '@jellyfin/sdk/lib/generated-client/api/library-api';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchLibraryMediaFolders = async (api: Api, params?: LibraryApiGetMediaFoldersRequest, options?: AxiosRequestConfig) => {
+    const response = await getLibraryApi(api).getMediaFolders(params, options);
+
+    return response.data;
+};
+
+export const useLibraryMediaFolders = (params?: LibraryApiGetMediaFoldersRequest) => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: ['LibraryMediaFolders'],
+        queryFn: ({ signal }) => fetchLibraryMediaFolders(api!, params, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/users/api/useNetworkConfig.ts

@@ -0,0 +1,22 @@
+import { Api } from '@jellyfin/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import type { AxiosRequestConfig } from 'axios';
+import type { NetworkConfiguration } from '@jellyfin/sdk/lib/generated-client/models/network-configuration';
+
+const fetchNetworkConfig = async (api: Api, options?: AxiosRequestConfig) => {
+    const response = await getConfigurationApi(api).getNamedConfiguration({ key: 'network' }, options);
+
+    return response.data as NetworkConfiguration;
+};
+
+export const useNetworkConfig = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ 'NetConfig' ],
+        queryFn: ({ signal }) => fetchNetworkConfig(api!, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/users/api/useParentalRatings.ts

@@ -0,0 +1,21 @@
+import { Api } from '@jellyfin/sdk';
+import { getLocalizationApi } from '@jellyfin/sdk/lib/utils/api/localization-api';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchParentalRatings = async (api: Api, options?: AxiosRequestConfig) => {
+    const response = await getLocalizationApi(api).getParentalRatings(options);
+
+    return response.data;
+};
+
+export const useParentalRatings = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: ['ParentalRatings'],
+        queryFn: ({ signal }) => fetchParentalRatings(api!, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/users/api/usePasswordResetProviders.ts

@@ -0,0 +1,21 @@
+import { Api } from '@jellyfin/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { getSessionApi } from '@jellyfin/sdk/lib/utils/api/session-api';
+import type { AxiosRequestConfig } from 'axios';
+
+const fetchPasswordResetProviders = async (api: Api, options?: AxiosRequestConfig) => {
+    const response = await getSessionApi(api).getPasswordResetProviders(options);
+
+    return response.data;
+};
+
+export const usePasswordResetProviders = () => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ 'PasswordResetProviders' ],
+        queryFn: ({ signal }) => fetchPasswordResetProviders(api!, { signal }),
+        enabled: !!api
+    });
+};

src/apps/dashboard/features/users/api/useUpdateUser.ts

@@ -0,0 +1,22 @@
+import { UserApiUpdateUserRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
+import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
+import { useMutation } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+import { QUERY_KEY } from './useUser';
+
+export const useUpdateUser = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: UserApiUpdateUserRequest) => (
+            getUserApi(api!)
+                .updateUser(params)
+        ),
+        onSuccess: (_, params) => {
+            void queryClient.invalidateQueries({
+                queryKey: [QUERY_KEY, params.userId]
+            });
+        }
+    });
+};

src/apps/dashboard/features/users/api/useUpdateUserPolicy.ts

@@ -0,0 +1,23 @@
+import { UserApiUpdateUserPolicyRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
+import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
+import { useMutation } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import { queryClient } from 'utils/query/queryClient';
+import { QUERY_KEY } from './useUser';
+
+export const useUpdateUserPolicy = () => {
+    const { api } = useApi();
+
+    return useMutation({
+        mutationFn: (params: UserApiUpdateUserPolicyRequest) => (
+
+            getUserApi(api!)
+                .updateUserPolicy(params)
+        ),
+        onSuccess: (_, params) => {
+            void queryClient.invalidateQueries({
+                queryKey: [QUERY_KEY, params.userId]
+            });
+        }
+    });
+};

src/apps/dashboard/features/users/api/useUser.ts

@@ -0,0 +1,24 @@
+import { Api } from '@jellyfin/sdk';
+import { UserApiGetUserByIdRequest } from '@jellyfin/sdk/lib/generated-client/api/user-api';
+import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
+import { useQuery } from '@tanstack/react-query';
+import { useApi } from 'hooks/useApi';
+import type { AxiosRequestConfig } from 'axios';
+
+export const QUERY_KEY = 'User';
+
+const fetchUser = async (api: Api, params: UserApiGetUserByIdRequest, options?: AxiosRequestConfig) => {
+    const response = await getUserApi(api).getUserById(params, options);
+
+    return response.data;
+};
+
+export const useUser = (params?: UserApiGetUserByIdRequest) => {
+    const { api } = useApi();
+
+    return useQuery({
+        queryKey: [ QUERY_KEY, params?.userId ],
+        queryFn: ({ signal }) => fetchUser(api!, params!, { signal }),
+        enabled: !!api && !!params
+    });
+};

src/apps/dashboard/routes/plugins/index.tsx

@@ -98,166 +98,164 @@ export const Component = () => {
             className='type-interior mainAnimatedPage'
         >
             <Box className='content-primary'>
-                <Stack spacing={2}>
-                    <Stack
-                        direction='row'
-                        sx={{
-                            flexWrap: {
-                                xs: 'wrap',
-                                sm: 'nowrap'
-                            }
-                        }}
+                {isError ? (
+                    <Alert
+                        severity='error'
+                        sx={{ marginBottom: 2 }}
                     >
-                        <Typography
-                            variant='h1'
-                            component='span'
+                        {globalize.translate('PluginsLoadError')}
+                    </Alert>
+                ) : (
+                    <Stack spacing={2}>
+                        <Stack
+                            direction='row'
                             sx={{
-                                flexGrow: 1,
-                                verticalAlign: 'middle'
-                            }}
-                        >
-                            {globalize.translate('TabPlugins')}
-                        </Typography>
-
-                        <Button
-                            component={Link}
-                            to='/dashboard/plugins/repositories'
-                            variant='outlined'
-                            sx={{
-                                marginLeft: 2
-                            }}
-                        >
-                            {globalize.translate('ManageRepositories')}
-                        </Button>
-
-                        <Box
-                            sx={{
-                                display: 'flex',
-                                justifyContent: 'end',
-                                marginTop: {
-                                    xs: 2,
-                                    sm: 0
-                                },
-                                marginLeft: {
-                                    xs: 0,
-                                    sm: 2
-                                },
-                                width: {
-                                    xs: '100%',
-                                    sm: 'auto'
+                                flexWrap: {
+                                    xs: 'wrap',
+                                    sm: 'nowrap'
                                 }
                             }}
                         >
-                            <SearchInput
-                                label={globalize.translate('Search')}
-                                value={searchQuery}
-                                onChange={onSearchChange}
-                            />
-                        </Box>
-                    </Stack>
+                            <Typography
+                                variant='h1'
+                                component='span'
+                                sx={{
+                                    flexGrow: 1,
+                                    verticalAlign: 'middle'
+                                }}
+                            >
+                                {globalize.translate('TabPlugins')}
+                            </Typography>
 
-                    {isError ? (
-                        <Alert
-                            severity='error'
-                            sx={{ marginBottom: 2 }}
-                        >
-                            {globalize.translate('PluginsLoadError')}
-                        </Alert>
-                    ) : (
-                        <>
-                            <Box>
-                                <Stack
-                                    direction='row'
-                                    spacing={1}
-                                    sx={{
-                                        marginLeft: '-1rem',
-                                        marginRight: '-1rem',
-                                        paddingLeft: '1rem',
-                                        paddingRight: '1rem',
-                                        paddingBottom: {
-                                            xs: 1,
-                                            md: 0.5
-                                        },
-                                        overflowX: 'auto'
-                                    }}
-                                >
-                                    <Chip
-                                        color={status === PluginStatusOption.All ? 'primary' : undefined}
-                                        // eslint-disable-next-line react/jsx-no-bind
-                                        onClick={() => setStatus(PluginStatusOption.All)}
-                                        label={globalize.translate('All')}
-                                    />
+                            <Button
+                                component={Link}
+                                to='/dashboard/plugins/repositories'
+                                variant='outlined'
+                                sx={{
+                                    marginLeft: 2
+                                }}
+                            >
+                                {globalize.translate('ManageRepositories')}
+                            </Button>
 
-                                    <Chip
-                                        color={status === PluginStatusOption.Available ? 'primary' : undefined}
-                                        // eslint-disable-next-line react/jsx-no-bind
-                                        onClick={() => setStatus(PluginStatusOption.Available)}
-                                        label={globalize.translate('LabelAvailable')}
-                                    />
-
-                                    <Chip
-                                        color={status === PluginStatusOption.Installed ? 'primary' : undefined}
-                                        // eslint-disable-next-line react/jsx-no-bind
-                                        onClick={() => setStatus(PluginStatusOption.Installed)}
-                                        label={globalize.translate('LabelInstalled')}
-                                    />
-
-                                    <Divider orientation='vertical' flexItem />
-
-                                    <Chip
-                                        color={!category ? 'primary' : undefined}
-                                        // eslint-disable-next-line react/jsx-no-bind
-                                        onClick={() => setCategory('')}
-                                        label={globalize.translate('All')}
-                                    />
-
-                                    {Object.values(PluginCategory).map(c => (
-                                        <Chip
-                                            key={c}
-                                            color={category === c.toLowerCase() ? 'primary' : undefined}
-                                            // eslint-disable-next-line react/jsx-no-bind
-                                            onClick={() => setCategory(c.toLowerCase())}
-                                            label={globalize.translate(CATEGORY_LABELS[c as PluginCategory])}
-                                        />
-                                    ))}
-                                </Stack>
-                                <Divider />
+                            <Box
+                                sx={{
+                                    display: 'flex',
+                                    justifyContent: 'end',
+                                    marginTop: {
+                                        xs: 2,
+                                        sm: 0
+                                    },
+                                    marginLeft: {
+                                        xs: 0,
+                                        sm: 2
+                                    },
+                                    width: {
+                                        xs: '100%',
+                                        sm: 'auto'
+                                    }
+                                }}
+                            >
+                                <SearchInput
+                                    label={globalize.translate('Search')}
+                                    value={searchQuery}
+                                    onChange={onSearchChange}
+                                />
                             </Box>
+                        </Stack>
 
-                            <Box>
-                                {filteredPlugins.length > 0 ? (
+                        <Box>
+                            <Stack
+                                direction='row'
+                                spacing={1}
+                                sx={{
+                                    marginLeft: '-1rem',
+                                    marginRight: '-1rem',
+                                    paddingLeft: '1rem',
+                                    paddingRight: '1rem',
+                                    paddingBottom: {
+                                        xs: 1,
+                                        md: 0.5
+                                    },
+                                    overflowX: 'auto'
+                                }}
+                            >
+                                <Chip
+                                    color={status === PluginStatusOption.All ? 'primary' : undefined}
+                                    // eslint-disable-next-line react/jsx-no-bind
+                                    onClick={() => setStatus(PluginStatusOption.All)}
+                                    label={globalize.translate('All')}
+                                />
+
+                                <Chip
+                                    color={status === PluginStatusOption.Available ? 'primary' : undefined}
+                                    // eslint-disable-next-line react/jsx-no-bind
+                                    onClick={() => setStatus(PluginStatusOption.Available)}
+                                    label={globalize.translate('LabelAvailable')}
+                                />
+
+                                <Chip
+                                    color={status === PluginStatusOption.Installed ? 'primary' : undefined}
+                                    // eslint-disable-next-line react/jsx-no-bind
+                                    onClick={() => setStatus(PluginStatusOption.Installed)}
+                                    label={globalize.translate('LabelInstalled')}
+                                />
+
+                                <Divider orientation='vertical' flexItem />
+
+                                <Chip
+                                    color={!category ? 'primary' : undefined}
+                                    // eslint-disable-next-line react/jsx-no-bind
+                                    onClick={() => setCategory('')}
+                                    label={globalize.translate('All')}
+                                />
+
+                                {Object.values(PluginCategory).map(c => (
+                                    <Chip
+                                        key={c}
+                                        color={category === c.toLowerCase() ? 'primary' : undefined}
+                                        // eslint-disable-next-line react/jsx-no-bind
+                                        onClick={() => setCategory(c.toLowerCase())}
+                                        label={globalize.translate(CATEGORY_LABELS[c as PluginCategory])}
+                                    />
+                                ))}
+                            </Stack>
+                            <Divider />
+                        </Box>
+
+                        <Box>
+                            {filteredPlugins.length > 0 ? (
                                 // NOTE: Legacy Grid is required due to lack of gap support in JMP on some OSs
                                 // eslint-disable-next-line @typescript-eslint/no-deprecated
-                                    <Grid container spacing={2}>
-                                        {filteredPlugins.map(plugin => (
-                                            // NOTE: Legacy Grid is required due to lack of gap support in JMP on some OSs
-                                            // eslint-disable-next-line @typescript-eslint/no-deprecated
-                                            <Grid
-                                                key={plugin.id}
-                                                item
-                                                xs={12}
-                                                sm={6}
-                                                md={4}
-                                                lg={3}
-                                                xl={2}
-                                            >
-                                                <PluginCard
-                                                    plugin={plugin}
-                                                />
-                                            </Grid>
-                                        ))}
-                                    </Grid>
-                                ) : (
-                                    <NoPluginResults
-                                        isFiltered={!!category || status !== PluginStatusOption.All}
-                                        onViewAll={onViewAll}
-                                        query={searchQuery}
-                                    />
-                                )}
-                            </Box>
-                        </>
-                    )}
-                </Stack>
+                                <Grid container spacing={2}>
+                                    {filteredPlugins.map(plugin => (
+                                        // NOTE: Legacy Grid is required due to lack of gap support in JMP on some OSs
+                                        // eslint-disable-next-line @typescript-eslint/no-deprecated
+                                        <Grid
+                                            key={plugin.id}
+                                            item
+                                            xs={12}
+                                            sm={6}
+                                            md={4}
+                                            lg={3}
+                                            xl={2}
+                                        >
+                                            <PluginCard
+                                                plugin={plugin}
+                                            />
+                                        </Grid>
+                                    ))}
+                                </Grid>
+                            ) : (
+                                <NoPluginResults
+                                    isFiltered={!!category || status !== PluginStatusOption.All}
+                                    onViewAll={onViewAll}
+                                    query={searchQuery}
+                                />
+                            )}
+                        </Box>
+                    </Stack>
+                )}
             </Box>
         </Page>
     );

src/apps/dashboard/routes/users/add.tsx

@@ -1,7 +1,6 @@
-import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import type { BaseItemDto, CreateUserByName } from '@jellyfin/sdk/lib/generated-client';
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 
-import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
 import loading from '../../../../components/loading/loading';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
@@ -12,10 +11,11 @@ import CheckBoxElement from '../../../../elements/CheckBoxElement';
 import Page from '../../../../components/Page';
 import Toast from 'apps/dashboard/components/Toast';
 
-type UserInput = {
-    Name?: string;
-    Password?: string;
-};
+import { useLibraryMediaFolders } from 'apps/dashboard/features/users/api/useLibraryMediaFolders';
+import { useChannels } from 'apps/dashboard/features/users/api/useChannels';
+import { useUpdateUserPolicy } from 'apps/dashboard/features/users/api/useUpdateUserPolicy';
+import { useCreateUser } from 'apps/dashboard/features/users/api/useCreateUser';
+import { useNavigate } from 'react-router-dom';
 
 type ItemsArr = {
     Name?: string | null;
@@ -23,6 +23,7 @@ type ItemsArr = {
 };
 
 const UserNew = () => {
+    const navigate = useNavigate();
     const [ channelsItems, setChannelsItems ] = useState<ItemsArr[]>([]);
     const [ mediaFoldersItems, setMediaFoldersItems ] = useState<ItemsArr[]>([]);
     const [ isErrorToastOpen, setIsErrorToastOpen ] = useState(false);
@@ -31,6 +32,11 @@ const UserNew = () => {
     const handleToastClose = useCallback(() => {
         setIsErrorToastOpen(false);
     }, []);
+    const { data: mediaFolders, isSuccess: isMediaFoldersSuccess } = useLibraryMediaFolders();
+    const { data: channels, isSuccess: isChannelsSuccess } = useChannels();
+
+    const createUser = useCreateUser();
+    const updateUserPolicy = useUpdateUserPolicy();
 
     const getItemsResult = (items: BaseItemDto[]) => {
         return items.map(item =>
@@ -49,9 +55,7 @@ const UserNew = () => {
             return;
         }
 
-        const mediaFolders = getItemsResult(result);
-
-        setMediaFoldersItems(mediaFolders);
+        setMediaFoldersItems(getItemsResult(result));
 
         const folderAccess = page.querySelector('.folderAccess') as HTMLDivElement;
         folderAccess.dispatchEvent(new CustomEvent('create'));
@@ -67,15 +71,15 @@ const UserNew = () => {
             return;
         }
 
-        const channels = getItemsResult(result);
+        const channelItems = getItemsResult(result);
 
-        setChannelsItems(channels);
+        setChannelsItems(channelItems);
 
         const channelAccess = page.querySelector('.channelAccess') as HTMLDivElement;
         channelAccess.dispatchEvent(new CustomEvent('create'));
 
         const channelAccessContainer = page.querySelector('.channelAccessContainer') as HTMLDivElement;
-        channels.length ? channelAccessContainer.classList.remove('hide') : channelAccessContainer.classList.add('hide');
+        channelItems.length ? channelAccessContainer.classList.remove('hide') : channelAccessContainer.classList.add('hide');
 
         (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).checked = false;
     }, []);
@@ -87,22 +91,26 @@ const UserNew = () => {
             console.error('Unexpected null reference');
             return;
         }
+        if (!mediaFolders?.Items) {
+            console.error('[add] mediaFolders not available');
+            return;
+        }
+        if (!channels?.Items) {
+            console.error('[add] channels not available');
+            return;
+        }
 
-        (page.querySelector('#txtUsername') as HTMLInputElement).value = '';
-        (page.querySelector('#txtPassword') as HTMLInputElement).value = '';
+        loadMediaFolders(mediaFolders?.Items);
+        loadChannels(channels?.Items);
+        loading.hide();
+    }, [loadChannels, loadMediaFolders, mediaFolders, channels]);
+
+    useEffect(() => {
         loading.show();
-        const promiseFolders = window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
-            IsHidden: false
-        }));
-        const promiseChannels = window.ApiClient.getJSON(window.ApiClient.getUrl('Channels'));
-        Promise.all([promiseFolders, promiseChannels]).then(function (responses) {
-            loadMediaFolders(responses[0].Items);
-            loadChannels(responses[1].Items);
-            loading.hide();
-        }).catch(err => {
-            console.error('[usernew] failed to load data', err);
-        });
-    }, [loadChannels, loadMediaFolders]);
+        if (isMediaFoldersSuccess && isChannelsSuccess) {
+            loadUser();
+        }
+    }, [loadUser, isMediaFoldersSuccess, isChannelsSuccess]);
 
     useEffect(() => {
         const page = element.current;
@@ -112,51 +120,54 @@ const UserNew = () => {
             return;
         }
 
-        loadUser();
-
         const saveUser = () => {
-            const userInput: UserInput = {};
-            userInput.Name = (page.querySelector('#txtUsername') as HTMLInputElement).value.trim();
-            userInput.Password = (page.querySelector('#txtPassword') as HTMLInputElement).value;
+            const userInput: CreateUserByName = {
+                Name: (page.querySelector('#txtUsername') as HTMLInputElement).value,
+                Password: (page.querySelector('#txtPassword') as HTMLInputElement).value
+            };
+            createUser.mutate({ createUserByName: userInput }, {
+                onSuccess: (response) => {
+                    const user = response.data;
 
-            window.ApiClient.createUser(userInput).then(function (user) {
-                if (!user.Id || !user.Policy) {
-                    throw new Error('Unexpected null user id or policy');
-                }
+                    if (!user.Id || !user.Policy) {
+                        throw new Error('Unexpected null user id or policy');
+                    }
 
-                user.Policy.EnableAllFolders = (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).checked;
-                user.Policy.EnabledFolders = [];
+                    user.Policy.EnableAllFolders = (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).checked;
+                    user.Policy.EnabledFolders = [];
 
-                if (!user.Policy.EnableAllFolders) {
-                    user.Policy.EnabledFolders = Array.prototype.filter.call(page.querySelectorAll('.chkFolder'), function (i) {
-                        return i.checked;
-                    }).map(function (i) {
-                        return i.getAttribute('data-id');
-                    });
-                }
-
-                user.Policy.EnableAllChannels = (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).checked;
-                user.Policy.EnabledChannels = [];
-
-                if (!user.Policy.EnableAllChannels) {
-                    user.Policy.EnabledChannels = Array.prototype.filter.call(page.querySelectorAll('.chkChannel'), function (i) {
-                        return i.checked;
-                    }).map(function (i) {
-                        return i.getAttribute('data-id');
-                    });
-                }
-
-                window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
-                    Dashboard.navigate('/dashboard/users/profile?userId=' + user.Id)
-                        .catch(err => {
-                            console.error('[usernew] failed to navigate to edit user page', err);
+                    if (!user.Policy.EnableAllFolders) {
+                        user.Policy.EnabledFolders = Array.prototype.filter.call(page.querySelectorAll('.chkFolder'), function (i) {
+                            return i.checked;
+                        }).map(function (i) {
+                            return i.getAttribute('data-id');
                         });
-                }).catch(err => {
-                    console.error('[usernew] failed to update user policy', err);
-                });
-            }, function () {
-                setIsErrorToastOpen(true);
-                loading.hide();
+                    }
+
+                    user.Policy.EnableAllChannels = (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).checked;
+                    user.Policy.EnabledChannels = [];
+
+                    if (!user.Policy.EnableAllChannels) {
+                        user.Policy.EnabledChannels = Array.prototype.filter.call(page.querySelectorAll('.chkChannel'), function (i) {
+                            return i.checked;
+                        }).map(function (i) {
+                            return i.getAttribute('data-id');
+                        });
+                    }
+
+                    updateUserPolicy.mutate({
+                        userId: user.Id,
+                        userPolicy: user.Policy
+                    }, {
+                        onSuccess: () => {
+                            navigate(`/dashboard/users/profile?userId=${user.Id}`);
+                        },
+                        onError: () => {
+                            console.error('[usernew] failed to update user policy');
+                            setIsErrorToastOpen(true);
+                        }
+                    });
+                }
             });
         };
 
@@ -168,22 +179,32 @@ const UserNew = () => {
             return false;
         };
 
-        (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
+        const enableAllChannelsChange = function (this: HTMLInputElement) {
             const channelAccessListContainer = page.querySelector('.channelAccessListContainer') as HTMLDivElement;
             this.checked ? channelAccessListContainer.classList.add('hide') : channelAccessListContainer.classList.remove('hide');
-        });
+        };
 
-        (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
+        const enableAllFoldersChange = function (this: HTMLInputElement) {
             const folderAccessListContainer = page.querySelector('.folderAccessListContainer') as HTMLDivElement;
             this.checked ? folderAccessListContainer.classList.add('hide') : folderAccessListContainer.classList.remove('hide');
-        });
+        };
 
-        (page.querySelector('.newUserProfileForm') as HTMLFormElement).addEventListener('submit', onSubmit);
-
-        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', function() {
+        const onCancelClick = () => {
             window.history.back();
-        });
-    }, [loadUser]);
+        };
+
+        (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).addEventListener('change', enableAllChannelsChange);
+        (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).addEventListener('change', enableAllFoldersChange);
+        (page.querySelector('.newUserProfileForm') as HTMLFormElement).addEventListener('submit', onSubmit);
+        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', onCancelClick);
+
+        return () => {
+            (page.querySelector('.chkEnableAllChannels') as HTMLInputElement).removeEventListener('change', enableAllChannelsChange);
+            (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).removeEventListener('change', enableAllFoldersChange);
+            (page.querySelector('.newUserProfileForm') as HTMLFormElement).removeEventListener('submit', onSubmit);
+            (page.querySelector('#btnCancel') as HTMLButtonElement).removeEventListener('click', onCancelClick);
+        };
+    }, [loadUser, createUser, updateUserPolicy, navigate]);
 
     return (
         <Page

src/apps/dashboard/routes/users/index.tsx

@@ -1,10 +1,5 @@
-import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
-import React, { useEffect, useState, useRef, useCallback } from 'react';
-
-import Dashboard from '../../../../utils/dashboard';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import globalize from '../../../../lib/globalize';
-import loading from '../../../../components/loading/loading';
-import dom from '../../../../utils/dom';
 import confirm from '../../../../components/confirm/confirm';
 import UserCardBox from '../../../../components/dashboard/users/UserCardBox';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
@@ -14,8 +9,12 @@ import '../../../../components/cardbuilder/card.scss';
 import '../../../../components/indicators/indicators.scss';
 import '../../../../styles/flexstyles.scss';
 import Page from '../../../../components/Page';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import Toast from 'apps/dashboard/components/Toast';
+import { useUsers } from 'hooks/useUsers';
+import Loading from 'components/loading/LoadingComponent';
+import { useDeleteUser } from 'apps/dashboard/features/users/api/useDeleteUser';
+import dom from 'utils/dom';
 
 type MenuEntry = {
     name?: string;
@@ -26,24 +25,15 @@ type MenuEntry = {
 const UserProfiles = () => {
     const location = useLocation();
     const [ isSettingsSavedToastOpen, setIsSettingsSavedToastOpen ] = useState(false);
-    const [ users, setUsers ] = useState<UserDto[]>([]);
-
     const element = useRef<HTMLDivElement>(null);
+    const navigate = useNavigate();
+    const { data: users, isPending } = useUsers();
+    const deleteUser = useDeleteUser();
 
     const handleToastClose = useCallback(() => {
         setIsSettingsSavedToastOpen(false);
     }, []);
 
-    const loadData = () => {
-        loading.show();
-        window.ApiClient.getUsers().then(function (result) {
-            setUsers(result);
-            loading.hide();
-        }).catch(err => {
-            console.error('[userprofiles] failed to fetch users', err);
-        });
-    };
-
     useEffect(() => {
         const page = element.current;
 
@@ -57,8 +47,6 @@ const UserProfiles = () => {
             return;
         }
 
-        loadData();
-
         const showUserMenu = (elem: HTMLElement) => {
             const card = dom.parentWithClass(elem, 'card');
             const userId = card?.getAttribute('data-userid');
@@ -99,28 +87,19 @@ const UserProfiles = () => {
                     callback: function (id: string) {
                         switch (id) {
                             case 'open':
-                                Dashboard.navigate('/dashboard/users/profile?userId=' + userId)
-                                    .catch(err => {
-                                        console.error('[userprofiles] failed to navigate to user edit page', err);
-                                    });
+                                navigate(`/dashboard/users/profile?userId=${userId}`);
                                 break;
 
                             case 'access':
-                                Dashboard.navigate('/dashboard/users/access?userId=' + userId)
-                                    .catch(err => {
-                                        console.error('[userprofiles] failed to navigate to user library page', err);
-                                    });
+                                navigate(`/dashboard/users/access?userId=${userId}`);
                                 break;
 
                             case 'parentalcontrol':
-                                Dashboard.navigate('/dashboard/users/parentalcontrol?userId=' + userId)
-                                    .catch(err => {
-                                        console.error('[userprofiles] failed to navigate to parental control page', err);
-                                    });
+                                navigate(`/dashboard/users/parentalcontrol?userId=${userId}`);
                                 break;
 
                             case 'delete':
-                                deleteUser(userId, username);
+                                confirmDeleteUser(userId, username);
                         }
                     }
                 }).catch(() => {
@@ -131,7 +110,7 @@ const UserProfiles = () => {
             });
         };
 
-        const deleteUser = (id: string, username?: string | null) => {
+        const confirmDeleteUser = (id: string, username?: string | null) => {
             const title = username ? globalize.translate('DeleteName', username) : globalize.translate('DeleteUser');
             const text = globalize.translate('DeleteUserConfirmation');
 
@@ -141,32 +120,38 @@ const UserProfiles = () => {
                 confirmText: globalize.translate('Delete'),
                 primary: 'delete'
             }).then(function () {
-                loading.show();
-                window.ApiClient.deleteUser(id).then(function () {
-                    loadData();
-                }).catch(err => {
-                    console.error('[userprofiles] failed to delete user', err);
+                deleteUser.mutate({
+                    userId: id
                 });
             }).catch(() => {
                 // confirm dialog closed
             });
         };
 
-        page.addEventListener('click', function (e) {
+        const onPageClick = function (e: MouseEvent) {
             const btnUserMenu = dom.parentWithClass(e.target as HTMLElement, 'btnUserMenu');
 
             if (btnUserMenu) {
                 showUserMenu(btnUserMenu);
             }
-        });
+        };
 
-        (page.querySelector('#btnAddUser') as HTMLButtonElement).addEventListener('click', function() {
-            Dashboard.navigate('/dashboard/users/add')
-                .catch(err => {
-                    console.error('[userprofiles] failed to navigate to new user page', err);
-                });
-        });
-    }, []);
+        const onAddUserClick = function() {
+            navigate('/dashboard/users/add');
+        };
+
+        page.addEventListener('click', onPageClick);
+        (page.querySelector('#btnAddUser') as HTMLButtonElement).addEventListener('click', onAddUserClick);
+
+        return () => {
+            page.removeEventListener('click', onPageClick);
+            (page.querySelector('#btnAddUser') as HTMLButtonElement).removeEventListener('click', onAddUserClick);
+        };
+    }, [navigate, deleteUser, location.state?.openSavedToast]);
+
+    if (isPending) {
+        return <Loading />;
+    }
 
     return (
         <Page
@@ -192,7 +177,7 @@ const UserProfiles = () => {
                 </div>
 
                 <div className='localUsers itemsContainer vertical-wrap'>
-                    {users.map(user => {
+                    {users?.map(user => {
                         return <UserCardBox key={user.Id} user={user} />;
                     })}
                 </div>

src/apps/dashboard/routes/users/password.tsx

@@ -1,37 +1,21 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import UserPasswordForm from '../../../../components/dashboard/users/UserPasswordForm';
 import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
 import Page from '../../../../components/Page';
-import loading from '../../../../components/loading/loading';
+import { useUser } from 'apps/dashboard/features/users/api/useUser';
+import Loading from 'components/loading/LoadingComponent';
 
 const UserPassword = () => {
     const [ searchParams ] = useSearchParams();
     const userId = searchParams.get('userId');
-    const [ userName, setUserName ] = useState('');
+    const { data: user, isPending } = useUser(userId ? { userId: userId } : undefined);
 
-    const loadUser = useCallback(() => {
-        if (!userId) {
-            console.error('[userpassword] missing user id');
-            return;
-        }
-
-        loading.show();
-        window.ApiClient.getUser(userId).then(function (user) {
-            if (!user.Name) {
-                throw new Error('Unexpected null user.Name');
-            }
-            setUserName(user.Name);
-            loading.hide();
-        }).catch(err => {
-            console.error('[userpassword] failed to fetch user', err);
-        });
-    }, [userId]);
-    useEffect(() => {
-        loadUser();
-    }, [loadUser]);
+    if (isPending || !user) {
+        return <Loading />;
+    }
 
     return (
         <Page
@@ -41,13 +25,13 @@ const UserPassword = () => {
             <div className='content-primary'>
                 <div className='verticalSection'>
                     <SectionTitleContainer
-                        title={userName}
+                        title={user?.Name || undefined}
                     />
                 </div>
                 <SectionTabs activeTab='userpassword'/>
                 <div className='readOnlyContent'>
                     <UserPasswordForm
-                        userId={userId}
+                        user={user}
                     />
                 </div>
             </div>

src/apps/dashboard/routes/users/profile.tsx

@@ -13,6 +13,14 @@ import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
 import loading from '../../../../components/loading/loading';
 import SelectElement from '../../../../elements/SelectElement';
 import Page from '../../../../components/Page';
+import { useUser } from 'apps/dashboard/features/users/api/useUser';
+import { useAuthProviders } from 'apps/dashboard/features/users/api/useAuthProviders';
+import { usePasswordResetProviders } from 'apps/dashboard/features/users/api/usePasswordResetProviders';
+import { useLibraryMediaFolders } from 'apps/dashboard/features/users/api/useLibraryMediaFolders';
+import { useChannels } from 'apps/dashboard/features/users/api/useChannels';
+import { useUpdateUser } from 'apps/dashboard/features/users/api/useUpdateUser';
+import { useUpdateUserPolicy } from 'apps/dashboard/features/users/api/useUpdateUserPolicy';
+import { useNetworkConfig } from 'apps/dashboard/features/users/api/useNetworkConfig';
 
 type ResetProvider = BaseItemDto & {
     checkedAttribute: string
@@ -27,15 +35,22 @@ const UserEdit = () => {
     const navigate = useNavigate();
     const [ searchParams ] = useSearchParams();
     const userId = searchParams.get('userId');
-    const [ userDto, setUserDto ] = useState<UserDto>();
     const [ deleteFoldersAccess, setDeleteFoldersAccess ] = useState<ResetProvider[]>([]);
-    const [ authProviders, setAuthProviders ] = useState<NameIdPair[]>([]);
-    const [ passwordResetProviders, setPasswordResetProviders ] = useState<NameIdPair[]>([]);
     const libraryMenu = useMemo(async () => ((await import('../../../../scripts/libraryMenu')).default), []);
 
     const [ authenticationProviderId, setAuthenticationProviderId ] = useState('');
     const [ passwordResetProviderId, setPasswordResetProviderId ] = useState('');
 
+    const { data: userDto, isSuccess: isUserSuccess } = useUser(userId ? { userId: userId } : undefined);
+    const { data: authProviders, isSuccess: isAuthProvidersSuccess } = useAuthProviders();
+    const { data: passwordResetProviders, isSuccess: isPasswordResetProvidersSuccess } = usePasswordResetProviders();
+    const { data: mediaFolders, isSuccess: isMediaFoldersSuccess } = useLibraryMediaFolders({ isHidden: false });
+    const { data: channels, isSuccess: isChannelsSuccess } = useChannels({ supportsMediaDeletion: true });
+    const { data: netConfig, isSuccess: isNetConfigSuccess } = useNetworkConfig();
+
+    const updateUser = useUpdateUser();
+    const updateUserPolicy = useUpdateUserPolicy();
+
     const element = useRef<HTMLDivElement>(null);
 
     const triggerChange = (select: HTMLInputElement) => {
@@ -43,17 +58,10 @@ const UserEdit = () => {
         select.dispatchEvent(evt);
     };
 
-    const getUser = () => {
-        if (!userId) throw new Error('missing user id');
-        return window.ApiClient.getUser(userId);
-    };
-
     const loadAuthProviders = useCallback((page: HTMLDivElement, user: UserDto, providers: NameIdPair[]) => {
         const fldSelectLoginProvider = page.querySelector('.fldSelectLoginProvider') as HTMLDivElement;
         fldSelectLoginProvider.classList.toggle('hide', providers.length <= 1);
 
-        setAuthProviders(providers);
-
         const currentProviderId = user.Policy?.AuthenticationProviderId || '';
         setAuthenticationProviderId(currentProviderId);
     }, []);
@@ -62,30 +70,26 @@ const UserEdit = () => {
         const fldSelectPasswordResetProvider = page.querySelector('.fldSelectPasswordResetProvider') as HTMLDivElement;
         fldSelectPasswordResetProvider.classList.toggle('hide', providers.length <= 1);
 
-        setPasswordResetProviders(providers);
-
         const currentProviderId = user.Policy?.PasswordResetProviderId || '';
         setPasswordResetProviderId(currentProviderId);
     }, []);
 
-    const loadDeleteFolders = useCallback((page: HTMLDivElement, user: UserDto, mediaFolders: BaseItemDto[]) => {
-        window.ApiClient.getJSON(window.ApiClient.getUrl('Channels', {
-            SupportsMediaDeletion: true
-        })).then(function (channelsResult) {
-            let isChecked;
-            let checkedAttribute;
-            const itemsArr: ResetProvider[] = [];
+    const loadDeleteFolders = useCallback((page: HTMLDivElement, user: UserDto, folders: BaseItemDto[]) => {
+        let isChecked;
+        let checkedAttribute;
+        const itemsArr: ResetProvider[] = [];
 
-            for (const mediaFolder of mediaFolders) {
-                isChecked = user.Policy?.EnableContentDeletion || user.Policy?.EnableContentDeletionFromFolders?.indexOf(mediaFolder.Id || '') != -1;
-                checkedAttribute = isChecked ? ' checked="checked"' : '';
-                itemsArr.push({
-                    ...mediaFolder,
-                    checkedAttribute: checkedAttribute
-                });
-            }
+        for (const mediaFolder of folders) {
+            isChecked = user.Policy?.EnableContentDeletion || user.Policy?.EnableContentDeletionFromFolders?.indexOf(mediaFolder.Id || '') != -1;
+            checkedAttribute = isChecked ? ' checked="checked"' : '';
+            itemsArr.push({
+                ...mediaFolder,
+                checkedAttribute: checkedAttribute
+            });
+        }
 
-            for (const channel of channelsResult.Items) {
+        if (channels?.Items) {
+            for (const channel of channels.Items) {
                 isChecked = user.Policy?.EnableContentDeletion || user.Policy?.EnableContentDeletionFromFolders?.indexOf(channel.Id || '') != -1;
                 checkedAttribute = isChecked ? ' checked="checked"' : '';
                 itemsArr.push({
@@ -93,16 +97,66 @@ const UserEdit = () => {
                     checkedAttribute: checkedAttribute
                 });
             }
+        }
 
-            setDeleteFoldersAccess(itemsArr);
+        setDeleteFoldersAccess(itemsArr);
 
-            const chkEnableDeleteAllFolders = page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement;
-            chkEnableDeleteAllFolders.checked = user.Policy?.EnableContentDeletion || false;
-            triggerChange(chkEnableDeleteAllFolders);
-        }).catch(err => {
-            console.error('[useredit] failed to fetch channels', err);
-        });
-    }, []);
+        const chkEnableDeleteAllFolders = page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement;
+        chkEnableDeleteAllFolders.checked = user.Policy?.EnableContentDeletion || false;
+        triggerChange(chkEnableDeleteAllFolders);
+    }, [channels]);
+
+    useEffect(() => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[useredit] Unexpected null page reference');
+            return;
+        }
+
+        if (userDto && isAuthProvidersSuccess && authProviders != null) {
+            loadAuthProviders(page, userDto, authProviders);
+        }
+    }, [authProviders, isAuthProvidersSuccess, userDto, loadAuthProviders]);
+
+    useEffect(() => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[useredit] Unexpected null page reference');
+            return;
+        }
+
+        if (userDto && isPasswordResetProvidersSuccess && passwordResetProviders != null) {
+            loadPasswordResetProviders(page, userDto, passwordResetProviders);
+        }
+    }, [passwordResetProviders, isPasswordResetProvidersSuccess, userDto, loadPasswordResetProviders]);
+
+    useEffect(() => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[useredit] Unexpected null page reference');
+            return;
+        }
+
+        if (userDto && isMediaFoldersSuccess && isChannelsSuccess && mediaFolders?.Items != null) {
+            loadDeleteFolders(page, userDto, mediaFolders.Items);
+        }
+    }, [userDto, mediaFolders, isMediaFoldersSuccess, isChannelsSuccess, channels, loadDeleteFolders]);
+
+    useEffect(() => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[useredit] Unexpected null page reference');
+            return;
+        }
+
+        if (netConfig && isNetConfigSuccess) {
+            (page.querySelector('.fldRemoteAccess') as HTMLDivElement).classList.toggle('hide', !netConfig.EnableRemoteAccess);
+        }
+    }, [netConfig, isNetConfigSuccess]);
 
     const loadUser = useCallback((user: UserDto) => {
         const page = element.current;
@@ -112,24 +166,6 @@ const UserEdit = () => {
             return;
         }
 
-        window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/Providers')).then(function (providers) {
-            loadAuthProviders(page, user, providers);
-        }).catch(err => {
-            console.error('[useredit] failed to fetch auth providers', err);
-        });
-        window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/PasswordResetProviders')).then(function (providers) {
-            loadPasswordResetProviders(page, user, providers);
-        }).catch(err => {
-            console.error('[useredit] failed to fetch password reset providers', err);
-        });
-        window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
-            IsHidden: false
-        })).then(function (folders) {
-            loadDeleteFolders(page, user, folders.Items);
-        }).catch(err => {
-            console.error('[useredit] failed to fetch media folders', err);
-        });
-
         const disabledUserBanner = page.querySelector('.disabledUserBanner') as HTMLDivElement;
         disabledUserBanner.classList.toggle('hide', !user.Policy?.IsDisabled);
 
@@ -139,7 +175,6 @@ const UserEdit = () => {
 
         void libraryMenu.then(menu => menu.setTitle(user.Name));
 
-        setUserDto(user);
         (page.querySelector('#txtUserName') as HTMLInputElement).value = user.Name || '';
         (page.querySelector('.chkIsAdmin') as HTMLInputElement).checked = !!user.Policy?.IsAdministrator;
         (page.querySelector('.chkDisabled') as HTMLInputElement).checked = !!user.Policy?.IsDisabled;
@@ -163,16 +198,22 @@ const UserEdit = () => {
         (page.querySelector('#txtMaxActiveSessions') as HTMLInputElement).value = String(user.Policy?.MaxActiveSessions) || '0';
         (page.querySelector('#selectSyncPlayAccess') as HTMLSelectElement).value = String(user.Policy?.SyncPlayAccess);
         loading.hide();
-    }, [loadAuthProviders, loadPasswordResetProviders, loadDeleteFolders ]);
+    }, [ libraryMenu ]);
 
     const loadData = useCallback(() => {
+        if (!userDto) {
+            console.error('[profile] No user available');
+            return;
+        }
         loading.show();
-        getUser().then(function (user) {
-            loadUser(user);
-        }).catch(err => {
-            console.error('[useredit] failed to load data', err);
-        });
-    }, [loadUser]);
+        loadUser(userDto);
+    }, [userDto, loadUser]);
+
+    useEffect(() => {
+        if (isUserSuccess) {
+            loadData();
+        }
+    }, [loadData, isUserSuccess]);
 
     useEffect(() => {
         const page = element.current;
@@ -182,8 +223,6 @@ const UserEdit = () => {
             return;
         }
 
-        loadData();
-
         const saveUser = (user: UserDto) => {
             if (!user.Id || !user.Policy) {
                 throw new Error('Unexpected null user id or policy');
@@ -215,53 +254,58 @@ const UserEdit = () => {
             user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : getCheckedElementDataIds(page.querySelectorAll('.chkFolder'));
             user.Policy.SyncPlayAccess = (page.querySelector('#selectSyncPlayAccess') as HTMLSelectElement).value as SyncPlayUserAccessType;
 
-            window.ApiClient.updateUser(user).then(() => (
-                window.ApiClient.updateUserPolicy(user.Id || '', user.Policy || { PasswordResetProviderId: '', AuthenticationProviderId: '' })
-            )).then(() => {
-                navigate('/dashboard/users', {
-                    state: { openSavedToast: true }
-                });
-                loading.hide();
-            }).catch(err => {
-                console.error('[useredit] failed to update user', err);
+            updateUser.mutate({ userId: user.Id, userDto: user }, {
+                onSuccess: () => {
+                    if (user.Id) {
+                        updateUserPolicy.mutate({
+                            userId: user.Id,
+                            userPolicy: user.Policy || { PasswordResetProviderId: '', AuthenticationProviderId: '' }
+                        }, {
+                            onSuccess: () => {
+                                loading.hide();
+                                navigate('/dashboard/users', {
+                                    state: { openSavedToast: true }
+                                });
+                            }
+                        });
+                    }
+                }
             });
         };
 
         const onSubmit = (e: Event) => {
             loading.show();
-            getUser().then(function (result) {
-                saveUser(result);
-            }).catch(err => {
-                console.error('[useredit] failed to fetch user', err);
-            });
+            if (userDto) {
+                saveUser(userDto);
+            }
             e.preventDefault();
             e.stopPropagation();
             return false;
         };
 
+        const onBtnCancelClick = () => {
+            window.history.back();
+        };
+
         (page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
             (page.querySelector('.deleteAccess') as HTMLDivElement).classList.toggle('hide', this.checked);
         });
 
-        window.ApiClient.getNamedConfiguration('network').then(function (config) {
-            (page.querySelector('.fldRemoteAccess') as HTMLDivElement).classList.toggle('hide', !config.EnableRemoteAccess);
-        }).catch(err => {
-            console.error('[useredit] failed to load network config', err);
-        });
-
         (page.querySelector('.editUserProfileForm') as HTMLFormElement).addEventListener('submit', onSubmit);
+        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', onBtnCancelClick);
 
-        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', function() {
-            window.history.back();
-        });
-    }, [loadData]);
+        return () => {
+            (page.querySelector('.editUserProfileForm') as HTMLFormElement).removeEventListener('submit', onSubmit);
+            (page.querySelector('#btnCancel') as HTMLButtonElement).removeEventListener('click', onBtnCancelClick);
+        };
+    }, [loadData, updateUser, userDto, updateUserPolicy, navigate]);
 
-    const optionLoginProvider = authProviders.map((provider) => {
+    const optionLoginProvider = authProviders?.map((provider) => {
         const selected = provider.Id === authenticationProviderId || authProviders.length < 2 ? ' selected' : '';
         return `<option value="${provider.Id}"${selected}>${escapeHTML(provider.Name)}</option>`;
     });
 
-    const optionPasswordResetProvider = passwordResetProviders.map((provider) => {
+    const optionPasswordResetProvider = passwordResetProviders?.map((provider) => {
         const selected = provider.Id === passwordResetProviderId || passwordResetProviders.length < 2 ? ' selected' : '';
         return `<option value="${provider.Id}"${selected}>${escapeHTML(provider.Name)}</option>`;
     });

src/apps/experimental/components/AppToolbar/index.tsx

@@ -2,7 +2,6 @@ import Stack from '@mui/material/Stack';
 import React, { type FC } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { appRouter, PUBLIC_PATHS } from 'components/router/appRouter';
 import AppToolbar from 'components/toolbar/AppToolbar';
 import ServerButton from 'components/toolbar/ServerButton';
 
@@ -17,6 +16,14 @@ interface AppToolbarProps {
     onDrawerButtonClick: (event: React.MouseEvent<HTMLElement>) => void
 }
 
+const PUBLIC_PATHS = [
+    '/addserver',
+    '/selectserver',
+    '/login',
+    '/forgotpassword',
+    '/forgotpasswordpin'
+];
+
 const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
     isDrawerAvailable,
     isDrawerOpen,
@@ -27,10 +34,6 @@ const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
     // The video osd does not show the standard toolbar
     if (location.pathname === '/video') return null;
 
-    // Only show the back button in apps when appropriate
-    const isBackButtonAvailable = window.NativeShell && appRouter.canGoBack(location.pathname);
-
-    // Check if the current path is a public path to hide user content
     const isPublicPath = PUBLIC_PATHS.includes(location.pathname);
 
     return (
@@ -45,7 +48,6 @@ const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
             isDrawerAvailable={isDrawerAvailable}
             isDrawerOpen={isDrawerOpen}
             onDrawerButtonClick={onDrawerButtonClick}
-            isBackButtonAvailable={isBackButtonAvailable}
             isUserMenuAvailable={!isPublicPath}
         >
             {!isDrawerAvailable && (

src/apps/experimental/components/AppToolbar/userViews/UserViewNav.tsx

@@ -3,6 +3,7 @@ import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collec
 import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
 import Favorite from '@mui/icons-material/Favorite';
 import Button from '@mui/material/Button/Button';
+import Icon from '@mui/material/Icon';
 import { Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -15,6 +16,7 @@ import { appRouter } from 'components/router/appRouter';
 import { useApi } from 'hooks/useApi';
 import useCurrentTab from 'hooks/useCurrentTab';
 import { useUserViews } from 'hooks/useUserViews';
+import { useWebConfig } from 'hooks/useWebConfig';
 import globalize from 'lib/globalize';
 
 import UserViewsMenu from './UserViewsMenu';
@@ -56,14 +58,19 @@ const UserViewNav = () => {
     const libraryId = searchParams.get('topParentId') || searchParams.get('parentId');
     const collectionType = searchParams.get('collectionType');
     const { activeTab } = useCurrentTab();
+    const webConfig = useWebConfig();
 
     const isExtraLargeScreen = useMediaQuery((t: Theme) => t.breakpoints.up('xl'));
     const isLargeScreen = useMediaQuery((t: Theme) => t.breakpoints.up('lg'));
     const maxViews = useMemo(() => {
-        if (isExtraLargeScreen) return MAX_USER_VIEWS_XL;
-        if (isLargeScreen) return MAX_USER_VIEWS_LG;
-        return MAX_USER_VIEWS_MD;
-    }, [ isExtraLargeScreen, isLargeScreen ]);
+        let _maxViews = MAX_USER_VIEWS_MD;
+        if (isExtraLargeScreen) _maxViews = MAX_USER_VIEWS_XL;
+        else if (isLargeScreen) _maxViews = MAX_USER_VIEWS_LG;
+
+        const customLinks = (webConfig.menuLinks || []).length;
+
+        return _maxViews - customLinks;
+    }, [ isExtraLargeScreen, isLargeScreen, webConfig.menuLinks ]);
 
     const { user } = useApi();
     const {
@@ -108,6 +115,21 @@ const UserViewNav = () => {
                 {globalize.translate(MetaView.Favorites.Name)}
             </Button>
 
+            {webConfig.menuLinks?.map(link => (
+                <Button
+                    key={link.name}
+                    variant='text'
+                    color='inherit'
+                    startIcon={<Icon>{link.icon || 'link'}</Icon>}
+                    component='a'
+                    href={link.url}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                >
+                    {link.name}
+                </Button>
+            ))}
+
             {primaryViews?.map(view => (
                 <Button
                     key={view.Id}

src/apps/experimental/components/library/ItemsView.tsx

@@ -9,6 +9,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import classNames from 'classnames';
 import React, { type FC, useCallback } from 'react';
 
+import { ItemAction } from 'constants/itemAction';
 import { useApi } from 'hooks/useApi';
 import { useLocalStorage } from 'hooks/useLocalStorage';
 import { useGetItemsViewByType } from 'hooks/useFetchItems';
@@ -99,7 +100,7 @@ const ItemsView: FC<ItemsViewProps> = ({
 
         if (viewType === LibraryTab.Songs) {
             listOptions.showParentTitle = true;
-            listOptions.action = 'playallfromhere';
+            listOptions.action = ItemAction.PlayAllFromHere;
             listOptions.smallIcon = true;
             listOptions.showArtist = true;
             listOptions.addToListButton = true;
@@ -221,7 +222,9 @@ const ItemsView: FC<ItemsViewProps> = ({
     const hasFilters = Object.values(libraryViewSettings.Filters ?? {}).some(
         (filter) => !!filter
     );
-    const hasSortName = libraryViewSettings.SortBy !== ItemSortBy.Random;
+    const hasSortName = libraryViewSettings.SortBy.includes(
+        ItemSortBy.SortName
+    );
 
     const itemsContainerClass = classNames(
         'centered padded-left padded-right padded-right-withalphapicker',

src/apps/experimental/components/library/ProgramsSectionView.tsx

@@ -1,14 +1,16 @@
 import React, { type FC } from 'react';
-import { useApi } from 'hooks/useApi';
-import { useGetProgramsSectionsWithItems, useGetTimers } from 'hooks/useFetchItems';
-import { appRouter } from 'components/router/appRouter';
-import globalize from 'lib/globalize';
-import Loading from 'components/loading/LoadingComponent';
+
 import NoItemsMessage from 'components/common/NoItemsMessage';
 import SectionContainer from 'components/common/SectionContainer';
-import { CardShape } from 'utils/card';
+import Loading from 'components/loading/LoadingComponent';
+import { appRouter } from 'components/router/appRouter';
+import { ItemAction } from 'constants/itemAction';
+import { useApi } from 'hooks/useApi';
+import { useGetProgramsSectionsWithItems, useGetTimers } from 'hooks/useFetchItems';
+import globalize from 'lib/globalize';
 import type { ParentId } from 'types/library';
 import type { Section, SectionType } from 'types/sections';
+import { CardShape } from 'utils/card';
 
 interface ProgramsSectionViewProps {
     parentId: ParentId;
@@ -92,7 +94,7 @@ const ProgramsSectionView: FC<ProgramsSectionViewProps> = ({
                         showChannelName: false,
                         cardLayout: true,
                         centerText: false,
-                        action: 'edit',
+                        action: ItemAction.Edit,
                         cardFooterAside: 'none',
                         preferThumb: true,
                         coverImage: true,

src/apps/experimental/components/library/SortButton.tsx

@@ -22,14 +22,6 @@ type SortOption = {
 
 type SortOptionsMapping = Record<string, SortOption[]>;
 
-const collectionMovieOptions: SortOption[] = [
-    { label: 'Name', value: ItemSortBy.SortName },
-    { label: 'OptionCommunityRating', value: ItemSortBy.CommunityRating },
-    { label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
-    { label: 'OptionParentalRating', value: ItemSortBy.OfficialRating },
-    { label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate }
-];
-
 const movieOrFavoriteOptions = [
     { label: 'Name', value: ItemSortBy.SortName },
     { label: 'OptionRandom', value: ItemSortBy.Random },
@@ -51,7 +43,6 @@ const photosOrPhotoAlbumsOptions = [
 
 const sortOptionsMapping: SortOptionsMapping = {
     [LibraryTab.Movies]: movieOrFavoriteOptions,
-    [LibraryTab.Collections]: collectionMovieOptions,
     [LibraryTab.Favorites]: movieOrFavoriteOptions,
     [LibraryTab.Series]: [
         { label: 'Name', value: ItemSortBy.SortName },

src/apps/experimental/features/details/components/buttons/PlayOrResumeButton.tsx

@@ -4,6 +4,7 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import ReplayIcon from '@mui/icons-material/Replay';
 import { useQueryClient } from '@tanstack/react-query';
 
+import { ItemAction } from 'constants/itemAction';
 import { useApi } from 'hooks/useApi';
 import { getChannelQuery } from 'hooks/api/liveTvHooks/useGetChannel';
 import globalize from 'lib/globalize';
@@ -76,7 +77,7 @@ const PlayOrResumeButton: FC<PlayOrResumeButtonProps> = ({
     return (
         <IconButton
             className='button-flat btnPlayOrResume'
-            data-action={isResumable ? 'resume' : 'play'}
+            data-action={isResumable ? ItemAction.Resume : ItemAction.Play}
             title={
                 isResumable ?
                     globalize.translate('ButtonResume') :

src/apps/experimental/features/preferences/components/DisplayPreferences.tsx

@@ -12,6 +12,7 @@ import React, { Fragment } from 'react';
 
 import { appHost } from 'components/apphost';
 import { AppFeature } from 'constants/appFeature';
+import { LayoutMode } from 'constants/layoutMode';
 import { useApi } from 'hooks/useApi';
 import { useThemes } from 'hooks/useThemes';
 import globalize from 'lib/globalize';
@@ -45,11 +46,10 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                         onChange={onChange}
                         value={values.layout}
                     >
-                        <MenuItem value='auto'>{globalize.translate('Auto')}</MenuItem>
-                        <MenuItem value='desktop'>{globalize.translate('Desktop')}</MenuItem>
-                        <MenuItem value='mobile'>{globalize.translate('Mobile')}</MenuItem>
-                        <MenuItem value='tv'>{globalize.translate('TV')}</MenuItem>
-                        <MenuItem value='experimental'>{globalize.translate('Experimental')}</MenuItem>
+                        <MenuItem value={LayoutMode.Auto}>{globalize.translate('Auto')}</MenuItem>
+                        <MenuItem value={LayoutMode.Desktop}>{globalize.translate('Desktop')}</MenuItem>
+                        <MenuItem value={LayoutMode.Mobile}>{globalize.translate('Mobile')}</MenuItem>
+                        <MenuItem value={LayoutMode.Tv}>{globalize.translate('TV')}</MenuItem>
                     </Select>
                     <FormHelperText component={Stack} id='display-settings-layout-description'>
                         <span>{globalize.translate('DisplayModeHelp')}</span>
@@ -169,6 +169,30 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                 </Fragment>
             ) }
 
+            <FormControl fullWidth>
+                <TextField
+                    aria-describedby='display-settings-slideshow-interval-description'
+                    value={values.slideshowInterval}
+                    label={globalize.translate('LabelSlideshowInterval')}
+                    name='slideshowInterval'
+                    onChange={onChange}
+                    slotProps={{
+                        htmlInput: {
+                            inputMode: 'numeric',
+                            max: '3600',
+                            min: '1',
+                            pattern: '[0-9]',
+                            required: true,
+                            step: '1',
+                            type: 'number'
+                        }
+                    }}
+                />
+                <FormHelperText id='display-settings-slideshow-interval-description'>
+                    {globalize.translate('LabelSlideshowIntervalHelp')}
+                </FormHelperText>
+            </FormControl>
+
             <FormControl fullWidth>
                 <FormControlLabel
                     aria-describedby='display-settings-faster-animations-description'

src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts

@@ -103,6 +103,7 @@ async function loadDisplaySettings({
         maxDaysForNextUp: settings.maxDaysForNextUp(),
         screensaver: settings.screensaver() || 'none',
         screensaverInterval: settings.backdropScreensaverInterval(),
+        slideshowInterval: settings.slideshowInterval(),
         theme: settings.theme() || defaultTheme?.id || FALLBACK_THEME_ID
     };
 

src/apps/experimental/features/preferences/types/displaySettingsValues.ts

@@ -18,5 +18,6 @@ export interface DisplaySettingsValues {
     maxDaysForNextUp: number;
     screensaver: string;
     screensaverInterval: number;
+    slideshowInterval: number;
     theme: string;
 }

src/apps/stable/routes/user/userprofile.tsx

@@ -1,23 +1,25 @@
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
 import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
-import React, { FunctionComponent, useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import React, { FunctionComponent, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import Dashboard from '../../../../utils/dashboard';
 import globalize from '../../../../lib/globalize';
 import { appHost } from '../../../../components/apphost';
 import confirm from '../../../../components/confirm/confirm';
-import Button from '../../../../elements/emby-button/Button';
-import UserPasswordForm from '../../../../components/dashboard/users/UserPasswordForm';
-import loading from '../../../../components/loading/loading';
 import toast from '../../../../components/toast/toast';
-import Page from '../../../../components/Page';
-import { AppFeature } from 'constants/appFeature';
+import { useUser } from 'apps/dashboard/features/users/api/useUser';
+import loading from 'components/loading/loading';
+import { queryClient } from 'utils/query/queryClient';
+import UserPasswordForm from 'components/dashboard/users/UserPasswordForm';
+import Page from 'components/Page';
+import Loading from 'components/loading/LoadingComponent';
+import Button from 'elements/emby-button/Button';
 
 const UserProfile: FunctionComponent = () => {
     const [ searchParams ] = useSearchParams();
     const userId = searchParams.get('userId');
-    const [ userName, setUserName ] = useState('');
+    const { data: user, isPending: isUserPending } = useUser(userId ? { userId: userId } : undefined);
     const libraryMenu = useMemo(async () => ((await import('../../../../scripts/libraryMenu')).default), []);
 
     const element = useRef<HTMLDivElement>(null);
@@ -30,50 +32,38 @@ const UserProfile: FunctionComponent = () => {
             return;
         }
 
-        if (!userId) {
-            console.error('[userprofile] missing user id');
-            return;
+        if (!user?.Name || !user?.Id) {
+            throw new Error('Unexpected null user name or id');
         }
 
-        loading.show();
-        window.ApiClient.getUser(userId).then(function (user) {
-            if (!user.Name || !user.Id) {
-                throw new Error('Unexpected null user name or id');
-            }
+        void libraryMenu.then(menu => menu.setTitle(user.Name));
 
-            setUserName(user.Name);
-            void libraryMenu.then(menu => menu.setTitle(user.Name));
-
-            let imageUrl = 'assets/img/avatar.png';
-            if (user.PrimaryImageTag) {
-                imageUrl = window.ApiClient.getUserImageUrl(user.Id, {
-                    tag: user.PrimaryImageTag,
-                    type: 'Primary'
-                });
-            }
-            const userImage = (page.querySelector('#image') as HTMLDivElement);
-            userImage.style.backgroundImage = 'url(' + imageUrl + ')';
-
-            Dashboard.getCurrentUser().then(function (loggedInUser: UserDto) {
-                if (!user.Policy) {
-                    throw new Error('Unexpected null user.Policy');
-                }
-
-                if (user.PrimaryImageTag) {
-                    (page.querySelector('#btnAddImage') as HTMLButtonElement).classList.add('hide');
-                    (page.querySelector('#btnDeleteImage') as HTMLButtonElement).classList.remove('hide');
-                } else if (appHost.supports(AppFeature.FileInput) && (loggedInUser?.Policy?.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
-                    (page.querySelector('#btnDeleteImage') as HTMLButtonElement).classList.add('hide');
-                    (page.querySelector('#btnAddImage') as HTMLButtonElement).classList.remove('hide');
-                }
-            }).catch(err => {
-                console.error('[userprofile] failed to get current user', err);
+        let imageUrl = 'assets/img/avatar.png';
+        if (user.PrimaryImageTag) {
+            imageUrl = window.ApiClient.getUserImageUrl(user.Id, {
+                tag: user.PrimaryImageTag,
+                type: 'Primary'
             });
-            loading.hide();
+        }
+        const userImage = (page.querySelector('#image') as HTMLDivElement);
+        userImage.style.backgroundImage = 'url(' + imageUrl + ')';
+
+        Dashboard.getCurrentUser().then(function (loggedInUser: UserDto) {
+            if (!user.Policy) {
+                throw new Error('Unexpected null user.Policy');
+            }
+
+            if (user.PrimaryImageTag) {
+                (page.querySelector('#btnAddImage') as HTMLButtonElement).classList.add('hide');
+                (page.querySelector('#btnDeleteImage') as HTMLButtonElement).classList.remove('hide');
+            } else if (appHost.supports('fileinput') && (loggedInUser?.Policy?.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
+                (page.querySelector('#btnDeleteImage') as HTMLButtonElement).classList.add('hide');
+                (page.querySelector('#btnAddImage') as HTMLButtonElement).classList.remove('hide');
+            }
         }).catch(err => {
-            console.error('[userprofile] failed to load data', err);
+            console.error('[userprofile] failed to get current user', err);
         });
-    }, [userId]);
+    }, [user, libraryMenu]);
 
     useEffect(() => {
         const page = element.current;
@@ -125,7 +115,9 @@ const UserProfile: FunctionComponent = () => {
                 userImage.style.backgroundImage = 'url(' + reader.result + ')';
                 window.ApiClient.uploadUserImage(userId, ImageType.Primary, file).then(function () {
                     loading.hide();
-                    reloadUser();
+                    void queryClient.invalidateQueries({
+                        queryKey: ['User']
+                    });
                 }).catch(err => {
                     console.error('[userprofile] failed to upload image', err);
                 });
@@ -134,7 +126,7 @@ const UserProfile: FunctionComponent = () => {
             reader.readAsDataURL(file);
         };
 
-        (page.querySelector('#btnDeleteImage') as HTMLButtonElement).addEventListener('click', function () {
+        const onDeleteImageClick = function () {
             if (!userId) {
                 console.error('[userprofile] missing user id');
                 return;
@@ -147,25 +139,41 @@ const UserProfile: FunctionComponent = () => {
                 loading.show();
                 window.ApiClient.deleteUserImage(userId, ImageType.Primary).then(function () {
                     loading.hide();
-                    reloadUser();
+                    void queryClient.invalidateQueries({
+                        queryKey: ['User']
+                    });
                 }).catch(err => {
                     console.error('[userprofile] failed to delete image', err);
                 });
             }).catch(() => {
                 // confirm dialog closed
             });
-        });
+        };
 
-        (page.querySelector('#btnAddImage') as HTMLButtonElement).addEventListener('click', function () {
+        const addImageClick = function () {
             const uploadImage = page.querySelector('#uploadImage') as HTMLInputElement;
             uploadImage.value = '';
             uploadImage.click();
-        });
+        };
 
-        (page.querySelector('#uploadImage') as HTMLInputElement).addEventListener('change', function (evt: Event) {
-            setFiles(evt);
-        });
-    }, [reloadUser, userId]);
+        const onUploadImage = (e: Event) => {
+            setFiles(e);
+        };
+
+        (page.querySelector('#btnDeleteImage') as HTMLButtonElement).addEventListener('click', onDeleteImageClick);
+        (page.querySelector('#btnAddImage') as HTMLButtonElement).addEventListener('click', addImageClick);
+        (page.querySelector('#uploadImage') as HTMLInputElement).addEventListener('change', onUploadImage);
+
+        return () => {
+            (page.querySelector('#btnDeleteImage') as HTMLButtonElement).removeEventListener('click', onDeleteImageClick);
+            (page.querySelector('#btnAddImage') as HTMLButtonElement).removeEventListener('click', addImageClick);
+            (page.querySelector('#uploadImage') as HTMLInputElement).removeEventListener('change', onUploadImage);
+        };
+    }, [reloadUser, user, userId]);
+
+    if (isUserPending || !user) {
+        return <Loading />;
+    }
 
     return (
         <Page
@@ -195,7 +203,7 @@ const UserProfile: FunctionComponent = () => {
                     </div>
                     <div style={{ verticalAlign: 'top', margin: '1em 2em', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                         <h2 className='username' style={{ margin: 0, fontSize: 'xx-large' }}>
-                            {userName}
+                            {user?.Name}
                         </h2>
                         <br />
                         <Button
@@ -213,7 +221,7 @@ const UserProfile: FunctionComponent = () => {
                     </div>
                 </div>
                 <UserPasswordForm
-                    userId={userId}
+                    user={user}
                 />
             </div>
         </Page>

src/assets/img/devices/firetv.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Amazon Fire TV</title><path d="M20.196 15.12c.265.337-.294 1.73-.542 2.353-.077.19.085.266.257.123 1.106-.926 1.39-2.867 1.166-3.149-.226-.277-2.16-.516-3.341.314-.183.127-.151.304.05.279.665-.08 2.147-.257 2.41.08m-.858.981c-2.064 1.523-5.056 2.333-7.632 2.333-3.611 0-6.862-1.334-9.322-3.555-.194-.176-.02-.414.21-.28 2.655 1.545 5.939 2.477 9.328 2.477 2.287 0 4.803-.476 7.115-1.458.348-.147.642.231.3.483m2.034-3.155a.388.388 0 0 1-.201-.04c-.041-.026-.087-.1-.133-.225l-1.734-4.355a1.79 1.79 0 0 0-.046-.117.266.266 0 0 1-.023-.108c0-.084.049-.128.146-.128h.58c.098 0 .165.014.205.04.04.026.082.102.127.226l1.344 3.823 1.343-3.823c.046-.124.089-.2.128-.226a.402.402 0 0 1 .205-.04h.54c.1 0 .148.044.148.128a.3.3 0 0 1-.025.108c-.016.04-.032.078-.044.117l-1.727 4.355c-.045.124-.09.199-.132.225a.388.388 0 0 1-.201.04zm-3.644.068c-.929 0-1.392-.463-1.392-1.392V8.739h-.706c-.13 0-.197-.066-.197-.196v-.246a.22.22 0 0 1 .045-.147c.03-.031.086-.055.171-.067l.717-.09.127-1.215c.013-.13.082-.196.207-.196h.41c.13 0 .196.066.196.196v1.196h1.276c.13 0 .195.065.195.197v.372c0 .13-.064.196-.195.196h-1.276v2.834c0 .243.055.411.162.51.108.098.293.147.555.147.124 0 .277-.016.46-.049.099-.02.164-.03.197-.03.052 0 .088.014.108.044.02.03.029.077.029.142v.266a.366.366 0 0 1-.04.19c-.026.043-.078.078-.157.103a3.018 3.018 0 0 1-.892.118m-4.665-2.976c.006-.052.011-.137.011-.255 0-.399-.094-.698-.28-.901-.186-.204-.46-.306-.818-.306-.412 0-.732.123-.962.369-.228.245-.36.61-.392 1.093zm-.942 3.07c-.803 0-1.411-.222-1.824-.667-.412-.444-.616-1.102-.616-1.972 0-.83.204-1.475.616-1.937.413-.46.988-.691 1.728-.691.62 0 1.098.176 1.432.524.332.351.5.846.5 1.487 0 .21-.017.422-.05.638-.014.077-.034.13-.064.156-.029.027-.077.04-.142.04h-3.08c.013.563.154.977.418 1.245.265.268.674.403 1.23.403.196 0 .385-.014.564-.04a5.04 5.04 0 0 0 .682-.166l.117-.035a.284.284 0 0 1 .09-.016c.085 0 .125.06.125.177v.276c0 .085-.012.144-.037.18a.441.441 0 0 1-.167.114 3.38 3.38 0 0 1-.701.205 4.236 4.236 0 0 1-.82.079m-5.424-.147c-.13 0-.195-.066-.195-.197v-4.58c0-.13.064-.195.195-.195h.432c.064 0 .116.012.153.039.036.025.06.076.072.146l.07.55c.176-.19.343-.34.499-.452a1.725 1.725 0 0 1 1.02-.323c.079 0 .158.003.235.01.112.014.168.072.168.176v.53c0 .117-.058.177-.178.177-.058 0-.114-.004-.17-.01a1.638 1.638 0 0 0-.18-.01c-.524 0-.973.157-1.346.47v3.472c0 .131-.066.197-.195.197zm-2.249 0c-.13 0-.196-.066-.196-.197v-4.58c0-.13.066-.195.196-.195h.579c.13 0 .195.064.195.195v4.58c0 .131-.065.197-.195.197zm.295-5.856c-.19 0-.339-.054-.447-.16a.581.581 0 0 1-.161-.428c0-.176.054-.318.16-.426.11-.109.257-.163.448-.163.189 0 .337.054.446.163.107.108.16.25.16.426a.581.581 0 0 1-.16.427.608.608 0 0 1-.446.161m-3.625 5.856c-.132 0-.197-.066-.197-.197v-4.01H.195c-.13 0-.195-.066-.195-.197v-.245c0-.065.014-.114.043-.147.03-.033.088-.055.173-.07l.705-.087v-.804c0-1.091.523-1.638 1.57-1.638.248 0 .51.036.784.109.072.019.122.047.152.088.029.038.044.107.044.205v.255c0 .124-.048.186-.148.186-.058 0-.14-.01-.248-.029-.11-.02-.23-.03-.369-.03-.3 0-.51.057-.633.172-.121.115-.181.303-.181.564v.903h1.324c.131 0 .197.064.197.195v.373c0 .13-.066.197-.197.197H1.892v4.01c0 .131-.065.197-.196.197Z" fill="#fff"/></svg>

src/components/apphost.js

@@ -6,6 +6,7 @@ import * as webSettings from '../scripts/settings/webSettings';
 import globalize from '../lib/globalize';
 import profileBuilder from '../scripts/browserDeviceProfile';
 import { AppFeature } from 'constants/appFeature';
+import { LayoutMode } from 'constants/layoutMode';
 
 const appName = 'Jellyfin Web';
 
@@ -13,7 +14,6 @@ const BrowserName = {
     tizen: 'Samsung Smart TV',
     web0s: 'LG Smart TV',
     titanos: 'Titan OS',
-    vega: 'Vega OS',
     operaTv: 'Opera TV',
     xboxOne: 'Xbox One',
     ps4: 'Sony PS4',
@@ -182,7 +182,7 @@ function supportsFullscreen() {
 }
 
 function getDefaultLayout() {
-    return 'desktop';
+    return LayoutMode.Experimental;
 }
 
 function supportsHtmlMediaAutoplay() {
@@ -372,7 +372,7 @@ export const appHost = {
 
         return getDefaultLayout();
     },
-    getDeviceProfile: getDeviceProfile,
+    getDeviceProfile,
     init: function () {
         if (window.NativeShell) {
             return window.NativeShell.AppHost.init();

src/components/cardbuilder/Card/CardBox.tsx

@@ -1,17 +1,18 @@
 import React, { type FC } from 'react';
+
 import layoutManager from 'components/layoutManager';
+import { ItemAction } from 'constants/itemAction';
+import { CardShape } from 'utils/card';
+import type { ItemDto } from 'types/base/models/item-dto';
+import type { CardOptions } from 'types/cardOptions';
 
 import CardOverlayButtons from './CardOverlayButtons';
 import CardHoverMenu from './CardHoverMenu';
 import CardOuterFooter from './CardOuterFooter';
 import CardContent from './CardContent';
-import { CardShape } from 'utils/card';
-
-import type { ItemDto } from 'types/base/models/item-dto';
-import type { CardOptions } from 'types/cardOptions';
 
 interface CardBoxProps {
-    action: string;
+    action: ItemAction;
     item: ItemDto;
     cardOptions: CardOptions;
     className: string;

src/components/cardbuilder/Card/CardHoverMenu.tsx

@@ -2,12 +2,14 @@ import React, { type FC } from 'react';
 import Box from '@mui/material/Box';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import classNames from 'classnames';
+
 import { appRouter } from 'components/router/appRouter';
 import itemHelper from 'components/itemHelper';
 import { playbackManager } from 'components/playback/playbackmanager';
-
+import { ItemAction } from 'constants/itemAction';
 import PlayedButton from 'elements/emby-playstatebutton/PlayedButton';
 import FavoriteButton from 'elements/emby-ratingbutton/FavoriteButton';
+
 import PlayArrowIconButton from '../../common/PlayArrowIconButton';
 import MoreVertIconButton from '../../common/MoreVertIconButton';
 
@@ -15,7 +17,7 @@ import type { ItemDto } from 'types/base/models/item-dto';
 import type { CardOptions } from 'types/cardOptions';
 
 interface CardHoverMenuProps {
-    action: string,
+    action: ItemAction,
     item: ItemDto;
     cardOptions: CardOptions;
 }
@@ -29,7 +31,7 @@ const CardHoverMenu: FC<CardHoverMenuProps> = ({
         parentId: cardOptions.parentId
     });
     const btnCssClass =
-		'paper-icon-button-light cardOverlayButton cardOverlayButton-hover itemAction';
+        'paper-icon-button-light cardOverlayButton cardOverlayButton-hover itemAction';
 
     const centerPlayButtonClass = classNames(
         btnCssClass,
@@ -51,7 +53,7 @@ const CardHoverMenu: FC<CardHoverMenuProps> = ({
             {playbackManager.canPlay(item) && (
                 <PlayArrowIconButton
                     className={centerPlayButtonClass}
-                    action='play'
+                    action={ItemAction.Play}
                     title='Play'
                 />
             )}

src/components/cardbuilder/Card/CardOverlayButtons.tsx

@@ -2,15 +2,17 @@ import { LocationType } from '@jellyfin/sdk/lib/generated-client/models/location
 import React, { type FC } from 'react';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import classNames from 'classnames';
-import { appRouter } from 'components/router/appRouter';
-import PlayArrowIconButton from '../../common/PlayArrowIconButton';
-import MoreVertIconButton from '../../common/MoreVertIconButton';
 
+import { appRouter } from 'components/router/appRouter';
+import { ItemAction } from 'constants/itemAction';
 import { ItemKind } from 'types/base/models/item-kind';
 import { ItemMediaKind } from 'types/base/models/item-media-kind';
 import type { ItemDto } from 'types/base/models/item-dto';
 import type { CardOptions } from 'types/cardOptions';
 
+import PlayArrowIconButton from '../../common/PlayArrowIconButton';
+import MoreVertIconButton from '../../common/MoreVertIconButton';
+
 const sholudShowOverlayPlayButton = (
     overlayPlayButton: boolean | undefined,
     item: ItemDto
@@ -78,7 +80,7 @@ const CardOverlayButtons: FC<CardOverlayButtonsProps> = ({
             {cardOptions.centerPlayButton && (
                 <PlayArrowIconButton
                     className={centerPlayButtonClass}
-                    action='play'
+                    action={ItemAction.Play}
                     title='Play'
                 />
             )}
@@ -87,7 +89,7 @@ const CardOverlayButtons: FC<CardOverlayButtonsProps> = ({
                 {sholudShowOverlayPlayButton(overlayPlayButton, item) && (
                     <PlayArrowIconButton
                         className={btnCssClass}
-                        action='play'
+                        action={ItemAction.Play}
                         title='Play'
                     />
                 )}

src/components/cardbuilder/Card/cardHelper.ts

@@ -7,6 +7,7 @@ import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
 import { appRouter } from 'components/router/appRouter';
 import layoutManager from 'components/layoutManager';
 import itemHelper from 'components/itemHelper';
+import { ItemAction } from 'constants/itemAction';
 import globalize from 'lib/globalize';
 import datetime from 'scripts/datetime';
 import { isUsingLiveTvNaming } from '../cardBuilderUtils';
@@ -88,7 +89,7 @@ export function getTextActionButton(
 
     const dataAttributes = getDataAttributes(
         {
-            action: 'link',
+            action: ItemAction.Link,
             itemServerId: serverId ?? item.ServerId,
             itemId: item.Id,
             itemChannelId: item.ChannelId,

src/components/cardbuilder/Card/useCard.ts

@@ -1,17 +1,19 @@
 import classNames from 'classnames';
+
+import layoutManager from 'components/layoutManager';
+import { ItemAction } from 'constants/itemAction';
+import { ItemKind } from 'types/base/models/item-kind';
+import { ItemMediaKind } from 'types/base/models/item-media-kind';
+import type { ItemDto } from 'types/base/models/item-dto';
+import type { CardOptions } from 'types/cardOptions';
+import { CardShape } from 'utils/card';
+import { getDataAttributes } from 'utils/items';
+
 import useCardImageUrl from './useCardImageUrl';
 import {
     resolveAction,
     resolveMixedShapeByAspectRatio
 } from '../cardBuilderUtils';
-import { getDataAttributes } from 'utils/items';
-import { CardShape } from 'utils/card';
-import layoutManager from 'components/layoutManager';
-
-import { ItemKind } from 'types/base/models/item-kind';
-import { ItemMediaKind } from 'types/base/models/item-media-kind';
-import type { ItemDto } from 'types/base/models/item-dto';
-import type { CardOptions } from 'types/cardOptions';
 
 interface UseCardProps {
     item: ItemDto;
@@ -20,7 +22,7 @@ interface UseCardProps {
 
 function useCard({ item, cardOptions }: UseCardProps) {
     const action = resolveAction({
-        defaultAction: cardOptions.action ?? 'link',
+        defaultAction: cardOptions.action ?? ItemAction.Link,
         isFolder: item.IsFolder ?? false,
         isPhoto: item.MediaType === ItemMediaKind.Photo
     });

src/components/cardbuilder/cardBuilder.js

@@ -8,6 +8,7 @@ import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-ite
 import { PersonKind } from '@jellyfin/sdk/lib/generated-client/models/person-kind';
 import escapeHtml from 'escape-html';
 
+import { ItemAction } from 'constants/itemAction';
 import browser from 'scripts/browser';
 import datetime from 'scripts/datetime';
 import dom from 'utils/dom';
@@ -514,7 +515,7 @@ function getCardFooterText(item, apiClient, options, footerClass, progressHtml,
     const showOtherText = flags.isOuterFooter ? !flags.overlayText : flags.overlayText;
 
     if (flags.isOuterFooter && options.cardLayout && layoutManager.mobile && options.cardFooterAside !== 'none') {
-        html += `<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu" title="${globalize.translate('ButtonMore')}"><span class="material-icons more_vert" aria-hidden="true"></span></button>`;
+        html += `<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="${ItemAction.Menu}" title="${globalize.translate('ButtonMore')}"><span class="material-icons more_vert" aria-hidden="true"></span></button>`;
     }
 
     const cssClass = options.centerText ? 'cardText cardTextCentered' : 'cardText';
@@ -577,10 +578,9 @@ function getCardFooterText(item, apiClient, options, footerClass, progressHtml,
             if (flags.isOuterFooter && item.AlbumArtists?.length) {
                 const artistText = item.AlbumArtists
                     .map(artist => {
-                        artist.ServerId = serverId;
                         artist.Type = BaseItemKind.MusicArtist;
                         artist.IsFolder = true;
-                        return getTextActionButton(artist);
+                        return getTextActionButton(artist, null, serverId);
                     })
                     .join(' / ');
                 lines.push(artistText);
@@ -777,7 +777,7 @@ function getTextActionButton(item, text, serverId) {
     }
 
     const url = appRouter.getRouteUrl(item);
-    let html = '<a href="' + url + '" ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' class="itemAction textActionButton" title="' + text + '" data-action="link">';
+    let html = '<a href="' + url + '" ' + itemShortcuts.getShortcutAttributesHtml(item, serverId) + ' class="itemAction textActionButton" title="' + text + `" data-action="${ItemAction.Link}">`;
     html += text;
     html += '</a>';
 
@@ -886,7 +886,7 @@ function importRefreshIndicator() {
  */
 function buildCard(index, item, apiClient, options) {
     const action = resolveAction({
-        defaultAction: options.action || 'link',
+        defaultAction: options.action || ItemAction.Link,
         isFolder: item.IsFolder,
         isPhoto: item.MediaType === 'Photo'
     });
@@ -986,15 +986,15 @@ function buildCard(index, item, apiClient, options) {
         const btnCssClass = 'cardOverlayButton cardOverlayButton-br itemAction';
 
         if (options.centerPlayButton) {
-            overlayButtons += `<button is="paper-icon-button-light" class="${btnCssClass} cardOverlayButton-centered" data-action="play" title="${globalize.translate('Play')}"><span class="material-icons cardOverlayButtonIcon play_arrow" aria-hidden="true"></span></button>`;
+            overlayButtons += `<button is="paper-icon-button-light" class="${btnCssClass} cardOverlayButton-centered" data-action="${ItemAction.Play}" title="${globalize.translate('Play')}"><span class="material-icons cardOverlayButtonIcon play_arrow" aria-hidden="true"></span></button>`;
         }
 
         if (overlayPlayButton && !item.IsPlaceHolder && (item.LocationType !== 'Virtual' || !item.MediaType || item.Type === 'Program') && item.Type !== 'Person') {
-            overlayButtons += `<button is="paper-icon-button-light" class="${btnCssClass}" data-action="play" title="${globalize.translate('Play')}"><span class="material-icons cardOverlayButtonIcon play_arrow" aria-hidden="true"></span></button>`;
+            overlayButtons += `<button is="paper-icon-button-light" class="${btnCssClass}" data-action="${ItemAction.Play}" title="${globalize.translate('Play')}"><span class="material-icons cardOverlayButtonIcon play_arrow" aria-hidden="true"></span></button>`;
         }
 
         if (options.overlayMoreButton) {
-            overlayButtons += `<button is="paper-icon-button-light" class="${btnCssClass}" data-action="menu" title="${globalize.translate('ButtonMore')}"><span class="material-icons cardOverlayButtonIcon more_vert" aria-hidden="true"></span></button>`;
+            overlayButtons += `<button is="paper-icon-button-light" class="${btnCssClass}" data-action="${ItemAction.Menu}" title="${globalize.translate('ButtonMore')}"><span class="material-icons cardOverlayButtonIcon more_vert" aria-hidden="true"></span></button>`;
         }
     }
 
@@ -1157,7 +1157,7 @@ function getHoverMenuHtml(item, action) {
     const btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
 
     if (playbackManager.canPlay(item)) {
-        html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover play_arrow" aria-hidden="true"></span></button>';
+        html += `<button is="paper-icon-button-light" class="${btnCssClass} cardOverlayFab-primary" data-action="${ItemAction.Resume}"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover play_arrow" aria-hidden="true"></span></button>`;
     }
 
     html += '<div class="cardOverlayButton-br flex">';
@@ -1166,17 +1166,17 @@ function getHoverMenuHtml(item, action) {
 
     if (itemHelper.canMarkPlayed(item)) {
         import('../../elements/emby-playstatebutton/emby-playstatebutton');
-        html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check" aria-hidden="true"></span></button>';
+        html += `<button is="emby-playstatebutton" type="button" data-action="${ItemAction.None}" class="${btnCssClass}" data-id="${item.Id}" data-serverid="${item.ServerId}" data-itemtype="${item.Type}" data-played="${userData.Played}"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check" aria-hidden="true"></span></button>`;
     }
 
     if (itemHelper.canRate(item)) {
         const likes = userData.Likes == null ? '' : userData.Likes;
 
         import('../../elements/emby-ratingbutton/emby-ratingbutton');
-        html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite" aria-hidden="true"></span></button>';
+        html += `<button is="emby-ratingbutton" type="button" data-action="${ItemAction.None}" class="${btnCssClass}" data-id="${item.Id}" data-serverid="${item.ServerId}" data-itemtype="${item.Type}" data-likes="${likes}" data-isfavorite="${userData.IsFavorite}"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite" aria-hidden="true"></span></button>`;
     }
 
-    html += `<button is="paper-icon-button-light" class="${btnCssClass}" data-action="menu" title="${globalize.translate('ButtonMore')}"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_vert" aria-hidden="true"></span></button>`;
+    html += `<button is="paper-icon-button-light" class="${btnCssClass}" data-action="${ItemAction.Menu}" title="${globalize.translate('ButtonMore')}"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_vert" aria-hidden="true"></span></button>`;
     html += '</div>';
     html += '</div>';
 

src/components/cardbuilder/cardBuilderUtils.test.ts

@@ -11,6 +11,7 @@ import {
     resolveCardImageContainerCssClasses,
     resolveMixedShapeByAspectRatio
 } from './cardBuilderUtils';
+import { ItemAction } from 'constants/itemAction';
 
 describe('getDesiredAspect', () => {
     test('"portrait" (case insensitive)', () => {
@@ -441,11 +442,11 @@ describe('isResizable', () => {
 });
 
 describe('resolveAction', () => {
-    test('default action', () => expect(resolveAction({ defaultAction: 'link', isFolder: false, isPhoto: false })).toEqual('link'));
+    test('default action', () => expect(resolveAction({ defaultAction: ItemAction.Link, isFolder: false, isPhoto: false })).toEqual(ItemAction.Link));
 
-    test('photo', () => expect(resolveAction({ defaultAction: 'link', isFolder: false, isPhoto: true })).toEqual('play'));
+    test('photo', () => expect(resolveAction({ defaultAction: ItemAction.Link, isFolder: false, isPhoto: true })).toEqual(ItemAction.Play));
 
-    test('default action is "play" and is folder', () => expect(resolveAction({ defaultAction: 'play', isFolder: true, isPhoto: true })).toEqual('link'));
+    test('default action is "play" and is folder', () => expect(resolveAction({ defaultAction: ItemAction.Play, isFolder: true, isPhoto: true })).toEqual(ItemAction.Link));
 });
 
 describe('resolveMixedShapeByAspectRatio', () => {

src/components/cardbuilder/cardBuilderUtils.ts

@@ -1,7 +1,9 @@
-import { CardShape } from '../../utils/card';
-import { randomInt } from '../../utils/number';
 import classNames from 'classnames';
 
+import { ItemAction } from 'constants/itemAction';
+import { CardShape } from 'utils/card';
+import { randomInt } from 'utils/number';
+
 const ASPECT_RATIOS = {
     portrait: (2 / 3),
     backdrop: (16 / 9),
@@ -20,12 +22,12 @@ export const isUsingLiveTvNaming = (itemType: string | null | undefined): boolea
  * Resolves Card action to display
  * @param opts options to determine the action to return
  */
-export const resolveAction = (opts: { defaultAction: string, isFolder: boolean, isPhoto: boolean }): string => {
-    if (opts.defaultAction === 'play' && opts.isFolder) {
+export const resolveAction = (opts: { defaultAction: ItemAction, isFolder: boolean, isPhoto: boolean }): ItemAction => {
+    if (opts.defaultAction === ItemAction.Play && opts.isFolder) {
         // If this hard-coding is ever removed make sure to test nested photo albums
-        return 'link';
+        return ItemAction.Link;
     } else if (opts.isPhoto) {
-        return 'play';
+        return ItemAction.Play;
     } else {
         return opts.defaultAction;
     }

src/components/common/InfoIconButton.tsx

@@ -1,6 +1,8 @@
 import React, { type FC } from 'react';
 import IconButton from '@mui/material/IconButton';
 import InfoIcon from '@mui/icons-material/Info';
+
+import { ItemAction } from 'constants/itemAction';
 import globalize from 'lib/globalize';
 
 interface InfoIconButtonProps {
@@ -11,7 +13,7 @@ const InfoIconButton: FC<InfoIconButtonProps> = ({ className }) => {
     return (
         <IconButton
             className={className}
-            data-action='link'
+            data-action={ItemAction.Link}
             title={globalize.translate('ButtonInfo')}
         >
             <InfoIcon />

src/components/common/MoreVertIconButton.tsx

@@ -1,6 +1,8 @@
 import React, { type FC } from 'react';
 import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+
+import { ItemAction } from 'constants/itemAction';
 import globalize from 'lib/globalize';
 
 interface MoreVertIconButtonProps {
@@ -12,7 +14,7 @@ const MoreVertIconButton: FC<MoreVertIconButtonProps> = ({ className, iconClassN
     return (
         <IconButton
             className={className}
-            data-action='menu'
+            data-action={ItemAction.Menu}
             title={globalize.translate('ButtonMore')}
         >
             <MoreVertIcon className={iconClassName} />

src/components/common/PlayArrowIconButton.tsx

@@ -1,11 +1,13 @@
 import React, { type FC } from 'react';
 import IconButton from '@mui/material/IconButton';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+
+import { ItemAction } from 'constants/itemAction';
 import globalize from 'lib/globalize';
 
 interface PlayArrowIconButtonProps {
     className: string;
-    action: string;
+    action: ItemAction;
     title: string;
     iconClassName?: string;
 }

src/components/common/PlaylistAddIconButton.tsx

@@ -1,6 +1,8 @@
 import React, { type FC } from 'react';
 import IconButton from '@mui/material/IconButton';
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
+
+import { ItemAction } from 'constants/itemAction';
 import globalize from 'lib/globalize';
 
 interface PlaylistAddIconButtonProps {
@@ -11,7 +13,7 @@ const PlaylistAddIconButton: FC<PlaylistAddIconButtonProps> = ({ className }) =>
     return (
         <IconButton
             className={className}
-            data-action='addtoplaylist'
+            data-action={ItemAction.AddToPlaylist}
             title={globalize.translate('AddToPlaylist')}
         >
             <PlaylistAddIcon />

src/components/common/RightIconButtons.tsx

@@ -1,6 +1,8 @@
 import React, { type FC } from 'react';
 import IconButton from '@mui/material/IconButton';
 
+import { ItemAction } from 'constants/itemAction';
+
 interface RightIconButtonsProps {
     className?: string;
     id: string;
@@ -12,7 +14,7 @@ const RightIconButtons: FC<RightIconButtonsProps> = ({ className, id, title, ico
     return (
         <IconButton
             className={className}
-            data-action='custom'
+            data-action={ItemAction.Custom}
             data-customaction={id}
             title={title}
         >

src/components/dashboard/users/UserPasswordForm.tsx

@@ -9,12 +9,11 @@ import Button from '../../../elements/emby-button/Button';
 import Input from '../../../elements/emby-input/Input';
 
 type IProps = {
-    userId: string | null;
+    user: UserDto
 };
 
-const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
+const UserPasswordForm: FunctionComponent<IProps> = ({ user }: IProps) => {
     const element = useRef<HTMLDivElement>(null);
-    const user = useRef<UserDto>();
     const libraryMenu = useMemo(async () => ((await import('../../../scripts/libraryMenu')).default), []);
 
     const loadUser = useCallback(async () => {
@@ -25,22 +24,16 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
             return;
         }
 
-        if (!userId) {
-            console.error('[UserPasswordForm] missing user id');
-            return;
-        }
-
-        user.current = await window.ApiClient.getUser(userId);
         const loggedInUser = await Dashboard.getCurrentUser();
 
-        if (!user.current.Policy || !user.current.Configuration) {
+        if (!user.Policy || !user.Configuration) {
             throw new Error('Unexpected null user policy or configuration');
         }
 
-        (await libraryMenu).setTitle(user.current.Name);
+        (await libraryMenu).setTitle(user.Name);
 
-        if (user.current.HasConfiguredPassword) {
-            if (!user.current.Policy?.IsAdministrator) {
+        if (user.HasConfiguredPassword) {
+            if (!user.Policy?.IsAdministrator) {
                 (page.querySelector('#btnResetPassword') as HTMLDivElement).classList.remove('hide');
             }
             (page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.remove('hide');
@@ -49,7 +42,7 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
             (page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.add('hide');
         }
 
-        const canChangePassword = loggedInUser?.Policy?.IsAdministrator || user.current.Policy.EnableUserPreferenceAccess;
+        const canChangePassword = loggedInUser?.Policy?.IsAdministrator || user.Policy.EnableUserPreferenceAccess;
         (page.querySelector('.passwordSection') as HTMLDivElement).classList.toggle('hide', !canChangePassword);
 
         import('../../autoFocuser').then(({ default: autoFocuser }) => {
@@ -61,7 +54,7 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
         (page.querySelector('#txtCurrentPassword') as HTMLInputElement).value = '';
         (page.querySelector('#txtNewPassword') as HTMLInputElement).value = '';
         (page.querySelector('#txtNewPasswordConfirm') as HTMLInputElement).value = '';
-    }, [userId]);
+    }, [user, libraryMenu]);
 
     useEffect(() => {
         const page = element.current;
@@ -78,7 +71,7 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
         const onSubmit = (e: Event) => {
             if ((page.querySelector('#txtNewPassword') as HTMLInputElement).value != (page.querySelector('#txtNewPasswordConfirm') as HTMLInputElement).value) {
                 toast(globalize.translate('PasswordMatchError'));
-            } else if ((page.querySelector('#txtNewPassword') as HTMLInputElement).value == '' && user.current?.Policy?.IsAdministrator) {
+            } else if ((page.querySelector('#txtNewPassword') as HTMLInputElement).value == '' && user?.Policy?.IsAdministrator) {
                 toast(globalize.translate('PasswordMissingSaveError'));
             } else {
                 loading.show();
@@ -90,7 +83,7 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
         };
 
         const savePassword = () => {
-            if (!userId) {
+            if (!user.Id) {
                 console.error('[UserPasswordForm.savePassword] missing user id');
                 return;
             }
@@ -104,7 +97,7 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
                 currentPassword = '';
             }
 
-            window.ApiClient.updateUserPassword(userId, currentPassword, newPassword).then(function () {
+            window.ApiClient.updateUserPassword(user.Id, currentPassword, newPassword).then(function () {
                 loading.hide();
                 toast(globalize.translate('PasswordSaved'));
 
@@ -121,26 +114,23 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
         };
 
         const resetPassword = () => {
-            if (!userId) {
-                console.error('[UserPasswordForm.resetPassword] missing user id');
-                return;
-            }
-
             const msg = globalize.translate('PasswordResetConfirmation');
             confirm(msg, globalize.translate('ResetPassword')).then(function () {
                 loading.show();
-                window.ApiClient.resetUserPassword(userId).then(function () {
-                    loading.hide();
-                    Dashboard.alert({
-                        message: globalize.translate('PasswordResetComplete'),
-                        title: globalize.translate('ResetPassword')
+                if (user.Id) {
+                    window.ApiClient.resetUserPassword(user.Id).then(function () {
+                        loading.hide();
+                        Dashboard.alert({
+                            message: globalize.translate('PasswordResetComplete'),
+                            title: globalize.translate('ResetPassword')
+                        });
+                        loadUser().catch(err => {
+                            console.error('[UserPasswordForm] failed to load user', err);
+                        });
+                    }).catch(err => {
+                        console.error('[UserPasswordForm] failed to reset user password', err);
                     });
-                    loadUser().catch(err => {
-                        console.error('[UserPasswordForm] failed to load user', err);
-                    });
-                }).catch(err => {
-                    console.error('[UserPasswordForm] failed to reset user password', err);
-                });
+                }
             }).catch(() => {
                 // confirm dialog was closed
             });
@@ -148,7 +138,12 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
 
         (page.querySelector('.updatePasswordForm') as HTMLFormElement).addEventListener('submit', onSubmit);
         (page.querySelector('#btnResetPassword') as HTMLButtonElement).addEventListener('click', resetPassword);
-    }, [loadUser, userId]);
+
+        return () => {
+            (page.querySelector('.updatePasswordForm') as HTMLFormElement).removeEventListener('submit', onSubmit);
+            (page.querySelector('#btnResetPassword') as HTMLButtonElement).removeEventListener('click', resetPassword);
+        };
+    }, [loadUser, user]);
 
     return (
         <div ref={element}>

src/components/directorybrowser/directorybrowser.js

@@ -11,15 +11,6 @@ import '../formdialog.scss';
 import '../../elements/emby-button/emby-button';
 import alert from '../alert';
 
-function getSystemInfo() {
-    return systemInfo ? Promise.resolve(systemInfo) : ApiClient.getPublicSystemInfo().then(
-        info => {
-            systemInfo = info;
-            return info;
-        }
-    );
-}
-
 function onDialogClosed() {
     loading.hide();
 }
@@ -83,25 +74,14 @@ function getItem(cssClass, type, path, name) {
     return html;
 }
 
-function getEditorHtml(options, systemInfo) {
+function getEditorHtml(options) {
     let html = '';
     html += '<div class="formDialogContent scrollY">';
     html += '<div class="dialogContentInner dialog-content-centered" style="padding-top:2em;">';
-    if (!options.pathReadOnly) {
-        const instruction = options.instruction ? `${escapeHtml(options.instruction)}<br/><br/>` : '';
+    if (!options.pathReadOnly && options.instruction) {
+        const instruction = `${escapeHtml(options.instruction)}<br/><br/>`;
         html += '<div class="infoBanner" style="margin-bottom:1.5em;">';
         html += instruction;
-        if (systemInfo.OperatingSystem.toLowerCase() === 'bsd') {
-            html += '<br/>';
-            html += '<br/>';
-            html += globalize.translate('MessageDirectoryPickerBSDInstruction');
-            html += '<br/>';
-        } else if (systemInfo.OperatingSystem.toLowerCase() === 'linux') {
-            html += '<br/>';
-            html += '<br/>';
-            html += globalize.translate('MessageDirectoryPickerLinuxInstruction');
-            html += '<br/>';
-        }
         html += '</div>';
     }
     html += '<form style="margin:auto;">';
@@ -123,14 +103,6 @@ function getEditorHtml(options, systemInfo) {
     if (!readOnlyAttribute) {
         html += '<div class="results paperList" style="max-height: 200px; overflow-y: auto;"></div>';
     }
-    if (options.enableNetworkSharePath) {
-        html += '<div class="inputContainer" style="margin-top:2em;">';
-        html += `<input is="emby-input" id="txtNetworkPath" type="text" label="${globalize.translate('LabelOptionalNetworkPath')}"/>`;
-        html += '<div class="fieldDescription">';
-        html += globalize.translate('LabelOptionalNetworkPathHelp', '<b>\\\\server</b>', '<b>\\\\192.168.1.101</b>');
-        html += '</div>';
-        html += '</div>';
-    }
     html += '<div class="formDialogFooter">';
     html += `<button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">${globalize.translate('ButtonOk')}</button>`;
     html += '</div>';
@@ -209,12 +181,10 @@ function initEditor(content, options, fileOptions) {
 
     content.querySelector('form').addEventListener('submit', function(e) {
         if (options.callback) {
-            let networkSharePath = this.querySelector('#txtNetworkPath');
-            networkSharePath = networkSharePath ? networkSharePath.value : null;
             const path = this.querySelector('#txtDirectoryPickerPath').value;
-            validatePath(path, options.validateWriteable, ApiClient).then(
-                options.callback(path, networkSharePath)
-            ).catch(() => { /* no-op */ });
+            validatePath(path, options.validateWriteable, ApiClient)
+                .then(options.callback(path))
+                .catch(() => { /* no-op */ });
         }
         e.preventDefault();
         e.stopPropagation();
@@ -236,7 +206,6 @@ function getDefaultPath(options) {
     }
 }
 
-let systemInfo;
 class DirectoryBrowser {
     currentDialog;
 
@@ -251,10 +220,8 @@ class DirectoryBrowser {
         if (options.includeFiles != null) {
             fileOptions.includeFiles = options.includeFiles;
         }
-        Promise.all([getSystemInfo(), getDefaultPath(options)]).then(
-            responses => {
-                const fetchedSystemInfo = responses[0];
-                const fetchedInitialPath = responses[1];
+        getDefaultPath(options).then(
+            fetchedInitialPath => {
                 const dlg = dialogHelper.createDialog({
                     size: 'small',
                     removeOnClose: true,
@@ -272,7 +239,7 @@ class DirectoryBrowser {
                 html += escapeHtml(options.header || '') || globalize.translate('HeaderSelectPath');
                 html += '</h3>';
                 html += '</div>';
-                html += getEditorHtml(options, fetchedSystemInfo);
+                html += getEditorHtml(options);
                 dlg.innerHTML = html;
                 initEditor(dlg, options, fileOptions);
                 dlg.addEventListener('close', onDialogClosed);
@@ -282,10 +249,6 @@ class DirectoryBrowser {
                 });
                 this.currentDialog = dlg;
                 dlg.querySelector('#txtDirectoryPickerPath').value = fetchedInitialPath;
-                const txtNetworkPath = dlg.querySelector('#txtNetworkPath');
-                if (txtNetworkPath) {
-                    txtNetworkPath.value = options.networkSharePath || '';
-                }
                 if (!options.pathReadOnly) {
                     refreshDirectoryBrowser(dlg, fetchedInitialPath, fileOptions, true);
                 }

src/components/displaySettings/displaySettings.js

@@ -89,6 +89,7 @@ function loadForm(context, user, userSettings) {
     }
 
     context.querySelector('.selectDashboardThemeContainer').classList.toggle('hide', !user.Policy.IsAdministrator);
+    context.querySelector('.txtSlideshowIntervalContainer').classList.remove('hide');
 
     if (appHost.supports(AppFeature.Screensaver)) {
         context.querySelector('.selectScreensaverContainer').classList.remove('hide');
@@ -112,6 +113,7 @@ function loadForm(context, user, userSettings) {
     loadScreensavers(context, userSettings);
 
     context.querySelector('#txtBackdropScreensaverInterval').value = userSettings.backdropScreensaverInterval();
+    context.querySelector('#txtSlideshowInterval').value = userSettings.slideshowInterval();
     context.querySelector('#txtScreensaverTime').value = userSettings.screensaverTime();
 
     context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
@@ -157,6 +159,7 @@ function saveUser(context, user, userSettingsInstance, apiClient) {
     userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value);
     userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
     userSettingsInstance.backdropScreensaverInterval(context.querySelector('#txtBackdropScreensaverInterval').value);
+    userSettingsInstance.slideshowInterval(context.querySelector('#txtSlideshowInterval').value);
     userSettingsInstance.screensaverTime(context.querySelector('#txtScreensaverTime').value);
 
     userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);

src/components/displaySettings/displaySettings.template.html

@@ -172,7 +172,6 @@
             <option value="desktop">${Desktop}</option>
             <option value="mobile">${Mobile}</option>
             <option value="tv">${TV}</option>
-            <option value="experimental">${Experimental}</option>
         </select>
         <div class="fieldDescription">${DisplayModeHelp}</div>
         <div class="fieldDescription">${LabelPleaseRestart}</div>
@@ -214,6 +213,11 @@
         <div class="fieldDescription">${LabelBackdropScreensaverIntervalHelp}</div>
     </div>
 
+    <div class="inputContainer hide txtSlideshowIntervalContainer inputContainer-withDescription">
+        <input is="emby-input" type="number" id="txtSlideshowInterval" pattern="[0-9]*" required="required" min="1" max="3600" step="1" label="${LabelSlideshowInterval}" />
+        <div class="fieldDescription">${LabelSlideshowIntervalHelp}</div>
+    </div>
+
     <div class="checkboxContainer checkboxContainer-withDescription">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkFadein" />

src/components/guide/guide.js

@@ -1,8 +1,11 @@
 import escapeHtml from 'escape-html';
+
+import { ItemAction } from 'constants/itemAction';
+import { ServerConnections } from 'lib/jellyfin-apiclient';
+
 import inputManager from '../../scripts/inputManager';
 import browser from '../../scripts/browser';
 import globalize from '../../lib/globalize';
-import { ServerConnections } from 'lib/jellyfin-apiclient';
 import Events from '../../utils/events.ts';
 import scrollHelper from '../../scripts/scrollHelper';
 import serverNotifications from '../../scripts/serverNotifications';
@@ -15,6 +18,7 @@ import imageLoader from '../images/imageLoader';
 import layoutManager from '../layoutManager';
 import itemShortcuts from '../shortcuts';
 import dom from '../../utils/dom';
+
 import './guide.scss';
 import './programs.scss';
 import 'material-design-icons-iconfont';
@@ -26,6 +30,7 @@ import '../../elements/emby-tabs/emby-tabs';
 import '../../elements/emby-scroller/emby-scroller';
 import '../../styles/flexstyles.scss';
 import 'webcomponents.js/webcomponents-lite';
+
 import template from './tvguide.template.html';
 
 function showViewSettings(instance) {
@@ -441,7 +446,7 @@ function Guide(options) {
 
         html += '<div class="' + outerCssClass + '" data-channelid="' + channel.Id + '">';
 
-        const clickAction = layoutManager.tv ? 'link' : 'programdialog';
+        const clickAction = layoutManager.tv ? ItemAction.Link : ItemAction.ProgramDialog;
 
         const categories = self.categoryOptions.categories || [];
         const displayMovieContent = !categories.length || categories.indexOf('movies') !== -1;
@@ -607,7 +612,7 @@ function Guide(options) {
                 title.push(channel.Name);
             }
 
-            html += '<button title="' + escapeHtml(title.join(' ')) + '" type="button" class="' + cssClass + '"' + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">';
+            html += `<button title="${escapeHtml(title.join(' '))}" type="button" class="${cssClass}" data-action="${ItemAction.Link}" data-isfolder="${channel.IsFolder}" data-id="${channel.Id}" data-serverid="${channel.ServerId}" data-type="${channel.Type}">`;
 
             if (hasChannelImage) {
                 const url = apiClient.getScaledImageUrl(channel.Id, {

src/components/itemContextMenu.js

@@ -1,4 +1,8 @@
 import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
+
+import { AppFeature } from 'constants/appFeature';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
 
 import browser from '../scripts/browser';
 import { copy } from '../scripts/clipboard';
@@ -12,7 +16,6 @@ import itemHelper, { canEditPlaylist } from './itemHelper';
 import { playbackManager } from './playback/playbackmanager';
 import toast from './toast/toast';
 import * as userSettings from '../scripts/settings/userSettings';
-import { AppFeature } from 'constants/appFeature';
 
 /** Item types that support downloading all children. */
 const DOWNLOAD_ALL_TYPES = [
@@ -387,6 +390,7 @@ function executeCommand(item, id, options) {
     const itemId = item.Id;
     const serverId = item.ServerId;
     const apiClient = ServerConnections.getApiClient(serverId);
+    const api = toApi(apiClient);
 
     return new Promise(function (resolve, reject) {
         // eslint-disable-next-line sonarjs/max-switch-cases
@@ -411,9 +415,9 @@ function executeCommand(item, id, options) {
                 break;
             case 'download':
                 import('../scripts/fileDownloader').then((fileDownloader) => {
-                    const downloadHref = apiClient.getItemDownloadUrl(itemId);
+                    const url = getLibraryApi(api).getDownloadUrl({ itemId });
                     fileDownloader.download([{
-                        url: downloadHref,
+                        url,
                         item,
                         itemId,
                         serverId,
@@ -429,9 +433,9 @@ function executeCommand(item, id, options) {
                         const downloads = items
                             .filter(i => i.CanDownload)
                             .map(i => {
-                                const downloadHref = apiClient.getItemDownloadUrl(i.Id);
+                                const url = getLibraryApi(api).getDownloadUrl({ itemId: i.Id });
                                 return {
-                                    url: downloadHref,
+                                    url,
                                     item: i,
                                     itemId: i.Id,
                                     serverId,
@@ -478,7 +482,7 @@ function executeCommand(item, id, options) {
                 break;
             }
             case 'copy-stream': {
-                const downloadHref = apiClient.getItemDownloadUrl(itemId);
+                const downloadHref = getLibraryApi(api).getDownloadUrl({ itemId });
                 copy(downloadHref).then(() => {
                     toast(globalize.translate('CopyStreamURLSuccess'));
                 }).catch(() => {

src/components/itemMediaInfo/itemMediaInfo.js

@@ -133,8 +133,8 @@ function getMediaSourceHtml(user, item, version) {
             }
             attributes.push(createAttribute(globalize.translate('MediaInfoInterlaced'), (stream.IsInterlaced ? 'Yes' : 'No')));
         }
-        if ((stream.AverageFrameRate || stream.RealFrameRate) && stream.Type === 'Video') {
-            attributes.push(createAttribute(globalize.translate('MediaInfoFramerate'), (stream.AverageFrameRate || stream.RealFrameRate)));
+        if (stream.ReferenceFrameRate && stream.Type === 'Video') {
+            attributes.push(createAttribute(globalize.translate('MediaInfoFramerate'), stream.ReferenceFrameRate));
         }
         if (stream.ChannelLayout) {
             attributes.push(createAttribute(globalize.translate('MediaInfoLayout'), stream.ChannelLayout));

src/components/itemsrefresher.js

@@ -1,228 +0,0 @@
-import { playbackManager } from './playback/playbackmanager';
-import serverNotifications from '../scripts/serverNotifications';
-import Events from '../utils/events.ts';
-
-function onUserDataChanged() {
-    const instance = this;
-    const eventsToMonitor = getEventsToMonitor(instance);
-
-    // TODO: Check user data change reason?
-    if (eventsToMonitor.indexOf('markfavorite') !== -1
-        || eventsToMonitor.indexOf('markplayed') !== -1
-    ) {
-        instance.notifyRefreshNeeded();
-    }
-}
-
-function getEventsToMonitor(instance) {
-    const options = instance.options;
-    const monitor = options ? options.monitorEvents : null;
-    if (monitor) {
-        return monitor.split(',');
-    }
-
-    return [];
-}
-
-function notifyTimerRefresh() {
-    const instance = this;
-
-    if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
-        instance.notifyRefreshNeeded();
-    }
-}
-
-function notifySeriesTimerRefresh() {
-    const instance = this;
-    if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
-        instance.notifyRefreshNeeded();
-    }
-}
-
-function onLibraryChanged(e, apiClient, data) {
-    const instance = this;
-    const eventsToMonitor = getEventsToMonitor(instance);
-    if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
-        // yes this is an assumption
-        return;
-    }
-
-    const itemsAdded = data.ItemsAdded || [];
-    const itemsRemoved = data.ItemsRemoved || [];
-    if (!itemsAdded.length && !itemsRemoved.length) {
-        return;
-    }
-
-    const options = instance.options || {};
-    const parentId = options.parentId;
-    if (parentId) {
-        const foldersAddedTo = data.FoldersAddedTo || [];
-        const foldersRemovedFrom = data.FoldersRemovedFrom || [];
-        const collectionFolders = data.CollectionFolders || [];
-
-        if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) {
-            return;
-        }
-    }
-
-    instance.notifyRefreshNeeded();
-}
-
-function onPlaybackStopped(e, stopInfo) {
-    const instance = this;
-
-    const state = stopInfo.state;
-
-    const eventsToMonitor = getEventsToMonitor(instance);
-    if (state.NowPlayingItem?.MediaType === 'Video') {
-        if (eventsToMonitor.indexOf('videoplayback') !== -1) {
-            instance.notifyRefreshNeeded(true);
-            return;
-        }
-    } else if (state.NowPlayingItem?.MediaType === 'Audio' && eventsToMonitor.indexOf('audioplayback') !== -1) {
-        instance.notifyRefreshNeeded(true);
-        return;
-    }
-}
-
-function addNotificationEvent(instance, name, handler, owner) {
-    const localHandler = handler.bind(instance);
-    owner = owner || serverNotifications;
-    Events.on(owner, name, localHandler);
-    instance['event_' + name] = localHandler;
-}
-
-function removeNotificationEvent(instance, name, owner) {
-    const handler = instance['event_' + name];
-    if (handler) {
-        owner = owner || serverNotifications;
-        Events.off(owner, name, handler);
-        instance['event_' + name] = null;
-    }
-}
-
-class ItemsRefresher {
-    constructor(options) {
-        this.options = options || {};
-
-        addNotificationEvent(this, 'UserDataChanged', onUserDataChanged);
-        addNotificationEvent(this, 'TimerCreated', notifyTimerRefresh);
-        addNotificationEvent(this, 'SeriesTimerCreated', notifySeriesTimerRefresh);
-        addNotificationEvent(this, 'TimerCancelled', notifyTimerRefresh);
-        addNotificationEvent(this, 'SeriesTimerCancelled', notifySeriesTimerRefresh);
-        addNotificationEvent(this, 'LibraryChanged', onLibraryChanged);
-        addNotificationEvent(this, 'playbackstop', onPlaybackStopped, playbackManager);
-    }
-
-    pause() {
-        clearRefreshInterval(this, true);
-
-        this.paused = true;
-    }
-
-    resume(options) {
-        this.paused = false;
-
-        const refreshIntervalEndTime = this.refreshIntervalEndTime;
-        if (refreshIntervalEndTime) {
-            const remainingMs = refreshIntervalEndTime - new Date().getTime();
-            if (remainingMs > 0 && !this.needsRefresh) {
-                resetRefreshInterval(this, remainingMs);
-            } else {
-                this.needsRefresh = true;
-                this.refreshIntervalEndTime = null;
-            }
-        }
-
-        if (this.needsRefresh || (options?.refresh)) {
-            return this.refreshItems();
-        }
-
-        return Promise.resolve();
-    }
-
-    refreshItems() {
-        if (!this.fetchData) {
-            return Promise.resolve();
-        }
-
-        if (this.paused) {
-            this.needsRefresh = true;
-            return Promise.resolve();
-        }
-
-        this.needsRefresh = false;
-
-        return this.fetchData().then(onDataFetched.bind(this));
-    }
-
-    notifyRefreshNeeded(isInForeground) {
-        if (this.paused) {
-            this.needsRefresh = true;
-            return;
-        }
-
-        const timeout = this.refreshTimeout;
-        if (timeout) {
-            clearTimeout(timeout);
-        }
-
-        if (isInForeground === true) {
-            this.refreshItems();
-        } else {
-            this.refreshTimeout = setTimeout(this.refreshItems.bind(this), 10000);
-        }
-    }
-
-    destroy() {
-        clearRefreshInterval(this);
-
-        removeNotificationEvent(this, 'UserDataChanged');
-        removeNotificationEvent(this, 'TimerCreated');
-        removeNotificationEvent(this, 'SeriesTimerCreated');
-        removeNotificationEvent(this, 'TimerCancelled');
-        removeNotificationEvent(this, 'SeriesTimerCancelled');
-        removeNotificationEvent(this, 'LibraryChanged');
-        removeNotificationEvent(this, 'playbackstop', playbackManager);
-
-        this.fetchData = null;
-        this.options = null;
-    }
-}
-
-function clearRefreshInterval(instance, isPausing) {
-    if (instance.refreshInterval) {
-        clearInterval(instance.refreshInterval);
-        instance.refreshInterval = null;
-
-        if (!isPausing) {
-            instance.refreshIntervalEndTime = null;
-        }
-    }
-}
-
-function resetRefreshInterval(instance, intervalMs) {
-    clearRefreshInterval(instance);
-
-    if (!intervalMs) {
-        const options = instance.options;
-        if (options) {
-            intervalMs = options.refreshIntervalMs;
-        }
-    }
-
-    if (intervalMs) {
-        instance.refreshInterval = setInterval(instance.notifyRefreshNeeded.bind(instance), intervalMs);
-        instance.refreshIntervalEndTime = new Date().getTime() + intervalMs;
-    }
-}
-
-function onDataFetched(result) {
-    resetRefreshInterval(this);
-
-    if (this.afterRefresh) {
-        this.afterRefresh(result);
-    }
-}
-
-export default ItemsRefresher;

src/components/layoutManager.js

@@ -1,3 +1,4 @@
+import { LayoutMode } from 'constants/layoutMode';
 
 import { appHost } from './apphost';
 import browser from '../scripts/browser';
@@ -14,51 +15,47 @@ function setLayout(instance, layout, selectedLayout) {
     }
 }
 
+export const SETTING_KEY = 'layout';
+
 class LayoutManager {
     tv = false;
     mobile = false;
     desktop = false;
     experimental = false;
 
-    setLayout(layout, save) {
-        if (!layout || layout === 'auto') {
+    setLayout(layout = '', save = true) {
+        const layoutValue = (!layout || layout === LayoutMode.Auto) ? '' : layout;
+
+        if (!layoutValue) {
             this.autoLayout();
-
-            if (save !== false) {
-                appSettings.set('layout', '');
-            }
         } else {
-            setLayout(this, 'mobile', layout);
-            setLayout(this, 'tv', layout);
-            setLayout(this, 'desktop', layout);
-
-            this.experimental = layout === 'experimental';
-            if (this.experimental) {
-                const legacyLayoutMode = browser.mobile ? 'mobile' : this.defaultLayout || 'desktop';
-                setLayout(this, legacyLayoutMode, legacyLayoutMode);
-            }
-
-            if (save !== false) {
-                appSettings.set('layout', layout);
-            }
+            setLayout(this, LayoutMode.Mobile, layoutValue);
+            setLayout(this, LayoutMode.Tv, layoutValue);
+            setLayout(this, LayoutMode.Desktop, layoutValue);
         }
 
+        console.debug('[LayoutManager] using layout mode', layoutValue);
+        this.experimental = layoutValue === LayoutMode.Experimental;
+        if (this.experimental) {
+            const legacyLayoutMode = browser.mobile ? LayoutMode.Mobile : LayoutMode.Desktop;
+            console.debug('[LayoutManager] using legacy layout mode', legacyLayoutMode);
+            setLayout(this, legacyLayoutMode, legacyLayoutMode);
+        }
+
+        if (save) appSettings.set(SETTING_KEY, layoutValue);
+
         Events.trigger(this, 'modechange');
     }
 
     getSavedLayout() {
-        return appSettings.get('layout');
+        return appSettings.get(SETTING_KEY);
     }
 
     autoLayout() {
-        // Take a guess at initial layout. The consuming app can override
-        if (browser.mobile) {
-            this.setLayout('mobile', false);
-        } else if (browser.tv || browser.xboxOne || browser.ps4) {
-            this.setLayout('tv', false);
-        } else {
-            this.setLayout(this.defaultLayout || 'tv', false);
-        }
+        // Take a guess at initial layout. The consuming app can override.
+        // NOTE: The fallback to TV mode seems like an outdated choice. TVs should be detected properly or override the
+        // default layout.
+        this.setLayout(browser.tv ? LayoutMode.Tv : this.defaultLayout || LayoutMode.Tv, false);
     }
 
     init() {

src/components/listview/List/ListContent.tsx

@@ -4,6 +4,8 @@ import DragHandleIcon from '@mui/icons-material/DragHandle';
 import Box from '@mui/material/Box';
 
 import useIndicator from 'components/indicators/useIndicator';
+import { ItemAction } from 'constants/itemAction';
+
 import PrimaryMediaInfo from '../../mediainfo/PrimaryMediaInfo';
 import ListContentWrapper from './ListContentWrapper';
 import ListItemBody from './ListItemBody';
@@ -20,7 +22,7 @@ interface ListContentProps {
     enableOverview?: boolean;
     enableSideMediaInfo?: boolean;
     clickEntireItem?: boolean;
-    action?: string;
+    action?: ItemAction;
     isLargeStyle: boolean;
     downloadWidth?: number;
 }

src/components/listview/List/ListImageContainer.tsx

@@ -1,7 +1,14 @@
 import React, { type FC } from 'react';
 import classNames from 'classnames';
 import Box from '@mui/material/Box';
+
+import Media from 'components/common/Media';
+import PlayArrowIconButton from 'components/common/PlayArrowIconButton';
+import { ItemAction } from 'constants/itemAction';
 import { useApi } from 'hooks/useApi';
+import type { ItemDto } from 'types/base/models/item-dto';
+import type { ListOptions } from 'types/listOptions';
+
 import useIndicator from '../../indicators/useIndicator';
 import layoutManager from '../../layoutManager';
 import { getDefaultBackgroundClass } from '../../cardbuilder/cardBuilderUtils';
@@ -11,15 +18,10 @@ import {
     getImageUrl
 } from './listHelper';
 
-import Media from 'components/common/Media';
-import PlayArrowIconButton from 'components/common/PlayArrowIconButton';
-import type { ItemDto } from 'types/base/models/item-dto';
-import type { ListOptions } from 'types/listOptions';
-
 interface ListImageContainerProps {
     item: ItemDto;
     listOptions: ListOptions;
-    action?: string | null;
+    action?: ItemAction | null;
     isLargeStyle: boolean;
     clickEntireItem?: boolean;
     downloadWidth?: number;
@@ -55,7 +57,7 @@ const ListImageContainer: FC<ListImageContainerProps> = ({
 
     const playOnImageClick = listOptions.imagePlayButton && !layoutManager.tv;
 
-    const imageAction = playOnImageClick ? 'link' : action;
+    const imageAction = playOnImageClick ? ItemAction.Link : action;
 
     const btnCssClass =
         'paper-icon-button-light listItemImageButton itemAction';
@@ -85,7 +87,7 @@ const ListImageContainer: FC<ListImageContainerProps> = ({
                 <PlayArrowIconButton
                     className={btnCssClass}
                     action={
-                        canResume(playbackPositionTicks) ? 'resume' : 'play'
+                        canResume(playbackPositionTicks) ? ItemAction.Resume : ItemAction.Play
                     }
                     title={
                         canResume(playbackPositionTicks) ?

src/components/listview/List/ListItemBody.tsx

@@ -3,15 +3,16 @@ import classNames from 'classnames';
 import Box from '@mui/material/Box';
 
 import TextLines from 'components/common/textLines/TextLines';
-import PrimaryMediaInfo from '../../mediainfo/PrimaryMediaInfo';
-
+import { ItemAction } from 'constants/itemAction';
 import type { ItemDto } from 'types/base/models/item-dto';
 import type { ListOptions } from 'types/listOptions';
 
+import PrimaryMediaInfo from '../../mediainfo/PrimaryMediaInfo';
+
 interface ListItemBodyProps {
     item: ItemDto;
     listOptions: ListOptions;
-    action?: string | null;
+    action?: ItemAction | null;
     isLargeStyle?: boolean;
     clickEntireItem?: boolean;
     enableContentWrapper?: boolean;

src/components/listview/List/ListWrapper.tsx

@@ -2,13 +2,16 @@ import classNames from 'classnames';
 import React, { type FC, type PropsWithChildren } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import layoutManager from '../../layoutManager';
+
+import { ItemAction } from 'constants/itemAction';
 import type { DataAttributes } from 'types/dataAttributes';
 
+import layoutManager from '../../layoutManager';
+
 interface ListWrapperProps {
     index: number | undefined;
     title?: string | null;
-    action?: string | null;
+    action?: ItemAction | null;
     dataAttributes?: DataAttributes;
     className?: string;
 }

src/components/listview/List/useList.ts

@@ -1,6 +1,8 @@
 import classNames from 'classnames';
-import { getDataAttributes } from 'utils/items';
+
 import layoutManager from 'components/layoutManager';
+import { ItemAction } from 'constants/itemAction';
+import { getDataAttributes } from 'utils/items';
 
 import type { ItemDto } from 'types/base/models/item-dto';
 import type { ListOptions } from 'types/listOptions';
@@ -11,7 +13,7 @@ interface UseListProps {
 }
 
 function useList({ item, listOptions }: UseListProps) {
-    const action = listOptions.action ?? 'link';
+    const action = listOptions.action ?? ItemAction.Link;
     const isLargeStyle = listOptions.imageSize === 'large';
     const enableOverview = listOptions.enableOverview;
     const clickEntireItem = !!layoutManager.tv;

src/components/listview/listview.js

@@ -4,7 +4,13 @@
  * @module components/listview/listview
  */
 
+import DOMPurify from 'dompurify';
 import escapeHtml from 'escape-html';
+import markdownIt from 'markdown-it';
+
+import { ItemAction } from 'constants/itemAction';
+
+import { getDefaultBackgroundClass } from '../cardbuilder/cardBuilderUtils';
 import itemHelper from '../itemHelper';
 import mediaInfo from '../mediainfo/mediainfo';
 import indicators from '../indicators/indicators';
@@ -13,12 +19,10 @@ import globalize from '../../lib/globalize';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import datetime from '../../scripts/datetime';
 import cardBuilder from '../cardbuilder/cardBuilder';
+
 import './listview.scss';
 import '../../elements/emby-ratingbutton/emby-ratingbutton';
 import '../../elements/emby-playstatebutton/emby-playstatebutton';
-import { getDefaultBackgroundClass } from '../cardbuilder/cardBuilderUtils';
-import markdownIt from 'markdown-it';
-import DOMPurify from 'dompurify';
 
 function getIndex(item, options) {
     if (options.index === 'disc') {
@@ -165,7 +169,7 @@ function getRightButtonsHtml(options) {
     for (let i = 0, length = options.rightButtons.length; i < length; i++) {
         const button = options.rightButtons[i];
 
-        html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="${button.id}" title="${button.title}"><span class="material-icons ${button.icon}" aria-hidden="true"></span></button>`;
+        html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="${ItemAction.Custom}" data-customaction="${button.id}" title="${button.title}"><span class="material-icons ${button.icon}" aria-hidden="true"></span></button>`;
     }
 
     return html;
@@ -175,7 +179,7 @@ export function getListViewHtml(options) {
     const items = options.items;
 
     let groupTitle = '';
-    const action = options.action || 'link';
+    const action = options.action || ItemAction.Link;
 
     const isLargeStyle = options.imageSize === 'large';
     const enableOverview = options.enableOverview;
@@ -277,7 +281,7 @@ export function getListViewHtml(options) {
                 imageClass += ' itemAction';
             }
 
-            const imageAction = playOnImageClick ? 'link' : action;
+            const imageAction = playOnImageClick ? ItemAction.Link : action;
 
             if (imgUrl) {
                 html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" item-icon>';
@@ -298,7 +302,7 @@ export function getListViewHtml(options) {
             }
 
             if (playOnImageClick) {
-                html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow" aria-hidden="true"></span></button>';
+                html += `<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="${ItemAction.Resume}"><span class="material-icons listItemImageButton-icon play_arrow" aria-hidden="true"></span></button>`;
             }
 
             const progressHtml = indicators.getProgressBarHtml(item, {
@@ -449,11 +453,11 @@ export function getListViewHtml(options) {
 
         if (!clickEntireItem) {
             if (options.addToListButton) {
-                html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><span class="material-icons playlist_add" aria-hidden="true"></span></button>';
+                html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="${ItemAction.AddToPlaylist}"><span class="material-icons playlist_add" aria-hidden="true"></span></button>`;
             }
 
             if (options.infoButton) {
-                html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="link"><span class="material-icons info_outline" aria-hidden="true"></span></button>';
+                html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="${ItemAction.Link}"><span class="material-icons info_outline" aria-hidden="true"></span></button>`;
             }
 
             if (options.rightButtons) {
@@ -474,7 +478,7 @@ export function getListViewHtml(options) {
             }
 
             if (options.moreButton !== false) {
-                html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="menu"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
+                html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="${ItemAction.Menu}"><span class="material-icons more_vert" aria-hidden="true"></span></button>`;
             }
         }
         html += '</div>';

src/components/mediaLibraryCreator/mediaLibraryCreator.js

@@ -122,9 +122,9 @@ function onAddButtonClick() {
     import('../directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
         const picker = new DirectoryBrowser();
         picker.show({
-            callback: function (path, networkSharePath) {
+            callback: function (path) {
                 if (path) {
-                    addMediaLocation(page, path, networkSharePath);
+                    addMediaLocation(page, path);
                 }
 
                 picker.close();
@@ -161,7 +161,7 @@ function renderPaths(page) {
     }
 }
 
-function addMediaLocation(page, path, networkSharePath) {
+function addMediaLocation(page, path) {
     const pathLower = path.toLowerCase();
     const pathFilter = pathInfos.filter(p => {
         return p.Path.toLowerCase() == pathLower;
@@ -172,10 +172,6 @@ function addMediaLocation(page, path, networkSharePath) {
             Path: path
         };
 
-        if (networkSharePath) {
-            pathInfo.NetworkPath = networkSharePath;
-        }
-
         pathInfos.push(pathInfo);
         renderPaths(page);
     }

src/components/mediaLibraryEditor/mediaLibraryEditor.js

@@ -56,10 +56,10 @@ function onEditLibrary() {
     return false;
 }
 
-function addMediaLocation(page, path, networkSharePath) {
+function addMediaLocation(page, path) {
     const virtualFolder = currentOptions.library;
     const refreshAfterChange = currentOptions.refresh;
-    ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(() => {
+    ApiClient.addMediaPath(virtualFolder.Name, path, null, refreshAfterChange).then(() => {
         hasChanges = true;
         refreshLibraryFromServer(page);
     }, () => {
@@ -67,11 +67,10 @@ function addMediaLocation(page, path, networkSharePath) {
     });
 }
 
-function updateMediaLocation(page, path, networkSharePath) {
+function updateMediaLocation(page, path) {
     const virtualFolder = currentOptions.library;
     ApiClient.updateMediaPath(virtualFolder.Name, {
-        Path: path,
-        NetworkPath: networkSharePath
+        Path: path
     }).then(() => {
         hasChanges = true;
         refreshLibraryFromServer(page);
@@ -115,7 +114,7 @@ function onListItemClick(e) {
             return;
         }
 
-        showDirectoryBrowser(dom.parentWithClass(listItem, 'dlg-libraryeditor'), originalPath, pathInfo.NetworkPath);
+        showDirectoryBrowser(dom.parentWithClass(listItem, 'dlg-libraryeditor'), originalPath);
     }
 }
 
@@ -174,19 +173,18 @@ function onAddButtonClick() {
     showDirectoryBrowser(dom.parentWithClass(this, 'dlg-libraryeditor'));
 }
 
-function showDirectoryBrowser(context, originalPath, networkPath) {
+function showDirectoryBrowser(context, originalPath) {
     import('../directorybrowser/directorybrowser').then(({ default: DirectoryBrowser }) => {
         const picker = new DirectoryBrowser();
         picker.show({
             pathReadOnly: originalPath != null,
             path: originalPath,
-            networkSharePath: networkPath,
-            callback: function (path, networkSharePath) {
+            callback: function (path) {
                 if (path) {
                     if (originalPath) {
-                        updateMediaLocation(context, originalPath, networkSharePath);
+                        updateMediaLocation(context, originalPath);
                     } else {
-                        addMediaLocation(context, path, networkSharePath);
+                        addMediaLocation(context, path);
                     }
                 }
 

src/components/playback/playbackmanager.js

@@ -1422,28 +1422,6 @@ export class PlaybackManager {
             });
         };
 
-        self.isCrtShaderEnabled = function (player) {
-            player = player || self._currentPlayer;
-            return !!(getPlayerData(player).enableCrtShader);
-        };
-
-        self.setCrtShader = function (enabled, shadowMask, player) {
-            player = player || self._currentPlayer;
-            const pd = getPlayerData(player);
-            pd.enableCrtShader = !!enabled;
-            if (shadowMask !== undefined && shadowMask !== null) {
-                pd.crtShadowMask = shadowMask;
-            }
-            // When enabling CRT we must force full re-encode — the filter only runs
-            // server-side via program_opencl and requires actual video decoding/encoding.
-            // AllowVideoStreamCopy:false prevents the server from choosing codec:copy
-            // (container remux), which would bypass the filter chain entirely.
-            const streamParams = enabled
-                ? { EnableDirectPlay: false, EnableDirectStream: false, AllowVideoStreamCopy: false }
-                : {};
-            changeStream(player, getCurrentTicks(player), streamParams);
-        };
-
         self.isFullscreen = function (player) {
             player = player || self._currentPlayer;
             if (!player.isLocalPlayer || player.isFullscreen) {
@@ -2878,19 +2856,7 @@ export class PlaybackManager {
 
                     playMethod = mediaSource.SupportsDirectPlay ? 'DirectPlay' : 'DirectStream';
                 } else if (mediaSource.SupportsTranscoding) {
-                    let transcodingUrl = mediaSource.TranscodingUrl;
-
-                    // Append CRT shader options as plain query params so ParseStreamOptions
-                    // on the server picks them up (key must start lowercase, no streamOptions[] wrapper).
-                    if (getPlayerData(player).enableCrtShader) {
-                        transcodingUrl += '&crtShader=true';
-                        const maskVal = getPlayerData(player).crtShadowMask;
-                        if (maskVal !== undefined && maskVal !== null) {
-                            transcodingUrl += '&crtShadowMask=' + maskVal;
-                        }
-                    }
-
-                    mediaUrl = apiClient.getUrl(transcodingUrl);
+                    mediaUrl = apiClient.getUrl(mediaSource.TranscodingUrl);
 
                     if (mediaSource.TranscodingSubProtocol === 'hls') {
                         contentType = 'application/x-mpegURL';
@@ -3517,7 +3483,7 @@ export class PlaybackManager {
             const nextItemPlayOptions = nextItem ? (nextItem.item.playOptions || getDefaultPlayOptions()) : getDefaultPlayOptions();
             const newPlayer = nextItem ? getPlayer(nextItem.item, nextItemPlayOptions) : null;
 
-            if (newPlayer !== player) {
+            if (!newPlayer) {
                 data.streamInfo = null;
                 destroyPlayer(player);
                 removeCurrentPlayer(player);
@@ -3525,12 +3491,21 @@ export class PlaybackManager {
 
             if (errorOccurred) {
                 showPlaybackInfoErrorMessage(self, 'PlaybackError' + displayErrorCode);
-            } else if (nextItem) {
+            } else if (newPlayer) {
                 const apiClient = ServerConnections.getApiClient(nextItem.item.ServerId);
 
                 apiClient.getCurrentUser().then(function (user) {
                     if (user.Configuration.EnableNextEpisodeAutoPlay || nextMediaType !== MediaType.Video) {
                         self.nextTrack();
+
+                        if (newPlayer !== player) {
+                            Events.trigger(self, 'playbackstop', [{
+                                player,
+                                state,
+                                nextItem,
+                                nextMediaType
+                            }]);
+                        }
                     }
                 });
             }

src/components/playback/playersettingsmenu.js

@@ -4,34 +4,6 @@ import globalize from 'lib/globalize';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import qualityoptions from '../qualityOptions';
 
-function showCrtMenu(player, btn) {
-    const isEnabled = playbackManager.isCrtShaderEnabled(player);
-
-    const menuItems = [
-        {
-            name: globalize.translate('On'),
-            id: 'crt_on',
-            selected: isEnabled
-        },
-        {
-            name: globalize.translate('Off'),
-            id: 'crt_off',
-            selected: !isEnabled
-        }
-    ];
-
-    return actionsheet.show({
-        items: menuItems,
-        positionTo: btn
-    }).then(function (id) {
-        if (id === 'crt_on' && !isEnabled) {
-            playbackManager.setCrtShader(true, null, player);
-        } else if (id === 'crt_off' && isEnabled) {
-            playbackManager.setCrtShader(false, null, player);
-        }
-    });
-}
-
 function showQualityMenu(player, btn) {
     const videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
         return stream.Type === 'Video';
@@ -242,16 +214,6 @@ function showWithUser(options, player, user) {
         });
     }
 
-    if (options.quality && user?.Policy?.EnableVideoPlaybackTranscoding) {
-        menuItems.push({
-            name: 'CRT Shader',
-            id: 'crtshader',
-            asideText: playbackManager.isCrtShaderEnabled(player)
-                ? globalize.translate('On')
-                : globalize.translate('Off')
-        });
-    }
-
     const repeatMode = playbackManager.getRepeatMode(player);
 
     if (supportedCommands.indexOf('SetRepeatMode') !== -1 && playbackManager.currentMediaSource(player).RunTimeTicks) {
@@ -310,8 +272,6 @@ function handleSelectedOption(id, options, player) {
             return showPlaybackRateMenu(player, options.positionTo);
         case 'repeatmode':
             return showRepeatModeMenu(player, options.positionTo);
-        case 'crtshader':
-            return showCrtMenu(player, options.positionTo);
         case 'stats':
             if (options.onOption) {
                 options.onOption('stats');

src/components/playerstats/playerstats.js

@@ -204,7 +204,7 @@ function getDisplayTranscodeFps(session, player) {
     const mediaSource = playbackManager.currentMediaSource(player) || {};
     const videoStream = (mediaSource.MediaStreams || []).find((s) => s.Type === 'Video') || {};
 
-    const originalFramerate = videoStream.ReferenceFrameRate || videoStream.RealFrameRate;
+    const originalFramerate = videoStream.ReferenceFrameRate;
     const transcodeFramerate = session.TranscodingInfo.Framerate;
 
     if (!originalFramerate) {

src/components/remotecontrol/remotecontrol.js

@@ -3,6 +3,7 @@ import escapeHtml from 'escape-html';
 import { getImageUrl } from 'apps/stable/features/playback/utils/image';
 import { getItemTextLines } from 'apps/stable/features/playback/utils/itemText';
 import { AppFeature } from 'constants/appFeature';
+import { ItemAction } from 'constants/itemAction';
 
 import datetime from '../../scripts/datetime';
 import { clearBackdrop, setBackdrops } from '../backdrop/backdrop';
@@ -16,6 +17,9 @@ import { ServerConnections } from 'lib/jellyfin-apiclient';
 import layoutManager from '../layoutManager';
 import * as userSettings from '../../scripts/settings/userSettings';
 import itemContextMenu from '../itemContextMenu';
+import toast from '../toast/toast';
+import { appRouter } from '../router/appRouter';
+import { getDefaultBackgroundClass } from '../cardbuilder/cardBuilderUtils';
 
 import '../cardbuilder/card.scss';
 import '../../elements/emby-button/emby-button';
@@ -24,9 +28,6 @@ import '../../elements/emby-itemscontainer/emby-itemscontainer';
 import './remotecontrol.scss';
 import '../../elements/emby-ratingbutton/emby-ratingbutton';
 import '../../elements/emby-slider/emby-slider';
-import toast from '../toast/toast';
-import { appRouter } from '../router/appRouter';
-import { getDefaultBackgroundClass } from '../cardbuilder/cardBuilderUtils';
 
 let showMuteButton = true;
 let showVolumeSlider = true;
@@ -208,7 +209,7 @@ function setImageUrl(context, state, url) {
         context.querySelector('.nowPlayingPageImage').classList.toggle('nowPlayingPageImageAudio', item.Type === 'Audio');
         context.querySelector('.nowPlayingPageImage').classList.toggle('nowPlayingPageImagePoster', item.Type !== 'Audio');
     } else {
-        imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardImageContainer coveredImage ' + getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album" aria-hidden="true"></span></button></div>';
+        imgContainer.innerHTML = `<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="${ItemAction.Link}" class="cardImageContainer coveredImage ${getDefaultBackgroundClass(item.Name)} cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album" aria-hidden="true"></span></button></div>`;
     }
 }
 

src/components/router/appRouter.js

@@ -6,6 +6,7 @@ import itemHelper from '../itemHelper';
 import loading from '../loading/loading';
 import alert from '../alert';
 
+import { LayoutMode } from 'constants/layoutMode';
 import { getItemQuery } from 'hooks/useItem';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import { toApi } from 'utils/jellyfin-apiclient/compat';
@@ -16,7 +17,7 @@ import { history } from 'RootAppRouter';
 const START_PAGE_PATHS = ['/home', '/login', '/selectserver'];
 
 /** Pages that do not require a user to be logged in to view. */
-export const PUBLIC_PATHS = [
+const PUBLIC_PATHS = [
     '/addserver',
     '/selectserver',
     '/login',
@@ -121,7 +122,9 @@ class AppRouter {
         return this.baseRoute;
     }
 
-    canGoBack(path = history.location.pathname) {
+    canGoBack() {
+        const path = history.location.pathname;
+
         if (
             !document.querySelector('.dialogContainer')
             && START_PAGE_PATHS.includes(path)
@@ -259,15 +262,15 @@ class AppRouter {
         }
 
         if (item === 'recordedtv') {
-            return '#/livetv?tab=3&serverId=' + serverId;
+            return '#/livetv?tab=3&serverId=' + options.serverId;
         }
 
         if (item === 'nextup') {
-            return '#/list?type=nextup&serverId=' + serverId;
+            return '#/list?type=nextup&serverId=' + options.serverId;
         }
 
         if (item === 'list') {
-            let urlForList = '#/list?serverId=' + serverId + '&type=' + options.itemTypes;
+            let urlForList = '#/list?serverId=' + options.serverId + '&type=' + options.itemTypes;
 
             if (options.isFavorite) {
                 urlForList += '&IsFavorite=true';
@@ -302,49 +305,49 @@ class AppRouter {
 
         if (item === 'livetv') {
             if (options.section === 'programs') {
-                return '#/livetv?tab=0&serverId=' + serverId;
+                return '#/livetv?tab=0&serverId=' + options.serverId;
             }
             if (options.section === 'guide') {
-                return '#/livetv?tab=1&serverId=' + serverId;
+                return '#/livetv?tab=1&serverId=' + options.serverId;
             }
 
             if (options.section === 'movies') {
-                return '#/list?type=Programs&IsMovie=true&serverId=' + serverId;
+                return '#/list?type=Programs&IsMovie=true&serverId=' + options.serverId;
             }
 
             if (options.section === 'shows') {
-                return '#/list?type=Programs&IsSeries=true&IsMovie=false&IsNews=false&serverId=' + serverId;
+                return '#/list?type=Programs&IsSeries=true&IsMovie=false&IsNews=false&serverId=' + options.serverId;
             }
 
             if (options.section === 'sports') {
-                return '#/list?type=Programs&IsSports=true&serverId=' + serverId;
+                return '#/list?type=Programs&IsSports=true&serverId=' + options.serverId;
             }
 
             if (options.section === 'kids') {
-                return '#/list?type=Programs&IsKids=true&serverId=' + serverId;
+                return '#/list?type=Programs&IsKids=true&serverId=' + options.serverId;
             }
 
             if (options.section === 'news') {
-                return '#/list?type=Programs&IsNews=true&serverId=' + serverId;
+                return '#/list?type=Programs&IsNews=true&serverId=' + options.serverId;
             }
 
             if (options.section === 'onnow') {
-                return '#/list?type=Programs&IsAiring=true&serverId=' + serverId;
+                return '#/list?type=Programs&IsAiring=true&serverId=' + options.serverId;
             }
 
             if (options.section === 'channels') {
-                return '#/livetv?tab=2&serverId=' + serverId;
+                return '#/livetv?tab=2&serverId=' + options.serverId;
             }
 
             if (options.section === 'dvrschedule') {
-                return '#/livetv?tab=4&serverId=' + serverId;
+                return '#/livetv?tab=4&serverId=' + options.serverId;
             }
 
             if (options.section === 'seriesrecording') {
-                return '#/livetv?tab=5&serverId=' + serverId;
+                return '#/livetv?tab=5&serverId=' + options.serverId;
             }
 
-            return '#/livetv?serverId=' + serverId;
+            return '#/livetv?serverId=' + options.serverId;
         }
 
         if (itemType == 'SeriesTimer') {
@@ -432,7 +435,7 @@ class AppRouter {
 
             const layoutMode = localStorage.getItem('layout');
 
-            if (layoutMode === 'experimental' && item.CollectionType == CollectionType.Homevideos) {
+            if (layoutMode === LayoutMode.Experimental && item.CollectionType == CollectionType.Homevideos) {
                 url = '#/homevideos?topParentId=' + item.Id;
 
                 return url;

src/components/shortcuts.js

@@ -1,19 +1,20 @@
 /**
- * Module shortcuts.
- * @module components/shortcuts
+ * "Shortcut" action handlers for BaseItems.
  */
 import { getPlaylistsApi } from '@jellyfin/sdk/lib/utils/api/playlists-api';
 
+import { ItemAction } from 'constants/itemAction';
+import { ServerConnections } from 'lib/jellyfin-apiclient';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
+
 import { playbackManager } from './playback/playbackmanager';
 import inputManager from '../scripts/inputManager';
 import { appRouter } from './router/appRouter';
 import globalize from '../lib/globalize';
-import { ServerConnections } from 'lib/jellyfin-apiclient';
 import dom from '../utils/dom';
 import recordingHelper from './recordingcreator/recordinghelper';
 import toast from './toast/toast';
 import * as userSettings from '../scripts/settings/userSettings';
-import { toApi } from 'utils/jellyfin-apiclient/compat';
 
 function playAllFromHere(card, serverId, queue) {
     const parent = card.parentNode;
@@ -231,95 +232,114 @@ function executeAction(card, target, action) {
 
     const playableItemId = type === 'Program' ? item.ChannelId : item.Id;
 
-    if (item.MediaType === 'Photo' && action === 'link') {
-        action = 'play';
+    if (item.MediaType === 'Photo' && action === ItemAction.Link) {
+        action = ItemAction.Play;
     }
 
-    if (action === 'link') {
-        appRouter.showItem(item, {
-            context: card.getAttribute('data-context'),
-            parentId: card.getAttribute('data-parentid')
-        });
-    } else if (action === 'programdialog') {
-        showProgramDialog(item);
-    } else if (action === 'instantmix') {
-        playbackManager.instantMix({
-            Id: playableItemId,
-            ServerId: serverId
-        });
-    } else if (action === 'play' || action === 'resume') {
-        const startPositionTicks = parseInt(card.getAttribute('data-positionticks') || '0', 10);
-        const sortValues = userSettings.getSortValuesLegacy(sortParentId, 'SortName');
-
-        if (playbackManager.canPlay(item)) {
-            playbackManager.play({
-                ids: [playableItemId],
-                startPositionTicks: startPositionTicks,
-                serverId: serverId,
-                queryOptions: {
-                    SortBy: sortValues.sortBy,
-                    SortOrder: sortValues.sortOrder
-                }
+    switch (action) {
+        case ItemAction.Link:
+            appRouter.showItem(item, {
+                context: card.getAttribute('data-context'),
+                parentId: card.getAttribute('data-parentid')
             });
-        } else {
-            console.warn('Unable to play item', item);
+            break;
+        case ItemAction.ProgramDialog:
+            showProgramDialog(item);
+            break;
+        case ItemAction.InstantMix:
+            playbackManager.instantMix({
+                Id: playableItemId,
+                ServerId: serverId
+            });
+            break;
+        case ItemAction.Play:
+        case ItemAction.Resume: {
+            const startPositionTicks = parseInt(card.getAttribute('data-positionticks') || '0', 10);
+            const sortValues = userSettings.getSortValuesLegacy(sortParentId, 'SortName');
+
+            if (playbackManager.canPlay(item)) {
+                playbackManager.play({
+                    ids: [playableItemId],
+                    startPositionTicks: startPositionTicks,
+                    serverId: serverId,
+                    queryOptions: {
+                        SortBy: sortValues.sortBy,
+                        SortOrder: sortValues.sortOrder
+                    }
+                });
+            } else {
+                console.warn('Unable to play item', item);
+            }
+            break;
         }
-    } else if (action === 'queue') {
-        if (playbackManager.isPlaying()) {
-            playbackManager.queue({
-                ids: [playableItemId],
-                serverId: serverId
-            });
-            toast(globalize.translate('MediaQueued'));
-        } else {
-            playbackManager.queue({
-                ids: [playableItemId],
-                serverId: serverId
-            });
+        case ItemAction.Queue:
+            if (playbackManager.isPlaying()) {
+                playbackManager.queue({
+                    ids: [playableItemId],
+                    serverId: serverId
+                });
+                toast(globalize.translate('MediaQueued'));
+            } else {
+                playbackManager.queue({
+                    ids: [playableItemId],
+                    serverId: serverId
+                });
+            }
+            break;
+        case ItemAction.PlayAllFromHere:
+            playAllFromHere(card, serverId);
+            break;
+        case ItemAction.QueueAllFromHere:
+            playAllFromHere(card, serverId, true);
+            break;
+        case ItemAction.SetPlaylistIndex:
+            playbackManager.setCurrentPlaylistItem(card.getAttribute('data-playlistitemid'));
+            break;
+        case ItemAction.Record:
+            onRecordCommand(serverId, id, type, card.getAttribute('data-timerid'), card.getAttribute('data-seriestimerid'));
+            break;
+        case ItemAction.Menu: {
+            const options = target.getAttribute('data-playoptions') === 'false' ?
+                {
+                    shuffle: false,
+                    instantMix: false,
+                    play: false,
+                    playAllFromHere: false,
+                    queue: false,
+                    queueAllFromHere: false
+                } :
+                {};
+
+            options.positionTo = target;
+
+            showContextMenu(card, options);
+            break;
         }
-    } else if (action === 'playallfromhere') {
-        playAllFromHere(card, serverId);
-    } else if (action === 'queueallfromhere') {
-        playAllFromHere(card, serverId, true);
-    } else if (action === 'setplaylistindex') {
-        playbackManager.setCurrentPlaylistItem(card.getAttribute('data-playlistitemid'));
-    } else if (action === 'record') {
-        onRecordCommand(serverId, id, type, card.getAttribute('data-timerid'), card.getAttribute('data-seriestimerid'));
-    } else if (action === 'menu') {
-        const options = target.getAttribute('data-playoptions') === 'false' ?
-            {
-                shuffle: false,
-                instantMix: false,
-                play: false,
-                playAllFromHere: false,
-                queue: false,
-                queueAllFromHere: false
-            } :
-            {};
+        case ItemAction.PlayMenu:
+            showPlayMenu(card, target);
+            break;
+        case ItemAction.Edit:
+            getItem(target).then(itemToEdit => {
+                editItem(itemToEdit, serverId);
+            });
+            break;
+        case ItemAction.PlayTrailer:
+            getItem(target).then(playTrailer);
+            break;
+        case ItemAction.AddToPlaylist:
+            getItem(target).then(addToPlaylist);
+            break;
+        case ItemAction.Custom: {
+            const customAction = target.getAttribute('data-customaction');
 
-        options.positionTo = target;
-
-        showContextMenu(card, options);
-    } else if (action === 'playmenu') {
-        showPlayMenu(card, target);
-    } else if (action === 'edit') {
-        getItem(target).then(itemToEdit => {
-            editItem(itemToEdit, serverId);
-        });
-    } else if (action === 'playtrailer') {
-        getItem(target).then(playTrailer);
-    } else if (action === 'addtoplaylist') {
-        getItem(target).then(addToPlaylist);
-    } else if (action === 'custom') {
-        const customAction = target.getAttribute('data-customaction');
-
-        card.dispatchEvent(new CustomEvent(`action-${customAction}`, {
-            detail: {
-                playlistItemId: card.getAttribute('data-playlistitemid')
-            },
-            cancelable: false,
-            bubbles: true
-        }));
+            card.dispatchEvent(new CustomEvent(`action-${customAction}`, {
+                detail: {
+                    playlistItemId: card.getAttribute('data-playlistitemid')
+                },
+                cancelable: false,
+                bubbles: true
+            }));
+        }
     }
 }
 
@@ -390,7 +410,7 @@ export function onClick(e) {
             }
         }
 
-        if (action && action !== 'none') {
+        if (action && action !== ItemAction.None) {
             executeAction(card, actionElement, action);
 
             e.preventDefault();

src/components/slideshow/slideshow.js

@@ -2,9 +2,15 @@
  * Image viewer component
  * @module components/slideshow/slideshow
  */
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
+import screenfull from 'screenfull';
+
 import { AppFeature } from 'constants/appFeature';
-import dialogHelper from '../dialogHelper/dialogHelper';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
+import { randomInt } from 'utils/number';
+
+import dialogHelper from '../dialogHelper/dialogHelper';
 import inputManager from '../../scripts/inputManager';
 import layoutManager from '../layoutManager';
 import focusManager from '../focusManager';
@@ -15,8 +21,6 @@ import dom from '../../utils/dom';
 import './style.scss';
 import 'material-design-icons-iconfont';
 import '../../elements/emby-button/paper-icon-button-light';
-import screenfull from 'screenfull';
-import { randomInt } from '../../utils/number.ts';
 
 /**
  * Name of transition event.
@@ -88,14 +92,15 @@ function getBackdropImageUrl(item, options, apiClient) {
  * @returns {string} URL of the item's image.
  */
 function getImgUrl(item, user) {
-    const apiClient = ServerConnections.getApiClient(item.ServerId);
+    const apiClient = ServerConnections.getApiClient(item);
+    const api = toApi(apiClient);
     const imageOptions = {};
 
     if (item.BackdropImageTags?.length) {
         return getBackdropImageUrl(item, imageOptions, apiClient);
     } else {
         if (item.MediaType === 'Photo' && user?.Policy.EnableContentDownloading) {
-            return apiClient.getItemDownloadUrl(item.Id);
+            return getLibraryApi(api).getDownloadUrl({ itemId: item.Id });
         }
         imageOptions.type = 'Primary';
         return getImageUrl(item, imageOptions, apiClient);

src/constants/itemAction.ts

@@ -0,0 +1,37 @@
+/** Actions that can be performed on a BaseItem. */
+export enum ItemAction {
+    /** Add the Item to a playlist. */
+    AddToPlaylist = 'addtoplaylist',
+    /** Trigger a custom action via an Event. */
+    Custom = 'custom',
+    /** Open an editor for the Item. */
+    Edit = 'edit',
+    /** Create an instant mix based on the Item. */
+    InstantMix = 'instantmix',
+    /** Open the details view for the Item. */
+    Link = 'link',
+    /** Open the context menu for the Item. */
+    Menu = 'menu',
+    /** Perform no action. Used to prevent a parent element's action being triggered. */
+    None = 'none',
+    /** Play the Item. */
+    Play = 'play',
+    /** Queue the Item and all subsequent Items and start playback. */
+    PlayAllFromHere = 'playallfromhere',
+    /** Open the play menu for the Item. */
+    PlayMenu = 'playmenu',
+    /** Play the trailer for the Item. */
+    PlayTrailer = 'playtrailer',
+    /** Open the program dialog for the Item. */
+    ProgramDialog = 'programdialog',
+    /** Queue the Item. */
+    Queue = 'queue',
+    /** Queue the Item and all subsequent Items. */
+    QueueAllFromHere = 'queueallfromhere',
+    /** Record the Item. */
+    Record = 'record',
+    /** Resume playback of the Item. */
+    Resume = 'resume',
+    /** Set this Item as the Item to be currently played from a playlist. */
+    SetPlaylistIndex = 'setplaylistindex'
+};

src/constants/layoutMode.ts

@@ -0,0 +1,13 @@
+/** The different layout modes supported by the web app. */
+export enum LayoutMode {
+    /** Automatic layout - the app chose the best layout for the detected device. */
+    Auto = 'auto',
+    /** The legacy desktop layout. */
+    Desktop = 'desktop',
+    /** The modern React based layout. */
+    Experimental = 'experimental',
+    /** The legacy mobile layout. */
+    Mobile = 'mobile',
+    /** The TV layout. */
+    Tv = 'tv'
+};

src/controllers/itemDetails/index.html

@@ -176,88 +176,86 @@
             </div>
         </div>
 
-        <div class="detailPageSecondaryContainer padded-bottom-page">
-            <div class="detailPageContent">
-                <div id="childrenCollapsible" class="hide verticalSection detailVerticalSection">
-                    <h2 class="sectionTitle sectionTitle-cards hide">
-                        <span></span>
-                    </h2>
-                    <div>
-                        <div is="emby-itemscontainer" class="itemsContainer padded-right" style="text-align: left;"></div>
-                    </div>
+        <div class="detailPageSecondaryContainer padded-left padded-bottom-page">
+            <div id="childrenCollapsible" class="hide verticalSection detailVerticalSection">
+                <h2 class="sectionTitle sectionTitle-cards hide">
+                    <span></span>
+                </h2>
+                <div>
+                    <div is="emby-itemscontainer" class="itemsContainer padded-right" style="text-align: left;"></div>
                 </div>
+            </div>
 
-                <div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderAdditionalParts}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div id="additionalPartsContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
+            <div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderAdditionalParts}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div id="additionalPartsContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div class="verticalSection detailVerticalSection moreFromSeasonSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
+            <div class="verticalSection detailVerticalSection moreFromSeasonSection hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div id="lyricsSection" class="verticalSection-extrabottompadding detailVerticalSection lyricsContainer hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right">${Lyrics}</h2>
-                    <div is="emby-itemscontainer" class="vertical-list itemsContainer"></div>
+            <div id="lyricsSection" class="verticalSection-extrabottompadding detailVerticalSection lyricsContainer hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right">${Lyrics}</h2>
+                <div is="emby-itemscontainer" class="vertical-list itemsContainer"></div>
+            </div>
+
+            <div class="verticalSection detailVerticalSection moreFromArtistSection hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div class="verticalSection detailVerticalSection moreFromArtistSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
+            <div id="castCollapsible" class="verticalSection detailVerticalSection hide">
+                <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderCastAndCrew}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div id="castCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderCastAndCrew}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
+            <div id="guestCastCollapsible" class="verticalSection detailVerticalSection hide">
+                <h2 id="guestCastHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderGuestCast}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div id="guestCastContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div id="guestCastCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 id="guestCastHeader" class="sectionTitle sectionTitle-cards padded-right">${HeaderGuestCast}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div id="guestCastContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
+            <div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
+                <h2 class="sectionTitle padded-right">${HeaderUpcomingOnTV}</h2>
+                <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-right"></div>
+            </div>
+
+            <div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right">${SpecialFeatures}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div id="specialsContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle padded-right">${HeaderUpcomingOnTV}</h2>
-                    <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-right"></div>
+            <div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right">${MusicVideos}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div id="musicVideosContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right">${SpecialFeatures}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div id="specialsContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
+            <div id="scenesCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderScenes}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                 </div>
+            </div>
 
-                <div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right">${MusicVideos}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div id="musicVideosContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
-                </div>
-
-                <div id="scenesCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderScenes}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
-                    </div>
-                </div>
-
-                <div id="similarCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
-                    <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderMoreLikeThis}</h2>
-                    <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
-                        <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
-                    </div>
+            <div id="similarCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
+                <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderMoreLikeThis}</h2>
+                <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale no-padding" data-centerfocus="true">
+                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
                 </div>
             </div>
         </div>

src/controllers/itemDetails/index.js

@@ -1,5 +1,6 @@
 import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
 import { PersonKind } from '@jellyfin/sdk/lib/generated-client/models/person-kind';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { intervalToDuration } from 'date-fns';
 import DOMPurify from 'dompurify';
 import escapeHtml from 'escape-html';
@@ -22,6 +23,7 @@ import { playbackManager } from 'components/playback/playbackmanager';
 import { appRouter } from 'components/router/appRouter';
 import itemShortcuts from 'components/shortcuts';
 import { AppFeature } from 'constants/appFeature';
+import { ItemAction } from 'constants/itemAction';
 import globalize from 'lib/globalize';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import browser from 'scripts/browser';
@@ -34,6 +36,7 @@ import { getPortraitShape, getSquareShape } from 'utils/card';
 import Dashboard from 'utils/dashboard';
 import Events from 'utils/events';
 import { getItemBackdropImageUrl } from 'utils/jellyfin-apiclient/backdropImage';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
 
 import 'elements/emby-itemscontainer/emby-itemscontainer';
 import 'elements/emby-checkbox/emby-checkbox';
@@ -434,19 +437,19 @@ function renderName(item, container, context) {
         parentNameHtml.push(getArtistLinksHtml(item.ArtistItems, item.ServerId, context));
         parentNameLast = true;
     } else if (item.SeriesName && item.Type === 'Episode') {
-        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="link" data-id="${item.SeriesId}" data-serverid="${item.ServerId}" data-type="Series" data-isfolder="true">${escapeHtml(item.SeriesName)}</a>`);
+        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="${ItemAction.Link}" data-id="${item.SeriesId}" data-serverid="${item.ServerId}" data-type="Series" data-isfolder="true">${escapeHtml(item.SeriesName)}</a>`);
     } else if (item.IsSeries || item.EpisodeTitle) {
         parentNameHtml.push(escapeHtml(item.Name));
     }
 
     if (item.SeriesName && item.Type === 'Season') {
-        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="link" data-id="${item.SeriesId}" data-serverid="${item.ServerId}" data-type="Series" data-isfolder="true">${escapeHtml(item.SeriesName)}</a>`);
+        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="${ItemAction.Link}" data-id="${item.SeriesId}" data-serverid="${item.ServerId}" data-type="Series" data-isfolder="true">${escapeHtml(item.SeriesName)}</a>`);
     } else if (item.ParentIndexNumber != null && item.Type === 'Episode') {
-        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="link" data-id="${item.SeasonId}" data-serverid="${item.ServerId}" data-type="Season" data-isfolder="true">${escapeHtml(item.SeasonName)}</a>`);
+        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="${ItemAction.Link}" data-id="${item.SeasonId}" data-serverid="${item.ServerId}" data-type="Season" data-isfolder="true">${escapeHtml(item.SeasonName)}</a>`);
     } else if (item.ParentIndexNumber != null && item.IsSeries) {
         parentNameHtml.push(escapeHtml(item.SeasonName || 'S' + item.ParentIndexNumber));
     } else if (item.Album && item.AlbumId && (item.Type === 'MusicVideo' || item.Type === 'Audio')) {
-        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="link" data-id="${item.AlbumId}" data-serverid="${item.ServerId}" data-type="MusicAlbum" data-isfolder="true">${escapeHtml(item.Album)}</a>`);
+        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="${ItemAction.Link}" data-id="${item.AlbumId}" data-serverid="${item.ServerId}" data-type="MusicAlbum" data-isfolder="true">${escapeHtml(item.Album)}</a>`);
     } else if (item.Album) {
         parentNameHtml.push(escapeHtml(item.Album));
     }
@@ -1982,7 +1985,7 @@ export default function (view, params) {
             return;
         }
 
-        playItem(item, item.UserData && mode === 'resume' ? item.UserData.PlaybackPositionTicks : 0);
+        playItem(item, item.UserData && mode === ItemAction.Resume ? item.UserData.PlaybackPositionTicks : 0);
     }
 
     function onPlayClick() {
@@ -2026,9 +2029,10 @@ export default function (view, params) {
     }
 
     function onDownloadClick() {
-        const downloadHref = getApiClient().getItemDownloadUrl(currentItem.Id);
+        const api = toApi(getApiClient());
+        const url = getLibraryApi(api).getDownloadUrl({ itemId: currentItem.Id });
         download([{
-            url: downloadHref,
+            url,
             item: currentItem,
             itemId: currentItem.Id,
             serverId: currentItem.ServerId,

src/elements/emby-playstatebutton/PlayedButton.tsx

@@ -3,8 +3,8 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { type FC, useCallback } from 'react';
 import IconButton from '@mui/material/IconButton';
 import CheckIcon from '@mui/icons-material/Check';
-import classNames from 'classnames';
 
+import { ItemAction } from 'constants/itemAction';
 import globalize from 'lib/globalize';
 import { useTogglePlayedMutation } from 'hooks/useFetchItems';
 
@@ -59,23 +59,17 @@ const PlayedButton: FC<PlayedButtonProps> = ({
         }
     }, [itemId, togglePlayedMutation, isPlayed, queryClient, queryKey]);
 
-    const btnClass = classNames(
-        className,
-        { 'playstatebutton-played': isPlayed }
-    );
-
-    const iconClass = classNames(
-        { 'playstatebutton-icon-played': isPlayed }
-    );
     return (
         <IconButton
-            data-action='none'
+            data-action={ItemAction.None}
             title={getTitle()}
-            className={btnClass}
+            className={className}
             size='small'
             onClick={onClick}
         >
-            <CheckIcon className={iconClass} />
+            <CheckIcon
+                color={isPlayed ? 'error' : undefined}
+            />
         </IconButton>
     );
 };

src/elements/emby-ratingbutton/FavoriteButton.tsx

@@ -3,7 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import IconButton from '@mui/material/IconButton';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 
-import classNames from 'classnames';
+import { ItemAction } from 'constants/itemAction';
 import { useToggleFavoriteMutation } from 'hooks/useFetchItems';
 import globalize from 'lib/globalize';
 
@@ -45,24 +45,17 @@ const FavoriteButton: FC<FavoriteButtonProps> = ({
         }
     }, [isFavorite, itemId, queryClient, queryKey, toggleFavoriteMutation]);
 
-    const btnClass = classNames(
-        className,
-        { 'ratingbutton-withrating': isFavorite }
-    );
-
-    const iconClass = classNames(
-        { 'ratingbutton-icon-withrating': isFavorite }
-    );
-
     return (
         <IconButton
-            data-action='none'
+            data-action={ItemAction.None}
+            className={className}
             title={isFavorite ? globalize.translate('Favorite') : globalize.translate('AddToFavorites')}
-            className={btnClass}
             size='small'
             onClick={onClick}
         >
-            <FavoriteIcon className={iconClass} />
+            <FavoriteIcon
+                color={isFavorite ? 'error' : undefined}
+            />
         </IconButton>
     );
 };

src/hooks/useUsers.ts

@@ -8,6 +8,8 @@ import { useApi } from './useApi';
 
 export type UsersRecords = Record<string, UserDto>;
 
+export const QUERY_KEY = 'Users';
+
 const fetchUsers = async (
     api: Api,
     requestParams?: UserApiGetUsersRequest,
@@ -23,7 +25,7 @@ const fetchUsers = async (
 export const useUsers = (requestParams?: UserApiGetUsersRequest) => {
     const { api } = useApi();
     return useQuery({
-        queryKey: ['Users'],
+        queryKey: [ QUERY_KEY ],
         queryFn: ({ signal }) =>
             fetchUsers(api!, requestParams, { signal }),
         enabled: !!api

src/plugins/bookPlayer/plugin.js

@@ -1,18 +1,21 @@
-import 'material-design-icons-iconfont';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
+import Screenfull from 'screenfull';
+
+import { ServerConnections } from 'lib/jellyfin-apiclient';
+import browser from 'scripts/browser';
+import TouchHelper from 'scripts/touchHelper';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
 
 import loading from '../../components/loading/loading';
 import keyboardnavigation from '../../scripts/keyboardNavigation';
 import dialogHelper from '../../components/dialogHelper/dialogHelper';
-import Screenfull from 'screenfull';
 import TableOfContents from './tableOfContents';
 import { translateHtml } from '../../lib/globalize';
-import { ServerConnections } from 'lib/jellyfin-apiclient';
-import browser from 'scripts/browser';
 import * as userSettings from '../../scripts/settings/userSettings';
-import TouchHelper from 'scripts/touchHelper';
 import { PluginType } from '../../types/plugin.ts';
 import Events from '../../utils/events.ts';
 
+import 'material-design-icons-iconfont';
 import '../../elements/emby-button/paper-icon-button-light';
 
 import html from './template.html';
@@ -324,16 +327,14 @@ export class BookPlayer {
             }
         };
 
-        const serverId = item.ServerId;
-        const apiClient = ServerConnections.getApiClient(serverId);
-
         if (!Screenfull.isEnabled) {
             document.getElementById('btnBookplayerFullscreen').display = 'none';
         }
 
         return new Promise((resolve, reject) => {
             import('epubjs').then(({ default: epubjs }) => {
-                const downloadHref = apiClient.getItemDownloadUrl(item.Id);
+                const api = toApi(ServerConnections.getApiClient(item));
+                const downloadHref = getLibraryApi(api).getDownloadUrl({ itemId: item.Id });
                 const book = epubjs(downloadHref, { openAs: 'epub' });
 
                 // We need to calculate the height of the window beforehand because using 100% is not accurate when the dialog is opening.

src/plugins/comicsPlayer/plugin.js

@@ -1,9 +1,13 @@
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { Archive } from 'libarchive.js';
+
+import { ServerConnections } from 'lib/jellyfin-apiclient';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
+
 import loading from '../../components/loading/loading';
 import dialogHelper from '../../components/dialogHelper/dialogHelper';
 import keyboardnavigation from '../../scripts/keyboardNavigation';
 import { appRouter } from '../../components/router/appRouter';
-import { ServerConnections } from 'lib/jellyfin-apiclient';
 import * as userSettings from '../../scripts/settings/userSettings';
 import { PluginType } from '../../types/plugin.ts';
 
@@ -287,14 +291,12 @@ export class ComicsPlayer {
 
         loading.show();
 
-        const serverId = item.ServerId;
-        const apiClient = ServerConnections.getApiClient(serverId);
-
         Archive.init({
             workerUrl: appRouter.baseUrl() + '/libraries/worker-bundle.js'
         });
 
-        const downloadUrl = apiClient.getItemDownloadUrl(item.Id);
+        const api = toApi(ServerConnections.getApiClient(item));
+        const downloadUrl = getLibraryApi(api).getDownloadUrl({ itemId: item.Id });
         this.archiveSource = new ArchiveSource(downloadUrl);
 
         //eslint-disable-next-line import/no-unresolved

src/plugins/htmlVideoPlayer/plugin.js

@@ -1309,7 +1309,7 @@ export class HtmlVideoPlayer {
                 dropAllAnimations: false,
                 libassMemoryLimit: 40,
                 libassGlyphLimit: 40,
-                targetFps: videoStream?.ReferenceFrameRate || videoStream?.RealFrameRate || 24,
+                targetFps: videoStream?.ReferenceFrameRate || 24,
                 prescaleFactor: 0.8,
                 prescaleHeightLimit: 1080,
                 maxRenderHeight: 2160,

src/plugins/pdfPlayer/plugin.js

@@ -1,3 +1,7 @@
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
+
+import { toApi } from 'utils/jellyfin-apiclient/compat';
+
 import loading from '../../components/loading/loading';
 import keyboardnavigation from '../../scripts/keyboardNavigation';
 import dialogHelper from '../../components/dialogHelper/dialogHelper';
@@ -205,11 +209,9 @@ export class PdfPlayer {
             }
         };
 
-        const serverId = item.ServerId;
-        const apiClient = ServerConnections.getApiClient(serverId);
-
         return import('pdfjs-dist').then(({ GlobalWorkerOptions, getDocument }) => {
-            const downloadHref = apiClient.getItemDownloadUrl(item.Id);
+            const api = toApi(ServerConnections.getApiClient(item));
+            const downloadHref = getLibraryApi(api).getDownloadUrl({ itemId: item.Id });
 
             this.bindEvents();
             GlobalWorkerOptions.workerSrc = appRouter.baseUrl() + '/libraries/pdf.worker.js';

src/plugins/photoPlayer/plugin.js

@@ -1,4 +1,5 @@
 import { ServerConnections } from 'lib/jellyfin-apiclient';
+import * as userSettings from '../../scripts/settings/userSettings';
 import { PluginType } from 'types/plugin.ts';
 
 export default class PhotoPlayer {
@@ -24,7 +25,9 @@ export default class PhotoPlayer {
                         interval: 11000,
                         interactive: true,
                         // playbackManager.shuffle has no options. So treat 'shuffle' as a 'play' action
-                        autoplay: options.autoplay || options.shuffle,
+                        autoplay: {
+                            delay: userSettings.slideshowInterval() * 1000
+                        },
                         user: result
                     });
 

src/scripts/browser.d.ts

@@ -21,7 +21,6 @@ declare namespace browser {
     export let animate: boolean;
     export let hisense: boolean;
     export let tizen: boolean;
-    export let vega: boolean;
     export let vidaa: boolean;
     export let web0s: boolean;
     export let titanos: boolean;

src/scripts/browser.js

@@ -235,10 +235,10 @@ const uaMatch = function (ua) {
     }
 
     return {
-        browser,
-        version,
+        browser: browser,
+        version: version,
         platform: platformMatch[0] || '',
-        versionMajor
+        versionMajor: versionMajor
     };
 };
 
@@ -283,11 +283,10 @@ export const detectBrowser = (userAgent = navigator.userAgent) => {
     browser.animate = typeof document !== 'undefined' && document.documentElement.animate != null;
     browser.hisense = normalizedUA.includes('hisense');
     browser.tizen = normalizedUA.includes('tizen') || window.tizen != null;
-    browser.vega = normalizedUA.includes('kepler');
     browser.vidaa = normalizedUA.includes('vidaa');
     browser.web0s = isWeb0s(normalizedUA);
 
-    browser.tv = browser.ps4 || browser.vega || browser.xboxOne || isTv(normalizedUA);
+    browser.tv = browser.ps4 || browser.xboxOne || isTv(normalizedUA);
     browser.operaTv = browser.tv && normalizedUA.includes('opr/');
 
     browser.edgeUwp = (browser.edge || browser.edgeChromium) && (normalizedUA.includes('msapphost') || normalizedUA.includes('webview'));
@@ -306,15 +305,9 @@ export const detectBrowser = (userAgent = navigator.userAgent) => {
         delete browser.chrome;
         delete browser.safari;
     } else if (browser.titanos) {
-        // UserAgent string contains 'Opr' and 'Safari', but we only want 'titanos' to be true
+    // UserAgent string contains 'Opr' and 'Safari', but we only want 'titanos' to be true
         delete browser.operaTv;
         delete browser.safari;
-    } else if (browser.vega) {
-        // UserAgent string contains 'Chrome' and 'Safari', but we only want 'vega' to be true
-        delete browser.chrome;
-        delete browser.safari;
-        // UserAgent string contains 'Mobile Chrome', but it is a TV
-        delete browser.mobile;
     } else {
         browser.orsay = normalizedUA.includes('smarthub');
     }

src/scripts/browser.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest';
 import { detectBrowser } from './browser';
 
 describe('Browser', () => {
-    it('should identify TitanOS devices', () => {
+    it('should identify TitanOS devices', async () => {
         // Ref: https://docs.titanos.tv/user-agents-specifications
         // Philips example
         let browser = detectBrowser('Mozilla/5.0 (Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.4147.62 Safari/537.36 OPR/46.0.2207.0 OMI/4.24, TV_NT72690_2025_4K /<SW version> (Philips, <CTN>, wired) CE-HTML/1.0 NETTV/4.6.0.8 SignOn/2.0 SmartTvA/5.0.0 TitanOS/3.0 en Ginga');
@@ -20,17 +20,7 @@ describe('Browser', () => {
         expect(browser.tv).toBe(true);
     });
 
-    it('should identify Vega devices', () => {
-        // Ref: https://developer.amazon.com/docs/vega/0.21/webview-development-best-practices-tv.html#avoid-relying-on-the-useragent
-        const browser = detectBrowser('Mozilla/5.0 (Linux; Kepler 1.1; AFTCA002 user/1234; wv) AppleWebKit/537.36 (KHTML, like Gecko) Mobile Chrome/130.0.6723.192 Safari/537.36');
-        expect(browser.vega).toBe(true);
-        expect(browser.chrome).toBeFalsy();
-        expect(browser.safari).toBeFalsy();
-        expect(browser.mobile).toBeFalsy();
-        expect(browser.tv).toBe(true);
-    });
-
-    it('should identify Xbox devices', () => {
+    it('should identify Xbox devices', async () => {
         const browser = detectBrowser('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0 WebView2 Xbox');
         expect(browser.xboxOne).toBe(true);
         expect(browser.tv).toBe(true);

src/scripts/browserDeviceProfile.js

@@ -24,11 +24,6 @@ function canPlayHevc(videoTestElement, options) {
 }
 
 function canPlayAv1(videoTestElement) {
-    // Xbox UWP WebView2 falsely reports AV1 support but cannot play it
-    if (browser.xboxOne) {
-        return false;
-    }
-
     if (browser.tizenVersion >= 5.5 || browser.web0sVersion >= 5) {
         return true;
     }
@@ -175,11 +170,6 @@ function canPlayAudioFormat(format) {
             return true;
         }
     } else if (format === 'opus') {
-        // Xbox UWP WebView2 falsely reports Opus support but cannot play it
-        if (browser.xboxOne) {
-            return false;
-        }
-
         if (browser.web0s) {
             // canPlayType lies about OPUS support
             return browser.web0sVersion >= 3.5;
@@ -306,6 +296,11 @@ function supportedDolbyVisionProfileAv1(videoTestElement) {
     return videoTestElement.canPlayType?.('video/mp4; codecs="dav1.10.06"').replace(/no/, '');
 }
 
+function supportsAnamorphicVideo() {
+    // Tizen applies the aspect ratio correctly
+    return browser.tizenVersion >= 6;
+}
+
 function getDirectPlayProfileForVideoContainer(container, videoAudioCodecs, videoTestElement, options) {
     let supported = false;
     let profileContainer = container;
@@ -1251,12 +1246,6 @@ export default function (options) {
     }
 
     const h264CodecProfileConditions = [
-        {
-            Condition: 'NotEquals',
-            Property: 'IsAnamorphic',
-            Value: 'true',
-            IsRequired: false
-        },
         {
             Condition: 'EqualsAny',
             Property: 'VideoProfile',
@@ -1278,12 +1267,6 @@ export default function (options) {
     ];
 
     const hevcCodecProfileConditions = [
-        {
-            Condition: 'NotEquals',
-            Property: 'IsAnamorphic',
-            Value: 'true',
-            IsRequired: false
-        },
         {
             Condition: 'EqualsAny',
             Property: 'VideoProfile',
@@ -1314,12 +1297,6 @@ export default function (options) {
     ];
 
     const av1CodecProfileConditions = [
-        {
-            Condition: 'NotEquals',
-            Property: 'IsAnamorphic',
-            Value: 'true',
-            IsRequired: false
-        },
         {
             Condition: 'EqualsAny',
             Property: 'VideoProfile',
@@ -1340,6 +1317,29 @@ export default function (options) {
         }
     ];
 
+    if (!supportsAnamorphicVideo()) {
+        h264CodecProfileConditions.push({
+            Condition: 'NotEquals',
+            Property: 'IsAnamorphic',
+            Value: 'true',
+            IsRequired: false
+        });
+
+        hevcCodecProfileConditions.push({
+            Condition: 'NotEquals',
+            Property: 'IsAnamorphic',
+            Value: 'true',
+            IsRequired: false
+        });
+
+        av1CodecProfileConditions.push({
+            Condition: 'NotEquals',
+            Property: 'IsAnamorphic',
+            Value: 'true',
+            IsRequired: false
+        });
+    }
+
     if (!browser.edgeUwp && !browser.tizen && !browser.web0s) {
         h264CodecProfileConditions.push({
             Condition: 'NotEquals',

src/scripts/settings/userSettings.js

@@ -464,6 +464,19 @@ export class UserSettings {
         return parseInt(this.get('backdropScreensaverInterval', false), 10) || 5;
     }
 
+    /**
+     * Get or set the interval between slides when using the slideshow.
+     * @param {number|undefined} [val] - The interval between slides in seconds.
+     * @return {number} The interval between slides in seconds.
+     */
+    slideshowInterval(val) {
+        if (val !== undefined) {
+            return this.set('slideshowInterval', val.toString(), false);
+        }
+
+        return parseInt(this.get('slideshowInterval', false), 10) || 5;
+    }
+
     /**
      * Get or set the amount of time it takes to activate the screensaver in seconds. Default 3 minutes.
      * @param {number|undefined} [val] - The amount of time it takes to activate the screensaver in seconds.
@@ -705,6 +718,7 @@ export const skin = currentSettings.skin.bind(currentSettings);
 export const theme = currentSettings.theme.bind(currentSettings);
 export const screensaver = currentSettings.screensaver.bind(currentSettings);
 export const backdropScreensaverInterval = currentSettings.backdropScreensaverInterval.bind(currentSettings);
+export const slideshowInterval = currentSettings.slideshowInterval.bind(currentSettings);
 export const screensaverTime = currentSettings.screensaverTime.bind(currentSettings);
 export const libraryPageSize = currentSettings.libraryPageSize.bind(currentSettings);
 export const maxDaysForNextUp = currentSettings.maxDaysForNextUp.bind(currentSettings);

src/strings/ab.json

@@ -0,0 +1 @@
+{}

src/strings/ar.json

@@ -121,7 +121,7 @@
     "HeaderConnectionFailure": "فشل في الاتصال",
     "HeaderContainerProfile": "عريضة الحاوية",
     "HeaderContainerProfileHelp": "تشير ملفات تعريف الحاوية إلى قيود الجهاز عند تشغيل تنسيقات معينة. إذا تم تطبيق قيود ، فسيتم تحويل ترميز الوسائط ، حتى إذا تم تكوين التنسيق للتشغيل المباشر.",
-    "HeaderContinueWatching": "إستئناف المشاهدة",
+    "HeaderContinueWatching": "متابعة المشاهدة",
     "HeaderCustomDlnaProfiles": "الحسابات المخصوصة",
     "HeaderDateIssued": "تاريخ الإصدار",
     "HeaderDefaultRecordingSettings": "إعدادات التسجيل الافتراضية",
@@ -226,7 +226,7 @@
     "HeaderXmlSettings": "إعدادات xml",
     "HeaderYears": "السنوات",
     "ImportFavoriteChannelsHelp": "فقط القنوات التي علّمت في المفضلة على جهاز المولف ستورد.",
-    "LabelAbortedByServerShutdown": "(تم إهماله بسبب عملية إغلاق الخادم)",
+    "LabelAbortedByServerShutdown": "تم إهماله بسبب إغلاق الخادم",
     "LabelAccessDay": "يوم الأسبوع",
     "LabelAccessEnd": "وقت النهاية",
     "LabelAccessStart": "وقت البداية",
@@ -558,7 +558,7 @@
     "OptionAllowRemoteControlOthers": "السماح بالتحكم في المستخدمين الآخرين عن بعد",
     "OptionAllowRemoteSharedDevices": "السماح بالتحكم في الأجهزة المشاركة عن بعد",
     "OptionAllowRemoteSharedDevicesHelp": "أجهزة Dlna ستعتبر مشاركة إلى أن يبدأ مستخدم ما بالتحكم بها.",
-    "OptionAllowUserToManageServer": "إسمح لهذا المستخدم بالتحكم بالخادم",
+    "OptionAllowUserToManageServer": "اسمح لهذا المستخدم بالتحكم بالخادم",
     "OptionAllowVideoPlaybackRemuxing": "تمكين تشغيل الفيديو الذي يحتاج إلى التحويل من غير تشفير",
     "OptionAllowVideoPlaybackTranscoding": "تمكين تشغيل الفيديو الذي يحتاج تشفيراً بينياً",
     "OptionAutomaticallyGroupSeries": "إدمج الحلقات الموزعة بين عدة مجلدات إلى مجلد واحد تلقائياً",
@@ -748,7 +748,7 @@
     "Genres": "التصنيفات",
     "Folders": "المجلدات",
     "Favorites": "المفضلة",
-    "Collections": "المجموعات",
+    "Collections": "مجموعات",
     "Categories": "الفئات",
     "CancelSeries": "إلغاء المسلسل",
     "CancelRecording": "إلغاء التسجيل",
@@ -770,7 +770,7 @@
     "AspectRatio": "النسبة البعدينية",
     "Ascending": "تصاعدي",
     "AsManyAsPossible": "أكبر عدد ممكن",
-    "Artists": "الفنانون",
+    "Artists": "فنانون",
     "Art": "فن",
     "Anytime": "أي وقت",
     "AnyLanguage": "أي لغة",
@@ -803,7 +803,7 @@
     "ConfirmDeleteItems": "حذف هذه العناصر سوف يحذفها من نظام الملفات ومن مكتبة الوسائط. هل ترغب حقاً فى الاستمرار؟",
     "EveryNDays": "كل {0} يوم",
     "ConfirmDeleteItem": "حذف هذا العنصر سوف يحذفه من نظام الملفات ومن مكتبة الوسائط. هل ترغب حقاً فى الاستمرار؟",
-    "DropShadow": "ظل خلفي‏",
+    "DropShadow": "الظل المنسدل",
     "LabelDropShadow": "اسقاط الظل",
     "EditSubtitles": "تعديل الترجمات",
     "EditMetadata": "تعديل البيانات التعريفية",
@@ -869,7 +869,7 @@
     "DirectStreamHelp2": "استهلاك الطاقة عن طريق البث المباشر عادةً يعتمد على ملف الصوت . فقط بث الفديو لن يشهد أي تغيير في الجودة.",
     "DirectStreamHelp1": "يَدعم جهازك تشغيل هذا النوع من المقاطع المرئية، ولكن إما ١. جهازك لا يدعم تشغيل إحدى المقاطع الصوتية التالية: (DTS، Dolby، TrueHD، إلخ)، أو، ٢. جهازك لا يدعم تشغيل هذا العدد من القنوات الصوتية. سيُنسخ المقطع المرئي إلى حاوية أخرى دون إعادة ترميزه، ولكن سيُعاد ترميز المقطع الصوتي ترميزا متناسب مع جهازك، ومن ثم سيُرسل إليك لمشاهدته.",
     "DetectingDevices": "يتم الكشف عن الأجهزة",
-    "Desktop": "سطح المكتب",
+    "Desktop": "سطح مكتب (تراثي)",
     "Descending": "تنازلي",
     "Depressed": "منخفض",
     "DeinterlaceMethodHelp": "حدد أي أسلوب تود استخدامه لفك التشابك عندما تُرمز باستخدام المعالج، أما عندما يدعم كرت الشاشة فك التشابك باستخدامه؛ فسيُستخدم عوضا عن هذا الأسلوب المُختار.",
@@ -886,7 +886,7 @@
     "ButtonTogglePlaylist": "قائمة التشغيل",
     "BoxSet": "طقم",
     "ButtonSplit": "تقسيم",
-    "AllowFfmpegThrottlingHelp": "عند تقدم اي تحويل كود او remux لمسافة مناسبة امام نقطة اعادة التشغيل الحالية، اوقف العملية حتى يتم استهلاك موارد أقل. هذا سوف يكون مفيد عندما يتم المشاهدة بدون التقدم بشكل مستمر. قم بإطفاء الخاصية هذه عندما تواجه مشاكل في إعادة التشغيل.",
+    "AllowFfmpegThrottlingHelp": "عندما يتقدم الترميز أو إعادة المزج بشكل كافٍ عن موضع التشغيل الحالي، أوقف العملية مؤقتًا لتقليل استهلاك الموارد. هذا مفيد جدًا عند المشاهدة دون البحث المتكرر. أوقف هذه الميزة إذا واجهت مشاكل في التشغيل.",
     "InstallingPackage": "تثبيت {0} (الإصدار {1})",
     "Images": "الصور",
     "Identify": "التعرف على الوسائط",
@@ -1488,7 +1488,7 @@
     "OptionSubstring": "سلسلة فرعية",
     "OptionForceRemoteSourceTranscoding": "فرض تحويل ترميز مصادر الوسائط البعيدة مثل البث التلفزيوني المباشر",
     "NoNewDevicesFound": "لم يتم العثور على أجهزة جديدة. لإضافة موالف جديد ، أغلق مربع الحوار هذا وأدخل معلومات الجهاز.",
-    "Mobile": "متحرك",
+    "Mobile": "نقّال (تراثي)",
     "Mixer": "خلاط",
     "MessageSyncPlayNoGroupsAvailable": "لا توجد مجموعات متاحة. ابدأ تشغيل شيء ما أولاً.",
     "MessageSyncPlayErrorNoActivePlayer": "لم يتم العثور على مشغل نشط. تم تعطيل SyncPlay.",
@@ -1500,7 +1500,7 @@
     "MediaInfoColorTransfer": "نقل اللون",
     "MediaInfoColorSpace": "مساحة اللون",
     "MediaInfoColorPrimaries": "الألوان الأساسية",
-    "LanNetworksHelp": "قائمة مفصولة بفواصل لعناوين IP أو إدخالات IP / قناع الشبكة للشبكات التي سيتم أخذها في الاعتبار على الشبكة المحلية عند فرض قيود النطاق الترددي. في حالة الضبط ، سيتم اعتبار جميع عناوين IP الأخرى على الشبكة الخارجية وستخضع لقيود النطاق الترددي الخارجي. إذا تُركت فارغة ، فسيتم اعتبار الشبكة الفرعية للخادم فقط على الشبكة المحلية.",
+    "LanNetworksHelp": "قائمة مفصولة بفواصل لعناوين IP أو مدخلات قناع الشبكة للشبكات التي ستُعتبر ضمن الشبكة المحلية عند فرض قيود النطاق الترددي والوصول عن بُعد. إذا تُركت فارغة، تُعتبر جميع عناوين RFC1918 محلية.",
     "LabelVersion": "إصدار",
     "LabelUserRemoteClientBitrateLimitHelp": "تجاوز القيمة العامة الافتراضية المعينة في إعدادات الخادم ، راجع لوحة الاعدادت> التشغيل> تدفق.",
     "LabelTVHomeScreen": "الشاشة الرئيسية الخاصة بوضع التلفزيون",
@@ -1531,7 +1531,7 @@
     "LabelLockItemToPreventChanges": "قفل هذا العنصر لمنع تغيير البيانات الوصفية مستقبلا",
     "LabelMaxDaysForNextUpHelp": "يضبط الحد الأقصى لعدد الأيام التي يجب أن يبقى فيها العرض في قائمة 'التالي' دون مشاهدته.",
     "LabelMaxDaysForNextUp": "الحد الأقصى للأيام في 'التالي'",
-    "LabelLibraryPageSizeHelp": "يضبط مقدار العناصر التي سيتم عرضها على صفحة المكتبة. قم بالتعيين إلى 0 لتعطيل الترحيل.",
+    "LabelLibraryPageSizeHelp": "حدّد عدد العناصر المعروضة على صفحة المكتبة. سيؤدي تعيين القيمة 0 إلى تعطيل الترقيم. يُرجى العلم أن تعيين هذه القيمة بـ 0 أو أي قيمة أكبر من 100 قد يؤدي إلى أخطاء وانخفاض في الأداء.",
     "LabelLibraryPageSize": "حجم صفحة المكتبة",
     "LabelKnownProxies": "الوكلاء المعروفون",
     "LabelKeepUpTo": "حافظ على ما يصل إلى",
@@ -1918,7 +1918,7 @@
     "LimitSupportedVideoResolutionHelp": "استخدم ”الدقة القصوى المسموح بها لتحويل ترميز الفيديو“ كحد أقصى لدقة الفيديو المدعومة.",
     "LogLevel.Trace": "تتبع",
     "MediaSegmentProvidersHelp": "قم بتمكين وترتيب موفري قطاع الوسائط المفضلين لديك حسب الأولوية.",
-    "MessageCancelSeriesTimerError": "حدث خطأ أثناء إلغاء المؤقت المتسلسل",
+    "MessageCancelSeriesTimerError": "حدث خطأ أثناء إلغاء المؤقت المُتسلسل",
     "MessageCancelTimerError": "حدث خطأ أثناء إلغاء المؤقت",
     "MetadataNfoLoadError": "فشل في تحميل إعدادات NFO للبيانات الوصفية",
     "MoveToTop": "انتقل إلى الأعلى",
@@ -1952,7 +1952,7 @@
     "MediaSegmentType.Recap": "ملخص",
     "MessageSplitVersionsError": "حدث خطأ أثناء تقسيم الإصدارات",
     "MoviesAndShows": "الأفلام و المسلسلات التلفزيونية",
-    "Native": "اصلي",
+    "Native": "أصلي",
     "PluginLoadRepoError": "حدث خطأ أثناء الحصول على تفاصيل المكون الإضافي من المستودع.",
     "ReadInputAtNativeFramerateHelp": "قد يؤدي تمكين هذا الخيار إلى حل بعض المشكلات، مثل توقف البث المباشر قبل الأوان.",
     "Regional": "إقليمي",
@@ -2055,5 +2055,10 @@
     "LabelBundled": "حزمة",
     "LiveTVPageLoadError": "فشل تحميل صفحة التسجيلات",
     "MessageServerMismatch": "الخادم الذي تتصل به ليس هو نفسه الخادم الذي اتصلت به سابقًا على هذا العنوان. إذا كان هذا متوقعًا، يُرجى اختيار \"الاتصال على أي حال\". وإلا، فقد يكون اتصالك أو الخادم معرضًا للخطر.",
-    "ViewAllPlugins": "عرض جميع الإضافات"
+    "ViewAllPlugins": "عرض جميع الإضافات",
+    "ButtonAddProvider": "إضافة مزود",
+    "ButtonAddTunerDevice": "إضافة جهاز موالف",
+    "ManageRepositories": "إدارة المستودعات",
+    "LabelSlideshowInterval": "مدة عرض صور",
+    "LabelSlideshowIntervalHelp": "هذا الوقت بالثواني لاستعراض كل صورة في العرض."
 }

src/strings/bg-bg.json

@@ -70,7 +70,7 @@
     "Default": "По подразбиране",
     "Delete": "Премахване",
     "DeleteMedia": "Изтриване на медията",
-    "Desktop": "Работен плот",
+    "Desktop": "Работен плот (Стар)",
     "DeviceAccessHelp": "Това се отнася само за устройства, които могат да бъдат различени и няма да попречи на достъп от мрежов четец. Филтрирането на потребителски устройства ще предотврати използването им докато не бъдат одобрени тук.",
     "Director": "Режисьор",
     "Directors": "Режисьори",
@@ -414,7 +414,7 @@
     "MetadataManager": "Управление на метаданните",
     "MinutesAfter": "минути след",
     "MinutesBefore": "минути преди",
-    "Mobile": "Мобилно устройство",
+    "Mobile": "Мобилно устройство (Старо)",
     "Monday": "Понеделник",
     "MoreFromValue": "Още от {0}",
     "MoreUsersCanBeAddedLater": "Можете да добавите още потребители от таблото.",
@@ -501,7 +501,7 @@
     "PreferEmbeddedTitlesOverFileNames": "Да се предпочитат вградените заглавия пред имената на файлове",
     "Premiere": "Премиера",
     "Premieres": "Премиери",
-    "Primary": "Главно",
+    "Primary": "Основен",
     "Producer": "Продуцент",
     "Programs": "Програми",
     "Quality": "Качество",
@@ -657,7 +657,7 @@
     "ButtonFullscreen": "На цял екран",
     "AllowOnTheFlySubtitleExtraction": "Позволи моментално извличане на поднадписи",
     "AllowHWTranscodingHelp": "Позволява на тунера да прекодира моментално. Това може да помогне за редуциране на прекодирането от сървъра.",
-    "Absolute": "Aбсолютен",
+    "Absolute": "Абсолютен",
     "LabelLanNetworks": "Локални мрежи",
     "LabelKodiMetadataSaveImagePathsHelp": "Това е препоръчително, ако наименованието на изображенията не са съобразени с изискванията на Kodi.",
     "LabelKodiMetadataSaveImagePaths": "Записване на пътеките към изображенията в NFO файловете",
@@ -973,7 +973,7 @@
     "LabelLoginDisclaimer": "Предупреждение при вход",
     "LabelLockItemToPreventChanges": "Заключи този елемент, за да предотвратиш бъдещи промени в метаданните",
     "LabelLineup": "Редица",
-    "LabelLibraryPageSizeHelp": "Настройка на броя елементи показвани в една страница от библиотеката. Въведете 0, за да забраните номерирането.",
+    "LabelLibraryPageSizeHelp": "Настройка на броя елементи показвани в една страница от библиотеката. Стойност 0 ще премахне ограничението. Имайте предвид, че стойност 0 или по-голяма от 100 може да доведе до проблеми с производителността.",
     "LabelLibraryPageSize": "Размер на страницата на библиотеката",
     "LabelKodiMetadataUser": "Запази данните за активността на потребителя в файл тип NFO за",
     "LabelKodiMetadataEnablePathSubstitutionHelp": "Активирай подмяната на пътя за изображения, използвайки конфигурираните настройки за подмяна на сървъра.",
@@ -1117,7 +1117,7 @@
     "LiveBroadcasts": "Предавания на живо",
     "LeaveBlankToNotSetAPassword": "Можете да оставите това поле празно и да не задавате парола.",
     "LearnHowYouCanContribute": "Научете как можете да допринесете.",
-    "LanNetworksHelp": "Списък разделен със запетая съдържащ ИП адреси или записи за ИП/мрежова маски отнасящи се за мрежи ,които ще се считат за локални ,когато се налагат ограничения в честотната лента.Ако е зададено всички други ИП адреси ще се считат за принадлежащи към външни мрежи и за тях ще важат правилата за ограничения на външни ИП -та.Ако полето е празно ще се счита ,че само подмрежата на сървъра е част от локалната мрежа.",
+    "LanNetworksHelp": "Списък, разделен със запетая, съдържащ ИП адреси или записи за ИП/мрежова маски , които ще се считат за локални, когато се налагат ограничения в трафика и отдалечения достъп. Ако полето е празно ще се счита, че всички RFC1918 адреси са локални.",
     "LabelffmpegPathHelp": "Пътят към FFmpeg или папката, съдържаща FFmpeg.",
     "LabelffmpegPath": "Път към FFmpeg",
     "LabelZipCode": "Пощенски код",
@@ -2050,5 +2050,9 @@
     "LabelTileHeight": "Височина на плочката",
     "LabelDirectStreamingInfo": "Информация за директно стриймване",
     "Clip": "Клип",
-    "LabelTileWidthHelp": "Максимален брой изображения в плочка по хоризонтала."
+    "LabelTileWidthHelp": "Максимален брой изображения в плочка по хоризонтала.",
+    "ButtonAddProvider": "Добави Източник",
+    "ButtonAddTunerDevice": "Добави тунер",
+    "LabelSlideshowInterval": "Интервал слайдшоу",
+    "LabelSlideshowIntervalHelp": "Времето (в секунди) за което всяка картина се показва в слайдшоуто."
 }

src/strings/bn_BD.json

@@ -13,7 +13,7 @@
     "Album": "অ্যালবাম",
     "AirDate": "উন্মুক্তের তারিখ",
     "AdditionalNotificationServices": "আরো নোটিফিকেশন সার্ভিস ইনস্টল করতে প্লাগিন ক্যাটালগে ব্রাউস করুন।",
-    "AddedOnValue": "এডেড {0}",
+    "AddedOnValue": "যোগ হয়েছে {0}",
     "AddToPlaylist": "প্লেলিস্টে অ্যাড করুন",
     "AddToPlayQueue": "প্লে কিউ তে অ্যাড করুন",
     "AddToCollection": "কালেকশন এ অ্যাড করুন",
@@ -73,7 +73,7 @@
     "AllowOnTheFlySubtitleExtraction": "অনদাফ্লাই সাবটাইটেল বেরকরার অনুমতি",
     "AllowMediaConversion": "মিডিয়া কনভার্টের অনুমতি দিন",
     "AllowHWTranscodingHelp": "টিউনার কে স্ট্রিম ট্রান্সকোড করার সুযোগ দিন। এটি সার্ভার ট্রান্সকোডিং কমাতে সাহায্য করতে পারে।",
-    "Aired": "উন্মুক্ত করন",
+    "Aired": "উন্মুক্ত হয়েছে",
     "Add": "যোগ",
     "ButtonPreviousTrack": "পূর্ববর্তী ট্র্যাক",
     "ButtonResume": "রিসিউম",
@@ -90,7 +90,7 @@
     "ConfirmDeleteItems": "এই আইটেমগুলি মোছা ফাইল এবং আপনার মিডিয়া লাইব্রেরি উভয় থেকে মুছে ফেলা হবে। আপনি কি তাই চান?",
     "ConfirmDeleteItem": "এই আইটেমটি মোছার ফলে এটি ফাইল সিস্টেম এবং আপনার মিডিয়া লাইব্রেরি উভয় থেকে মুছে যাবে। আপনি কি তাই চান?",
     "ConfirmDeleteImage": "ছবি মুছবেন?",
-    "Absolute": "গুণাতীত",
+    "Absolute": "একদম",
     "CriticRating": "ক্রিটিক রেটিং",
     "DefaultMetadataLangaugeDescription": "এগুলি আপনার প্রত্যাশিত এবং প্রতি লাইব্রেরির ভিত্তিতে কাস্টমাইজ করা যায়।",
     "ErrorDefault": "অনুরোধটি প্রক্রিয়াতে একটি সমস্যা হয়েছে । অনুগ্রহ করে একটু পরে আবার চেষ্টা করুন।",
@@ -138,11 +138,11 @@
     "Authorize": "অনুমোদন",
     "AspectRatio": "এস্পেক্ট রেসিও",
     "ApiKeysCaption": "বর্তমানে অনুমোদিত এ.পি.আই. কী গুলোর তালিকা",
-    "AllowTonemappingHelp": "টোন-ম্যাপিং একটি ভিডিওর গতিশীল পরিসরকে ছবির বিবরণ এবং রঙ বজায় রেখে HDR থেকে SDR-তে রূপান্তরিত করতে পারে। বর্তমানে শুধুমাত্র 10bit HDR10, HLG এবং DoVi ভিডিওগুলির সাথে কাজ করে৷ যার জন্য সংশ্লিষ্ট OpenCL বা CUDA প্রয়োজন।",
+    "AllowTonemappingHelp": "টোন-ম্যাপিং HDR ভিডিওকে SDR-এ রূপান্তর করে, তবে ছবির বিস্তারিত ও রঙ যতটা সম্ভব অক্ষুণ্ণ রাখে। বর্তমানে এটি শুধু 10-bit HDR10, HLG এবং DoVi ভিডিওতে কাজ করে। এটি ব্যবহারের জন্য উপযুক্ত GPGPU রানটাইম প্রয়োজন।",
     "AllowOnTheFlySubtitleExtractionHelp": "এমবেডেড সাবটাইটেল ভিডিও থেকে আলাদা করে প্লেইন টেক্সটে ক্লায়েন্টদের কাছে বিতরণ করা যেতে পারে যাতে ভিডিও ট্রান্সকোডিং এড়ানো যায়। কিন্তু কিছু সিস্টেমে এটি দীর্ঘ সময় নিতে পারে এবং এই প্রক্রিয়াটি চলাকালী্ন, ভিডিও প্লেব্যাক থেমে থাকতে পারে। ক্লায়েন্ট ডিভাইস দ্বারা সমর্থিত না হলে ভিডিও ট্রান্সকোডিংয়ের সাথে এম্বেড করা সাবটাইটেলগুলিকে বার্ন করার জন্য অপশনটি ডিসেবল করুন.",
     "AllowMediaConversionHelp": "কনভার্ট মিডিয়া ফিচারটির জন্য অনুমোদন দিন বা বাতিল করুন।",
-    "AllowFfmpegThrottlingHelp": "যখন একটি ট্রান্সকোড বা রিমুক্স বর্তমান প্লেব্যাক অবস্থান থেকে যথেষ্ট এগিয়ে যায়, তখন প্রক্রিয়াটি থামানো যাতে এটি কম প্রসেস পাওয়ার গ্রহণ করে। প্রায়ই না টেনে (Seek) দেখার সময় এটি সবচেয়ে কার্যকর। আপনি যদি প্লেব্যাক সমস্যা অনুভব করেন তবে এটি বন্ধ করুন।",
-    "AgeValue": "({0} বছর পুরান)",
+    "AllowFfmpegThrottlingHelp": "বর্তমান প্লেব্যাক অবস্থান থেকে ট্রান্সকোড বা রিমাক্স অনেকটা এগিয়ে গেলে, কম রিসোর্স ব্যবহার করার জন্য প্রক্রিয়াটি সাময়িকভাবে থামানো হবে। আপনি যদি ভিডিও চলাকালীন বেশি সামনে–পেছনে না যান, তাহলে এটি উপকারী। প্লেব্যাক সমস্যা হলে এই সেটিংটি বন্ধ রাখুন।",
+    "AgeValue": "({0} বছর পুরোনো)",
     "AddToFavorites": "পছন্দের তালিকায় যোগ করুন",
     "ErrorDeletingItem": "সার্ভার থেকে আইটেমটি মুছে ফেলার সময় একটি ত্রুটি ছিল৷ অনুগ্রহ করে পরীক্ষা করুন যে জেলিফিন মিডিয়া ফোল্ডারে লেখার অ্যাক্সেস পেয়েছে এবং আবার চেষ্টা করুন৷",
     "ErrorAddingXmlTvFile": "XMLTV ফাইল অ্যাক্সেস করার সময় একটি ত্রুটি ছিল৷ অনুগ্রহ করে নিশ্চিত করুন যে ফাইলটি বিদ্যমান এবং আবার চেষ্টা করুন৷",
@@ -326,7 +326,7 @@
     "ColorPrimaries": "কালার প্রাইমারি",
     "AllowCollectionManagement": "এই ব্যবহারকারীকে কালেকশন্স গুলি পরিচালনা করার অনুমতি দিন",
     "AllowSegmentDeletion": "অংশগুলি মুছে ফেলুন",
-    "AllowSegmentDeletionHelp": "পুরানো বিভাগগুলি ক্লায়েন্টের কাছে পাঠানোর পরে মুছে ফেলুন। এটি ডিস্কে পুরো ট্রান্সকোডেড ফাইল সংরক্ষণ করতে বাধা দেয়। এটি কেবল থ্রোটলিং সক্ষম করে কাজ করবে। আপনি যদি প্লেব্যাক সমস্যার সম্মুখীন হন তবে এটি বন্ধ করুন।",
+    "AllowSegmentDeletionHelp": "ক্লায়েন্ট ডাউনলোড করার পর পুরনো সেগমেন্টগুলো স্বয়ংক্রিয়ভাবে মুছে যাবে। এর ফলে পুরো ট্রান্সকোড করা ফাইল ডিস্কে রাখতে হয় না। প্লেব্যাক সমস্যা হলে এই সেটিংটি বন্ধ রাখুন।",
     "AirPlay": "এয়ারপ্লে",
     "AllowContentWithTagsHelp": "শুধুমাত্র নির্দিষ্ট ট্যাগগুলির মধ্যে অন্তত একটি সহ মিডিয়া দেখান।",
     "Alternate": "বিকল্প",
@@ -336,5 +336,10 @@
     "AlwaysBurnInSubtitleWhenTranscodingHelp": "ট্রান্সকোডিং ট্রিগার হলে সমস্ত সাবটাইটেল বার্ন করুন। এটি কম ট্রান্সকোডিং গতির খরচে ট্রান্সকোডিংয়ের পরে সাবটাইটেল সিঙ্ক্রোনাইজেশন নিশ্চিত করে।এটি কম ট্রান্সকোডিং গতির খরচে ট্রান্সকোডিংয়ের পরে সাবটাইটেল সিঙ্ক্রোনাইজেশন নিশ্চিত করে।",
     "AlternateDVD": "বিকল্প DVD",
     "LabelThrottleDelaySeconds": "থ্রটল পরে",
-    "AlwaysBurnInSubtitleWhenTranscoding": "ট্রান্সকোড করার সময় সর্বদা সাবটাইটেল বার্ন করুন"
+    "AlwaysBurnInSubtitleWhenTranscoding": "ট্রান্সকোড করার সময় সর্বদা সাবটাইটেল বার্ন করুন",
+    "LabelThrottleDelaySecondsHelp": "কত সেকেন্ড পর ট্রান্সকোডারের গতি সীমিত করা হবে তা নির্ধারণ করে। ক্লায়েন্টের বাফার ঠিকভাবে বজায় রাখতে এই সময়টি যথেষ্ট বড় হওয়া উচিত। থ্রটলিং চালু থাকলে তবেই এটি কার্যকর হবে।",
+    "LabelSegmentKeepSeconds": "সেগমেন্ট সংরক্ষণের সময়",
+    "LabelSegmentKeepSecondsHelp": "ক্লায়েন্ট ডাউনলোড করার পর কত সেকেন্ড পর্যন্ত সেগমেন্টগুলো সংরক্ষণ করা হবে তা নির্ধারণ করে। সেগমেন্ট মুছে ফেলার অপশন চালু থাকলেই এটি কাজ করবে।",
+    "AlwaysRemuxFlacAudioFilesHelp": "যদি আপনার ব্রাউজার কোনো ফাইল প্লে করতে না পারে বা সময় গণনায় ভুল করে, তাহলে সমস্যা সমাধানের জন্য এই সেটিংটি চালু করুন।",
+    "AlwaysRemuxMp3AudioFilesHelp": "ব্রাউজার যদি টাইমস্ট্যাম্প ভুলভাবে গণনা করে, তাহলে এটি চালু করুন।"
 }

src/strings/ca.json

@@ -16,8 +16,8 @@
     "MessageBrowsePluginCatalog": "Consulteu el nostre catàleg per a veure els complements disponibles.",
     "ButtonAddMediaLibrary": "Afegiu-hi una mediateca",
     "ButtonAddScheduledTaskTrigger": "Afegiu-hi un detonador",
-    "ButtonAddServer": "Afegiu un servidor",
-    "ButtonAddUser": "Afegeix un usuari",
+    "ButtonAddServer": "Afegiu-hi un servidor",
+    "ButtonAddUser": "Afegiu-hi un usuari",
     "ButtonArrowLeft": "Esquerra",
     "ButtonArrowRight": "Dreta",
     "ButtonBack": "Enrere",
@@ -62,7 +62,7 @@
     "DeleteImageConfirmation": "N'esteu segur, que voleu suprimir aquesta imatge?",
     "DeleteMedia": "Elimina el contingut",
     "DeleteUser": "Esborra l'usuari",
-    "Desktop": "Escriptori",
+    "Desktop": "Escriptori (antic)",
     "DeviceAccessHelp": "Això només s'aplica a dispositius que poden ser identificats i no previndrà l'accés des del navegador. Filtrant l'accés de dispositius a l'usuari previndrà l'ús de nous dispositius fins que hagin estat aprovats aquí.",
     "Disconnect": "Desconnecta",
     "DisplayMissingEpisodesWithinSeasons": "Mostra també els episodis que no tingui a les temporades",
@@ -95,7 +95,7 @@
     "HeaderActivity": "Activitat",
     "HeaderAddToCollection": "Agregació a una col·lecció",
     "HeaderAddToPlaylist": "Agregació a llista de reproducció",
-    "HeaderAddUpdateImage": "Afegeix o actualitza la imatge",
+    "HeaderAddUpdateImage": "Afegiu o actualitzeu la imatge",
     "HeaderAdditionalParts": "Parts addicionals",
     "HeaderApiKey": "Clau API",
     "HeaderApiKeys": "Claus API",
@@ -280,7 +280,7 @@
     "LabelManufacturerUrl": "URL del fabricant",
     "LabelMaxBackdropsPerItem": "Nombre màxim d'imatges de fons per element",
     "LabelMaxParentalRating": "Classificació màxima permesa de control parental",
-    "LabelMaxResumePercentage": "Percentatge màxim per a reprendre",
+    "LabelMaxResumePercentage": "Percentatge màxim per a continuar",
     "LabelMaxResumePercentageHelp": "Es considerarà que s'ha reproduït del tot si s'atura després d'aquest temps.",
     "LabelMaxScreenshotsPerItem": "Nombre màxim de captures de pantalla per ítem:",
     "LabelMaxStreamingBitrateHelp": "Especifica un bitrate màxim quan es faci streaming.",
@@ -292,9 +292,9 @@
     "LabelMetadataPathHelp": "Especifiqueu un directori personalitzat per a les imatges i metadades descarregades.",
     "LabelMethod": "Mètode",
     "LabelMinBackdropDownloadWidth": "Amplada mínima de descàrrega de la imatge de fons",
-    "LabelMinResumeDuration": "Durada mínima per a reprendre",
+    "LabelMinResumeDuration": "Durada mínima per a continuar",
     "LabelMinResumeDurationHelp": "La durada del vídeo mínima en segons que permetrà desar la ubicació de la reproducció i permetre reprendre-la.",
-    "LabelMinResumePercentage": "Percentatge mínim per a reprendre",
+    "LabelMinResumePercentage": "Percentatge mínim per a continuar",
     "LabelMinResumePercentageHelp": "Es considerarà que no s'ha reproduït si s'atura abans d'aquest temps.",
     "LabelMinScreenshotDownloadWidth": "Amplada mínima de descàrrega de la captura de pantalla:",
     "LabelModelDescription": "Descripció del model",
@@ -369,9 +369,9 @@
     "LatestFromLibrary": "Novetats a {0}",
     "LibraryAccessHelp": "Trieu les mediateques que voleu compartir amb aquest usuari. Els administradors podran editar totes les carpetes mitjançant el gestor de metadades.",
     "Live": "Directe",
-    "MarkPlayed": "Marcar com a reproduït",
-    "MarkUnplayed": "Marcar com a no reproduït",
-    "MaxParentalRatingHelp": "El contingut amb una classificació superior s'amagarà per aquest usuari.",
+    "MarkPlayed": "Marca com a reproduït",
+    "MarkUnplayed": "Marca com a no reproduït",
+    "MaxParentalRatingHelp": "El contingut amb una classificació superior s'amagarà a aquest usuari.",
     "MediaInfoAspectRatio": "Relació d'aspecte",
     "MediaInfoChannels": "Canals",
     "MediaInfoDefault": "Per defecte",
@@ -384,7 +384,7 @@
     "MessageConfirmProfileDeletion": "N'estàs segur d'eliminar aquest perfil?",
     "MessageConfirmRecordingCancellation": "N'esteu segur, que voleu cancel·lar l'enregistrament?",
     "MessageConfirmRestart": "N'esteu segur, que voleu reiniciar Jellyfin?",
-    "MessageContactAdminToResetPassword": "Si us plau, contacta amb l'administrador del sistema per a reestablir la contrasenya.",
+    "MessageContactAdminToResetPassword": "Contacteu amb l'administrador per a restablir la contrasenya.",
     "MessageDownloadQueued": "Descàrrega posada a la cua.",
     "MessageEnablingOptionLongerScans": "Habilitar aquesta opció pot ocasionar escanejos significativament més lents de la mediateca.",
     "MessageItemSaved": "Element desat.",
@@ -399,10 +399,10 @@
     "MetadataManager": "Gestor de metadades",
     "MinutesAfter": "minuts després",
     "MinutesBefore": "minuts abans",
-    "Mobile": "Mòbil",
+    "Mobile": "Mòbil (antic)",
     "Monday": "Dilluns",
     "MoreFromValue": "Més de {0}",
-    "MoreUsersCanBeAddedLater": "Es poden afegir més usuaris des del tauler de control.",
+    "MoreUsersCanBeAddedLater": "Després es poden afegir més usuaris des del tauler de control.",
     "MoveLeft": "Mou a l'esquerra",
     "MoveRight": "Mou a la dreta",
     "Mute": "Silencia",
@@ -410,7 +410,7 @@
     "Name": "Nom",
     "NewCollection": "Col·lecció nova",
     "NewCollectionHelp": "Les col·leccions us permeten crear agrupacions personalitzades de pel·lícules i altres continguts.",
-    "NewCollectionNameExample": "Exemple: Star Wars - Col·leció",
+    "NewCollectionNameExample": "Exemple: Col·lecció Guerra de les Galàxies",
     "NewEpisodes": "Episodis nous",
     "NewEpisodesOnly": "Només episodis nous",
     "MessageNoNextUpItems": "No se n'ha trobat cap. Comenceu a mirar les vostres sèries!",
@@ -722,7 +722,7 @@
     "DisplayMissingEpisodesWithinSeasonsHelp": "Això també s'ha d'activar per a les mediateques de televisió a la configuració del servidor.",
     "DisplayInOtherHomeScreenSections": "Mostra a les seccions de la pantalla d'inici, com ara a 'Contingut multimèdia afegit darrerament' i 'Continueu mirant-ho'",
     "DisplayInMyMedia": "Mostra a la pantalla principal",
-    "Display": "Pantalla",
+    "Display": "Visualització",
     "Disc": "Disc",
     "Directors": "Directors",
     "Director": "Director",
@@ -808,7 +808,7 @@
     "EveryXHours": "Cada {0} hores",
     "EveryHour": "Cada hora",
     "EnableTonemapping": "Habilita el mapatge de tons",
-    "DisableCustomCss": "Desactiveu el CSS personalitzat proporcionat pel servidor",
+    "DisableCustomCss": "Desactiva el CSS personalitzat proporcionat pel servidor",
     "Depressed": "Deprimit",
     "AudioBitDepthNotSupported": "La profunditat de bits d'àudio no és compatible",
     "VideoProfileNotSupported": "El perfil del còdec de vídeo no és compatible",
@@ -967,7 +967,7 @@
     "NoSubtitlesHelp": "Els subtítols no es carregaran per defecte. Encara es poden activar de forma manual durant la reproducció.",
     "Normal": "Normal",
     "NoNewDevicesFound": "No s'han trobat dispositius nous. Per a afegir un nou sintonitzador, tanqueu aquest avís i introduïu la informació del dispositiu de forma manual.",
-    "NoCreatedLibraries": "Sembla que encara no s'ha creat cap mediateca. {0} Us agradaria crear-ne una ara? {1}",
+    "NoCreatedLibraries": "Sembla que encara no s'ha creat cap mediateca. {0} Crear-ne una ara? {1}",
     "No": "No",
     "NextUp": "A continuació",
     "NextTrack": "Salta al següent",
@@ -977,11 +977,11 @@
     "Never": "Mai",
     "MusicVideo": "Videoclip",
     "MusicLibraryHelp": "Revisa la {0} guia de noms de música {1}.",
-    "MusicArtist": "Artista musical",
+    "MusicArtist": "Artista de la música",
     "MusicAlbum": "Àlbum de música",
     "MovieLibraryHelp": "Revisa la {0} guia de noms de pel·lícules {1}.",
     "Movie": "Pel·lícula",
-    "MoreMediaInfo": "Informació multimèdia",
+    "MoreMediaInfo": "Informació del mitjà",
     "MillisecondsUnit": "ms",
     "MetadataSettingChangeHelp": "Canviar la configuració de les metadades afectarà el nou contingut afegit a partir d'ara. Per a actualitzar el contingut existent, obriu la pantalla de detalls i feu clic al botó \"Actualitza\" o actualitzeu-lo utilitzant el \"Gestor de metadades\".",
     "Metadata": "Metadades",
@@ -1028,9 +1028,9 @@
     "MessageFileReadError": "S'ha produït un error en llegir el fitxer. Torneu-ho a provar.",
     "MessageDirectoryPickerLinuxInstruction": "Per a Linux amb Arch Linux, CentOS, Debian, Fedora, openSUSE, o Ubuntu, heu de concedir a l'usuari del servei com a mínim l'accés de lectura als llocs d'emmagatzematge.",
     "MessageDirectoryPickerBSDInstruction": "Per a BSD, caldrà tenir configurat l'emmagatzematge del \"FreeNAS Jail\" perquè permeti a Jellyfin accedir al contingut multimèdia.",
-    "MessageDeleteTaskTrigger": "N'estàs segur que vols eliminar aquest llençador de tasques?",
-    "MessageCreateAccountAt": "Crear un compte a {0}",
-    "MessageConfirmShutdown": "Segur que vols apagar el servidor?",
+    "MessageDeleteTaskTrigger": "N'esteu segur, que desitgeu eliminar aquest detonador de tasca?",
+    "MessageCreateAccountAt": "Crea un compte a {0}",
+    "MessageConfirmShutdown": "N'esteu segur, que desitgeu apagar el servidor?",
     "MessageConfirmRevokeApiKey": "N'esteu segur, de voler revocar aquesta clau d'API? La connexió de l'aplicació d'aquest servidor s'interromprà abruptament.",
     "MessageConfirmRemoveMediaLocation": "N'esteu segur, que voleu suprimir aquesta ubicació?",
     "MessageConfirmDeleteTunerDevice": "N'esteu segur, que voleu eliminar aquest dispositiu?",
@@ -1062,7 +1062,7 @@
     "MediaInfoBitrate": "Taxa de bits",
     "MediaInfoBitDepth": "Profunditat de bits",
     "MediaInfoAnamorphic": "Anamòrfic",
-    "MapChannels": "Assignar canals",
+    "MapChannels": "Assigna canals",
     "ManageRecording": "Maneig d'enregistrament",
     "ManageLibrary": "Gestió de la mediateca",
     "Logo": "Logotip",
@@ -1217,7 +1217,7 @@
     "LabelMovieCategories": "Categories de pel·lícules",
     "LabelModelUrl": "Model URL",
     "LabelMinAudiobookResumeHelp": "Es considera que els títols no s'han començat si la reproducció s'atura abans d'aquest temps.",
-    "LabelMinAudiobookResume": "Represa mínima de l'audiollibre en minuts",
+    "LabelMinAudiobookResume": "Continuació mínima de l'audiollibre en minuts",
     "LabelMetadataSaversHelp": "Trieu els formats de fitxers a fer servir en desar les metadades.",
     "LabelMetadataSavers": "Desats de metadades",
     "LabelMetadataReadersHelp": "Classifica les fonts preferides de metadades locals per ordre de prioritat. El primer fitxer trobat serà llegit.",
@@ -1234,14 +1234,14 @@
     "LabelLocalHttpServerPortNumberHelp": "El número de port TCP per al servidor HTTP.",
     "LabelLocalCustomCss": "Codi CSS personalitzat per a canvis d'estil que s'apliquen només a aquest client. És possible que vulgueu deshabilitar el servidor personalitzat de codi CSS.",
     "LabelLineup": "Programació",
-    "LabelLibraryPageSizeHelp": "Estableix la quantitat d'elements a mostrar en una pàgina de la mediateca. Es posa a 0 per tal de desactivar la paginació.",
+    "LabelLibraryPageSizeHelp": "Estableix la quantitat d'elements a mostrar en una pàgina de la mediateca. Posar-hi un valor de 0 desactivarà la paginació. Tingueu en compte que posar-hi un 0 o qualsevol valor major de 100 pot comportar errors i una reducció del rendiment.",
     "LabelLibraryPageSize": "Mida de la pàgina de la mediateca",
     "LabelLanNetworks": "Xarxes LAN",
     "LabelKodiMetadataUserHelp": "Desa les dades de visionament en fitxers NFO de manera que d'altres aplicacions les puguin fer servir.",
     "LabelKodiMetadataUser": "Desa les dades de visualització d'usuari en fitxers NFO per a",
     "LabelKodiMetadataSaveImagePathsHelp": "Això està recomanat si teniu fitxers d'imatge que no s'ajusten a les directrius de Kodi.",
     "LabelKodiMetadataEnableExtraThumbsHelp": "Quan es descarreguin imatges, es poden guardar tant a \"extrafanart\" com a \"extrathumbs\" per a assegurar la màxima compatibilitat amb les aparences de Kodi.",
-    "LabelKodiMetadataEnableExtraThumbs": "Còpia extrafanart al camp extrathumbs",
+    "LabelKodiMetadataEnableExtraThumbs": "Copia extrafanart a les vistes prèvies extres",
     "LabelKodiMetadataDateFormatHelp": "Totes les dates dins de fitxers NFO seran analitzades fent servir aquest format.",
     "LabelKnownProxies": "Servidors intermediaris coneguts",
     "LabelKidsCategories": "Categories infantils",
@@ -1315,7 +1315,7 @@
     "LabelColorPrimaries": "Colors primaris",
     "LabelChromecastVersion": "Versió de Google Cast",
     "LabelCertificatePasswordHelp": "Si el vostre certificat requereix una contrasenya, ingresseu-la aquí.",
-    "LabelCertificatePassword": "Verifica la contrasenya",
+    "LabelCertificatePassword": "Contrasenya del certificat",
     "LabelBurnSubtitles": "Incrusta subtítols",
     "LabelBlockContentWithTags": "Bloqueja elements amb etiquetes",
     "LabelBlastMessageIntervalHelp": "Determina la durada en segons entre ràfegues de missatges en directe.",
@@ -1546,7 +1546,7 @@
     "AgeValue": "({0} anys)",
     "LabelSyncPlaySettingsExtraTimeOffsetHelp": "Ajusteu manualment el temps de decalatge amb el dispositiu seleccionat per a la sincronització del temps. Ajusteu-ho amb cura.",
     "LabelSyncPlaySettingsDescription": "Canvia les preferències de SyncPlay",
-    "LabelMaxDaysForNextUp": "Màxim de dies per \"A continuació\"",
+    "LabelMaxDaysForNextUp": "Màxim de dies en \"A continuació\"",
     "LabelHardwareEncoding": "Codificació per maquinari",
     "ErrorPlayerNotFound": "No s'ha trobat cap reproductor per al fitxer multimèdia sol·licitat.",
     "SelectAll": "Selecciona-ho tot",
@@ -1631,7 +1631,7 @@
     "LabelSyncPlaySettingsSyncCorrectionHelp": "Habilita la sincronització activa de la reproducció accelerant els continguts multimèdia o cercant la posició estimada. Desactiveu-ho en cas d'intermitències.",
     "ItemDetails": "Detalls de l'element",
     "GoogleCastUnsupported": "El Google Cast no és compatible",
-    "EnableRewatchingNextUp": "Habilita tornar a mirar",
+    "EnableRewatchingNextUp": "Habilita tornar-ho a mirar",
     "EnableRewatchingNextUpHelp": "Habilita la mostra d'episodis ja vists a les seccions \"Més\".",
     "Digital": "Digital",
     "CopyFailed": "No es pot copiar",
@@ -1662,7 +1662,7 @@
     "LabelVppTonemappingBrightnessHelp": "Aplica el guany de brillantor al mapatge de tons VPP. El valor recomanat és 16.",
     "MediaInfoRpuPresentFlag": "Senyalització DV rpu predeterminada",
     "MediaInfoDvBlSignalCompatibilityId": "Identificador de compatibilitat del senyal DV bl",
-    "Unreleased": "Encara no s'ha estrenat",
+    "Unreleased": "Encara no estrenades",
     "OptionDateShowAdded": "Data d'addició de la sèrie",
     "RememberAudioSelectionsHelp": "Intenta establir la pista d'àudio amb la coincidència més semblant a l'últim vídeo.",
     "RememberSubtitleSelectionsHelp": "Intenta configurar la pista de subtítols amb la coincidència més semblant a l'últim vídeo.",
@@ -1744,9 +1744,9 @@
     "LabelBackdropScreensaverInterval": "Interval de l'estalvi de pantalla de fons",
     "LabelBackdropScreensaverIntervalHelp": "El temps en segons entre els diferents fons quan s'utilitza l'estalvi de pantalla de fons.",
     "LabelSyncPlayNoGroups": "No hi ha grups disponibles",
-    "GridView": "Vista de graella",
+    "GridView": "Disposició en graella",
     "BackdropScreensaver": "Estalvis de pantalla de fons",
-    "ListView": "Vista de llista",
+    "ListView": "Disposició en llista",
     "LogLevel.Critical": "Crític",
     "LogLevel.Information": "Informació",
     "LogLevel.Debug": "Depuració",
@@ -1758,7 +1758,7 @@
     "LabelLevel": "Nivell",
     "LabelMediaDetails": "Detalls del contingut multimèdia",
     "LogLevel.Trace": "Rastreig",
-    "SearchResultsEmpty": "Ups! No s'han trobat cap resultat per «{0}»",
+    "SearchResultsEmpty": "Ups! No s'han trobat cap resultat amb «{0}»",
     "Studio": "Estudi",
     "UnknownError": "S'ha produït un error desconegut.",
     "PleaseConfirmRepositoryInstallation": "Si us plau, pitgeu D'acord per a confirmar que heu llegit el text anterior i desitgeu continuar amb la instal·lació del repositori de complements.",
@@ -1913,8 +1913,8 @@
     "PreviewLyrics": "Previsualitza lletres",
     "Reset": "Restableix",
     "MediaInfoRotation": "Rotació",
-    "MoveToBottom": "Mou al fons",
-    "MoveToTop": "Mou al cim",
+    "MoveToBottom": "Mou a sota",
+    "MoveToTop": "Mou a dalt",
     "EditLyrics": "Edició de la lletra",
     "HeaderAddLyrics": "Afegeix lletres",
     "HeaderPreviewLyrics": "Previsualitza lletres",
@@ -1995,7 +1995,7 @@
     "CustomSubtitleStylingHelp": "L'estilització de subtítols funciona en la majoria dels dispositius, però suposa un cost addicional de rendiment.",
     "LabelSubtitleStyling": "Estilització de subtítols",
     "Native": "Nadiu",
-    "NativeSubtitleStylingHelp": "L'estilització dels subtítols no funcionarà en alguns dispositius. Tot i això, no suposa cap sobrecàrrega de rendiment.",
+    "NativeSubtitleStylingHelp": "Els subtítols estilitzats no funcionaran en alguns dispositius. Tot i això, no suposa cap sobrecàrrega de rendiment.",
     "LibraryNameInvalid": "El nom de la mediateca no pot estar buit.",
     "DeleteServerConfirmation": "N'esteu segur, que voleu eliminar aquest servidor?",
     "LabelDevice": "Dispositiu",
@@ -2012,7 +2012,7 @@
     "StreamCountExceedsLimit": "El nombre de fluxos excedeix el límit",
     "RetryWithGlobalSearch": "Reintenta amb una cerca global",
     "LabelGroupShowsIntoCollections": "Agrupa sèries en col·leccions",
-    "LabelGroupShowsIntoCollectionsHelp": "Les sèries que estiguin dins d'una col·lecció es mostraran com un únic element agrupat quan es mostrin les llistes de sèries.",
+    "LabelGroupShowsIntoCollectionsHelp": "Les sèries que estiguin dins d'una col·lecció es mostraran com a un únic element agrupat quan es mostrin les llistes de sèries.",
     "CustomSplashScreenSize": "Les imatges personalitzades haurien de ser en 16x9 de ràtio d'aspecte i a una mida mínima de 1920x1080.",
     "DeleteCustomImage": "Elimina la imatge personalitzada",
     "ImageDeleteFailed": "No s'ha pogut eliminar la imatge",
@@ -2065,5 +2065,9 @@
     "LabelAvailable": "Disponible",
     "LabelBundled": "Inclòs",
     "ManageRepositories": "Administració dels repositoris",
-    "ViewAllPlugins": "Mostra tots els connectors"
+    "ViewAllPlugins": "Mostra tots els connectors",
+    "ButtonAddProvider": "Afegiu-hi un proveïdor",
+    "ButtonAddTunerDevice": "Afegiu-hi un dispositiu sintonitzador",
+    "LabelSlideshowIntervalHelp": "El temps en segons que es mostra cada foto en les presentacions de diapositives.",
+    "LabelSlideshowInterval": "Interval de les presentacions de diapositives"
 }

src/strings/cs.json

@@ -108,7 +108,7 @@
     "DeleteMedia": "Odstranit média",
     "DeleteUser": "Odstranit uživatele",
     "DeleteUserConfirmation": "Jste si jist, že chcete smazat tohoto uživatele?",
-    "Desktop": "PC",
+    "Desktop": "Počítač (původní)",
     "DeviceAccessHelp": "Platí pouze pro zařízení, která mohou být jednoznačně identifikována. Těmto zařízením nebude bráněno v přístupu. Filtrování přístupu uživatelských zařízení bude bránit v užívání nových zařízení, dokud nebudou schváleny.",
     "DirectPlaying": "Přímé přehrání",
     "DirectStreamHelp1": "Video stopa je se zařízením kompatibilní, ale audio stopa je v nekompatibilním formátu (DTS, Dolby TrueHD atp.) nebo má nekompatibilní počet kanálů. Video bude před odesláním do zařízení za běhu bezztrátově přebaleno a pouze audio bude překódováno.",
@@ -706,7 +706,7 @@
     "MetadataSettingChangeHelp": "Změna nastavení metadat bude mít vliv na obsah, který bude nově přidán v budoucnu. Chcete-li aktualizovat stávající obsah, otevřete obrazovku s podrobnostmi a klikněte na tlačítko 'Aktualizovat', nebo proveďte hromadnou aktualizaci pomocí Správce metadat.",
     "MinutesAfter": "minut po",
     "MinutesBefore": "minut předem",
-    "Mobile": "Mobilní",
+    "Mobile": "Mobilní (zastaralý)",
     "Monday": "Pondělí",
     "MoreFromValue": "Více od {0}",
     "MoreUsersCanBeAddedLater": "Další uživatele můžete přidat později na nástěnce serveru.",
@@ -2071,5 +2071,7 @@
     "ManageRepositories": "Spravovat repozitáře",
     "ViewAllPlugins": "Zobrazit všechny zásuvné moduly",
     "ButtonAddProvider": "Přidat poskytovatele",
-    "ButtonAddTunerDevice": "Přidat tunerové zařízení"
+    "ButtonAddTunerDevice": "Přidat tuner",
+    "LabelSlideshowInterval": "Interval mezi fotkami slideshow",
+    "LabelSlideshowIntervalHelp": "Doba v sekundách po jakou je zobrazena každá fotka při slideshow."
 }

src/strings/da.json

@@ -580,7 +580,7 @@
     "LabelZipCode": "Postnummer",
     "LabelffmpegPath": "FFmpeg sti",
     "LabelffmpegPathHelp": "Stien til FFmpeg applikationsfilen eller mappen indeholdende FFmpeg.",
-    "LanNetworksHelp": "Komma separeret liste over IP adresser eller netmasker til netværk der vil blive anset for at være lokale når der bliver påtvunget båndbredde restriktioner. Hvis sat vil alle andre IP adresser bliver set som eksterne og blive underlagt båndbredde restriktioner. Hvis blank, er det kun serverens subnet der bliver betragtet som et lokalt netværk.",
+    "LanNetworksHelp": "Komma separeret liste over IP adresser eller netmasker til netværk der vil blive anset for at være lokale når der bliver påtvunget båndbredde og fjernadgang restriktioner. Hvis blank, vil alle RFC1918 adresser blive set som lokale.",
     "LatestFromLibrary": "Nyligt tilføjet i {0}",
     "LibraryAccessHelp": "Vælg hvilke mediemapper der skal deles med denne bruger. Administratorer vil kunne redigere alle mapper ved hjælp af metadata-redskabet.",
     "LiveBroadcasts": "Live-udsending",
@@ -948,7 +948,7 @@
     "BoxRear": "Boks (bagside)",
     "BurnSubtitlesHelp": "Afgør om serveren skal indbrænde undertekster. Undlader du dette, så vil ydelsen forbedres. Vælg Automatisk for at brænde billedbaserede formater (VobSub, PGS, SUB, IDX) og bestemte ASS- eller SSA-undertekster.",
     "ButtonInfo": "Information",
-    "ButtonOk": "Ok",
+    "ButtonOk": "OK",
     "ButtonPause": "Pause",
     "ButtonSend": "Send",
     "ButtonStart": "Start",
@@ -967,7 +967,7 @@
     "DefaultSubtitlesHelp": "Undertekster bliver indlæst baseret på standard- og tvungne flag i de integrerede metadata. Sprogpræferencer bliver overvejet når flere valg er tilgængelige.",
     "Depressed": "Ikke Trykket",
     "Descending": "Faldene",
-    "Desktop": "Skrivebord",
+    "Desktop": "Skrivebord (Legacy)",
     "DirectPlaying": "Afspiller direkte",
     "DirectStreamHelp1": "Video strømmen er kompatibel med enheden, men har et ikke kompatibelt lyd format (DTS, TrueHD osv.) eller et forkert antal kanaler. Video stømmen vil blive genpakket tabsfrit før den streames til enheden. Kun lyd strømmen vil blive genpakket.",
     "DirectStreamHelp2": "Strømforbruget ved direkte streaming afhænger oftest af lydprofilen. Kun video er ukomprimeret.",
@@ -1102,7 +1102,7 @@
     "MessageImageTypeNotSelected": "Vælg venligst en type af billede i drop-down menuen.",
     "MessagePlayAccessRestricted": "Afspilning af dette indhold er begrænset. Kontakt venligst server administratoren for mere information.",
     "Metadata": "Metadata",
-    "Mobile": "Mobil",
+    "Mobile": "Mobil (Legacy)",
     "Next": "Næste",
     "No": "Nej",
     "NoSubtitlesHelp": "Undertekster vil ikke blive indlæst som standard. De kan slåes til manuelt under afspilning.",
@@ -1244,7 +1244,7 @@
     "LabelPlayerDimensions": "Afspillerdimensioner",
     "LabelPlayer": "Afspiller",
     "LabelPasswordResetProvider": "Udbyder til nulstilling as kodeord",
-    "LabelLibraryPageSizeHelp": "Angiv antallet af objekter, der skal vises pr. biblioteksside. Vælg 0 for at deaktivere opdeling i sider.",
+    "LabelLibraryPageSizeHelp": "Angiv antallet af objekter, der skal vises pr. biblioteksside. Vælg 0 for at deaktivere opdeling i sider. Bemærk at hvis denne sættes til 0 eller alt over 100 kan give problemer eller reduceret præstation.",
     "LabelLibraryPageSize": "Størrelse på biblioteksside",
     "LabelFolder": "Mappe",
     "LabelBaseUrl": "Basis-URL",
@@ -2067,5 +2067,9 @@
     "ManageRepositories": "Administrer arkiver",
     "ViewAllPlugins": "Vis alle plugins",
     "LabelAvailable": "Tilgængelig",
-    "LabelBundled": "Inkluderet"
+    "LabelBundled": "Inkluderet",
+    "ButtonAddProvider": "Tilføj Leverandør",
+    "ButtonAddTunerDevice": "Tilføj Tuner Enhed",
+    "LabelSlideshowInterval": "Billede Slideshow Interval",
+    "LabelSlideshowIntervalHelp": "Mængden af tid i sekunder hvert billede er vist slideshows."
 }

src/strings/de.json

@@ -774,7 +774,7 @@
     "MetadataSettingChangeHelp": "Das Verändern der Metadateneinstellungen hat nur Einfluss auf neu hinzugefügte Inhalte. Um eine Aktualisierung bereits hinzugefügter Inhalte durchzuführen, öffne bitte die Detailansicht und klicke die Aktualisieren-Schaltfläche. Die Massenaktualisierung kann im Metadaten-Manager durchgeführt werden.",
     "MinutesAfter": "Minuten nach",
     "MinutesBefore": "Minuten vor",
-    "Mobile": "Smartphone",
+    "Mobile": "Mobil (Legacy)",
     "Monday": "Montag",
     "MoreFromValue": "Mehr von {0}",
     "MoreUsersCanBeAddedLater": "Weitere Benutzer können später über das Dashboard hinzugefügt werden.",
@@ -1104,7 +1104,7 @@
     "ChangingMetadataImageSettingsNewContent": "Änderungen an Metadaten- und Artwork-Einstellungen betreffen nur der Bibliothek neu hinzugefügte Inhalte. Um diese Änderungen auf existierende Medien anzuwenden, müssen die Metadaten manuell aktualisiert werden.",
     "CopyStreamURL": "Link zum Stream kopieren",
     "CopyStreamURLSuccess": "Link erfolgreich kopiert.",
-    "Desktop": "Desktop",
+    "Desktop": "Desktop (Legacy)",
     "Download": "Download",
     "Extras": "Extras",
     "FormatValue": "Format: {0}",
@@ -1268,7 +1268,7 @@
     "Album": "Album",
     "BoxSet": "Box Set",
     "Yadif": "Noch ein Zeilenentflechtungsfilter (YADIF)",
-    "LabelLibraryPageSizeHelp": "Setzt die Anzahl der auf einer Seite angezeigten Objekte. Auf 0 setzen, um alle Elemente auf einer Seite anzuzeigen.",
+    "LabelLibraryPageSizeHelp": "Stellt die Anzahl der auf einer Bibliotheksseite anzuzeigenden Elemente ein. Auf 0 stellen, um alle Elemente auf einer Seite anzuzeigen. Bitte beachte, dass 0 oder jeder Wert über 100 zu Fehlern oder Leistungseinbußen führen kann.",
     "LabelLibraryPageSize": "Größe der Bibliotheksseiten",
     "DeinterlaceMethodHelp": "Wähle die Deinterlacing-Methode zum Transkodieren von Inhalten im Zeilensprungverfahren (Interlace). Sofern bei unterstützten Geräten Deinterlacing durch Hardwarebeschleunigung aktiviert ist, wird der Hardware-Deinterlacer anstelle dieser Einstellung verwendet.",
     "LabelDeinterlaceMethod": "Deinterlacing-Methode",
@@ -2016,7 +2016,7 @@
     "StreamCountExceedsLimit": "Die Anzahl der Streams überschreitet das Limit",
     "RetryWithGlobalSearch": "Erneuter Versuch mit einer globalen Suche",
     "CustomSplashScreenSize": "Benutzerdefinierte Bilder sollten das Seitenverhältnis 16x9 und eine Mindestgröße von 1920x1080 haben.",
-    "DeleteCustomImage": "Benutzerdefiniertes Bild gelöscht",
+    "DeleteCustomImage": "Benutzerdefiniertes Bild löschen",
     "LabelGroupShowsIntoCollectionsHelp": "Serien in einer Sammlung werden bei der Anzeige von Serienlisten als ein gruppiertes Element dargestellt.",
     "ImageDeleteFailed": "Bild konnte nicht gelöscht werden",
     "LabelGroupShowsIntoCollections": "Serien in Kollektionen gruppieren",
@@ -2069,5 +2069,9 @@
     "LabelAvailable": "Verfügbar",
     "LabelBundled": "Integriert",
     "ManageRepositories": "Repositories verwalten",
-    "ViewAllPlugins": "Alle Plugins anzeigen"
+    "ViewAllPlugins": "Alle Plugins anzeigen",
+    "ButtonAddTunerDevice": "Tuner-Gerät hinzufügen",
+    "ButtonAddProvider": "Provider hinzufügen",
+    "LabelSlideshowInterval": "Photo Diashow Intervall",
+    "LabelSlideshowIntervalHelp": "Die Zeit in Sekunden die jedes Foto in Diashows angezeigt wird."
 }

src/strings/el.json

@@ -44,7 +44,7 @@
     "MessageBrowsePluginCatalog": "Πλοηγηθείτε στον κατάλογο plugin μας για να δείτε τα διαθέσιμα plugins.",
     "BurnSubtitlesHelp": "Καθορίζει αν ο διακομιστής πρέπει να εγγράψει τους υπότιτλους. Η αποφυγή του θα βελτιώσει σημαντικά την απόδοση. Επιλέξτε Αυτόματο για να εγγράψετε μορφές βασισμένες σε εικόνες (VobSub, PGS, SUB, IDX, κ.λπ.) και ορισμένους υπότιτλους ASS / SSA.",
     "ButtonAddMediaLibrary": "Προσθήκη βιβλιοθήκης πολυμέσων",
-    "ButtonAddScheduledTaskTrigger": "Προσθήκη διακόπτη",
+    "ButtonAddScheduledTaskTrigger": "Προσθήκη εναύσματος",
     "ButtonAddServer": "Προσθήκη διακομιστή",
     "ButtonAddUser": "Προσθήκη χρήστη",
     "ButtonArrowLeft": "Αριστερά",
@@ -126,7 +126,7 @@
     "DeleteUserConfirmation": "Είστε σίγουροι ότι θέλετε να διαγράψετε αυτή τον χρήστη;",
     "Depressed": "Μειώθηκε",
     "Descending": "Φθίνουσα",
-    "Desktop": "Επιφάνεια εργασίας",
+    "Desktop": "Υπολογιστής (παλιά μέθοδος)",
     "DetectingDevices": "Ανίχνευση συσκευών",
     "DeviceAccessHelp": "Αυτό ισχύει μόνο για συσκευές που μπορούν να αναγνωριστούν με μοναδικό τρόπο και δεν θα εμποδίσουν την πρόσβαση του προγράμματος περιήγησης. Το φιλτράρισμα της πρόσβασης των συσκευών χρήστη θα αποτρέψει τη χρήση νέων συσκευών μέχρι να εγκριθούν εδώ.",
     "DirectPlaying": "Απευθείας Αναπαραγωγή",
@@ -679,7 +679,7 @@
     "MetadataSettingChangeHelp": "Η αλλαγή των ρυθμίσεων μεταδεδομένων θα επηρεάσει το νέο περιεχόμενο που θα προστίθεται από εδώ και στο εξής. Για να ανανεώσετε το υπάρχον περιεχόμενο, ανοίξτε την οθόνη λεπτομερειών και κάντε κλικ στο κουμπί ανανέωση ή εκτελέστε μαζικές ανανεώσεις χρησιμοποιώντας τον διαχειριστή μεταδεδομένων.",
     "MinutesAfter": "λεπτά μετά",
     "MinutesBefore": "λεπτά πριν",
-    "Mobile": "Κινητό",
+    "Mobile": "Κινητό (παλιά μέθοδος)",
     "Monday": "Δευτέρα",
     "MoreFromValue": "Περισσότερα από {0}",
     "MoreUsersCanBeAddedLater": "Περισσότεροι χρήστες μπορούν να προστεθούν αργότερα στον πίνακα ελέγχου.",
@@ -757,7 +757,7 @@
     "OptionHideUserFromLoginHelp": "Χρήσιμο για ιδιωτικούς ή κρυφούς λογαριασμούς διαχειριστή. Ο χρήστης θα πρέπει να συνδεθεί χειροκίνητα εισάγοντας το όνομα χρήστη και τον κωδικό πρόσβασής του.",
     "OptionImdbRating": "Βαθμολογία IMDb",
     "OptionLikes": "Συμπαθεί",
-    "OptionMax": "Μέγιστο",
+    "OptionMax": "Μεγ.",
     "OptionMissingEpisode": "Ελλειπή Επεισόδια",
     "OptionNew": "Νέο…",
     "OptionOnInterval": "Σε ένα διάστημα",
@@ -975,7 +975,7 @@
     "Yes": "Ναι",
     "Yesterday": "Εχθές",
     "LabelCancelled": "Ακυρώθηκε",
-    "LabelBindToLocalNetworkAddress": "Σύνδεση σε τοπική διεύθυνση δικτύου",
+    "LabelBindToLocalNetworkAddress": "Σύνδεση σε διεύθυνση τοπικού δικτύου",
     "LabelAuthProvider": "Πάροχος πιστοποίησης",
     "LabelAllowedRemoteAddressesMode": "Λειτουργία Φίλτρου Εξωτερικών Διευθύνσεων IP",
     "LabelAllowedRemoteAddresses": "Φίλτρο Εξωτερικών Διευθύνσεων IP",
@@ -1013,7 +1013,7 @@
     "EnablePhotosHelp": "Οι εικόνες θα ανιχνεύονται και θα εμφανίζονται μαζί με τα άλλα αρχεία μέσων.",
     "EnablePhotos": "Εμφάνιση των φωτογραφιών",
     "DrmChannelsNotImported": "Κανάλια με DRM δεν θα εισαχθούν.",
-    "ButtonOk": "Οκ",
+    "ButtonOk": "ΟΚ",
     "ButtonNetwork": "Δίκτυο",
     "AllowOnTheFlySubtitleExtractionHelp": "Οι ενσωματωμένοι υπότιτλοι μπορούν να εξαχθούν από βίντεο και να σταλούν στους διαμεσολαβητές αναπαραγωγής σε απλό κείμενο για να αποφευχθούν μετατροπές βίντεο. Σε μερικά συστήματα αυτό μπορεί να πάρει πολύ ώρα και να κάνει το βίντεο να κολλάει κατά την διάρκεια της εξαγωγής. Απενεργοποιήστε το για να έχετε ενσωματωμένους υπότιτλους πάνω στο βίντεο όταν αυτοί δεν υποστηρίζονται από την συσκευή.",
     "AllowOnTheFlySubtitleExtraction": "Να επιτρέπεται η εξαγωγή υποτίτλων σε πραγματικό χρόνο",
@@ -1201,7 +1201,7 @@
     "LabelAutomaticallyAddToCollection": "Αυτόματη προσθήκη στη συλλογή",
     "LabelAutomaticallyAddToCollectionHelp": "Όταν το λιγότερο 2 ταινίες έχουν το ίδιο όνομα συλλογής, θα προστεθούν αυτόματα στη συλλογή.",
     "DirectPlayError": "Υπήρξε ένα σφάλμα ξεκινώντας την απευθείας αναπαραγωγή",
-    "LabelAirsBeforeEpisode": "Προβάλλεται μετά το επεισόδιο",
+    "LabelAirsBeforeEpisode": "Προβάλλεται πριν το επεισόδιο",
     "LabelAudioCodec": "Κωδικοποιητής ήχου",
     "LabelCreateHttpPortMap": "Ενεργοποίηση αυτόματης χαρτογράφησης πόρτας για κίνηση HTTP όπως και HTTPS.",
     "LabelAudioSampleRate": "Ρυθμός δειγματοληψίας ήχου",
@@ -1269,7 +1269,7 @@
     "LabelMaxMuxingQueueSize": "Μέγιστο μέγεθος ουράς πολυπλεξίας",
     "LabelKnownProxies": "Γνωστά proxies",
     "LabelKodiMetadataEnableExtraThumbs": "Αντιγράψτε το extrafanart στο πεδίο extrathumbs",
-    "LabelLibraryPageSizeHelp": "Ορίστε τον αριθμό των στοιχείων που θα εμφανίζονται σε μια σελίδα βιβλιοθήκης. Ορίστε στο 0 για να απενεργοποιήσετε τη σελιδοποίηση.",
+    "LabelLibraryPageSizeHelp": "Ορίστε τον αριθμό των στοιχείων που θα εμφανίζονται σε μια σελίδα βιβλιοθήκης. Ο ορισμός τιμής 0 θα απενεργοποιήσει την σελιδοποίηση. Παρακαλώ λάβετε υπόψη ότι ο ορισμός αυτής της τιμής σε 0 ή σε οποιαδήποτε τιμή μεγαλύτερη από 100 ενδέχεται να οδηγήσει σε σφάλματα και μειωμένη απόδοση.",
     "LabelMetadataDownloadersHelp": "Ενεργοποιήστε και ταξινομήστε τα προγράμματα λήψης μεταδεδομένων που προτιμάτε με σειρά προτεραιότητας. Τα προγράμματα λήψης χαμηλότερης προτεραιότητας θα χρησιμοποιηθούν μόνο για τη συμπλήρωση πληροφοριών που λείπουν.",
     "LabelMaxDaysForNextUpHelp": "Ορίστε τον μέγιστο αριθμό ημερών που μια σειρά θα πρέπει να παραμείνει στη λίστα \"Επόμενα\" χωρίς να την παρακολουθήσετε.",
     "LabelIconMaxResHelp": "Μέγιστη ανάλυση εικονιδίων που εκτίθενται μέσω της ιδιότητας 'upnp:icon'.",
@@ -1313,7 +1313,7 @@
     "LabelUserAgent": "Πράκτορας χρήστη",
     "LabelXDlnaCap": "Αναγνωριστικό ικανότητας συσκευής",
     "LabelXDlnaDoc": "Αναγνωριστικό κατηγορίας συσκευής",
-    "LanNetworksHelp": "Λίστα διευθύνσεων IP διαχωρισμένη με κόμματα ή καταχωρίσεις IP/μάσκας δικτύου για δίκτυα που θα ληφθούν υπόψη στο τοπικό δίκτυο κατά την επιβολή περιορισμών εύρους ζώνης. Εάν οριστούν, όλες οι άλλες διευθύνσεις IP θα θεωρούνται ότι βρίσκονται στο εξωτερικό δίκτυο και θα υπόκεινται στους περιορισμούς εξωτερικού εύρους ζώνης. Εάν μείνει κενό, μόνο το υποδίκτυο του διακομιστή θεωρείται ότι βρίσκεται στο τοπικό δίκτυο.",
+    "LanNetworksHelp": "Λίστα διευθύνσεων IP ή καταχωρίσεων IP/μάσκας δικτύου, διαχωρισμένων με κόμμα, για δίκτυα που θα ληφθούν υπόψη ως τοπικό δίκτυο κατά την επιβολή περιορισμών εύρους ζώνης και απομακρυσμένης πρόσβασης. Εάν μείνει κενό, όλες οι διευθύνσεις RFC1918 θεωρούνται τοπικές.",
     "MediaInfoColorPrimaries": "Πρωταρχικά χρώματα",
     "LabelUserLoginAttemptsBeforeLockout": "Αποτυχημένες προσπάθειες σύνδεσης πριν κλειδωθεί ο χρήστης",
     "LabelUserMaxActiveSessions": "Μέγιστος αριθμός ταυτόχρονων περιόδων σύνδεσης χρήστη",
@@ -2059,5 +2059,9 @@
     "PriorityBelowNormal": "Κάτω από το κανονικό",
     "HeaderServerMismatch": "Αναντιστοιχία server",
     "MessageServerMismatch": "Ο server στον οποίο συνδέεστε δεν είναι ο ίδιος server στον οποίο συνδεθήκατε προηγουμένως σε αυτήν τη διεύθυνση. Εάν αυτό είναι αναμενόμενο, επιλέξτε \"Σύνδεση ούτως ή άλλως\". Διαφορετικά, η σύνδεσή σας ή ο server ενδέχεται να έχουν παραβιαστεί.",
-    "LabelTileWidth": "Πλάτος πλακιδίου"
+    "LabelTileWidth": "Πλάτος πλακιδίου",
+    "ButtonAddProvider": "Προσθήκη παρόχου",
+    "ButtonAddTunerDevice": "Προσθήκη συσκευής δέκτη",
+    "LabelSlideshowIntervalHelp": "Ο χρόνος σε δευτερόλεπτα που κάθε φωτογραφία εμφανίζεται σε παρουσιάσεις διαφανειών.",
+    "LabelSlideshowInterval": "Διάστημα παρουσίασης φωτογραφιών"
 }