Merge branch 'master' into enable-airplay-audioplayer

.eslintrc.js

@@ -6,7 +6,6 @@ module.exports = {
     plugins: [
         '@typescript-eslint',
         'react',
-        'promise',
         'import',
         'eslint-comments',
         'sonarjs'
@@ -20,7 +19,6 @@ module.exports = {
     extends: [
         'eslint:recommended',
         'plugin:react/recommended',
-        // 'plugin:promise/recommended',
         'plugin:import/errors',
         'plugin:eslint-comments/recommended',
         'plugin:compat/recommended',
@@ -37,11 +35,18 @@ module.exports = {
         'indent': ['error', 4, { 'SwitchCase': 1 }],
         'jsx-quotes': ['error', 'prefer-single'],
         'keyword-spacing': ['error'],
-        'no-throw-literal': ['error'],
         'max-statements-per-line': ['error'],
         'max-params': ['error', 7],
+        'new-cap': [
+            'error',
+            {
+                'capIsNewExceptions': ['jQuery.Deferred'],
+                'newIsCapExceptionPattern': '\\.default$'
+            }
+        ],
         'no-duplicate-imports': ['error'],
         'no-empty-function': ['error'],
+        'no-extend-native': ['error'],
         'no-floating-decimal': ['error'],
         'no-multi-spaces': ['error'],
         'no-multiple-empty-lines': ['error', { 'max': 1 }],
@@ -54,6 +59,7 @@ module.exports = {
         'no-sequences': ['error', { 'allowInParentheses': false }],
         'no-shadow': ['off'],
         '@typescript-eslint/no-shadow': ['error'],
+        'no-throw-literal': ['error'],
         'no-trailing-spaces': ['error'],
         'no-unused-expressions': ['off'],
         '@typescript-eslint/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
@@ -68,6 +74,7 @@ module.exports = {
         'padded-blocks': ['error', 'never'],
         'prefer-const': ['error', { 'destructuring': 'all' }],
         '@typescript-eslint/prefer-for-of': ['error'],
+        '@typescript-eslint/prefer-optional-chain': ['error'],
         'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }],
         'radix': ['error'],
         '@typescript-eslint/semi': ['error'],
@@ -206,10 +213,7 @@ module.exports = {
         // JavaScript source files
         {
             files: [
-                './src/**/*.js',
+                './src/**/*.{js,jsx,ts,tsx}'
-                './src/**/*.jsx',
-                './src/**/*.ts',
-                './src/**/*.tsx'
             ],
             parserOptions: {
                 project: ['./tsconfig.json']
@@ -253,15 +257,13 @@ module.exports = {
                 'Windows': 'readonly'
             },
             rules: {
-                '@typescript-eslint/no-floating-promises': ['warn'],
                 '@typescript-eslint/prefer-string-starts-ends-with': ['error']
             }
         },
         // TypeScript source files
         {
             files: [
-                './src/**/*.ts',
+                './src/**/*.{ts,tsx}'
-                './src/**/*.tsx'
             ],
             extends: [
                 'eslint:recommended',
@@ -274,6 +276,7 @@ module.exports = {
             ],
             rules: {
                 '@typescript-eslint/no-floating-promises': ['error'],
+                '@typescript-eslint/no-unused-vars': ['error'],
 
                 'sonarjs/cognitive-complexity': ['error']
             }

.github/workflows/codeql-analysis.yml

@@ -19,13 +19,13 @@ jobs:
         language: [ 'javascript' ]
     steps:
     - name: Checkout repository
-      uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
+      uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@83f0fe6c4988d98a455712a27f0255212bba9bd4 # v2.3.6
+      uses: github/codeql-action/init@46ed16ded91731b2df79a2893d3aea8e9f03b5c4 # v2.20.3
       with:
         languages: ${{ matrix.language }}
         queries: +security-extended
     - name: Autobuild
-      uses: github/codeql-action/autobuild@83f0fe6c4988d98a455712a27f0255212bba9bd4 # v2.3.6
+      uses: github/codeql-action/autobuild@46ed16ded91731b2df79a2893d3aea8e9f03b5c4 # v2.20.3
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@83f0fe6c4988d98a455712a27f0255212bba9bd4 # v2.3.6
+      uses: github/codeql-action/analyze@46ed16ded91731b2df79a2893d3aea8e9f03b5c4 # v2.20.3

.github/workflows/commands.yml

@@ -12,13 +12,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Notify as seen
-        uses: peter-evans/create-or-update-comment@ca08ebd5dc95aa0cd97021e9708fcd6b87138c9b # v3.0.1
+        uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa # v3.0.2
         with:
           token: ${{ secrets.JF_BOT_TOKEN }}
           comment-id: ${{ github.event.comment.id }}
           reactions: '+1'
       - name: Checkout the latest code
-        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
+        uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
         with:
           token: ${{ secrets.JF_BOT_TOKEN }}
           fetch-depth: 0
@@ -28,7 +28,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.JF_BOT_TOKEN }}
       - name: Comment on failure
         if: failure()
-        uses: peter-evans/create-or-update-comment@ca08ebd5dc95aa0cd97021e9708fcd6b87138c9b # v3.0.1
+        uses: peter-evans/create-or-update-comment@c6c9a1a66007646a28c153e2a8580a5bad27bcfa # v3.0.2
         with:
           token: ${{ secrets.JF_BOT_TOKEN }}
           issue-number: ${{ github.event.issue.number }}

.github/workflows/lint.yml

@@ -13,10 +13,10 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
+        uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
 
       - name: Setup node environment
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 16
           check-latest: true
@@ -37,10 +37,10 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
+        uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
 
       - name: Setup node environment
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 16
           check-latest: true
@@ -58,10 +58,10 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
+        uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
 
       - name: Setup node environment
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 16
           check-latest: true
@@ -82,10 +82,10 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
+        uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
 
       - name: Setup node environment
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 16
           check-latest: true

.github/workflows/tsc.yml

@@ -13,10 +13,10 @@ jobs:
 
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
+        uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
 
       - name: Setup node environment
-        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0
+        uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
           node-version: 16
           check-latest: true

package.json

@@ -26,7 +26,7 @@
     "confusing-browser-globals": "1.0.11",
     "copy-webpack-plugin": "11.0.0",
     "cross-env": "7.0.3",
-    "css-loader": "6.7.4",
+    "css-loader": "6.8.1",
     "cssnano": "6.0.1",
     "es-check": "7.1.1",
     "eslint": "8.41.0",
@@ -34,20 +34,19 @@
     "eslint-plugin-eslint-comments": "3.2.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-sonarjs": "0.19.0",
     "expose-loader": "4.1.0",
     "html-loader": "4.2.0",
-    "html-webpack-plugin": "5.5.1",
+    "html-webpack-plugin": "5.5.3",
     "mini-css-extract-plugin": "2.7.6",
     "postcss": "8.4.24",
-    "postcss-loader": "7.3.1",
+    "postcss-loader": "7.3.3",
     "postcss-preset-env": "8.4.1",
     "postcss-scss": "4.0.6",
     "sass": "1.62.1",
-    "sass-loader": "13.3.0",
+    "sass-loader": "13.3.2",
     "source-map-loader": "4.0.1",
     "style-loader": "3.3.3",
     "stylelint": "15.6.2",
@@ -55,28 +54,32 @@
     "stylelint-no-browser-hacks": "1.2.1",
     "stylelint-order": "6.0.3",
     "stylelint-scss": "5.0.0",
-    "ts-loader": "9.4.3",
+    "ts-loader": "9.4.4",
     "typescript": "5.0.4",
-    "webpack": "5.84.1",
+    "webpack": "5.88.1",
-    "webpack-cli": "5.1.1",
+    "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.0",
+    "webpack-dev-server": "4.15.1",
     "webpack-merge": "5.9.0",
-    "workbox-webpack-plugin": "6.5.4",
+    "workbox-webpack-plugin": "6.6.0",
     "worker-loader": "3.0.8"
   },
   "dependencies": {
     "@emotion/react": "11.11.0",
     "@emotion/styled": "11.11.0",
-    "@fontsource/noto-sans": "4.5.11",
+    "@fontsource/noto-sans": "5.0.4",
-    "@fontsource/noto-sans-hk": "4.5.12",
+    "@fontsource/noto-sans-hk": "5.0.4",
-    "@fontsource/noto-sans-jp": "4.5.12",
+    "@fontsource/noto-sans-jp": "5.0.4",
-    "@fontsource/noto-sans-kr": "4.5.12",
+    "@fontsource/noto-sans-kr": "5.0.4",
-    "@fontsource/noto-sans-sc": "4.5.12",
+    "@fontsource/noto-sans-sc": "5.0.4",
-    "@fontsource/noto-sans-tc": "4.5.12",
+    "@fontsource/noto-sans-tc": "5.0.4",
     "@jellyfin/sdk": "unstable",
     "@loadable/component": "5.15.3",
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.13.3",
+    "@mui/x-data-grid": "6.6.0",
+    "@react-hook/resize-observer": "1.2.6",
+    "@tanstack/react-query": "4.29.12",
+    "@tanstack/react-query-devtools": "4.29.12",
     "blurhash": "2.0.5",
     "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
     "classnames": "2.3.2",
@@ -111,8 +114,8 @@
     "swiper": "9.3.2",
     "webcomponents.js": "0.7.24",
     "whatwg-fetch": "3.6.2",
-    "workbox-core": "6.5.4",
+    "workbox-core": "6.6.0",
-    "workbox-precaching": "6.5.4"
+    "workbox-precaching": "6.6.0"
   },
   "browserslist": [
     "last 2 Firefox versions",

src/RootApp.tsx

@@ -1,6 +1,8 @@
 import loadable from '@loadable/component';
 import { History } from '@remix-run/router';
 import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import StableApp from './apps/stable/App';
 import { HistoryRouter } from './components/router/HistoryRouter';
@@ -9,21 +11,26 @@ import { WebConfigProvider } from './hooks/useWebConfig';
 
 const ExperimentalApp = loadable(() => import('./apps/experimental/App'));
 
+const queryClient = new QueryClient();
+
 const RootApp = ({ history }: { history: History }) => {
     const layoutMode = localStorage.getItem('layout');
 
     return (
-        <ApiProvider>
+        <QueryClientProvider client={queryClient}>
-            <WebConfigProvider>
+            <ApiProvider>
-                <HistoryRouter history={history}>
+                <WebConfigProvider>
-                    {
+                    <HistoryRouter history={history}>
-                        layoutMode === 'experimental' ?
+                        {
-                            <ExperimentalApp /> :
+                            layoutMode === 'experimental' ?
-                            <StableApp />
+                                <ExperimentalApp /> :
-                    }
+                                <StableApp />
-                </HistoryRouter>
+                        }
-            </WebConfigProvider>
+                    </HistoryRouter>
-        </ApiProvider>
+                </WebConfigProvider>
+            </ApiProvider>
+            <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
     );
 };
 

src/apps/experimental/App.tsx

@@ -36,6 +36,9 @@ const ExperimentalApp = () => {
 
                     {LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)}
                 </Route>
+
+                {/* Redirects for old paths */}
+                <Route path='serveractivity.html' element={<Navigate replace to='/dashboard/activity' />} />
             </Route>
         </Routes>
     );

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

@@ -1,6 +1,4 @@
-import Avatar from '@mui/material/Avatar';
 import IconButton from '@mui/material/IconButton';
-import { useTheme } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 import React, { useCallback, useState } from 'react';
 
@@ -8,10 +6,10 @@ import { useApi } from 'hooks/useApi';
 import globalize from 'scripts/globalize';
 
 import AppUserMenu, { ID } from './menus/AppUserMenu';
+import UserAvatar from 'components/UserAvatar';
 
 const UserMenuButton = () => {
-    const theme = useTheme();
+    const { user } = useApi();
-    const { api, user } = useApi();
 
     const [ userMenuAnchorEl, setUserMenuAnchorEl ] = useState<null | HTMLElement>(null);
     const isUserMenuOpen = Boolean(userMenuAnchorEl);
@@ -37,18 +35,7 @@ const UserMenuButton = () => {
                     color='inherit'
                     sx={{ padding: 0 }}
                 >
-                    <Avatar
+                    <UserAvatar user={user} />
-                        alt={user?.Name || undefined}
-                        src={
-                            api && user?.Id ?
-                                `${api.basePath}/Users/${user.Id}/Images/Primary?tag=${user.PrimaryImageTag}` :
-                                undefined
-                        }
-                        sx={{
-                            bgcolor: theme.palette.primary.dark,
-                            color: 'inherit'
-                        }}
-                    />
                 </IconButton>
             </Tooltip>
 

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

@@ -1,3 +1,4 @@
+import ArrowBack from '@mui/icons-material/ArrowBack';
 import MenuIcon from '@mui/icons-material/Menu';
 import SearchIcon from '@mui/icons-material/Search';
 import Box from '@mui/material/Box';
@@ -9,6 +10,7 @@ import React, { FC } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 import appIcon from 'assets/img/icon-transparent.png';
+import { appRouter } from 'components/router/appRouter';
 import { useApi } from 'hooks/useApi';
 import globalize from 'scripts/globalize';
 
@@ -23,6 +25,13 @@ interface AppToolbarProps {
     onDrawerButtonClick: (event: React.MouseEvent<HTMLElement>) => void
 }
 
+const onBackButtonClick = () => {
+    appRouter.back()
+        .catch(err => {
+            console.error('[AppToolbar] error calling appRouter.back', err);
+        });
+};
+
 const AppToolbar: FC<AppToolbarProps> = ({
     isDrawerOpen,
     onDrawerButtonClick
@@ -32,6 +41,7 @@ const AppToolbar: FC<AppToolbarProps> = ({
     const location = useLocation();
 
     const isDrawerAvailable = isDrawerPath(location.pathname);
+    const isBackButtonAvailable = appRouter.canGoBack();
 
     return (
         <Toolbar
@@ -50,7 +60,6 @@ const AppToolbar: FC<AppToolbarProps> = ({
                         edge='start'
                         color='inherit'
                         aria-label={globalize.translate(isDrawerOpen ? 'MenuClose' : 'MenuOpen')}
-                        sx={{ mr: 2 }}
                         onClick={onDrawerButtonClick}
                     >
                         <MenuIcon />
@@ -58,12 +67,28 @@ const AppToolbar: FC<AppToolbarProps> = ({
                 </Tooltip>
             )}
 
+            {isBackButtonAvailable && (
+                <Tooltip title={globalize.translate('ButtonBack')}>
+                    <IconButton
+                        size='large'
+                        // Set the edge if the drawer button is not shown
+                        edge={!(isUserLoggedIn && isDrawerAvailable) ? 'start' : undefined}
+                        color='inherit'
+                        aria-label={globalize.translate('ButtonBack')}
+                        onClick={onBackButtonClick}
+                    >
+                        <ArrowBack />
+                    </IconButton>
+                </Tooltip>
+            )}
+
             <Box
                 component={Link}
                 to='/'
                 color='inherit'
                 aria-label={globalize.translate('Home')}
                 sx={{
+                    ml: 2,
                     display: 'inline-flex',
                     textDecoration: 'none'
                 }}

src/apps/experimental/components/AppToolbar/menus/AppUserMenu.tsx

@@ -1,5 +1,8 @@
-import { AppSettingsAlt, Close } from '@mui/icons-material';
 import AccountCircle from '@mui/icons-material/AccountCircle';
+import AppSettingsAlt from '@mui/icons-material/AppSettingsAlt';
+import Close from '@mui/icons-material/Close';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import Edit from '@mui/icons-material/Edit';
 import Logout from '@mui/icons-material/Logout';
 import PhonelinkLock from '@mui/icons-material/PhonelinkLock';
 import Settings from '@mui/icons-material/Settings';
@@ -106,6 +109,34 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
                 </MenuItem>
             ])}
 
+            {/* ADMIN LINKS */}
+            {user?.Policy?.IsAdministrator && ([
+                <Divider key='admin-links-divider' />,
+                <MenuItem
+                    key='admin-dashboard-link'
+                    component={Link}
+                    to='/dashboard.html'
+                    onClick={onMenuClose}
+                >
+
+                    <ListItemIcon>
+                        <DashboardIcon />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('TabDashboard')} />
+                </MenuItem>,
+                <MenuItem
+                    key='admin-metadata-link'
+                    component={Link}
+                    to='/edititemmetadata.html'
+                    onClick={onMenuClose}
+                >
+                    <ListItemIcon>
+                        <Edit />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('MetadataManager')} />
+                </MenuItem>
+            ])}
+
             <Divider />
             <MenuItem
                 component={Link}

src/apps/experimental/components/GridActionsCellLink.tsx

@@ -0,0 +1,17 @@
+import React, { type RefAttributes } from 'react';
+import { Link } from 'react-router-dom';
+import { GridActionsCellItem, type GridActionsCellItemProps } from '@mui/x-data-grid';
+
+type GridActionsCellLinkProps = { to: string } & GridActionsCellItemProps & RefAttributes<HTMLButtonElement>;
+
+/**
+ * Link component to use in mui's data-grid action column due to a current bug with passing props to custom link components.
+ * @see https://github.com/mui/mui-x/issues/4654
+ */
+const GridActionsCellLink = ({ to, ...props }: GridActionsCellLinkProps) => (
+    <Link to={to}>
+        <GridActionsCellItem {...props} />
+    </Link>
+);
+
+export default GridActionsCellLink;

src/apps/experimental/components/activityTable/LogLevelChip.tsx

@@ -0,0 +1,34 @@
+import { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
+import Chip from '@mui/material/Chip';
+import React from 'react';
+
+import globalize from 'scripts/globalize';
+
+const LogLevelChip = ({ level }: { level: LogLevel }) => {
+    let color: 'info' | 'warning' | 'error' | undefined = undefined;
+    switch (level) {
+        case LogLevel.Information:
+            color = 'info';
+            break;
+        case LogLevel.Warning:
+            color = 'warning';
+            break;
+        case LogLevel.Error:
+        case LogLevel.Critical:
+            color = 'error';
+            break;
+    }
+
+    const levelText = globalize.translate(`LogLevel.${level}`);
+
+    return (
+        <Chip
+            size='small'
+            color={color}
+            label={levelText}
+            title={levelText}
+        />
+    );
+};
+
+export default LogLevelChip;

src/apps/experimental/components/activityTable/OverviewCell.tsx

@@ -0,0 +1,64 @@
+import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
+import Info from '@mui/icons-material/Info';
+import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import React, { FC, useCallback, useState } from 'react';
+
+const OverviewCell: FC<ActivityLogEntry> = ({ Overview, ShortOverview }) => {
+    const displayValue = ShortOverview ?? Overview;
+    const [ open, setOpen ] = useState(false);
+
+    const onTooltipClose = useCallback(() => {
+        setOpen(false);
+    }, []);
+
+    const onTooltipOpen = useCallback(() => {
+        setOpen(true);
+    }, []);
+
+    if (!displayValue) return null;
+
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                width: '100%',
+                alignItems: 'center'
+            }}
+        >
+            <Box
+                sx={{
+                    flexGrow: 1,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis'
+                }}
+                component='div'
+                title={displayValue}
+            >
+                {displayValue}
+            </Box>
+            {ShortOverview && Overview && (
+                <ClickAwayListener onClickAway={onTooltipClose}>
+                    <Tooltip
+                        title={Overview}
+                        placement='top'
+                        arrow
+                        onClose={onTooltipClose}
+                        open={open}
+                        disableFocusListener
+                        disableHoverListener
+                        disableTouchListener
+                    >
+                        <IconButton onClick={onTooltipOpen}>
+                            <Info />
+                        </IconButton>
+                    </Tooltip>
+                </ClickAwayListener>
+            )}
+        </Box>
+    );
+};
+
+export default OverviewCell;

src/apps/experimental/components/drawers/dashboard/DevicesDrawerSection.tsx

@@ -40,7 +40,7 @@ const DevicesDrawerSection = () => {
                 </ListItemLink>
             </ListItem>
             <ListItem disablePadding>
-                <ListItemLink to='/serveractivity.html'>
+                <ListItemLink to='/dashboard/activity'>
                     <ListItemIcon>
                         <Analytics />
                     </ListItemIcon>

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

@@ -0,0 +1,51 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import React, { FC } from 'react';
+import { useGetGenres } from 'hooks/useFetchItems';
+import globalize from 'scripts/globalize';
+import Loading from 'components/loading/LoadingComponent';
+import GenresSectionContainer from './GenresSectionContainer';
+import { CollectionType } from 'types/collectionType';
+
+interface GenresItemsContainerProps {
+    parentId?: string | null;
+    collectionType?: CollectionType;
+    itemType: BaseItemKind;
+}
+
+const GenresItemsContainer: FC<GenresItemsContainerProps> = ({
+    parentId,
+    collectionType,
+    itemType
+}) => {
+    const { isLoading, data: genresResult } = useGetGenres(
+        itemType,
+        parentId
+    );
+
+    if (isLoading) {
+        return <Loading />;
+    }
+
+    return (
+        <>
+            {!genresResult?.Items?.length ? (
+                <div className='noItemsMessage centerMessage'>
+                    <h1>{globalize.translate('MessageNothingHere')}</h1>
+                    <p>{globalize.translate('MessageNoGenresAvailable')}</p>
+                </div>
+            ) : (
+                genresResult?.Items?.map((genre) => (
+                    <GenresSectionContainer
+                        key={genre.Id}
+                        collectionType={collectionType}
+                        parentId={parentId}
+                        itemType={itemType}
+                        genre={genre}
+                    />
+                ))
+            )}
+        </>
+    );
+};
+
+export default GenresItemsContainer;

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

@@ -0,0 +1,79 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import { ItemFields } from '@jellyfin/sdk/lib/generated-client/models/item-fields';
+import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type';
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
+import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order';
+import escapeHTML from 'escape-html';
+import React, { FC } from 'react';
+
+import { useGetItems } from 'hooks/useFetchItems';
+import Loading from 'components/loading/LoadingComponent';
+import { appRouter } from 'components/router/appRouter';
+import SectionContainer from './SectionContainer';
+import { CollectionType } from 'types/collectionType';
+
+interface GenresSectionContainerProps {
+    parentId?: string | null;
+    collectionType?: CollectionType;
+    itemType: BaseItemKind;
+    genre: BaseItemDto;
+}
+
+const GenresSectionContainer: FC<GenresSectionContainerProps> = ({
+    parentId,
+    collectionType,
+    itemType,
+    genre
+}) => {
+    const getParametersOptions = () => {
+        return {
+            sortBy: [ItemSortBy.Random],
+            sortOrder: [SortOrder.Ascending],
+            includeItemTypes: [itemType],
+            recursive: true,
+            fields: [
+                ItemFields.PrimaryImageAspectRatio,
+                ItemFields.MediaSourceCount,
+                ItemFields.BasicSyncInfo
+            ],
+            imageTypeLimit: 1,
+            enableImageTypes: [ImageType.Primary],
+            limit: 25,
+            genreIds: genre.Id ? [genre.Id] : undefined,
+            enableTotalRecordCount: false,
+            parentId: parentId ?? undefined
+        };
+    };
+
+    const { isLoading, data: itemsResult } = useGetItems(getParametersOptions());
+
+    const getRouteUrl = (item: BaseItemDto) => {
+        return appRouter.getRouteUrl(item, {
+            context: collectionType,
+            parentId: parentId
+        });
+    };
+
+    if (isLoading) {
+        return <Loading />;
+    }
+
+    return <SectionContainer
+        sectionTitle={escapeHTML(genre.Name)}
+        items={itemsResult?.Items || []}
+        url={getRouteUrl(genre)}
+        cardOptions={{
+            scalable: true,
+            overlayPlayButton: true,
+            showTitle: true,
+            centerText: true,
+            cardLayout: false,
+            shape: itemType === BaseItemKind.MusicAlbum ? 'overflowSquare' : 'overflowPortrait',
+            showParentTitle: itemType === BaseItemKind.MusicAlbum ? true : false,
+            showYear: itemType === BaseItemKind.MusicAlbum ? false : true
+        }}
+    />;
+};
+
+export default GenresSectionContainer;

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

@@ -0,0 +1,66 @@
+import { RecommendationDto, RecommendationType } from '@jellyfin/sdk/lib/generated-client';
+import React, { FC } from 'react';
+
+import globalize from 'scripts/globalize';
+import escapeHTML from 'escape-html';
+import SectionContainer from './SectionContainer';
+
+interface RecommendationContainerProps {
+    recommendation?: RecommendationDto;
+}
+
+const RecommendationContainer: FC<RecommendationContainerProps> = ({
+    recommendation = {}
+}) => {
+    let title = '';
+
+    switch (recommendation.RecommendationType) {
+        case RecommendationType.SimilarToRecentlyPlayed:
+            title = globalize.translate(
+                'RecommendationBecauseYouWatched',
+                recommendation.BaselineItemName
+            );
+            break;
+
+        case RecommendationType.SimilarToLikedItem:
+            title = globalize.translate(
+                'RecommendationBecauseYouLike',
+                recommendation.BaselineItemName
+            );
+            break;
+
+        case RecommendationType.HasDirectorFromRecentlyPlayed:
+        case RecommendationType.HasLikedDirector:
+            title = globalize.translate(
+                'RecommendationDirectedBy',
+                recommendation.BaselineItemName
+            );
+            break;
+
+        case RecommendationType.HasActorFromRecentlyPlayed:
+        case RecommendationType.HasLikedActor:
+            title = globalize.translate(
+                'RecommendationStarring',
+                recommendation.BaselineItemName
+            );
+            break;
+    }
+
+    return (
+        <SectionContainer
+            sectionTitle={escapeHTML(title)}
+            items={recommendation.Items || []}
+            cardOptions={{
+                shape: 'overflowPortrait',
+                showYear: true,
+                scalable: true,
+                overlayPlayButton: true,
+                showTitle: true,
+                centerText: true,
+                cardLayout: false
+            }}
+        />
+    );
+};
+
+export default RecommendationContainer;

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

@@ -0,0 +1,73 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import React, { FC, useEffect, useRef } from 'react';
+
+import cardBuilder from 'components/cardbuilder/cardBuilder';
+import ItemsContainerElement from 'elements/ItemsContainerElement';
+import Scroller from 'elements/emby-scroller/Scroller';
+import LinkButton from 'elements/emby-button/LinkButton';
+import imageLoader from 'components/images/imageLoader';
+
+import { CardOptions } from 'types/cardOptions';
+
+interface SectionContainerProps {
+    url?: string;
+    sectionTitle: string;
+    items: BaseItemDto[];
+    cardOptions: CardOptions;
+}
+
+const SectionContainer: FC<SectionContainerProps> = ({
+    sectionTitle,
+    url,
+    items,
+    cardOptions
+}) => {
+    const element = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const itemsContainer = element.current?.querySelector('.itemsContainer');
+        cardBuilder.buildCards(items, {
+            itemsContainer: itemsContainer,
+            parentContainer: element.current,
+
+            ...cardOptions
+        });
+
+        imageLoader.lazyChildren(itemsContainer);
+    }, [cardOptions, items]);
+
+    return (
+        <div ref={element} className='verticalSection hide'>
+            <div className='sectionTitleContainer sectionTitleContainer-cards padded-left'>
+                {url && items.length > 5 ? (
+                    <LinkButton
+                        className='more button-flat button-flat-mini sectionTitleTextButton btnMoreFromGenre'
+                        href={url}
+                    >
+                        <h2 className='sectionTitle sectionTitle-cards'>
+                            {sectionTitle}
+                        </h2>
+                        <span
+                            className='material-icons chevron_right'
+                            aria-hidden='true'
+                        ></span>
+                    </LinkButton>
+                ) : (
+                    <h2 className='sectionTitle sectionTitle-cards'>
+                        {sectionTitle}
+                    </h2>
+                )}
+            </div>
+
+            <Scroller
+                className='padded-top-focusscale padded-bottom-focusscale'
+                isMouseWheelEnabled={false}
+                isCenterFocusEnabled={true}
+            >
+                <ItemsContainerElement className='itemsContainer scrollSlider focuscontainer-x' />
+            </Scroller>
+        </div>
+    );
+};
+
+export default SectionContainer;

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

@@ -0,0 +1,206 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import { ItemSortBy } from '@jellyfin/sdk/lib/models/api/item-sort-by';
+import { SortOrder } from '@jellyfin/sdk/lib/generated-client/models/sort-order';
+import React, { FC } from 'react';
+import * as userSettings from 'scripts/settings/userSettings';
+import SuggestionsSectionContainer from './SuggestionsSectionContainer';
+import { Sections, SectionsView, SectionsViewType } from 'types/suggestionsSections';
+
+const getSuggestionsSections = (): Sections[] => {
+    return [
+        {
+            name: 'HeaderContinueWatching',
+            viewType: SectionsViewType.ResumeItems,
+            type: 'Movie',
+            view: SectionsView.ContinueWatchingMovies,
+            parametersOptions: {
+                includeItemTypes: [BaseItemKind.Movie]
+            },
+            cardOptions: {
+                scalable: true,
+                overlayPlayButton: true,
+                showTitle: true,
+                centerText: true,
+                cardLayout: false,
+                preferThumb: true,
+                shape: 'overflowBackdrop',
+                showYear: true
+            }
+        },
+        {
+            name: 'HeaderLatestMovies',
+            viewType: SectionsViewType.LatestMedia,
+            type: 'Movie',
+            view: SectionsView.LatestMovies,
+            parametersOptions: {
+                includeItemTypes: [BaseItemKind.Movie]
+            },
+            cardOptions: {
+                scalable: true,
+                overlayPlayButton: true,
+                showTitle: true,
+                centerText: true,
+                cardLayout: false,
+                shape: 'overflowPortrait',
+                showYear: true
+            }
+        },
+        {
+            name: 'HeaderContinueWatching',
+            viewType: SectionsViewType.ResumeItems,
+            type: 'Episode',
+            view: SectionsView.ContinueWatchingEpisode,
+            parametersOptions: {
+                includeItemTypes: [BaseItemKind.Episode]
+            },
+            cardOptions: {
+                scalable: true,
+                overlayPlayButton: true,
+                showTitle: true,
+                centerText: true,
+                cardLayout: false,
+                shape: 'overflowBackdrop',
+                preferThumb: true,
+                inheritThumb:
+                    !userSettings.useEpisodeImagesInNextUpAndResume(undefined),
+                showYear: true
+            }
+        },
+        {
+            name: 'HeaderLatestEpisodes',
+            viewType: SectionsViewType.LatestMedia,
+            type: 'Episode',
+            view: SectionsView.LatestEpisode,
+            parametersOptions: {
+                includeItemTypes: [BaseItemKind.Episode]
+            },
+            cardOptions: {
+                scalable: true,
+                overlayPlayButton: true,
+                showTitle: true,
+                centerText: true,
+                cardLayout: false,
+                shape: 'overflowBackdrop',
+                preferThumb: true,
+                showSeriesYear: true,
+                showParentTitle: true,
+                overlayText: false,
+                showUnplayedIndicator: false,
+                showChildCountIndicator: true,
+                lazy: true,
+                lines: 2
+            }
+        },
+        {
+            name: 'NextUp',
+            viewType: SectionsViewType.NextUp,
+            type: 'nextup',
+            view: SectionsView.NextUp,
+            cardOptions: {
+                scalable: true,
+                overlayPlayButton: true,
+                showTitle: true,
+                centerText: true,
+                cardLayout: false,
+                shape: 'overflowBackdrop',
+                preferThumb: true,
+                inheritThumb:
+                    !userSettings.useEpisodeImagesInNextUpAndResume(undefined),
+                showParentTitle: true,
+                overlayText: false
+            }
+        },
+        {
+            name: 'HeaderLatestMusic',
+            viewType: SectionsViewType.LatestMedia,
+            type: 'Audio',
+            view: SectionsView.LatestMusic,
+            parametersOptions: {
+                includeItemTypes: [BaseItemKind.Audio]
+            },
+            cardOptions: {
+                showUnplayedIndicator: false,
+                shape: 'overflowSquare',
+                showTitle: true,
+                showParentTitle: true,
+                lazy: true,
+                centerText: true,
+                overlayPlayButton: true,
+                cardLayout: false,
+                coverImage: true
+            }
+        },
+        {
+            name: 'HeaderRecentlyPlayed',
+            type: 'Audio',
+            view: SectionsView.RecentlyPlayedMusic,
+            parametersOptions: {
+                sortBy: [ItemSortBy.DatePlayed],
+                sortOrder: [SortOrder.Descending],
+                includeItemTypes: [BaseItemKind.Audio]
+            },
+            cardOptions: {
+                showUnplayedIndicator: false,
+                shape: 'overflowSquare',
+                showTitle: true,
+                showParentTitle: true,
+                action: 'instantmix',
+                lazy: true,
+                centerText: true,
+                overlayMoreButton: true,
+                cardLayout: false,
+                coverImage: true
+            }
+        },
+        {
+            name: 'HeaderFrequentlyPlayed',
+            type: 'Audio',
+            view: SectionsView.FrequentlyPlayedMusic,
+            parametersOptions: {
+                sortBy: [ItemSortBy.PlayCount],
+                sortOrder: [SortOrder.Descending],
+                includeItemTypes: [BaseItemKind.Audio]
+            },
+            cardOptions: {
+                showUnplayedIndicator: false,
+                shape: 'overflowSquare',
+                showTitle: true,
+                showParentTitle: true,
+                action: 'instantmix',
+                lazy: true,
+                centerText: true,
+                overlayMoreButton: true,
+                cardLayout: false,
+                coverImage: true
+            }
+        }
+    ];
+};
+
+interface SuggestionsItemsContainerProps {
+    parentId?: string | null;
+    sectionsView: SectionsView[];
+}
+
+const SuggestionsItemsContainer: FC<SuggestionsItemsContainerProps> = ({
+    parentId,
+    sectionsView
+}) => {
+    const suggestionsSections = getSuggestionsSections();
+
+    return (
+        <>
+            {suggestionsSections
+                .filter((section) => sectionsView.includes(section.view))
+                .map((section) => (
+                    <SuggestionsSectionContainer
+                        key={section.view}
+                        parentId={parentId}
+                        section={section}
+                    />
+                ))}
+        </>
+    );
+};
+
+export default SuggestionsItemsContainer;

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

@@ -0,0 +1,49 @@
+import React, { FC } from 'react';
+import { useGetItemsBySectionType } from 'hooks/useFetchItems';
+import globalize from 'scripts/globalize';
+
+import Loading from 'components/loading/LoadingComponent';
+import { appRouter } from 'components/router/appRouter';
+import SectionContainer from './SectionContainer';
+
+import { Sections } from 'types/suggestionsSections';
+
+interface SuggestionsSectionContainerProps {
+    parentId?: string | null;
+    section: Sections;
+}
+
+const SuggestionsSectionContainer: FC<SuggestionsSectionContainerProps> = ({
+    parentId,
+    section
+}) => {
+    const getRouteUrl = () => {
+        return appRouter.getRouteUrl('list', {
+            serverId: window.ApiClient.serverId(),
+            itemTypes: section.type,
+            parentId: parentId
+        });
+    };
+
+    const { isLoading, data: items } = useGetItemsBySectionType(
+        section,
+        parentId
+    );
+
+    if (isLoading) {
+        return <Loading />;
+    }
+
+    return (
+        <SectionContainer
+            sectionTitle={globalize.translate(section.name)}
+            items={items || []}
+            url={getRouteUrl()}
+            cardOptions={{
+                ...section.cardOptions
+            }}
+        />
+    );
+};
+
+export default SuggestionsSectionContainer;

src/apps/experimental/components/library/filter/FilterButton.tsx

@@ -0,0 +1,457 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import React, { FC, useCallback } from 'react';
+import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
+import Box from '@mui/material/Box';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import Popover from '@mui/material/Popover';
+import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import MuiAccordionSummary, {
+    AccordionSummaryProps
+} from '@mui/material/AccordionSummary';
+import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+
+import { useGetQueryFiltersLegacy, useGetStudios } from 'hooks/useFetchItems';
+import globalize from 'scripts/globalize';
+
+import FiltersFeatures from './FiltersFeatures';
+import FiltersGenres from './FiltersGenres';
+import FiltersOfficialRatings from './FiltersOfficialRatings';
+import FiltersEpisodesStatus from './FiltersEpisodesStatus';
+import FiltersSeriesStatus from './FiltersSeriesStatus';
+import FiltersStatus from './FiltersStatus';
+import FiltersStudios from './FiltersStudios';
+import FiltersTags from './FiltersTags';
+import FiltersVideoTypes from './FiltersVideoTypes';
+import FiltersYears from './FiltersYears';
+
+import { LibraryViewSettings } from 'types/library';
+import { LibraryTab } from 'types/libraryTab';
+
+const Accordion = styled((props: AccordionProps) => (
+    <MuiAccordion
+        disableGutters
+        elevation={0}
+        TransitionProps={{ unmountOnExit: true }}
+        square
+        {...props}
+    />
+))(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    '&:not(:last-child)': {
+        borderBottom: 0
+    },
+    '&:before': {
+        display: 'none'
+    }
+}));
+
+const AccordionSummary = styled((props: AccordionSummaryProps) => (
+    <MuiAccordionSummary
+        expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
+        {...props}
+    />
+))(({ theme }) => ({
+    backgroundColor:
+        theme.palette.mode === 'dark' ?
+            'rgba(255, 255, 255, .05)' :
+            'rgba(0, 0, 0, .03)',
+    '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+        transform: 'rotate(90deg)'
+    },
+    '& .MuiAccordionSummary-content': {
+        marginLeft: theme.spacing(1)
+    }
+}));
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+    padding: theme.spacing(2),
+    borderTop: '1px solid rgba(0, 0, 0, .125)'
+}));
+
+interface FilterButtonProps {
+    parentId: string | null | undefined;
+    itemType: BaseItemKind;
+    viewType: LibraryTab;
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<
+        React.SetStateAction<LibraryViewSettings>
+    >;
+}
+
+const FilterButton: FC<FilterButtonProps> = ({
+    parentId,
+    itemType,
+    viewType,
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const [expanded, setExpanded] = React.useState<string | false>(false);
+    const open = Boolean(anchorEl);
+    const id = open ? 'filter-popover' : undefined;
+
+    const { data } = useGetQueryFiltersLegacy(parentId, itemType);
+    const { data: studios } = useGetStudios(parentId, itemType);
+
+    const handleChange =
+        (panel: string) =>
+            (event: React.SyntheticEvent, newExpanded: boolean) => {
+                setExpanded(newExpanded ? panel : false);
+            };
+
+    const handleClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    }, []);
+
+    const handleClose = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+
+    const isFiltersLegacyEnabled = () => {
+        return (
+            viewType === LibraryTab.Movies
+            || viewType === LibraryTab.Series
+            || viewType === LibraryTab.Albums
+            || viewType === LibraryTab.AlbumArtists
+            || viewType === LibraryTab.Artists
+            || viewType === LibraryTab.Songs
+            || viewType === LibraryTab.Episodes
+        );
+    };
+
+    const isFiltersStudiosEnabled = () => {
+        return (
+            viewType === LibraryTab.Movies
+            || viewType === LibraryTab.Series
+        );
+    };
+
+    const isFiltersFeaturesEnabled = () => {
+        return (
+            viewType === LibraryTab.Movies
+            || viewType === LibraryTab.Series
+            || viewType === LibraryTab.Episodes
+        );
+    };
+
+    const isFiltersVideoTypesEnabled = () => {
+        return (
+            viewType === LibraryTab.Movies
+            || viewType === LibraryTab.Episodes
+        );
+    };
+
+    const isFiltersSeriesStatusEnabled = () => {
+        return viewType === LibraryTab.Series;
+    };
+
+    const isFiltersEpisodesStatusEnabled = () => {
+        return viewType === LibraryTab.Episodes;
+    };
+
+    return (
+        <Box>
+            <IconButton
+                title={globalize.translate('Filter')}
+                sx={{ ml: 2 }}
+                aria-describedby={id}
+                className='paper-icon-button-light btnShuffle autoSize'
+                onClick={handleClick}
+            >
+                <FilterListIcon />
+            </IconButton>
+            <Popover
+                id={id}
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'center'
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'center'
+                }}
+                PaperProps={{
+                    style: {
+                        maxHeight: '50%',
+                        width: 250
+                    }
+                }}
+            >
+                <Accordion
+                    expanded={expanded === 'filtersStatus'}
+                    onChange={handleChange('filtersStatus')}
+                >
+                    <AccordionSummary
+                        aria-controls='filtersStatus-content'
+                        id='filtersStatus-header'
+                    >
+                        <Typography>
+                            {globalize.translate('Filters')}
+                        </Typography>
+                    </AccordionSummary>
+                    <AccordionDetails>
+                        <FiltersStatus
+                            viewType={viewType}
+                            libraryViewSettings={libraryViewSettings}
+                            setLibraryViewSettings={setLibraryViewSettings}
+                        />
+                    </AccordionDetails>
+                </Accordion>
+                {isFiltersSeriesStatusEnabled() && (
+                    <>
+                        <Accordion
+                            expanded={expanded === 'filtersSeriesStatus'}
+                            onChange={handleChange('filtersSeriesStatus')}
+                        >
+                            <AccordionSummary
+                                aria-controls='filtersSeriesStatus-content'
+                                id='filtersSeriesStatus-header'
+                            >
+                                <Typography>
+                                    {globalize.translate('HeaderSeriesStatus')}
+                                </Typography>
+                            </AccordionSummary>
+                            <AccordionDetails>
+                                <FiltersSeriesStatus
+                                    libraryViewSettings={libraryViewSettings}
+                                    setLibraryViewSettings={
+                                        setLibraryViewSettings
+                                    }
+                                />
+                            </AccordionDetails>
+                        </Accordion>
+                    </>
+                )}
+                {isFiltersEpisodesStatusEnabled() && (
+                    <>
+                        <Accordion
+                            expanded={expanded === 'filtersEpisodesStatus'}
+                            onChange={handleChange('filtersEpisodesStatus')}
+                        >
+                            <AccordionSummary
+                                aria-controls='filtersEpisodesStatus-content'
+                                id='filtersEpisodesStatus-header'
+                            >
+                                <Typography>
+                                    {globalize.translate('HeaderEpisodesStatus')}
+                                </Typography>
+                            </AccordionSummary>
+                            <AccordionDetails>
+                                <FiltersEpisodesStatus
+                                    libraryViewSettings={libraryViewSettings}
+                                    setLibraryViewSettings={
+                                        setLibraryViewSettings
+                                    }
+                                />
+                            </AccordionDetails>
+                        </Accordion>
+                    </>
+                )}
+                {isFiltersFeaturesEnabled() && (
+                    <>
+                        <Accordion
+                            expanded={expanded === 'filtersFeatures'}
+                            onChange={handleChange('filtersFeatures')}
+                        >
+                            <AccordionSummary
+                                aria-controls='filtersFeatures-content'
+                                id='filtersFeatures-header'
+                            >
+                                <Typography>
+                                    {globalize.translate('Features')}
+                                </Typography>
+                            </AccordionSummary>
+                            <AccordionDetails>
+                                <FiltersFeatures
+                                    libraryViewSettings={libraryViewSettings}
+                                    setLibraryViewSettings={
+                                        setLibraryViewSettings
+                                    }
+                                />
+                            </AccordionDetails>
+                        </Accordion>
+                    </>
+                )}
+
+                {isFiltersVideoTypesEnabled() && (
+                    <>
+                        <Accordion
+                            expanded={expanded === 'filtersVideoTypes'}
+                            onChange={handleChange('filtersVideoTypes')}
+                        >
+                            <AccordionSummary
+                                aria-controls='filtersVideoTypes-content'
+                                id='filtersVideoTypes-header'
+                            >
+                                <Typography>
+                                    {globalize.translate('HeaderVideoType')}
+                                </Typography>
+                            </AccordionSummary>
+                            <AccordionDetails>
+                                <FiltersVideoTypes
+                                    libraryViewSettings={libraryViewSettings}
+                                    setLibraryViewSettings={
+                                        setLibraryViewSettings
+                                    }
+                                />
+                            </AccordionDetails>
+                        </Accordion>
+                    </>
+                )}
+
+                {isFiltersLegacyEnabled() && (
+                    <>
+                        {data?.Genres && data?.Genres?.length > 0 && (
+                            <Accordion
+                                expanded={expanded === 'filtersGenres'}
+                                onChange={handleChange('filtersGenres')}
+                            >
+                                <AccordionSummary
+                                    aria-controls='filtersGenres-content'
+                                    id='filtersGenres-header'
+                                >
+                                    <Typography>
+                                        {globalize.translate('Genres')}
+                                    </Typography>
+                                </AccordionSummary>
+                                <AccordionDetails>
+                                    <FiltersGenres
+                                        filters={data}
+                                        libraryViewSettings={
+                                            libraryViewSettings
+                                        }
+                                        setLibraryViewSettings={
+                                            setLibraryViewSettings
+                                        }
+                                    />
+                                </AccordionDetails>
+                            </Accordion>
+                        )}
+
+                        {data?.OfficialRatings
+                            && data?.OfficialRatings?.length > 0 && (
+                            <Accordion
+                                expanded={
+                                    expanded === 'filtersOfficialRatings'
+                                }
+                                onChange={handleChange(
+                                    'filtersOfficialRatings'
+                                )}
+                            >
+                                <AccordionSummary
+                                    aria-controls='filtersOfficialRatings-content'
+                                    id='filtersOfficialRatings-header'
+                                >
+                                    <Typography>
+                                        {globalize.translate(
+                                            'HeaderParentalRatings'
+                                        )}
+                                    </Typography>
+                                </AccordionSummary>
+                                <AccordionDetails>
+                                    <FiltersOfficialRatings
+                                        filters={data}
+                                        libraryViewSettings={
+                                            libraryViewSettings
+                                        }
+                                        setLibraryViewSettings={
+                                            setLibraryViewSettings
+                                        }
+                                    />
+                                </AccordionDetails>
+                            </Accordion>
+                        )}
+
+                        {data?.Tags && data?.Tags.length > 0 && (
+                            <Accordion
+                                expanded={expanded === 'filtersTags'}
+                                onChange={handleChange('filtersTags')}
+                            >
+                                <AccordionSummary
+                                    aria-controls='filtersTags-content'
+                                    id='filtersTags-header'
+                                >
+                                    <Typography>
+                                        {globalize.translate('Tags')}
+                                    </Typography>
+                                </AccordionSummary>
+                                <AccordionDetails>
+                                    <FiltersTags
+                                        filters={data}
+                                        libraryViewSettings={
+                                            libraryViewSettings
+                                        }
+                                        setLibraryViewSettings={
+                                            setLibraryViewSettings
+                                        }
+                                    />
+                                </AccordionDetails>
+                            </Accordion>
+                        )}
+
+                        {data?.Years && data?.Years?.length > 0 && (
+                            <Accordion
+                                expanded={expanded === 'filtersYears'}
+                                onChange={handleChange('filtersYears')}
+                            >
+                                <AccordionSummary
+                                    aria-controls='filtersYears-content'
+                                    id='filtersYears-header'
+                                >
+                                    <Typography>
+                                        {globalize.translate('HeaderYears')}
+                                    </Typography>
+                                </AccordionSummary>
+                                <AccordionDetails>
+                                    <FiltersYears
+                                        filters={data}
+                                        libraryViewSettings={
+                                            libraryViewSettings
+                                        }
+                                        setLibraryViewSettings={
+                                            setLibraryViewSettings
+                                        }
+                                    />
+                                </AccordionDetails>
+                            </Accordion>
+                        )}
+                    </>
+                )}
+                {isFiltersStudiosEnabled() && (
+                    <>
+                        <Accordion
+                            expanded={expanded === 'filtersStudios'}
+                            onChange={handleChange('filtersStudios')}
+                        >
+                            <AccordionSummary
+                                aria-controls='filtersStudios-content'
+                                id='filtersStudios-header'
+                            >
+                                <Typography>
+                                    {globalize.translate('Studios')}
+                                </Typography>
+                            </AccordionSummary>
+                            <AccordionDetails>
+                                <FiltersStudios
+                                    filters={studios}
+                                    libraryViewSettings={libraryViewSettings}
+                                    setLibraryViewSettings={
+                                        setLibraryViewSettings
+                                    }
+                                />
+                            </AccordionDetails>
+                        </Accordion>
+                    </>
+                )}
+            </Popover>
+        </Box>
+    );
+};
+
+export default FilterButton;

