Merge branch 'master' into libbitsub

.github/workflows/__codeql.yml

@@ -20,21 +20,21 @@ jobs:
 
     steps:
       - name: Checkout repository ⬇️
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           ref: ${{ inputs.commit }}
           show-progress: false
 
       - name: Initialize CodeQL 🛠️
-        uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        uses: github/codeql-action/init@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
         with:
           queries: security-and-quality
           languages: ${{ matrix.language }}
 
       - name: Autobuild 📦
-        uses: github/codeql-action/autobuild@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        uses: github/codeql-action/autobuild@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
 
       - name: Perform CodeQL Analysis 🧪
-        uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
+        uses: github/codeql-action/analyze@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
         with:
           category: '/language:${{matrix.language}}'

.github/workflows/__deploy.yml

@@ -62,7 +62,7 @@ jobs:
           github-token: ${{ github.token }}
 
       - name: Publish to Cloudflare Pages 📃
-        uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3.15.0
+        uses: cloudflare/wrangler-action@ebbaa1584979971c8614a24965b4405ff95890e0 # v4.0.0
         id: cf
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/__package.yml

@@ -14,12 +14,12 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           ref: ${{ inputs.commit || github.sha }}
 
       - name: Setup node environment
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@249970729cb0ef3589644e2896645e5dc5ba9c38 # v6.5.0
         with:
           node-version-file: .nvmrc
           cache: npm

.github/workflows/__quality_checks.yml

@@ -14,13 +14,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           ref: ${{ inputs.commit }}
           show-progress: false
 
       - name: Scan
-        uses: actions/dependency-review-action@2031cfc080254a8a887f58cffee85186f0e49e48 # v4.9.0
+        uses: actions/dependency-review-action@a1d282b36b6f3519aa1f3fc636f609c47dddb294 # v5.0.0
         with:
           ## Workaround from https://github.com/actions/dependency-review-action/issues/456
           ## TODO: Remove when necessary
@@ -42,13 +42,13 @@ jobs:
 
     steps:
       - name: Checkout ⬇️
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           ref: ${{ inputs.commit }}
           show-progress: false
 
       - name: Setup node environment ⚙️
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@249970729cb0ef3589644e2896645e5dc5ba9c38 # v6.5.0
         with:
           node-version-file: .nvmrc
           cache: npm

.github/workflows/pull_request.yml

@@ -46,12 +46,12 @@ jobs:
     
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           ref: ${{ github.event.pull_request.head.sha }}
     
       - name: Setup node environment
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@249970729cb0ef3589644e2896645e5dc5ba9c38 # v6.5.0
         with:
           node-version-file: .nvmrc
           cache: npm

.github/workflows/schedule.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ contains(github.repository, 'jellyfin/') }}
     steps:
-      - uses: actions/stale@eb5cf3af3ac0a1aa4c9c45633dd1ae542a27a899 # v10.3.0
+      - uses: actions/stale@1e223db275d687790206a7acac4d1a11bd6fe629 # v10.4.0
         with:
           repo-token: ${{ secrets.JF_BOT_TOKEN }}
           operations-per-run: 75

CONTRIBUTORS.md