src/apps/experimental/components/library/filter/FiltersEpisodesStatus.tsx

@@ -0,0 +1,75 @@
+import React, { FC, useCallback } from 'react';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import globalize from 'scripts/globalize';
+import { LibraryViewSettings } from 'types/library';
+
+const episodesStatusOptions = [
+    { label: 'OptionSpecialEpisode', value: 'ParentIndexNumber' },
+    { label: 'OptionMissingEpisode', value: 'IsMissing' },
+    { label: 'OptionUnairedEpisode', value: 'IsUnaired' }
+];
+
+interface FiltersEpisodesStatusProps {
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
+}
+
+const FiltersEpisodesStatus: FC<FiltersEpisodesStatusProps> = ({
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const onFiltersEpisodesStatusChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            event.preventDefault();
+            const value = String(event.target.value);
+            const existingValue = libraryViewSettings?.Filters?.EpisodesStatus;
+
+            if (existingValue?.includes(value)) {
+                const newValue = existingValue?.filter(
+                    (prevState: string) => prevState !== value
+                );
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: { ...prevState.Filters, EpisodesStatus: newValue }
+                }));
+            } else {
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: {
+                        ...prevState.Filters,
+                        EpisodesStatus: [...(existingValue ?? []), value]
+                    }
+                }));
+            }
+        },
+        [setLibraryViewSettings, libraryViewSettings?.Filters?.EpisodesStatus]
+    );
+
+    return (
+        <FormGroup>
+            {episodesStatusOptions.map((filter) => (
+                <FormControlLabel
+                    key={filter.value}
+                    control={
+                        <Checkbox
+                            checked={
+                                !!libraryViewSettings?.Filters?.EpisodesStatus?.includes(
+                                    String( filter.value)
+                                )
+                            }
+                            onChange={onFiltersEpisodesStatusChange}
+                            value={String(filter.value)}
+                        />
+                    }
+                    label={globalize.translate(filter.label)}
+                />
+            ))}
+        </FormGroup>
+    );
+};
+
+export default FiltersEpisodesStatus;

src/apps/experimental/components/library/filter/FiltersFeatures.tsx

@@ -0,0 +1,81 @@
+import React, { FC, useCallback } from 'react';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import globalize from 'scripts/globalize';
+import { LibraryViewSettings } from 'types/library';
+
+const featuresOptions = [
+    { label: 'Subtitles', value: 'HasSubtitles' },
+    { label: 'Trailers', value: 'HasTrailer' },
+    { label: 'Extras', value: 'HasSpecialFeature' },
+    { label: 'ThemeSongs', value: 'HasThemeSong' },
+    { label: 'ThemeVideos', value: 'HasThemeVideo' }
+];
+
+interface FiltersFeaturesProps {
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<
+        React.SetStateAction<LibraryViewSettings>
+    >;
+}
+
+const FiltersFeatures: FC<FiltersFeaturesProps> = ({
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const onFiltersFeaturesChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            event.preventDefault();
+            const value = String(event.target.value);
+            const existingValue =
+                libraryViewSettings?.Filters?.Features;
+
+            if (existingValue?.includes(value)) {
+                const newValue = existingValue?.filter(
+                    (prevState: string) => prevState !== value
+                );
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: { ...prevState.Filters, Features: newValue }
+                }));
+            } else {
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: {
+                        ...prevState.Filters,
+                        Features: [...(existingValue ?? []), value]
+                    }
+                }));
+            }
+        },
+        [setLibraryViewSettings, libraryViewSettings?.Filters?.Features]
+    );
+
+    return (
+        <FormGroup>
+            {featuresOptions
+                .map((filter) => (
+                    <FormControlLabel
+                        key={filter.value}
+                        control={
+                            <Checkbox
+                                checked={
+                                    !!libraryViewSettings?.Filters?.Features?.includes(
+                                        String(filter.value)
+                                    )
+                                }
+                                onChange={onFiltersFeaturesChange}
+                                value={String(filter.value)}
+                            />
+                        }
+                        label={globalize.translate(filter.label)}
+                    />
+                ))}
+        </FormGroup>
+    );
+};
+
+export default FiltersFeatures;

src/apps/experimental/components/library/filter/FiltersGenres.tsx

@@ -0,0 +1,71 @@
+import type { QueryFiltersLegacy } from '@jellyfin/sdk/lib/generated-client';
+import React, { FC, useCallback } from 'react';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { LibraryViewSettings } from 'types/library';
+
+interface FiltersGenresProps {
+    filters?: QueryFiltersLegacy;
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
+}
+
+const FiltersGenres: FC<FiltersGenresProps> = ({
+    filters,
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const onFiltersGenresChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            event.preventDefault();
+            const value = String(event.target.value);
+            const existingValue = libraryViewSettings?.Filters?.Genres;
+
+            if (existingValue?.includes(value)) {
+                const newValue = existingValue?.filter(
+                    (prevState: string) => prevState !== value
+                );
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: { ...prevState.Filters, Genres: newValue }
+                }));
+            } else {
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: {
+                        ...prevState.Filters,
+                        Genres: [...(existingValue ?? []), value]
+                    }
+                }));
+            }
+        },
+        [setLibraryViewSettings, libraryViewSettings?.Filters?.Genres]
+    );
+
+    return (
+        <FormGroup>
+            {filters?.Genres?.map((filter) => (
+                <FormControlLabel
+                    key={filter}
+                    control={
+                        <Checkbox
+                            checked={
+                                !!libraryViewSettings?.Filters?.Genres?.includes(
+                                    String(filter)
+                                )
+                            }
+                            onChange={onFiltersGenresChange}
+                            value={String(filter)}
+                        />
+                    }
+                    label={filter}
+                />
+            ))}
+        </FormGroup>
+    );
+};
+
+export default FiltersGenres;

src/apps/experimental/components/library/filter/FiltersOfficialRatings.tsx

@@ -0,0 +1,71 @@
+import type { QueryFiltersLegacy } from '@jellyfin/sdk/lib/generated-client';
+import React, { FC, useCallback } from 'react';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { LibraryViewSettings } from 'types/library';
+
+interface FiltersOfficialRatingsProps {
+    filters?: QueryFiltersLegacy;
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
+}
+
+const FiltersOfficialRatings: FC<FiltersOfficialRatingsProps> = ({
+    filters,
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const onFiltersOfficialRatingsChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            event.preventDefault();
+            const value = String(event.target.value);
+            const existingValue = libraryViewSettings?.Filters?.OfficialRatings;
+
+            if (existingValue?.includes(value)) {
+                const newValue = existingValue?.filter(
+                    (prevState: string) => prevState !== value
+                );
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: { ...prevState.Filters, OfficialRatings: newValue }
+                }));
+            } else {
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: {
+                        ...prevState.Filters,
+                        OfficialRatings: [...(existingValue ?? []), value]
+                    }
+                }));
+            }
+        },
+        [setLibraryViewSettings, libraryViewSettings?.Filters?.OfficialRatings]
+    );
+
+    return (
+        <FormGroup>
+            {filters?.OfficialRatings?.map((filter) => (
+                <FormControlLabel
+                    key={filter}
+                    control={
+                        <Checkbox
+                            checked={
+                                !!libraryViewSettings?.Filters?.OfficialRatings?.includes(
+                                    String(filter)
+                                )
+                            }
+                            onChange={onFiltersOfficialRatingsChange}
+                            value={String(filter)}
+                        />
+                    }
+                    label={filter}
+                />
+            ))}
+        </FormGroup>
+    );
+};
+
+export default FiltersOfficialRatings;

src/apps/experimental/components/library/filter/FiltersSeriesStatus.tsx

@@ -0,0 +1,74 @@
+import React, { FC, useCallback } from 'react';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import globalize from 'scripts/globalize';
+import { LibraryViewSettings } from 'types/library';
+import { SeriesStatus } from '@jellyfin/sdk/lib/generated-client';
+
+const statusFiltersOptions = [
+    { label: 'Continuing', value: SeriesStatus.Continuing },
+    { label: 'Ended', value: SeriesStatus.Ended },
+    { label: 'Unreleased', value: SeriesStatus.Unreleased }
+];
+
+interface FiltersSeriesStatusProps {
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
+}
+
+const FiltersSeriesStatus: FC<FiltersSeriesStatusProps> = ({
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const onFiltersSeriesStatusChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            event.preventDefault();
+            const value = event.target.value as SeriesStatus;
+            const existingValue = libraryViewSettings?.Filters?.SeriesStatus;
+
+            if (existingValue?.includes(value)) {
+                const newValue = existingValue?.filter(
+                    (prevState: SeriesStatus) => prevState !== value
+                );
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: { ...prevState.Filters, SeriesStatus: newValue }
+                }));
+            } else {
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: {
+                        ...prevState.Filters,
+                        SeriesStatus: [...(existingValue ?? []), value]
+                    }
+                }));
+            }
+        },
+        [setLibraryViewSettings, libraryViewSettings?.Filters?.SeriesStatus]
+    );
+
+    return (
+        <FormGroup>
+            {statusFiltersOptions.map((filter) => (
+                <FormControlLabel
+                    key={filter.value}
+                    control={
+                        <Checkbox
+                            checked={
+                                !!libraryViewSettings?.Filters?.SeriesStatus?.includes( filter.value)
+                            }
+                            onChange={onFiltersSeriesStatusChange}
+                            value={filter.value}
+                        />
+                    }
+                    label={globalize.translate(filter.label)}
+                />
+            ))}
+        </FormGroup>
+    );
+};
+
+export default FiltersSeriesStatus;

src/apps/experimental/components/library/filter/FiltersStatus.tsx

@@ -0,0 +1,97 @@
+import React, { FC, useCallback } from 'react';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import globalize from 'scripts/globalize';
+import { LibraryViewSettings } from 'types/library';
+import { ItemFilter } from '@jellyfin/sdk/lib/generated-client';
+import { LibraryTab } from 'types/libraryTab';
+
+const statusFiltersOptions = [
+    { label: 'Played', value: ItemFilter.IsPlayed },
+    { label: 'Unplayed', value: ItemFilter.IsUnplayed },
+    { label: 'Favorite', value: ItemFilter.IsFavorite },
+    { label: 'ContinueWatching', value: ItemFilter.IsResumable }
+];
+
+interface FiltersStatusProps {
+    viewType: LibraryTab;
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
+}
+
+const FiltersStatus: FC<FiltersStatusProps> = ({
+    viewType,
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const onFiltersStatusChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            event.preventDefault();
+            const value = event.target.value as ItemFilter;
+            const existingValue = libraryViewSettings?.Filters?.Status;
+
+            if (existingValue?.includes(value)) {
+                const newValue = existingValue?.filter(
+                    (prevState: ItemFilter) => prevState !== value
+                );
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: { ...prevState.Filters, Status: newValue }
+                }));
+            } else {
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: {
+                        ...prevState.Filters,
+                        Status: [...(existingValue ?? []), value]
+                    }
+                }));
+            }
+        },
+        [setLibraryViewSettings, libraryViewSettings?.Filters?.Status]
+    );
+
+    const getVisibleFiltersStatus = () => {
+        const visibleFiltersStatus: ItemFilter[] = [ItemFilter.IsFavorite];
+
+        if (
+            viewType !== LibraryTab.Albums
+            && viewType !== LibraryTab.Artists
+            && viewType !== LibraryTab.AlbumArtists
+            && viewType !== LibraryTab.Songs
+        ) {
+            visibleFiltersStatus.push(ItemFilter.IsUnplayed);
+            visibleFiltersStatus.push(ItemFilter.IsPlayed);
+            visibleFiltersStatus.push(ItemFilter.IsResumable);
+        }
+
+        return visibleFiltersStatus;
+    };
+
+    return (
+        <FormGroup>
+            {statusFiltersOptions
+                .filter((filter) => getVisibleFiltersStatus().includes(filter.value))
+                .map((filter) => (
+                    <FormControlLabel
+                        key={filter.value}
+                        control={
+                            <Checkbox
+                                checked={
+                                    !!libraryViewSettings?.Filters?.Status?.includes(filter.value)
+                                }
+                                onChange={onFiltersStatusChange}
+                                value={filter.value}
+                            />
+                        }
+                        label={globalize.translate(filter.label)}
+                    />
+                ))}
+        </FormGroup>
+    );
+};
+
+export default FiltersStatus;

src/apps/experimental/components/library/filter/FiltersStudios.tsx