@@ -108,6 +108,7 @@
 - [lmaotrigine](https://github.com/lmaotrigine)
 - [bjorntp](https://github.com/bjorntp)
 - [austinhardaway](https://github.com/austinhardaway)
+- [Alex Dickens](https://github.com/alex-dicko)
 - [shindouj](https://github.com/shindouj)
 
 ## Emby Contributors

package.json

@@ -10,7 +10,7 @@
     "@babel/preset-env": "7.29.7",
     "@babel/preset-react": "7.29.7",
     "@eslint-community/eslint-plugin-eslint-comments": "4.7.2",
-    "@eslint/js": "9.39.4",
+    "@eslint/js": "9.39.5",
     "@stylistic/eslint-plugin": "4.4.1",
     "@stylistic/stylelint-plugin": "3.1.3",
     "@types/dompurify": "3.0.5",
@@ -22,12 +22,12 @@
     "@types/react-dom": "18.3.7",
     "@types/react-lazy-load-image-component": "1.6.5",
     "@types/sortablejs": "1.15.9",
-    "@typescript-eslint/parser": "8.62.0",
+    "@typescript-eslint/parser": "8.65.0",
     "@uupaa/dynamic-import-polyfill": "1.0.2",
-    "@vitest/coverage-v8": "3.2.6",
+    "@vitest/coverage-v8": "3.2.7",
-    "autoprefixer": "10.5.2",
+    "autoprefixer": "10.5.4",
     "babel-loader": "10.1.1",
-    "caniuse-lite": "1.0.30001799",
+    "caniuse-lite": "1.0.30001806",
     "clean-webpack-plugin": "4.0.0",
     "confusing-browser-globals": "1.0.11",
     "copy-webpack-plugin": "14.0.0",
@@ -35,7 +35,7 @@
     "css-loader": "7.1.4",
     "cssnano": "7.1.9",
     "es-check": "9.6.4",
-    "eslint": "9.39.4",
+    "eslint": "9.39.5",
     "eslint-plugin-compat": "6.2.1",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
@@ -47,14 +47,14 @@
     "fork-ts-checker-webpack-plugin": "9.1.0",
     "globals": "17.7.0",
     "html-loader": "5.1.0",
-    "html-webpack-plugin": "5.6.7",
+    "html-webpack-plugin": "5.6.8",
     "jsdom": "29.1.1",
     "mini-css-extract-plugin": "2.10.2",
-    "postcss": "8.5.15",
+    "postcss": "8.5.23",
     "postcss-loader": "8.2.1",
     "postcss-preset-env": "10.6.1",
     "postcss-scss": "4.0.9",
-    "sass": "1.101.0",
+    "sass": "1.102.0",
     "sass-loader": "16.0.8",
     "source-map-loader": "5.0.0",
     "speed-measure-webpack-plugin": "1.6.0",
@@ -66,35 +66,35 @@
     "stylelint-scss": "6.14.0",
     "ts-loader": "9.6.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.62.0",
+    "typescript-eslint": "8.65.0",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "3.2.6",
+    "vitest": "3.2.7",
-    "webpack": "5.107.2",
+    "webpack": "5.109.0",
-    "webpack-bundle-analyzer": "5.3.0",
+    "webpack-bundle-analyzer": "5.3.1",
-    "webpack-cli": "7.0.3",
+    "webpack-cli": "7.2.1",
-    "webpack-dev-server": "5.2.5",
+    "webpack-dev-server": "5.2.6",
     "webpack-merge": "6.0.1",
     "worker-loader": "3.0.8"
   },
   "dependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
-    "@fontsource/noto-sans": "5.2.10",
+    "@fontsource/noto-sans": "5.3.0",
-    "@fontsource/noto-sans-hk": "5.2.9",
+    "@fontsource/noto-sans-hk": "5.3.0",
-    "@fontsource/noto-sans-jp": "5.2.9",
+    "@fontsource/noto-sans-jp": "5.3.0",
-    "@fontsource/noto-sans-kr": "5.2.9",
+    "@fontsource/noto-sans-kr": "5.3.0",
-    "@fontsource/noto-sans-sc": "5.2.9",
+    "@fontsource/noto-sans-sc": "5.3.0",
-    "@fontsource/noto-sans-tc": "5.2.9",
+    "@fontsource/noto-sans-tc": "5.3.0",
     "@jellyfin/libass-wasm": "4.2.4",
-    "@jellyfin/sdk": "0.0.0-unstable.202607010629",
+    "@jellyfin/sdk": "0.0.0-unstable.202607220710",
     "@jellyfin/ux-web": "1.0.0",
     "@mui/icons-material": "6.5.0",
     "@mui/material": "6.5.0",
     "@mui/x-date-pickers": "7.29.4",
     "@react-hook/resize-observer": "2.0.2",
-    "@tanstack/react-query": "5.101.1",
+    "@tanstack/react-query": "5.91.3",
-    "@tanstack/react-query-devtools": "5.101.1",
+    "@tanstack/react-query-devtools": "5.91.3",
-    "@tanstack/react-query-persist-client": "5.101.1",
+    "@tanstack/react-query-persist-client": "5.90.27",
     "abortcontroller-polyfill": "1.7.8",
     "axios": "1.18.1",
     "blurhash": "2.0.5",
@@ -111,7 +111,7 @@
     "headroom.js": "0.12.0",
     "history": "5.3.0",
     "hls.js": "1.6.16",
-    "idb-keyval": "6.2.5",
+    "idb-keyval": "6.3.0",
     "intersection-observer": "0.12.2",
     "jellyfin-apiclient": "1.11.0",
     "jquery": "3.7.1",
@@ -119,7 +119,7 @@
     "libarchive.js": "2.0.2",
     "libbitsub": "1.11.0",
     "lodash-es": "4.18.1",
-    "markdown-it": "14.2.0",
+    "markdown-it": "14.3.0",
     "material-design-icons-iconfont": "6.7.0",
     "material-react-table": "3.2.1",
     "native-promise-only": "0.8.1",

src/apps/dashboard/AppLayout.tsx

@@ -59,7 +59,6 @@ export const Component: FC = () => {
                 <StrictMode>
                     <OffsetAppBar
                         dense
-                        elevation={4}
                         sx={{
                             width: {
                                 xs: '100%',
@@ -79,6 +78,7 @@ export const Component: FC = () => {
                             buttons={
                                 <HelpButton />
                             }
+                            className='dashboard-appBar'
                         >
                             {isMetadataManager && (
                                 <ServerButton />

src/apps/dashboard/components/widgets/ServerInfoWidget.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
+import { getDisplayVersion } from '@jellyfin/sdk/lib/utils/versioning';
-import globalize from 'lib/globalize';
-import Widget from './Widget';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
@@ -9,8 +7,12 @@ import Skeleton from '@mui/material/Skeleton';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import React from 'react';
+
 import { useSystemInfo } from 'hooks/useSystemInfo';
-import { getDisplayVersion } from 'utils/versions';
+import globalize from 'lib/globalize';
+
+import Widget from './Widget';
 
 type ServerInfoWidgetProps = {
     onScanLibrariesClick?: () => void;

src/apps/dashboard/features/activity/api/useLogEntries.ts

@@ -1,17 +1,17 @@
-import type { ActivityLogApiGetLogEntriesRequest } from '@jellyfin/sdk/lib/generated-client/api/activity-log-api';
+import type { SystemApiGetLogEntriesRequest } from '@jellyfin/sdk/lib/generated-client/api/system-api';
 import type { AxiosRequestConfig } from 'axios';
 import type { Api } from '@jellyfin/sdk';
-import { getActivityLogApi } from '@jellyfin/sdk/lib/utils/api/activity-log-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import { useQuery } from '@tanstack/react-query';
 
 import { useApi } from 'hooks/useApi';
 
 const fetchLogEntries = async (
     api: Api,
-    requestParams?: ActivityLogApiGetLogEntriesRequest,
+    requestParams?: SystemApiGetLogEntriesRequest,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getActivityLogApi(api).getLogEntries(requestParams, {
+    const response = await getSystemApi(api).getLogEntries(requestParams, {
         signal: options?.signal
     });
 
@@ -19,7 +19,7 @@ const fetchLogEntries = async (
 };
 
 export const useLogEntries = (
-    requestParams: ActivityLogApiGetLogEntriesRequest
+    requestParams: SystemApiGetLogEntriesRequest
 ) => {
     const { api } = useApi();
     return useQuery({

src/apps/dashboard/features/backups/components/RestoreConfirmationDialog.tsx

@@ -26,7 +26,7 @@ const RestoreConfirmationDialog: FunctionComponent<IProps> = ({ open, onClose, o
             </DialogTitle>
 
             <DialogContent>
-                <DialogContentText>
+                <DialogContentText sx={{ whiteSpace: 'pre-line' }}>
                     {globalize.translate('MessageRestoreDisclaimer')}
                 </DialogContentText>
             </DialogContent>

src/apps/dashboard/features/devices/api/useDeleteDevice.ts

@@ -1,5 +1,5 @@
-import type { DevicesApiDeleteDeviceRequest } from '@jellyfin/sdk/lib/generated-client/api/devices-api';
+import type { DeviceApiDeleteDeviceRequest } from '@jellyfin/sdk/lib/generated-client/api/device-api';
-import { getDevicesApi } from '@jellyfin/sdk/lib/utils/api/devices-api';
+import { getDeviceApi } from '@jellyfin/sdk/lib/utils/api/device-api';
 import { useMutation } from '@tanstack/react-query';
 
 import { useApi } from 'hooks/useApi';
@@ -10,8 +10,8 @@ export const useDeleteDevice = () => {
     const { api } = useApi();
 
     return useMutation({
-        mutationFn: (params: DevicesApiDeleteDeviceRequest) => (
+        mutationFn: (params: DeviceApiDeleteDeviceRequest) => (
-            getDevicesApi(api!)
+            getDeviceApi(api!)
                 .deleteDevice(params)
         ),
         onSuccess: () => {

src/apps/dashboard/features/devices/api/useDevices.ts

@@ -1,7 +1,7 @@
-import type { DevicesApiGetDevicesRequest } from '@jellyfin/sdk/lib/generated-client/api/devices-api';
+import type { DeviceApiGetDevicesRequest } from '@jellyfin/sdk/lib/generated-client/api/device-api';
 import type { AxiosRequestConfig } from 'axios';
 import type { Api } from '@jellyfin/sdk';
-import { getDevicesApi } from '@jellyfin/sdk/lib/utils/api/devices-api';
+import { getDeviceApi } from '@jellyfin/sdk/lib/utils/api/device-api';
 import { useQuery } from '@tanstack/react-query';
 
 import { useApi } from 'hooks/useApi';
@@ -10,10 +10,10 @@ export const QUERY_KEY = 'Devices';
 
 const fetchDevices = async (
     api: Api,
-    requestParams?: DevicesApiGetDevicesRequest,
+    requestParams?: DeviceApiGetDevicesRequest,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getDevicesApi(api).getDevices(requestParams, {
+    const response = await getDeviceApi(api).getDevices(requestParams, {
         signal: options?.signal
     });
 
@@ -21,7 +21,7 @@ const fetchDevices = async (
 };
 
 export const useDevices = (
-    requestParams: DevicesApiGetDevicesRequest
+    requestParams: DeviceApiGetDevicesRequest
 ) => {
     const { api } = useApi();
     return useQuery({

src/apps/dashboard/features/devices/api/useUpdateDevice.ts

@@ -1,5 +1,5 @@
-import type { DevicesApiUpdateDeviceOptionsRequest } from '@jellyfin/sdk/lib/generated-client/api/devices-api';
+import type { DeviceApiUpdateDeviceOptionsRequest } from '@jellyfin/sdk/lib/generated-client/api/device-api';
-import { getDevicesApi } from '@jellyfin/sdk/lib/utils/api/devices-api';
+import { getDeviceApi } from '@jellyfin/sdk/lib/utils/api/device-api';
 import { useMutation } from '@tanstack/react-query';
 
 import { useApi } from 'hooks/useApi';
@@ -10,8 +10,8 @@ export const useUpdateDevice = () => {
     const { api } = useApi();
 
     return useMutation({
-        mutationFn: (params: DevicesApiUpdateDeviceOptionsRequest) => (
+        mutationFn: (params: DeviceApiUpdateDeviceOptionsRequest) => (
-            getDevicesApi(api!)
+            getDeviceApi(api!)
                 .updateDeviceOptions(params)
         ),
         onSuccess: () => {

src/apps/dashboard/features/devices/components/DeviceCard.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import type { SessionInfo } from '@jellyfin/sdk/lib/generated-client/models/session-info';
+import type { SessionInfoDto } from '@jellyfin/sdk/lib/generated-client/models/session-info-dto';
 import Typography from '@mui/material/Typography';
 import Card from '@mui/material/Card';
 import CardMedia from '@mui/material/CardMedia';
@@ -27,7 +27,7 @@ import InputDialog from 'components/InputDialog';
 import { useSendMessage } from '../../sessions/api/useSendMessage';
 
 type DeviceCardProps = {
-    device: SessionInfo;
+    device: SessionInfoDto;
 };
 
 const DeviceCard = ({ device }: DeviceCardProps) => {

src/apps/dashboard/features/keys/api/useApiKeys.ts

@@ -1,5 +1,5 @@
 import { Api } from '@jellyfin/sdk';
-import { getApiKeyApi } from '@jellyfin/sdk/lib/utils/api/api-key-api';
+import { getAuthenticationApi } from '@jellyfin/sdk/lib/utils/api/authentication-api';
 import { useQuery } from '@tanstack/react-query';
 import { AxiosRequestConfig } from 'axios';
 import { useApi } from 'hooks/useApi';
@@ -7,7 +7,7 @@ import { useApi } from 'hooks/useApi';
 export const QUERY_KEY = 'ApiKeys';
 
 const fetchApiKeys = async (api: Api, options?: AxiosRequestConfig) => {
-    const response = await getApiKeyApi(api).getKeys(options);
+    const response = await getAuthenticationApi(api).getKeys(options);
 
     return response.data;
 };

src/apps/dashboard/features/keys/api/useCreateKey.ts

@@ -1,5 +1,5 @@
-import { ApiKeyApiCreateKeyRequest } from '@jellyfin/sdk/lib/generated-client/api/api-key-api';
+import { AuthenticationApiCreateKeyRequest } from '@jellyfin/sdk/lib/generated-client/api/authentication-api';
-import { getApiKeyApi } from '@jellyfin/sdk/lib/utils/api/api-key-api';
+import { getAuthenticationApi } from '@jellyfin/sdk/lib/utils/api/authentication-api';
 import { useMutation } from '@tanstack/react-query';
 import { useApi } from 'hooks/useApi';
 import { queryClient } from 'utils/query/queryClient';
@@ -9,8 +9,8 @@ export const useCreateKey = () => {
     const { api } = useApi();
 
     return useMutation({
-        mutationFn: (params: ApiKeyApiCreateKeyRequest) => (
+        mutationFn: (params: AuthenticationApiCreateKeyRequest) => (
-            getApiKeyApi(api!)
+            getAuthenticationApi(api!)
                 .createKey(params)
         ),
         onSuccess: () => {

src/apps/dashboard/features/keys/api/useRevokeKey.ts

@@ -1,5 +1,5 @@
-import type { ApiKeyApiRevokeKeyRequest } from '@jellyfin/sdk/lib/generated-client/api/api-key-api';
+import type { AuthenticationApiRevokeKeyRequest } from '@jellyfin/sdk/lib/generated-client/api/authentication-api';
-import { getApiKeyApi } from '@jellyfin/sdk/lib/utils/api/api-key-api';
+import { getAuthenticationApi } from '@jellyfin/sdk/lib/utils/api/authentication-api';
 import { useMutation } from '@tanstack/react-query';
 import { useApi } from 'hooks/useApi';
 import { queryClient } from 'utils/query/queryClient';
@@ -9,8 +9,8 @@ export const useRevokeKey = () => {
     const { api } = useApi();
 
     return useMutation({
-        mutationFn: (params: ApiKeyApiRevokeKeyRequest) => (
+        mutationFn: (params: AuthenticationApiRevokeKeyRequest) => (
-            getApiKeyApi(api!)
+            getAuthenticationApi(api!)
                 .revokeKey(params)
         ),
         onSuccess: () => {

src/apps/dashboard/features/logs/components/LogItemList.tsx

@@ -27,7 +27,12 @@ const LogItemList: FunctionComponent<LogItemProps> = ({ logs }: LogItemProps) =>
                                 secondary={getDate(log)}
                                 slotProps={{
                                     primary: {
-                                        variant: 'h3'
+                                        variant: 'h3',
+                                        sx: {
+                                            whiteSpace: 'normal',
+                                            overflowWrap: 'anywhere',
+                                            wordBreak: 'break-word'
+                                        }
                                     },
                                     secondary: {
                                         variant: 'body1'

src/apps/dashboard/features/plugins/api/useConfigurationPages.ts

@@ -1,6 +1,6 @@
 import type { Api } from '@jellyfin/sdk';
-import type { DashboardApiGetConfigurationPagesRequest } from '@jellyfin/sdk/lib/generated-client/api/dashboard-api';
+import type { PluginApiGetConfigurationPagesRequest } from '@jellyfin/sdk/lib/generated-client/api/plugin-api';
-import { getDashboardApi } from '@jellyfin/sdk/lib/utils/api/dashboard-api';
+import { getPluginApi } from '@jellyfin/sdk/lib/utils/api/plugin-api';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { AxiosRequestConfig } from 'axios';
 
@@ -10,17 +10,17 @@ import { QueryKey } from './queryKey';
 
 const fetchConfigurationPages = async (
     api: Api,
-    params?: DashboardApiGetConfigurationPagesRequest,
+    params?: PluginApiGetConfigurationPagesRequest,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getDashboardApi(api)
+    const response = await getPluginApi(api)
         .getConfigurationPages(params, options);
     return response.data;
 };
 
 const getConfigurationPagesQuery = (
     api?: Api,
-    params?: DashboardApiGetConfigurationPagesRequest
+    params?: PluginApiGetConfigurationPagesRequest
 ) => queryOptions({
     queryKey: [ QueryKey.ConfigurationPages, params?.enableInMainMenu ],
     queryFn: ({ signal }) => fetchConfigurationPages(api!, params, { signal }),
@@ -28,7 +28,7 @@ const getConfigurationPagesQuery = (
 });
 
 export const useConfigurationPages = (
-    params?: DashboardApiGetConfigurationPagesRequest
+    params?: PluginApiGetConfigurationPagesRequest
 ) => {
     const { api } = useApi();
     return useQuery(getConfigurationPagesQuery(api, params));

src/apps/dashboard/features/plugins/api/useDisablePlugin.ts

@@ -1,5 +1,5 @@
-import type { PluginsApiDisablePluginRequest } from '@jellyfin/sdk/lib/generated-client/api/plugins-api';
+import type { PluginApiDisablePluginRequest } from '@jellyfin/sdk/lib/generated-client/api/plugin-api';
-import { getPluginsApi } from '@jellyfin/sdk/lib/utils/api/plugins-api';
+import { getPluginApi } from '@jellyfin/sdk/lib/utils/api/plugin-api';
 import { useMutation } from '@tanstack/react-query';
 
 import { useApi } from 'hooks/useApi';
@@ -10,8 +10,8 @@ import { QueryKey } from './queryKey';
 export const useDisablePlugin = () => {
     const { api } = useApi();
     return useMutation({
-        mutationFn: (params: PluginsApiDisablePluginRequest) => (
+        mutationFn: (params: PluginApiDisablePluginRequest) => (
-            getPluginsApi(api!)
+            getPluginApi(api!)
                 .disablePlugin(params)
         ),
         onSuccess: () => {

src/apps/dashboard/features/plugins/api/useEnablePlugin.ts

@@ -1,5 +1,5 @@
-import type { PluginsApiEnablePluginRequest } from '@jellyfin/sdk/lib/generated-client/api/plugins-api';
+import type { PluginApiEnablePluginRequest } from '@jellyfin/sdk/lib/generated-client/api/plugin-api';
-import { getPluginsApi } from '@jellyfin/sdk/lib/utils/api/plugins-api';
+import { getPluginApi } from '@jellyfin/sdk/lib/utils/api/plugin-api';
 import { useMutation } from '@tanstack/react-query';
 
 import { useApi } from 'hooks/useApi';
@@ -10,8 +10,8 @@ import { QueryKey } from './queryKey';
 export const useEnablePlugin = () => {
     const { api } = useApi();
     return useMutation({
-        mutationFn: (params: PluginsApiEnablePluginRequest) => (
+        mutationFn: (params: PluginApiEnablePluginRequest) => (
-            getPluginsApi(api!)
+            getPluginApi(api!)
                 .enablePlugin(params)
         ),
         onSuccess: () => {

src/apps/dashboard/features/plugins/api/useInstallPackage.ts

@@ -1,5 +1,5 @@
-import type { PackageApiInstallPackageRequest } from '@jellyfin/sdk/lib/generated-client/api/package-api';
+import type { PluginApiInstallPackageRequest } from '@jellyfin/sdk/lib/generated-client/api/plugin-api';
-import { getPackageApi } from '@jellyfin/sdk/lib/utils/api/package-api';
+import { getPluginApi } from '@jellyfin/sdk/lib/utils/api/plugin-api';
 import { useMutation } from '@tanstack/react-query';
 
 import { useApi } from 'hooks/useApi';
@@ -10,8 +10,8 @@ import { QueryKey } from './queryKey';
 export const useInstallPackage = () => {
     const { api } = useApi();
     return useMutation({
-        mutationFn: (params: PackageApiInstallPackageRequest) => (
+        mutationFn: (params: PluginApiInstallPackageRequest) => (
-            getPackageApi(api!)
+            getPluginApi(api!)
                 .installPackage(params)
         ),
         onSuccess: () => {

src/apps/dashboard/features/plugins/api/usePackageInfo.ts

@@ -1,7 +1,7 @@
 import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { Api } from '@jellyfin/sdk';
-import type { PackageApiGetPackageInfoRequest } from '@jellyfin/sdk/lib/generated-client/api/package-api';
+import type { PluginApiGetPackageInfoRequest } from '@jellyfin/sdk/lib/generated-client/api/plugin-api';
-import { getPackageApi } from '@jellyfin/sdk/lib/utils/api/package-api';
+import { getPluginApi } from '@jellyfin/sdk/lib/utils/api/plugin-api';
 import type { AxiosRequestConfig } from 'axios';
 
 import { useApi } from 'hooks/useApi';
@@ -12,7 +12,7 @@ import type { PackageInfo } from '@jellyfin/sdk/lib/generated-client/models/pack
 
 const fetchPackageInfo = async (
     api: Api,
-    params: PackageApiGetPackageInfoRequest,
+    params: PluginApiGetPackageInfoRequest,
     options?: AxiosRequestConfig
 ) => {
     const packagesData = queryClient.getQueryData([ QueryKey.Packages ]) as PackageInfo[];
@@ -25,14 +25,14 @@ const fetchPackageInfo = async (
         }
     }
 
-    const response = await getPackageApi(api)
+    const response = await getPluginApi(api)
         .getPackageInfo(params, options);
     return response.data;
 };
 
 const getPackageInfoQuery = (
     api: Api | undefined,
-    params?: PackageApiGetPackageInfoRequest
+    params?: PluginApiGetPackageInfoRequest
 ) => queryOptions({
     // Don't retry since requests for plugins not available in repos fail
     retry: false,
@@ -42,7 +42,7 @@ const getPackageInfoQuery = (
 });
 
 export const usePackageInfo = (
-    params?: PackageApiGetPackageInfoRequest
+    params?: PluginApiGetPackageInfoRequest
 ) => {
     const { api } = useApi();
     return useQuery(getPackageInfoQuery(api, params));

src/apps/dashboard/features/plugins/api/usePackages.ts

@@ -1,5 +1,5 @@
 import type { Api } from '@jellyfin/sdk';
-import { getPackageApi } from '@jellyfin/sdk/lib/utils/api/package-api';
+import { getPluginApi } from '@jellyfin/sdk/lib/utils/api/plugin-api';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { AxiosRequestConfig } from 'axios';
 
@@ -11,7 +11,7 @@ const fetchPackages = async (
     api: Api,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getPackageApi(api)
+    const response = await getPluginApi(api)
         .getPackages(options);
     return response.data;
 };
@@ -29,4 +29,3 @@ export const usePackages = () => {
     const { api } = useApi();
     return useQuery(getPackagesQuery(api));
 };
-

src/apps/dashboard/features/plugins/api/usePlugins.ts

@@ -1,5 +1,5 @@
 import type { Api } from '@jellyfin/sdk';
-import { getPluginsApi } from '@jellyfin/sdk/lib/utils/api/plugins-api';
+import { getPluginApi } from '@jellyfin/sdk/lib/utils/api/plugin-api';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { AxiosRequestConfig } from 'axios';
 
@@ -11,8 +11,7 @@ const fetchPlugins = async (
     api: Api,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getPluginsApi(api)
+    const response = await getPluginApi(api).getPlugins(options);
-        .getPlugins(options);
     return response.data;
 };
 
@@ -28,4 +27,3 @@ export const usePlugins = () => {
     const { api } = useApi();
     return useQuery(getPluginsQuery(api));
 };
-

src/apps/dashboard/features/plugins/api/useRepositories.ts

@@ -3,13 +3,13 @@ import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { AxiosRequestConfig } from 'axios';
 import { useApi } from 'hooks/useApi';
 import { QueryKey } from './queryKey';
-import { getPackageApi } from '@jellyfin/sdk/lib/utils/api/package-api';
+import { getPluginApi } from '@jellyfin/sdk/lib/utils/api/plugin-api';
 
 const fetchRepositories = async (
     api: Api,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getPackageApi(api)
+    const response = await getPluginApi(api)
         .getRepositories(options);
     return response.data;
 };
@@ -26,4 +26,3 @@ export const useRepositories = () => {
     const { api } = useApi();
     return useQuery(getRepositoriesQuery(api));
 };
-

src/apps/dashboard/features/plugins/api/useSetRepositories.ts

@@ -2,14 +2,14 @@ import { useMutation } from '@tanstack/react-query';
 import { useApi } from 'hooks/useApi';
 import { queryClient } from 'utils/query/queryClient';
 import { QueryKey } from './queryKey';
-import { getPackageApi } from '@jellyfin/sdk/lib/utils/api/package-api';
+import { getPluginApi } from '@jellyfin/sdk/lib/utils/api/plugin-api';
-import { PackageApiSetRepositoriesRequest } from '@jellyfin/sdk/lib/generated-client/api/package-api';
+import { PluginApiSetRepositoriesRequest } from '@jellyfin/sdk/lib/generated-client/api/plugin-api';
 
 export const useSetRepositories = () => {
     const { api } = useApi();
     return useMutation({
-        mutationFn: (params: PackageApiSetRepositoriesRequest) => (
+        mutationFn: (params: PluginApiSetRepositoriesRequest) => (
-            getPackageApi(api!)
+            getPluginApi(api!)
                 .setRepositories(params)
         ),
         onSuccess: () => {

src/apps/dashboard/features/plugins/api/useUninstallPlugin.ts

@@ -1,5 +1,5 @@
-import type { PluginsApiUninstallPluginByVersionRequest } from '@jellyfin/sdk/lib/generated-client/api/plugins-api';
+import type { PluginApiUninstallPluginByVersionRequest } from '@jellyfin/sdk/lib/generated-client/api/plugin-api';
-import { getPluginsApi } from '@jellyfin/sdk/lib/utils/api/plugins-api';
+import { getPluginApi } from '@jellyfin/sdk/lib/utils/api/plugin-api';
 import { useMutation } from '@tanstack/react-query';
 
 import { useApi } from 'hooks/useApi';
@@ -10,8 +10,8 @@ import { QueryKey } from './queryKey';
 export const useUninstallPlugin = () => {
     const { api } = useApi();
     return useMutation({
-        mutationFn: (params: PluginsApiUninstallPluginByVersionRequest) => (
+        mutationFn: (params: PluginApiUninstallPluginByVersionRequest) => (
-            getPluginsApi(api!)
+            getPluginApi(api!)
                 .uninstallPluginByVersion(params)
         ),
         onSuccess: () => {

src/apps/dashboard/features/sessions/utils/getNowPlayingName.ts

@@ -1,4 +1,4 @@
-import type { SessionInfo } from '@jellyfin/sdk/lib/generated-client/models/session-info';
+import type { SessionInfoDto } from '@jellyfin/sdk/lib/generated-client/models/session-info-dto';
 import itemHelper from 'components/itemHelper';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import globalize from 'lib/globalize';
@@ -11,7 +11,7 @@ type NowPlayingInfo = {
     image?: string;
 };
 
-const getNowPlayingName = (session: SessionInfo): NowPlayingInfo => {
+const getNowPlayingName = (session: SessionInfoDto): NowPlayingInfo => {
     let imgUrl = '';
     const nowPlayingItem = session.NowPlayingItem;
     // FIXME: It seems that, sometimes, server sends date in the future, so date-fns displays messages like 'in less than a minute'. We should fix

src/apps/dashboard/features/sessions/utils/getSessionNowPlayingStreamInfo.ts

@@ -1,9 +1,9 @@
-import type { SessionInfo } from '@jellyfin/sdk/lib/generated-client/models/session-info';
+import type { SessionInfoDto } from '@jellyfin/sdk/lib/generated-client/models/session-info-dto';
 import playmethodhelper from 'components/playback/playmethodhelper';
 import globalize from 'lib/globalize';
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
-const getSessionNowPlayingStreamInfo = (session: SessionInfo): string => {
+const getSessionNowPlayingStreamInfo = (session: SessionInfoDto): string => {
     let text = '';
     let showTranscodingInfo = false;
     const displayPlayMethod = playmethodhelper.getDisplayPlayMethod(session);

src/apps/dashboard/features/sessions/utils/getSessionNowPlayingTime.ts

@@ -1,7 +1,7 @@
-import type { SessionInfo } from '@jellyfin/sdk/lib/generated-client/models/session-info';
+import type { SessionInfoDto } from '@jellyfin/sdk/lib/generated-client/models/session-info-dto';
 import datetime from 'scripts/datetime';
 
-const getSessionNowPlayingTime = (session: SessionInfo) => {
+const getSessionNowPlayingTime = (session: SessionInfoDto) => {
     const nowPlayingItem = session.NowPlayingItem;
 
     let start = '0:00';

src/apps/dashboard/features/tasks/api/useStartTask.ts

@@ -1,5 +1,5 @@
-import { ScheduledTasksApiStartTaskRequest } from '@jellyfin/sdk/lib/generated-client/api/scheduled-tasks-api';
+import { ScheduledTaskApiStartTaskRequest } from '@jellyfin/sdk/lib/generated-client/api/scheduled-task-api';
-import { getScheduledTasksApi } from '@jellyfin/sdk/lib/utils/api/scheduled-tasks-api';
+import { getScheduledTaskApi } from '@jellyfin/sdk/lib/utils/api/scheduled-task-api';
 import { useMutation } from '@tanstack/react-query';
 import { useApi } from 'hooks/useApi';
 import { queryClient } from 'utils/query/queryClient';
@@ -9,8 +9,8 @@ export const useStartTask = () => {
     const { api } = useApi();
 
     return useMutation({
-        mutationFn: (params: ScheduledTasksApiStartTaskRequest) => (
+        mutationFn: (params: ScheduledTaskApiStartTaskRequest) => (
-            getScheduledTasksApi(api!)
+            getScheduledTaskApi(api!)
                 .startTask(params)
         ),
         onSuccess: () => {

src/apps/dashboard/features/tasks/api/useStopTask.ts

@@ -1,5 +1,5 @@
-import { ScheduledTasksApiStartTaskRequest } from '@jellyfin/sdk/lib/generated-client/api/scheduled-tasks-api';
+import { ScheduledTaskApiStartTaskRequest } from '@jellyfin/sdk/lib/generated-client/api/scheduled-task-api';
-import { getScheduledTasksApi } from '@jellyfin/sdk/lib/utils/api/scheduled-tasks-api';
+import { getScheduledTaskApi } from '@jellyfin/sdk/lib/utils/api/scheduled-task-api';
 import { useMutation } from '@tanstack/react-query';
 import { useApi } from 'hooks/useApi';
 import { queryClient } from 'utils/query/queryClient';
@@ -9,8 +9,8 @@ export const useStopTask = () => {
     const { api } = useApi();
 
     return useMutation({
-        mutationFn: (params: ScheduledTasksApiStartTaskRequest) => (
+        mutationFn: (params: ScheduledTaskApiStartTaskRequest) => (
-            getScheduledTasksApi(api!)
+            getScheduledTaskApi(api!)
                 .stopTask(params)
         ),
         onSuccess: () => {

src/apps/dashboard/features/tasks/api/useTask.ts

@@ -1,7 +1,7 @@
-import type { ScheduledTasksApiGetTaskRequest } from '@jellyfin/sdk/lib/generated-client/api/scheduled-tasks-api';
+import type { ScheduledTaskApiGetTaskRequest } from '@jellyfin/sdk/lib/generated-client/api/scheduled-task-api';
 import type { AxiosRequestConfig } from 'axios';
 import type { Api } from '@jellyfin/sdk';
-import { getScheduledTasksApi } from '@jellyfin/sdk/lib/utils/api/scheduled-tasks-api';
+import { getScheduledTaskApi } from '@jellyfin/sdk/lib/utils/api/scheduled-task-api';
 import { useQuery } from '@tanstack/react-query';
 
 import { useApi } from 'hooks/useApi';
@@ -9,15 +9,15 @@ import { QUERY_KEY } from './useTasks';
 
 const fetchTask = async (
     api: Api,
-    params: ScheduledTasksApiGetTaskRequest,
+    params: ScheduledTaskApiGetTaskRequest,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getScheduledTasksApi(api).getTask(params, options);
+    const response = await getScheduledTaskApi(api).getTask(params, options);
 
     return response.data;
 };
 
-export const useTask = (params: ScheduledTasksApiGetTaskRequest) => {
+export const useTask = (params: ScheduledTaskApiGetTaskRequest) => {
     const { api } = useApi();
 
     return useQuery({

src/apps/dashboard/features/tasks/api/useTasks.ts

@@ -1,7 +1,7 @@
-import type { ScheduledTasksApiGetTasksRequest } from '@jellyfin/sdk/lib/generated-client/api/scheduled-tasks-api';
+import type { ScheduledTaskApiGetTasksRequest } from '@jellyfin/sdk/lib/generated-client/api/scheduled-task-api';
 import type { AxiosRequestConfig } from 'axios';
 import type { Api } from '@jellyfin/sdk';
-import { getScheduledTasksApi } from '@jellyfin/sdk/lib/utils/api/scheduled-tasks-api';
+import { getScheduledTaskApi } from '@jellyfin/sdk/lib/utils/api/scheduled-task-api';
 import { useQuery } from '@tanstack/react-query';
 
 import { useApi } from 'hooks/useApi';
@@ -10,15 +10,15 @@ export const QUERY_KEY = 'Tasks';
 
 const fetchTasks = async (
     api: Api,
-    params?: ScheduledTasksApiGetTasksRequest,
+    params?: ScheduledTaskApiGetTasksRequest,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getScheduledTasksApi(api).getTasks(params, options);
+    const response = await getScheduledTaskApi(api).getTasks(params, options);
 
     return response.data;
 };
 
-export const useTasks = (params?: ScheduledTasksApiGetTasksRequest) => {
+export const useTasks = (params?: ScheduledTaskApiGetTasksRequest) => {
     const { api } = useApi();
 
     return useQuery({

src/apps/dashboard/features/tasks/api/useUpdateTask.ts

@@ -1,5 +1,5 @@
-import { ScheduledTasksApiUpdateTaskRequest } from '@jellyfin/sdk/lib/generated-client/api/scheduled-tasks-api';
+import { ScheduledTaskApiUpdateTaskRequest } from '@jellyfin/sdk/lib/generated-client/api/scheduled-task-api';
-import { getScheduledTasksApi } from '@jellyfin/sdk/lib/utils/api/scheduled-tasks-api';
+import { getScheduledTaskApi } from '@jellyfin/sdk/lib/utils/api/scheduled-task-api';
 import { useMutation } from '@tanstack/react-query';
 import { useApi } from 'hooks/useApi';
 import { queryClient } from 'utils/query/queryClient';
@@ -9,8 +9,8 @@ export const useUpdateTask = () => {
     const { api } = useApi();
 
     return useMutation({
-        mutationFn: (params: ScheduledTasksApiUpdateTaskRequest) => (
+        mutationFn: (params: ScheduledTaskApiUpdateTaskRequest) => (
-            getScheduledTasksApi(api!)
+            getScheduledTaskApi(api!)
                 .updateTask(params)
         ),
         onSuccess: (_data, params) => {

src/apps/dashboard/features/tasks/hooks/useLiveTasks.ts

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { useApi } from 'hooks/useApi';
 import { QUERY_KEY, useTasks } from '../api/useTasks';
-import type { ScheduledTasksApiGetTasksRequest } from '@jellyfin/sdk/lib/generated-client/api/scheduled-tasks-api';
+import type { ScheduledTaskApiGetTasksRequest } from '@jellyfin/sdk/lib/generated-client/api/scheduled-task-api';
 import { queryClient } from 'utils/query/queryClient';
 import { OutboundWebSocketMessageType } from '@jellyfin/sdk/lib/websocket';
 
-const useLiveTasks = (params: ScheduledTasksApiGetTasksRequest) => {
+const useLiveTasks = (params: ScheduledTaskApiGetTasksRequest) => {
     const { api } = useApi();
     const tasksQuery = useTasks(params);
 

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

@@ -1,17 +1,17 @@
 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 { getChannelApi } from '@jellyfin/sdk/lib/utils/api/channel-api';
-import { ChannelsApiGetChannelsRequest } from '@jellyfin/sdk/lib/generated-client/api/channels-api';
+import { ChannelApiGetChannelsRequest } from '@jellyfin/sdk/lib/generated-client/api/channel-api';
 import type { AxiosRequestConfig } from 'axios';
 
-const fetchChannels = async (api: Api, params?: ChannelsApiGetChannelsRequest, options?: AxiosRequestConfig) => {
+const fetchChannels = async (api: Api, params?: ChannelApiGetChannelsRequest, options?: AxiosRequestConfig) => {
-    const response = await getChannelsApi(api).getChannels(params, options);
+    const response = await getChannelApi(api).getChannels(params, options);
 
     return response.data;
 };
 
-export const useChannels = (params?: ChannelsApiGetChannelsRequest) => {
+export const useChannels = (params?: ChannelApiGetChannelsRequest) => {
     const { api } = useApi();
 
     return useQuery({

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

@@ -1,12 +1,12 @@
 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 { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-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);
+    const response = await getSystemApi(api).getNamedConfiguration({ key: 'network' }, options);
 
     return response.data as NetworkConfiguration;
 };

src/apps/dashboard/features/users/components/Profile.tsx

@@ -17,6 +17,7 @@ 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';
+import Toast from 'apps/dashboard/components/Toast';
 
 interface ProfileProps {
     userDto: UserDto;
@@ -45,6 +46,12 @@ const Profile = ({ userDto }: ProfileProps) => {
     const { data: channels, isSuccess: isChannelsSuccess } = useChannels({ supportsMediaDeletion: true });
     const { data: netConfig, isSuccess: isNetConfigSuccess } = useNetworkConfig();
 
+    const [ isErrorToastOpen, setIsErrorToastOpen ] = useState(false);
+
+    const handleToastClose = useCallback(() => {
+        setIsErrorToastOpen(false);
+    }, []);
+
     const updateUser = useUpdateUser();
     const updateUserPolicy = useUpdateUserPolicy();
 
@@ -255,6 +262,10 @@ const Profile = ({ userDto }: ProfileProps) => {
                             }
                         });
                     }
+                },
+                onError: () => {
+                    loading.hide();
+                    setIsErrorToastOpen(true);
                 }
             });
         };
@@ -306,6 +317,11 @@ const Profile = ({ userDto }: ProfileProps) => {
 
     return (
         <div ref={element}>
+            <Toast
+                open={isErrorToastOpen}
+                onClose={handleToastClose}
+                message={globalize.translate('ErrorDefault')}
+            />
             <div
                 className='lnkEditUserPreferencesContainer'
                 style={{ paddingBottom: '1em' }}
@@ -332,6 +348,9 @@ const Profile = ({ userDto }: ProfileProps) => {
                         label={globalize.translate('LabelName')}
                         required
                     />
+                    <div className='fieldDescription'>
+                        {globalize.translate('LabelUsernameAllowedCharactersHelp')}
+                    </div>
                 </div>
                 <div className='selectContainer fldSelectLoginProvider hide'>
                     <SelectElement

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

@@ -1,5 +1,5 @@
-import type { BrandingOptions } from '@jellyfin/sdk/lib/generated-client/models/branding-options';
+import type { BrandingOptionsDto } from '@jellyfin/sdk/lib/generated-client/models/branding-options-dto';
-import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
 import Delete from '@mui/icons-material/Delete';
 import Upload from '@mui/icons-material/Upload';
@@ -39,13 +39,13 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     const formData = await request.formData();
     const data = Object.fromEntries(formData);
 
-    const brandingOptions: BrandingOptions = {
+    const brandingOptions: BrandingOptionsDto = {
         CustomCss: data.CustomCss?.toString(),
         LoginDisclaimer: data.LoginDisclaimer?.toString(),
         SplashscreenEnabled: data.SplashscreenEnabled?.toString() === 'on'
     };
 
-    await getConfigurationApi(api)
+    await getSystemApi(api)
         .updateNamedConfiguration({
             key: BRANDING_CONFIG_KEY,
             body: JSON.stringify(brandingOptions)
@@ -150,7 +150,7 @@ export const Component = () => {
     const setSplashscreenEnabled = useCallback(async (_: React.ChangeEvent<HTMLInputElement>, isEnabled: boolean) => {
         setIsSplashscreenEnabled(isEnabled);
 
-        await getConfigurationApi(api!)
+        await getSystemApi(api!)
             .updateNamedConfiguration({
                 key: BRANDING_CONFIG_KEY,
                 body: JSON.stringify({

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

@@ -77,7 +77,7 @@ export const Component = () => {
     const onConfirmDelete = useCallback(() => {
         if (pendingDeleteDeviceId) {
             deleteDevice.mutate({
-                id: pendingDeleteDeviceId
+                id: [pendingDeleteDeviceId]
             }, {
                 onSettled: onCloseDeleteConfirmDialog
             });
@@ -97,7 +97,7 @@ export const Component = () => {
             Promise
                 .all(devices.map(item => {
                     if (api && item.Id && api.deviceInfo.id === item.Id) {
-                        return deleteDevice.mutateAsync({ id: item.Id });
+                        return deleteDevice.mutateAsync({ id: [item.Id] });
                     }
                     return Promise.resolve();
                 }))

src/apps/dashboard/routes/libraries/display.tsx

@@ -12,7 +12,7 @@ import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import Loading from 'components/loading/LoadingComponent';
 import Page from 'components/Page';
-import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import { QUERY_KEY as CONFIG_QUERY_KEY, useConfiguration } from 'hooks/useConfiguration';
 import { QUERY_KEY as NAMED_CONFIG_QUERY_KEY, useNamedConfiguration } from 'hooks/useNamedConfiguration';
 import globalize from 'lib/globalize';
@@ -31,7 +31,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     const formData = await request.formData();
     const data = Object.fromEntries(formData);
 
-    const { data: config } = await getConfigurationApi(api).getConfiguration();
+    const { data: config } = await getSystemApi(api).getConfiguration();
 
     const metadataConfig: MetadataConfiguration = {
         UseFileCreationTimeForDateAdded: data.DateAddedBehavior.toString() === '1'
@@ -43,10 +43,10 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     config.EnableGroupingShowsIntoCollections = data.GroupShowsIntoCollections?.toString() === 'on';
     config.EnableExternalContentInSuggestions = data.EnableExternalContentInSuggestions?.toString() === 'on';
 
-    await getConfigurationApi(api)
+    await getSystemApi(api)
         .updateConfiguration({ serverConfiguration: config });
 
-    await getConfigurationApi(api)
+    await getSystemApi(api)
         .updateNamedConfiguration({ key: CONFIG_KEY, body: metadataConfig });
 
     void queryClient.invalidateQueries({

src/apps/dashboard/routes/libraries/metadata.tsx

@@ -1,5 +1,5 @@
 import { ImageResolution } from '@jellyfin/sdk/lib/generated-client/models/image-resolution';
-import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -27,14 +27,14 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     const formData = await request.formData();
     const data = Object.fromEntries(formData);
 
-    const { data: config } = await getConfigurationApi(api).getConfiguration();
+    const { data: config } = await getSystemApi(api).getConfiguration();
 
     config.PreferredMetadataLanguage = data.Language.toString();
     config.MetadataCountryCode = data.Country.toString();
     config.DummyChapterDuration = parseInt(data.DummyChapterDuration.toString(), 10);
     config.ChapterImageResolution = data.ChapterImageResolution.toString() as ImageResolution;
 
-    await getConfigurationApi(api)
+    await getSystemApi(api)
         .updateConfiguration({ serverConfiguration: config });
 
     void queryClient.invalidateQueries({

src/apps/dashboard/routes/libraries/nfo.tsx

@@ -1,4 +1,4 @@
-import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -40,7 +40,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
         EnableExtraThumbsDuplication: data.EnableExtraThumbsDuplication?.toString() === 'on'
     };
 
-    await getConfigurationApi(api)
+    await getSystemApi(api)
         .updateNamedConfiguration({ key: CONFIG_KEY, body: newConfig });
 
     void queryClient.invalidateQueries({

src/apps/dashboard/routes/livetv/recordings.tsx

@@ -21,7 +21,7 @@ import Checkbox from '@mui/material/Checkbox';
 import FormHelperText from '@mui/material/FormHelperText';
 import Button from '@mui/material/Button';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
-import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import { queryClient } from 'utils/query/queryClient';
 import { ActionData } from 'types/actionData';
 
@@ -33,7 +33,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
     const data = await request.json() as LiveTvOptions;
 
-    await getConfigurationApi(api)
+    await getSystemApi(api)
         .updateNamedConfiguration({ key: CONFIG_KEY, body: data });
 
     void queryClient.invalidateQueries({

src/apps/dashboard/routes/logs/file.tsx

@@ -110,7 +110,16 @@ export const Component = () => {
                 ref={contentPrimaryRef}
             >
                 <Box>
-                    <Typography variant='h1'>{fileName}</Typography>
+                    <Typography
+                        variant='h1'
+                        sx={{
+                            whiteSpace: 'normal',
+                            overflowWrap: 'anywhere',
+                            wordBreak: 'break-word'
+                        }}
+                    >
+                        {fileName}
+                    </Typography>
 
                     {error && (
                         <Alert

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

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
-import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import Loading from 'components/loading/LoadingComponent';
 import Page from 'components/Page';
 import globalize from 'lib/globalize';
@@ -24,7 +24,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     if (!api) throw new Error('No Api instance available');
 
     const formData = await request.formData();
-    const { data: config } = await getConfigurationApi(api).getConfiguration();
+    const { data: config } = await getSystemApi(api).getConfiguration();
 
     const enableWarningMessage = formData.get('EnableWarningMessage');
     config.EnableSlowResponseWarning = enableWarningMessage === 'on';
@@ -34,7 +34,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
         config.SlowResponseThresholdMs = parseInt(responseTime.toString(), 10);
     }
 
-    await getConfigurationApi(api)
+    await getSystemApi(api)
         .updateConfiguration({ serverConfiguration: config });
 
     return {

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

@@ -21,7 +21,7 @@ import DirectoryBrowser from 'components/directorybrowser/directorybrowser';
 import MenuItem from '@mui/material/MenuItem';
 import Button from '@mui/material/Button';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
-import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import { QUERY_KEY as CONFIG_QUERY_KEY } from 'hooks/useConfiguration';
 import { queryClient } from 'utils/query/queryClient';
 import { encodePublishedServerUris, getPublishedServerUris, PublishedServerUris, splitString } from 'apps/dashboard/features/networking/utils';
@@ -69,7 +69,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
     newConfig.PublishedServerUriBySubnet = encodePublishedServerUris(publishedServerUri);
 
-    await getConfigurationApi(api)
+    await getSystemApi(api)
         .updateNamedConfiguration({ key: CONFIG_KEY, body: newConfig });
 
     void queryClient.invalidateQueries({

src/apps/dashboard/routes/playback/resume.tsx

@@ -12,14 +12,14 @@ import { type ActionFunctionArgs, Form, useActionData, useNavigation } from 'rea
 import { ActionData } from 'types/actionData';
 import { QUERY_KEY, useConfiguration } from 'hooks/useConfiguration';
 import Loading from 'components/loading/LoadingComponent';
-import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import { queryClient } from 'utils/query/queryClient';
 
 export const action = async ({ request }: ActionFunctionArgs) => {
     const api = ServerConnections.getApi();
     if (!api) throw new Error('No Api instance available');
 
-    const { data: config } = await getConfigurationApi(api).getConfiguration();
+    const { data: config } = await getSystemApi(api).getConfiguration();
     const formData = await request.formData();
 
     const minResumePercentage = formData.get('MinResumePercentage')?.toString();
@@ -34,7 +34,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     if (maxAudiobookResume) config.MaxAudiobookResume = parseInt(maxAudiobookResume, 10);
     if (minResumeDuration) config.MinResumeDurationSeconds = parseInt(minResumeDuration, 10);
 
-    await getConfigurationApi(api)
+    await getSystemApi(api)
         .updateConfiguration({ serverConfiguration: config });
 
     void queryClient.invalidateQueries({

src/apps/dashboard/routes/playback/streaming.tsx

@@ -9,7 +9,7 @@ import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { type ActionFunctionArgs, Form, useActionData, useNavigation } from 'react-router-dom';
-import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import { QUERY_KEY, useConfiguration } from 'hooks/useConfiguration';
 import Loading from 'components/loading/LoadingComponent';
 import { ActionData } from 'types/actionData';
@@ -19,13 +19,13 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     const api = ServerConnections.getApi();
     if (!api) throw new Error('No Api instance available');
 
-    const { data: config } = await getConfigurationApi(api).getConfiguration();
+    const { data: config } = await getSystemApi(api).getConfiguration();
     const formData = await request.formData();
 
     const bitrateLimit = formData.get('StreamingBitrateLimit')?.toString();
     config.RemoteClientBitrateLimit = Math.trunc(1e6 * parseFloat(bitrateLimit || '0'));
 
-    await getConfigurationApi(api)
+    await getSystemApi(api)
         .updateConfiguration({ serverConfiguration: config });
 
     void queryClient.invalidateQueries({

src/apps/dashboard/routes/playback/transcoding.tsx

@@ -24,7 +24,7 @@ import { QUERY_KEY, useNamedConfiguration } from 'hooks/useNamedConfiguration';
 import type { EncodingOptions } from '@jellyfin/sdk/lib/generated-client/models/encoding-options';
 import { HardwareAccelerationType } from '@jellyfin/sdk/lib/generated-client/models/hardware-acceleration-type';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
-import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import { queryClient } from 'utils/query/queryClient';
 import { ActionData } from 'types/actionData';
 import { CODECS, HEVC_REXT_DECODING_TYPES, HEVC_VP9_HW_DECODING_TYPES } from 'apps/dashboard/features/playback/constants/codecs';
@@ -38,7 +38,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
     const data = await request.json() as EncodingOptions;
 
-    await getConfigurationApi(api)
+    await getSystemApi(api)
         .updateNamedConfiguration({ key: CONFIG_KEY, body: data });
 
     void queryClient.invalidateQueries({

src/apps/dashboard/routes/playback/trickplay.tsx

@@ -17,7 +17,7 @@ import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import Alert from '@mui/material/Alert';
-import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import { TrickplayScanBehavior } from '@jellyfin/sdk/lib/generated-client/models/trickplay-scan-behavior';
 import { ProcessPriorityClass } from '@jellyfin/sdk/lib/generated-client/models/process-priority-class';
 import { ActionData } from 'types/actionData';
@@ -30,7 +30,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     const formData = await request.formData();
     const data = Object.fromEntries(formData);
 
-    const { data: config } = await getConfigurationApi(api).getConfiguration();
+    const { data: config } = await getSystemApi(api).getConfiguration();
 
     const options = config.TrickplayOptions;
     if (!options) throw new Error('Unexpected null TrickplayOptions');
@@ -48,7 +48,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     options.JpegQuality = parseInt(data.JpegQuality.toString() || '90', 10);
     options.ProcessThreads = parseInt(data.TrickplayThreads.toString() || '1', 10);
 
-    await getConfigurationApi(api)
+    await getSystemApi(api)
         .updateConfiguration({ serverConfiguration: config });
 
     void queryClient.invalidateQueries({

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

@@ -22,7 +22,7 @@ import Checkbox from '@mui/material/Checkbox';
 import Button from '@mui/material/Button';
 import Link from '@mui/material/Link';
 import DirectoryBrowser from 'components/directorybrowser/directorybrowser';
-import { getConfigurationApi } from '@jellyfin/sdk/lib/utils/api/configuration-api';
+import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import { queryClient } from 'utils/query/queryClient';
 import { ActionData } from 'types/actionData';
 
@@ -30,7 +30,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     const api = ServerConnections.getApi();
     if (!api) throw new Error('No Api instance available');
 
-    const { data: config } = await getConfigurationApi(api).getConfiguration();
+    const { data: config } = await getSystemApi(api).getConfiguration();
     const formData = await request.formData();
 
     config.ServerName = formData.get('ServerName')?.toString();
@@ -41,7 +41,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     config.LibraryScanFanoutConcurrency = parseInt(formData.get('LibraryScanFanoutConcurrency')?.toString() || '0', 10);
     config.ParallelImageEncodingLimit = parseInt(formData.get('ParallelImageEncodingLimit')?.toString() || '0', 10);
 
-    await getConfigurationApi(api)
+    await getSystemApi(api)
         .updateConfiguration({ serverConfiguration: config });
 
     void queryClient.invalidateQueries({

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

@@ -167,6 +167,10 @@ const UserNew = () => {
                             setIsErrorToastOpen(true);
                         }
                     });
+                },
+                onError: () => {
+                    loading.hide();
+                    setIsErrorToastOpen(true);
                 }
             });
         };
@@ -231,6 +235,9 @@ const UserNew = () => {
                             label={globalize.translate('LabelName')}
                             required
                         />
+                        <div className='fieldDescription'>
+                            {globalize.translate('LabelUsernameAllowedCharactersHelp')}
+                        </div>
                     </div>
                     <div className='inputContainer'>
                         <Input

src/apps/legacy/controllers/favorites.js

@@ -2,7 +2,7 @@ import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-ite
 import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
 import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields';
 import { ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models/item-sort-by';
-import { getStudiosApi } from '@jellyfin/sdk/lib/utils/api/studios-api';
+import { getStudioApi } from '@jellyfin/sdk/lib/utils/api/studio-api';
 
 import cardBuilder from 'components/cardbuilder/cardBuilder';
 import { getBackdropShape, getPortraitShape, getSquareShape } from 'components/cardbuilder/utils/shape';
@@ -208,7 +208,7 @@ function getFetchDataFn(section) {
                 return Promise.resolve(undefined);
             }
 
-            return getStudiosApi(api)
+            return getStudioApi(api)
                 .getStudios({
                     userId,
                     isFavorite: true,

src/apps/legacy/controllers/itemDetails/index.js

@@ -2,7 +2,6 @@ import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-ite
 import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields';
 import { PersonKind } from '@jellyfin/sdk/lib/generated-client/models/person-kind';
 import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
-import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
 import { intervalToDuration } from 'date-fns';
 import DOMPurify from 'dompurify';
 import escapeHtml from 'escape-html';
@@ -1088,7 +1087,7 @@ function renderMoreFromSeason(view, item, apiClient) {
             cardBuilder.buildCards(result.Items, {
                 parentContainer: section,
                 itemsContainer: itemsContainer,
-                shape: 'autooverflow',
+                shape: 'overflowBackdrop',
                 sectionTitleTagName: 'h2',
                 scalable: true,
                 showTitle: true,
@@ -2170,7 +2169,7 @@ export default function (view, params) {
             return;
         }
 
-        getUserLibraryApi(api).getItem({
+        getLibraryApi(api).getItem({
             userId: apiClient?.getCurrentUserId(),
             itemId: selectedId
         }).then(function ({ data: altItem }) {

src/apps/legacy/controllers/lyrics.js

@@ -1,4 +1,4 @@
-import { getLyricsApi } from '@jellyfin/sdk/lib/utils/api/lyrics-api';
+import { getLyricApi } from '@jellyfin/sdk/lib/utils/api/lyric-api';
 import escapeHtml from 'escape-html';
 
 import { AutoScroll } from 'apps/legacy/features/lyrics/constants/autoScroll';
@@ -137,7 +137,7 @@ export default function (view) {
             return;
         }
 
-        return getLyricsApi(api).getLyrics({ itemId })
+        return getLyricApi(api).getLyrics({ itemId })
             .then(({ data }) => {
                 if (!data.Lyrics?.length) {
                     throw new Error('No lyrics returned');

src/apps/legacy/features/libraries/api/useLatestMedia.ts

@@ -1,6 +1,6 @@
 import type { Api } from '@jellyfin/sdk/lib/api';
-import type { UserLibraryApiGetLatestMediaRequest } from '@jellyfin/sdk/lib/generated-client/api/user-library-api';
+import type { LibraryApiGetLatestMediaRequest } from '@jellyfin/sdk/lib/generated-client/api/library-api';
-import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { AxiosRequestConfig } from 'axios';
 
@@ -8,17 +8,17 @@ import { useApi } from 'hooks/useApi';
 
 const fetchLatestMedia = async (
     api: Api,
-    params?: UserLibraryApiGetLatestMediaRequest,
+    params?: LibraryApiGetLatestMediaRequest,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getUserLibraryApi(api)
+    const response = await getLibraryApi(api)
         .getLatestMedia(params, options);
     return response.data;
 };
 
 export const getLatestMediaQuery = (
     api?: Api,
-    params?: UserLibraryApiGetLatestMediaRequest
+    params?: LibraryApiGetLatestMediaRequest
 ) => queryOptions({
     queryKey: [ 'User', params?.userId, 'LatestMedia', params ],
     queryFn: ({ signal }) => fetchLatestMedia(api!, params, { signal }),
@@ -26,7 +26,7 @@ export const getLatestMediaQuery = (
 });
 
 export const useLatestMedia = (
-    params?: UserLibraryApiGetLatestMediaRequest
+    params?: LibraryApiGetLatestMediaRequest
 ) => {
     const { api, user } = useApi();
     return useQuery(getLatestMediaQuery(api, {

src/apps/legacy/features/libraries/api/useNextUp.ts

@@ -1,6 +1,6 @@
 import type { Api } from '@jellyfin/sdk/lib/api';
-import type { TvShowsApiGetNextUpRequest } from '@jellyfin/sdk/lib/generated-client/api/tv-shows-api';
+import type { ShowApiGetNextUpRequest } from '@jellyfin/sdk/lib/generated-client/api/show-api';
-import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
+import { getShowApi } from '@jellyfin/sdk/lib/utils/api/show-api';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { AxiosRequestConfig } from 'axios';
 
@@ -8,17 +8,17 @@ import { useApi } from 'hooks/useApi';
 
 const fetchNextUp = async (
     api: Api,
-    params?: TvShowsApiGetNextUpRequest,
+    params?: ShowApiGetNextUpRequest,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getTvShowsApi(api)
+    const response = await getShowApi(api)
         .getNextUp(params, options);
     return response.data;
 };
 
 export const getNextUpQuery = (
     api?: Api,
-    params?: TvShowsApiGetNextUpRequest
+    params?: ShowApiGetNextUpRequest
 ) => queryOptions({
     queryKey: [ 'User', params?.userId, 'NextUp', params ],
     queryFn: ({ signal }) => fetchNextUp(api!, params, { signal }),
@@ -26,7 +26,7 @@ export const getNextUpQuery = (
 });
 
 export const useNextUp = (
-    params?: TvShowsApiGetNextUpRequest
+    params?: ShowApiGetNextUpRequest
 ) => {
     const { api, user } = useApi();
     return useQuery(getNextUpQuery(api, {

src/apps/legacy/features/libraries/api/useResumeItems.ts

@@ -1,6 +1,6 @@
 import type { Api } from '@jellyfin/sdk/lib/api';
-import type { ItemsApiGetResumeItemsRequest } from '@jellyfin/sdk/lib/generated-client/api/items-api';
+import type { LibraryApiGetResumeItemsRequest } from '@jellyfin/sdk/lib/generated-client/api/library-api';
-import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { AxiosRequestConfig } from 'axios';
 
@@ -8,17 +8,17 @@ import { useApi } from 'hooks/useApi';
 
 const fetchResumeItems = async (
     api: Api,
-    params?: ItemsApiGetResumeItemsRequest,
+    params?: LibraryApiGetResumeItemsRequest,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getItemsApi(api)
+    const response = await getLibraryApi(api)
         .getResumeItems(params, options);
     return response.data;
 };
 
 export const getResumeItemsQuery = (
     api?: Api,
-    params?: ItemsApiGetResumeItemsRequest
+    params?: LibraryApiGetResumeItemsRequest
 ) => queryOptions({
     queryKey: [ 'User', params?.userId, 'ResumeItems', params ],
     queryFn: ({ signal }) => fetchResumeItems(api!, params, { signal }),
@@ -26,7 +26,7 @@ export const getResumeItemsQuery = (
 });
 
 export const useResumeItems = (
-    params?: ItemsApiGetResumeItemsRequest
+    params?: LibraryApiGetResumeItemsRequest
 ) => {
     const { api, user } = useApi();
     return useQuery(getResumeItemsQuery(api, {

src/apps/legacy/features/playback/utils/mediaSegmentManager.ts

@@ -1,7 +1,7 @@
 import type { Api } from '@jellyfin/sdk/lib/api';
 import type { MediaSegmentDto } from '@jellyfin/sdk/lib/generated-client/models/media-segment-dto';
 import { MediaSegmentType } from '@jellyfin/sdk/lib/generated-client/models/media-segment-type';
-import { getMediaSegmentsApi } from '@jellyfin/sdk/lib/utils/api/media-segments-api';
+import { getMediaSegmentApi } from '@jellyfin/sdk/lib/utils/api/media-segment-api';
 
 import type { PlaybackManager } from 'components/playback/playbackmanager';
 import { TICKS_PER_MILLISECOND, TICKS_PER_SECOND } from 'constants/time';
@@ -25,7 +25,7 @@ class MediaSegmentManager extends PlaybackSubscriber {
 
     private async fetchMediaSegments(api: Api, itemId: string, includeSegmentTypes: MediaSegmentType[]) {
         try {
-            const { data: mediaSegments } = await getMediaSegmentsApi(api)
+            const { data: mediaSegments } = await getMediaSegmentApi(api)
                 .getItemSegments({ itemId, includeSegmentTypes });
             this.mediaSegments = mediaSegments.Items || [];
         } catch (err) {

src/apps/legacy/features/playback/utils/playbackSubscriber.ts

@@ -21,7 +21,7 @@ export interface PlaybackSubscriber {
     onPlayerChange?(e: Event, player: PlayerPlugin, target: PlayTarget, previousPlayer: PlayerPlugin): void
     onPromptSkip?(e: Event, mediaSegment: MediaSegmentDto): void
     onPlayerError?(e: Event, error: PlayerError): void
-    onPlayerFullscreenChange?(e: Event): void
+    onPlayerFullscreenChange?(e: Event, fullscreen: boolean): void
     onPlayerItemStarted?(e: Event, item?: BaseItemDto, mediaSource?: MediaSourceInfo): void
     onPlayerItemStopped?(e: Event, info: ManagedPlayerStopInfo): void
     onPlayerMediaStreamsChange?(e: Event): void

src/apps/legacy/features/search/api/fetchItemsByType.ts

@@ -1,16 +1,16 @@
 import { Api } from '@jellyfin/sdk/lib/api';
-import { ItemsApiGetItemsRequest } from '@jellyfin/sdk/lib/generated-client/api/items-api';
+import { LibraryApiGetItemsRequest } from '@jellyfin/sdk/lib/generated-client/api/library-api';
-import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { AxiosRequestConfig } from 'axios';
 import { QUERY_OPTIONS } from '../constants/queryOptions';
 
 export const fetchItemsByType = async (
     api: Api,
     userId?: string,
-    params?: ItemsApiGetItemsRequest,
+    params?: LibraryApiGetItemsRequest,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getItemsApi(api).getItems(
+    const response = await getLibraryApi(api).getItems(
         {
             ...QUERY_OPTIONS,
             userId,

src/apps/legacy/features/search/api/useArtistsSearch.ts

@@ -1,7 +1,7 @@
 import { Api } from '@jellyfin/sdk';
-import { ArtistsApiGetArtistsRequest } from '@jellyfin/sdk/lib/generated-client/api/artists-api';
+import { ArtistApiGetArtistsRequest } from '@jellyfin/sdk/lib/generated-client/api/artist-api';
 import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
-import { getArtistsApi } from '@jellyfin/sdk/lib/utils/api/artists-api';
+import { getArtistApi } from '@jellyfin/sdk/lib/utils/api/artist-api';
 import { useQuery } from '@tanstack/react-query';
 import { AxiosRequestConfig } from 'axios';
 import { useApi } from 'hooks/useApi';
@@ -11,10 +11,10 @@ import { isMusic } from '../utils/search';
 const fetchArtists = async (
     api: Api,
     userId: string,
-    params?: ArtistsApiGetArtistsRequest,
+    params?: ArtistApiGetArtistsRequest,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getArtistsApi(api).getArtists(
+    const response = await getArtistApi(api).getArtists(
         {
             ...QUERY_OPTIONS,
             userId,

src/apps/legacy/features/search/api/usePeopleSearch.ts

@@ -5,17 +5,17 @@ import { AxiosRequestConfig } from 'axios';
 import { useApi } from 'hooks/useApi';
 import { QUERY_OPTIONS } from '../constants/queryOptions';
 import { isMovies, isTVShows } from '../utils/search';
-import { PersonsApiGetPersonsRequest } from '@jellyfin/sdk/lib/generated-client/api/persons-api';
+import { PersonApiGetPersonsRequest } from '@jellyfin/sdk/lib/generated-client/api/person-api';
-import { getPersonsApi } from '@jellyfin/sdk/lib/utils/api/persons-api';
+import { getPersonApi } from '@jellyfin/sdk/lib/utils/api/person-api';
 import { PersonKind } from '@jellyfin/sdk/lib/generated-client/models/person-kind';
 
 const fetchPeople = async (
     api: Api,
     userId: string,
-    params?: PersonsApiGetPersonsRequest,
+    params?: PersonApiGetPersonsRequest,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getPersonsApi(api).getPersons(
+    const response = await getPersonApi(api).getPersons(
         {
             ...QUERY_OPTIONS,
             userId,

src/apps/legacy/features/search/api/useProgramsSearch.ts

@@ -4,13 +4,13 @@ import { useQuery } from '@tanstack/react-query';
 import { AxiosRequestConfig } from 'axios';
 import { useApi } from 'hooks/useApi';
 import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
-import { ItemsApiGetItemsRequest } from '@jellyfin/sdk/lib/generated-client/api/items-api';
+import { LibraryApiGetItemsRequest } from '@jellyfin/sdk/lib/generated-client/api/library-api';
 import { fetchItemsByType } from './fetchItemsByType';
 
 const fetchPrograms = async (
     api: Api,
     userId: string,
-    params?: ItemsApiGetItemsRequest,
+    params?: LibraryApiGetItemsRequest,
     options?: AxiosRequestConfig
 ) => {
     const response = await fetchItemsByType(

src/apps/legacy/features/search/api/useSearchSuggestions.ts

@@ -2,7 +2,7 @@ import type { AxiosRequestConfig } from 'axios';
 import type { Api } from '@jellyfin/sdk';
 import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
 import { ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models/item-sort-by';
-import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { useQuery } from '@tanstack/react-query';
 
 import { useApi } from 'hooks/useApi';
@@ -13,7 +13,7 @@ const fetchGetItems = async (
     parentId?: string,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getItemsApi(api).getItems(
+    const response = await getLibraryApi(api).getItems(
         {
             userId,
             sortBy: [ItemSortBy.IsFavoriteOrLiked, ItemSortBy.Random],

src/apps/legacy/features/search/api/useStudiosSearch.ts

@@ -1,7 +1,7 @@
 import { Api } from '@jellyfin/sdk';
 import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
-import { StudiosApiGetStudiosRequest } from '@jellyfin/sdk/lib/generated-client/api/studios-api';
+import { StudioApiGetStudiosRequest } from '@jellyfin/sdk/lib/generated-client/api/studio-api';
-import { getStudiosApi } from '@jellyfin/sdk/lib/utils/api/studios-api';
+import { getStudioApi } from '@jellyfin/sdk/lib/utils/api/studio-api';
 import { useQuery } from '@tanstack/react-query';
 import { AxiosRequestConfig } from 'axios';
 import { useApi } from 'hooks/useApi';
@@ -11,10 +11,10 @@ import { isMovies, isTVShows } from '../utils/search';
 const fetchStudios = async (
     api: Api,
     userId: string,
-    params?: StudiosApiGetStudiosRequest,
+    params?: StudioApiGetStudiosRequest,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getStudiosApi(api).getStudios(
+    const response = await getStudioApi(api).getStudios(
         {
             ...QUERY_OPTIONS,
             userId,

src/apps/legacy/features/search/api/useVideoSearch.ts

@@ -4,18 +4,18 @@ import { useQuery } from '@tanstack/react-query';
 import { AxiosRequestConfig } from 'axios';
 import { useApi } from 'hooks/useApi';
 import { QUERY_OPTIONS } from '../constants/queryOptions';
-import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { MediaType } from '@jellyfin/sdk/lib/generated-client/models/media-type';
 import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
-import { ItemsApiGetItemsRequest } from '@jellyfin/sdk/lib/generated-client/api/items-api';
+import { LibraryApiGetItemsRequest } from '@jellyfin/sdk/lib/generated-client/api/library-api';
 
 const fetchVideos = async (
     api: Api,
     userId: string,
-    params?: ItemsApiGetItemsRequest,
+    params?: LibraryApiGetItemsRequest,
     options?: AxiosRequestConfig
 ) => {
-    const response = await getItemsApi(api).getItems(
+    const response = await getLibraryApi(api).getItems(
         {
             ...QUERY_OPTIONS,
             userId,

src/apps/legacy/routes/asyncRoutes/public.ts

@@ -1,4 +1,4 @@
-import { AsyncRoute } from '../../../../components/router/AsyncRoute';
+import { AsyncRoute } from 'components/router/AsyncRoute';
 
 export const ASYNC_PUBLIC_ROUTES: AsyncRoute[] = [
     { path: 'forgotpassword', page: 'session/forgotPassword' }

src/apps/legacy/routes/quickConnect/index.tsx

@@ -1,4 +1,4 @@
-import { getQuickConnectApi } from '@jellyfin/sdk/lib/utils/api/quick-connect-api';
+import { getAuthenticationApi } from '@jellyfin/sdk/lib/utils/api/authentication-api';
 import React, { FC, FormEvent, useCallback, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
@@ -41,7 +41,7 @@ const QuickConnectPage: FC = () => {
         const normalizedCode = code.replace(/\s/g, '');
         console.log('[QuickConnect] authorizing code %s as user %s', normalizedCode, userId);
 
-        getQuickConnectApi(api)
+        getAuthenticationApi(api)
             .authorizeQuickConnect({
                 code: normalizedCode,
                 userId

src/apps/modern/AppLayout.tsx

@@ -42,7 +42,7 @@ export const Component = () => {
                 }}
             >
                 <StrictMode>
-                    <OffsetAppBar dense elevation={4}>
+                    <OffsetAppBar dense>
                         <AppToolbar
                             isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
                             isDrawerOpen={isDrawerOpen}

src/apps/modern/AppOverrides.scss

@@ -24,6 +24,12 @@ $mui-bp-xl: 1536px;
 }
 
 .layout-mobile {
+    .itemDetailPage {
+        // Fix horizontal panning on mobile item details page
+        overflow-x: hidden;
+        overflow-x: clip;
+    }
+
     .itemBackdrop {
         // Fix backdrop position on mobile item details page
         margin-top: -48px !important;

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

@@ -47,6 +47,7 @@ const AppToolbar: FC<AppToolbarProps> = ({
             onDrawerButtonClick={onDrawerButtonClick}
             isBackButtonAvailable={isBackButtonAvailable}
             isUserMenuAvailable={!isPublicPath}
+            className='padded-left padded-right'
         >
             {!isDrawerAvailable && (
                 <Stack

src/apps/modern/components/drawers/DrawerHeaderLink.tsx

@@ -1,3 +1,4 @@
+import { getDisplayVersion } from '@jellyfin/sdk/lib/utils/versioning';
 import Box from '@mui/material/Box';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
@@ -5,7 +6,6 @@ import React from 'react';
 
 import { useSystemInfo } from 'hooks/useSystemInfo';
 import ListItemLink from 'components/ListItemLink';
-import { getDisplayVersion } from 'utils/versions';
 
 import appIcon from '@jellyfin/ux-web/icon-transparent.png';
 

src/apps/modern/features/details/hooks/api/useGetItemByType.ts

@@ -1,5 +1,5 @@
 import type { AxiosRequestConfig } from 'axios';
-import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
 import { getLiveTvApi } from '@jellyfin/sdk/lib/utils/api/live-tv-api';
 import { useQuery } from '@tanstack/react-query';
 import { type JellyfinApiContext, useApi } from 'hooks/useApi';
@@ -33,7 +33,7 @@ const getItemByType = async (
             );
             break;
         default: {
-            response = await getUserLibraryApi(api).getItem(
+            response = await getLibraryApi(api).getItem(
                 { userId: user.Id, itemId },
                 options
             );

src/apps/modern/features/libraries/components/ItemsView.tsx

@@ -57,7 +57,7 @@ const ItemsView: FC = () => {
             listOptions.showArtist = true;
             listOptions.addToListButton = true;
         } else if (viewType === LibraryTab.Albums) {
-            listOptions.sortBy = libraryViewSettings.SortBy;
+            listOptions.sortBy = libraryViewSettings.SortBy[0];
             listOptions.addToListButton = true;
         } else if (viewType === LibraryTab.Episodes) {
             listOptions.showParentTitle = true;
@@ -171,7 +171,7 @@ const ItemsView: FC = () => {
         noItemsMessage
     ]);
 
-    const hasSortName = libraryViewSettings.SortBy !== ItemSortBy.Random;
+    const hasSortName = !libraryViewSettings.SortBy.includes(ItemSortBy.Random);
 
     const itemsContainerClass = classNames(
         'padded-left padded-right',

src/apps/modern/features/libraries/components/LibraryToolbar.tsx

@@ -104,61 +104,21 @@ const LibraryToolbar: FC = () => {
         >
             <LibraryViewMenu />
 
-            <Box
+            {!MENU_ONLY_VIEWS.includes(viewType) && (
-                sx={{
+                <Box
-                    display: 'flex',
+                    sx={{
-                    flexGrow: {
+                        display: 'flex',
-                        xs: 1,
+                        flexGrow: {
-                        sm: 0
+                            xs: 1,
-                    },
+                            sm: 0
-                    justifyContent: 'flex-end',
+                        },
-                    marginLeft: 1
+                        justifyContent: 'flex-end',
-                }}
+                        marginLeft: 1
-            >
+                    }}
-                <ButtonGroup
-                    variant='contained'
                 >
-                    {isBtnPlayAllEnabled && (
+                    <Chip label={itemCountDisplay} />
-                        <PlayAllButton
+                </Box>
-                            item={item}
+            )}
-                            items={items}
-                            viewType={viewType}
-                            collectionType={collectionType}
-                            hasFilters={hasFilters}
-                            isTextVisible={isSmallScreen}
-                            libraryViewSettings={libraryViewSettings}
-                        />
-                    )}
-
-                    {isBtnShuffleEnabled && (
-                        <ShuffleButton
-                            item={item}
-                            items={items}
-                            viewType={viewType}
-                            collectionType={collectionType}
-                            hasFilters={hasFilters}
-                            isTextVisible={isSmallScreen && !isBtnPlayAllEnabled}
-                            libraryViewSettings={libraryViewSettings}
-                        />
-                    )}
-
-                    {isBtnQueueEnabled && item && playbackManager.canQueue(item) && (
-                        <QueueButton
-                            item={item}
-                            items={items}
-                            hasFilters={hasFilters}
-                            isTextVisible={isSmallScreen && !isBtnPlayAllEnabled && !isBtnShuffleEnabled}
-                        />
-                    )}
-                </ButtonGroup>
-
-                {isBtnNewCollectionEnabled && canCreateCollections && (
-                    <NewCollectionButton isTextVisible={isSmallScreen} queryKey={allItemsQueryKey} />
-                )}
-                {isBtnNewPlaylistEnabled && (
-                    <NewPlaylistButton isTextVisible={isSmallScreen} queryKey={allItemsQueryKey} />
-                )}
-            </Box>
 
             {!MENU_ONLY_VIEWS.includes(viewType) && (
                 <Stack
@@ -174,7 +134,10 @@ const LibraryToolbar: FC = () => {
                             sm: 'auto'
                         },
                         flexGrow: 1,
-                        marginTop: 0.5,
+                        marginTop: {
+                            xs: 1,
+                            sm: 0.5
+                        },
                         marginBottom: 0.5
                     }}
                 >
@@ -188,7 +151,49 @@ const LibraryToolbar: FC = () => {
                             }
                         }}
                     >
-                        <Chip label={itemCountDisplay} />
+                        <ButtonGroup
+                            variant='contained'
+                        >
+                            {isBtnPlayAllEnabled && (
+                                <PlayAllButton
+                                    item={item}
+                                    items={items}
+                                    viewType={viewType}
+                                    collectionType={collectionType}
+                                    hasFilters={hasFilters}
+                                    isTextVisible={isSmallScreen}
+                                    libraryViewSettings={libraryViewSettings}
+                                />
+                            )}
+
+                            {isBtnShuffleEnabled && (
+                                <ShuffleButton
+                                    item={item}
+                                    items={items}
+                                    viewType={viewType}
+                                    collectionType={collectionType}
+                                    hasFilters={hasFilters}
+                                    isTextVisible={isSmallScreen && !isBtnPlayAllEnabled}
+                                    libraryViewSettings={libraryViewSettings}
+                                />
+                            )}
+
+                            {isBtnQueueEnabled && item && playbackManager.canQueue(item) && (
+                                <QueueButton
+                                    item={item}
+                                    items={items}
+                                    hasFilters={hasFilters}
+                                    isTextVisible={isSmallScreen && !isBtnPlayAllEnabled && !isBtnShuffleEnabled}
+                                />
+                            )}
+                        </ButtonGroup>
+
+                        {isBtnNewCollectionEnabled && canCreateCollections && (
+                            <NewCollectionButton isTextVisible={isSmallScreen} queryKey={allItemsQueryKey} />
+                        )}
+                        {isBtnNewPlaylistEnabled && (
+                            <NewPlaylistButton isTextVisible={isSmallScreen} queryKey={allItemsQueryKey} />
+                        )}
                     </Box>
 
                     <ButtonGroup

src/apps/modern/features/libraries/components/PageTabContent.tsx

@@ -34,7 +34,6 @@ const PageTabContent: FC<PageTabContentProps> = ({ parentId, currentTab }) => {
     if (currentTab.viewType === LibraryTab.Programs || currentTab.viewType === LibraryTab.Recordings || currentTab.viewType === LibraryTab.Schedule) {
         return (
             <ProgramsSectionView
-                parentId={parentId}
                 sectionType={
                     currentTab.sectionsView?.programSections ?? []
                 }

src/apps/modern/features/libraries/components/PlayAllButton.tsx

@@ -43,7 +43,7 @@ const PlayAllButton: FC<PlayAllButtonProps> = ({
                 items: [item],
                 autoplay: true,
                 queryOptions: {
-                    SortBy: [libraryViewSettings.SortBy],
+                    SortBy: libraryViewSettings.SortBy,
                     SortOrder: [libraryViewSettings.SortOrder]
                 }
             }).catch(err => {
@@ -56,7 +56,7 @@ const PlayAllButton: FC<PlayAllButtonProps> = ({
                 queryOptions: {
                     ParentId: item?.Id ?? undefined,
                     ...getFiltersQuery(viewType, libraryViewSettings),
-                    SortBy: [libraryViewSettings.SortBy],
+                    SortBy: libraryViewSettings.SortBy,
                     SortOrder: [libraryViewSettings.SortOrder]
                 }
             }).catch(err => {

src/apps/modern/features/libraries/components/ProgramsSectionView.tsx

@@ -9,22 +9,19 @@ 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';
 
 interface ProgramsSectionViewProps {
-    parentId: ParentId;
     sectionType: SectionType[];
     isUpcomingRecordingsEnabled: boolean | undefined
 }
 
 const ProgramsSectionView: FC<ProgramsSectionViewProps> = ({
-    parentId,
     sectionType,
     isUpcomingRecordingsEnabled = false
 }) => {
     const { __legacyApiClient__ } = useApi();
-    const { isLoading, data: sectionsWithItems, refetch } = useGetProgramsSectionsWithItems(parentId, sectionType);
+    const { isLoading, data: sectionsWithItems, refetch } = useGetProgramsSectionsWithItems(sectionType);
     const {
         isLoading: isUpcomingRecordingsLoading,
         data: upcomingRecordings

src/apps/modern/features/libraries/components/SortButton.tsx

@@ -14,52 +14,53 @@ import Popover from '@mui/material/Popover';
 import globalize from 'lib/globalize';
 import { LibraryViewSettings } from 'types/library';
 import { LibraryTab } from 'types/libraryTab';
+import isEqual from 'lodash-es/isEqual';
 
 type SortOption = {
     label: string;
-    value: ItemSortBy;
+    value: ItemSortBy[];
 };
 
 type SortOptionsMapping = Record<string, SortOption[]>;
 
 const collectionMovieOptions: SortOption[] = [
-    { label: 'Name', value: ItemSortBy.SortName },
+    { label: 'Name', value: [ItemSortBy.SortName] },
-    { label: 'OptionRandom', value: ItemSortBy.Random },
+    { label: 'OptionRandom', value: [ItemSortBy.Random] },
-    { label: 'OptionCommunityRating', value: ItemSortBy.CommunityRating },
+    { label: 'OptionCommunityRating', value: [ItemSortBy.CommunityRating, ItemSortBy.SortName] },
-    { label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
+    { label: 'OptionDateAdded', value: [ItemSortBy.DateCreated, ItemSortBy.SortName] },
-    { label: 'OptionParentalRating', value: ItemSortBy.OfficialRating },
+    { label: 'OptionParentalRating', value: [ItemSortBy.OfficialRating, ItemSortBy.SortName] },
-    { label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate }
+    { label: 'OptionReleaseDate', value: [ItemSortBy.ProductionYear, ItemSortBy.PremiereDate, ItemSortBy.SortName] }
 ];
 
 const movieOrFavoriteOptions = [
-    { label: 'Name', value: ItemSortBy.SortName },
+    { label: 'Name', value: [ItemSortBy.SortName] },
-    { label: 'OptionRandom', value: ItemSortBy.Random },
+    { label: 'OptionRandom', value: [ItemSortBy.Random] },
-    { label: 'OptionCommunityRating', value: ItemSortBy.CommunityRating },
+    { label: 'OptionCommunityRating', value: [ItemSortBy.CommunityRating, ItemSortBy.SortName] },
-    { label: 'OptionCriticRating', value: ItemSortBy.CriticRating },
+    { label: 'OptionCriticRating', value: [ItemSortBy.CriticRating, ItemSortBy.SortName] },
-    { label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
+    { label: 'OptionDateAdded', value: [ItemSortBy.DateCreated, ItemSortBy.SortName] },
-    { label: 'OptionDatePlayed', value: ItemSortBy.DatePlayed },
+    { label: 'OptionDatePlayed', value: [ItemSortBy.DatePlayed, ItemSortBy.SortName] },
-    { label: 'OptionParentalRating', value: ItemSortBy.OfficialRating },
+    { label: 'OptionParentalRating', value: [ItemSortBy.OfficialRating, ItemSortBy.SortName] },
-    { label: 'OptionPlayCount', value: ItemSortBy.PlayCount },
+    { label: 'OptionPlayCount', value: [ItemSortBy.PlayCount, ItemSortBy.SortName] },
-    { label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate },
+    { label: 'OptionReleaseDate', value: [ItemSortBy.ProductionYear, ItemSortBy.PremiereDate, ItemSortBy.SortName] },
-    { label: 'Runtime', value: ItemSortBy.Runtime }
+    { label: 'Runtime', value: [ItemSortBy.Runtime, ItemSortBy.SortName] }
 ];
 
 const photosOrPhotoAlbumsOptions = [
-    { label: 'Name', value: ItemSortBy.SortName },
+    { label: 'Name', value: [ItemSortBy.SortName] },
-    { label: 'OptionRandom', value: ItemSortBy.Random },
+    { label: 'OptionRandom', value: [ItemSortBy.Random] },
-    { label: 'OptionDateAdded', value: ItemSortBy.DateCreated }
+    { label: 'OptionDateAdded', value: [ItemSortBy.DateCreated, ItemSortBy.SortName] }
 ];
 
 const videoOrMusicVideoOptions = [
-    { label: 'Name', value: ItemSortBy.SortName },
+    { label: 'Name', value: [ItemSortBy.SortName] },
-    { label: 'OptionRandom', value: ItemSortBy.Random },
+    { label: 'OptionRandom', value: [ItemSortBy.Random] },
-    { label: 'OptionCommunityRating', value: ItemSortBy.CommunityRating },
+    { label: 'OptionCommunityRating', value: [ItemSortBy.CommunityRating, ItemSortBy.SortName] },
-    { label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
+    { label: 'OptionDateAdded', value: [ItemSortBy.DateCreated, ItemSortBy.SortName] },
-    { label: 'OptionDatePlayed', value: ItemSortBy.DatePlayed },
+    { label: 'OptionDatePlayed', value: [ItemSortBy.DatePlayed, ItemSortBy.SortName] },
-    { label: 'OptionParentalRating', value: ItemSortBy.OfficialRating },
+    { label: 'OptionParentalRating', value: [ItemSortBy.OfficialRating, ItemSortBy.SortName] },
-    { label: 'OptionPlayCount', value: ItemSortBy.PlayCount },
+    { label: 'OptionPlayCount', value: [ItemSortBy.PlayCount, ItemSortBy.SortName] },
-    { label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate },
+    { label: 'OptionReleaseDate', value: [ItemSortBy.ProductionYear, ItemSortBy.PremiereDate, ItemSortBy.SortName] },
-    { label: 'Runtime', value: ItemSortBy.Runtime }
+    { label: 'Runtime', value: [ItemSortBy.Runtime, ItemSortBy.SortName] }
 ];
 
 const sortOptionsMapping: SortOptionsMapping = {
@@ -67,91 +68,91 @@ const sortOptionsMapping: SortOptionsMapping = {
     [LibraryTab.Collections]: collectionMovieOptions,
     [LibraryTab.Favorites]: movieOrFavoriteOptions,
     [LibraryTab.Series]: [
-        { label: 'Name', value: ItemSortBy.SortName },
+        { label: 'Name', value: [ItemSortBy.SortName] },
-        { label: 'OptionRandom', value: ItemSortBy.Random },
+        { label: 'OptionRandom', value: [ItemSortBy.Random] },
-        { label: 'OptionCommunityRating', value: ItemSortBy.CommunityRating },
+        { label: 'OptionCommunityRating', value: [ItemSortBy.CommunityRating, ItemSortBy.SortName] },
-        { label: 'OptionDateShowAdded', value: ItemSortBy.DateCreated },
+        { label: 'OptionDateShowAdded', value: [ItemSortBy.DateCreated, ItemSortBy.SortName] },
-        { label: 'OptionDateEpisodeAdded', value: ItemSortBy.DateLastContentAdded },
+        { label: 'OptionDateEpisodeAdded', value: [ItemSortBy.DateLastContentAdded, ItemSortBy.SortName] },
-        { label: 'OptionDatePlayed', value: ItemSortBy.SeriesDatePlayed },
+        { label: 'OptionDatePlayed', value: [ItemSortBy.SeriesDatePlayed, ItemSortBy.SortName] },
-        { label: 'OptionParentalRating', value: ItemSortBy.OfficialRating },
+        { label: 'OptionParentalRating', value: [ItemSortBy.OfficialRating, ItemSortBy.SortName] },
-        { label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate }
+        { label: 'OptionReleaseDate', value: [ItemSortBy.ProductionYear, ItemSortBy.PremiereDate, ItemSortBy.SortName] }
     ],
     [LibraryTab.Episodes]: [
-        { label: 'Name', value: ItemSortBy.SeriesSortName },
+        { label: 'Name', value: [ItemSortBy.SeriesSortName] },
-        { label: 'OptionRandom', value: ItemSortBy.Random },
+        { label: 'OptionRandom', value: [ItemSortBy.Random] },
-        { label: 'OptionCommunityRating', value: ItemSortBy.CommunityRating },
+        { label: 'OptionCommunityRating', value: [ItemSortBy.CommunityRating, ItemSortBy.SortName] },
-        { label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
+        { label: 'OptionDateAdded', value: [ItemSortBy.DateCreated, ItemSortBy.SortName] },
-        { label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate },
+        { label: 'OptionReleaseDate', value: [ItemSortBy.ProductionYear, ItemSortBy.PremiereDate, ItemSortBy.SortName] },
-        { label: 'OptionDatePlayed', value: ItemSortBy.DatePlayed },
+        { label: 'OptionDatePlayed', value: [ItemSortBy.DatePlayed, ItemSortBy.SortName] },
-        { label: 'OptionParentalRating', value: ItemSortBy.OfficialRating },
+        { label: 'OptionParentalRating', value: [ItemSortBy.OfficialRating, ItemSortBy.SortName] },
-        { label: 'OptionPlayCount', value: ItemSortBy.PlayCount },
+        { label: 'OptionPlayCount', value: [ItemSortBy.PlayCount, ItemSortBy.SortName] },
-        { label: 'Runtime', value: ItemSortBy.Runtime }
+        { label: 'Runtime', value: [ItemSortBy.Runtime, ItemSortBy.SortName] }
     ],
     [LibraryTab.Albums]: [
-        { label: 'Name', value: ItemSortBy.SortName },
+        { label: 'Name', value: [ItemSortBy.SortName] },
-        { label: 'OptionRandom', value: ItemSortBy.Random },
+        { label: 'OptionRandom', value: [ItemSortBy.Random] },
-        { label: 'AlbumArtist', value: ItemSortBy.AlbumArtist },
+        { label: 'AlbumArtist', value: [ItemSortBy.AlbumArtist, ItemSortBy.SortName] },
-        { label: 'OptionCommunityRating', value: ItemSortBy.CommunityRating },
+        { label: 'OptionCommunityRating', value: [ItemSortBy.CommunityRating, ItemSortBy.SortName] },
-        { label: 'OptionCriticRating', value: ItemSortBy.CriticRating },
+        { label: 'OptionCriticRating', value: [ItemSortBy.CriticRating, ItemSortBy.SortName] },
-        { label: 'OptionReleaseDate', value: ItemSortBy.ProductionYear },
+        { label: 'OptionReleaseDate', value: [ItemSortBy.ProductionYear, ItemSortBy.PremiereDate, ItemSortBy.SortName] },
-        { label: 'OptionDateAdded', value: ItemSortBy.DateCreated }
+        { label: 'OptionDateAdded', value: [ItemSortBy.DateCreated, ItemSortBy.SortName] }
     ],
     [LibraryTab.Books]: [
-        { label: 'Name', value: ItemSortBy.SortName },
+        { label: 'Name', value: [ItemSortBy.SortName] },
-        { label: 'OptionRandom', value: ItemSortBy.Random },
+        { label: 'OptionRandom', value: [ItemSortBy.Random] },
-        { label: 'OptionReleaseDate', value: ItemSortBy.ProductionYear },
+        { label: 'OptionReleaseDate', value: [ItemSortBy.ProductionYear, ItemSortBy.PremiereDate, ItemSortBy.SortName] },
-        { label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
+        { label: 'OptionDateAdded', value: [ItemSortBy.DateCreated, ItemSortBy.SortName] },
-        { label: 'OptionDatePlayed', value: ItemSortBy.DatePlayed },
+        { label: 'OptionDatePlayed', value: [ItemSortBy.DatePlayed, ItemSortBy.SortName] },
-        { label: 'IndexNumber', value: ItemSortBy.IndexNumber }
+        { label: 'IndexNumber', value: [ItemSortBy.IndexNumber, ItemSortBy.SortName] }
     ],
     [LibraryTab.Songs]: [
-        { label: 'Name', value: ItemSortBy.SortName },
+        { label: 'OptionTrackName', value: [ItemSortBy.Name] },
-        { label: 'OptionRandom', value: ItemSortBy.Random },
+        { label: 'OptionRandom', value: [ItemSortBy.Random] },
-        { label: 'Album', value: ItemSortBy.Album },
+        { label: 'Album', value: [ItemSortBy.Album, ItemSortBy.AlbumArtist, ItemSortBy.SortName] },
-        { label: 'AlbumArtist', value: ItemSortBy.AlbumArtist },
+        { label: 'AlbumArtist', value: [ItemSortBy.AlbumArtist, ItemSortBy.Album, ItemSortBy.SortName] },
-        { label: 'Artist', value: ItemSortBy.Artist },
+        { label: 'Artist', value: [ItemSortBy.Artist, ItemSortBy.Album, ItemSortBy.SortName] },
-        { label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
+        { label: 'OptionDateAdded', value: [ItemSortBy.DateCreated, ItemSortBy.SortName] },
-        { label: 'OptionDatePlayed', value: ItemSortBy.DatePlayed },
+        { label: 'OptionDatePlayed', value: [ItemSortBy.DatePlayed, ItemSortBy.SortName] },
-        { label: 'OptionPlayCount', value: ItemSortBy.PlayCount },
+        { label: 'OptionPlayCount', value: [ItemSortBy.PlayCount, ItemSortBy.SortName] },
-        { label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate },
+        { label: 'OptionReleaseDate', value: [ItemSortBy.ProductionYear, ItemSortBy.PremiereDate, ItemSortBy.AlbumArtist, ItemSortBy.Album, ItemSortBy.SortName] },
-        { label: 'Runtime', value: ItemSortBy.Runtime }
+        { label: 'Runtime', value: [ItemSortBy.Runtime, ItemSortBy.AlbumArtist, ItemSortBy.Album, ItemSortBy.SortName] }
     ],
     [LibraryTab.Playlists]: [
-        { label: 'Name', value: ItemSortBy.SortName },
+        { label: 'Name', value: [ItemSortBy.SortName] },
-        { label: 'OptionRandom', value: ItemSortBy.Random },
+        { label: 'OptionRandom', value: [ItemSortBy.Random] },
-        { label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
+        { label: 'OptionDateAdded', value: [ItemSortBy.DateCreated, ItemSortBy.SortName] },
-        { label: 'OptionDatePlaylistUpdated', value: ItemSortBy.DateLastContentAdded },
+        { label: 'OptionDatePlaylistUpdated', value: [ItemSortBy.DateLastContentAdded, ItemSortBy.SortName] },
-        { label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate },
+        { label: 'OptionReleaseDate', value: [ItemSortBy.ProductionYear, ItemSortBy.PremiereDate, ItemSortBy.SortName] },
-        { label: 'Runtime', value: ItemSortBy.Runtime }
+        { label: 'Runtime', value: [ItemSortBy.Runtime, ItemSortBy.SortName] }
     ],
     [LibraryTab.PhotoAlbums]: photosOrPhotoAlbumsOptions,
     [LibraryTab.Photos]: photosOrPhotoAlbumsOptions,
     [LibraryTab.Videos]:videoOrMusicVideoOptions,
     [LibraryTab.MusicVideos]:videoOrMusicVideoOptions,
     [LibraryTab.Folders]: [
-        { label: 'Name', value: ItemSortBy.SortName },
+        { label: 'Name', value: [ItemSortBy.SortName] },
-        { label: 'OptionRandom', value: ItemSortBy.Random },
+        { label: 'OptionRandom', value: [ItemSortBy.Random] },
-        { label: 'OptionCommunityRating', value: ItemSortBy.CommunityRating },
+        { label: 'OptionCommunityRating', value: [ItemSortBy.CommunityRating, ItemSortBy.SortName] },
-        { label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
+        { label: 'OptionDateAdded', value: [ItemSortBy.DateCreated, ItemSortBy.SortName] },
-        { label: 'OptionDatePlayed', value: ItemSortBy.DatePlayed },
+        { label: 'OptionDatePlayed', value: [ItemSortBy.DatePlayed, ItemSortBy.SortName] },
-        { label: 'Folders', value: ItemSortBy.IsFolder },
+        { label: 'Folders', value: [ItemSortBy.IsFolder, ItemSortBy.SortName] },
-        { label: 'OptionParentalRating', value: ItemSortBy.OfficialRating },
+        { label: 'OptionParentalRating', value: [ItemSortBy.OfficialRating, ItemSortBy.SortName] },
-        { label: 'OptionPlayCount', value: ItemSortBy.PlayCount },
+        { label: 'OptionPlayCount', value: [ItemSortBy.PlayCount, ItemSortBy.SortName] },
-        { label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate },
+        { label: 'OptionReleaseDate', value: [ItemSortBy.ProductionYear, ItemSortBy.PremiereDate, ItemSortBy.SortName] },
-        { label: 'Runtime', value: ItemSortBy.Runtime }
+        { label: 'Runtime', value: [ItemSortBy.Runtime, ItemSortBy.SortName] }
     ],
     [LibraryTab.Mixed]: [
-        { label: 'Name', value: ItemSortBy.SortName },
+        { label: 'Name', value: [ItemSortBy.SortName] },
-        { label: 'OptionRandom', value: ItemSortBy.Random },
+        { label: 'OptionRandom', value: [ItemSortBy.Random] },
-        { label: 'OptionCommunityRating', value: ItemSortBy.CommunityRating },
+        { label: 'OptionCommunityRating', value: [ItemSortBy.CommunityRating, ItemSortBy.SortName] },
-        { label: 'OptionCriticRating', value: ItemSortBy.CriticRating },
+        { label: 'OptionCriticRating', value: [ItemSortBy.CriticRating, ItemSortBy.SortName] },
-        { label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
+        { label: 'OptionDateAdded', value: [ItemSortBy.DateCreated, ItemSortBy.SortName] },
-        { label: 'OptionDateEpisodeAdded', value: ItemSortBy.DateLastContentAdded },
+        { label: 'OptionDateEpisodeAdded', value: [ItemSortBy.DateLastContentAdded, ItemSortBy.SortName] },
-        { label: 'OptionDatePlayed', value: ItemSortBy.DatePlayed },
+        { label: 'OptionDatePlayed', value: [ItemSortBy.DatePlayed, ItemSortBy.SortName] },
-        { label: 'OptionParentalRating', value: ItemSortBy.OfficialRating },
+        { label: 'OptionParentalRating', value: [ItemSortBy.OfficialRating, ItemSortBy.SortName] },
-        { label: 'OptionPlayCount', value: ItemSortBy.PlayCount },
+        { label: 'OptionPlayCount', value: [ItemSortBy.PlayCount, ItemSortBy.SortName] },
-        { label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate },
+        { label: 'OptionReleaseDate', value: [ItemSortBy.ProductionYear, ItemSortBy.PremiereDate, ItemSortBy.SortName] },
-        { label: 'Runtime', value: ItemSortBy.Runtime }
+        { label: 'Runtime', value: [ItemSortBy.Runtime, ItemSortBy.SortName] }
     ]
 };
 
@@ -186,11 +187,11 @@ const SortButton: FC<SortButtonProps> = ({
     }, []);
 
     const onMenuItemClick = useCallback(
-        (sortBy: ItemSortBy) => {
+        (sortBy: ItemSortBy[]) => {
             setLibraryViewSettings((prevState) => {
                 let sortOrder: SortOrder = SortOrder.Ascending;
                 // If the user clicks the currently selected sort option, toggle the sort order
-                if (prevState.SortBy === sortBy) {
+                if (isEqual(prevState.SortBy, sortBy)) {
                     sortOrder = prevState.SortOrder === SortOrder.Ascending ? SortOrder.Descending : SortOrder.Ascending;
                 }
 
@@ -235,7 +236,7 @@ const SortButton: FC<SortButtonProps> = ({
                     {sortMenuOptions
                         .map((option) => (
                             <MenuItem
-                                key={option.value}
+                                key={option.value.join(',')}
                                 // eslint-disable-next-line react/jsx-no-bind
                                 onClick={() => onMenuItemClick(option.value)}
                             >
@@ -243,7 +244,7 @@ const SortButton: FC<SortButtonProps> = ({
                                     {globalize.translate(option.label)}
                                 </ListItemText>
                                 <ListItemIcon sx={{ justifyContent: 'flex-end' }}>
-                                    {libraryViewSettings.SortBy === option.value && (
+                                    {isEqual(libraryViewSettings.SortBy, option.value) && (
                                         libraryViewSettings.SortOrder === SortOrder.Ascending ? (
                                             <ArrowUpward fontSize='small' />
                                         ) : (

src/apps/modern/features/libraries/components/SuggestionsSectionView.tsx

@@ -1,13 +1,11 @@
+import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields';
 import type { RecommendationDto } from '@jellyfin/sdk/lib/generated-client/models/recommendation-dto';
 import { RecommendationType } from '@jellyfin/sdk/lib/generated-client/models/recommendation-type';
 import React, { type FC } from 'react';
 
 import { CardShape } from 'components/cardbuilder/utils/shape';
 import { useApi } from 'hooks/useApi';
-import {
+import { useGetSuggestionSectionsWithItems } from 'hooks/useFetchItems';
-    useGetMovieRecommendations,
-    useGetSuggestionSectionsWithItems
-} from 'hooks/useFetchItems';
 import { appRouter } from 'components/router/appRouter';
 import globalize from 'lib/globalize';
 import Loading from 'components/loading/LoadingComponent';
@@ -17,6 +15,8 @@ import type { ParentId } from 'types/library';
 import type { Section, SectionType } from 'types/sections';
 import type { ItemDto } from 'types/base/models/item-dto';
 
+import { useMovieRecommendations } from '../hooks/api/useMovieRecommendations';
+
 interface SuggestionsSectionViewProps {
     parentId: ParentId;
     sectionType: SectionType[];
@@ -35,7 +35,15 @@ const SuggestionsSectionView: FC<SuggestionsSectionViewProps> = ({
     const {
         isLoading: isRecommendationsLoading,
         data: movieRecommendationsItems
-    } = useGetMovieRecommendations(isMovieRecommendationEnabled, parentId);
+    } = useMovieRecommendations({
+        parentId: parentId || undefined,
+        fields: [
+            ItemFields.PrimaryImageAspectRatio,
+            ItemFields.MediaSourceCount
+        ],
+        categoryLimit: 6,
+        itemLimit: 20
+    }, isMovieRecommendationEnabled);
 
     if (isLoading || isRecommendationsLoading) {
         return <Loading />;

src/apps/modern/features/libraries/components/filter/FilterButton.tsx

@@ -15,9 +15,10 @@ import Badge from '@mui/material/Badge';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 
-import { useGetQueryFiltersLegacy, useGetStudios } from 'hooks/useFetchItems';
+import { useGetQueryFilters, useGetQueryFiltersLegacy, useGetStudios } from 'hooks/useFetchItems';
 import globalize from 'lib/globalize';
 
+import FiltersAudioLanguages from './FiltersAudioLanguages';
 import FiltersFeatures from './FiltersFeatures';
 import FiltersGenres from './FiltersGenres';
 import FiltersOfficialRatings from './FiltersOfficialRatings';
@@ -25,6 +26,7 @@ import FiltersEpisodesStatus from './FiltersEpisodesStatus';
 import FiltersSeriesStatus from './FiltersSeriesStatus';
 import FiltersStatus from './FiltersStatus';
 import FiltersStudios from './FiltersStudios';
+import FiltersSubtitleLanguages from './FiltersSubtitleLanguages';
 import FiltersTags from './FiltersTags';
 import FiltersVideoTypes from './FiltersVideoTypes';
 import FiltersYears from './FiltersYears';
@@ -99,7 +101,8 @@ const FilterButton: FC<FilterButtonProps> = ({
     const open = Boolean(anchorEl);
     const id = open ? 'filter-popover' : undefined;
 
-    const { data } = useGetQueryFiltersLegacy(parentId, itemType);
+    const { data: filtersLegacy } = useGetQueryFiltersLegacy(parentId, itemType);
+    const { data: filters } = useGetQueryFilters(parentId, itemType);
     const { data: studios } = useGetStudios(parentId, itemType);
 
     const handleChange =
@@ -173,6 +176,13 @@ const FilterButton: FC<FilterButtonProps> = ({
         return viewType === LibraryTab.Episodes;
     };
 
+    const isFiltersLanguagesEnabled = () => {
+        return viewType === LibraryTab.Movies
+            || viewType === LibraryTab.Series
+            || viewType === LibraryTab.Episodes
+            || viewType === LibraryTab.Mixed;
+    };
+
     return (
         <>
             <Button
@@ -324,7 +334,7 @@ const FilterButton: FC<FilterButtonProps> = ({
 
                 {isFiltersLegacyEnabled() && (
                     <>
-                        {data?.Genres && data?.Genres?.length > 0 && (
+                        {filtersLegacy?.Genres && filtersLegacy?.Genres?.length > 0 && (
                             <Accordion
                                 expanded={expanded === 'filtersGenres'}
                                 onChange={handleChange('filtersGenres')}
@@ -339,7 +349,7 @@ const FilterButton: FC<FilterButtonProps> = ({
                                 </AccordionSummary>
                                 <AccordionDetails>
                                     <FiltersGenres
-                                        genresOptions={data.Genres}
+                                        genresOptions={filtersLegacy.Genres}
                                         libraryViewSettings={
                                             libraryViewSettings
                                         }
@@ -351,8 +361,8 @@ const FilterButton: FC<FilterButtonProps> = ({
                             </Accordion>
                         )}
 
-                        {data?.OfficialRatings
+                        {filtersLegacy?.OfficialRatings
-                            && data?.OfficialRatings?.length > 0 && (
+                            && filtersLegacy?.OfficialRatings?.length > 0 && (
                             <Accordion
                                 expanded={
                                     expanded === 'filtersOfficialRatings'
@@ -373,7 +383,7 @@ const FilterButton: FC<FilterButtonProps> = ({
                                 </AccordionSummary>
                                 <AccordionDetails>
                                     <FiltersOfficialRatings
-                                        OfficialRatingsOptions={data.OfficialRatings}
+                                        OfficialRatingsOptions={filtersLegacy.OfficialRatings}
                                         libraryViewSettings={
                                             libraryViewSettings
                                         }
@@ -385,7 +395,7 @@ const FilterButton: FC<FilterButtonProps> = ({
                             </Accordion>
                         )}
 
-                        {data?.Tags && data?.Tags.length > 0 && (
+                        {filtersLegacy?.Tags && filtersLegacy?.Tags.length > 0 && (
                             <Accordion
                                 expanded={expanded === 'filtersTags'}
                                 onChange={handleChange('filtersTags')}
@@ -400,7 +410,7 @@ const FilterButton: FC<FilterButtonProps> = ({
                                 </AccordionSummary>
                                 <AccordionDetails>
                                     <FiltersTags
-                                        tagsOptions={data.Tags}
+                                        tagsOptions={filtersLegacy.Tags}
                                         libraryViewSettings={
                                             libraryViewSettings
                                         }
@@ -412,7 +422,7 @@ const FilterButton: FC<FilterButtonProps> = ({
                             </Accordion>
                         )}
 
-                        {data?.Years && data?.Years?.length > 0 && (
+                        {filtersLegacy?.Years && filtersLegacy?.Years?.length > 0 && (
                             <Accordion
                                 expanded={expanded === 'filtersYears'}
                                 onChange={handleChange('filtersYears')}
@@ -427,7 +437,7 @@ const FilterButton: FC<FilterButtonProps> = ({
                                 </AccordionSummary>
                                 <AccordionDetails>
                                     <FiltersYears
-                                        yearsOptions={data.Years}
+                                        yearsOptions={filtersLegacy.Years}
                                         libraryViewSettings={
                                             libraryViewSettings
                                         }
@@ -464,6 +474,50 @@ const FilterButton: FC<FilterButtonProps> = ({
                         </AccordionDetails>
                     </Accordion>
                 )}
+                {isFiltersLanguagesEnabled() && !!filters?.AudioLanguages?.length && (
+                    <Accordion
+                        expanded={expanded === 'filtersAudioLanguages'}
+                        onChange={handleChange('filtersAudioLanguages')}
+                    >
+                        <AccordionSummary
+                            aria-controls='audioLanguages-content'
+                            id='filtersAudioLanguages-header'
+                        >
+                            <Typography>
+                                {globalize.translate('AudioLanguages')}
+                            </Typography>
+                        </AccordionSummary>
+                        <AccordionDetails>
+                            <FiltersAudioLanguages
+                                options={filters.AudioLanguages}
+                                libraryViewSettings={libraryViewSettings}
+                                setLibraryViewSettings={setLibraryViewSettings}
+                            />
+                        </AccordionDetails>
+                    </Accordion>
+                )}
+                {isFiltersLanguagesEnabled() && !!filters?.SubtitleLanguages?.length && (
+                    <Accordion
+                        expanded={expanded === 'filtersSubtitleLanguages'}
+                        onChange={handleChange('filtersSubtitleLanguages')}
+                    >
+                        <AccordionSummary
+                            aria-controls='subtitleLanguages-content'
+                            id='filtersSubtitleLanguages-header'
+                        >
+                            <Typography>
+                                {globalize.translate('SubtitleLanguages')}
+                            </Typography>
+                        </AccordionSummary>
+                        <AccordionDetails>
+                            <FiltersSubtitleLanguages
+                                options={filters.SubtitleLanguages}
+                                libraryViewSettings={libraryViewSettings}
+                                setLibraryViewSettings={setLibraryViewSettings}
+                            />
+                        </AccordionDetails>
+                    </Accordion>
+                )}
                 <Button
                     disabled={!hasFilters}
                     title={globalize.translate('ResetFilters')}

src/apps/modern/features/libraries/components/filter/FiltersAudioLanguages.tsx

@@ -0,0 +1,59 @@
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormGroup from '@mui/material/FormGroup';
+import React, { FC, useCallback } from 'react';
+import { LibraryViewSettings } from 'types/library';
+
+interface FiltersAudioLanguagesProps {
+    options: { Name?: string | null, Value?: string | null }[];
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
+}
+
+const FiltersAudioLanguages: FC<FiltersAudioLanguagesProps> = ({
+    options,
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const onFiltersChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            event.preventDefault();
+            const value = event.target.value;
+            const existingValues = libraryViewSettings?.Filters?.AudioLanguages ?? [];
+
+            const updatedValues = existingValues.includes(value) ?
+                existingValues.filter((filter) => filter !== value) :
+                [...existingValues, value];
+
+            setLibraryViewSettings((prevState) => ({
+                ...prevState,
+                StartIndex: 0,
+                Filters: {
+                    ...prevState.Filters,
+                    AudioLanguages: updatedValues.length ? updatedValues : undefined
+                }
+            }));
+        },
+        [setLibraryViewSettings, libraryViewSettings?.Filters?.AudioLanguages]
+    );
+
+    return (
+        <FormGroup>
+            {options.filter((filter) => filter?.Value != null).map((filter) => (
+                <FormControlLabel
+                    key={filter.Value}
+                    control={
+                        <Checkbox
+                            checked={!!libraryViewSettings?.Filters?.AudioLanguages?.includes(filter.Value!)}
+                            onChange={onFiltersChange}
+                            value={filter.Value}
+                        />
+                    }
+                    label={filter.Name}
+                />
+            ))}
+        </FormGroup>
+    );
+};
+
+export default FiltersAudioLanguages;

src/apps/modern/features/libraries/components/filter/FiltersSubtitleLanguages.tsx

@@ -0,0 +1,59 @@
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormGroup from '@mui/material/FormGroup';
+import React, { FC, useCallback } from 'react';
+import { LibraryViewSettings } from 'types/library';
+
+interface FiltersSubtitleLanguagesProps {
+    options: { Name?: string | null, Value?: string | null }[];
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
+}
+
+const FiltersSubtitleLanguages: FC<FiltersSubtitleLanguagesProps> = ({
+    options,
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const onFiltersChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            event.preventDefault();
+            const value = event.target.value;
+            const existingValues = libraryViewSettings?.Filters?.SubtitleLanguages ?? [];
+
+            const updatedValues = existingValues.includes(value) ?
+                existingValues.filter((filter) => filter !== value) :
+                [...existingValues, value];
+
+            setLibraryViewSettings((prevState) => ({
+                ...prevState,
+                StartIndex: 0,
+                Filters: {
+                    ...prevState.Filters,
+                    SubtitleLanguages: updatedValues.length ? updatedValues : undefined
+                }
+            }));
+        },
+        [setLibraryViewSettings, libraryViewSettings?.Filters?.SubtitleLanguages]
+    );
+
+    return (
+        <FormGroup>
+            {options.filter((filter) => filter?.Value != null).map((filter) => (
+                <FormControlLabel
+                    key={filter.Value}
+                    control={
+                        <Checkbox
+                            checked={!!libraryViewSettings?.Filters?.SubtitleLanguages?.includes(filter.Value!)}
+                            onChange={onFiltersChange}
+                            value={filter.Value}
+                        />
+                    }
+                    label={filter.Name}
+                />
+            ))}
+        </FormGroup>
+    );
+};
+
+export default FiltersSubtitleLanguages;

src/apps/modern/features/libraries/hooks/api/useMovieRecommendations.ts

@@ -0,0 +1,43 @@
+import type { Api } from '@jellyfin/sdk/lib/api';
+import type { MovieApiGetMovieRecommendationsRequest } from '@jellyfin/sdk/lib/generated-client/api/movie-api';
+import { getMovieApi } from '@jellyfin/sdk/lib/utils/api/movie-api';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { AxiosRequestConfig } from 'axios';
+
+import { useApi } from 'hooks/useApi';
+
+const fetchGetMovieRecommendations = async (
+    api: Api,
+    params: MovieApiGetMovieRecommendationsRequest,
+    options?: AxiosRequestConfig
+) => {
+    const response = await getMovieApi(api).getMovieRecommendations(params, options);
+    return response.data;
+};
+
+/** Query options for fetching movie recommendations. */
+export const getMovieRecommendationsQuery = (
+    api?: Api,
+    params: MovieApiGetMovieRecommendationsRequest = {},
+    enabled = true
+) => queryOptions({
+    queryKey: ['MovieRecommendations', params?.parentId],
+    queryFn: ({ signal }) => fetchGetMovieRecommendations(api!, params, { signal }),
+    enabled: !!api && enabled
+});
+
+/** Hook for fetching movie recommendations. */
+export const useMovieRecommendations = (
+    params?: MovieApiGetMovieRecommendationsRequest,
+    enabled?: boolean
+) => {
+    const { api, user } = useApi();
+    return useQuery(getMovieRecommendationsQuery(
+        api,
+        {
+            ...params,
+            userId: params?.userId || user?.Id
+        },
+        enabled
+    ));
+};

src/apps/modern/features/libraries/hooks/useLibrary.tsx

@@ -35,7 +35,7 @@ export const useLibrary = () => useContext(LibraryContext);
 
 export const LibraryProvider: FC<PropsWithChildren<unknown>> = ({ children }) => {
     const { pathname } = useLocation();
-    const { libraryId, activeTab } = useCurrentTab();
+    const { libraryId, activeTab, settingsKey } = useCurrentTab();
 
     const route = useMemo(() => LibraryRoutes.find(({ path }) => path === pathname), [pathname]);
     const collectionType = route?.type;
@@ -48,7 +48,7 @@ export const LibraryProvider: FC<PropsWithChildren<unknown>> = ({ children }) =>
     // Local storage requires the view type to be known upfront so default to movies if unknown
     const settingsViewType = viewType ?? LibraryTab.Movies;
     const [viewSettings, setViewSettings] = useLocalStorage<LibraryViewSettings>(
-        getSettingsKey(settingsViewType, libraryId),
+        getSettingsKey(settingsViewType, settingsKey),
         getDefaultLibraryViewSettings(settingsViewType)
     );
 

src/apps/modern/features/libraries/utils/settings.ts

@@ -6,12 +6,12 @@ import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order'
 import { type ParentId, ViewMode, type LibraryViewSettings } from 'types/library';
 import { LibraryTab } from 'types/libraryTab';
 
-export const getDefaultSortBy = (viewType: LibraryTab) => {
+export const getDefaultSortBy = (viewType: LibraryTab): ItemSortBy[] => {
     if (viewType === LibraryTab.Episodes) {
-        return ItemSortBy.SeriesSortName;
+        return [ItemSortBy.SeriesSortName];
     }
 
-    return ItemSortBy.SortName;
+    return [ItemSortBy.SortName];
 };
 
 export const getDefaultLibraryViewSettings = (viewType: LibraryTab): LibraryViewSettings => {

src/apps/modern/routes/asyncRoutes/index.ts

@@ -1 +1,2 @@
+export * from './public';
 export * from './user';

src/apps/modern/routes/asyncRoutes/public.ts

@@ -0,0 +1,5 @@
+import { AsyncRoute } from 'components/router/AsyncRoute';
+
+export const ASYNC_PUBLIC_ROUTES: AsyncRoute[] = [
+    { path: 'forgotpassword', page: 'session/forgotPassword' }
+];

src/apps/modern/routes/legacyRoutes/public.ts

@@ -22,13 +22,6 @@ export const LEGACY_PUBLIC_ROUTES: LegacyRoute[] = [
             view: 'session/login/index.html'
         }
     },
-    {
-        path: 'forgotpassword',
-        pageProps: {
-            controller: 'session/forgotPassword/index',
-            view: 'session/forgotPassword/index.html'
-        }
-    },
     {
         path: 'forgotpasswordpin',
         pageProps: {

src/apps/modern/routes/routes.tsx

@@ -7,7 +7,7 @@ import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 import ErrorBoundary from 'components/router/ErrorBoundary';
 import FallbackRoute from 'components/router/FallbackRoute';
 
-import { ASYNC_USER_ROUTES } from './asyncRoutes';
+import { ASYNC_PUBLIC_ROUTES, ASYNC_USER_ROUTES } from './asyncRoutes';
 import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
 import VideoPage from './video';
 
@@ -38,6 +38,7 @@ export const APP_ROUTES: RouteObject[] = [
                 /* Public routes */
                 element: <ConnectionRequired level='public' />,
                 children: [
+                    ...ASYNC_PUBLIC_ROUTES.map(toAsyncPageRoute),
                     ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute),
 
                     /* Fallback route for invalid paths */

src/apps/modern/routes/video/index.tsx

@@ -70,6 +70,7 @@ const VideoPage: FC = () => {
                                 <RemotePlayButton />
                             </>
                         }
+                        className='padded-left padded-right'
                     >
                         <Typography>{videoTitle}</Typography>
                     </AppToolbar>

src/components/cardbuilder/Card/CardFooterText.tsx

@@ -1,4 +1,4 @@
-import React, { type FC } from 'react';
+import React, { type FC, type PropsWithChildren } from 'react';
 import Box from '@mui/material/Box';
 import useCardText from './useCardText';
 import layoutManager from 'components/layoutManager';
@@ -21,6 +21,28 @@ const shouldShowDetailsMenu = (
     );
 };
 
+interface CardFooterWrapperProps {
+    cardOptions: CardOptions;
+    footerClass?: string;
+    isOuterFooter: boolean;
+    logoUrl?: string;
+}
+
+/** Component that conditionally wraps the footer content based on the card options and presence of a logo. */
+const CardFooterWrapper: FC<PropsWithChildren<CardFooterWrapperProps>> = ({
+    cardOptions,
+    footerClass,
+    isOuterFooter,
+    logoUrl,
+    children
+}) => (
+    (!isOuterFooter || logoUrl || cardOptions.cardLayout) ? (
+        <Box className={footerClass}>
+            {children}
+        </Box>
+    ) : children
+);
+
 interface LogoComponentProps {
     logoUrl: string;
 }
@@ -72,7 +94,12 @@ const CardFooterText: FC<CardFooterTextProps> = ({
     });
 
     return (
-        <Box className={footerClass}>
+        <CardFooterWrapper
+            cardOptions={cardOptions}
+            footerClass={footerClass}
+            isOuterFooter={isOuterFooter}
+            logoUrl={logoUrl}
+        >
             {logoUrl && <LogoComponent logoUrl={logoUrl} />}
             {shouldShowDetailsMenu(cardOptions, isOuterFooter) && (
                 <MoreVertIconButton className='itemAction btnCardOptions' />
@@ -81,7 +108,7 @@ const CardFooterText: FC<CardFooterTextProps> = ({
             {cardTextLines}
 
             {progressBar}
-        </Box>
+        </CardFooterWrapper>
     );
 };
 

src/components/cardbuilder/card.scss

@@ -299,7 +299,7 @@ button::-moz-focus-inner {
 }
 
 .cardText {
-    padding: 0.06em 0.5em;
+    padding: 0.06em 2px; // 2px horizontal padding to avoid touching multiselect border
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -448,6 +448,11 @@ button::-moz-focus-inner {
     z-index: 1;
     padding: 0.75em;
     font-size: 88%;
+
+    /* The "modern" layout needs additional specificity to prevent MUI styles from overriding */
+    &.paper-icon-button-light {
+        color: rgba(255, 255, 255, 0.76);
+    }
 }
 
 .cardOverlayButton-br {