@@ -0,0 +1,71 @@
+import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
+import React, { FC, useCallback } from 'react';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { LibraryViewSettings } from 'types/library';
+
+interface FiltersStudiosProps {
+    filters?: BaseItemDtoQueryResult;
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
+}
+
+const FiltersStudios: FC<FiltersStudiosProps> = ({
+    filters,
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const onFiltersStudiosChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            event.preventDefault();
+            const value = String(event.target.value);
+            const existingValue = libraryViewSettings?.Filters?.StudioIds;
+
+            if (existingValue?.includes(value)) {
+                const newValue = existingValue?.filter(
+                    (prevState: string) => prevState !== value
+                );
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: { ...prevState.Filters, StudioIds: newValue }
+                }));
+            } else {
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: {
+                        ...prevState.Filters,
+                        StudioIds: [...(existingValue ?? []), value]
+                    }
+                }));
+            }
+        },
+        [setLibraryViewSettings, libraryViewSettings?.Filters?.StudioIds]
+    );
+
+    return (
+        <FormGroup>
+            {filters?.Items?.map((filter) => (
+                <FormControlLabel
+                    key={filter.Id}
+                    control={
+                        <Checkbox
+                            checked={
+                                !!libraryViewSettings?.Filters?.StudioIds?.includes(
+                                    String(filter.Id)
+                                )
+                            }
+                            onChange={onFiltersStudiosChange}
+                            value={String(filter.Id)}
+                        />
+                    }
+                    label={filter.Name}
+                />
+            ))}
+        </FormGroup>
+    );
+};
+
+export default FiltersStudios;

src/apps/experimental/components/library/filter/FiltersTags.tsx

@@ -0,0 +1,71 @@
+import type { QueryFiltersLegacy } from '@jellyfin/sdk/lib/generated-client';
+import React, { FC, useCallback } from 'react';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { LibraryViewSettings } from 'types/library';
+
+interface FiltersTagsProps {
+    filters?: QueryFiltersLegacy;
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
+}
+
+const FiltersTags: FC<FiltersTagsProps> = ({
+    filters,
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const onFiltersTagsChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            event.preventDefault();
+            const value = String(event.target.value);
+            const existingValue = libraryViewSettings?.Filters?.Tags;
+
+            if (existingValue?.includes(value)) {
+                const newValue = existingValue?.filter(
+                    (prevState: string) => prevState !== value
+                );
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: { ...prevState.Filters, Tags: newValue }
+                }));
+            } else {
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: {
+                        ...prevState.Filters,
+                        Tags: [...(existingValue ?? []), value]
+                    }
+                }));
+            }
+        },
+        [setLibraryViewSettings, libraryViewSettings?.Filters?.Tags]
+    );
+
+    return (
+        <FormGroup>
+            {filters?.Tags?.map((filter) => (
+                <FormControlLabel
+                    key={filter}
+                    control={
+                        <Checkbox
+                            checked={
+                                !!libraryViewSettings?.Filters?.Tags?.includes(
+                                    String(filter)
+                                )
+                            }
+                            onChange={onFiltersTagsChange}
+                            value={String(filter)}
+                        />
+                    }
+                    label={filter}
+                />
+            ))}
+        </FormGroup>
+    );
+};
+
+export default FiltersTags;

src/apps/experimental/components/library/filter/FiltersVideoTypes.tsx

@@ -0,0 +1,131 @@
+import React, { FC, useCallback } from 'react';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { LibraryViewSettings } from 'types/library';
+import { VideoType } from '@jellyfin/sdk/lib/generated-client';
+import globalize from 'scripts/globalize';
+
+const videoTypesOptions = [
+    { label: 'DVD', value: VideoType.Dvd },
+    { label: 'Blu-ray', value: VideoType.BluRay },
+    { label: 'ISO', value: VideoType.Iso }
+];
+
+interface FiltersVideoTypesProps {
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
+}
+
+const FiltersVideoTypes: FC<FiltersVideoTypesProps> = ({
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const onFiltersVideoTypesChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            event.preventDefault();
+            const value = event.target.value as VideoType;
+            const existingValue = libraryViewSettings?.Filters?.VideoTypes;
+
+            if (existingValue?.includes(value)) {
+                const newValue = existingValue?.filter(
+                    (prevState: VideoType) => prevState !== value
+                );
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: { ...prevState.Filters, VideoTypes: newValue }
+                }));
+            } else {
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: {
+                        ...prevState.Filters,
+                        VideoTypes: [...(existingValue ?? []), value]
+                    }
+                }));
+            }
+        },
+        [setLibraryViewSettings, libraryViewSettings?.Filters?.VideoTypes]
+    );
+
+    const handleChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            const name = event.target.name;
+
+            setLibraryViewSettings((prevState) => ({
+                ...prevState,
+                [name]: event.target.checked
+            }));
+        },
+        [setLibraryViewSettings]
+    );
+
+    return (
+        <FormGroup>
+            <FormControlLabel
+                control={
+                    <Checkbox
+                        checked={libraryViewSettings.IsSD}
+                        onChange={handleChange}
+                        name='IsSD'
+                    />
+                }
+                label={globalize.translate('SD')}
+            />
+            <FormControlLabel
+                control={
+                    <Checkbox
+                        checked={libraryViewSettings.IsHD}
+                        onChange={handleChange}
+                        name='IsHD'
+                    />
+                }
+                label={globalize.translate('HD')}
+            />
+            <FormControlLabel
+                control={
+                    <Checkbox
+                        checked={
+                            libraryViewSettings.Is4K
+                        }
+                        onChange={handleChange}
+                        name='Is4K'
+                    />
+                }
+                label={globalize.translate('4K')}
+            />
+            <FormControlLabel
+                control={
+                    <Checkbox
+                        checked={
+                            libraryViewSettings.Is3D
+                        }
+                        onChange={handleChange}
+                        name='Is3D'
+                    />
+                }
+                label={globalize.translate('3D')}
+            />
+            {videoTypesOptions
+                .map((filter) => (
+                    <FormControlLabel
+                        key={filter.value}
+                        control={
+                            <Checkbox
+                                checked={
+                                    !!libraryViewSettings?.Filters?.VideoTypes?.includes(filter.value)
+                                }
+                                onChange={onFiltersVideoTypesChange}
+                                value={filter.value}
+                            />
+                        }
+                        label={filter.label}
+                    />
+                ))}
+        </FormGroup>
+    );
+};
+
+export default FiltersVideoTypes;

src/apps/experimental/components/library/filter/FiltersYears.tsx

@@ -0,0 +1,71 @@
+import type { QueryFiltersLegacy } from '@jellyfin/sdk/lib/generated-client';
+import React, { FC, useCallback } from 'react';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { LibraryViewSettings } from 'types/library';
+
+interface FiltersYearsProps {
+    filters?: QueryFiltersLegacy;
+    libraryViewSettings: LibraryViewSettings;
+    setLibraryViewSettings: React.Dispatch<React.SetStateAction<LibraryViewSettings>>;
+}
+
+const FiltersYears: FC<FiltersYearsProps> = ({
+    filters,
+    libraryViewSettings,
+    setLibraryViewSettings
+}) => {
+    const onFiltersYearsChange = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            event.preventDefault();
+            const value = Number(event.target.value);
+            const existingValue = libraryViewSettings?.Filters?.Years;
+
+            if (existingValue?.includes(value)) {
+                const newValue = existingValue?.filter(
+                    (prevState: number) => prevState !== value
+                );
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: { ...prevState.Filters, Years: newValue }
+                }));
+            } else {
+                setLibraryViewSettings((prevState) => ({
+                    ...prevState,
+                    StartIndex: 0,
+                    Filters: {
+                        ...prevState.Filters,
+                        Years: [...(existingValue ?? []), value]
+                    }
+                }));
+            }
+        },
+        [setLibraryViewSettings, libraryViewSettings?.Filters?.Years]
+    );
+
+    return (
+        <FormGroup>
+            {filters?.Years?.map((filter) => (
+                <FormControlLabel
+                    key={filter}
+                    control={
+                        <Checkbox
+                            checked={
+                                !!libraryViewSettings?.Filters?.Years?.includes(
+                                    Number(filter)
+                                )
+                            }
+                            onChange={onFiltersYearsChange}
+                            value={String(filter)}
+                        />
+                    }
+                    label={filter}
+                />
+            ))}
+        </FormGroup>
+    );
+};
+
+export default FiltersYears;

src/apps/experimental/routes/asyncRoutes/admin.ts

@@ -1,6 +1,7 @@
-import { AsyncRoute } from '../../../../components/router/AsyncRoute';
+import { AsyncRoute, AsyncRouteType } from 'components/router/AsyncRoute';
 
 export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
+    { path: 'dashboard/activity', page: 'dashboard/activity', type: AsyncRouteType.Experimental },
     { path: 'notificationsettings.html', page: 'dashboard/notifications' },
     { path: 'usernew.html', page: 'user/usernew' },
     { path: 'userprofiles.html', page: 'user/userprofiles' },

src/apps/experimental/routes/dashboard/activity.tsx

@@ -0,0 +1,273 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { getActivityLogApi } from '@jellyfin/sdk/lib/utils/api/activity-log-api';
+import { getUserApi } from '@jellyfin/sdk/lib/utils/api/user-api';
+import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
+import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
+import PermMedia from '@mui/icons-material/PermMedia';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Typography from '@mui/material/Typography';
+import { DataGrid, type GridColDef } from '@mui/x-data-grid';
+import { Link, useSearchParams } from 'react-router-dom';
+
+import Page from 'components/Page';
+import UserAvatar from 'components/UserAvatar';
+import { useApi } from 'hooks/useApi';
+import { parseISO8601Date, toLocaleDateString, toLocaleTimeString } from 'scripts/datetime';
+import globalize from 'scripts/globalize';
+import { toBoolean } from 'utils/string';
+
+import LogLevelChip from '../../components/activityTable/LogLevelChip';
+import OverviewCell from '../../components/activityTable/OverviewCell';
+import GridActionsCellLink from '../../components/GridActionsCellLink';
+
+const DEFAULT_PAGE_SIZE = 25;
+const VIEW_PARAM = 'useractivity';
+
+const enum ActivityView {
+    All,
+    User,
+    System
+}
+
+const getActivityView = (param: string | null) => {
+    if (param === null) return ActivityView.All;
+    if (toBoolean(param)) return ActivityView.User;
+    return ActivityView.System;
+};
+
+const getRowId = (row: ActivityLogEntry) => row.Id ?? -1;
+
+const Activity = () => {
+    const { api } = useApi();
+    const [ searchParams, setSearchParams ] = useSearchParams();
+
+    const [ activityView, setActivityView ] = useState(
+        getActivityView(searchParams.get(VIEW_PARAM)));
+    const [ isLoading, setIsLoading ] = useState(true);
+    const [ paginationModel, setPaginationModel ] = useState({
+        page: 0,
+        pageSize: DEFAULT_PAGE_SIZE
+    });
+    const [ rowCount, setRowCount ] = useState(0);
+    const [ rows, setRows ] = useState<ActivityLogEntry[]>([]);
+    const [ users, setUsers ] = useState<Record<string, UserDto>>({});
+
+    const userColDef: GridColDef[] = activityView !== ActivityView.System ? [
+        {
+            field: 'User',
+            headerName: globalize.translate('LabelUser'),
+            width: 60,
+            valueGetter: ({ row }) => users[row.UserId]?.Name,
+            renderCell: ({ row }) => (
+                <IconButton
+                    size='large'
+                    color='inherit'
+                    sx={{ padding: 0 }}
+                    title={users[row.UserId]?.Name ?? undefined}
+                    component={Link}
+                    to={`/useredit.html?userId=${row.UserId}`}
+                >
+                    <UserAvatar user={users[row.UserId]} />
+                </IconButton>
+            )
+        }
+    ] : [];
+
+    const columns: GridColDef[] = [
+        {
+            field: 'Date',
+            headerName: globalize.translate('LabelDate'),
+            width: 90,
+            type: 'date',
+            valueGetter: ({ value }) => parseISO8601Date(value),
+            valueFormatter: ({ value }) => toLocaleDateString(value)
+        },
+        {
+            field: 'Time',
+            headerName: globalize.translate('LabelTime'),
+            width: 100,
+            type: 'dateTime',
+            valueGetter: ({ row }) => parseISO8601Date(row.Date),
+            valueFormatter: ({ value }) => toLocaleTimeString(value)
+        },
+        {
+            field: 'Severity',
+            headerName: globalize.translate('LabelLevel'),
+            width: 110,
+            renderCell: ({ value }) => (
+                value ? (
+                    <LogLevelChip level={value} />
+                ) : undefined
+            )
+        },
+        ...userColDef,
+        {
+            field: 'Name',
+            headerName: globalize.translate('LabelName'),
+            width: 200
+        },
+        {
+            field: 'Overview',
+            headerName: globalize.translate('LabelOverview'),
+            width: 200,
+            valueGetter: ({ row }) => row.ShortOverview ?? row.Overview,
+            renderCell: ({ row }) => (
+                <OverviewCell {...row} />
+            )
+        },
+        {
+            field: 'Type',
+            headerName: globalize.translate('LabelType'),
+            width: 120
+        },
+        {
+            field: 'actions',
+            type: 'actions',
+            getActions: ({ row }) => {
+                const actions = [];
+
+                if (row.ItemId) {
+                    actions.push(
+                        <GridActionsCellLink
+                            size='large'
+                            icon={<PermMedia />}
+                            label={globalize.translate('LabelMediaDetails')}
+                            title={globalize.translate('LabelMediaDetails')}
+                            to={`/details?id=${row.ItemId}`}
+                        />
+                    );
+                }
+
+                return actions;
+            }
+        }
+    ];
+
+    const onViewChange = useCallback((_e, newView: ActivityView | null) => {
+        if (newView !== null) {
+            setActivityView(newView);
+        }
+    }, []);
+
+    useEffect(() => {
+        if (api) {
+            const fetchUsers = async () => {
+                const { data } = await getUserApi(api).getUsers();
+                const usersById: Record<string, UserDto> = {};
+                data.forEach(user => {
+                    if (user.Id) {
+                        usersById[user.Id] = user;
+                    }
+                });
+
+                setUsers(usersById);
+            };
+
+            fetchUsers()
+                .catch(err => {
+                    console.error('[activity] failed to fetch users', err);
+                });
+        }
+    }, [ api ]);
+
+    useEffect(() => {
+        if (api) {
+            const fetchActivity = async () => {
+                const params: {
+                    startIndex: number,
+                    limit: number,
+                    hasUserId?: boolean
+                } = {
+                    startIndex: paginationModel.page * paginationModel.pageSize,
+                    limit: paginationModel.pageSize
+                };
+                if (activityView !== ActivityView.All) {
+                    params.hasUserId = activityView === ActivityView.User;
+                }
+
+                const { data } = await getActivityLogApi(api)
+                    .getLogEntries(params);
+
+                setRowCount(data.TotalRecordCount ?? 0);
+                setRows(data.Items ?? []);
+                setIsLoading(false);
+            };
+
+            setIsLoading(true);
+            fetchActivity()
+                .catch(err => {
+                    console.error('[activity] failed to fetch activity log entries', err);
+                });
+        }
+    }, [ activityView, api, paginationModel ]);
+
+    useEffect(() => {
+        const currentViewParam = getActivityView(searchParams.get(VIEW_PARAM));
+        if (currentViewParam !== activityView) {
+            if (activityView === ActivityView.All) {
+                searchParams.delete(VIEW_PARAM);
+            } else {
+                searchParams.set(VIEW_PARAM, `${activityView === ActivityView.User}`);
+            }
+            setSearchParams(searchParams);
+        }
+    }, [ activityView, searchParams, setSearchParams ]);
+
+    return (
+        <Page
+            id='serverActivityPage'
+            title={globalize.translate('HeaderActivity')}
+            className='mainAnimatedPage type-interior'
+        >
+            <div className='content-primary'>
+                <Box
+                    sx={{
+                        display: 'flex',
+                        alignItems: 'baseline',
+                        marginY: 2
+                    }}
+                >
+                    <Box sx={{ flexGrow: 1 }}>
+                        <Typography variant='h2'>
+                            {globalize.translate('HeaderActivity')}
+                        </Typography>
+                    </Box>
+                    <ToggleButtonGroup
+                        value={activityView}
+                        onChange={onViewChange}
+                        exclusive
+                    >
+                        <ToggleButton value={ActivityView.All}>
+                            {globalize.translate('All')}
+                        </ToggleButton>
+                        <ToggleButton value={ActivityView.User}>
+                            {globalize.translate('LabelUser')}
+                        </ToggleButton>
+                        <ToggleButton value={ActivityView.System}>
+                            {globalize.translate('LabelSystem')}
+                        </ToggleButton>
+                    </ToggleButtonGroup>
+                </Box>
+                <DataGrid
+                    columns={columns}
+                    rows={rows}
+                    pageSizeOptions={[ 10, 25, 50, 100 ]}
+                    paginationMode='server'
+                    paginationModel={paginationModel}
+                    onPaginationModelChange={setPaginationModel}
+                    rowCount={rowCount}
+                    getRowId={getRowId}
+                    loading={isLoading}
+                    sx={{
+                        minHeight: 500
+                    }}
+                />
+            </div>
+        </Page>
+    );
+};
+
+export default Activity;

src/apps/experimental/routes/home.tsx

@@ -65,12 +65,12 @@ const Home: FunctionComponent = () => {
                 depends = 'favorites';
         }
 
-        return import(/* webpackChunkName: "[request]" */ `../../../controllers/${depends}`).then(({ default: controllerFactory }) => {
+        return import(/* webpackChunkName: "[request]" */ `../../../controllers/${depends}`).then(({ default: ControllerFactory }) => {
             let controller = tabControllers[index];
 
             if (!controller) {
                 const tabContent = element.current?.querySelector(".tabContent[data-index='" + index + "']");
-                controller = new controllerFactory(tabContent, null);
+                controller = new ControllerFactory(tabContent, null);
                 tabControllers[index] = controller;
             }
 

src/apps/experimental/routes/legacyRoutes/admin.ts

@@ -163,12 +163,6 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
             controller: 'dashboard/scheduledtasks/scheduledtasks',
             view: 'dashboard/scheduledtasks/scheduledtasks.html'
         }
-    }, {
-        path: 'serveractivity.html',
-        pageProps: {
-            controller: 'dashboard/serveractivity',
-            view: 'dashboard/serveractivity.html'
-        }
     }, {
         path: 'apikeys.html',
         pageProps: {

src/apps/experimental/routes/movies/CollectionsView.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useCallback } from 'react';
 
-import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
+import ViewItemsContainer from 'components/common/ViewItemsContainer';
-import { LibraryViewProps } from '../../../../types/interface';
+import { LibraryViewProps } from 'types/library';
 
-const CollectionsView: FC<LibraryViewProps> = ({ topParentId }) => {
+const CollectionsView: FC<LibraryViewProps> = ({ parentId }) => {
     const getBasekey = useCallback(() => {
         return 'collections';
     }, []);
@@ -18,7 +18,7 @@ const CollectionsView: FC<LibraryViewProps> = ({ topParentId }) => {
 
     return (
         <ViewItemsContainer
-            topParentId={topParentId}
+            topParentId={parentId}
             isBtnFilterEnabled={false}
             isBtnNewCollectionEnabled={true}
             isAlphaPickerEnabled={false}

src/apps/experimental/routes/movies/FavoritesView.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useCallback } from 'react';
 
-import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
+import ViewItemsContainer from 'components/common/ViewItemsContainer';
-import { LibraryViewProps } from '../../../../types/interface';
+import { LibraryViewProps } from 'types/library';
 
-const FavoritesView: FC<LibraryViewProps> = ({ topParentId }) => {
+const FavoritesView: FC<LibraryViewProps> = ({ parentId }) => {
     const getBasekey = useCallback(() => {
         return 'favorites';
     }, []);
@@ -18,7 +18,7 @@ const FavoritesView: FC<LibraryViewProps> = ({ topParentId }) => {
 
     return (
         <ViewItemsContainer
-            topParentId={topParentId}
+            topParentId={parentId}
             getBasekey={getBasekey}
             getItemTypes={getItemTypes}
             getNoItemsMessage={getNoItemsMessage}

src/apps/experimental/routes/movies/GenresView.tsx

@@ -1,41 +1,15 @@
-import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC } from 'react';
-
+import GenresItemsContainer from '../../components/library/GenresItemsContainer';
-import loading from '../../../../components/loading/loading';
+import { LibraryViewProps } from 'types/library';
-import GenresItemsContainer from '../../../../components/common/GenresItemsContainer';
+import { CollectionType } from 'types/collectionType';
-import { LibraryViewProps } from '../../../../types/interface';
-
-const GenresView: FC<LibraryViewProps> = ({ topParentId }) => {
-    const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
-
-    const reloadItems = useCallback(() => {
-        loading.show();
-        window.ApiClient.getGenres(
-            window.ApiClient.getCurrentUserId(),
-            {
-                SortBy: 'SortName',
-                SortOrder: 'Ascending',
-                IncludeItemTypes: 'Movie',
-                Recursive: true,
-                EnableTotalRecordCount: false,
-                ParentId: topParentId
-            }
-        ).then((result) => {
-            setItemsResult(result);
-            loading.hide();
-        }).catch(err => {
-            console.error('[GenresView] failed to fetch genres', err);
-        });
-    }, [topParentId]);
-
-    useEffect(() => {
-        reloadItems();
-    }, [reloadItems]);
 
+const GenresView: FC<LibraryViewProps> = ({ parentId }) => {
     return (
         <GenresItemsContainer
-            topParentId={topParentId}
+            parentId={parentId}
-            itemsResult={itemsResult}
+            collectionType={CollectionType.Movies}
+            itemType={BaseItemKind.Movie}
         />
     );
 };

src/apps/experimental/routes/movies/MoviesView.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useCallback } from 'react';
 
-import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
+import ViewItemsContainer from 'components/common/ViewItemsContainer';
-import { LibraryViewProps } from '../../../../types/interface';
+import { LibraryViewProps } from 'types/library';
 
-const MoviesView: FC<LibraryViewProps> = ({ topParentId }) => {
+const MoviesView: FC<LibraryViewProps> = ({ parentId }) => {
     const getBasekey = useCallback(() => {
         return 'movies';
     }, []);
@@ -18,7 +18,7 @@ const MoviesView: FC<LibraryViewProps> = ({ topParentId }) => {
 
     return (
         <ViewItemsContainer
-            topParentId={topParentId}
+            topParentId={parentId}
             isBtnShuffleEnabled={true}
             getBasekey={getBasekey}
             getItemTypes={getItemTypes}

src/apps/experimental/routes/movies/SuggestionsView.tsx

@@ -1,160 +1,51 @@
-import type { BaseItemDto, BaseItemDtoQueryResult, RecommendationDto } from '@jellyfin/sdk/lib/generated-client';
+import React, { FC } from 'react';
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { useGetMovieRecommendations } from 'hooks/useFetchItems';
+import globalize from 'scripts/globalize';
+import Loading from 'components/loading/LoadingComponent';
+import RecommendationContainer from '../../components/library/RecommendationContainer';
+import SuggestionsItemsContainer from '../../components/library/SuggestionsItemsContainer';
 
-import layoutManager from '../../../../components/layoutManager';
+import { LibraryViewProps } from 'types/library';
-import loading from '../../../../components/loading/loading';
+import { SectionsView } from 'types/suggestionsSections';
-import dom from '../../../../scripts/dom';
-import globalize from '../../../../scripts/globalize';
-import RecommendationContainer from '../../../../components/common/RecommendationContainer';
-import SectionContainer from '../../../../components/common/SectionContainer';
-import { LibraryViewProps } from '../../../../types/interface';
 
-const SuggestionsView: FC<LibraryViewProps> = ({ topParentId }) => {
+const SuggestionsView: FC<LibraryViewProps> = ({ parentId }) => {
-    const [ latestItems, setLatestItems ] = useState<BaseItemDto[]>([]);
+    const {
-    const [ resumeResult, setResumeResult ] = useState<BaseItemDtoQueryResult>({});
+        isLoading,
-    const [ recommendations, setRecommendations ] = useState<RecommendationDto[]>([]);
+        data: movieRecommendationsItems
-    const element = useRef<HTMLDivElement>(null);
+    } = useGetMovieRecommendations(parentId);
 
-    const enableScrollX = useCallback(() => {
+    if (isLoading) {
-        return !layoutManager.desktop;
+        return <Loading />;
-    }, []);
+    }
-
-    const getPortraitShape = useCallback(() => {
-        return enableScrollX() ? 'overflowPortrait' : 'portrait';
-    }, [enableScrollX]);
-
-    const getThumbShape = useCallback(() => {
-        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
-    }, [enableScrollX]);
-
-    const autoFocus = useCallback((page) => {
-        import('../../../../components/autoFocuser').then(({ default: autoFocuser }) => {
-            autoFocuser.autoFocus(page);
-        }).catch(err => {
-            console.error('[SuggestionsView] failed to load data', err);
-        });
-    }, []);
-
-    const loadResume = useCallback((page, userId, parentId) => {
-        loading.show();
-        const screenWidth = dom.getWindowSize().innerWidth;
-        const options = {
-            SortBy: 'DatePlayed',
-            SortOrder: 'Descending',
-            IncludeItemTypes: 'Movie',
-            Filters: 'IsResumable',
-            Limit: screenWidth >= 1600 ? 5 : 3,
-            Recursive: true,
-            Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
-            CollapseBoxSetItems: false,
-            ParentId: parentId,
-            ImageTypeLimit: 1,
-            EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
-            EnableTotalRecordCount: false
-        };
-        window.ApiClient.getItems(userId, options).then(result => {
-            setResumeResult(result);
-
-            loading.hide();
-            autoFocus(page);
-        }).catch(err => {
-            console.error('[SuggestionsView] failed to fetch items', err);
-        });
-    }, [autoFocus]);
-
-    const loadLatest = useCallback((page: HTMLDivElement, userId: string, parentId: string | null) => {
-        const options = {
-            IncludeItemTypes: 'Movie',
-            Limit: 18,
-            Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
-            ParentId: parentId,
-            ImageTypeLimit: 1,
-            EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
-            EnableTotalRecordCount: false
-        };
-        window.ApiClient.getJSON(window.ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(items => {
-            setLatestItems(items);
-
-            autoFocus(page);
-        }).catch(err => {
-            console.error('[SuggestionsView] failed to fetch latest items', err);
-        });
-    }, [autoFocus]);
-
-    const loadSuggestions = useCallback((page, userId) => {
-        const screenWidth = dom.getWindowSize().innerWidth;
-        let itemLimit = 5;
-        if (screenWidth >= 1600) {
-            itemLimit = 8;
-        } else if (screenWidth >= 1200) {
-            itemLimit = 6;
-        }
-        const url = window.ApiClient.getUrl('Movies/Recommendations', {
-            userId: userId,
-            categoryLimit: 6,
-            ItemLimit: itemLimit,
-            Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
-            ImageTypeLimit: 1,
-            EnableImageTypes: 'Primary,Backdrop,Banner,Thumb'
-        });
-        window.ApiClient.getJSON(url).then(result => {
-            setRecommendations(result);
-
-            autoFocus(page);
-        }).catch(err => {
-            console.error('[SuggestionsView] failed to fetch recommendations', err);
-        });
-    }, [autoFocus]);
-
-    const loadSuggestionsTab = useCallback((view) => {
-        const parentId = topParentId;
-        const userId = window.ApiClient.getCurrentUserId();
-        loadResume(view, userId, parentId);
-        loadLatest(view, userId, parentId);
-        loadSuggestions(view, userId);
-    }, [loadLatest, loadResume, loadSuggestions, topParentId]);
-
-    useEffect(() => {
-        const page = element.current;
-
-        if (!page) {
-            console.error('Unexpected null reference');
-            return;
-        }
-
-        loadSuggestionsTab(page);
-    }, [loadSuggestionsTab]);
 
     return (
-        <div ref={element}>
+        <>
-            <SectionContainer
+            <SuggestionsItemsContainer
-                sectionTitle={globalize.translate('HeaderContinueWatching')}
+                parentId={parentId}
-                enableScrollX={enableScrollX}
+                sectionsView={[SectionsView.ContinueWatchingMovies, SectionsView.LatestMovies]}
-                items={resumeResult.Items || []}
-                cardOptions={{
-                    preferThumb: true,
-                    shape: getThumbShape(),
-                    showYear: true
-                }}
             />
 
-            <SectionContainer
+            {!movieRecommendationsItems?.length ? (
-                sectionTitle={globalize.translate('HeaderLatestMovies')}
+                <div className='noItemsMessage centerMessage'>
-                enableScrollX={enableScrollX}
+                    <h1>{globalize.translate('MessageNothingHere')}</h1>
-                items={latestItems}
+                    <p>
-                cardOptions={{
+                        {globalize.translate(
-                    shape: getPortraitShape(),
+                            'MessageNoMovieSuggestionsAvailable'
-                    showYear: true
+                        )}
-                }}
+                    </p>
-            />
+                </div>
-
+            ) : (
-            {!recommendations.length ? <div className='noItemsMessage centerMessage'>
+                movieRecommendationsItems.map((recommendation, index) => {
-                <h1>{globalize.translate('MessageNothingHere')}</h1>
+                    return (
-                <p>{globalize.translate('MessageNoMovieSuggestionsAvailable')}</p>
+                        <RecommendationContainer
-            </div> : recommendations.map(recommendation => {
+                            // eslint-disable-next-line react/no-array-index-key
-                return <RecommendationContainer key={recommendation.CategoryId} getPortraitShape={getPortraitShape} enableScrollX={enableScrollX} recommendation={recommendation} />;
+                            key={`${recommendation.CategoryId}-${index}`} // use a unique id return value may have duplicate id
-            })}
+                            recommendation={recommendation}
-        </div>
+                        />
+                    );
+                })
+            )}
+        </>
     );
 };
 

src/apps/experimental/routes/movies/TrailersView.tsx

@@ -1,10 +1,10 @@
 
 import React, { FC, useCallback } from 'react';
 
-import ViewItemsContainer from '../../../../components/common/ViewItemsContainer';
+import ViewItemsContainer from 'components/common/ViewItemsContainer';
-import { LibraryViewProps } from '../../../../types/interface';
+import { LibraryViewProps } from 'types/library';
 
-const TrailersView: FC<LibraryViewProps> = ({ topParentId }) => {
+const TrailersView: FC<LibraryViewProps> = ({ parentId }) => {
     const getBasekey = useCallback(() => {
         return 'trailers';
     }, []);
@@ -19,7 +19,7 @@ const TrailersView: FC<LibraryViewProps> = ({ topParentId }) => {
 
     return (
         <ViewItemsContainer
-            topParentId={topParentId}
+            topParentId={parentId}
             getBasekey={getBasekey}
             getItemTypes={getItemTypes}
             getNoItemsMessage={getNoItemsMessage}

src/apps/experimental/routes/movies/index.tsx

@@ -1,29 +1,27 @@
-import '../../../../elements/emby-scroller/emby-scroller';
+import 'elements/emby-scroller/emby-scroller';
-import '../../../../elements/emby-itemscontainer/emby-itemscontainer';
+import 'elements/emby-itemscontainer/emby-itemscontainer';
-import '../../../../elements/emby-tabs/emby-tabs';
+import 'elements/emby-tabs/emby-tabs';
-import '../../../../elements/emby-button/emby-button';
+import 'elements/emby-button/emby-button';
 
-import React, { FC, useEffect, useRef } from 'react';
+import React, { FC } from 'react';
 import { useLocation, useSearchParams } from 'react-router-dom';
+import Page from 'components/Page';
 
-import Page from '../../../../components/Page';
+import { getDefaultTabIndex } from '../../components/tabs/tabRoutes';
-import globalize from '../../../../scripts/globalize';
-import libraryMenu from '../../../../scripts/libraryMenu';
 import CollectionsView from './CollectionsView';
 import FavoritesView from './FavoritesView';
 import GenresView from './GenresView';
 import MoviesView from './MoviesView';
 import SuggestionsView from './SuggestionsView';
 import TrailersView from './TrailersView';
-import { getDefaultTabIndex } from '../../components/tabs/tabRoutes';
 
 const Movies: FC = () => {
     const location = useLocation();
     const [ searchParams ] = useSearchParams();
+    const searchParamsParentId = searchParams.get('topParentId');
     const searchParamsTab = searchParams.get('tab');
     const currentTabIndex = searchParamsTab !== null ? parseInt(searchParamsTab, 10) :
-        getDefaultTabIndex(location.pathname, searchParams.get('topParentId'));
+        getDefaultTabIndex(location.pathname, searchParamsParentId);
-    const element = useRef<HTMLDivElement>(null);
 
     const getTabComponent = (index: number) => {
         if (index == null) {
@@ -32,72 +30,41 @@ const Movies: FC = () => {
 
         let component;
         switch (index) {
-            case 0:
-                component = <MoviesView topParentId={searchParams.get('topParentId')} />;
-                break;
-
             case 1:
-                component = <SuggestionsView topParentId={searchParams.get('topParentId')} />;
+                component = <SuggestionsView parentId={searchParamsParentId} />;
                 break;
 
             case 2:
-                component = <TrailersView topParentId={searchParams.get('topParentId')} />;
+                component = <TrailersView parentId={searchParamsParentId} />;
                 break;
 
             case 3:
-                component = <FavoritesView topParentId={searchParams.get('topParentId')} />;
+                component = <FavoritesView parentId={searchParamsParentId} />;
                 break;
 
             case 4:
-                component = <CollectionsView topParentId={searchParams.get('topParentId')} />;
+                component = <CollectionsView parentId={searchParamsParentId} />;
                 break;
 
             case 5:
-                component = <GenresView topParentId={searchParams.get('topParentId')} />;
+                component = <GenresView parentId={searchParamsParentId} />;
                 break;
+            default:
+                component = <MoviesView parentId={searchParamsParentId} />;
         }
 
         return component;
     };
 
-    useEffect(() => {
-        const page = element.current;
-
-        if (!page) {
-            console.error('Unexpected null reference');
-            return;
-        }
-
-        if (!page.getAttribute('data-title')) {
-            const parentId = searchParams.get('topParentId');
-
-            if (parentId) {
-                window.ApiClient.getItem(window.ApiClient.getCurrentUserId(), parentId).then((item) => {
-                    page.setAttribute('data-title', item.Name as string);
-                    libraryMenu.setTitle(item.Name);
-                }).catch(err => {
-                    console.error('[movies] failed to fetch library', err);
-                    page.setAttribute('data-title', globalize.translate('Movies'));
-                    libraryMenu.setTitle(globalize.translate('Movies'));
-                });
-            } else {
-                page.setAttribute('data-title', globalize.translate('Movies'));
-                libraryMenu.setTitle(globalize.translate('Movies'));
-            }
-        }
-    }, [ searchParams ]);
-
     return (
-        <div ref={element}>
+        <Page
-            <Page
+            id='moviesPage'
-                id='moviesPage'
+            className='mainAnimatedPage libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs'
-                className='mainAnimatedPage libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs'
+            backDropType='movie'
-                backDropType='movie'
+        >
-            >
+            {getTabComponent(currentTabIndex)}
-                {getTabComponent(currentTabIndex)}
 
-            </Page>
+        </Page>
-        </div>
     );
 };
 

src/apps/experimental/theme.ts

@@ -21,6 +21,15 @@ const theme = createTheme({
         fontFamily: '"Noto Sans", sans-serif',
         button: {
             textTransform: 'none'
+        },
+        h1: {
+            fontSize: '1.8rem'
+        },
+        h2: {
+            fontSize: '1.5rem'
+        },
+        h3: {
+            fontSize: '1.17rem'
         }
     },
     components: {

src/apps/stable/App.tsx

@@ -51,6 +51,9 @@ const StableApp = () => (
 
             {/* Suppress warnings for unhandled routes */}
             <Route path='*' element={null} />
+
+            {/* Redirects for old paths */}
+            <Route path='/serveractivity.html' element={<Navigate replace to='/dashboard/activity' />} />
         </Route>
     </Routes>
 );

src/apps/stable/routes/legacyRoutes/admin.ts

@@ -164,7 +164,7 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
             view: 'dashboard/scheduledtasks/scheduledtasks.html'
         }
     }, {
-        path: 'serveractivity.html',
+        path: 'dashboard/activity',
         pageProps: {
             controller: 'dashboard/serveractivity',
             view: 'dashboard/serveractivity.html'

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

@@ -48,7 +48,7 @@ const UserProfiles: FunctionComponent = () => {
 
         const showUserMenu = (elem: HTMLElement) => {
             const card = dom.parentWithClass(elem, 'card');
-            const userId = card.getAttribute('data-userid');
+            const userId = card?.getAttribute('data-userid');
 
             if (!userId) {
                 console.error('Unexpected null user id');

src/components/UserAvatar.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
+import Avatar from '@mui/material/Avatar';
+import { useTheme } from '@mui/material/styles';
+
+import { useApi } from 'hooks/useApi';
+
+interface UserAvatarProps {
+    user?: UserDto
+}
+
+const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
+    const { api } = useApi();
+    const theme = useTheme();
+
+    return user ? (
+        <Avatar
+            alt={user.Name ?? undefined}
+            src={
+                api && user.Id && user.PrimaryImageTag ?
+                    `${api.basePath}/Users/${user.Id}/Images/Primary?tag=${user.PrimaryImageTag}` :
+                    undefined
+            }
+            sx={{
+                bgcolor: theme.palette.primary.dark,
+                color: 'inherit'
+            }}
+        />
+    ) : null;
+};
+
+export default UserAvatar;

src/components/appFooter/appFooter.js

@@ -9,28 +9,26 @@ function render() {
     return elem;
 }
 
-class appFooter {
+class AppFooter {
     constructor() {
-        const self = this;
+        this.element = render();
 
-        self.element = render();
+        this.add = function (elem) {
-        self.add = function (elem) {
+            this.element.appendChild(elem);
-            self.element.appendChild(elem);
         };
 
-        self.insert = function (elem) {
+        this.insert = function (elem) {
             if (typeof elem === 'string') {
-                self.element.insertAdjacentHTML('afterbegin', elem);
+                this.element.insertAdjacentHTML('afterbegin', elem);
             } else {
-                self.element.insertBefore(elem, self.element.firstChild);
+                this.element.insertBefore(elem, this.element.firstChild);
             }
         };
     }
-    destroy() {
-        const self = this;
 
-        self.element = null;
+    destroy() {
+        this.element = null;
     }
 }
 
-export default new appFooter();
+export default new AppFooter();

src/components/backdrop/backdrop.js

@@ -37,7 +37,7 @@ class Backdrop {
             parent.appendChild(backdropImage);
 
             if (!enableAnimation()) {
-                if (existingBackdropImage && existingBackdropImage.parentNode) {
+                if (existingBackdropImage?.parentNode) {
                     existingBackdropImage.parentNode.removeChild(existingBackdropImage);
                 }
                 internalBackdrop(true);
@@ -51,7 +51,7 @@ class Backdrop {
                 if (backdropImage === self.currentAnimatingElement) {
                     self.currentAnimatingElement = null;
                 }
-                if (existingBackdropImage && existingBackdropImage.parentNode) {
+                if (existingBackdropImage?.parentNode) {
                     existingBackdropImage.parentNode.removeChild(existingBackdropImage);
                 }
             };

src/components/cardbuilder/cardBuilder.js

@@ -546,7 +546,7 @@ function getCardImageUrl(item, apiClient, options, shape) {
         imgType = 'Backdrop';
         imgTag = item.ParentBackdropImageTags[0];
         itemId = item.ParentBackdropItemId;
-    } else if (item.ImageTags && item.ImageTags.Primary && (item.Type !== 'Episode' || item.ChildCount !== 0)) {
+    } else if (item.ImageTags?.Primary && (item.Type !== 'Episode' || item.ChildCount !== 0)) {
         imgType = 'Primary';
         imgTag = item.ImageTags.Primary;
         height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
@@ -591,10 +591,10 @@ function getCardImageUrl(item, apiClient, options, shape) {
     } else if (item.Type === 'Season' && item.ImageTags && item.ImageTags.Thumb) {
         imgType = 'Thumb';
         imgTag = item.ImageTags.Thumb;
-    } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
+    } else if (item.BackdropImageTags?.length) {
         imgType = 'Backdrop';
         imgTag = item.BackdropImageTags[0];
-    } else if (item.ImageTags && item.ImageTags.Thumb) {
+    } else if (item.ImageTags?.Thumb) {
         imgType = 'Thumb';
         imgTag = item.ImageTags.Thumb;
     } else if (item.SeriesThumbImageTag && options.inheritThumb !== false) {
@@ -605,7 +605,7 @@ function getCardImageUrl(item, apiClient, options, shape) {
         imgType = 'Thumb';
         imgTag = item.ParentThumbImageTag;
         itemId = item.ParentThumbItemId;
-    } else if (item.ParentBackdropImageTags && item.ParentBackdropImageTags.length && options.inheritThumb !== false) {
+    } else if (item.ParentBackdropImageTags?.length && options.inheritThumb !== false) {
         imgType = 'Backdrop';
         imgTag = item.ParentBackdropImageTags[0];
         itemId = item.ParentBackdropItemId;
@@ -634,7 +634,7 @@ function getCardImageUrl(item, apiClient, options, shape) {
 
     return {
         imgUrl: imgUrl,
-        blurhash: (blurHashes[imgType] || {})[imgTag],
+        blurhash: blurHashes[imgType]?.[imgTag],
         forceName: forceName,
         coverImage: coverImage
     };
@@ -1422,7 +1422,7 @@ function buildCard(index, item, apiClient, options) {
         className += ' card-withuserdata';
     }
 
-    const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
+    const positionTicksData = item.UserData?.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
     const collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
     const playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
     const mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : '';

src/components/cardbuilder/chaptercardbuilder.js

@@ -26,7 +26,7 @@ function buildChapterCardsHtml(item, chapters, options) {
         }
     }
 
-    const mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
+    const mediaStreams = (item.MediaSources || [])[0]?.MediaStreams || [];
     const videoStream = mediaStreams.filter(({ Type }) => {
         return Type === 'Video';
     })[0] || {};

src/components/channelMapper/channelMapper.js

@@ -12,7 +12,7 @@ import 'material-design-icons-iconfont';
 import '../formdialog.scss';
 import ServerConnections from '../ServerConnections';
 
-export default class channelMapper {
+export default class ChannelMapper {
     constructor(options) {
         function mapChannel(button, channelId, providerChannelId) {
             loading.show();

src/components/common/GenresItemsContainer.tsx

@@ -1,128 +0,0 @@
-import '../../elements/emby-button/emby-button';
-import '../../elements/emby-itemscontainer/emby-itemscontainer';
-
-import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
-import escapeHTML from 'escape-html';
-import React, { FC, useCallback, useEffect, useRef } from 'react';
-
-import { appRouter } from '../router/appRouter';
-import cardBuilder from '../cardbuilder/cardBuilder';
-import layoutManager from '../layoutManager';
-import lazyLoader from '../lazyLoader/lazyLoaderIntersectionObserver';
-import globalize from '../../scripts/globalize';
-import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
-import ItemsContainerElement from '../../elements/ItemsContainerElement';
-
-const createLinkElement = ({ className, title, href }: { className?: string, title?: string | null, href?: string }) => ({
-    __html: `<a
-        is="emby-linkbutton"
-        class="${className}"
-        href="${href}"
-        >
-            <h2 class='sectionTitle sectionTitle-cards'>
-                ${title}
-            </h2>
-            <span class='material-icons chevron_right' aria-hidden='true'></span>
-    </a>`
-});
-
-interface GenresItemsContainerProps {
-    topParentId?: string | null;
-    itemsResult: BaseItemDtoQueryResult;
-}
-
-const GenresItemsContainer: FC<GenresItemsContainerProps> = ({
-    topParentId,
-    itemsResult = {}
-}) => {
-    const element = useRef<HTMLDivElement>(null);
-
-    const enableScrollX = useCallback(() => {
-        return !layoutManager.desktop;
-    }, []);
-
-    const getPortraitShape = useCallback(() => {
-        return enableScrollX() ? 'overflowPortrait' : 'portrait';
-    }, [enableScrollX]);
-
-    const fillItemsContainer = useCallback((entry) => {
-        const elem = entry.target;
-        const id = elem.getAttribute('data-id');
-
-        const query = {
-            SortBy: 'Random',
-            SortOrder: 'Ascending',
-            IncludeItemTypes: 'Movie',
-            Recursive: true,
-            Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
-            ImageTypeLimit: 1,
-            EnableImageTypes: 'Primary',
-            Limit: 12,
-            GenreIds: id,
-            EnableTotalRecordCount: false,
-            ParentId: topParentId
-        };
-        window.ApiClient.getItems(window.ApiClient.getCurrentUserId(), query).then((result) => {
-            cardBuilder.buildCards(result.Items || [], {
-                itemsContainer: elem,
-                shape: getPortraitShape(),
-                scalable: true,
-                overlayMoreButton: true,
-                allowBottomPadding: true,
-                showTitle: true,
-                centerText: true,
-                showYear: true
-            });
-        }).catch(err => {
-            console.error('[GenresItemsContainer] failed to fetch items', err);
-        });
-    }, [getPortraitShape, topParentId]);
-
-    useEffect(() => {
-        const elem = element.current;
-        lazyLoader.lazyChildren(elem, fillItemsContainer);
-    }, [itemsResult.Items, fillItemsContainer]);
-
-    const items = itemsResult.Items || [];
-    return (
-        <div ref={element}>
-            {
-                !items.length ? (
-                    <div className='noItemsMessage centerMessage'>
-                        <h1>{globalize.translate('MessageNothingHere')}</h1>
-                        <p>{globalize.translate('MessageNoGenresAvailable')}</p>
-                    </div>
-                ) : items.map(item => (
-                    <div key={item.Id} className='verticalSection'>
-                        <div
-                            className='sectionTitleContainer sectionTitleContainer-cards padded-left'
-                            dangerouslySetInnerHTML={createLinkElement({
-                                className: 'more button-flat button-flat-mini sectionTitleTextButton btnMoreFromGenre',
-                                title: escapeHTML(item.Name),
-                                href: appRouter.getRouteUrl(item, {
-                                    context: 'movies',
-                                    parentId: topParentId
-                                })
-                            })}
-                        />
-
-                        {enableScrollX() ?
-                            <ItemsScrollerContainerElement
-                                scrollerclassName='padded-top-focusscale padded-bottom-focusscale'
-                                dataMousewheel='false'
-                                dataCenterfocus='true'
-                                className='itemsContainer scrollSlider focuscontainer-x lazy'
-                                dataId={item.Id}
-                            /> : <ItemsContainerElement
-                                className='itemsContainer vertical-wrap lazy padded-left padded-right'
-                                dataId={item.Id}
-                            />
-                        }
-                    </div>
-                ))
-            }
-        </div>
-    );
-};
-
-export default GenresItemsContainer;

src/components/common/RecommendationContainer.tsx

@@ -1,48 +0,0 @@
-import type { RecommendationDto } from '@jellyfin/sdk/lib/generated-client';
-import React, { FC } from 'react';
-
-import globalize from '../../scripts/globalize';
-import escapeHTML from 'escape-html';
-import SectionContainer from './SectionContainer';
-
-interface RecommendationContainerProps {
-    getPortraitShape: () => string;
-    enableScrollX: () => boolean;
-    recommendation?: RecommendationDto;
-}
-
-const RecommendationContainer: FC<RecommendationContainerProps> = ({ getPortraitShape, enableScrollX, recommendation = {} }) => {
-    let title = '';
-
-    switch (recommendation.RecommendationType) {
-        case 'SimilarToRecentlyPlayed':
-            title = globalize.translate('RecommendationBecauseYouWatched', recommendation.BaselineItemName);
-            break;
-
-        case 'SimilarToLikedItem':
-            title = globalize.translate('RecommendationBecauseYouLike', recommendation.BaselineItemName);
-            break;
-
-        case 'HasDirectorFromRecentlyPlayed':
-        case 'HasLikedDirector':
-            title = globalize.translate('RecommendationDirectedBy', recommendation.BaselineItemName);
-            break;
-
-        case 'HasActorFromRecentlyPlayed':
-        case 'HasLikedActor':
-            title = globalize.translate('RecommendationStarring', recommendation.BaselineItemName);
-            break;
-    }
-
-    return <SectionContainer
-        sectionTitle={escapeHTML(title)}
-        enableScrollX={enableScrollX}
-        items={recommendation.Items || []}
-        cardOptions={{
-            shape: getPortraitShape(),
-            showYear: true
-        }}
-    />;
-};
-
-export default RecommendationContainer;

src/components/common/SectionContainer.tsx

@@ -1,62 +0,0 @@
-import '../../elements/emby-itemscontainer/emby-itemscontainer';
-
-import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import React, { FC, useEffect, useRef } from 'react';
-
-import cardBuilder from '../cardbuilder/cardBuilder';
-import ItemsContainerElement from '../../elements/ItemsContainerElement';
-import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
-import { CardOptions } from '../../types/interface';
-
-interface SectionContainerProps {
-    sectionTitle: string;
-    enableScrollX: () => boolean;
-    items?: BaseItemDto[];
-    cardOptions?: CardOptions;
-}
-
-const SectionContainer: FC<SectionContainerProps> = ({
-    sectionTitle,
-    enableScrollX,
-    items = [],
-    cardOptions = {}
-}) => {
-    const element = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        cardBuilder.buildCards(items, {
-            itemsContainer: element.current?.querySelector('.itemsContainer'),
-            parentContainer: element.current?.querySelector('.verticalSection'),
-            scalable: true,
-            overlayPlayButton: true,
-            showTitle: true,
-            centerText: true,
-            cardLayout: false,
-            ...cardOptions
-        });
-    }, [cardOptions, enableScrollX, items]);
-
-    return (
-        <div ref={element}>
-            <div className='verticalSection hide'>
-                <div className='sectionTitleContainer sectionTitleContainer-cards'>
-                    <h2 className='sectionTitle sectionTitle-cards padded-left'>
-                        {sectionTitle}
-                    </h2>
-                </div>
-
-                {enableScrollX() ? <ItemsScrollerContainerElement
-                    scrollerclassName='padded-top-focusscale padded-bottom-focusscale'
-                    dataMousewheel='false'
-                    dataCenterfocus='true'
-                    className='itemsContainer scrollSlider focuscontainer-x'
-                /> : <ItemsContainerElement
-                    className='itemsContainer focuscontainer-x padded-left padded-right vertical-wrap'
-                />}
-
-            </div>
-        </div>
-    );
-};
-
-export default SectionContainer;

src/components/common/ViewItemsContainer.tsx

@@ -12,12 +12,14 @@ import Shuffle from './Shuffle';
 import Sort from './Sort';
 import NewCollection from './NewCollection';
 import globalize from '../../scripts/globalize';
-import { CardOptions, ViewQuerySettings } from '../../types/interface';
 import ServerConnections from '../ServerConnections';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import listview from '../listview/listview';
 import cardBuilder from '../cardbuilder/cardBuilder';
 
+import { ViewQuerySettings } from '../../types/interface';
+import { CardOptions } from '../../types/cardOptions';
+
 interface ViewItemsContainerProps {
     topParentId: string | null;
     isBtnShuffleEnabled?: boolean;

src/components/dashboard/users/UserPasswordForm.tsx

@@ -6,7 +6,6 @@ import confirm from '../../confirm/confirm';
 import loading from '../../loading/loading';
 import toast from '../../toast/toast';
 import ButtonElement from '../../../elements/ButtonElement';
-import CheckBoxElement from '../../../elements/CheckBoxElement';
 import InputElement from '../../../elements/InputElement';
 
 type IProps = {
@@ -33,12 +32,9 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
 
         LibraryMenu.setTitle(user.Name);
 
-        let showLocalAccessSection = false;
-
         if (user.HasConfiguredPassword) {
             (page.querySelector('#btnResetPassword') as HTMLDivElement).classList.remove('hide');
             (page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.remove('hide');
-            showLocalAccessSection = true;
         } else {
             (page.querySelector('#btnResetPassword') as HTMLDivElement).classList.add('hide');
             (page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.add('hide');
@@ -46,23 +42,6 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
 
         const canChangePassword = loggedInUser?.Policy?.IsAdministrator || user.Policy.EnableUserPreferenceAccess;
         (page.querySelector('.passwordSection') as HTMLDivElement).classList.toggle('hide', !canChangePassword);
-        (page.querySelector('.localAccessSection') as HTMLDivElement).classList.toggle('hide', !(showLocalAccessSection && canChangePassword));
-
-        const txtEasyPassword = page.querySelector('#txtEasyPassword') as HTMLInputElement;
-        txtEasyPassword.value = '';
-
-        if (user.HasConfiguredEasyPassword) {
-            txtEasyPassword.placeholder = '******';
-            (page.querySelector('#btnResetEasyPassword') as HTMLDivElement).classList.remove('hide');
-        } else {
-            txtEasyPassword.removeAttribute('placeholder');
-            txtEasyPassword.placeholder = '';
-            (page.querySelector('#btnResetEasyPassword') as HTMLDivElement).classList.add('hide');
-        }
-
-        const chkEnableLocalEasyPassword = page.querySelector('.chkEnableLocalEasyPassword') as HTMLInputElement;
-
-        chkEnableLocalEasyPassword.checked = user.Configuration.EnableLocalPassword || false;
 
         import('../../autoFocuser').then(({ default: autoFocuser }) => {
             autoFocuser.autoFocus(page);
@@ -125,75 +104,6 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
             });
         };
 
-        const onLocalAccessSubmit = (e: Event) => {
-            loading.show();
-            saveEasyPassword();
-            e.preventDefault();
-            return false;
-        };
-
-        const saveEasyPassword = () => {
-            const easyPassword = (page.querySelector('#txtEasyPassword') as HTMLInputElement).value;
-
-            if (easyPassword) {
-                window.ApiClient.updateEasyPassword(userId, easyPassword).then(function () {
-                    onEasyPasswordSaved();
-                }).catch(err => {
-                    console.error('[UserPasswordForm] failed to update easy password', err);
-                });
-            } else {
-                onEasyPasswordSaved();
-            }
-        };
-
-        const onEasyPasswordSaved = () => {
-            window.ApiClient.getUser(userId).then(function (user) {
-                if (!user.Configuration) {
-                    throw new Error('Unexpected null user.Configuration');
-                }
-
-                if (!user.Id) {
-                    throw new Error('Unexpected null user.Id');
-                }
-
-                user.Configuration.EnableLocalPassword = (page.querySelector('.chkEnableLocalEasyPassword') as HTMLInputElement).checked;
-                window.ApiClient.updateUserConfiguration(user.Id, user.Configuration).then(function () {
-                    loading.hide();
-                    toast(globalize.translate('SettingsSaved'));
-
-                    loadUser().catch(err => {
-                        console.error('[UserPasswordForm] failed to load user', err);
-                    });
-                }).catch(err => {
-                    console.error('[UserPasswordForm] failed to update user configuration', err);
-                });
-            }).catch(err => {
-                console.error('[UserPasswordForm] failed to fetch user', err);
-            });
-        };
-
-        const resetEasyPassword = () => {
-            const msg = globalize.translate('PinCodeResetConfirmation');
-
-            confirm(msg, globalize.translate('HeaderPinCodeReset')).then(function () {
-                loading.show();
-                window.ApiClient.resetEasyPassword(userId).then(function () {
-                    loading.hide();
-                    Dashboard.alert({
-                        message: globalize.translate('PinCodeResetComplete'),
-                        title: globalize.translate('HeaderPinCodeReset')
-                    });
-                    loadUser().catch(err => {
-                        console.error('[UserPasswordForm] failed to load user', err);
-                    });
-                }).catch(err => {
-                    console.error('[UserPasswordForm] failed to reset easy password', err);
-                });
-            }).catch(() => {
-                // confirm dialog was closed
-            });
-        };
-
         const resetPassword = () => {
             const msg = globalize.translate('PasswordResetConfirmation');
             confirm(msg, globalize.translate('ResetPassword')).then(function () {
@@ -216,9 +126,6 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
         };
 
         (page.querySelector('.updatePasswordForm') as HTMLFormElement).addEventListener('submit', onSubmit);
-        (page.querySelector('.localAccessForm') as HTMLFormElement).addEventListener('submit', onLocalAccessSubmit);
-
-        (page.querySelector('#btnResetEasyPassword') as HTMLButtonElement).addEventListener('click', resetEasyPassword);
         (page.querySelector('#btnResetPassword') as HTMLButtonElement).addEventListener('click', resetPassword);
     }, [loadUser, userId]);
 
@@ -269,53 +176,6 @@ const UserPasswordForm: FunctionComponent<IProps> = ({ userId }: IProps) => {
                     </div>
                 </div>
             </form>
-            <br />
-            <form
-                className='localAccessForm localAccessSection'
-                style={{ margin: '0 auto' }}
-            >
-                <div className='detailSection'>
-                    <div className='detailSectionHeader'>
-                        {globalize.translate('HeaderEasyPinCode')}
-                    </div>
-                    <br />
-                    <div>
-                        {globalize.translate('EasyPasswordHelp')}
-                    </div>
-                    <br />
-                    <div className='inputContainer'>
-                        <InputElement
-                            type='number'
-                            id='txtEasyPassword'
-                            label='LabelEasyPinCode'
-                            options={'autoComplete="off" pattern="[0-9]*" step="1" maxlength="5"'}
-                        />
-                    </div>
-                    <br />
-                    <div className='checkboxContainer checkboxContainer-withDescription'>
-                        <CheckBoxElement
-                            className='chkEnableLocalEasyPassword'
-                            title='LabelInNetworkSignInWithEasyPassword'
-                        />
-                        <div className='fieldDescription checkboxFieldDescription'>
-                            {globalize.translate('LabelInNetworkSignInWithEasyPasswordHelp')}
-                        </div>
-                    </div>
-                    <div>
-                        <ButtonElement
-                            type='submit'
-                            className='raised button-submit block'
-                            title='Save'
-                        />
-                        <ButtonElement
-                            type='button'
-                            id='btnResetEasyPassword'
-                            className='raised button-cancel block hide'
-                            title='ButtonResetEasyPassword'
-                        />
-                    </div>
-                </div>
-            </form>
         </div>
     );
 };

src/components/guide/guide.js

@@ -675,12 +675,12 @@ function Guide(options) {
         });
 
         const activeElement = document.activeElement;
-        const itemId = activeElement && activeElement.getAttribute ? activeElement.getAttribute('data-id') : null;
+        const itemId = activeElement?.getAttribute ? activeElement.getAttribute('data-id') : null;
         let channelRowId = null;
 
         if (activeElement) {
             channelRowId = dom.parentWithClass(activeElement, 'channelPrograms');
-            channelRowId = channelRowId && channelRowId.getAttribute ? channelRowId.getAttribute('data-channelid') : null;
+            channelRowId = channelRowId?.getAttribute ? channelRowId.getAttribute('data-channelid') : null;
         }
 
         renderChannelHeaders(context, channels, apiClient);

src/components/homesections/homesections.js

@@ -76,7 +76,7 @@ export function loadSections(elem, apiClient, user, userSettings) {
             });
         } else {
             let noLibDescription;
-            if (user['Policy'] && user['Policy']['IsAdministrator']) {
+            if (user.Policy?.IsAdministrator) {
                 noLibDescription = globalize.translate('NoCreatedLibraries', '<br><a id="button-createLibrary" class="button-link">', '</a>');
             } else {
                 noLibDescription = globalize.translate('AskAdminToCreateLibrary');

src/components/htmlMediaHelper.js

@@ -68,7 +68,7 @@ export function handleHlsJsMediaError(instance, reject) {
 
     let now = Date.now();
 
-    if (window.performance && window.performance.now) {
+    if (window.performance?.now) {
         now = performance.now(); // eslint-disable-line compat/compat
     }
 

src/components/imageOptionsEditor/imageOptionsEditor.js

@@ -80,32 +80,28 @@ function saveValues(context, options) {
     });
 }
 
-function showEditor(itemType, options, availableOptions) {
+class ImageOptionsEditor {
-    const dlg = dialogHelper.createDialog({
+    show(itemType, options, availableOptions) {
-        size: 'small',
+        const dlg = dialogHelper.createDialog({
-        removeOnClose: true,
+            size: 'small',
-        scrollY: false
+            removeOnClose: true,
-    });
+            scrollY: false
-    dlg.classList.add('formDialog');
+        });
-    dlg.innerHTML = globalize.translateHtml(template);
+        dlg.classList.add('formDialog');
-    dlg.addEventListener('close', function () {
+        dlg.innerHTML = globalize.translateHtml(template);
-        saveValues(dlg, options);
+        dlg.addEventListener('close', function () {
-    });
+            saveValues(dlg, options);
-    loadValues(dlg, itemType, options, availableOptions);
+        });
-    dialogHelper.open(dlg).then(() => {
+        loadValues(dlg, itemType, options, availableOptions);
-        return;
+        dialogHelper.open(dlg).then(() => {
-    }).catch(() => {
+            return;
-        return;
+        }).catch(() => {
-    });
+            return;
-    dlg.querySelector('.btnCancel').addEventListener('click', function () {
+        });
-        dialogHelper.close(dlg);
+        dlg.querySelector('.btnCancel').addEventListener('click', function () {
-    });
+            dialogHelper.close(dlg);
-}
+        });
-
-export class editor {
-    constructor() {
-        this.show = showEditor;
     }
 }
 
-export default editor;
+export default ImageOptionsEditor;

src/components/imageOptionsEditor/imageOptionsEditor.template.html

@@ -1,5 +1,7 @@
 <div class="formDialogHeader">
-    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>
+    <button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1" title="${ButtonBack}">
+        <span class="material-icons arrow_back" aria-hidden="true"></span>
+    </button>
     <h3 class="formDialogHeaderTitle">
         ${HeaderImageOptions}
     </h3>

src/components/imageUploader/imageUploader.js

@@ -41,7 +41,7 @@ function onFileReaderError(evt) {
 function setFiles(page, files) {
     const file = files[0];
 
-    if (!file || !file.type.match('image.*')) {
+    if (!file?.type.match('image.*')) {
         page.querySelector('#imageOutput').innerHTML = '';
         page.querySelector('#fldUpload').classList.add('hide');
         currentFile = null;

src/components/images/imageLoader.js

@@ -9,7 +9,7 @@ worker.addEventListener(
     'message',
     ({ data: { pixels, hsh, width, height } }) => {
         const elems = targetDic[hsh];
-        if (elems && elems.length) {
+        if (elems?.length) {
             for (const elem of elems) {
                 drawBlurhash(elem, pixels, width, height);
             }

src/components/indicators/indicators.js

@@ -12,7 +12,7 @@ export function enableProgressIndicator(item) {
 
 export function getProgressHtml(pct, options) {
     let containerClass = 'itemProgressBar';
-    if (options && options.containerClass) {
+    if (options?.containerClass) {
         containerClass += ' ' + options.containerClass;
     }
 
@@ -21,7 +21,7 @@ export function getProgressHtml(pct, options) {
 
 function getAutoTimeProgressHtml(pct, options, isRecording, start, end) {
     let containerClass = 'itemProgressBar';
-    if (options && options.containerClass) {
+    if (options?.containerClass) {
         containerClass += ' ' + options.containerClass;
     }
 
@@ -36,7 +36,7 @@ function getAutoTimeProgressHtml(pct, options, isRecording, start, end) {
 export function getProgressBarHtml(item, options) {
     let pct;
     if (enableProgressIndicator(item) && item.Type !== 'Recording') {
-        const userData = options && options.userData ? options.userData : item.UserData;
+        const userData = options?.userData ? options.userData : item.UserData;
 
         if (userData) {
             pct = userData.PlayedPercentage;
@@ -90,7 +90,7 @@ export function getPlayedIndicatorHtml(item) {
 }
 
 export function getChildCountIndicatorHtml(item, options) {
-    const minCount = options && options.minCount ? options.minCount : 0;
+    const minCount = options?.minCount ? options.minCount : 0;
 
     if (item.ChildCount && item.ChildCount > minCount) {
         return '<div class="countIndicator indicator">' + datetime.toLocaleString(item.ChildCount) + '</div>';

src/components/itemContextMenu.js

@@ -345,8 +345,8 @@ function executeCommand(item, id, options) {
                 });
                 break;
             case 'addtoplaylist':
-                import('./playlisteditor/playlisteditor').then(({ default: playlistEditor }) => {
+                import('./playlisteditor/playlisteditor').then(({ default: PlaylistEditor }) => {
-                    new playlistEditor({
+                    new PlaylistEditor({
                         items: [itemId],
                         serverId: serverId
                     }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
@@ -630,8 +630,8 @@ function deleteItem(apiClient, item) {
 }
 
 function refresh(apiClient, item) {
-    import('./refreshdialog/refreshdialog').then(({ default: refreshDialog }) => {
+    import('./refreshdialog/refreshdialog').then(({ default: RefreshDialog }) => {
-        new refreshDialog({
+        new RefreshDialog({
             itemIds: [item.Id],
             serverId: apiClient.serverInfo().Id,
             mode: item.Type === 'CollectionFolder' ? 'scan' : null

src/components/itemHelper.js

@@ -117,7 +117,7 @@ export function canEdit(user, item) {
 }
 
 export function isLocalItem(item) {
-    return item && item.Id && typeof item.Id === 'string' && item.Id.indexOf('local') === 0;
+    return item?.Id && typeof item.Id === 'string' && item.Id.indexOf('local') === 0;
 }
 
 export function canIdentify (user, item) {

src/components/itemMediaInfo/itemMediaInfo.js

@@ -61,7 +61,7 @@ function getMediaSourceHtml(user, item, version) {
     if (version.Container) {
         html += `${createAttribute(globalize.translate('MediaInfoContainer'), version.Container)}<br/>`;
     }
-    if (version.Formats && version.Formats.length) {
+    if (version.Formats?.length) {
         html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}<br/>`;
     }
     if (version.Path && user && user.Policy.IsAdministrator) {

src/components/itemidentifier/itemidentifier.js

@@ -79,7 +79,7 @@ function searchForIdentificationResults(page) {
         SearchInfo: lookupInfo
     };
 
-    if (currentItem && currentItem.Id) {
+    if (currentItem?.Id) {
         lookupInfo.ItemId = currentItem.Id;
     } else {
         lookupInfo.IncludeDisabledProviders = true;

src/components/itemsrefresher.js

@@ -134,7 +134,7 @@ class ItemsRefresher {
             }
         }
 
-        if (this.needsRefresh || (options && options.refresh)) {
+        if (this.needsRefresh || (options?.refresh)) {
             return this.refreshItems();
         }
 

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -495,7 +495,7 @@ function setImageFetchersIntoOptions(parent, options) {
 }
 
 function setImageOptionsIntoOptions(options) {
-    const originalTypeOptions = (currentLibraryOptions || {}).TypeOptions || [];
+    const originalTypeOptions = currentLibraryOptions?.TypeOptions || [];
     for (const originalTypeOption of originalTypeOptions) {
         let typeOptions = getTypeOptions(options, originalTypeOption.Type);
 

src/components/listview/listview.js

@@ -86,7 +86,7 @@ function getImageUrl(item, size) {
         type: 'Primary'
     };
 
-    if (item.ImageTags && item.ImageTags.Primary) {
+    if (item.ImageTags?.Primary) {
         options.tag = item.ImageTags.Primary;
         itemId = item.Id;
     } else if (item.AlbumId && item.AlbumPrimaryImageTag) {
@@ -235,7 +235,7 @@ export function getListViewHtml(options) {
 
         const playlistItemId = item.PlaylistItemId ? (` data-playlistitemid="${item.PlaylistItemId}"`) : '';
 
-        const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (` data-positionticks="${item.UserData.PlaybackPositionTicks}"`) : '';
+        const positionTicksData = item.UserData?.PlaybackPositionTicks ? (` data-positionticks="${item.UserData.PlaybackPositionTicks}"`) : '';
         const collectionIdData = options.collectionId ? (` data-collectionid="${options.collectionId}"`) : '';
         const playlistIdData = options.playlistId ? (` data-playlistid="${options.playlistId}"`) : '';
         const mediaTypeData = item.MediaType ? (` data-mediatype="${item.MediaType}"`) : '';

src/components/mediaLibraryCreator/mediaLibraryCreator.js

@@ -188,7 +188,7 @@ function initLibraryOptions(dlg) {
     });
 }
 
-export class showEditor {
+export class MediaLibraryCreator {
     constructor(options) {
         return new Promise((resolve) => {
             currentOptions = options;
@@ -224,4 +224,4 @@ let currentOptions;
 let hasChanges = false;
 let isCreating = false;
 
-export default showEditor;
+export default MediaLibraryCreator;

src/components/mediaLibraryEditor/mediaLibraryEditor.js

@@ -93,7 +93,7 @@ function onListItemClick(e) {
 
     if (listItem) {
         const index = parseInt(listItem.getAttribute('data-index'), 10);
-        const pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
+        const pathInfos = currentOptions.library.LibraryOptions?.PathInfos || [];
         const pathInfo = index == null ? {} : pathInfos[index] || {};
         const originalPath = pathInfo.Path || (index == null ? null : currentOptions.library.Locations[index]);
         const btnRemovePath = dom.parentWithClass(e.target, 'btnRemovePath');
@@ -139,7 +139,7 @@ function refreshLibraryFromServer(page) {
 }
 
 function renderLibrary(page, options) {
-    let pathInfos = (options.library.LibraryOptions || {}).PathInfos || [];
+    let pathInfos = options.library.LibraryOptions?.PathInfos || [];
 
     if (!pathInfos.length) {
         pathInfos = options.library.Locations.map(p => {
@@ -197,7 +197,7 @@ function onDialogClosed() {
     currentDeferred.resolveWith(null, [hasChanges]);
 }
 
-export class showEditor {
+export class MediaLibraryEditor {
     constructor(options) {
         const deferred = jQuery.Deferred();
         currentOptions = options;
@@ -231,4 +231,4 @@ let currentOptions;
 let hasChanges = false;
 let isCreating = false;
 
-export default showEditor;
+export default MediaLibraryEditor;

src/components/metadataEditor/metadataEditor.js

@@ -759,7 +759,7 @@ function fillItemInfo(context, item, parentalRatingOptions) {
     context.querySelector('#txtName').value = item.Name || '';
     context.querySelector('#txtOriginalName').value = item.OriginalTitle || '';
     context.querySelector('#txtOverview').value = item.Overview || '';
-    context.querySelector('#txtTagline').value = (item.Taglines && item.Taglines.length ? item.Taglines[0] : '');
+    context.querySelector('#txtTagline').value = (item.Taglines?.length ? item.Taglines[0] : '');
     context.querySelector('#txtSortName').value = item.ForcedSortName || '';
     context.querySelector('#txtCommunityRating').value = item.CommunityRating || '';
 
@@ -826,7 +826,7 @@ function fillItemInfo(context, item, parentalRatingOptions) {
 
     context.querySelector('#txtAirTime').value = item.AirTime || '';
 
-    const placeofBirth = item.ProductionLocations && item.ProductionLocations.length ? item.ProductionLocations[0] : '';
+    const placeofBirth = item.ProductionLocations?.length ? item.ProductionLocations[0] : '';
     context.querySelector('#txtPlaceOfBirth').value = placeofBirth;
 
     context.querySelector('#txtOriginalAspectRatio').value = item.AspectRatio || '';

src/components/multiSelect/multiSelect.js

@@ -6,7 +6,7 @@ import dom from '../../scripts/dom';
 import './multiSelect.scss';
 import ServerConnections from '../ServerConnections';
 import alert from '../alert';
-import playlistEditor from '../playlisteditor/playlisteditor';
+import PlaylistEditor from '../playlisteditor/playlisteditor';
 import confirm from '../confirm/confirm';
 import itemHelper from '../itemHelper';
 import datetime from '../../scripts/datetime';
@@ -269,7 +269,7 @@ function showMenuForSelectedItems(e) {
                                 dispatchNeedsRefresh();
                                 break;
                             case 'playlist':
-                                new playlistEditor({
+                                new PlaylistEditor({
                                     items: items,
                                     serverId: serverId
                                 });
@@ -299,8 +299,8 @@ function showMenuForSelectedItems(e) {
                                 dispatchNeedsRefresh();
                                 break;
                             case 'refresh':
-                                import('../refreshdialog/refreshdialog').then(({ default: refreshDialog }) => {
+                                import('../refreshdialog/refreshdialog').then(({ default: RefreshDialog }) => {
-                                    new refreshDialog({
+                                    new RefreshDialog({
                                         itemIds: items,
                                         serverId: serverId
                                     }).show();

src/components/nowPlayingBar/nowPlayingBar.js

@@ -243,7 +243,7 @@ function bindEvents(elem) {
     positionSlider.getBubbleText = function (value) {
         const state = lastPlayerState;
 
-        if (!state || !state.NowPlayingItem || !currentRuntimeTicks) {
+        if (!state?.NowPlayingItem || !currentRuntimeTicks) {
             return '--:--';
         }
 
@@ -489,7 +489,7 @@ function imageUrl(item, options) {
     options = options || {};
     options.type = options.type || 'Primary';
 
-    if (item.ImageTags && item.ImageTags[options.type]) {
+    if (item.ImageTags?.[options.type]) {
         options.tag = item.ImageTags[options.type];
         return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
     }

src/components/playback/mediasession.js

@@ -35,7 +35,7 @@ function seriesImageUrl(item, options = {}) {
 function imageUrl(item, options = {}) {
     options.type = options.type || 'Primary';
 
-    if (item.ImageTags && item.ImageTags[options.type]) {
+    if (item.ImageTags?.[options.type]) {
         options.tag = item.ImageTags[options.type];
 
         return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);

src/components/playback/nowplayinghelper.js

@@ -23,7 +23,7 @@ export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
 
     let bottomText = '';
 
-    if (nowPlayingItem.ArtistItems && nowPlayingItem.ArtistItems.length) {
+    if (nowPlayingItem.ArtistItems?.length) {
         bottomItem = {
             Id: nowPlayingItem.ArtistItems[0].Id,
             Name: nowPlayingItem.ArtistItems[0].Name,
@@ -34,7 +34,7 @@ export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
         bottomText = nowPlayingItem.ArtistItems.map(function (a) {
             return a.Name;
         }).join(', ');
-    } else if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
+    } else if (nowPlayingItem.Artists?.length) {
         bottomText = nowPlayingItem.Artists.join(', ');
     } else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
         bottomText = topText;

src/components/playback/playbackmanager.js

@@ -163,12 +163,12 @@ function backdropImageUrl(apiClient, item, options) {
         options.quality = 100;
     }
 
-    if (item.BackdropImageTags && item.BackdropImageTags.length) {
+    if (item.BackdropImageTags?.length) {
         options.tag = item.BackdropImageTags[0];
         return apiClient.getScaledImageUrl(item.Id, options);
     }
 
-    if (item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
+    if (item.ParentBackdropImageTags?.length) {
         options.tag = item.ParentBackdropImageTags[0];
         return apiClient.getScaledImageUrl(item.ParentBackdropItemId, options);
     }
@@ -773,7 +773,7 @@ class PlaybackManager {
 
         self.setActivePlayer = function (player, targetInfo) {
             if (player === 'localplayer' || player.name === 'localplayer') {
-                if (self._currentPlayer && self._currentPlayer.isLocalPlayer) {
+                if (self._currentPlayer?.isLocalPlayer) {
                     return;
                 }
                 setCurrentPlayerInternal(null, null);
@@ -795,7 +795,7 @@ class PlaybackManager {
 
         self.trySetActivePlayer = function (player, targetInfo) {
             if (player === 'localplayer' || player.name === 'localplayer') {
-                if (self._currentPlayer && self._currentPlayer.isLocalPlayer) {
+                if (self._currentPlayer?.isLocalPlayer) {
                     return;
                 }
                 return;
@@ -967,7 +967,7 @@ class PlaybackManager {
                 return player.isPlaying();
             }
 
-            return player != null && player.currentSrc() != null;
+            return player?.currentSrc() != null;
         };
 
         self.isPlayingMediaType = function (mediaType, player) {
@@ -989,7 +989,7 @@ class PlaybackManager {
         self.isPlayingLocally = function (mediaTypes, player) {
             player = player || self._currentPlayer;
 
-            if (!player || !player.isLocalPlayer) {
+            if (!player?.isLocalPlayer) {
                 return false;
             }
 
@@ -1068,7 +1068,7 @@ class PlaybackManager {
         self.setAspectRatio = function (val, player) {
             player = player || self._currentPlayer;
 
-            if (player && player.setAspectRatio) {
+            if (player?.setAspectRatio) {
                 player.setAspectRatio(val);
             }
         };
@@ -1076,7 +1076,7 @@ class PlaybackManager {
         self.getSupportedAspectRatios = function (player) {
             player = player || self._currentPlayer;
 
-            if (player && player.getSupportedAspectRatios) {
+            if (player?.getSupportedAspectRatios) {
                 return player.getSupportedAspectRatios();
             }
 
@@ -1086,7 +1086,7 @@ class PlaybackManager {
         self.getAspectRatio = function (player) {
             player = player || self._currentPlayer;
 
-            if (player && player.getAspectRatio) {
+            if (player?.getAspectRatio) {
                 return player.getAspectRatio();
             }
         };
@@ -1131,7 +1131,7 @@ class PlaybackManager {
 
         self.getSupportedPlaybackRates = function (player) {
             player = player || self._currentPlayer;
-            if (player && player.getSupportedPlaybackRates) {
+            if (player?.getSupportedPlaybackRates) {
                 return player.getSupportedPlaybackRates();
             }
             return [];
@@ -1351,7 +1351,7 @@ class PlaybackManager {
 
         self.getMaxStreamingBitrate = function (player) {
             player = player || self._currentPlayer;
-            if (player && player.getMaxStreamingBitrate) {
+            if (player?.getMaxStreamingBitrate) {
                 return player.getMaxStreamingBitrate();
             }
 
@@ -1370,7 +1370,7 @@ class PlaybackManager {
 
         self.enableAutomaticBitrateDetection = function (player) {
             player = player || self._currentPlayer;
-            if (player && player.enableAutomaticBitrateDetection) {
+            if (player?.enableAutomaticBitrateDetection) {
                 return player.enableAutomaticBitrateDetection();
             }
 
@@ -1386,7 +1386,7 @@ class PlaybackManager {
 
         self.setMaxStreamingBitrate = function (options, player) {
             player = player || self._currentPlayer;
-            if (player && player.setMaxStreamingBitrate) {
+            if (player?.setMaxStreamingBitrate) {
                 return player.setMaxStreamingBitrate(options);
             }
 
@@ -1443,7 +1443,7 @@ class PlaybackManager {
                     document.webkitCancelFullscreen();
                 } else {
                     const elem = document.querySelector('video');
-                    if (elem && elem.webkitEnterFullscreen) {
+                    if (elem?.webkitEnterFullscreen) {
                         elem.webkitEnterFullscreen();
                     }
                 }
@@ -2078,7 +2078,7 @@ class PlaybackManager {
 
             const mediaSource = self.currentMediaSource(player);
 
-            if (mediaSource && mediaSource.RunTimeTicks) {
+            if (mediaSource?.RunTimeTicks) {
                 return mediaSource.RunTimeTicks;
             }
 
@@ -2614,7 +2614,7 @@ class PlaybackManager {
 
             if (mediaSource.MediaStreams && player.useFullSubtitleUrls) {
                 mediaSource.MediaStreams.forEach(stream => {
-                    if (stream.DeliveryUrl && stream.DeliveryUrl.startsWith('/')) {
+                    if (stream.DeliveryUrl?.startsWith('/')) {
                         stream.DeliveryUrl = apiClient.getUrl(stream.DeliveryUrl);
                     }
                 });
@@ -3444,7 +3444,7 @@ class PlaybackManager {
 
                 const streamInfo = getPlayerData(player).streamInfo;
 
-                if (streamInfo && streamInfo.started && !streamInfo.ended) {
+                if (streamInfo?.started && !streamInfo.ended) {
                     reportPlayback(self, state, player, reportPlaylist, serverId, 'reportPlaybackProgress', progressEventName);
                 }
 
@@ -3515,7 +3515,7 @@ class PlaybackManager {
 
         const nextItem = this._playQueueManager.getNextItemInfo();
 
-        if (!nextItem || !nextItem.item) {
+        if (!nextItem?.item) {
             return Promise.reject();
         }
 
@@ -3656,7 +3656,7 @@ class PlaybackManager {
     async playTrailers(item) {
         const player = this._currentPlayer;
 
-        if (player && player.playTrailers) {
+        if (player?.playTrailers) {
             return player.playTrailers(item);
         }
 
@@ -3668,7 +3668,7 @@ class PlaybackManager {
             items = await apiClient.getLocalTrailers(apiClient.getCurrentUserId(), item.Id);
         }
 
-        if (!items || !items.length) {
+        if (!items?.length) {
             items = (item.RemoteTrailers || []).map((t) => {
                 return {
                     Name: t.Name || (item.Name + ' Trailer'),
@@ -3750,7 +3750,7 @@ class PlaybackManager {
     }
 
     setPlaybackRate(value, player = this._currentPlayer) {
-        if (player && player.setPlaybackRate) {
+        if (player?.setPlaybackRate) {
             player.setPlaybackRate(value);
 
             // Save the new playback rate in the browser session, to restore when playing a new video.
@@ -3759,7 +3759,7 @@ class PlaybackManager {
     }
 
     getPlaybackRate(player = this._currentPlayer) {
-        if (player && player.getPlaybackRate) {
+        if (player?.getPlaybackRate) {
             return player.getPlaybackRate();
         }
 
@@ -3767,7 +3767,7 @@ class PlaybackManager {
     }
 
     instantMix(item, player = this._currentPlayer) {
-        if (player && player.instantMix) {
+        if (player?.instantMix) {
             return player.instantMix(item);
         }
 
@@ -3788,7 +3788,7 @@ class PlaybackManager {
     }
 
     shuffle(shuffleItem, player = this._currentPlayer) {
-        if (player && player.shuffle) {
+        if (player?.shuffle) {
             return player.shuffle(shuffleItem);
         }
 
@@ -3805,7 +3805,7 @@ class PlaybackManager {
 
         const mediaSource = this.currentMediaSource(player);
 
-        const mediaStreams = (mediaSource || {}).MediaStreams || [];
+        const mediaStreams = mediaSource?.MediaStreams || [];
         return mediaStreams.filter(function (s) {
             return s.Type === 'Audio';
         }).sort(itemHelper.sortTracks);
@@ -3821,7 +3821,7 @@ class PlaybackManager {
 
         const mediaSource = this.currentMediaSource(player);
 
-        const mediaStreams = (mediaSource || {}).MediaStreams || [];
+        const mediaStreams = mediaSource?.MediaStreams || [];
         return mediaStreams.filter(function (s) {
             return s.Type === 'Subtitle';
         }).sort(itemHelper.sortTracks);
@@ -3960,7 +3960,7 @@ class PlaybackManager {
     }
 
     displayContent(options, player = this._currentPlayer) {
-        if (player && player.displayContent) {
+        if (player?.displayContent) {
             player.displayContent(options);
         }
     }

src/components/playback/playbackorientation.js

@@ -1,4 +1,3 @@
-
 import { playbackManager } from './playbackmanager';
 import layoutManager from '../layoutManager';
 import Events from '../../utils/events.ts';
@@ -19,7 +18,7 @@ Events.on(playbackManager, 'playbackstart', function (e, player) {
 
     if (isLocalVideo && layoutManager.mobile) {
         /* eslint-disable-next-line compat/compat */
-        const lockOrientation = window.screen.lockOrientation || window.screen.mozLockOrientation || window.screen.msLockOrientation || (window.screen.orientation && window.screen.orientation.lock);
+        const lockOrientation = window.screen.lockOrientation || window.screen.mozLockOrientation || window.screen.msLockOrientation || (window.screen.orientation?.lock);
 
         if (lockOrientation) {
             try {
@@ -40,7 +39,7 @@ Events.on(playbackManager, 'playbackstart', function (e, player) {
 Events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) {
     if (orientationLocked && !playbackStopInfo.nextMediaType) {
         /* eslint-disable-next-line compat/compat */
-        const unlockOrientation = window.screen.unlockOrientation || window.screen.mozUnlockOrientation || window.screen.msUnlockOrientation || (window.screen.orientation && window.screen.orientation.unlock);
+        const unlockOrientation = window.screen.unlockOrientation || window.screen.mozUnlockOrientation || window.screen.msUnlockOrientation || (window.screen.orientation?.unlock);
 
         if (unlockOrientation) {
             try {

src/components/playback/playersettingsmenu.js

@@ -248,7 +248,7 @@ export function show(options) {
     const player = options.player;
     const currentItem = playbackManager.currentItem(player);
 
-    if (!currentItem || !currentItem.ServerId) {
+    if (!currentItem?.ServerId) {
         return showWithUser(options, player, null);
     }
 

src/components/playback/playmethodhelper.js

@@ -3,9 +3,9 @@ export function getDisplayPlayMethod(session) {
         return null;
     }
 
-    if (session.TranscodingInfo && session.TranscodingInfo.IsVideoDirect && session.TranscodingInfo.IsAudioDirect) {
+    if (session.TranscodingInfo?.IsVideoDirect && session.TranscodingInfo.IsAudioDirect) {
         return 'Remux';
-    } else if (session.TranscodingInfo && session.TranscodingInfo.IsVideoDirect) {
+    } else if (session.TranscodingInfo?.IsVideoDirect) {
         return 'DirectStream';
     } else if (session.PlayState.PlayMethod === 'Transcode') {
         return 'Transcode';

src/components/playerstats/playerstats.js

@@ -166,7 +166,7 @@ function getTranscodingStats(session, player, displayPlayMethod) {
                 value: session.TranscodingInfo.Framerate + ' fps'
             });
         }
-        if (session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length) {
+        if (session.TranscodingInfo.TranscodeReasons?.length) {
             sessionStats.push({
                 label: globalize.translate('LabelReasonForTranscoding'),
                 value: session.TranscodingInfo.TranscodeReasons.map(translateReason).join('<br/>')

src/components/playlisteditor/playlisteditor.js

@@ -221,7 +221,7 @@ function centerFocus(elem, horiz, on) {
     });
 }
 
-export class showEditor {
+export class PlaylistEditor {
     constructor(options) {
         const items = options.items || {};
         currentServerId = options.serverId;
@@ -280,4 +280,4 @@ export class showEditor {
     }
 }
 
-export default showEditor;
+export default PlaylistEditor;

src/components/pluginManager.js

@@ -72,13 +72,13 @@ class PluginManager {
                     throw new TypeError('Plugin definitions in window have to be an (async) function returning the plugin class');
                 }
 
-                const pluginClass = await pluginDefinition();
+                const PluginClass = await pluginDefinition();
-                if (typeof pluginClass !== 'function') {
+                if (typeof PluginClass !== 'function') {
                     throw new TypeError(`Plugin definition doesn't return a class for '${pluginSpec}'`);
                 }
 
                 // init plugin and pass basic dependencies
-                plugin = new pluginClass({
+                plugin = new PluginClass({
                     events: Events,
                     loading,
                     appSettings,

src/components/recordingcreator/recordingcreator.js

@@ -6,7 +6,7 @@ import loading from '../loading/loading';
 import scrollHelper from '../../scripts/scrollHelper';
 import datetime from '../../scripts/datetime';
 import imageLoader from '../images/imageLoader';
-import recordingFields from './recordingfields';
+import RecordingFields from './recordingfields';
 import Events from '../../utils/events.ts';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
@@ -170,7 +170,7 @@ function showEditor(itemId, serverId) {
             Events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
             executeCloseAction(closeAction, itemId, serverId);
 
-            if (currentRecordingFields && currentRecordingFields.hasChanged()) {
+            if (currentRecordingFields?.hasChanged()) {
                 resolve();
             } else {
                 reject();
@@ -185,7 +185,7 @@ function showEditor(itemId, serverId) {
 
         reload(dlg, itemId, serverId);
 
-        currentRecordingFields = new recordingFields({
+        currentRecordingFields = new RecordingFields({
             parent: dlg.querySelector('.recordingFields'),
             programId: itemId,
             serverId: serverId

src/components/remotecontrol/remotecontrol.js

@@ -119,7 +119,7 @@ function imageUrl(item, options) {
     options = options || {};
     options.type = options.type || 'Primary';
 
-    if (item.ImageTags && item.ImageTags[options.type]) {
+    if (item.ImageTags?.[options.type]) {
         options.tag = item.ImageTags[options.type];
         return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
     }
@@ -691,10 +691,10 @@ export default function () {
     }
 
     function savePlaylist() {
-        import('../playlisteditor/playlisteditor').then(({ default: playlistEditor }) => {
+        import('../playlisteditor/playlisteditor').then(({ default: PlaylistEditor }) => {
             getSaveablePlaylistItems().then(function (items) {
                 const serverId = items.length ? items[0].ServerId : ApiClient.serverId();
-                new playlistEditor({
+                new PlaylistEditor({
                     items: items.map(function (i) {
                         return i.Id;
                     }),
@@ -800,7 +800,7 @@ export default function () {
         positionSlider.getBubbleText = function (value) {
             const state = lastPlayerState;
 
-            if (!state || !state.NowPlayingItem || !currentRuntimeTicks) {
+            if (!state?.NowPlayingItem || !currentRuntimeTicks) {
                 return '--:--';
             }
 

src/components/router/appRouter.js

@@ -167,12 +167,13 @@ class AppRouter {
 
     canGoBack() {
         const { path, route } = this.currentRouteInfo;
+        const pathOnly = path?.split('?')[0] ?? '';
 
         if (!route) {
             return false;
         }
 
-        if (!document.querySelector('.dialogContainer') && (START_PAGE_TYPES.includes(route.type) || START_PAGE_PATHS.includes(path))) {
+        if (!document.querySelector('.dialogContainer') && (START_PAGE_TYPES.includes(route.type) || START_PAGE_PATHS.includes(pathOnly))) {
             return false;
         }
 
@@ -320,7 +321,7 @@ class AppRouter {
                 path: ctx.path
             };
         }).catch((result) => {
-            if (!result || !result.cancelled) {
+            if (!result?.cancelled) {
                 onNewViewNeeded();
             }
         });
@@ -402,7 +403,7 @@ class AppRouter {
         const isCurrentRouteStartup = this.currentRouteInfo ? this.currentRouteInfo.route.startup : true;
         const shouldExitApp = ctx.isBack && route.isDefaultRoute && isCurrentRouteStartup;
 
-        if (!shouldExitApp && (!apiClient || !apiClient.isLoggedIn()) && !route.anonymous) {
+        if (!shouldExitApp && (!apiClient?.isLoggedIn()) && !route.anonymous) {
             console.debug('[appRouter] route does not allow anonymous access: redirecting to login');
             this.#beginConnectionWizard();
             return;
@@ -416,7 +417,7 @@ class AppRouter {
             return;
         }
 
-        if (apiClient && apiClient.isLoggedIn()) {
+        if (apiClient?.isLoggedIn()) {
             console.debug('[appRouter] user is authenticated');
 
             if (route.roles) {

src/components/shortcuts.js

@@ -33,7 +33,7 @@ function playAllFromHere(card, serverId, queue) {
     }
 
     const itemsContainer = dom.parentWithClass(card, 'itemsContainer');
-    if (itemsContainer && itemsContainer.fetchData) {
+    if (itemsContainer?.fetchData) {
         const queryOptions = queue ? { StartIndex: startIndex } : {};
 
         return itemsContainer.fetchData(queryOptions).then(result => {
@@ -270,8 +270,8 @@ function executeAction(card, target, action) {
 }
 
 function addToPlaylist(item) {
-    import('./playlisteditor/playlisteditor').then(({ default: playlistEditor }) => {
+    import('./playlisteditor/playlisteditor').then(({ default: PlaylistEditor }) => {
-        new playlistEditor().show({
+        new PlaylistEditor().show({
             items: [item.Id],
             serverId: item.ServerId
 

src/components/slideshow/slideshow.js

@@ -41,7 +41,7 @@ function getImageUrl(item, options, apiClient) {
         return apiClient.getScaledImageUrl(item, options);
     }
 
-    if (item.ImageTags && item.ImageTags[options.type]) {
+    if (item.ImageTags?.[options.type]) {
         options.tag = item.ImageTags[options.type];
         return apiClient.getScaledImageUrl(item.Id, options);
     }
@@ -70,7 +70,7 @@ function getBackdropImageUrl(item, options, apiClient) {
         options.quality = 100;
     }
 
-    if (item.BackdropImageTags && item.BackdropImageTags.length) {
+    if (item.BackdropImageTags?.length) {
         options.tag = item.BackdropImageTags[0];
         return apiClient.getScaledImageUrl(item.Id, options);
     }
@@ -87,7 +87,7 @@ function getImgUrl(item, user) {
     const apiClient = ServerConnections.getApiClient(item.ServerId);
     const imageOptions = {};
 
-    if (item.BackdropImageTags && item.BackdropImageTags.length) {
+    if (item.BackdropImageTags?.length) {
         return getBackdropImageUrl(item, imageOptions, apiClient);
     } else {
         if (item.MediaType === 'Photo' && user && user.Policy.EnableContentDownloading) {

src/components/tabbedview/tabbedview.js

@@ -65,7 +65,7 @@ class TabbedView {
             const previousIndex = e.detail.previousIndex;
 
             const previousTabController = previousIndex == null ? null : self.tabControllers[previousIndex];
-            if (previousTabController && previousTabController.onPause) {
+            if (previousTabController?.onPause) {
                 previousTabController.onPause();
             }
 
@@ -93,7 +93,7 @@ class TabbedView {
 
         if (!currentTabController) {
             mainTabsManager.selectedTabIndex(this.initialTabIndex);
-        } else if (currentTabController && currentTabController.onResume) {
+        } else if (currentTabController?.onResume) {
             currentTabController.onResume({});
         }
     }
@@ -101,7 +101,7 @@ class TabbedView {
     onPause() {
         const currentTabController = this.currentTabController;
 
-        if (currentTabController && currentTabController.onPause) {
+        if (currentTabController?.onPause) {
             currentTabController.onPause();
         }
     }

src/components/themeMediaPlayer.js

@@ -86,7 +86,7 @@ document.addEventListener('viewshow', function (e) {
     const state = e.detail.state || {};
     const item = state.item;
 
-    if (item && item.ServerId) {
+    if (item?.ServerId) {
         loadThemeMedia(item);
         return;
     }

src/components/tunerPicker.js

@@ -120,7 +120,7 @@ function discoverDevices(view) {
     });
 }
 
-function tunerPicker() {
+function TunerPicker() {
     this.show = function () {
         const dialogOptions = {
             removeOnClose: true,
@@ -182,4 +182,4 @@ function tunerPicker() {
 
 let currentDevices = [];
 
-export default tunerPicker;
+export default TunerPicker;

src/components/viewManager/ViewManagerPage.tsx

@@ -47,7 +47,7 @@ const ViewManagerPage: FunctionComponent<ViewManagerPageProps> = ({
 
             viewManager.tryRestoreView(viewOptions)
                 .catch(async (result?: RestoreViewFailResponse) => {
-                    if (!result || !result.cancelled) {
+                    if (!result?.cancelled) {
                         const [ controllerFactory, viewHtml ] = await Promise.all([
                             import(/* webpackChunkName: "[request]" */ `../../controllers/${controller}`),
                             import(/* webpackChunkName: "[request]" */ `../../controllers/${view}`)

src/components/viewManager/viewManager.js

@@ -21,6 +21,7 @@ viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
         newView.initComplete = true;
 
         if (typeof options.controllerFactory === 'function') {
+            // eslint-disable-next-line new-cap
             new options.controllerFactory(newView, eventDetail.detail.params);
         } else if (options.controllerFactory && typeof options.controllerFactory.default === 'function') {
             new options.controllerFactory.default(newView, eventDetail.detail.params);

src/controllers/dashboard/dashboard.html

@@ -44,7 +44,7 @@
 
             <div class="dashboardColumn dashboardColumn-2-40 dashboardColumn-3-27">
                 <div class="dashboardSection">
-                    <a is="emby-linkbutton" href="#/serveractivity.html?useractivity=true" class="button-flat sectionTitleTextButton">
+                    <a is="emby-linkbutton" href="#/dashboard/activity?useractivity=true" class="button-flat sectionTitleTextButton">
                         <h3>${HeaderActivity}</h3>
                         <span class="material-icons chevron_right" aria-hidden="true"></span>
                     </a>
@@ -61,7 +61,7 @@
                 </div>
 
                 <div class="dashboardSection serverActivitySection hide activityContainer">
-                    <a is="emby-linkbutton" href="#/serveractivity.html?useractivity=false" class="button-flat sectionTitleTextButton">
+                    <a is="emby-linkbutton" href="#/dashboard/activity?useractivity=false" class="button-flat sectionTitleTextButton">
                         <h3>${Alerts}</h3>
                         <span class="material-icons chevron_right" aria-hidden="true"></span>
                     </a>

src/controllers/dashboard/dashboard.js

@@ -47,7 +47,7 @@ function showPlaybackInfo(btn, session) {
         text.push(globalize.translate('MediaIsBeingConverted'));
         text.push(DashboardPage.getSessionNowPlayingStreamInfo(session));
 
-        if (session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length) {
+        if (session.TranscodingInfo?.TranscodeReasons?.length) {
             text.push('<br/>');
             text.push(globalize.translate('LabelReasonForTranscoding'));
             session.TranscodingInfo.TranscodeReasons.forEach(function (transcodeReason) {
@@ -90,7 +90,7 @@ function showOptionsMenu(btn, session) {
             });
         }
 
-        if (session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length) {
+        if (session.TranscodingInfo?.TranscodeReasons?.length) {
             menuItems.push({
                 name: globalize.translate('ViewPlaybackInfo'),
                 id: 'transcodinginfo'
@@ -402,7 +402,7 @@ window.DashboardPage = {
         } else if (displayPlayMethod === 'DirectStream') {
             html += globalize.translate('DirectStreaming');
         } else if (displayPlayMethod === 'Transcode') {
-            if (session.TranscodingInfo && session.TranscodingInfo.Framerate) {
+            if (session.TranscodingInfo?.Framerate) {
                 html += `${globalize.translate('Framerate')}: ${session.TranscodingInfo.Framerate}fps`;
             }
 
@@ -481,7 +481,7 @@ window.DashboardPage = {
         let topText = escapeHtml(itemHelper.getDisplayName(nowPlayingItem));
         let bottomText = '';
 
-        if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
+        if (nowPlayingItem.Artists?.length) {
             bottomText = topText;
             topText = escapeHtml(nowPlayingItem.Artists[0]);
         } else {
@@ -493,7 +493,7 @@ window.DashboardPage = {
             }
         }
 
-        if (nowPlayingItem.ImageTags && nowPlayingItem.ImageTags.Logo) {
+        if (nowPlayingItem.ImageTags?.Logo) {
             imgUrl = ApiClient.getScaledImageUrl(nowPlayingItem.Id, {
                 tag: nowPlayingItem.ImageTags.Logo,
                 maxHeight: 24,
@@ -571,7 +571,7 @@ window.DashboardPage = {
 
         const btnSessionPlayPauseIcon = btnSessionPlayPause.querySelector('.material-icons');
         btnSessionPlayPauseIcon.classList.remove('play_arrow', 'pause');
-        btnSessionPlayPauseIcon.classList.add(session.PlayState && session.PlayState.IsPaused ? 'play_arrow' : 'pause');
+        btnSessionPlayPauseIcon.classList.add(session.PlayState?.IsPaused ? 'play_arrow' : 'pause');
 
         row.querySelector('.sessionNowPlayingTime').innerText = DashboardPage.getSessionNowPlayingTime(session);
         row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session);
@@ -620,7 +620,7 @@ window.DashboardPage = {
     getNowPlayingImageUrl: function (item) {
         /* Screen width is multiplied by 0.2, as the there is currently no way to get the width of
             elements that aren't created yet. */
-        if (item && item.BackdropImageTags && item.BackdropImageTags.length) {
+        if (item?.BackdropImageTags?.length) {
             return ApiClient.getScaledImageUrl(item.Id, {
                 maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                 type: 'Backdrop',
@@ -628,7 +628,7 @@ window.DashboardPage = {
             });
         }
 
-        if (item && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
+        if (item?.ParentBackdropImageTags?.length) {
             return ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
                 maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                 type: 'Backdrop',
@@ -636,7 +636,7 @@ window.DashboardPage = {
             });
         }
 
-        if (item && item.BackdropImageTag) {
+        if (item?.BackdropImageTag) {
             return ApiClient.getScaledImageUrl(item.BackdropItemId, {
                 maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                 type: 'Backdrop',
@@ -644,7 +644,7 @@ window.DashboardPage = {
             });
         }
 
-        const imageTags = (item || {}).ImageTags || {};
+        const imageTags = item?.ImageTags || {};
 
         if (item && imageTags.Thumb) {
             return ApiClient.getScaledImageUrl(item.Id, {
@@ -654,7 +654,7 @@ window.DashboardPage = {
             });
         }
 
-        if (item && item.ParentThumbImageTag) {
+        if (item?.ParentThumbImageTag) {
             return ApiClient.getScaledImageUrl(item.ParentThumbItemId, {
                 maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                 type: 'Thumb',
@@ -662,7 +662,7 @@ window.DashboardPage = {
             });
         }
 
-        if (item && item.ThumbImageTag) {
+        if (item?.ThumbImageTag) {
             return ApiClient.getScaledImageUrl(item.ThumbItemId, {
                 maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                 type: 'Thumb',
@@ -678,7 +678,7 @@ window.DashboardPage = {
             });
         }
 
-        if (item && item.PrimaryImageTag) {
+        if (item?.PrimaryImageTag) {
             return ApiClient.getScaledImageUrl(item.PrimaryImageItemId, {
                 maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                 type: 'Primary',
@@ -686,7 +686,7 @@ window.DashboardPage = {
             });
         }
 
-        if (item && item.AlbumPrimaryImageTag) {
+        if (item?.AlbumPrimaryImageTag) {
             return ApiClient.getScaledImageUrl(item.AlbumId, {
                 maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                 type: 'Primary',