Merge pull request #6041 from grafixeyehero/Fix-list-view-item-undefined

Show slideshow controls when touched

.ci/azure-pipelines-build.yml

@@ -1,57 +0,0 @@
-jobs:
-- job: Build
-  displayName: 'Build'
-
-  strategy:
-    matrix:
-      Development:
-        BuildConfiguration: development
-      Production:
-        BuildConfiguration: production
-
-  pool:
-    vmImage: 'ubuntu-latest'
-
-  steps:
-  - task: NodeTool@0
-    displayName: 'Install Node'
-    inputs:
-      versionSpec: '12.x'
-
-  - task: Cache@2
-    displayName: 'Cache node_modules'
-    inputs:
-      key: 'npm | package-lock.json'
-      path: 'node_modules'
-
-  - script: 'npm ci --no-audit'
-    displayName: 'Install Dependencies'
-    env:
-      SKIP_PREPARE: 'true'
-
-  - script: 'npm run build:development'
-    displayName: 'Build Development'
-    condition: eq(variables['BuildConfiguration'], 'development')
-
-  - script: 'npm run build:production'
-    displayName: 'Build Production'
-    condition: eq(variables['BuildConfiguration'], 'production')
-
-  - script: 'test -d dist'
-    displayName: 'Check Build'
-
-  - script: 'mv dist jellyfin-web'
-    displayName: 'Rename Directory'
-
-  - task: ArchiveFiles@2
-    displayName: 'Archive Directory'
-    inputs:
-      rootFolderOrFile: 'jellyfin-web'
-      includeRootFolder: true
-      archiveFile: 'jellyfin-web-$(BuildConfiguration)'
-
-  - task: PublishPipelineArtifact@1
-    displayName: 'Publish Release'
-    inputs:
-      targetPath: '$(Build.SourcesDirectory)/jellyfin-web-$(BuildConfiguration).zip'
-      artifactName: 'jellyfin-web-$(BuildConfiguration)'

.ci/azure-pipelines-package.yml

@@ -1,126 +0,0 @@
-jobs:
-- job: BuildPackage
-  displayName: 'Build Packages'
-
-  strategy:
-    matrix:
-      CentOS:
-        BuildConfiguration: centos
-      Debian:
-        BuildConfiguration: debian
-      Fedora:
-        BuildConfiguration: fedora
-      Portable:
-        BuildConfiguration: portable
-
-  pool:
-    vmImage: 'ubuntu-latest'
-
-  steps:
-  - script: echo "##vso[task.setvariable variable=JellyfinVersion]$( awk -F '/' '{ print $NF }' <<<'$(Build.SourceBranch)' | sed 's/^v//' )"
-    displayName: Set release version (stable)
-    condition: startsWith(variables['Build.SourceBranch'], 'refs/tags/v')
-
-  - script: 'docker build -f deployment/Dockerfile.$(BuildConfiguration) -t jellyfin-web-$(BuildConfiguration) deployment'
-    displayName: 'Build Dockerfile'
-    condition: or(startsWith(variables['Build.SourceBranch'], 'refs/tags'), startsWith(variables['Build.SourceBranch'], 'refs/heads/master'))
-
-  - script: 'docker image ls -a && docker run -v $(pwd)/deployment/dist:/dist -v $(pwd):/jellyfin -e IS_UNSTABLE="yes" -e BUILD_ID=$(Build.BuildNumber) jellyfin-web-$(BuildConfiguration)'
-    displayName: 'Run Dockerfile (unstable)'
-    condition: startsWith(variables['Build.SourceBranch'], 'refs/heads/master')
-
-  - script: 'docker image ls -a && docker run -v $(pwd)/deployment/dist:/dist -v $(pwd):/jellyfin -e IS_UNSTABLE="no" -e BUILD_ID=$(Build.BuildNumber) jellyfin-web-$(BuildConfiguration)'
-    displayName: 'Run Dockerfile (stable)'
-    condition: startsWith(variables['Build.SourceBranch'], 'refs/tags')
-
-  - task: PublishPipelineArtifact@1
-    displayName: 'Publish Release'
-    condition: or(startsWith(variables['Build.SourceBranch'], 'refs/tags'), startsWith(variables['Build.SourceBranch'], 'refs/heads/master'))
-    inputs:
-      targetPath: '$(Build.SourcesDirectory)/deployment/dist'
-      artifactName: 'jellyfin-web-$(BuildConfiguration)'
-
-  - task: SSH@0
-    displayName: 'Create target directory on repository server'
-    condition: or(startsWith(variables['Build.SourceBranch'], 'refs/tags'), startsWith(variables['Build.SourceBranch'], 'refs/heads/master'))
-    inputs:
-      sshEndpoint: repository
-      runOptions: 'inline'
-      inline: 'mkdir -p /srv/repository/incoming/azure/$(Build.BuildNumber)/$(BuildConfiguration)'
-
-  - task: CopyFilesOverSSH@0
-    displayName: 'Upload artifacts to repository server'
-    condition: or(startsWith(variables['Build.SourceBranch'], 'refs/tags'), startsWith(variables['Build.SourceBranch'], 'refs/heads/master'))
-    inputs:
-      sshEndpoint: repository
-      sourceFolder: '$(Build.SourcesDirectory)/deployment/dist'
-      contents: '**'
-      targetFolder: '/srv/repository/incoming/azure/$(Build.BuildNumber)/$(BuildConfiguration)'
-
-- job: BuildDocker
-  displayName: 'Build Docker'
-
-  pool:
-    vmImage: 'ubuntu-latest'
-
-  variables:
-  - name: JellyfinVersion
-    value: 0.0.0
-
-  steps:
-  - script: echo "##vso[task.setvariable variable=JellyfinVersion]$( awk -F '/' '{ print $NF }' <<<'$(Build.SourceBranch)' | sed 's/^v//' )"
-    displayName: Set release version (stable)
-    condition: startsWith(variables['Build.SourceBranch'], 'refs/tags')  
-
-  - task: Docker@2
-    displayName: 'Push Unstable Image'
-    condition: startsWith(variables['Build.SourceBranch'], 'refs/heads/master')
-    inputs:
-      repository: 'jellyfin/jellyfin-web'
-      command: buildAndPush
-      buildContext: '.'
-      Dockerfile: 'deployment/Dockerfile.docker'
-      containerRegistry: Docker Hub
-      tags: |
-        unstable-$(Build.BuildNumber)
-        unstable
-
-  - task: Docker@2
-    displayName: 'Push Stable Image'
-    condition: startsWith(variables['Build.SourceBranch'], 'refs/tags')
-    inputs:
-      repository: 'jellyfin/jellyfin-web'
-      command: buildAndPush
-      buildContext: '.'
-      Dockerfile: 'deployment/Dockerfile.docker'
-      containerRegistry: Docker Hub
-      tags: |
-        stable-$(Build.BuildNumber)
-        $(JellyfinVersion)
-
-- job: CollectArtifacts
-  displayName: 'Collect Artifacts'
-  dependsOn:
-  - BuildPackage
-  - BuildDocker
-  condition: and(succeeded('BuildPackage'), succeeded('BuildDocker'))
-
-  pool:
-    vmImage: 'ubuntu-latest'
-
-  steps:
-  - task: SSH@0
-    displayName: 'Update Unstable Repository'
-    condition: startsWith(variables['Build.SourceBranch'], 'refs/heads/master')
-    inputs:
-      sshEndpoint: repository
-      runOptions: 'inline'
-      inline: 'sudo /srv/repository/collect-server.azure.sh /srv/repository/incoming/azure $(Build.BuildNumber) unstable'
-
-  - task: SSH@0
-    displayName: 'Update Stable Repository'
-    condition: startsWith(variables['Build.SourceBranch'], 'refs/tags')
-    inputs:
-      sshEndpoint: repository
-      runOptions: 'inline'
-      inline: 'sudo /srv/repository/collect-server.azure.sh /srv/repository/incoming/azure $(Build.BuildNumber) $(Build.SourceBranch)'

.ci/azure-pipelines.yml

@@ -1,16 +0,0 @@
-trigger:
-  batch: true
-  branches:
-    include:
-    - '*'
-  tags:
-    include:
-    - '*'
-pr:
-  branches:
-    include:
-    - '*'
-
-jobs:
-- template: azure-pipelines-build.yml
-- template: azure-pipelines-package.yml

.copr

@@ -1 +0,0 @@
-fedora/

.devcontainer/devcontainer.json

@@ -0,0 +1,23 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Node.js",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	//https://github.com/microsoft/vscode-dev-containers/issues/559
+	"postCreateCommand": "source $NVM_DIR/nvm.sh && nvm install 20"
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.editorconfig

@@ -8,5 +8,5 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 end_of_line = lf
 
-[*.json]
+[*.{json,yaml,yml}]
 indent_size = 2

.escheckrc

@@ -0,0 +1,11 @@
+{
+    "ecmaVersion": "es5",
+    "modules": "false",
+    "files": "./dist/**/*.js",
+    "not": [
+        "./dist/libraries/pdf.worker.js",
+        "./dist/libraries/worker-bundle.js",
+        "./dist/libraries/wasm-gen/libarchive.js",
+        "./dist/serviceworker.js"
+    ]
+}

.eslintrc.js

@@ -2,12 +2,13 @@ const restrictedGlobals = require('confusing-browser-globals');
 
 module.exports = {
     root: true,
+    parser: '@typescript-eslint/parser',
     plugins: [
-        '@babel',
+        '@typescript-eslint',
         'react',
-        'promise',
         'import',
-        'eslint-comments'
+        'eslint-comments',
+        'sonarjs'
     ],
     env: {
         node: true,
@@ -15,64 +16,110 @@ module.exports = {
         es2017: true,
         es2020: true
     },
-    parserOptions: {
-        ecmaVersion: 2020,
-        sourceType: 'module',
-        ecmaFeatures: {
-            impliedStrict: true,
-            jsx: true
-        }
-    },
     extends: [
         'eslint:recommended',
         'plugin:react/recommended',
-        // 'plugin:promise/recommended',
         'plugin:import/errors',
         'plugin:eslint-comments/recommended',
-        'plugin:compat/recommended'
+        'plugin:compat/recommended',
+        'plugin:sonarjs/recommended'
     ],
     rules: {
-        'array-callback-return': ['error'],
+        'array-callback-return': ['error', { 'checkForEach': true }],
         'block-spacing': ['error'],
         'brace-style': ['error', '1tbs', { 'allowSingleLine': true }],
         'comma-dangle': ['error', 'never'],
         'comma-spacing': ['error'],
+        'curly': ['error', 'multi-line', 'consistent'],
         'default-case-last': ['error'],
         'eol-last': ['error'],
         'indent': ['error', 4, { 'SwitchCase': 1 }],
         'jsx-quotes': ['error', 'prefer-single'],
         'keyword-spacing': ['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-lonely-if': ['error'],
         'no-multi-spaces': ['error'],
         'no-multiple-empty-lines': ['error', { 'max': 1 }],
+        'no-nested-ternary': ['error'],
+        'no-redeclare': ['off'],
+        '@typescript-eslint/no-redeclare': ['error', { builtinGlobals: false }],
         'no-restricted-globals': ['error'].concat(restrictedGlobals),
+        'no-return-assign': ['error'],
+        'no-return-await': ['error'],
+        'no-sequences': ['error', { 'allowInParentheses': false }],
+        'no-shadow': ['off'],
+        '@typescript-eslint/no-shadow': ['error'],
+        'no-throw-literal': ['error'],
         'no-trailing-spaces': ['error'],
-        '@babel/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
-        'one-var': ['error', 'never'],
-        'padded-blocks': ['error', 'never'],
-        'prefer-const': ['error', {'destructuring': 'all'}],
-        'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }],
-        '@babel/semi': ['error'],
+        'no-undef-init': ['error'],
+        'no-unneeded-ternary': ['error'],
+        'no-unused-expressions': ['off'],
+        '@typescript-eslint/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
+        'no-unused-private-class-members': ['error'],
+        'no-useless-rename': ['error'],
+        'no-useless-constructor': ['off'],
+        '@typescript-eslint/no-useless-constructor': ['error'],
         'no-var': ['error'],
+        'no-void': ['error', { 'allowAsStatement': true }],
+        'no-warning-comments': ['warn', { 'terms': ['fixme', 'hack', 'xxx'] }],
+        'object-curly-spacing': ['error', 'always'],
+        'one-var': ['error', 'never'],
+        'operator-linebreak': ['error', 'before', { overrides: { '?': 'after', ':': 'after', '=': 'after' } }],
+        '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'],
         'space-before-blocks': ['error'],
         'space-infix-ops': 'error',
-        'yoda': 'error'
+        'yoda': 'error',
+
+        'react/jsx-filename-extension': ['error', { 'extensions': ['.jsx', '.tsx'] }],
+        'react/jsx-no-bind': ['error'],
+        'react/jsx-no-useless-fragment': ['error'],
+        'react/jsx-no-constructed-context-values': ['error'],
+        'react/no-array-index-key': ['error'],
+
+        'sonarjs/no-inverted-boolean-check': ['error'],
+        // TODO: Enable the following rules and fix issues
+        'sonarjs/cognitive-complexity': ['off'],
+        'sonarjs/no-duplicate-string': ['off']
     },
     settings: {
         react: {
             version: 'detect'
         },
-        'import/extensions': [
-            '.js',
-            '.ts',
-            '.jsx',
-            '.tsx'
-        ],
         'import/parsers': {
             '@typescript-eslint/parser': [ '.ts', '.tsx' ]
         },
+        'import/resolver': {
+            node: {
+                extensions: [
+                    '.js',
+                    '.ts',
+                    '.jsx',
+                    '.tsx'
+                ],
+                moduleDirectory: [
+                    'node_modules',
+                    'src'
+                ]
+            }
+        },
         polyfills: [
             // Native Promises Only
             'Promise',
@@ -160,12 +207,24 @@ module.exports = {
         ]
     },
     overrides: [
+        // Config files and development scripts
         {
             files: [
-                './src/**/*.js',
-                './src/**/*.ts'
+                './babel.config.js',
+                './.eslintrc.js',
+                './postcss.config.js',
+                './webpack.*.js',
+                './scripts/**/*.js'
+            ]
+        },
+        // JavaScript source files
+        {
+            files: [
+                './src/**/*.{js,jsx,ts,tsx}'
             ],
-            parser: '@babel/eslint-parser',
+            parserOptions: {
+                project: ['./tsconfig.json']
+            },
             env: {
                 node: false,
                 amd: true,
@@ -192,32 +251,33 @@ module.exports = {
                 'DlnaProfilePage': 'writable',
                 'DashboardPage': 'writable',
                 'Emby': 'readonly',
-                'getParameterByName': 'writable',
-                'getWindowLocationSearch': 'writable',
                 'Globalize': 'writable',
                 'Hls': 'writable',
-                'dfnshelper': 'writable',
                 'LibraryMenu': 'writable',
                 'LinkParser': 'writable',
                 'LiveTvHelpers': 'writable',
                 'Loading': 'writable',
                 'MetadataEditor': 'writable',
-                'PlaylistViewer': 'writable',
                 'ServerNotifications': 'writable',
                 'TaskButton': 'writable',
                 'UserParentalControlPage': 'writable',
-                'Windows': 'readonly'
+                'Windows': 'readonly',
+                // Build time definitions
+                __JF_BUILD_VERSION__: 'readonly',
+                __PACKAGE_JSON_NAME__: 'readonly',
+                __PACKAGE_JSON_VERSION__: 'readonly',
+                __USE_SYSTEM_FONTS__: 'readonly',
+                __WEBPACK_SERVE__: 'readonly'
             },
             rules: {
+                '@typescript-eslint/prefer-string-starts-ends-with': ['error']
             }
         },
+        // TypeScript source files
         {
             files: [
-                './src/**/*.ts',
-                './src/**/*.tsx'
+                './src/**/*.{ts,tsx}'
             ],
-            parser: '@typescript-eslint/parser',
-            plugins: ['@typescript-eslint'],
             extends: [
                 'eslint:recommended',
                 'plugin:import/typescript',
@@ -226,7 +286,13 @@ module.exports = {
                 'plugin:react/recommended',
                 'plugin:react-hooks/recommended',
                 'plugin:jsx-a11y/recommended'
-            ]
+            ],
+            rules: {
+                '@typescript-eslint/no-floating-promises': ['error'],
+                '@typescript-eslint/no-unused-vars': ['error'],
+
+                'sonarjs/cognitive-complexity': ['error']
+            }
         }
     ]
 };

.github/CODEOWNERS

@@ -1,6 +1 @@
-.ci             @dkanada @EraYaN
-.github         @jellyfin/core
-fedora          @joshuaboniface
-debian          @joshuaboniface
-.copr           @joshuaboniface
-deployment      @joshuaboniface
+*               @jellyfin/web

.github/SUPPORT.md

@@ -7,7 +7,7 @@ When looking for support or information, please first search for your
 question in these venues:
 
 * [Jellyfin Forum](https://forum.jellyfin.org)
-* [Jellyfin Documentation](https://docs.jellyfin.org)
+* [Jellyfin Documentation](https://jellyfin.org/docs/)
 * [Open or **closed** issues in the organization](https://github.com/issues?q=sort%3Aupdated-desc+org%3Ajellyfin+is%3Aissue+)
 
 If you didn't find an answer in the resources above, contributors and other

.github/pull_request_template.md

@@ -1,6 +1,6 @@
 <!--
 Ensure your title is short, descriptive, and in the imperative mood (Fix X, Change Y, instead of Fixed X, Changed Y).
-For a good inspiration of what to write in commit messages and PRs please review https://chris.beams.io/posts/git-commit/ and our https://docs.jellyfin.org/general/contributing/issues.html page.
+For a good inspiration of what to write in commit messages and PRs please review https://chris.beams.io/posts/git-commit/ and our https://jellyfin.org/docs/general/contributing/issues page.
 -->
 
 **Changes**

.github/renovate.json

@@ -1,51 +1,8 @@
 {
-  "packageRules": [
-    {
-      "matchManagers": ["npm"],
-      "addLabels": ["javascript"]
-    },
-    {
-      "description": "Adds label to dev dependency updates",
-      "matchDepTypes": ["devDependencies"],
-      "addLabels": ["dev-deps"]
-    },
-    {
-      "description": "Collects and groups dev dependency updates",
-      "matchDepTypes": ["devDependencies"],
-      "groupName": "development dependencies",
-      "groupSlug": "dev-deps"
-    },
-    {
-      "description": "Collects and groups npm dependency updates",
-      "matchDepTypes": ["dependencies"],
-      "groupName": "dependencies",
-      "groupSlug": "deps"
-    },
-    {
-      "description": "Collects and groups GitHub Action dependency updates",
-      "matchDepTypes": ["action"],
-      "addLabels": ["github_actions"],
-      "groupName": "CI dependencies",
-      "groupSlug": "ci-deps"
-    },
-    {
-      "description": "Disables HLS.js major updates",
-      "matchPackageNames": ["hls.js"],
-      "matchUpdateTypes": "major",
-      "enabled": false
-    }
-  ],
-  "vulnerabilityAlerts": {
-    "addLabels": ["security"]
-  },
-  "dependencyDashboard": false,
-  "ignoreDeps": ["npm", "node"],
-  "lockFileMaintenance": {
-    "enabled": false
-  },
-  "enabledManagers": ["npm", "github-actions"],
-  "labels": ["dependencies"],
-  "prHourlyLimit": 2,
-  "rebaseWhen": "conflicted",
-  "rangeStrategy": "pin"
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "github>jellyfin/.github//renovate-presets/nodejs",
+    ":semanticCommitsDisabled",
+    ":dependencyDashboard"
+  ]
 }

.github/workflows/automation.yml

@@ -14,7 +14,8 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ github.repository == 'jellyfin/jellyfin-web' }}
     steps:
-      - uses: eps1lon/actions-label-merge-conflict@v2.0.1
+      - uses: eps1lon/actions-label-merge-conflict@6d74047dcef155976a15e4a124dde2c7fe0c5522 # v3.0.1
         with:
           dirtyLabel: 'merge conflict'
+          commentOnDirty: 'This pull request has merge conflicts. Please resolve the conflicts so the PR can be successfully reviewed and merged.'
           repoToken: ${{ secrets.JF_BOT_TOKEN }}

.github/workflows/build.yml

@@ -0,0 +1,48 @@
+name: Build
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+on:
+  push:
+    branches: [ master, release* ]
+  pull_request:
+    branches: [ master, release* ]
+  workflow_dispatch:
+
+jobs:
+  run-build-prod:
+    name: Run production build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+
+      - name: Setup node environment
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        with:
+          node-version: 20
+          check-latest: true
+          cache: npm
+
+      - name: Install Node.js dependencies
+        run: npm ci --no-audit
+
+      - name: Run a production build
+        env:
+          JELLYFIN_VERSION: ${{ github.event.pull_request.head.sha || github.sha }}
+        run: npm run build:production
+
+      - name: Update config.json for testing
+        run: |
+          jq '.multiserver=true | .servers=["https://demo.jellyfin.org/unstable"]' dist/config.json > dist/config.tmp.json
+          mv dist/config.tmp.json dist/config.json
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+        with:
+          name: jellyfin-web__prod
+          path: |
+            dist

.github/workflows/codeql-analysis.yml

@@ -1,31 +0,0 @@
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
-  schedule:
-    - cron: '30 7 * * 6'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        queries: +security-extended
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1

.github/workflows/codeql.yml

@@ -0,0 +1,34 @@
+name: CodeQL
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+on:
+  push:
+    branches: [ master, release* ]
+  pull_request:
+    branches: [ master, release* ]
+  schedule:
+    - cron: '30 7 * * 6'
+
+jobs:
+  codeql:
+    name: Run CodeQL
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
+      with:
+        languages: javascript
+        queries: +security-extended
+
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6

.github/workflows/commands.yml

@@ -12,17 +12,25 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Notify as seen
-        uses: peter-evans/create-or-update-comment@v1.4.5
+        uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4.0.0
         with:
           token: ${{ secrets.JF_BOT_TOKEN }}
           comment-id: ${{ github.event.comment.id }}
           reactions: '+1'
       - name: Checkout the latest code
-        uses: actions/checkout@v3.0.0
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
         with:
           token: ${{ secrets.JF_BOT_TOKEN }}
           fetch-depth: 0
       - name: Automatic Rebase
-        uses: cirrus-actions/rebase@1.5
+        uses: cirrus-actions/rebase@b87d48154a87a85666003575337e27b8cd65f691 # 1.8
         env:
           GITHUB_TOKEN: ${{ secrets.JF_BOT_TOKEN }}
+      - name: Comment on failure
+        if: failure()
+        uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4.0.0
+        with:
+          token: ${{ secrets.JF_BOT_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            I'm sorry @${{ github.event.comment.user.login }}, I'm afraid I can't do that.

.github/workflows/job-messages.yml

@@ -0,0 +1,65 @@
+name: Job messages
+
+on:
+  workflow_call:
+    inputs:
+      branch:
+        required: false
+        type: string
+      commit:
+        required: true
+        type: string
+      preview_url:
+        required: false
+        type: string
+      build_workflow_run_id:
+        required: false
+        type: number
+      commenting_workflow_run_id:
+        required: true
+        type: string
+      in_progress:
+        required: true
+        type: boolean
+    outputs:
+      msg:
+        description: The composed message
+        value: ${{ jobs.msg.outputs.msg }}
+      marker:
+        description: Hidden marker to detect PR comments composed by the bot
+        value: "CFPages-deployment"
+
+jobs:
+  msg:
+    name: Deployment status
+    runs-on: ubuntu-latest
+    outputs:
+      msg: ${{ env.msg }}
+
+    steps:
+      - name: Compose message
+        if: ${{ always() }}
+        id: compose
+        env:
+          COMMIT: ${{ inputs.commit }}
+          PREVIEW_URL: ${{ inputs.preview_url != '' && (inputs.branch != 'master' && inputs.preview_url || format('https://jellyfin-web.pages.dev ({0})', inputs.preview_url)) || 'Not available' }}
+          DEPLOY_STATUS: ${{ inputs.in_progress && '🔄 Deploying...' || (inputs.preview_url != '' && '✅ Deployed!' || '❌ Failure. Check workflow logs for details') }}
+          DEPLOYMENT_TYPE: ${{ inputs.branch != 'master' && '🔀 Preview' || '⚙️ Production' }}
+          BUILD_WORKFLOW_RUN: ${{ !inputs.in_progress && format('**[View build logs](https://github.com/{0}/actions/runs/{1})**', 'jellyfin/jellyfin-web', inputs.build_workflow_run_id) || '' }}
+          COMMENTING_WORKFLOW_RUN: ${{ format('**[View bot logs](https://github.com/{0}/actions/runs/{1})**', 'jellyfin/jellyfin-web', inputs.commenting_workflow_run_id) }}
+        # EOF is needed for multiline environment variables in a GitHub Actions context
+        run: |
+          echo "## Cloudflare Pages deployment" > $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "| **Latest commit**       	| <code>${COMMIT::7}</code>     |" >> $GITHUB_STEP_SUMMARY
+          echo "|-------------------------	|:----------------------------:	|" >> $GITHUB_STEP_SUMMARY
+          echo "| **Status**              	| $DEPLOY_STATUS                |" >> $GITHUB_STEP_SUMMARY
+          echo "| **Preview URL**         	| $PREVIEW_URL                  |" >> $GITHUB_STEP_SUMMARY
+          echo "| **Type**         	        | $DEPLOYMENT_TYPE              |" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "$BUILD_WORKFLOW_RUN" >> $GITHUB_STEP_SUMMARY
+          echo "$COMMENTING_WORKFLOW_RUN" >> $GITHUB_STEP_SUMMARY
+          COMPOSED_MSG=$(cat $GITHUB_STEP_SUMMARY)
+          echo "msg<<EOF" >> $GITHUB_ENV
+          echo "$COMPOSED_MSG" >> $GITHUB_ENV
+          echo "EOF" >> $GITHUB_ENV

.github/workflows/lint.yml

@@ -1,119 +0,0 @@
-name: Lint
-
-on:
-  push:
-    branches: [ master, release* ]
-  pull_request:
-    branches: [ master, release* ]
-
-jobs:
-  run-eslint:
-    name: Run eslint
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v3
-
-      - name: Setup node environment
-        uses: actions/setup-node@v3.0.0
-        with:
-          node-version: 12
-          check-latest: true
-
-      - name: Get npm cache directory path
-        id: npm-cache-dir-path
-        run: echo "::set-output name=dir::$(npm config get cache)"
-
-      - name: Cache node_modules
-        uses: actions/cache@v3.0.0
-        id: npm-cache
-        with:
-          path: ${{ steps.npm-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-npm-
-
-      - name: Install Node.js dependencies
-        run: npm ci --no-audit
-        env:
-          SKIP_PREPARE: true
-
-      - name: Run eslint
-        run: npm run lint
-
-  run-stylelint-css:
-    name: Run stylelint (css)
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v3
-
-      - name: Setup node environment
-        uses: actions/setup-node@v3.0.0
-        with:
-          node-version: 12
-          check-latest: true
-
-      - name: Get npm cache directory path
-        id: npm-cache-dir-path
-        run: echo "::set-output name=dir::$(npm config get cache)"
-
-      - name: Cache node_modules
-        uses: actions/cache@v3.0.0
-        id: npm-cache
-        with:
-          path: ${{ steps.npm-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-npm-
-
-      - name: Set up stylelint matcher
-        uses: xt0rted/stylelint-problem-matcher@v1
-
-      - name: Install Node.js dependencies
-        run: npm ci --no-audit
-        env:
-          SKIP_PREPARE: true
-
-      - name: Run stylelint
-        run: npm run stylelint:css
-
-  run-stylelint-scss:
-    name: Run stylelint (scss)
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v3
-
-      - name: Setup node environment
-        uses: actions/setup-node@v3.0.0
-        with:
-          node-version: 12
-          check-latest: true
-
-      - name: Get npm cache directory path
-        id: npm-cache-dir-path
-        run: echo "::set-output name=dir::$(npm config get cache)"
-
-      - name: Cache node_modules
-        uses: actions/cache@v3.0.0
-        id: npm-cache
-        with:
-          path: ${{ steps.npm-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-npm-
-
-      - name: Set up stylelint matcher
-        uses: xt0rted/stylelint-problem-matcher@v1
-
-      - name: Install Node.js dependencies
-        run: npm ci --no-audit
-        env:
-          SKIP_PREPARE: true
-
-      - name: Run stylelint
-        run: npm run stylelint:scss

.github/workflows/pr-suggestions.yml

@@ -0,0 +1,38 @@
+name: PR suggestions
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.id || github.run_id }}
+  cancel-in-progress: true
+
+on:
+  pull_request_target:
+    branches: [ master, release* ]
+    types:
+      - synchronize
+
+jobs:
+  run-eslint:
+    name: Run eslint suggestions
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Setup node environment
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        with:
+          node-version: 20
+          check-latest: true
+          cache: npm
+
+      - name: Install Node.js dependencies
+        run: npm ci --no-audit
+
+      - name: Run eslint
+        if: ${{ github.repository == 'jellyfin/jellyfin-web' }}
+        uses: CatChen/eslint-suggestion-action@b110ac684564c7b73e47cc223eb7a5266ec83fd3 # v4.1.1
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/publish.yml

@@ -0,0 +1,84 @@
+name: Publish
+
+on:
+  workflow_run:
+    workflows:
+      - Build
+    types:
+      - completed
+
+jobs:
+  publish:
+    name: Deploy to Cloudflare Pages
+    if: ${{ always() }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    # We set the environment variable here (and as an output) because,
+    # given no real runner is dispatched in compose-comment job (it's dispatched in the reusable workflow) in this workflow definition,
+    # the env. context is not valid.
+    env:
+      TARGET_BRANCH: |
+        ${{
+          github.event.workflow_run.head_repository.full_name == github.repository
+          && github.event.workflow_run.head_branch
+          || format('{0}/{1}', github.event.workflow_run.head_repository.full_name, github.event.workflow_run.head_branch)
+        }}
+    outputs:
+      url: ${{ steps.cf.outputs.url }}
+      branch: ${{ env.TARGET_BRANCH }}
+
+    steps:
+      - name: Download workflow artifact
+        uses: dawidd6/action-download-artifact@09f2f74827fd3a8607589e5ad7f9398816f540fe # v3.1.4
+        with:
+          run_id: ${{ github.event.workflow_run.id }}
+          name: jellyfin-web__prod
+          path: dist
+
+      - name: Publish
+        id: cf
+        uses: cloudflare/pages-action@f0a1cd58cd66095dee69bfa18fa5efd1dde93bca # 1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: jellyfin-web
+          branch: ${{ env.TARGET_BRANCH }}
+          directory: dist
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+
+  compose-comment:
+    name: Compose comment
+    if: ${{ always() }}
+    uses: ./.github/workflows/job-messages.yml
+    needs:
+      - publish
+
+    with:
+      branch: ${{ needs.publish.outputs.branch }}
+      commit: ${{ github.event.workflow_run.head_commit.id }}
+      preview_url: ${{ needs.publish.outputs.url }}
+      build_workflow_run_id: ${{ github.event.workflow_run.id }}
+      commenting_workflow_run_id: ${{ github.run_id }}
+      in_progress: false
+
+  comment-status:
+    name: Create comment status
+    if: |
+      always() &&
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.pull_requests[0].number != ''
+    runs-on: ubuntu-latest
+    needs:
+      - compose-comment
+
+    steps:
+      - name: Update job summary in PR comment
+        uses: thollander/actions-comment-pull-request@fabd468d3a1a0b97feee5f6b9e499eab0dd903f6 # v2.5.0
+        with:
+          GITHUB_TOKEN: ${{ secrets.JF_BOT_TOKEN }}
+          message: ${{ needs.compose-comment.outputs.msg }}
+          pr_number: ${{ github.event.workflow_run.pull_requests[0].number }}
+          comment_tag: ${{ needs.compose-comment.outputs.marker }}
+          mode: recreate

.github/workflows/quality.yml

@@ -0,0 +1,123 @@
+name: Quality checks
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+on:
+  push:
+    branches: [ master, release* ]
+  pull_request:
+    branches: [ master, release* ]
+
+jobs:
+  run-escheck:
+    name: Run es-check
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+
+      - name: Setup node environment
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        with:
+          node-version: 20
+          check-latest: true
+          cache: npm
+
+      - name: Install Node.js dependencies
+        run: npm ci --no-audit
+
+      - name: Run a production build
+        run: npm run build:production
+
+      - name: Run es-check
+        run: npm run escheck
+
+  run-eslint:
+    name: Run eslint
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+
+      - name: Setup node environment
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        with:
+          node-version: 20
+          check-latest: true
+          cache: npm
+
+      - name: Install Node.js dependencies
+        run: npm ci --no-audit
+
+      - name: Run eslint
+        run: npx eslint --quiet "."
+
+  run-stylelint:
+    name: Run stylelint
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+
+      - name: Setup node environment
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        with:
+          node-version: 20
+          check-latest: true
+          cache: npm
+
+      - name: Set up stylelint matcher
+        uses: xt0rted/stylelint-problem-matcher@34db1b874c0452909f0696aedef70b723870a583 # tag=v1
+
+      - name: Install Node.js dependencies
+        run: npm ci --no-audit
+
+      - name: Run stylelint
+        run: npm run stylelint
+
+  run-tsc:
+    name: Run TypeScript build check
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+
+      - name: Setup node environment
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        with:
+          node-version: 20
+          check-latest: true
+          cache: npm
+
+      - name: Install Node.js dependencies
+        run: npm ci --no-audit
+
+      - name: Run tsc
+        run: npm run build:check
+
+  run-test:
+    name: Run tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+
+      - name: Setup node environment
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        with:
+          node-version: 20
+          check-latest: true
+          cache: npm
+
+      - name: Install Node.js dependencies
+        run: npm ci --no-audit
+
+      - name: Run test suite
+        run: npm run test

.github/workflows/stale.yml

@@ -1,18 +1,24 @@
-name: Issue Stale Check
+name: Stale Check
 
 on:
   schedule:
     - cron: '30 1 * * *'
   workflow_dispatch:
 
+permissions:
+  issues: write
+  pull-requests: write
+
 jobs:
-  stale:
+  issues:
+    name: Check issues
     runs-on: ubuntu-latest
     if: ${{ contains(github.repository, 'jellyfin/') }}
     steps:
-      - uses: actions/stale@v5.0.0
+      - uses: actions/stale@28ca1036281a5e5922ead5184a1bbf96e5fc984e # v9.0.0
         with:
           repo-token: ${{ secrets.JF_BOT_TOKEN }}
+          operations-per-run: 75
           days-before-stale: 120
           days-before-pr-stale: -1
           days-before-close: 21
@@ -21,7 +27,25 @@ jobs:
           stale-issue-label: stale
           stale-issue-message: |-
             This issue has gone 120 days without comment. To avoid abandoned issues, it will be closed in 21 days if there are no new comments.
-            
+
             If you're the original submitter of this issue, please comment confirming if this issue still affects you in the latest release or master branch, or close the issue if it has been fixed. If you're another user also affected by this bug, please comment confirming so. Either action will remove the stale label.
-            
-            This bot exists to prevent issues from becoming stale and forgotten. Jellyfin is always moving forward, and bugs are often fixed as side effects of other changes. We therefore ask that bug report authors remain vigilant about their issues to ensure they are closed if fixed, or re-confirmed - perhaps with fresh logs or reproduction examples - regularly. If you have any questions you can reach us on [Matrix or Social Media](https://docs.jellyfin.org/general/getting-help.html).
+
+            This bot exists to prevent issues from becoming stale and forgotten. Jellyfin is always moving forward, and bugs are often fixed as side effects of other changes. We therefore ask that bug report authors remain vigilant about their issues to ensure they are closed if fixed, or re-confirmed - perhaps with fresh logs or reproduction examples - regularly. If you have any questions you can reach us on [Matrix or Social Media](https://jellyfin.org/contact).
+
+  prs-conflicts:
+    name: Check PRs with merge conflicts
+    runs-on: ubuntu-latest
+    if: ${{ contains(github.repository, 'jellyfin/') }}
+    steps:
+      - uses: actions/stale@28ca1036281a5e5922ead5184a1bbf96e5fc984e # v9.0.0
+        with:
+          repo-token: ${{ secrets.JF_BOT_TOKEN }}
+          operations-per-run: 75
+          # The merge conflict action will remove the label when updated
+          remove-stale-when-updated: false
+          days-before-stale: -1
+          days-before-close: 90
+          days-before-issue-close: -1
+          stale-pr-label: merge conflict
+          close-pr-message: |-
+            This PR has been closed due to having unresolved merge conflicts.

.github/workflows/update-sdk.yml

@@ -0,0 +1,52 @@
+name: Update the Jellyfin SDK
+
+on:
+  schedule:
+    - cron: '0 7 * * *'
+  workflow_dispatch:
+
+concurrency:
+  group: unstable-sdk-pr
+  cancel-in-progress: true
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    if: ${{ github.repository == 'jellyfin/jellyfin-web' }}
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
+        with:
+          ref: master
+          token: ${{ secrets.JF_BOT_TOKEN }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+        with:
+          node-version: 20
+          check-latest: true
+          cache: npm
+
+      - name: Install latest unstable SDK
+        run: |
+          npm i --save @jellyfin/sdk@unstable
+          VERSION=$(jq -r '.dependencies["@jellyfin/sdk"]' package.json)
+          echo "JF_SDK_VERSION=${VERSION}" >> $GITHUB_ENV
+
+      - name: Open a pull request
+        uses: peter-evans/create-pull-request@6d6857d36972b65feb161a90e484f2984215f83e # v6.0.5
+        with:
+          token: ${{ secrets.JF_BOT_TOKEN }}
+          commit-message: Update @jellyfin/sdk to ${{env.JF_SDK_VERSION}}
+          committer: jellyfin-bot <team@jellyfin.org>
+          author: jellyfin-bot <team@jellyfin.org>
+          branch: update-jf-sdk
+          delete-branch: true
+          title: Update @jellyfin/sdk to ${{env.JF_SDK_VERSION}}
+          body: |
+            **Changes**
+            Updates to the latest unstable @jellyfin/sdk build
+          labels: |
+            dependencies
+            npm

.gitignore

@@ -8,7 +8,7 @@ config.json
 
 # ide
 .idea
-.vscode
+.vs
 
 # log
 yarn-error.log

.npmrc

@@ -1,2 +1,3 @@
+engine-strict=true
 fund=false
 save-exact=true

.sonarcloud.properties

@@ -0,0 +1,3 @@
+# Exclude test files from Sonar sources
+# See: https://docs.sonarcloud.io/advanced-setup/analysis-scope/#file-exclusion-and-inclusion
+sonar.exclusions=src/**/*.test.js,src/**/*.test.ts

.stylelintrc.json

@@ -1,7 +1,7 @@
 {
   "plugins": [
-		"stylelint-no-browser-hacks/lib"
-	],
+    "stylelint-no-browser-hacks/lib"
+  ],
   "rules": {
     "at-rule-empty-line-before": [ "always", {
       "except": [
@@ -13,6 +13,7 @@
     "at-rule-name-case": "lower",
     "at-rule-name-space-after": "always-single-line",
     "at-rule-no-unknown": true,
+    "at-rule-no-vendor-prefix": true,
     "at-rule-semicolon-newline-after": "always",
     "block-closing-brace-empty-line-before": "never",
     "block-closing-brace-newline-after": "always",
@@ -77,6 +78,7 @@
     "media-feature-colon-space-before": "never",
     "media-feature-name-case": "lower",
     "media-feature-name-no-unknown": true,
+    "media-feature-name-no-vendor-prefix": true,
     "media-feature-parentheses-space-inside": "never",
     "media-feature-range-operator-space-after": "always",
     "media-feature-range-operator-space-before": "always",
@@ -103,6 +105,7 @@
         ]
       }
     ],
+    "property-no-vendor-prefix": true,
     "rule-empty-line-before": [ "always-multi-line", {
       "except": ["first-nested"],
       "ignore": ["after-comment"]
@@ -116,6 +119,7 @@
     "selector-list-comma-newline-after": "always",
     "selector-list-comma-space-before": "never",
     "selector-max-empty-lines": 0,
+    "selector-no-vendor-prefix": true,
     "selector-pseudo-class-case": "lower",
     "selector-pseudo-class-no-unknown": true,
     "selector-pseudo-class-parentheses-space-inside": "never",
@@ -134,9 +138,25 @@
     "string-no-newline": true,
     "unit-case": "lower",
     "unit-no-unknown": true,
+    "value-no-vendor-prefix": true,
     "value-list-comma-newline-after": "always-multi-line",
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",
     "value-list-max-empty-lines": 0
-  }
+  },
+  "overrides": [
+    {
+      "files": [
+        "*.scss",
+        "**/*.scss"
+      ],
+      "customSyntax": "postcss-scss",
+      "plugins": [ "stylelint-scss" ],
+      "rules": {
+        "at-rule-no-unknown": null,
+        "scss/at-rule-no-unknown": true,
+        "plugin/no-browser-hacks": null
+      }
+    }
+  ]
 }

.stylelintrc.scss.json

@@ -1,10 +0,0 @@
-{
-  "extends": [ "./.stylelintrc.json" ],
-  "customSyntax": "postcss-scss",
-  "plugins": [ "stylelint-scss" ],
-  "rules": {
-    "at-rule-no-unknown": null,
-    "scss/at-rule-no-unknown": true,
-    "plugin/no-browser-hacks": null
-  }
-}

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "eslint.format.enable": true,
+  "editor.formatOnSave": false
+}

CONTRIBUTORS.md

@@ -1,121 +1,160 @@
 # Jellyfin Contributors
 
- - [JoshuaBoniface](https://github.com/joshuaboniface)
- - [nvllsvm](https://github.com/nvllsvm)
- - [JustAMan](https://github.com/JustAMan)
- - [dcrdev](https://github.com/dcrdev)
- - [EraYaN](https://github.com/EraYaN)
- - [flemse](https://github.com/flemse)
- - [bfayers](https://github.com/bfayers)
- - [Bond_009](https://github.com/Bond-009)
- - [AnthonyLavado](https://github.com/anthonylavado)
- - [dkanada](https://github.com/dkanada)
- - [sparky8251](https://github.com/sparky8251)
- - [LeoVerto](https://github.com/LeoVerto)
- - [cvium](https://github.com/cvium)
- - [grafixeyehero](https://github.com/grafixeyehero)
- - [Drago96](https://github.com/drago-96)
- - [ViXXoR](https://github.com/ViXXoR)
- - [nkmerrill](https://github.com/nkmerrill)
- - [TtheCreator](https://github.com/Tthecreator)
- - [RazeLighter777](https://github.com/RazeLighter777)
- - [LogicalPhallacy](https://github.com/LogicalPhallacy)
- - [thornbill](https://github.com/thornbill)
- - [redSpoutnik](https://github.com/redSpoutnik)
- - [DrPandemic](https://github.com/drpandemic)
- - [Oddstr13](https://github.com/oddstr13)
- - [petermcneil](https://github.com/petermcneil)
- - [lewazo](https://github.com/lewazo)
- - [Raghu Saxena](https://github.com/ckcr4lyf)
- - [Nickbert7](https://github.com/Nickbert7)
- - [ferferga](https://github.com/ferferga)
- - [bilde2910](https://github.com/bilde2910)
- - [Daniel Hartung](https://github.com/dhartung)
- - [Ryan Hartzell](https://github.com/ryan-hartzell)
- - [Thibault Nocchi](https://github.com/ThibaultNocchi)
- - [MrTimscampi](https://github.com/MrTimscampi)
- - [artiume](https://github.com/Artiume)
- - [ConfusedPolarBear](https://github.com/ConfusedPolarBear)
- - [Sarab Singh](https://github.com/sarab97)
- - [DesertCookie](https://github.com/desertcookie)
- - [GuilhermeHideki](https://github.com/GuilhermeHideki)
- - [Andrei Oanca](https://github.com/OancaAndrei)
- - [Cromefire_](https://github.com/cromefire)
- - [Orry Verducci](https://github.com/orryverducci)
- - [Camc314](https://github.com/camc314)
- - [danieladov](https://github.com/danieladov)
- - [Stephane Senart](https://github.com/ssenart)
- - [imchasingshadows](https://github.com/imchasingshadows)
- - [Ömer Erdinç Yağmurlu](https://github.com/omeryagmurlu)
- - [Keegan Dahm](https://github.com/keegandahm)
- - [GodTamIt](https://github.com/GodTamIt)
- - [MinecraftPlaye](https://github.com/MinecraftPlaye)
- - [Matthew Jones](https://github.com/matthew-jones-uk)
- - [taku0](https://github.com/taku0)
- - [Peter Spenler](https://github.com/peterspenler)
+- [JoshuaBoniface](https://github.com/joshuaboniface)
+- [nvllsvm](https://github.com/nvllsvm)
+- [JustAMan](https://github.com/JustAMan)
+- [dcrdev](https://github.com/dcrdev)
+- [EraYaN](https://github.com/EraYaN)
+- [flemse](https://github.com/flemse)
+- [bfayers](https://github.com/bfayers)
+- [Bond_009](https://github.com/Bond-009)
+- [AnthonyLavado](https://github.com/anthonylavado)
+- [dkanada](https://github.com/dkanada)
+- [sparky8251](https://github.com/sparky8251)
+- [LeoVerto](https://github.com/LeoVerto)
+- [cvium](https://github.com/cvium)
+- [grafixeyehero](https://github.com/grafixeyehero)
+- [Drago96](https://github.com/drago-96)
+- [ViXXoR](https://github.com/ViXXoR)
+- [nkmerrill](https://github.com/nkmerrill)
+- [TtheCreator](https://github.com/Tthecreator)
+- [RazeLighter777](https://github.com/RazeLighter777)
+- [LogicalPhallacy](https://github.com/LogicalPhallacy)
+- [thornbill](https://github.com/thornbill)
+- [redSpoutnik](https://github.com/redSpoutnik)
+- [DrPandemic](https://github.com/drpandemic)
+- [Oddstr13](https://github.com/oddstr13)
+- [petermcneil](https://github.com/petermcneil)
+- [lewazo](https://github.com/lewazo)
+- [Raghu Saxena](https://github.com/ckcr4lyf)
+- [Nickbert7](https://github.com/Nickbert7)
+- [ferferga](https://github.com/ferferga)
+- [bilde2910](https://github.com/bilde2910)
+- [Daniel Hartung](https://github.com/dhartung)
+- [Ryan Hartzell](https://github.com/ryan-hartzell)
+- [Thibault Nocchi](https://github.com/ThibaultNocchi)
+- [MrTimscampi](https://github.com/MrTimscampi)
+- [artiume](https://github.com/Artiume)
+- [ConfusedPolarBear](https://github.com/ConfusedPolarBear)
+- [Sarab Singh](https://github.com/sarab97)
+- [DesertCookie](https://github.com/desertcookie)
+- [GuilhermeHideki](https://github.com/GuilhermeHideki)
+- [Andrei Oanca](https://github.com/OancaAndrei)
+- [Cromefire_](https://github.com/cromefire)
+- [Orry Verducci](https://github.com/orryverducci)
+- [Camc314](https://github.com/camc314)
+- [danieladov](https://github.com/danieladov)
+- [Stephane Senart](https://github.com/ssenart)
+- [imchasingshadows](https://github.com/imchasingshadows)
+- [Ömer Erdinç Yağmurlu](https://github.com/omeryagmurlu)
+- [Keegan Dahm](https://github.com/keegandahm)
+- [GodTamIt](https://github.com/GodTamIt)
+- [MinecraftPlaye](https://github.com/MinecraftPlaye)
+- [Matthew Jones](https://github.com/matthew-jones-uk)
+- [taku0](https://github.com/taku0)
+- [Viperinius](https://github.com/Viperinius)
+- [is343](https://github.com/is343)
+- [Meet Pandya](https://github.com/meet-k-pandya)
+- [Peter Spenler](https://github.com/peterspenler)
+- [jomp16](https://github.com/jomp16)
+- [Leon de Klerk](https://github.com/leondeklerk)
+- [CrispyBaguette](https://github.com/CrispyBaguette)
+- [Vankerkom](https://github.com/vankerkom)
+- [edvwib](https://github.com/edvwib)
+- [Rob Farraher](https://github.com/farraherbg)
+- [TelepathicWalrus](https://github.com/TelepathicWalrus)
+- [Pier-Luc Ducharme](https://github.com/pl-ducharme)
+- [Anantharaju S](https://github.com/Anantharajus)
+- [Merlin Sievers](https://github.com/dann-merlin)
+- [Fishbigger](https://github.com/fishbigger)
+- [sleepycatcoding](https://github.com/sleepycatcoding)
+- [TheMelmacian](https://github.com/TheMelmacian)
+- [v0idMrK](https://github.com/v0idMrK)
+- [tehciolo](https://github.com/tehciolo)
+- [scampower3](https://github.com/scampower3)
+- [LittleBigOwI](https://github.com/LittleBigOwI/)
+- [Nate G](https://github.com/GGProGaming)
+- [Grady Hallenbeck](https://github.com/grhallenbeck)
+- [DinuD](https://github.com/DinuD)
+- [Kevin Tan (Valius)](https://github.com/valius)
+- [Rasmus Krämer](https://github.com/rasmuslos)
+- [ntarelix](https://github.com/ntarelix)
+- [btopherjohnson](https://github.com/btopherjohnson)
+- [András Maróy](https://github.com/andrasmaroy)
+- [Chris-Codes-It](https://github.com/Chris-Codes-It)
+- [Vedant](https://github.com/viktory36)
+- [GeorgeH005](https://github.com/GeorgeH005)
+- [JPUC1143](https://github.com/Jpuc1143)
+- [David Angel](https://github.com/davidangel)
+- [Pithaya](https://github.com/Pithaya)
+- [Chaitanya Shahare](https://github.com/Chaitanya-Shahare)
+- [Connor Smith](https://github.com/ConnorS1110)
+- [Venkat Karasani](https://github.com/venkat-karasani)
 
-# Emby Contributors
+## Emby Contributors
 
- - [LukePulverenti](https://github.com/LukePulverenti)
- - [ebr11](https://github.com/ebr11)
- - [lalmanzar](https://github.com/lalmanzar)
- - [schneifu](https://github.com/schneifu)
- - [Mark2xv](https://github.com/Mark2xv)
- - [ScottRapsey](https://github.com/ScottRapsey)
- - [skynet600](https://github.com/skynet600)
- - [Cheesegeezer](https://githum.com/Cheesegeezer)
- - [Radeon](https://github.com/radeonorama)
- - [gcw07](https://github.com/gcw07)
- - [SivaramAdhiappan](https://github.com/shivaram1190)
- - [CWatkinsNash](https://github.com/CWatkinsNash)
- - [sfnetwork](https://github.com/sfnetwork)
- - [Logos302](https://github.com/Logos302)
- - [TheWorkz](https://github.com/TheWorkz)
- - [mboehler](https://github.com/mboehler)
- - [KaHooli](https://github.com/KaHooli)
- - [xzener](https://github.com/xzener)
- - [CBers](https://github.com/CBers)
- - [Sagaia](https://github.com/Sagaia)
- - [JHawk111](https://github.com/JHawk111)
- - [David3663](https://github.com/david3663)
- - [Smyken](https://github.com/Smyken)
- - [doron1](https://github.com/doron1)
- - [brainfryd](https://github.com/brainfryd)
- - [DGMayor](http://github.com/DGMayor)
- - [Jon-theHTPC](https://github.com/Jon-theHTPC)
- - [aspdend](https://github.com/aspdend)
- - [RedshirtMB](https://github.com/RedshirtMB)
- - [thealienamongus](https://github.com/thealienamongus)
- - [brocass](https://github.com/brocass)
- - [pjrollo2000](https://github.com/pjrollo2000)
- - [abobader](https://github.com/abobader)
- - [milli260876](https://github.com/milli260876)
- - [vileboy](https://github.com/vileboy)
- - [starkadius](https://github.com/starkadius)
- - [wraslor](https://github.com/wraslor)
- - [mrwebsmith](https://github.com/mrwebsmith)
- - [rickster53](https://github.com/rickster53)
- - [Tharnax](https://github.com/Tharnax)
- - [0sm0](https://github.com/0sm0)
- - [swhitmore](https://github.com/swhitmore)
- - [DigiTM](https://github.com/DigiTM)
- - [crisliv / xliv](https://github.com/crisliv)
- - [Yogi](https://github.com/yogi12)
- - [madFloyd](https://github.com/madFloyd)
- - [yardameus](https://github.com/yardameus)
- - [rrb008](https://github.com/rrb008)
- - [Toonguy](https://github.com/Toonguy)
- - [Alwin Hummels](https://github.com/AlwinHummels)
- - [trooper11](https://github.com/trooper11)
- - [danlotfy](https://github.com/danlotfy)
- - [jordy1955](https://github.com/jordy1955)
- - [JoshFink](https://github.com/JoshFink)
- - [Detector1](https://github.com/Detector1)
- - [BlackIce013](https://github.com/blackice013)
- - [mporcas](https://github.com/mporcas)
- - [tikuf](https://github.com/tikuf/)
- - [Tim Hobbs](https://github.com/timhobbs)
- - [SvenVandenbrande](https://github.com/SvenVandenbrande)
- - [jomp16](https://github.com/jomp16)
- - [Leon de Klerk](https://github.com/leondeklerk)
- - [CrispyBaguette](https://github.com/CrispyBaguette)
+- [LukePulverenti](https://github.com/LukePulverenti)
+- [ebr11](https://github.com/ebr11)
+- [lalmanzar](https://github.com/lalmanzar)
+- [schneifu](https://github.com/schneifu)
+- [Mark2xv](https://github.com/Mark2xv)
+- [ScottRapsey](https://github.com/ScottRapsey)
+- [skynet600](https://github.com/skynet600)
+- [Cheesegeezer](https://githum.com/Cheesegeezer)
+- [Radeon](https://github.com/radeonorama)
+- [gcw07](https://github.com/gcw07)
+- [SivaramAdhiappan](https://github.com/shivaram1190)
+- [CWatkinsNash](https://github.com/CWatkinsNash)
+- [sfnetwork](https://github.com/sfnetwork)
+- [Logos302](https://github.com/Logos302)
+- [TheWorkz](https://github.com/TheWorkz)
+- [mboehler](https://github.com/mboehler)
+- [KaHooli](https://github.com/KaHooli)
+- [xzener](https://github.com/xzener)
+- [CBers](https://github.com/CBers)
+- [Sagaia](https://github.com/Sagaia)
+- [JHawk111](https://github.com/JHawk111)
+- [David3663](https://github.com/david3663)
+- [Smyken](https://github.com/Smyken)
+- [doron1](https://github.com/doron1)
+- [brainfryd](https://github.com/brainfryd)
+- [DGMayor](http://github.com/DGMayor)
+- [Jon-theHTPC](https://github.com/Jon-theHTPC)
+- [aspdend](https://github.com/aspdend)
+- [RedshirtMB](https://github.com/RedshirtMB)
+- [thealienamongus](https://github.com/thealienamongus)
+- [brocass](https://github.com/brocass)
+- [pjrollo2000](https://github.com/pjrollo2000)
+- [abobader](https://github.com/abobader)
+- [milli260876](https://github.com/milli260876)
+- [vileboy](https://github.com/vileboy)
+- [starkadius](https://github.com/starkadius)
+- [wraslor](https://github.com/wraslor)
+- [mrwebsmith](https://github.com/mrwebsmith)
+- [rickster53](https://github.com/rickster53)
+- [Tharnax](https://github.com/Tharnax)
+- [0sm0](https://github.com/0sm0)
+- [swhitmore](https://github.com/swhitmore)
+- [DigiTM](https://github.com/DigiTM)
+- [crisliv / xliv](https://github.com/crisliv)
+- [Yogi](https://github.com/yogi12)
+- [madFloyd](https://github.com/madFloyd)
+- [yardameus](https://github.com/yardameus)
+- [rrb008](https://github.com/rrb008)
+- [Toonguy](https://github.com/Toonguy)
+- [Alwin Hummels](https://github.com/AlwinHummels)
+- [trooper11](https://github.com/trooper11)
+- [danlotfy](https://github.com/danlotfy)
+- [jordy1955](https://github.com/jordy1955)
+- [JoshFink](https://github.com/JoshFink)
+- [Detector1](https://github.com/Detector1)
+- [BlackIce013](https://github.com/blackice013)
+- [mporcas](https://github.com/mporcas)
+- [tikuf](https://github.com/tikuf/)
+- [Tim Hobbs](https://github.com/timhobbs)
+- [SvenVandenbrande](https://github.com/SvenVandenbrande)
+<!--
+    NOTE: This is the end of the list of past Emby Contributors.
+    New Jellyfin contributors should add their name to the end
+    of the list of Jellyfin Contributors above. NOT HERE ;)
+-->

README.md

@@ -70,3 +70,31 @@ Jellyfin Web is the frontend used for most of the clients available for end user
    ```sh
    npm run build:development
    ```
+
+## Directory Structure
+
+```
+.
+└── src
+    ├── apps
+    │   ├── dashboard     # Admin dashboard app layout and routes
+    │   ├── experimental  # New experimental app layout and routes
+    │   └── stable        # Classic (stable) app layout and routes
+    ├── assets            # Static assets
+    ├── components        # Higher order visual components and React components
+    ├── controllers       # Legacy page views and controllers 🧹
+    ├── elements          # Basic webcomponents and React wrappers 🧹
+    ├── hooks             # Custom React hooks
+    ├── legacy            # Polyfills for legacy browsers
+    ├── libraries         # Third party libraries 🧹
+    ├── plugins           # Client plugins
+    ├── scripts           # Random assortment of visual components and utilities 🐉
+    ├── strings           # Translation files
+    ├── styles            # Common app Sass stylesheets
+    ├── themes            # CSS themes
+    ├── types             # Common TypeScript interfaces/types
+    └── utils             # Utility functions
+```
+
+- 🧹 — Needs cleanup
+- 🐉 — Serious mess (Here be dragons)

babel.config.js

@@ -12,14 +12,7 @@ module.exports = {
                 corejs: 3
             }
         ],
-        '@babel/preset-react',
-        [
-            '@babel/preset-typescript',
-            {
-                isTSX: true,
-                allExtensions: true
-            }
-        ]
+        '@babel/preset-react'
     ],
     plugins: [
         '@babel/plugin-proposal-class-properties',

build.sh

@@ -1,110 +0,0 @@
-#!/usr/bin/env bash
-
-# build.sh - Build Jellyfin binary packages
-# Part of the Jellyfin Project
-
-set -o errexit
-set -o pipefail
-
-usage() {
-    echo -e "build.sh - Build Jellyfin binary packages"
-    echo -e "Usage:"
-    echo -e "  $0 -t/--type <BUILD_TYPE> -p/--platform <PLATFORM> [-k/--keep-artifacts] [-l/--list-platforms]"
-    echo -e "Notes:"
-    echo -e "  * BUILD_TYPE can be one of: [native, docker] and must be specified"
-    echo -e "    * native: Build using the build script in the host OS"
-    echo -e "    * docker: Build using the build script in a standardized Docker container"
-    echo -e "  * PLATFORM can be any platform shown by -l/--list-platforms and must be specified"
-    echo -e "  * If -k/--keep-artifacts is specified, transient artifacts (e.g. Docker containers) will be"
-    echo -e "    retained after the build is finished; the source directory will still be cleaned"
-    echo -e "  * If -l/--list-platforms is specified, all other arguments are ignored; the script will print"
-    echo -e "    the list of supported platforms and exit"
-}
-
-list_platforms() {
-    declare -a platforms
-    platforms=(
-        $( find deployment -maxdepth 1 -mindepth 1 -name "build.*" | awk -F'.' '{ $1=""; printf $2; if ($3 != ""){ printf "." $3; }; if ($4 != ""){ printf "." $4; };  print ""; }' | sort )
-    )
-    echo -e "Valid platforms:"
-    echo
-    for platform in ${platforms[@]}; do
-        echo -e "* ${platform} : $( grep '^#=' deployment/build.${platform} | sed 's/^#= //' )"
-    done
-}
-
-do_build_native() {
-    export IS_DOCKER=NO
-    deployment/build.${PLATFORM}
-}
-
-do_build_docker() {
-    if ! [ $(uname -m) = "x86_64" ]; then
-        echo "Docker-based builds only support amd64-based cross-building; use a 'native' build instead."
-        exit 1
-    fi
-    if [[ ! -f deployment/Dockerfile.${PLATFORM} ]]; then
-        echo "Missing Dockerfile for platform ${PLATFORM}"
-        exit 1
-    fi
-    if [[ ${KEEP_ARTIFACTS} == YES ]]; then
-        docker_args=""
-    else
-        docker_args="--rm"
-    fi
-
-    docker build . -t "jellyfin-builder.${PLATFORM}" -f deployment/Dockerfile.${PLATFORM}
-    mkdir -p ${ARTIFACT_DIR}
-    docker run $docker_args -v "${SOURCE_DIR}:/jellyfin" -v "${ARTIFACT_DIR}:/dist" "jellyfin-builder.${PLATFORM}"
-}
-
-while [[ $# -gt 0 ]]; do
-    key="$1"
-    case $key in
-        -t|--type)
-        BUILD_TYPE="$2"
-        shift
-        shift
-        ;;
-        -p|--platform)
-        PLATFORM="$2"
-        shift
-        shift
-        ;;
-        -k|--keep-artifacts)
-        KEEP_ARTIFACTS=YES
-        shift
-        ;;
-        -l|--list-platforms)
-        list_platforms
-        exit 0
-        ;;
-        -h|--help)
-        usage
-        exit 0
-        ;;
-        *)
-        echo "Unknown option $1"
-        usage
-        exit 1
-        ;;
-    esac
-done
-
-if [[ -z ${BUILD_TYPE} || -z ${PLATFORM} ]]; then
-    usage
-    exit 1
-fi
-
-export SOURCE_DIR="$( pwd )"
-export ARTIFACT_DIR="${SOURCE_DIR}/../bin/${PLATFORM}"
-
-# Determine build type
-case ${BUILD_TYPE} in
-    native)
-        do_build_native
-    ;;
-    docker)
-        do_build_docker
-    ;;
-esac

build.yaml

@@ -1,9 +0,0 @@
----
-# We just wrap `build` so this is really it
-name: "jellyfin-web"
-version: "10.8.13"
-packages:
-  - debian.all
-  - fedora.all
-  - centos.all
-  - portable

bump_version

@@ -7,7 +7,7 @@ set -o pipefail
 set -o xtrace
 
 usage() {
-    echo -e "bump_version - increase the shared version and generate changelogs"
+    echo -e "bump_version - increase the shared version"
     echo -e ""
     echo -e "Usage:"
     echo -e " $ bump_version <new_version>"
@@ -18,75 +18,12 @@ if [[ -z $1 ]]; then
     exit 1
 fi
 
-build_file="./build.yaml"
-package_file="./package*.json"
-
 new_version="$1"
-
-old_version="$(
-    grep "version:" ${build_file} \
-        | sed -E 's/version: "([0-9\.]+[-a-z0-9]*)"/\1/'
-)"
-echo "Old version: ${old_version}"
+new_version_sed="$( cut -f1 -d'-' <<<"${new_version}" )"
 
 # Bump the NPM version
-new_version_sed="$( cut -f1 -d'-' <<<"${new_version}" )"
 npm --no-git-tag-version --allow-same-version version v${new_version_sed}
 
-# Set the build.yaml version to the specified new_version
-old_version_sed="$( sed 's/\./\\./g' <<<"${old_version}" )" # Escape the '.' chars
-sed -i "s/${old_version_sed}/${new_version_sed}/g" ${build_file}
-
-
-if [[ ${new_version} == *"-"* ]]; then
-    new_version_pkg="$( sed 's/-/~/g' <<<"${new_version}" )"
-    new_version_deb_sup=""
-else
-    new_version_pkg="${new_version}"
-    new_version_deb_sup="-1"
-fi
-
-# Write out a temporary Debian changelog with our new stuff appended and some templated formatting
-debian_changelog_file="debian/changelog"
-debian_changelog_temp="$( mktemp )"
-# Create new temp file with our changelog
-echo -e "jellyfin-web (${new_version_pkg}${new_version_deb_sup}) unstable; urgency=medium
-
-  * New upstream version ${new_version}; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v${new_version}
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  $( date --rfc-2822 )
-" >> ${debian_changelog_temp}
-cat ${debian_changelog_file} >> ${debian_changelog_temp}
-# Move into place
-mv ${debian_changelog_temp} ${debian_changelog_file}
-
-# Write out a temporary Yum changelog with our new stuff prepended and some templated formatting
-fedora_spec_file="fedora/jellyfin-web.spec"
-fedora_changelog_temp="$( mktemp )"
-fedora_spec_temp_dir="$( mktemp -d )"
-fedora_spec_temp="${fedora_spec_temp_dir}/jellyfin-web.spec.tmp"
-# Make a copy of our spec file for hacking
-cp ${fedora_spec_file} ${fedora_spec_temp_dir}/
-pushd ${fedora_spec_temp_dir}
-# Split out the stuff before and after changelog
-csplit jellyfin-web.spec  "/^%changelog/" # produces xx00 xx01
-# Update the version in xx00
-sed -i "s/${old_version_sed}/${new_version_pkg}/g" xx00
-# Remove the header from xx01
-sed -i '/^%changelog/d' xx01
-# Create new temp file with our changelog
-echo -e "%changelog
-* $( LANG=C date '+%a %b %d %Y' ) Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version ${new_version}; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v${new_version}" >> ${fedora_changelog_temp}
-cat xx01 >> ${fedora_changelog_temp}
-# Reassembble
-cat xx00 ${fedora_changelog_temp} > ${fedora_spec_temp}
-popd
-# Move into place
-mv ${fedora_spec_temp} ${fedora_spec_file}
-# Clean up
-rm -rf ${fedora_spec_temp_dir}
-
 # Stage the changed files for commit
 git add .
 git status -v

cssnano.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    preset: [
+        'default',
+        // Turn off `mergeLonghand` because it combines `padding-*` and `margin-*`,
+        // breaking fallback styles.
+        // https://github.com/cssnano/cssnano/issues/1163
+        // https://github.com/cssnano/cssnano/issues/1192
+        { mergeLonghand: false }
+    ]
+};

debian/changelog

@@ -1,95 +0,0 @@
-jellyfin-web (10.8.13-1) unstable; urgency=medium
-
-  * New upstream version 10.8.13; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.13
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Tue, 28 Nov 2023 22:21:29 -0500
-
-jellyfin-web (10.8.12-1) unstable; urgency=medium
-
-  * New upstream version 10.8.12; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.12
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Sat, 04 Nov 2023 14:42:41 -0400
-
-jellyfin-web (10.8.11-1) unstable; urgency=medium
-
-  * New upstream version 10.8.11; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.11
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Sat, 23 Sep 2023 21:41:40 -0400
-
-jellyfin-web (10.8.10-1) unstable; urgency=medium
-
-  * New upstream version 10.8.10; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.10
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Sun, 23 Apr 2023 11:01:33 -0400
-
-jellyfin-web (10.8.9-1) unstable; urgency=medium
-
-  * New upstream version 10.8.9; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.9
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Sun, 22 Jan 2023 14:09:13 -0500
-
-jellyfin-web (10.8.8-1) unstable; urgency=medium
-
-  * New upstream version 10.8.8; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.8
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Tue, 29 Nov 2022 13:42:54 -0500
-
-jellyfin-web (10.8.7-1) unstable; urgency=medium
-
-  * New upstream version 10.8.7; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.7
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Mon, 31 Oct 2022 23:06:34 -0400
-
-jellyfin-web (10.8.6-1) unstable; urgency=medium
-
-  * New upstream version 10.8.6; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.6
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Fri, 28 Oct 2022 22:44:15 -0400
-
-jellyfin-web (10.8.5-1) unstable; urgency=medium
-
-  * New upstream version 10.8.5; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.5
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Sat, 24 Sep 2022 22:02:26 -0400
-
-jellyfin-web (10.8.4-1) unstable; urgency=medium
-
-  * New upstream version 10.8.4; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.4
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Sat, 13 Aug 2022 21:52:04 -0400
-
-jellyfin-web (10.8.3-1) unstable; urgency=medium
-
-  * New upstream version 10.8.3; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.3
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Mon, 01 Aug 2022 20:22:00 -0400
-
-jellyfin-web (10.8.2-1) unstable; urgency=medium
-
-  * New upstream version 10.8.2; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.2
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Mon, 01 Aug 2022 14:27:56 -0400
-
-jellyfin-web (10.8.1-1) unstable; urgency=medium
-
-  * New upstream version 10.8.1; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.1
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Sun, 26 Jun 2022 20:59:39 -0400
-
-jellyfin-web (10.8.0-1) unstable; urgency=medium
-
-  * New upstream version 10.8.0; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.0
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Fri, 10 Jun 2022 22:16:40 -0400
-
-jellyfin-web (10.7.0-1) unstable; urgency=medium
-
-  * New upstream version 10.7.0; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.7.0
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Mon, 27 Jul 2020 19:13:31 -0400
-
-jellyfin-web (10.6.0-1) unstable; urgency=medium
-
-  * New upstream version 10.6.0; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.6.0
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  Mon, 16 Mar 2020 11:15:00 -0400

debian/compat

@@ -1 +0,0 @@
-8

debian/conffiles

@@ -1 +0,0 @@
-/usr/share/jellyfin/web/config.json

debian/control

@@ -1,16 +0,0 @@
-Source: jellyfin-web
-Section: misc
-Priority: optional
-Maintainer: Jellyfin Team <team@jellyfin.org>
-Build-Depends:  debhelper (>= 9),
-                npm | nodejs
-Standards-Version: 3.9.4
-Homepage: https://jellyfin.org/
-Vcs-Git: https://github.org/jellyfin/jellyfin-web.git
-Vcs-Browser: https://github.org/jellyfin/jellyfin-web
-
-Package: jellyfin-web
-Recommends: jellyfin-server
-Architecture: all
-Description: Jellyfin is the Free Software Media System.
- This package provides the Jellyfin web client.

debian/copyright

@@ -1,28 +0,0 @@
-Format: http://dep.debian.net/deps/dep5
-Upstream-Name: jellyfin-web
-Source: https://github.com/jellyfin/jellyfin-web
-
-Files: *
-Copyright: 2018-2020 Jellyfin Team
-License: GPL-3.0
-
-Files: debian/*
-Copyright: 2020 Joshua Boniface <joshua@boniface.me>
-License: GPL-3.0
-
-License: GPL-3.0
- This package is free software; you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation; either version 2 of the License, or
- (at your option) any later version.
- .
- This package is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- GNU General Public License for more details.
- .
- You should have received a copy of the GNU General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>
- .
- On Debian systems, the complete text of the GNU General
- Public License version 2 can be found in "/usr/share/common-licenses/GPL-2".

debian/gbp.conf

@@ -1,6 +0,0 @@
-[DEFAULT]
-pristine-tar = False
-cleaner = fakeroot debian/rules clean
-
-[import-orig]
-filter = [ ".git*", ".hg*", ".vs*", ".vscode*" ]

debian/install

@@ -1 +0,0 @@
-web usr/share/jellyfin/

debian/po/POTFILES.in

@@ -1 +0,0 @@
-[type: gettext/rfc822deb] templates

debian/po/templates.pot

@@ -1,57 +0,0 @@
-# SOME DESCRIPTIVE TITLE.
-# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
-# This file is distributed under the same license as the PACKAGE package.
-# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
-#
-#, fuzzy
-msgid ""
-msgstr ""
-"Project-Id-Version: jellyfin-server\n"
-"Report-Msgid-Bugs-To: jellyfin-server@packages.debian.org\n"
-"POT-Creation-Date: 2015-06-12 20:51-0600\n"
-"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
-"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
-"Language-Team: LANGUAGE <LL@li.org>\n"
-"Language: \n"
-"MIME-Version: 1.0\n"
-"Content-Type: text/plain; charset=CHARSET\n"
-"Content-Transfer-Encoding: 8bit\n"
-
-#. Type: note
-#. Description
-#: ../templates:1001
-msgid "Jellyfin permission info:"
-msgstr ""
-
-#. Type: note
-#. Description
-#: ../templates:1001
-msgid ""
-"Jellyfin by default runs under a user named \"jellyfin\".  Please ensure that the "
-"user jellyfin has read and write access to any folders you wish to add to your "
-"library. Otherwise please run jellyfin under a different user."
-msgstr ""
-
-#. Type: string
-#. Description
-#: ../templates:2001
-msgid "Username to run Jellyfin as:"
-msgstr ""
-
-#. Type: string
-#. Description
-#: ../templates:2001
-msgid "The user that jellyfin will run as."
-msgstr ""
-
-#. Type: note
-#. Description
-#: ../templates:3001
-msgid "Jellyfin still running"
-msgstr ""
-
-#. Type: note
-#. Description
-#: ../templates:3001
-msgid "Jellyfin is currently running. Please close it and try again."
-msgstr ""

debian/rules

@@ -1,20 +0,0 @@
-#! /usr/bin/make -f
-export DH_VERBOSE=1
-
-%:
-	dh $@
-
-# disable "make check"
-override_dh_auto_test:
-
-# disable stripping debugging symbols
-override_dh_clistrip:
-
-override_dh_auto_build:
-	npm ci --no-audit --unsafe-perm
-	mv $(CURDIR)/dist $(CURDIR)/web
-
-override_dh_auto_clean:
-	test -d $(CURDIR)/dist && rm -rf '$(CURDIR)/dist' || true
-	test -d $(CURDIR)/web && rm -rf '$(CURDIR)/web' || true
-	test -d $(CURDIR)/node_modules && rm -rf '$(CURDIR)/node_modules' || true

debian/source/format

@@ -1 +0,0 @@
-1.0

debian/source/options

@@ -1,7 +0,0 @@
-tar-ignore='.git*'
-tar-ignore='**/.git'
-tar-ignore='**/.hg'
-tar-ignore='**/.vs'
-tar-ignore='**/.vscode'
-tar-ignore='deployment'
-tar-ignore='*.deb'

deployment/Dockerfile.centos

@@ -1,26 +0,0 @@
-FROM centos:7
-
-# Docker build arguments
-ARG SOURCE_DIR=/jellyfin
-ARG ARTIFACT_DIR=/dist
-
-# Docker run environment
-ENV SOURCE_DIR=/jellyfin
-ENV ARTIFACT_DIR=/dist
-ENV IS_DOCKER=YES
-
-# Prepare CentOS environment
-RUN yum update -y \
-  && yum install -y epel-release \
-  && yum install -y @buildsys-build rpmdevtools git yum-plugins-core autoconf automake glibc-devel gcc-c++ make \
-  && curl -fsSL https://rpm.nodesource.com/setup_12.x | bash - \
-  && yum install -y nodejs
-
-# Link to build script
-RUN ln -sf ${SOURCE_DIR}/deployment/build.centos /build.sh
-
-VOLUME ${SOURCE_DIR}
-
-VOLUME ${ARTIFACT_DIR}
-
-ENTRYPOINT ["/build.sh"]

deployment/Dockerfile.debian

@@ -1,27 +0,0 @@
-FROM debian:10
-
-# Docker build arguments
-ARG SOURCE_DIR=/jellyfin
-ARG ARTIFACT_DIR=/dist
-
-# Docker run environment
-ENV SOURCE_DIR=/jellyfin
-ENV ARTIFACT_DIR=/dist
-ENV DEB_BUILD_OPTIONS=noddebs
-ENV IS_DOCKER=YES
-
-# Prepare Debian build environment
-RUN apt-get update \
-  && apt-get install -y debhelper mmv git curl \
-  && curl -fsSL https://deb.nodesource.com/setup_12.x | bash - \
-  && apt-get install -y nodejs
-
-
-# Link to build script
-RUN ln -sf ${SOURCE_DIR}/deployment/build.debian /build.sh
-
-VOLUME ${SOURCE_DIR}
-
-VOLUME ${ARTIFACT_DIR}
-
-ENTRYPOINT ["/build.sh"]

deployment/Dockerfile.docker

@@ -1,11 +0,0 @@
-FROM node:lts-alpine
-
-ARG SOURCE_DIR=/src
-ARG ARTIFACT_DIR=/jellyfin-web
-
-RUN apk add autoconf g++ make libpng-dev gifsicle alpine-sdk automake libtool make gcc musl-dev nasm python3
-
-WORKDIR ${SOURCE_DIR}
-COPY . .
-
-RUN npm ci --no-audit --unsafe-perm && mv dist ${ARTIFACT_DIR}

deployment/Dockerfile.fedora

@@ -1,23 +0,0 @@
-FROM fedora:36
-
-# Docker build arguments
-ARG SOURCE_DIR=/jellyfin
-ARG ARTIFACT_DIR=/dist
-
-# Docker run environment
-ENV SOURCE_DIR=/jellyfin
-ENV ARTIFACT_DIR=/dist
-ENV IS_DOCKER=YES
-
-# Prepare Fedora environment
-RUN dnf update -y \
-  && dnf install -y @buildsys-build rpmdevtools git dnf-plugins-core nodejs autoconf automake glibc-devel make
-
-# Link to build script
-RUN ln -sf ${SOURCE_DIR}/deployment/build.fedora /build.sh
-
-VOLUME ${SOURCE_DIR}
-
-VOLUME ${ARTIFACT_DIR}
-
-ENTRYPOINT ["/build.sh"]

deployment/Dockerfile.portable

@@ -1,25 +0,0 @@
-FROM debian:10
-
-# Docker build arguments
-ARG SOURCE_DIR=/jellyfin
-ARG ARTIFACT_DIR=/dist
-
-# Docker run environment
-ENV SOURCE_DIR=/jellyfin
-ENV ARTIFACT_DIR=/dist
-ENV IS_DOCKER=YES
-
-# Prepare Debian build environment
-RUN apt-get update \
-  && apt-get install -y mmv curl git \
-  && curl -fsSL https://deb.nodesource.com/setup_12.x | bash - \
-  && apt-get install -y nodejs
-
-# Link to build script
-RUN ln -sf ${SOURCE_DIR}/deployment/build.portable /build.sh
-
-VOLUME ${SOURCE_DIR}
-
-VOLUME ${ARTIFACT_DIR}
-
-ENTRYPOINT ["/build.sh"]

deployment/build.centos

@@ -1,41 +0,0 @@
-#!/bin/bash
-
-set -o errexit
-set -o xtrace
-
-# move to source directory
-pushd ${SOURCE_DIR}
-
-cp -a package-lock.json /tmp/package-lock.json
-
-# modify changelog to unstable configuration if IS_UNSTABLE
-if [[ ${IS_UNSTABLE} == 'yes' ]]; then
-    pushd fedora
-
-    PR_ID=$( git log --grep 'Merge pull request' --oneline --single-worktree --first-parent | head -1 | grep --color=none -Eo '#[0-9]+' | tr -d '#' )
-
-    sed -i "s/Version:.*/Version:        ${BUILD_ID}/" jellyfin-web.spec
-    sed -i "/%changelog/q" jellyfin-web.spec
-
-    cat <<EOF >>jellyfin-web.spec
-* $( LANG=C date '+%a %b %d %Y' ) Jellyfin Packaging Team <packaging@jellyfin.org>
-- Jellyfin Web unstable build ${BUILD_ID} for merged PR #${PR_ID}
-EOF
-    popd
-fi
-
-# build rpm
-make -f fedora/Makefile srpm outdir=/root/rpmbuild/SRPMS
-rpmbuild --rebuild -bb /root/rpmbuild/SRPMS/jellyfin-*.src.rpm
-
-# move the artifacts
-mv /root/rpmbuild/RPMS/noarch/jellyfin-*.rpm /root/rpmbuild/SRPMS/jellyfin-*.src.rpm ${ARTIFACT_DIR}/
-
-if [[ ${IS_DOCKER} == YES ]]; then
-    chown -Rc $(stat -c %u:%g ${ARTIFACT_DIR}) ${ARTIFACT_DIR}
-fi
-
-rm -f fedora/jellyfin*.tar.gz
-cp -a /tmp/package-lock.json package-lock.json
-
-popd

deployment/build.debian

@@ -1,39 +0,0 @@
-#!/bin/bash
-
-set -o errexit
-set -o xtrace
-
-# move to source directory
-pushd ${SOURCE_DIR}
-
-cp -a package-lock.json /tmp/package-lock.json
-
-# modify changelog to unstable configuration if IS_UNSTABLE
-if [[ ${IS_UNSTABLE} == 'yes' ]]; then
-    pushd debian
-
-    PR_ID=$( git log --grep 'Merge pull request' --oneline --single-worktree --first-parent | head -1 | grep --color=none -Eo '#[0-9]+' | tr -d '#' )
-
-    cat <<EOF >changelog
-jellyfin-web (${BUILD_ID}-unstable) unstable; urgency=medium
-
-  * Jellyfin Web unstable build ${BUILD_ID} for merged PR #${PR_ID}
-
- -- Jellyfin Packaging Team <packaging@jellyfin.org>  $( date --rfc-2822 )
-EOF
-    popd
-fi
-
-# build deb
-dpkg-buildpackage -us -uc --pre-clean --post-clean
-
-mkdir -p ${ARTIFACT_DIR}
-mv ../jellyfin*.{deb,dsc,tar.gz,buildinfo,changes} ${ARTIFACT_DIR}
-
-cp -a /tmp/package-lock.json package-lock.json
-
-if [[ ${IS_DOCKER} == YES ]]; then
-    chown -Rc $(stat -c %u:%g ${ARTIFACT_DIR}) ${ARTIFACT_DIR}
-fi
-
-popd

deployment/build.fedora

@@ -1,41 +0,0 @@
-#!/bin/bash
-
-set -o errexit
-set -o xtrace
-
-# move to source directory
-pushd ${SOURCE_DIR}
-
-cp -a package-lock.json /tmp/package-lock.json
-
-# modify changelog to unstable configuration if IS_UNSTABLE
-if [[ ${IS_UNSTABLE} == 'yes' ]]; then
-    pushd fedora
-
-    PR_ID=$( git log --grep 'Merge pull request' --oneline --single-worktree --first-parent | head -1 | grep --color=none -Eo '#[0-9]+' | tr -d '#' )
-
-    sed -i "s/Version:.*/Version:        ${BUILD_ID}/" jellyfin-web.spec
-    sed -i "/%changelog/q" jellyfin-web.spec
-
-    cat <<EOF >>jellyfin-web.spec
-* $( LANG=C date '+%a %b %d %Y' ) Jellyfin Packaging Team <packaging@jellyfin.org>
-- Jellyfin Web unstable build ${BUILD_ID} for merged PR #${PR_ID}
-EOF
-    popd
-fi
-
-# build rpm
-make -f fedora/Makefile srpm outdir=/root/rpmbuild/SRPMS
-rpmbuild -rb /root/rpmbuild/SRPMS/jellyfin-*.src.rpm
-
-# move the artifacts
-mv /root/rpmbuild/RPMS/noarch/jellyfin-*.rpm /root/rpmbuild/SRPMS/jellyfin-*.src.rpm ${ARTIFACT_DIR}
-
-if [[ ${IS_DOCKER} == YES ]]; then
-    chown -Rc $(stat -c %u:%g ${ARTIFACT_DIR}) ${ARTIFACT_DIR}
-fi
-
-rm -f fedora/jellyfin*.tar.gz
-cp -a /tmp/package-lock.json package-lock.json
-
-popd

deployment/build.portable

@@ -1,30 +0,0 @@
-#!/bin/bash
-
-set -o errexit
-set -o xtrace
-
-# move to source directory
-pushd ${SOURCE_DIR}
-
-# get version
-if [[ ${IS_UNSTABLE} == 'yes' ]]; then
-    version="${BUILD_ID}"
-else
-    version="$( grep "version:" ./build.yaml | sed -E 's/version: "([0-9\.]+.*)"/\1/' )"
-fi
-
-# build archives
-npm ci --no-audit --unsafe-perm
-mv dist jellyfin-web_${version}
-tar -czf jellyfin-web_${version}_portable.tar.gz jellyfin-web_${version}
-rm -rf dist
-
-# move the artifacts
-mkdir -p ${ARTIFACT_DIR}
-mv jellyfin[-_]*.tar.gz ${ARTIFACT_DIR}
-
-if [[ ${IS_DOCKER} == YES ]]; then
-    chown -Rc $(stat -c %u:%g ${ARTIFACT_DIR}) ${ARTIFACT_DIR}
-fi
-
-popd

fedora/Makefile

@@ -1,48 +0,0 @@
-DIR     := $(dir $(lastword $(MAKEFILE_LIST)))
-# install git and npm
-$(info $(shell set -x; if [ "$$(id -u)" = "0" ]; then echo "Installing git"; dnf -y install git npm; fi))
-NAME    := jellyfin-web
-VERSION := $(shell set -x; sed -ne '/^Version:/s/.*  *//p' $(DIR)/$(NAME).spec)
-RELEASE := $(shell set -x; sed -ne '/^Release:/s/.*  *\(.*\)%{.*}.*/\1/p' $(DIR)/$(NAME).spec)
-SRPM    := jellyfin-web-$(subst -,~,$(VERSION))-$(RELEASE)$(shell rpm --eval %dist).src.rpm
-TARBALL :=$(NAME)-$(subst -,~,$(VERSION)).tar.gz
-
-epel-7-x86_64_repos := https://rpm.nodesource.com/pub_16.x/el/\$$releasever/\$$basearch/
-
-fed_ver := $(shell rpm -E %fedora)
-# fallback when not running on Fedora
-fed_ver ?= 36
-TARGET  ?= fedora-$(fed_ver)-x86_64
-
-outdir  ?= $(PWD)/$(DIR)/
-
-srpm: $(DIR)/$(SRPM)
-tarball: $(DIR)/$(TARBALL)
-
-$(DIR)/$(TARBALL):
-	cd $(DIR)/;                                          \
-	SOURCE_DIR=..                                        \
-	WORKDIR="$${PWD}";                                   \
-	version=$(VERSION);                                  \
-	tar                                                  \
-	--transform "s,^\.,$(NAME)-$(subst -,~,$(VERSION))," \
-	--exclude='.git*'                                    \
-	--exclude='**/.git'                                  \
-	--exclude='**/.hg'                                   \
-	--exclude=deployment                                 \
-	--exclude='*.deb'                                    \
-	--exclude='*.rpm'                                    \
-	--exclude=$(notdir $@)                               \
-	-czf $(notdir $@)                                    \
-	-C $${SOURCE_DIR} ./
-
-$(DIR)/$(SRPM): $(DIR)/$(TARBALL) $(DIR)/jellyfin-web.spec
-	cd $(DIR)/;                              \
-	rpmbuild -bs $(NAME).spec                \
-	         --define "_sourcedir $$PWD/"    \
-	         --define "_srcrpmdir $(outdir)"
-
-rpms: $(DIR)/$(SRPM)
-	mock $(addprefix --addrepo=, $($(TARGET)_repos)) \
-	     --enable-network                            \
-	     -r $(TARGET) $<

fedora/jellyfin-web.spec

@@ -1,76 +0,0 @@
-%global         debug_package %{nil}
-
-Name:           jellyfin-web
-Version:        10.8.13
-Release:        1%{?dist}
-Summary:        The Free Software Media System web client
-License:        GPLv2
-URL:            https://jellyfin.org
-# Jellyfin Server tarball created by `make -f .copr/Makefile srpm`, real URL ends with `v%%{version}.tar.gz`
-Source0:        jellyfin-web-%{version}.tar.gz
-
-BuildArch:		noarch
-%if 0%{?rhel} > 0 && 0%{?rhel} < 8
-BuildRequires:	nodejs
-%else
-BuildRequires:	git
-BuildRequires:	npm
-%endif
-
-%description
-Jellyfin is a free software media system that puts you in control of managing and streaming your media.
-
-
-%prep
-%autosetup -n jellyfin-web-%{version} -b 0
-
-%if 0%{?rhel} > 0 && 0%{?rhel} < 8
-# Required for CentOS build
-chown root:root -R .
-%endif
-
-
-%build
-npm ci --no-audit --unsafe-perm
-
-
-%install
-%{__mkdir} -p %{buildroot}%{_libdir}/jellyfin/jellyfin-web
-%{__cp} -r dist/* %{buildroot}%{_libdir}/jellyfin/jellyfin-web
-
-
-%files
-%defattr(644,root,root,755)
-%{_libdir}/jellyfin/jellyfin-web
-%license LICENSE
-
-
-%changelog
-* Tue Nov 28 2023 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.13; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.13
-* Sat Nov 04 2023 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.12; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.12
-* Sat Sep 23 2023 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.11; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.11
-* Sun Apr 23 2023 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.10; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.10
-* Sun Jan 22 2023 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.9; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.9
-* Tue Nov 29 2022 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.8; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.8
-* Mon Oct 31 2022 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.7; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.7
-* Fri Oct 28 2022 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.6; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.6
-* Sat Sep 24 2022 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.5; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.5
-* Sat Aug 13 2022 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.4; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.4
-* Mon Aug 01 2022 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.3; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.3
-* Mon Aug 01 2022 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.2; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.2
-* Sun Jun 26 2022 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.1; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.1
-* Fri Jun 10 2022 Jellyfin Packaging Team <packaging@jellyfin.org>
-- New upstream version 10.8.0; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.8.0

package.json

@@ -1,109 +1,129 @@
 {
   "name": "jellyfin-web",
-  "version": "10.8.13",
+  "version": "10.9.11",
   "description": "Web interface for Jellyfin",
   "repository": "https://github.com/jellyfin/jellyfin-web",
   "license": "GPL-2.0-or-later",
   "devDependencies": {
-    "@babel/core": "7.17.7",
-    "@babel/eslint-parser": "7.17.0",
-    "@babel/eslint-plugin": "7.17.7",
-    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/plugin-proposal-private-methods": "7.16.11",
-    "@babel/plugin-transform-modules-umd": "7.16.7",
-    "@babel/preset-env": "7.16.11",
-    "@babel/preset-react": "7.16.7",
-    "@babel/preset-typescript": "7.16.7",
-    "@thornbill/jellyfin-sdk": "0.4.1",
-    "@types/escape-html": "1.0.1",
-    "@types/lodash-es": "4.17.6",
-    "@types/react": "17.0.40",
-    "@types/react-dom": "17.0.13",
-    "@typescript-eslint/eslint-plugin": "5.15.0",
-    "@typescript-eslint/parser": "5.15.0",
+    "@babel/core": "7.24.3",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-private-methods": "7.18.6",
+    "@babel/plugin-transform-modules-umd": "7.24.1",
+    "@babel/preset-env": "7.24.3",
+    "@babel/preset-react": "7.24.1",
+    "@types/escape-html": "1.0.4",
+    "@types/loadable__component": "5.13.9",
+    "@types/lodash-es": "4.17.12",
+    "@types/markdown-it": "13.0.7",
+    "@types/react": "17.0.79",
+    "@types/react-dom": "17.0.25",
+    "@types/sortablejs": "1.15.8",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
     "@uupaa/dynamic-import-polyfill": "1.0.2",
-    "autoprefixer": "10.4.4",
-    "babel-loader": "8.2.3",
+    "autoprefixer": "10.4.19",
+    "babel-loader": "9.1.3",
     "babel-plugin-dynamic-import-polyfill": "1.0.0",
     "clean-webpack-plugin": "4.0.0",
     "confusing-browser-globals": "1.0.11",
-    "copy-webpack-plugin": "10.2.4",
-    "css-loader": "6.7.1",
-    "cssnano": "5.1.4",
-    "eslint": "8.11.0",
-    "eslint-plugin-compat": "4.0.2",
+    "copy-webpack-plugin": "12.0.2",
+    "cross-env": "7.0.3",
+    "css-loader": "6.10.0",
+    "cssnano": "6.1.2",
+    "es-check": "7.1.1",
+    "eslint": "8.57.0",
+    "eslint-plugin-compat": "4.2.0",
     "eslint-plugin-eslint-comments": "3.2.0",
-    "eslint-plugin-import": "2.25.4",
-    "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-promise": "6.0.0",
-    "eslint-plugin-react": "7.29.4",
-    "eslint-plugin-react-hooks": "4.3.0",
-    "expose-loader": "3.1.0",
-    "html-loader": "3.1.0",
-    "html-webpack-plugin": "5.5.0",
-    "postcss": "8.4.12",
-    "postcss-loader": "6.2.1",
-    "postcss-preset-env": "7.4.2",
-    "postcss-scss": "4.0.3",
-    "sass": "1.49.9",
-    "sass-loader": "12.6.0",
-    "source-map-loader": "3.0.1",
-    "style-loader": "3.3.1",
-    "stylelint": "14.6.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-sonarjs": "0.24.0",
+    "expose-loader": "4.1.0",
+    "fork-ts-checker-webpack-plugin": "9.0.2",
+    "html-loader": "4.2.0",
+    "html-webpack-plugin": "5.6.0",
+    "jsdom": "23.2.0",
+    "mini-css-extract-plugin": "2.8.1",
+    "postcss": "8.4.38",
+    "postcss-loader": "7.3.4",
+    "postcss-preset-env": "9.5.2",
+    "postcss-scss": "4.0.9",
+    "sass": "1.72.0",
+    "sass-loader": "13.3.3",
+    "source-map-loader": "4.0.2",
+    "speed-measure-webpack-plugin": "1.5.0",
+    "style-loader": "3.3.4",
+    "stylelint": "15.11.0",
     "stylelint-config-rational-order": "0.1.2",
-    "stylelint-no-browser-hacks": "1.2.1",
-    "stylelint-order": "5.0.0",
-    "stylelint-scss": "4.2.0",
-    "ts-loader": "9.2.8",
-    "typescript": "4.6.2",
-    "webpack": "5.70.0",
-    "webpack-cli": "4.9.2",
-    "webpack-dev-server": "4.7.4",
-    "webpack-merge": "5.8.0",
-    "workbox-webpack-plugin": "6.5.1",
+    "stylelint-no-browser-hacks": "1.3.0",
+    "stylelint-order": "6.0.4",
+    "stylelint-scss": "5.3.2",
+    "ts-loader": "9.5.1",
+    "typescript": "5.4.3",
+    "vitest": "1.4.0",
+    "webpack": "5.91.0",
+    "webpack-bundle-analyzer": "4.10.1",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.2",
+    "webpack-merge": "5.10.0",
     "worker-loader": "3.0.8"
   },
   "dependencies": {
-    "@fontsource/noto-sans": "4.5.1",
-    "@fontsource/noto-sans-hk": "4.5.2",
-    "@fontsource/noto-sans-jp": "4.5.2",
-    "@fontsource/noto-sans-kr": "4.5.2",
-    "@fontsource/noto-sans-sc": "4.5.2",
-    "@fontsource/noto-sans-tc": "4.5.2",
-    "@jellyfin/libass-wasm": "4.1.1",
-    "blurhash": "1.1.4",
+    "@emotion/react": "11.11.4",
+    "@emotion/styled": "11.11.0",
+    "@fontsource/noto-sans": "5.0.21",
+    "@fontsource/noto-sans-hk": "5.0.18",
+    "@fontsource/noto-sans-jp": "5.0.18",
+    "@fontsource/noto-sans-kr": "5.0.18",
+    "@fontsource/noto-sans-sc": "5.0.18",
+    "@fontsource/noto-sans-tc": "5.0.18",
+    "@jellyfin/libass-wasm": "4.2.1",
+    "@jellyfin/sdk": "0.9.0",
+    "@loadable/component": "5.16.3",
+    "@mui/icons-material": "5.15.11",
+    "@mui/material": "5.15.11",
+    "@mui/x-data-grid": "6.19.5",
+    "@react-hook/resize-observer": "1.2.6",
+    "@tanstack/react-query": "4.36.1",
+    "@tanstack/react-query-devtools": "4.36.1",
+    "@types/react-lazy-load-image-component": "1.6.3",
+    "abortcontroller-polyfill": "1.7.5",
+    "blurhash": "2.0.5",
     "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
-    "classnames": "2.3.1",
-    "core-js": "3.20.2",
-    "date-fns": "2.28.0",
-    "dompurify": "2.3.4",
+    "classnames": "2.5.1",
+    "core-js": "3.36.1",
+    "date-fns": "2.30.0",
+    "dompurify": "3.0.1",
     "epubjs": "0.3.93",
     "escape-html": "1.0.3",
-    "fast-text-encoding": "1.0.3",
+    "fast-text-encoding": "1.0.6",
     "flv.js": "1.6.2",
     "headroom.js": "0.12.0",
-    "hls.js": "0.14.17",
-    "intersection-observer": "0.12.0",
-    "jellyfin-apiclient": "1.10.0",
-    "jquery": "3.6.0",
-    "jstree": "3.3.12",
+    "history": "5.3.0",
+    "hls.js": "1.5.7",
+    "intersection-observer": "0.12.2",
+    "jellyfin-apiclient": "1.11.0",
+    "jquery": "3.7.1",
+    "jstree": "3.3.16",
     "libarchive.js": "1.3.0",
     "lodash-es": "4.17.21",
-    "marked": "4.0.10",
-    "material-design-icons-iconfont": "6.1.1",
+    "markdown-it": "14.1.0",
+    "material-design-icons-iconfont": "6.7.0",
     "native-promise-only": "0.8.1",
-    "page": "1.11.6",
-    "pdfjs-dist": "2.12.313",
+    "pdfjs-dist": "3.11.174",
     "react": "17.0.2",
+    "react-blurhash": "0.3.0",
     "react-dom": "17.0.2",
+    "react-lazy-load-image-component": "1.6.0",
+    "react-router-dom": "6.22.3",
     "resize-observer-polyfill": "1.5.1",
-    "screenfull": "6.0.0",
-    "sortablejs": "1.14.0",
-    "swiper": "6.8.4",
+    "screenfull": "6.0.2",
+    "sortablejs": "1.15.2",
+    "swiper": "11.0.7",
+    "usehooks-ts": "2.16.0",
     "webcomponents.js": "0.7.24",
-    "whatwg-fetch": "3.6.2",
-    "workbox-core": "6.2.4",
-    "workbox-precaching": "6.2.4"
+    "whatwg-fetch": "3.6.20"
   },
   "browserslist": [
     "last 2 Firefox versions",
@@ -124,15 +144,19 @@
   "scripts": {
     "start": "npm run serve",
     "serve": "webpack serve --config webpack.dev.js",
-    "prepare": "node ./scripts/prepare.js",
+    "build:analyze": "cross-env NODE_ENV=\"production\" webpack --config webpack.analyze.js",
     "build:development": "webpack --config webpack.dev.js",
-    "build:production": "webpack --config webpack.prod.js",
-    "lint": "eslint \"src/\"",
-    "stylelint": "npm run stylelint:css && npm run stylelint:scss",
-    "stylelint:css": "stylelint \"src/**/*.css\"",
-    "stylelint:scss": "stylelint --config=\".stylelintrc.scss.json\" \"src/**/*.scss\""
+    "build:production": "cross-env NODE_ENV=\"production\" webpack --config webpack.prod.js",
+    "build:check": "tsc --noEmit",
+    "escheck": "es-check",
+    "lint": "eslint \"./\"",
+    "test": "vitest --watch=false --config vite.config.ts",
+    "test:watch": "vitest --config vite.config.ts",
+    "stylelint": "stylelint \"src/**/*.{css,scss}\""
   },
   "engines": {
+    "node": ">=20.0.0",
+    "npm": ">=9.6.4",
     "yarn": "YARN NO LONGER USED - use npm instead."
   }
 }

postcss.config.js

@@ -7,8 +7,8 @@ const config = () => ({
     plugins: [
         // Explicitly specify browserslist to override ones from node_modules
         // For example, Swiper has it in its package.json
-        postcssPresetEnv({browsers: packageConfig.browserslist}),
-        autoprefixer({overrideBrowserslist: packageConfig.browserslist}),
+        postcssPresetEnv({ browsers: packageConfig.browserslist }),
+        autoprefixer({ overrideBrowserslist: packageConfig.browserslist }),
         cssnano()
     ]
 });

scripts/prepare.js

@@ -1,12 +0,0 @@
-const { execSync } = require('child_process');
-
-/**
- * The npm `prepare` script needs to run a build to support installing
- * a package from git repositories (this is dumb but a limitation of how
- * npm behaves). We don't want to run these in CI though because
- * building is slow so this script will skip the build when the
- * `SKIP_PREPARE` environment variable has been set.
- */
-if (!process.env.SKIP_PREPARE) {
-    execSync('webpack --config webpack.prod.js', { stdio: 'inherit' });
-}

src/RootApp.tsx

@@ -0,0 +1,24 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import React from 'react';
+
+import { ApiProvider } from 'hooks/useApi';
+import { WebConfigProvider } from 'hooks/useWebConfig';
+import { queryClient } from 'utils/query/queryClient';
+
+import RootAppRouter from './RootAppRouter';
+
+const RootApp = () => {
+    return (
+        <QueryClientProvider client={queryClient}>
+            <ApiProvider>
+                <WebConfigProvider>
+                    <RootAppRouter />
+                </WebConfigProvider>
+            </ApiProvider>
+            <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
+    );
+};
+
+export default RootApp;

src/RootAppRouter.tsx

@@ -0,0 +1,54 @@
+
+import React from 'react';
+import {
+    RouterProvider,
+    createHashRouter,
+    Outlet,
+    useLocation
+} from 'react-router-dom';
+
+import { DASHBOARD_APP_PATHS, DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
+import { EXPERIMENTAL_APP_ROUTES } from 'apps/experimental/routes/routes';
+import { STABLE_APP_ROUTES } from 'apps/stable/routes/routes';
+import AppHeader from 'components/AppHeader';
+import Backdrop from 'components/Backdrop';
+import { createRouterHistory } from 'components/router/routerHistory';
+import UserThemeProvider from 'themes/UserThemeProvider';
+
+const layoutMode = localStorage.getItem('layout');
+const isExperimentalLayout = layoutMode === 'experimental';
+
+const router = createHashRouter([
+    {
+        element: <RootAppLayout />,
+        children: [
+            ...(isExperimentalLayout ? EXPERIMENTAL_APP_ROUTES : STABLE_APP_ROUTES),
+            ...DASHBOARD_APP_ROUTES
+        ]
+    }
+]);
+
+export const history = createRouterHistory(router);
+
+export default function RootAppRouter() {
+    return <RouterProvider router={router} />;
+}
+
+/**
+ * Layout component that renders legacy components required on all pages.
+ * NOTE: The app will crash if these get removed from the DOM.
+ */
+function RootAppLayout() {
+    const location = useLocation();
+    const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
+        .some(path => location.pathname.startsWith(`/${path}`));
+
+    return (
+        <UserThemeProvider>
+            <Backdrop />
+            <AppHeader isHidden={isExperimentalLayout || isNewLayoutPath} />
+
+            <Outlet />
+        </UserThemeProvider>
+    );
+}

src/apiclient.d.ts

@@ -67,7 +67,8 @@ declare module 'jellyfin-apiclient' {
         UserPolicy,
         UtcTimeResponse,
         VirtualFolderInfo
-    } from '@thornbill/jellyfin-sdk/dist/generated-client';
+    } from '@jellyfin/sdk/lib/generated-client';
+    import { ConnectionState } from './utils/jellyfin-apiclient/ConnectionState';
 
     class ApiClient {
         constructor(serverAddress: string, appName: string, appVersion: string, deviceName: string, deviceId: string);
@@ -75,6 +76,7 @@ declare module 'jellyfin-apiclient' {
         accessToken(): string;
         addMediaPath(virtualFolderName: string, mediaPath: string, networkSharePath: string, refreshLibrary?: boolean): Promise<void>;
         addVirtualFolder(name: string, type?: string, refreshLibrary?: boolean, libraryOptions?: any): Promise<void>;
+        ajax(request: any): Promise<any>;
         appName(): string;
         appVersion(): string;
         authenticateUserByName(name: string, password: string): Promise<AuthenticationResult>;
@@ -116,6 +118,7 @@ declare module 'jellyfin-apiclient' {
         getCountries(): Promise<CountryInfo[]>;
         getCriticReviews(itemId: string, options?: any): Promise<BaseItemDtoQueryResult>;
         getCultures(): Promise<CultureDto[]>;
+        getCurrentUser(cache?: boolean): Promise<UserDto>;
         getCurrentUserId(): string;
         getDateParamValue(date: Date): string;
         getDefaultImageQuality(imageType: ImageType): number;
@@ -266,7 +269,7 @@ declare module 'jellyfin-apiclient' {
         sendWebSocketMessage(name: string, data: any): void;
         serverAddress(val?: string): string;
         serverId(): string;
-        serverVersion(): string
+        serverVersion(): string;
         setAuthenticationInfo(accessKey?: string, userId?: string): void;
         setRequestHeaders(headers: any): void;
         setSystemInfo(info: SystemInfo): void;
@@ -310,12 +313,18 @@ declare module 'jellyfin-apiclient' {
         setItem(name: string, value: string): void;
     }
 
+    interface ConnectResponse {
+        ApiClient: ApiClient
+        Servers: any[]
+        State: ConnectionState
+    }
+
     class ConnectionManager {
         constructor(credentialProvider: Credentials, appName: string, appVersion: string, deviceName: string, deviceId: string, capabilities: ClientCapabilities);
 
         addApiClient(apiClient: ApiClient): void;
         clearData(): void;
-        connect(options?: any): Promise<any>;
+        connect(options?: any): Promise<ConnectResponse>;
         connectToAddress(address: string, options?: any): Promise<any>;
         connectToServer(server: any, options?: any): Promise<any>;
         connectToServers(servers: any[], options?: any): Promise<any>;

src/apps/dashboard/AppLayout.tsx

@@ -0,0 +1,99 @@
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import { type Theme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import React, { FC, useCallback, useEffect, useState } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+
+import AppBody from 'components/AppBody';
+import AppToolbar from 'components/toolbar/AppToolbar';
+import ElevationScroll from 'components/ElevationScroll';
+import { DRAWER_WIDTH } from 'components/ResponsiveDrawer';
+import { useApi } from 'hooks/useApi';
+
+import AppTabs from './components/AppTabs';
+import AppDrawer from './components/drawer/AppDrawer';
+
+import './AppOverrides.scss';
+
+interface AppLayoutProps {
+    drawerlessPaths: string[]
+}
+
+const AppLayout: FC<AppLayoutProps> = ({
+    drawerlessPaths
+}) => {
+    const [ isDrawerActive, setIsDrawerActive ] = useState(false);
+    const location = useLocation();
+    const { user } = useApi();
+
+    const isMediumScreen = useMediaQuery((t: Theme) => t.breakpoints.up('md'));
+    const isDrawerAvailable = Boolean(user)
+        && !drawerlessPaths.some(path => location.pathname.startsWith(`/${path}`));
+    const isDrawerOpen = isDrawerActive && isDrawerAvailable;
+
+    const onToggleDrawer = useCallback(() => {
+        setIsDrawerActive(!isDrawerActive);
+    }, [ isDrawerActive, setIsDrawerActive ]);
+
+    // Update body class
+    useEffect(() => {
+        document.body.classList.add('dashboardDocument');
+
+        return () => {
+            document.body.classList.remove('dashboardDocument');
+        };
+    }, []);
+
+    return (
+        <Box sx={{ display: 'flex' }}>
+            <ElevationScroll elevate={false}>
+                <AppBar
+                    position='fixed'
+                    sx={{
+                        width: {
+                            xs: '100%',
+                            md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
+                        },
+                        ml: {
+                            xs: 0,
+                            md: isDrawerAvailable ? DRAWER_WIDTH : 0
+                        }
+                    }}
+                >
+                    <AppToolbar
+                        isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
+                        isDrawerOpen={isDrawerOpen}
+                        onDrawerButtonClick={onToggleDrawer}
+                    >
+                        <AppTabs isDrawerOpen={isDrawerOpen} />
+                    </AppToolbar>
+                </AppBar>
+            </ElevationScroll>
+
+            {
+                isDrawerAvailable && (
+                    <AppDrawer
+                        open={isDrawerOpen}
+                        onClose={onToggleDrawer}
+                        onOpen={onToggleDrawer}
+                    />
+                )
+            }
+
+            <Box
+                component='main'
+                sx={{
+                    width: '100%',
+                    flexGrow: 1
+                }}
+            >
+                <AppBody>
+                    <Outlet />
+                </AppBody>
+            </Box>
+        </Box>
+    );
+};
+
+export default AppLayout;

src/apps/dashboard/AppOverrides.scss

@@ -0,0 +1,34 @@
+// Default MUI breakpoints
+// https://mui.com/material-ui/customization/breakpoints/#default-breakpoints
+$mui-bp-sm: 600px;
+$mui-bp-md: 900px;
+$mui-bp-lg: 1200px;
+$mui-bp-xl: 1536px;
+
+$drawer-width: 240px;
+
+// Fix dashboard pages layout to work with drawer
+.dashboardDocument {
+    .mainAnimatedPage {
+        @media all and (min-width: $mui-bp-md) {
+            left: $drawer-width;
+        }
+    }
+
+    .skinBody {
+        position: unset !important;
+    }
+
+    // Fix the padding of dashboard pages
+    .content-primary {
+        padding-top: 3.25rem;
+    }
+    // Tabbed pages
+    .withTabs .content-primary {
+        padding-top: 6.5rem;
+
+        @media all and (min-width: $mui-bp-lg) {
+            padding-top: 3.25rem;
+        }
+    }
+}

src/apps/dashboard/components/AppTabs.tsx

@@ -0,0 +1,96 @@
+import { Theme } from '@mui/material/styles';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import debounce from 'lodash-es/debounce';
+import isEqual from 'lodash-es/isEqual';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { EventType } from 'types/eventType';
+import Events, { type Event } from 'utils/events';
+
+interface AppTabsParams {
+    isDrawerOpen: boolean
+}
+
+interface TabDefinition {
+    href: string
+    name: string
+}
+
+const handleResize = debounce(() => window.dispatchEvent(new Event('resize')), 100);
+
+const AppTabs: FC<AppTabsParams> = ({
+    isDrawerOpen
+}) => {
+    const documentRef = useRef<Document>(document);
+    const [ activeIndex, setActiveIndex ] = useState(0);
+    const [ tabs, setTabs ] = useState<TabDefinition[]>();
+
+    const isBigScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('sm'));
+
+    const onTabsUpdate = useCallback((
+        _e: Event,
+        _newView?: string,
+        newIndex: number | undefined = 0,
+        newTabs?: TabDefinition[]
+    ) => {
+        setActiveIndex(newIndex);
+
+        if (!isEqual(tabs, newTabs)) {
+            setTabs(newTabs);
+        }
+    }, [ tabs ]);
+
+    useEffect(() => {
+        const doc = documentRef.current;
+
+        if (doc) Events.on(doc, EventType.SET_TABS, onTabsUpdate);
+
+        return () => {
+            if (doc) Events.off(doc, EventType.SET_TABS, onTabsUpdate);
+        };
+    }, [ onTabsUpdate ]);
+
+    // HACK: Force resizing to workaround upstream bug with tab resizing
+    // https://github.com/mui/material-ui/issues/24011
+    useEffect(() => {
+        handleResize();
+    }, [ isDrawerOpen ]);
+
+    if (!tabs?.length) return null;
+
+    return (
+        <Tabs
+            value={activeIndex}
+            sx={{
+                width: '100%',
+                flexShrink: {
+                    xs: 0,
+                    lg: 'unset'
+                },
+                order: {
+                    xs: 100,
+                    lg: 'unset'
+                }
+            }}
+            variant={isBigScreen ? 'standard' : 'scrollable'}
+            centered={isBigScreen}
+        >
+            {
+                tabs.map(({ href, name }, index) => (
+                    <Tab
+                        key={`tab-${name}`}
+                        label={name}
+                        data-tab-index={`${index}`}
+                        component={Link}
+                        to={href}
+                    />
+                ))
+            }
+        </Tabs>
+    );
+};
+
+export default AppTabs;

src/apps/dashboard/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;
+    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/dashboard/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/dashboard/components/dataGrid/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/dashboard/components/drawer/AppDrawer.tsx

@@ -0,0 +1,37 @@
+import ListItem from '@mui/material/ListItem';
+import List from '@mui/material/List';
+import React, { FC } from 'react';
+
+import DrawerHeaderLink from 'apps/experimental/components/drawers/DrawerHeaderLink';
+import ResponsiveDrawer, { ResponsiveDrawerProps } from 'components/ResponsiveDrawer';
+
+import ServerDrawerSection from './sections/ServerDrawerSection';
+import DevicesDrawerSection from './sections/DevicesDrawerSection';
+import LiveTvDrawerSection from './sections/LiveTvDrawerSection';
+import AdvancedDrawerSection from './sections/AdvancedDrawerSection';
+import PluginDrawerSection from './sections/PluginDrawerSection';
+
+const AppDrawer: FC<ResponsiveDrawerProps> = ({
+    open = false,
+    onClose,
+    onOpen
+}) => (
+    <ResponsiveDrawer
+        open={open}
+        onClose={onClose}
+        onOpen={onOpen}
+    >
+        <List disablePadding>
+            <ListItem disablePadding>
+                <DrawerHeaderLink />
+            </ListItem>
+        </List>
+        <ServerDrawerSection />
+        <DevicesDrawerSection />
+        <LiveTvDrawerSection />
+        <AdvancedDrawerSection />
+        <PluginDrawerSection />
+    </ResponsiveDrawer>
+);
+
+export default AppDrawer;

src/apps/dashboard/components/drawer/sections/AdvancedDrawerSection.tsx

@@ -0,0 +1,109 @@
+import Article from '@mui/icons-material/Article';
+import EditNotifications from '@mui/icons-material/EditNotifications';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import Extension from '@mui/icons-material/Extension';
+import Lan from '@mui/icons-material/Lan';
+import Schedule from '@mui/icons-material/Schedule';
+import VpnKey from '@mui/icons-material/VpnKey';
+import Collapse from '@mui/material/Collapse';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+
+import ListItemLink from 'components/ListItemLink';
+import globalize from 'scripts/globalize';
+
+const PLUGIN_PATHS = [
+    '/dashboard/plugins',
+    '/dashboard/plugins/catalog',
+    '/dashboard/plugins/repositories',
+    '/dashboard/plugins/add',
+    '/configurationpage'
+];
+
+const AdvancedDrawerSection = () => {
+    const location = useLocation();
+
+    const isPluginSectionOpen = PLUGIN_PATHS.includes(location.pathname);
+
+    return (
+        <List
+            aria-labelledby='advanced-subheader'
+            subheader={
+                <ListSubheader component='div' id='advanced-subheader'>
+                    {globalize.translate('TabAdvanced')}
+                </ListSubheader>
+            }
+        >
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/networking'>
+                    <ListItemIcon>
+                        <Lan />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('TabNetworking')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/keys'>
+                    <ListItemIcon>
+                        <VpnKey />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('HeaderApiKeys')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/logs'>
+                    <ListItemIcon>
+                        <Article />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('TabLogs')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/notifications'>
+                    <ListItemIcon>
+                        <EditNotifications />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('Notifications')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/plugins' selected={false}>
+                    <ListItemIcon>
+                        <Extension />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('TabPlugins')} />
+                    {isPluginSectionOpen ? <ExpandLess /> : <ExpandMore />}
+                </ListItemLink>
+            </ListItem>
+            <Collapse in={isPluginSectionOpen} timeout='auto' unmountOnExit>
+                <List component='div' disablePadding>
+                    <ListItemLink to='/dashboard/plugins' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('TabMyPlugins')} />
+                    </ListItemLink>
+                    <ListItemLink to='/dashboard/plugins/catalog' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('TabCatalog')} />
+                    </ListItemLink>
+                    <ListItemLink to='/dashboard/plugins/repositories' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('TabRepositories')} />
+                    </ListItemLink>
+                </List>
+            </Collapse>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/tasks'>
+                    <ListItemIcon>
+                        <Schedule />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('TabScheduledTasks')} />
+                </ListItemLink>
+            </ListItem>
+        </List>
+    );
+};
+
+export default AdvancedDrawerSection;

src/apps/dashboard/components/drawer/sections/DevicesDrawerSection.tsx

@@ -0,0 +1,50 @@
+import { Devices, Analytics, Input } from '@mui/icons-material';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import React from 'react';
+
+import ListItemLink from 'components/ListItemLink';
+import globalize from 'scripts/globalize';
+
+const DevicesDrawerSection = () => {
+    return (
+        <List
+            aria-labelledby='devices-subheader'
+            subheader={
+                <ListSubheader component='div' id='devices-subheader'>
+                    {globalize.translate('HeaderDevices')}
+                </ListSubheader>
+            }
+        >
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/devices'>
+                    <ListItemIcon>
+                        <Devices />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('HeaderDevices')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/activity'>
+                    <ListItemIcon>
+                        <Analytics />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('HeaderActivity')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/dlna'>
+                    <ListItemIcon>
+                        <Input />
+                    </ListItemIcon>
+                    <ListItemText primary={'DLNA'} />
+                </ListItemLink>
+            </ListItem>
+        </List>
+    );
+};
+
+export default DevicesDrawerSection;

src/apps/dashboard/components/drawer/sections/LiveTvDrawerSection.tsx

@@ -0,0 +1,42 @@
+import { Dvr, LiveTv } from '@mui/icons-material';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import React from 'react';
+
+import ListItemLink from 'components/ListItemLink';
+import globalize from 'scripts/globalize';
+
+const LiveTvDrawerSection = () => {
+    return (
+        <List
+            aria-labelledby='livetv-subheader'
+            subheader={
+                <ListSubheader component='div' id='livetv-subheader'>
+                    {globalize.translate('LiveTV')}
+                </ListSubheader>
+            }
+        >
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/livetv'>
+                    <ListItemIcon>
+                        <LiveTv />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('LiveTV')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/recordings'>
+                    <ListItemIcon>
+                        <Dvr />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('HeaderDVR')} />
+                </ListItemLink>
+            </ListItem>
+        </List>
+    );
+};
+
+export default LiveTvDrawerSection;

src/apps/dashboard/components/drawer/sections/PluginDrawerSection.tsx

@@ -0,0 +1,66 @@
+import { ConfigurationPageInfo } from '@jellyfin/sdk/lib/generated-client';
+import { getDashboardApi } from '@jellyfin/sdk/lib/utils/api/dashboard-api';
+import { Folder } from '@mui/icons-material';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import React, { useEffect, useState } from 'react';
+
+import ListItemLink from 'components/ListItemLink';
+import { useApi } from 'hooks/useApi';
+import globalize from 'scripts/globalize';
+import Dashboard from 'utils/dashboard';
+
+const PluginDrawerSection = () => {
+    const { api } = useApi();
+    const [ pagesInfo, setPagesInfo ] = useState<ConfigurationPageInfo[]>([]);
+
+    useEffect(() => {
+        const fetchPluginPages = async () => {
+            if (!api) return;
+
+            const pagesResponse = await getDashboardApi(api)
+                .getConfigurationPages({ enableInMainMenu: true });
+
+            setPagesInfo(pagesResponse.data);
+        };
+
+        fetchPluginPages()
+            .catch(err => {
+                console.error('[PluginDrawerSection] unable to fetch plugin config pages', err);
+            });
+    }, [ api ]);
+
+    if (!api || pagesInfo.length < 1) {
+        return null;
+    }
+
+    return (
+        <List
+            aria-labelledby='plugins-subheader'
+            subheader={
+                <ListSubheader component='div' id='plugins-subheader'>
+                    {globalize.translate('TabPlugins')}
+                </ListSubheader>
+            }
+        >
+            {
+                pagesInfo.map(pageInfo => (
+                    <ListItem key={pageInfo.PluginId} disablePadding>
+                        <ListItemLink to={`/${Dashboard.getPluginUrl(pageInfo.Name)}`}>
+                            <ListItemIcon>
+                                {/* TODO: Support different icons? */}
+                                <Folder />
+                            </ListItemIcon>
+                            <ListItemText primary={pageInfo.DisplayName} />
+                        </ListItemLink>
+                    </ListItem>
+                ))
+            }
+        </List>
+    );
+};
+
+export default PluginDrawerSection;

src/apps/dashboard/components/drawer/sections/ServerDrawerSection.tsx

@@ -0,0 +1,121 @@
+import { Dashboard, ExpandLess, ExpandMore, LibraryAdd, People, PlayCircle, Settings } from '@mui/icons-material';
+import Collapse from '@mui/material/Collapse';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+
+import ListItemLink from 'components/ListItemLink';
+import globalize from 'scripts/globalize';
+
+const LIBRARY_PATHS = [
+    '/dashboard/libraries',
+    '/dashboard/libraries/display',
+    '/dashboard/libraries/metadata',
+    '/dashboard/libraries/nfo'
+];
+
+const PLAYBACK_PATHS = [
+    '/dashboard/playback/transcoding',
+    '/dashboard/playback/resume',
+    '/dashboard/playback/streaming',
+    '/dashboard/playback/trickplay'
+];
+
+const ServerDrawerSection = () => {
+    const location = useLocation();
+
+    const isLibrarySectionOpen = LIBRARY_PATHS.includes(location.pathname);
+    const isPlaybackSectionOpen = PLAYBACK_PATHS.includes(location.pathname);
+
+    return (
+        <List
+            aria-labelledby='server-subheader'
+            subheader={
+                <ListSubheader component='div' id='server-subheader'>
+                    {globalize.translate('TabServer')}
+                </ListSubheader>
+            }
+        >
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard'>
+                    <ListItemIcon>
+                        <Dashboard />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('TabDashboard')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/settings'>
+                    <ListItemIcon>
+                        <Settings />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('General')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/users'>
+                    <ListItemIcon>
+                        <People />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('HeaderUsers')} />
+                </ListItemLink>
+            </ListItem>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/libraries' selected={false}>
+                    <ListItemIcon>
+                        <LibraryAdd />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('HeaderLibraries')} />
+                    {isLibrarySectionOpen ? <ExpandLess /> : <ExpandMore />}
+                </ListItemLink>
+            </ListItem>
+            <Collapse in={isLibrarySectionOpen} timeout='auto' unmountOnExit>
+                <List component='div' disablePadding>
+                    <ListItemLink to='/dashboard/libraries' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('HeaderLibraries')} />
+                    </ListItemLink>
+                    <ListItemLink to='/dashboard/libraries/display' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('Display')} />
+                    </ListItemLink>
+                    <ListItemLink to='/dashboard/libraries/metadata' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('Metadata')} />
+                    </ListItemLink>
+                    <ListItemLink to='/dashboard/libraries/nfo' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('TabNfoSettings')} />
+                    </ListItemLink>
+                </List>
+            </Collapse>
+            <ListItem disablePadding>
+                <ListItemLink to='/dashboard/playback/transcoding' selected={false}>
+                    <ListItemIcon>
+                        <PlayCircle />
+                    </ListItemIcon>
+                    <ListItemText primary={globalize.translate('TitlePlayback')} />
+                    {isPlaybackSectionOpen ? <ExpandLess /> : <ExpandMore />}
+                </ListItemLink>
+            </ListItem>
+            <Collapse in={isPlaybackSectionOpen} timeout='auto' unmountOnExit>
+                <List component='div' disablePadding>
+                    <ListItemLink to='/dashboard/playback/transcoding' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('Transcoding')} />
+                    </ListItemLink>
+                    <ListItemLink to='/dashboard/playback/resume' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('ButtonResume')} />
+                    </ListItemLink>
+                    <ListItemLink to='/dashboard/playback/streaming' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('TabStreaming')} />
+                    </ListItemLink>
+                    <ListItemLink to='/dashboard/playback/trickplay' sx={{ pl: 4 }}>
+                        <ListItemText inset primary={globalize.translate('Trickplay')} />
+                    </ListItemLink>
+                </List>
+            </Collapse>
+        </List>
+    );
+};
+
+export default ServerDrawerSection;

src/apps/dashboard/routes/_asyncRoutes.ts

@@ -0,0 +1,14 @@
+import { AsyncRouteType, type AsyncRoute } from 'components/router/AsyncRoute';
+
+export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
+    { path: 'activity', type: AsyncRouteType.Dashboard },
+    { path: 'dlna', type: AsyncRouteType.Dashboard },
+    { path: 'notifications', type: AsyncRouteType.Dashboard },
+    { path: 'users', type: AsyncRouteType.Dashboard },
+    { path: 'users/access', type: AsyncRouteType.Dashboard },
+    { path: 'users/add', type: AsyncRouteType.Dashboard },
+    { path: 'users/parentalcontrol', type: AsyncRouteType.Dashboard },
+    { path: 'users/password', type: AsyncRouteType.Dashboard },
+    { path: 'users/profile', type: AsyncRouteType.Dashboard },
+    { path: 'playback/trickplay', type: AsyncRouteType.Dashboard }
+];

src/apps/dashboard/routes/_legacyRoutes.ts

@@ -0,0 +1,149 @@
+import type { LegacyRoute } from 'components/router/LegacyRoute';
+
+export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
+    {
+        path: '/dashboard',
+        pageProps: {
+            controller: 'dashboard/dashboard',
+            view: 'dashboard/dashboard.html'
+        }
+    }, {
+        path: 'settings',
+        pageProps: {
+            controller: 'dashboard/general',
+            view: 'dashboard/general.html'
+        }
+    }, {
+        path: 'networking',
+        pageProps: {
+            controller: 'dashboard/networking',
+            view: 'dashboard/networking.html'
+        }
+    }, {
+        path: 'devices',
+        pageProps: {
+            controller: 'dashboard/devices/devices',
+            view: 'dashboard/devices/devices.html'
+        }
+    }, {
+        path: 'devices/edit',
+        pageProps: {
+            controller: 'dashboard/devices/device',
+            view: 'dashboard/devices/device.html'
+        }
+    }, {
+        path: 'plugins/add',
+        pageProps: {
+            controller: 'dashboard/plugins/add/index',
+            view: 'dashboard/plugins/add/index.html'
+        }
+    }, {
+        path: 'libraries',
+        pageProps: {
+            controller: 'dashboard/library',
+            view: 'dashboard/library.html'
+        }
+    }, {
+        path: 'libraries/display',
+        pageProps: {
+            controller: 'dashboard/librarydisplay',
+            view: 'dashboard/librarydisplay.html'
+        }
+    }, {
+        path: 'playback/transcoding',
+        pageProps: {
+            controller: 'dashboard/encodingsettings',
+            view: 'dashboard/encodingsettings.html'
+        }
+    }, {
+        path: 'logs',
+        pageProps: {
+            controller: 'dashboard/logs',
+            view: 'dashboard/logs.html'
+        }
+    }, {
+        path: 'libraries/metadata',
+        pageProps: {
+            controller: 'dashboard/metadataImages',
+            view: 'dashboard/metadataimages.html'
+        }
+    }, {
+        path: 'libraries/nfo',
+        pageProps: {
+            controller: 'dashboard/metadatanfo',
+            view: 'dashboard/metadatanfo.html'
+        }
+    }, {
+        path: 'playback/resume',
+        pageProps: {
+            controller: 'dashboard/playback',
+            view: 'dashboard/playback.html'
+        }
+    }, {
+        path: 'plugins/catalog',
+        pageProps: {
+            controller: 'dashboard/plugins/available/index',
+            view: 'dashboard/plugins/available/index.html'
+        }
+    }, {
+        path: 'plugins/repositories',
+        pageProps: {
+            controller: 'dashboard/plugins/repositories/index',
+            view: 'dashboard/plugins/repositories/index.html'
+        }
+    }, {
+        path: 'livetv/guide',
+        pageProps: {
+            controller: 'livetvguideprovider',
+            view: 'livetvguideprovider.html'
+        }
+    }, {
+        path: 'recordings',
+        pageProps: {
+            controller: 'livetvsettings',
+            view: 'livetvsettings.html'
+        }
+    }, {
+        path: 'livetv',
+        pageProps: {
+            controller: 'livetvstatus',
+            view: 'livetvstatus.html'
+        }
+    }, {
+        path: 'livetv/tuner',
+        pageProps: {
+            controller: 'livetvtuner',
+            view: 'livetvtuner.html'
+        }
+    }, {
+        path: 'plugins',
+        pageProps: {
+            controller: 'dashboard/plugins/installed/index',
+            view: 'dashboard/plugins/installed/index.html'
+        }
+    }, {
+        path: 'tasks/edit',
+        pageProps: {
+            controller: 'dashboard/scheduledtasks/scheduledtask',
+            view: 'dashboard/scheduledtasks/scheduledtask.html'
+        }
+    }, {
+        path: 'tasks',
+        pageProps: {
+            controller: 'dashboard/scheduledtasks/scheduledtasks',
+            view: 'dashboard/scheduledtasks/scheduledtasks.html'
+        }
+    }, {
+        path: 'keys',
+        pageProps: {
+            controller: 'dashboard/apikeys',
+            view: 'dashboard/apikeys.html'
+        }
+    }, {
+        path: 'playback/streaming',
+        pageProps: {
+            view: 'dashboard/streaming.html',
+            controller: 'dashboard/streaming'
+        }
+    }
+];

src/apps/dashboard/routes/_redirects.ts

@@ -0,0 +1,40 @@
+import type { Redirect } from 'components/router/Redirect';
+
+export const REDIRECTS: Redirect[] = [
+    { from: 'addplugin.html', to: '/dashboard/plugins/add' },
+    { from: 'apikeys.html', to: '/dashboard/keys' },
+    { from: 'availableplugins.html', to: '/dashboard/plugins/catalog' },
+    { from: 'dashboard.html', to: '/dashboard' },
+    { from: 'dashboardgeneral.html', to: '/dashboard/settings' },
+    { from: 'device.html', to: '/dashboard/devices/edit' },
+    { from: 'devices.html', to: '/dashboard/devices' },
+    { from: 'dlnaprofile.html', to: '/dashboard/dlna' },
+    { from: 'dlnaprofiles.html', to: '/dashboard/dlna' },
+    { from: 'dlnasettings.html', to: '/dashboard/dlna' },
+    { from: 'edititemmetadata.html', to: '/metadata' },
+    { from: 'encodingsettings.html', to: '/dashboard/playback/transcoding' },
+    { from: 'installedplugins.html', to: '/dashboard/plugins' },
+    { from: 'library.html', to: '/dashboard/libraries' },
+    { from: 'librarydisplay.html', to: '/dashboard/libraries/display' },
+    { from: 'livetvguideprovider.html', to: '/dashboard/livetv/guide' },
+    { from: 'livetvsettings.html', to: '/dashboard/recordings' },
+    { from: 'livetvstatus.html', to: '/dashboard/livetv' },
+    { from: 'livetvtuner.html', to: '/dashboard/livetv/tuner' },
+    { from: 'log.html', to: '/dashboard/logs' },
+    { from: 'metadataimages.html', to: '/dashboard/libraries/metadata' },
+    { from: 'metadatanfo.html', to: '/dashboard/libraries/nfo' },
+    { from: 'networking.html', to: '/dashboard/networking' },
+    { from: 'notificationsettings.html', to: '/dashboard/notifications' },
+    { from: 'playbackconfiguration.html', to: '/dashboard/playback/resume' },
+    { from: 'repositories.html', to: '/dashboard/plugins/repositories' },
+    { from: 'scheduledtask.html', to: '/dashboard/tasks/edit' },
+    { from: 'scheduledtasks.html', to: '/dashboard/tasks' },
+    { from: 'serveractivity.html', to: '/dashboard/activity' },
+    { from: 'streamingsettings.html', to: '/dashboard/playback/streaming' },
+    { from: 'useredit.html', to: '/dashboard/users/profile' },
+    { from: 'userlibraryaccess.html', to: '/dashboard/users/access' },
+    { from: 'usernew.html', to: '/dashboard/users/add' },
+    { from: 'userparentalcontrol.html', to: '/dashboard/users/parentalcontrol' },
+    { from: 'userpassword.html', to: '/dashboard/users/password' },
+    { from: 'userprofiles.html', to: '/dashboard/users' }
+];

src/apps/dashboard/routes/activity.tsx

@@ -0,0 +1,274 @@
+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/dataGrid/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={`/dashboard/users/profile?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: 300
+        },
+        {
+            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: 180
+        },
+        {
+            field: 'actions',
+            type: 'actions',
+            width: 50,
+            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/dashboard/routes/dlna.tsx

@@ -0,0 +1,33 @@
+import Alert from '@mui/material/Alert/Alert';
+import Box from '@mui/material/Box/Box';
+import Button from '@mui/material/Button/Button';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import Page from 'components/Page';
+import globalize from 'scripts/globalize';
+
+const DlnaPage = () => (
+    <Page
+        id='dlnaSettingsPage'
+        title='DLNA'
+        className='mainAnimatedPage type-interior'
+    >
+        <div className='content-primary'>
+            <h2>DLNA</h2>
+            <Alert severity='info'>
+                <Box sx={{ marginBottom: 2 }}>
+                    {globalize.translate('DlnaMovedMessage')}
+                </Box>
+                <Button
+                    component={Link}
+                    to='/dashboard/plugins/add?name=DLNA&guid=33eba9cd7da14720967fdd7dae7b74a1'
+                >
+                    {globalize.translate('GetThePlugin')}
+                </Button>
+            </Alert>
+        </div>
+    </Page>
+);
+
+export default DlnaPage;

src/apps/dashboard/routes/notifications.tsx

@@ -0,0 +1,34 @@
+import Alert from '@mui/material/Alert/Alert';
+import Box from '@mui/material/Box/Box';
+import Button from '@mui/material/Button/Button';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import Page from 'components/Page';
+import globalize from 'scripts/globalize';
+
+const NotificationsPage = () => (
+    <Page
+        id='notificationSettingPage'
+        title={globalize.translate('Notifications')}
+        className='mainAnimatedPage type-interior'
+    >
+        <div className='content-primary'>
+            <h2>{globalize.translate('Notifications')}</h2>
+
+            <Alert severity='info'>
+                <Box sx={{ marginBottom: 2 }}>
+                    {globalize.translate('NotificationsMovedMessage')}
+                </Box>
+                <Button
+                    component={Link}
+                    to='/dashboard/plugins/add?name=Webhook&guid=71552a5a5c5c4350a2aeebe451a30173'
+                >
+                    {globalize.translate('GetThePlugin')}
+                </Button>
+            </Alert>
+        </div>
+    </Page>
+);
+
+export default NotificationsPage;

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

@@ -0,0 +1,311 @@
+import type { ProcessPriorityClass, ServerConfiguration, TrickplayScanBehavior } from '@jellyfin/sdk/lib/generated-client';
+import React, { type FunctionComponent, useCallback, useEffect, useRef } from 'react';
+
+import globalize from '../../../../scripts/globalize';
+import Page from '../../../../components/Page';
+import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
+import ButtonElement from '../../../../elements/ButtonElement';
+import CheckBoxElement from '../../../../elements/CheckBoxElement';
+import SelectElement from '../../../../elements/SelectElement';
+import InputElement from '../../../../elements/InputElement';
+import loading from '../../../../components/loading/loading';
+import toast from '../../../../components/toast/toast';
+import ServerConnections from '../../../../components/ServerConnections';
+
+function onSaveComplete() {
+    loading.hide();
+    toast(globalize.translate('SettingsSaved'));
+}
+
+const PlaybackTrickplay: FunctionComponent = () => {
+    const element = useRef<HTMLDivElement>(null);
+
+    const loadConfig = useCallback((config) => {
+        const page = element.current;
+        const options = config.TrickplayOptions;
+
+        if (!page) {
+            console.error('Unexpected null reference');
+            return;
+        }
+
+        (page.querySelector('.chkEnableHwAcceleration') as HTMLInputElement).checked = options.EnableHwAcceleration;
+        (page.querySelector('.chkEnableHwEncoding') as HTMLInputElement).checked = options.EnableHwEncoding;
+        (page.querySelector('#selectScanBehavior') as HTMLSelectElement).value = options.ScanBehavior;
+        (page.querySelector('#selectProcessPriority') as HTMLSelectElement).value = options.ProcessPriority;
+        (page.querySelector('#txtInterval') as HTMLInputElement).value = options.Interval;
+        (page.querySelector('#txtWidthResolutions') as HTMLInputElement).value = options.WidthResolutions.join(',');
+        (page.querySelector('#txtTileWidth') as HTMLInputElement).value = options.TileWidth;
+        (page.querySelector('#txtTileHeight') as HTMLInputElement).value = options.TileHeight;
+        (page.querySelector('#txtQscale') as HTMLInputElement).value = options.Qscale;
+        (page.querySelector('#txtJpegQuality') as HTMLInputElement).value = options.JpegQuality;
+        (page.querySelector('#txtProcessThreads') as HTMLInputElement).value = options.ProcessThreads;
+
+        loading.hide();
+    }, []);
+
+    const loadData = useCallback(() => {
+        loading.show();
+
+        ServerConnections.currentApiClient()?.getServerConfiguration().then(function (config) {
+            loadConfig(config);
+        }).catch(err => {
+            console.error('[PlaybackTrickplay] failed to fetch server config', err);
+        });
+    }, [loadConfig]);
+
+    useEffect(() => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('Unexpected null reference');
+            return;
+        }
+
+        const saveConfig = (config: ServerConfiguration) => {
+            const apiClient = ServerConnections.currentApiClient();
+
+            if (!apiClient) {
+                console.error('[PlaybackTrickplay] No current apiclient instance');
+                return;
+            }
+
+            if (!config.TrickplayOptions) {
+                throw new Error('Unexpected null TrickplayOptions');
+            }
+
+            const options = config.TrickplayOptions;
+            options.EnableHwAcceleration = (page.querySelector('.chkEnableHwAcceleration') as HTMLInputElement).checked;
+            options.EnableHwEncoding = (page.querySelector('.chkEnableHwEncoding') as HTMLInputElement).checked;
+            options.ScanBehavior = (page.querySelector('#selectScanBehavior') as HTMLSelectElement).value as TrickplayScanBehavior;
+            options.ProcessPriority = (page.querySelector('#selectProcessPriority') as HTMLSelectElement).value as ProcessPriorityClass;
+            options.Interval = Math.max(1, parseInt((page.querySelector('#txtInterval') as HTMLInputElement).value || '10000', 10));
+            options.WidthResolutions = (page.querySelector('#txtWidthResolutions') as HTMLInputElement).value.replace(' ', '').split(',').map(Number);
+            options.TileWidth = Math.max(1, parseInt((page.querySelector('#txtTileWidth') as HTMLInputElement).value || '10', 10));
+            options.TileHeight = Math.max(1, parseInt((page.querySelector('#txtTileHeight') as HTMLInputElement).value || '10', 10));
+            options.Qscale = Math.min(31, parseInt((page.querySelector('#txtQscale') as HTMLInputElement).value || '4', 10));
+            options.JpegQuality = Math.min(100, parseInt((page.querySelector('#txtJpegQuality') as HTMLInputElement).value || '90', 10));
+            options.ProcessThreads = parseInt((page.querySelector('#txtProcessThreads') as HTMLInputElement).value || '1', 10);
+
+            apiClient.updateServerConfiguration(config).then(() => {
+                onSaveComplete();
+            }).catch(err => {
+                console.error('[PlaybackTrickplay] failed to update config', err);
+            });
+        };
+
+        const onSubmit = (e: Event) => {
+            const apiClient = ServerConnections.currentApiClient();
+
+            if (!apiClient) {
+                console.error('[PlaybackTrickplay] No current apiclient instance');
+                return;
+            }
+
+            loading.show();
+            apiClient.getServerConfiguration().then(function (config) {
+                saveConfig(config);
+            }).catch(err => {
+                console.error('[PlaybackTrickplay] failed to fetch server config', err);
+            });
+
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        };
+
+        (page.querySelector('.trickplayConfigurationForm') as HTMLFormElement).addEventListener('submit', onSubmit);
+
+        loadData();
+    }, [loadData]);
+
+    const optionScanBehavior = () => {
+        let content = '';
+        content += `<option value='NonBlocking'>${globalize.translate('NonBlockingScan')}</option>`;
+        content += `<option value='Blocking'>${globalize.translate('BlockingScan')}</option>`;
+        return content;
+    };
+
+    const optionProcessPriority = () => {
+        let content = '';
+        content += `<option value='High'>${globalize.translate('PriorityHigh')}</option>`;
+        content += `<option value='AboveNormal'>${globalize.translate('PriorityAboveNormal')}</option>`;
+        content += `<option value='Normal'>${globalize.translate('PriorityNormal')}</option>`;
+        content += `<option value='BelowNormal'>${globalize.translate('PriorityBelowNormal')}</option>`;
+        content += `<option value='Idle'>${globalize.translate('PriorityIdle')}</option>`;
+        return content;
+    };
+
+    return (
+        <Page
+            id='trickplayConfigurationPage'
+            className='mainAnimatedPage type-interior playbackConfigurationPage'
+            title={globalize.translate('Trickplay')}
+        >
+            <div ref={element} className='content-primary'>
+                <div className='verticalSection'>
+                    <SectionTitleContainer
+                        title={globalize.translate('Trickplay')}
+                        isLinkVisible={false}
+                    />
+                </div>
+
+                <form className='trickplayConfigurationForm'>
+                    <div className='checkboxContainer checkboxContainer-withDescription'>
+                        <CheckBoxElement
+                            className='chkEnableHwAcceleration'
+                            title='LabelTrickplayAccel'
+                        />
+                    </div>
+                    <div className='checkboxContainer checkboxContainer-withDescription'>
+                        <CheckBoxElement
+                            className='chkEnableHwEncoding'
+                            title='LabelTrickplayAccelEncoding'
+                        />
+                        <div className='fieldDescription checkboxFieldDescription'>
+                            <div className='fieldDescription'>
+                                {globalize.translate('LabelTrickplayAccelEncodingHelp')}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='verticalSection'>
+                        <div className='selectContainer fldSelectScanBehavior'>
+                            <SelectElement
+                                id='selectScanBehavior'
+                                label='LabelScanBehavior'
+                            >
+                                {optionScanBehavior()}
+                            </SelectElement>
+                            <div className='fieldDescription'>
+                                {globalize.translate('LabelScanBehaviorHelp')}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='verticalSection'>
+                        <div className='selectContainer fldSelectProcessPriority'>
+                            <SelectElement
+                                id='selectProcessPriority'
+                                label='LabelProcessPriority'
+                            >
+                                {optionProcessPriority()}
+                            </SelectElement>
+                            <div className='fieldDescription'>
+                                {globalize.translate('LabelProcessPriorityHelp')}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='verticalSection'>
+                        <div className='inputContainer'>
+                            <InputElement
+                                type='number'
+                                id='txtInterval'
+                                label='LabelImageInterval'
+                                options={'required inputMode="numeric" pattern="[0-9]*" min="1"'}
+                            />
+                            <div className='fieldDescription'>
+                                {globalize.translate('LabelImageIntervalHelp')}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='verticalSection'>
+                        <div className='inputContainer'>
+                            <InputElement
+                                type='text'
+                                id='txtWidthResolutions'
+                                label='LabelWidthResolutions'
+                                options={'required pattern="[0-9,]*"'}
+                            />
+                            <div className='fieldDescription'>
+                                {globalize.translate('LabelWidthResolutionsHelp')}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='verticalSection'>
+                        <div className='inputContainer'>
+                            <InputElement
+                                type='number'
+                                id='txtTileWidth'
+                                label='LabelTileWidth'
+                                options={'required inputMode="numeric" pattern="[0-9]*" min="1"'}
+                            />
+                            <div className='fieldDescription'>
+                                {globalize.translate('LabelTileWidthHelp')}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='verticalSection'>
+                        <div className='inputContainer'>
+                            <InputElement
+                                type='number'
+                                id='txtTileHeight'
+                                label='LabelTileHeight'
+                                options={'required inputMode="numeric" pattern="[0-9]*" min="1"'}
+                            />
+                            <div className='fieldDescription'>
+                                {globalize.translate('LabelTileHeightHelp')}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='verticalSection'>
+                        <div className='inputContainer'>
+                            <InputElement
+                                type='number'
+                                id='txtJpegQuality'
+                                label='LabelJpegQuality'
+                                options={'required inputMode="numeric" pattern="[0-9]*" min="1" max="100"'}
+                            />
+                            <div className='fieldDescription'>
+                                {globalize.translate('LabelJpegQualityHelp')}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='verticalSection'>
+                        <div className='inputContainer'>
+                            <InputElement
+                                type='number'
+                                id='txtQscale'
+                                label='LabelQscale'
+                                options={'required inputMode="numeric" pattern="[0-9]*" min="2" max="31"'}
+                            />
+                            <div className='fieldDescription'>
+                                {globalize.translate('LabelQscaleHelp')}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='verticalSection'>
+                        <div className='inputContainer'>
+                            <InputElement
+                                type='number'
+                                id='txtProcessThreads'
+                                label='LabelTrickplayThreads'
+                                options={'required inputMode="numeric" pattern="[0-9]*" min="0"'}
+                            />
+                            <div className='fieldDescription'>
+                                {globalize.translate('LabelTrickplayThreadsHelp')}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div>
+                        <ButtonElement
+                            type='submit'
+                            className='raised button-submit block'
+                            title='Save'
+                        />
+                    </div>
+                </form>
+            </div>
+        </Page>
+    );
+};
+
+export default PlaybackTrickplay;

src/apps/dashboard/routes/routes.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { RouteObject } from 'react-router-dom';
+import AppLayout from '../AppLayout';
+import ConnectionRequired from 'components/ConnectionRequired';
+import { ASYNC_ADMIN_ROUTES } from './_asyncRoutes';
+import { toAsyncPageRoute } from 'components/router/AsyncRoute';
+import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
+import { LEGACY_ADMIN_ROUTES } from './_legacyRoutes';
+import ServerContentPage from 'components/ServerContentPage';
+
+export const DASHBOARD_APP_PATHS = {
+    Dashboard: 'dashboard',
+    MetadataManager: 'metadata',
+    PluginConfig: 'configurationpage'
+};
+
+export const DASHBOARD_APP_ROUTES: RouteObject[] = [
+    {
+        element: <ConnectionRequired isAdminRequired />,
+        children: [
+            {
+                element: <AppLayout drawerlessPaths={[ DASHBOARD_APP_PATHS.MetadataManager ]} />,
+                children: [
+                    {
+                        path: DASHBOARD_APP_PATHS.Dashboard,
+                        children: [
+                            ...ASYNC_ADMIN_ROUTES.map(toAsyncPageRoute),
+                            ...LEGACY_ADMIN_ROUTES.map(toViewManagerPageRoute)
+                        ]
+                    },
+
+                    /* NOTE: The metadata editor might deserve a dedicated app in the future */
+                    toViewManagerPageRoute({
+                        path: DASHBOARD_APP_PATHS.MetadataManager,
+                        pageProps: {
+                            controller: 'edititemmetadata',
+                            view: 'edititemmetadata.html'
+                        }
+                    }),
+
+                    {
+                        path: DASHBOARD_APP_PATHS.PluginConfig,
+                        element: <ServerContentPage view='/web/configurationpage' />
+                    }
+                ]
+            }
+        ]
+    }
+];

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

@@ -1,25 +1,28 @@
-import type { UserDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
+import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
 import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
-import loading from '../loading/loading';
-import libraryMenu from '../../scripts/libraryMenu';
-import globalize from '../../scripts/globalize';
-import toast from '../toast/toast';
-import { appRouter } from '../appRouter';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
-import SectionTabs from '../dashboard/users/SectionTabs';
-import CheckBoxElement from '../dashboard/users/CheckBoxElement';
-import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
-import ButtonElement from '../dashboard/users/ButtonElement';
+import loading from '../../../../components/loading/loading';
+import libraryMenu from '../../../../scripts/libraryMenu';
+import globalize from '../../../../scripts/globalize';
+import toast from '../../../../components/toast/toast';
+import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
+import ButtonElement from '../../../../elements/ButtonElement';
+import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
+import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
+import CheckBoxElement from '../../../../elements/CheckBoxElement';
+import Page from '../../../../components/Page';
 
 type ItemsArr = {
     Name?: string;
     Id?: string;
     AppName?: string;
     checkedAttribute?: string
-}
+};
 
-const UserLibraryAccessPage: FunctionComponent = () => {
+const UserLibraryAccess: FunctionComponent = () => {
+    const [ searchParams ] = useSearchParams();
+    const userId = searchParams.get('userId');
     const [ userName, setUserName ] = useState('');
     const [channelsItems, setChannelsItems] = useState<ItemsArr[]>([]);
     const [mediaFoldersItems, setMediaFoldersItems] = useState<ItemsArr[]>([]);
@@ -28,8 +31,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
     const element = useRef<HTMLDivElement>(null);
 
     const triggerChange = (select: HTMLInputElement) => {
-        const evt = document.createEvent('HTMLEvents');
-        evt.initEvent('change', false, true);
+        const evt = new Event('change', { bubbles: false, cancelable: true });
         select.dispatchEvent(evt);
     };
 
@@ -37,7 +39,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
         const page = element.current;
 
         if (!page) {
-            console.error('Unexpected null reference');
+            console.error('[userlibraryaccess] Unexpected null page reference');
             return;
         }
 
@@ -64,7 +66,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
         const page = element.current;
 
         if (!page) {
-            console.error('Unexpected null reference');
+            console.error('[userlibraryaccess] Unexpected null page reference');
             return;
         }
 
@@ -97,7 +99,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
         const page = element.current;
 
         if (!page) {
-            console.error('Unexpected null reference');
+            console.error('[userlibraryaccess] Unexpected null page reference');
             return;
         }
 
@@ -109,7 +111,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
             itemsArr.push({
                 Id: device.Id,
                 Name: device.Name,
-                AppName : device.AppName,
+                AppName: device.AppName,
                 checkedAttribute: checkedAttribute
             });
         }
@@ -138,7 +140,6 @@ const UserLibraryAccessPage: FunctionComponent = () => {
 
     const loadData = useCallback(() => {
         loading.show();
-        const userId = appRouter.param('userId');
         const promise1 = userId ? window.ApiClient.getUser(userId) : Promise.resolve({ Configuration: {} });
         const promise2 = window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
             IsHidden: false
@@ -147,24 +148,32 @@ const UserLibraryAccessPage: FunctionComponent = () => {
         const promise4 = window.ApiClient.getJSON(window.ApiClient.getUrl('Devices'));
         Promise.all([promise1, promise2, promise3, promise4]).then(function (responses) {
             loadUser(responses[0], responses[1].Items, responses[2].Items, responses[3].Items);
+        }).catch(err => {
+            console.error('[userlibraryaccess] failed to load data', err);
         });
-    }, [loadUser]);
+    }, [loadUser, userId]);
 
     useEffect(() => {
         const page = element.current;
 
         if (!page) {
-            console.error('Unexpected null reference');
+            console.error('[userlibraryaccess] Unexpected null page reference');
             return;
         }
 
         loadData();
 
         const onSubmit = (e: Event) => {
+            if (!userId) {
+                console.error('[userlibraryaccess] missing user id');
+                return;
+            }
+
             loading.show();
-            const userId = appRouter.param('userId');
             window.ApiClient.getUser(userId).then(function (result) {
                 saveUser(result);
+            }).catch(err => {
+                console.error('[userlibraryaccess] failed to fetch user', err);
             });
             e.preventDefault();
             e.stopPropagation();
@@ -202,6 +211,8 @@ const UserLibraryAccessPage: FunctionComponent = () => {
             user.Policy.BlockedMediaFolders = null;
             window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
                 onSaveComplete();
+            }).catch(err => {
+                console.error('[userlibraryaccess] failed to update user policy', err);
             });
         };
 
@@ -226,117 +237,82 @@ const UserLibraryAccessPage: FunctionComponent = () => {
     }, [loadData]);
 
     return (
-        <div ref={element}>
-            <div className='content-primary'>
+        <Page
+            id='userLibraryAccessPage'
+            className='mainAnimatedPage type-interior'
+        >
+            <div ref={element} className='content-primary'>
                 <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
+                    <SectionTitleContainer
+                        title={userName}
+                        url='https://jellyfin.org/docs/general/server/users/'
+                    />
                 </div>
                 <SectionTabs activeTab='userlibraryaccess'/>
                 <form className='userLibraryAccessForm'>
-                    <div className='folderAccessContainer'>
-                        <h2>{globalize.translate('HeaderLibraryAccess')}</h2>
-                        <CheckBoxElement
-                            labelClassName='checkboxContainer'
-                            type='checkbox'
-                            className='chkEnableAllFolders'
-                            title='OptionEnableAccessToAllLibraries'
-                        />
-                        <div className='folderAccessListContainer'>
-                            <div className='folderAccess'>
-                                <h3 className='checkboxListLabel'>
-                                    {globalize.translate('HeaderLibraries')}
-                                </h3>
-                                <div className='checkboxList paperList checkboxList-paperList'>
-                                    {mediaFoldersItems.map(Item => {
-                                        return (
-                                            <CheckBoxListItem
-                                                key={Item.Id}
-                                                className='chkFolder'
-                                                Id={Item.Id}
-                                                Name={Item.Name}
-                                                checkedAttribute={Item.checkedAttribute}
-                                            />
-                                        );
-                                    })}
-                                </div>
-                            </div>
-                            <div className='fieldDescription'>
-                                {globalize.translate('LibraryAccessHelp')}
-                            </div>
-                        </div>
-                    </div>
-                    <div className='channelAccessContainer hide'>
-                        <h2>{globalize.translate('HeaderChannelAccess')}</h2>
-                        <CheckBoxElement
-                            labelClassName='checkboxContainer'
-                            type='checkbox'
-                            className='chkEnableAllChannels'
-                            title='OptionEnableAccessToAllChannels'
-                        />
-                        <div className='channelAccessListContainer'>
-                            <div className='channelAccess'>
-                                <h3 className='checkboxListLabel'>
-                                    {globalize.translate('Channels')}
-                                </h3>
-                                <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
-                                    {channelsItems.map(Item => (
-                                        <CheckBoxListItem
-                                            key={Item.Id}
-                                            className='chkChannel'
-                                            Id={Item.Id}
-                                            Name={Item.Name}
-                                            checkedAttribute={Item.checkedAttribute}
-                                        />
-                                    ))}
-                                </div>
-                            </div>
-                            <div className='fieldDescription'>
-                                {globalize.translate('ChannelAccessHelp')}
-                            </div>
-                        </div>
-                    </div>
-                    <br />
-                    <div className='deviceAccessContainer hide'>
-                        <h2>{globalize.translate('HeaderDeviceAccess')}</h2>
-                        <CheckBoxElement
-                            labelClassName='checkboxContainer'
-                            type='checkbox'
-                            className='chkEnableAllDevices'
-                            title='OptionEnableAccessFromAllDevices'
-                        />
-                        <div className='deviceAccessListContainer'>
-                            <div className='deviceAccess'>
-                                <h3 className='checkboxListLabel'>
-                                    {globalize.translate('HeaderDevices')}
-                                </h3>
-                                <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
-                                    {devicesItems.map(Item => (
-                                        <CheckBoxListItem
-                                            key={Item.Id}
-                                            className='chkDevice'
-                                            Id={Item.Id}
-                                            Name={Item.Name}
-                                            AppName={Item.AppName}
-                                            checkedAttribute={Item.checkedAttribute}
-                                        />
-                                    ))}
-                                </div>
-                            </div>
-                            <div className='fieldDescription'>
-                                {globalize.translate('DeviceAccessHelp')}
-                            </div>
-                        </div>
-                        <br />
-                    </div>
+                    <AccessContainer
+                        containerClassName='folderAccessContainer'
+                        headerTitle='HeaderLibraryAccess'
+                        checkBoxClassName='chkEnableAllFolders'
+                        checkBoxTitle='OptionEnableAccessToAllLibraries'
+                        listContainerClassName='folderAccessListContainer'
+                        accessClassName='folderAccess'
+                        listTitle='HeaderLibraries'
+                        description='LibraryAccessHelp'
+                    >
+                        {mediaFoldersItems.map(Item => (
+                            <CheckBoxElement
+                                key={Item.Id}
+                                className='chkFolder'
+                                itemId={Item.Id}
+                                itemName={Item.Name}
+                                itemCheckedAttribute={Item.checkedAttribute}
+                            />
+                        ))}
+                    </AccessContainer>
+
+                    <AccessContainer
+                        containerClassName='channelAccessContainer hide'
+                        headerTitle='HeaderChannelAccess'
+                        checkBoxClassName='chkEnableAllChannels'
+                        checkBoxTitle='OptionEnableAccessToAllChannels'
+                        listContainerClassName='channelAccessListContainer'
+                        accessClassName='channelAccess'
+                        listTitle='Channels'
+                        description='ChannelAccessHelp'
+                    >
+                        {channelsItems.map(Item => (
+                            <CheckBoxElement
+                                key={Item.Id}
+                                className='chkChannel'
+                                itemId={Item.Id}
+                                itemName={Item.Name}
+                                itemCheckedAttribute={Item.checkedAttribute}
+                            />
+                        ))}
+                    </AccessContainer>
+
+                    <AccessContainer
+                        containerClassName='deviceAccessContainer hide'
+                        headerTitle='HeaderDeviceAccess'
+                        checkBoxClassName='chkEnableAllDevices'
+                        checkBoxTitle='OptionEnableAccessFromAllDevices'
+                        listContainerClassName='deviceAccessListContainer'
+                        accessClassName='deviceAccess'
+                        listTitle='HeaderDevices'
+                        description='DeviceAccessHelp'
+                    >
+                        {devicesItems.map(Item => (
+                            <CheckBoxElement
+                                key={Item.Id}
+                                className='chkDevice'
+                                itemId={Item.Id}
+                                itemName={Item.Name}
+                                itemAppName={Item.AppName}
+                                itemCheckedAttribute={Item.checkedAttribute}
+                            />
+                        ))}
+                    </AccessContainer>
                     <br />
                     <div>
                         <ButtonElement
@@ -347,8 +323,9 @@ const UserLibraryAccessPage: FunctionComponent = () => {
                     </div>
                 </form>
             </div>
-        </div>
+        </Page>
+
     );
 };
 
-export default UserLibraryAccessPage;
+export default UserLibraryAccess;

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

@@ -1,27 +1,27 @@
 import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
 
-import Dashboard from '../../scripts/clientUtils';
-import globalize from '../../scripts/globalize';
-import loading from '../loading/loading';
-import toast from '../toast/toast';
-
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
-import InputElement from '../dashboard/users/InputElement';
-import CheckBoxElement from '../dashboard/users/CheckBoxElement';
-import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
-import ButtonElement from '../dashboard/users/ButtonElement';
+import Dashboard from '../../../../utils/dashboard';
+import globalize from '../../../../scripts/globalize';
+import loading from '../../../../components/loading/loading';
+import toast from '../../../../components/toast/toast';
+import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
+import InputElement from '../../../../elements/InputElement';
+import ButtonElement from '../../../../elements/ButtonElement';
+import AccessContainer from '../../../../components/dashboard/users/AccessContainer';
+import CheckBoxElement from '../../../../elements/CheckBoxElement';
+import Page from '../../../../components/Page';
 
 type userInput = {
     Name?: string;
     Password?: string;
-}
+};
 
 type ItemsArr = {
     Name?: string;
     Id?: string;
-}
+};
 
-const NewUserPage: FunctionComponent = () => {
+const UserNew: FunctionComponent = () => {
     const [ channelsItems, setChannelsItems ] = useState<ItemsArr[]>([]);
     const [ mediaFoldersItems, setMediaFoldersItems ] = useState<ItemsArr[]>([]);
     const element = useRef<HTMLDivElement>(null);
@@ -93,6 +93,8 @@ const NewUserPage: FunctionComponent = () => {
             loadMediaFolders(responses[0].Items);
             loadChannels(responses[1].Items);
             loading.hide();
+        }).catch(err => {
+            console.error('[usernew] failed to load data', err);
         });
     }, [loadChannels, loadMediaFolders]);
 
@@ -111,12 +113,8 @@ const NewUserPage: FunctionComponent = () => {
             userInput.Name = (page.querySelector('#txtUsername') as HTMLInputElement).value;
             userInput.Password = (page.querySelector('#txtPassword') as HTMLInputElement).value;
             window.ApiClient.createUser(userInput).then(function (user) {
-                if (!user.Id) {
-                    throw new Error('Unexpected null user.Id');
-                }
-
-                if (!user.Policy) {
-                    throw new Error('Unexpected null user.Policy');
+                if (!user.Id || !user.Policy) {
+                    throw new Error('Unexpected null user id or policy');
                 }
 
                 user.Policy.EnableAllFolders = (page.querySelector('.chkEnableAllFolders') as HTMLInputElement).checked;
@@ -142,7 +140,12 @@ const NewUserPage: FunctionComponent = () => {
                 }
 
                 window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
-                    Dashboard.navigate('useredit.html?userId=' + user.Id);
+                    Dashboard.navigate('/dashboard/users/profile?userId=' + user.Id)
+                        .catch(err => {
+                            console.error('[usernew] failed to navigate to edit user page', err);
+                        });
+                }).catch(err => {
+                    console.error('[usernew] failed to update user policy', err);
                 });
             }, function () {
                 toast(globalize.translate('ErrorDefault'));
@@ -170,26 +173,24 @@ const NewUserPage: FunctionComponent = () => {
 
         (page.querySelector('.newUserProfileForm') as HTMLFormElement).addEventListener('submit', onSubmit);
 
-        (page.querySelector('.button-cancel') as HTMLButtonElement).addEventListener('click', function() {
+        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', function() {
             window.history.back();
         });
     }, [loadUser]);
 
     return (
-        <div ref={element}>
-            <div className='content-primary'>
+        <Page
+            id='newUserPage'
+            className='mainAnimatedPage type-interior'
+        >
+            <div ref={element} className='content-primary'>
                 <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle'>
-                            {globalize.translate('ButtonAddUser')}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
+                    <SectionTitleContainer
+                        title={globalize.translate('HeaderAddUser')}
+                        url='https://jellyfin.org/docs/general/server/users/'
+                    />
                 </div>
+
                 <form className='newUserProfileForm'>
                     <div className='inputContainer'>
                         <InputElement
@@ -206,65 +207,45 @@ const NewUserPage: FunctionComponent = () => {
                             label='LabelPassword'
                         />
                     </div>
+                    <AccessContainer
+                        containerClassName='folderAccessContainer'
+                        headerTitle='HeaderLibraryAccess'
+                        checkBoxClassName='chkEnableAllFolders'
+                        checkBoxTitle='OptionEnableAccessToAllLibraries'
+                        listContainerClassName='folderAccessListContainer'
+                        accessClassName='folderAccess'
+                        listTitle='HeaderLibraries'
+                        description='LibraryAccessHelp'
+                    >
+                        {mediaFoldersItems.map(Item => (
+                            <CheckBoxElement
+                                key={Item.Id}
+                                className='chkFolder'
+                                itemId={Item.Id}
+                                itemName={Item.Name}
+                            />
+                        ))}
+                    </AccessContainer>
 
-                    <div className='folderAccessContainer'>
-                        <h2>{globalize.translate('HeaderLibraryAccess')}</h2>
-                        <CheckBoxElement
-                            type='checkbox'
-                            className='chkEnableAllFolders'
-                            title='OptionEnableAccessToAllLibraries'
-                        />
-                        <div className='folderAccessListContainer'>
-                            <div className='folderAccess'>
-                                <h3 className='checkboxListLabel'>
-                                    {globalize.translate('HeaderLibraries')}
-                                </h3>
-                                <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
-                                    {mediaFoldersItems.map(Item => (
-                                        <CheckBoxListItem
-                                            key={Item.Id}
-                                            className='chkFolder'
-                                            Id={Item.Id}
-                                            Name={Item.Name}
-                                            checkedAttribute=''
-                                        />
-                                    ))}
-                                </div>
-                            </div>
-                            <div className='fieldDescription'>
-                                {globalize.translate('LibraryAccessHelp')}
-                            </div>
-                        </div>
-                    </div>
-                    <div className='channelAccessContainer verticalSection-extrabottompadding hide'>
-                        <h2>{globalize.translate('HeaderChannelAccess')}</h2>
-                        <CheckBoxElement
-                            type='checkbox'
-                            className='chkEnableAllChannels'
-                            title='OptionEnableAccessToAllChannels'
-                        />
-                        <div className='channelAccessListContainer'>
-                            <div className='channelAccess'>
-                                <h3 className='checkboxListLabel'>
-                                    {globalize.translate('Channels')}
-                                </h3>
-                                <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
-                                    {channelsItems.map(Item => (
-                                        <CheckBoxListItem
-                                            key={Item.Id}
-                                            className='chkChannel'
-                                            Id={Item.Id}
-                                            Name={Item.Name}
-                                            checkedAttribute=''
-                                        />
-                                    ))}
-                                </div>
-                            </div>
-                            <div className='fieldDescription'>
-                                {globalize.translate('ChannelAccessHelp')}
-                            </div>
-                        </div>
-                    </div>
+                    <AccessContainer
+                        containerClassName='channelAccessContainer verticalSection-extrabottompadding hide'
+                        headerTitle='HeaderChannelAccess'
+                        checkBoxClassName='chkEnableAllChannels'
+                        checkBoxTitle='OptionEnableAccessToAllChannels'
+                        listContainerClassName='channelAccessListContainer'
+                        accessClassName='channelAccess'
+                        listTitle='Channels'
+                        description='ChannelAccessHelp'
+                    >
+                        {channelsItems.map(Item => (
+                            <CheckBoxElement
+                                key={Item.Id}
+                                className='chkChannel'
+                                itemId={Item.Id}
+                                itemName={Item.Name}
+                            />
+                        ))}
+                    </AccessContainer>
                     <div>
                         <ButtonElement
                             type='submit'
@@ -273,14 +254,16 @@ const NewUserPage: FunctionComponent = () => {
                         />
                         <ButtonElement
                             type='button'
-                            className='raised button-cancel block btnCancel'
+                            id='btnCancel'
+                            className='raised button-cancel block'
                             title='ButtonCancel'
                         />
                     </div>
                 </form>
             </div>
-        </div>
+        </Page>
+
     );
 };
 
-export default NewUserPage;
+export default UserNew;

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

@@ -0,0 +1,188 @@
+import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
+import React, { FunctionComponent, useEffect, useState, useRef } from 'react';
+
+import Dashboard from '../../../../utils/dashboard';
+import globalize from '../../../../scripts/globalize';
+import loading from '../../../../components/loading/loading';
+import dom from '../../../../scripts/dom';
+import confirm from '../../../../components/confirm/confirm';
+import UserCardBox from '../../../../components/dashboard/users/UserCardBox';
+import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
+import '../../../../elements/emby-button/emby-button';
+import '../../../../elements/emby-button/paper-icon-button-light';
+import '../../../../components/cardbuilder/card.scss';
+import '../../../../components/indicators/indicators.scss';
+import '../../../../styles/flexstyles.scss';
+import Page from '../../../../components/Page';
+
+type MenuEntry = {
+    name?: string;
+    id?: string;
+    icon?: string;
+};
+
+const UserProfiles: FunctionComponent = () => {
+    const [ users, setUsers ] = useState<UserDto[]>([]);
+
+    const element = useRef<HTMLDivElement>(null);
+
+    const loadData = () => {
+        loading.show();
+        window.ApiClient.getUsers().then(function (result) {
+            setUsers(result);
+            loading.hide();
+        }).catch(err => {
+            console.error('[userprofiles] failed to fetch users', err);
+        });
+    };
+
+    useEffect(() => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('Unexpected null reference');
+            return;
+        }
+
+        loadData();
+
+        const showUserMenu = (elem: HTMLElement) => {
+            const card = dom.parentWithClass(elem, 'card');
+            const userId = card?.getAttribute('data-userid');
+            const username = card?.getAttribute('data-username');
+
+            if (!userId) {
+                console.error('Unexpected null user id');
+                return;
+            }
+
+            const menuItems: MenuEntry[] = [];
+
+            menuItems.push({
+                name: globalize.translate('ButtonEditUser'),
+                id: 'open',
+                icon: 'mode_edit'
+            });
+            menuItems.push({
+                name: globalize.translate('ButtonLibraryAccess'),
+                id: 'access',
+                icon: 'lock'
+            });
+            menuItems.push({
+                name: globalize.translate('ButtonParentalControl'),
+                id: 'parentalcontrol',
+                icon: 'person'
+            });
+            menuItems.push({
+                name: globalize.translate('Delete'),
+                id: 'delete',
+                icon: 'delete'
+            });
+
+            import('../../../../components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
+                actionsheet.show({
+                    items: menuItems,
+                    positionTo: card,
+                    callback: function (id: string) {
+                        switch (id) {
+                            case 'open':
+                                Dashboard.navigate('/dashboard/users/profile?userId=' + userId)
+                                    .catch(err => {
+                                        console.error('[userprofiles] failed to navigate to user edit page', err);
+                                    });
+                                break;
+
+                            case 'access':
+                                Dashboard.navigate('/dashboard/users/access?userId=' + userId)
+                                    .catch(err => {
+                                        console.error('[userprofiles] failed to navigate to user library page', err);
+                                    });
+                                break;
+
+                            case 'parentalcontrol':
+                                Dashboard.navigate('/dashboard/users/parentalcontrol?userId=' + userId)
+                                    .catch(err => {
+                                        console.error('[userprofiles] failed to navigate to parental control page', err);
+                                    });
+                                break;
+
+                            case 'delete':
+                                deleteUser(userId, username);
+                        }
+                    }
+                }).catch(() => {
+                    // action sheet closed
+                });
+            }).catch(err => {
+                console.error('[userprofiles] failed to load action sheet', err);
+            });
+        };
+
+        const deleteUser = (id: string, username?: string | null) => {
+            const title = username ? globalize.translate('DeleteName', username) : globalize.translate('DeleteUser');
+            const text = globalize.translate('DeleteUserConfirmation');
+
+            confirm({
+                title,
+                text,
+                confirmText: globalize.translate('Delete'),
+                primary: 'delete'
+            }).then(function () {
+                loading.show();
+                window.ApiClient.deleteUser(id).then(function () {
+                    loadData();
+                }).catch(err => {
+                    console.error('[userprofiles] failed to delete user', err);
+                });
+            }).catch(() => {
+                // confirm dialog closed
+            });
+        };
+
+        page.addEventListener('click', function (e) {
+            const btnUserMenu = dom.parentWithClass(e.target as HTMLElement, 'btnUserMenu');
+
+            if (btnUserMenu) {
+                showUserMenu(btnUserMenu);
+            }
+        });
+
+        (page.querySelector('#btnAddUser') as HTMLButtonElement).addEventListener('click', function() {
+            Dashboard.navigate('/dashboard/users/add')
+                .catch(err => {
+                    console.error('[userprofiles] failed to navigate to new user page', err);
+                });
+        });
+    }, []);
+
+    return (
+        <Page
+            id='userProfilesPage'
+            className='mainAnimatedPage type-interior userProfilesPage fullWidthContent'
+            title={globalize.translate('HeaderUsers')}
+        >
+            <div ref={element} className='content-primary'>
+                <div className='verticalSection'>
+                    <SectionTitleContainer
+                        title={globalize.translate('HeaderUsers')}
+                        isBtnVisible={true}
+                        btnId='btnAddUser'
+                        btnClassName='fab submit sectionTitleButton'
+                        btnTitle='ButtonAddUser'
+                        btnIcon='add'
+                        url='https://jellyfin.org/docs/general/server/users/adding-managing-users'
+                    />
+                </div>
+
+                <div className='localUsers itemsContainer vertical-wrap'>
+                    {users.map(user => {
+                        return <UserCardBox key={user.Id} user={user} />;
+                    })}
+                </div>
+            </div>
+        </Page>
+
+    );
+};
+
+export default UserProfiles;

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

@@ -0,0 +1,528 @@
+import type { AccessSchedule, ParentalRating, UserDto } from '@jellyfin/sdk/lib/generated-client';
+import { DynamicDayOfWeek } from '@jellyfin/sdk/lib/generated-client/models/dynamic-day-of-week';
+import escapeHTML from 'escape-html';
+import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import globalize from '../../../../scripts/globalize';
+import LibraryMenu from '../../../../scripts/libraryMenu';
+import AccessScheduleList from '../../../../components/dashboard/users/AccessScheduleList';
+import TagList from '../../../../components/dashboard/users/TagList';
+import ButtonElement from '../../../../elements/ButtonElement';
+import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
+import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
+import loading from '../../../../components/loading/loading';
+import toast from '../../../../components/toast/toast';
+import CheckBoxElement from '../../../../elements/CheckBoxElement';
+import SelectElement from '../../../../elements/SelectElement';
+import Page from '../../../../components/Page';
+import prompt from '../../../../components/prompt/prompt';
+import ServerConnections from 'components/ServerConnections';
+
+type UnratedItem = {
+    name: string;
+    value: string;
+    checkedAttribute: string
+};
+
+function handleSaveUser(
+    page: HTMLDivElement,
+    getSchedulesFromPage: () => AccessSchedule[],
+    getAllowedTagsFromPage: () => string[],
+    getBlockedTagsFromPage: () => string[],
+    onSaveComplete: () => void
+) {
+    return (user: UserDto) => {
+        const userId = user.Id;
+        const userPolicy = user.Policy;
+        if (!userId || !userPolicy) {
+            throw new Error('Unexpected null user id or policy');
+        }
+
+        const parentalRating = parseInt((page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value, 10);
+        userPolicy.MaxParentalRating = Number.isNaN(parentalRating) ? null : parentalRating;
+        userPolicy.BlockUnratedItems = Array.prototype.filter
+            .call(page.querySelectorAll('.chkUnratedItem'), i => i.checked)
+            .map(i => i.getAttribute('data-itemtype'));
+        userPolicy.AccessSchedules = getSchedulesFromPage();
+        userPolicy.AllowedTags = getAllowedTagsFromPage();
+        userPolicy.BlockedTags = getBlockedTagsFromPage();
+        ServerConnections.getCurrentApiClientAsync()
+            .then(apiClient => apiClient.updateUserPolicy(userId, userPolicy))
+            .then(() => onSaveComplete())
+            .catch(err => {
+                console.error('[userparentalcontrol] failed to update user policy', err);
+            });
+    };
+}
+
+const UserParentalControl: FunctionComponent = () => {
+    const [ searchParams ] = useSearchParams();
+    const userId = searchParams.get('userId');
+    const [ userName, setUserName ] = useState('');
+    const [ parentalRatings, setParentalRatings ] = useState<ParentalRating[]>([]);
+    const [ unratedItems, setUnratedItems ] = useState<UnratedItem[]>([]);
+    const [ accessSchedules, setAccessSchedules ] = useState<AccessSchedule[]>([]);
+    const [ allowedTags, setAllowedTags ] = useState<string[]>([]);
+    const [ blockedTags, setBlockedTags ] = useState<string[]>([]);
+
+    const element = useRef<HTMLDivElement>(null);
+
+    const populateRatings = useCallback((allParentalRatings) => {
+        let rating;
+        const ratings: ParentalRating[] = [];
+
+        for (let i = 0, length = allParentalRatings.length; i < length; i++) {
+            rating = allParentalRatings[i];
+
+            if (ratings.length) {
+                const lastRating = ratings[ratings.length - 1];
+
+                if (lastRating.Value === rating.Value) {
+                    lastRating.Name += '/' + rating.Name;
+                    continue;
+                }
+            }
+
+            ratings.push({
+                Name: rating.Name,
+                Value: rating.Value
+            });
+        }
+
+        setParentalRatings(ratings);
+    }, []);
+
+    const loadUnratedItems = useCallback((user) => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[userparentalcontrol] Unexpected null page reference');
+            return;
+        }
+
+        const items = [{
+            name: globalize.translate('Books'),
+            value: 'Book'
+        }, {
+            name: globalize.translate('Channels'),
+            value: 'ChannelContent'
+        }, {
+            name: globalize.translate('LiveTV'),
+            value: 'LiveTvChannel'
+        }, {
+            name: globalize.translate('Movies'),
+            value: 'Movie'
+        }, {
+            name: globalize.translate('Music'),
+            value: 'Music'
+        }, {
+            name: globalize.translate('Trailers'),
+            value: 'Trailer'
+        }, {
+            name: globalize.translate('Shows'),
+            value: 'Series'
+        }];
+
+        const itemsArr: UnratedItem[] = [];
+
+        for (const item of items) {
+            const isChecked = user.Policy.BlockUnratedItems.indexOf(item.value) != -1;
+            const checkedAttribute = isChecked ? ' checked="checked"' : '';
+            itemsArr.push({
+                value: item.value,
+                name: item.name,
+                checkedAttribute: checkedAttribute
+            });
+        }
+
+        setUnratedItems(itemsArr);
+
+        const blockUnratedItems = page.querySelector('.blockUnratedItems') as HTMLDivElement;
+        blockUnratedItems.dispatchEvent(new CustomEvent('create'));
+    }, []);
+
+    const loadAllowedTags = useCallback((tags: string[]) => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[userparentalcontrol] Unexpected null page reference');
+            return;
+        }
+
+        setAllowedTags(tags);
+
+        const allowedTagsElem = page.querySelector('.allowedTags') as HTMLDivElement;
+
+        for (const btnDeleteTag of allowedTagsElem.querySelectorAll('.btnDeleteTag')) {
+            btnDeleteTag.addEventListener('click', function () {
+                const tag = btnDeleteTag.getAttribute('data-tag');
+                const newTags = tags.filter(t => t !== tag);
+                loadAllowedTags(newTags);
+            });
+        }
+    }, []);
+
+    const loadBlockedTags = useCallback((tags: string[]) => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[userparentalcontrol] Unexpected null page reference');
+            return;
+        }
+
+        setBlockedTags(tags);
+
+        const blockedTagsElem = page.querySelector('.blockedTags') as HTMLDivElement;
+
+        for (const btnDeleteTag of blockedTagsElem.querySelectorAll('.btnDeleteTag')) {
+            btnDeleteTag.addEventListener('click', function () {
+                const tag = btnDeleteTag.getAttribute('data-tag');
+                const newTags = tags.filter(t => t !== tag);
+                loadBlockedTags(newTags);
+            });
+        }
+    }, []);
+
+    const renderAccessSchedule = useCallback((schedules) => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[userparentalcontrol] Unexpected null page reference');
+            return;
+        }
+
+        setAccessSchedules(schedules);
+
+        const accessScheduleList = page.querySelector('.accessScheduleList') as HTMLDivElement;
+
+        for (const btnDelete of accessScheduleList.querySelectorAll('.btnDelete')) {
+            btnDelete.addEventListener('click', function () {
+                const index = parseInt(btnDelete.getAttribute('data-index') ?? '0', 10);
+                schedules.splice(index, 1);
+                const newindex = schedules.filter((i: number) => i != index);
+                renderAccessSchedule(newindex);
+            });
+        }
+    }, []);
+
+    const loadUser = useCallback((user: UserDto, allParentalRatings: ParentalRating[]) => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[userparentalcontrol] Unexpected null page reference');
+            return;
+        }
+
+        setUserName(user.Name || '');
+        LibraryMenu.setTitle(user.Name);
+        loadUnratedItems(user);
+
+        loadAllowedTags(user.Policy?.AllowedTags || []);
+        loadBlockedTags(user.Policy?.BlockedTags || []);
+        populateRatings(allParentalRatings);
+
+        let ratingValue = '';
+        if (user.Policy?.MaxParentalRating) {
+            allParentalRatings.forEach(rating => {
+                if (rating.Value && user.Policy?.MaxParentalRating && user.Policy.MaxParentalRating >= rating.Value) {
+                    ratingValue = `${rating.Value}`;
+                }
+            });
+        }
+
+        (page.querySelector('#selectMaxParentalRating') as HTMLSelectElement).value = ratingValue;
+
+        if (user.Policy?.IsAdministrator) {
+            (page.querySelector('.accessScheduleSection') as HTMLDivElement).classList.add('hide');
+        } else {
+            (page.querySelector('.accessScheduleSection') as HTMLDivElement).classList.remove('hide');
+        }
+        renderAccessSchedule(user.Policy?.AccessSchedules || []);
+        loading.hide();
+    }, [loadAllowedTags, loadBlockedTags, loadUnratedItems, populateRatings, renderAccessSchedule]);
+
+    const loadData = useCallback(() => {
+        if (!userId) {
+            console.error('[userparentalcontrol.loadData] missing user id');
+            return;
+        }
+
+        loading.show();
+        const promise1 = window.ApiClient.getUser(userId);
+        const promise2 = window.ApiClient.getParentalRatings();
+        Promise.all([promise1, promise2]).then(function (responses) {
+            loadUser(responses[0], responses[1]);
+        }).catch(err => {
+            console.error('[userparentalcontrol] failed to load data', err);
+        });
+    }, [loadUser, userId]);
+
+    useEffect(() => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('[userparentalcontrol] Unexpected null page reference');
+            return;
+        }
+
+        loadData();
+
+        const showSchedulePopup = (schedule: AccessSchedule, index: number) => {
+            schedule = schedule || {};
+            import('../../../../components/accessSchedule/accessSchedule').then(({ default: accessschedule }) => {
+                accessschedule.show({
+                    schedule: schedule
+                }).then(function (updatedSchedule) {
+                    const schedules = getSchedulesFromPage();
+
+                    if (index == -1) {
+                        index = schedules.length;
+                    }
+
+                    schedules[index] = updatedSchedule;
+                    renderAccessSchedule(schedules);
+                }).catch(() => {
+                    // access schedule closed
+                });
+            }).catch(err => {
+                console.error('[userparentalcontrol] failed to load access schedule', err);
+            });
+        };
+
+        const getSchedulesFromPage = () => {
+            return Array.prototype.map.call(page.querySelectorAll('.liSchedule'), function (elem) {
+                return {
+                    DayOfWeek: elem.getAttribute('data-day'),
+                    StartHour: elem.getAttribute('data-start'),
+                    EndHour: elem.getAttribute('data-end')
+                };
+            }) as AccessSchedule[];
+        };
+
+        const getAllowedTagsFromPage = () => {
+            return Array.prototype.map.call(page.querySelectorAll('.allowedTag'), function (elem) {
+                return elem.getAttribute('data-tag');
+            }) as string[];
+        };
+
+        const showAllowedTagPopup = () => {
+            prompt({
+                label: globalize.translate('LabelTag')
+            }).then(function (value) {
+                const tags = getAllowedTagsFromPage();
+
+                if (tags.indexOf(value) == -1) {
+                    tags.push(value);
+                    loadAllowedTags(tags);
+                }
+            }).catch(() => {
+                // prompt closed
+            });
+        };
+
+        const getBlockedTagsFromPage = () => {
+            return Array.prototype.map.call(page.querySelectorAll('.blockedTag'), function (elem) {
+                return elem.getAttribute('data-tag');
+            }) as string[];
+        };
+
+        const showBlockedTagPopup = () => {
+            prompt({
+                label: globalize.translate('LabelTag')
+            }).then(function (value) {
+                const tags = getBlockedTagsFromPage();
+
+                if (tags.indexOf(value) == -1) {
+                    tags.push(value);
+                    loadBlockedTags(tags);
+                }
+            }).catch(() => {
+                // prompt closed
+            });
+        };
+
+        const onSaveComplete = () => {
+            loading.hide();
+            toast(globalize.translate('SettingsSaved'));
+        };
+
+        const saveUser = handleSaveUser(page, getSchedulesFromPage, getAllowedTagsFromPage, getBlockedTagsFromPage, onSaveComplete);
+
+        const onSubmit = (e: Event) => {
+            if (!userId) {
+                console.error('[userparentalcontrol.onSubmit] missing user id');
+                return;
+            }
+
+            loading.show();
+            window.ApiClient.getUser(userId).then(function (result) {
+                saveUser(result);
+            }).catch(err => {
+                console.error('[userparentalcontrol] failed to fetch user', err);
+            });
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        };
+
+        (page.querySelector('#btnAddSchedule') as HTMLButtonElement).addEventListener('click', function () {
+            showSchedulePopup({
+                Id: 0,
+                UserId: '',
+                DayOfWeek: DynamicDayOfWeek.Sunday,
+                StartHour: 0,
+                EndHour: 0
+            }, -1);
+        });
+
+        (page.querySelector('#btnAddAllowedTag') as HTMLButtonElement).addEventListener('click', function () {
+            showAllowedTagPopup();
+        });
+
+        (page.querySelector('#btnAddBlockedTag') as HTMLButtonElement).addEventListener('click', function () {
+            showBlockedTagPopup();
+        });
+
+        (page.querySelector('.userParentalControlForm') as HTMLFormElement).addEventListener('submit', onSubmit);
+    }, [loadAllowedTags, loadBlockedTags, loadData, renderAccessSchedule]);
+
+    const optionMaxParentalRating = () => {
+        let content = '';
+        content += '<option value=\'\'></option>';
+        for (const rating of parentalRatings) {
+            content += `<option value='${rating.Value}'>${escapeHTML(rating.Name)}</option>`;
+        }
+        return content;
+    };
+
+    return (
+        <Page
+            id='userParentalControlPage'
+            className='mainAnimatedPage type-interior'
+        >
+            <div ref={element} className='content-primary'>
+                <div className='verticalSection'>
+                    <SectionTitleContainer
+                        title={userName}
+                        url='https://jellyfin.org/docs/general/server/users/'
+                    />
+                </div>
+                <SectionTabs activeTab='userparentalcontrol'/>
+                <form className='userParentalControlForm'>
+                    <div className='selectContainer'>
+                        <SelectElement
+                            id='selectMaxParentalRating'
+                            label='LabelMaxParentalRating'
+                        >
+                            {optionMaxParentalRating()}
+                        </SelectElement>
+                        <div className='fieldDescription'>
+                            {globalize.translate('MaxParentalRatingHelp')}
+                        </div>
+                    </div>
+                    <div>
+                        <div className='blockUnratedItems'>
+                            <h3 className='checkboxListLabel'>
+                                {globalize.translate('HeaderBlockItemsWithNoRating')}
+                            </h3>
+                            <div className='checkboxList paperList' style={{ padding: '.5em 1em' }}>
+                                {unratedItems.map(Item => {
+                                    return <CheckBoxElement
+                                        key={Item.value}
+                                        className='chkUnratedItem'
+                                        itemType={Item.value}
+                                        itemName={Item.name}
+                                        itemCheckedAttribute={Item.checkedAttribute}
+                                    />;
+                                })}
+                            </div>
+                        </div>
+                    </div>
+                    <br />
+                    <div className='verticalSection' style={{ marginBottom: '2em' }}>
+                        <SectionTitleContainer
+                            SectionClassName='detailSectionHeader'
+                            title={globalize.translate('LabelAllowContentWithTags')}
+                            isBtnVisible={true}
+                            btnId='btnAddAllowedTag'
+                            btnClassName='fab submit sectionTitleButton'
+                            btnTitle='Add'
+                            btnIcon='add'
+                            isLinkVisible={false}
+                        />
+                        <div className='fieldDescription'>
+                            {globalize.translate('AllowContentWithTagsHelp')}
+                        </div>
+                        <div className='allowedTags' style={{ marginTop: '.5em' }}>
+                            {allowedTags?.map(tag => {
+                                return <TagList
+                                    key={tag}
+                                    tag={tag}
+                                    tagType='allowedTag'
+                                />;
+                            })}
+                        </div>
+                    </div>
+                    <div className='verticalSection' style={{ marginBottom: '2em' }}>
+                        <SectionTitleContainer
+                            SectionClassName='detailSectionHeader'
+                            title={globalize.translate('LabelBlockContentWithTags')}
+                            isBtnVisible={true}
+                            btnId='btnAddBlockedTag'
+                            btnClassName='fab submit sectionTitleButton'
+                            btnTitle='Add'
+                            btnIcon='add'
+                            isLinkVisible={false}
+                        />
+                        <div className='fieldDescription'>
+                            {globalize.translate('BlockContentWithTagsHelp')}
+                        </div>
+                        <div className='blockedTags' style={{ marginTop: '.5em' }}>
+                            {blockedTags.map(tag => {
+                                return <TagList
+                                    key={tag}
+                                    tag={tag}
+                                    tagType='blockedTag'
+                                />;
+                            })}
+                        </div>
+                    </div>
+                    <div className='accessScheduleSection verticalSection' style={{ marginBottom: '2em' }}>
+                        <SectionTitleContainer
+                            title={globalize.translate('HeaderAccessSchedule')}
+                            isBtnVisible={true}
+                            btnId='btnAddSchedule'
+                            btnClassName='fab submit sectionTitleButton'
+                            btnTitle='Add'
+                            btnIcon='add'
+                            isLinkVisible={false}
+                        />
+                        <p>{globalize.translate('HeaderAccessScheduleHelp')}</p>
+                        <div className='accessScheduleList paperList'>
+                            {accessSchedules.map((accessSchedule, index) => {
+                                return <AccessScheduleList
+                                    key={accessSchedule.Id}
+                                    index={index}
+                                    DayOfWeek={accessSchedule.DayOfWeek}
+                                    StartHour={accessSchedule.StartHour}
+                                    EndHour={accessSchedule.EndHour}
+                                />;
+                            })}
+                        </div>
+                    </div>
+                    <div>
+                        <ButtonElement
+                            type='submit'
+                            className='raised button-submit block'
+                            title='Save'
+                        />
+                    </div>
+                </form>
+            </div>
+        </Page>
+
+    );
+};
+
+export default UserParentalControl;

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

@@ -0,0 +1,60 @@
+import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
+import UserPasswordForm from '../../../../components/dashboard/users/UserPasswordForm';
+import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
+import Page from '../../../../components/Page';
+import loading from '../../../../components/loading/loading';
+
+const UserPassword: FunctionComponent = () => {
+    const [ searchParams ] = useSearchParams();
+    const userId = searchParams.get('userId');
+    const [ userName, setUserName ] = useState('');
+
+    const loadUser = useCallback(() => {
+        if (!userId) {
+            console.error('[userpassword] missing user id');
+            return;
+        }
+
+        loading.show();
+        window.ApiClient.getUser(userId).then(function (user) {
+            if (!user.Name) {
+                throw new Error('Unexpected null user.Name');
+            }
+            setUserName(user.Name);
+            loading.hide();
+        }).catch(err => {
+            console.error('[userpassword] failed to fetch user', err);
+        });
+    }, [userId]);
+    useEffect(() => {
+        loadUser();
+    }, [loadUser]);
+
+    return (
+        <Page
+            id='userPasswordPage'
+            className='mainAnimatedPage type-interior userPasswordPage'
+        >
+            <div className='content-primary'>
+                <div className='verticalSection'>
+                    <SectionTitleContainer
+                        title={userName}
+                        url='https://jellyfin.org/docs/general/server/users/'
+                    />
+                </div>
+                <SectionTabs activeTab='userpassword'/>
+                <div className='readOnlyContent'>
+                    <UserPasswordForm
+                        userId={userId}
+                    />
+                </div>
+            </div>
+        </Page>
+
+    );
+};
+
+export default UserPassword;

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

@@ -1,32 +1,52 @@
-import type { SyncPlayUserAccessType, UserDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
+import type { SyncPlayUserAccessType, UserDto } from '@jellyfin/sdk/lib/generated-client';
+import escapeHTML from 'escape-html';
 import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
-import Dashboard from '../../scripts/clientUtils';
-import globalize from '../../scripts/globalize';
-import LibraryMenu from '../../scripts/libraryMenu';
-import { appRouter } from '../appRouter';
-import ButtonElement from '../dashboard/users/ButtonElement';
-import CheckBoxElement from '../dashboard/users/CheckBoxElement';
-import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
-import InputElement from '../dashboard/users/InputElement';
-import LinkEditUserPreferences from '../dashboard/users/LinkEditUserPreferences';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
-import SelectElement from '../dashboard/users/SelectElement';
-import SelectSyncPlayAccessElement from '../dashboard/users/SelectSyncPlayAccessElement';
-import SectionTabs from '../dashboard/users/SectionTabs';
-import loading from '../loading/loading';
-import toast from '../toast/toast';
+import { useSearchParams } from 'react-router-dom';
 
-type ItemsArr = {
+import Dashboard from '../../../../utils/dashboard';
+import globalize from '../../../../scripts/globalize';
+import LibraryMenu from '../../../../scripts/libraryMenu';
+import ButtonElement from '../../../../elements/ButtonElement';
+import CheckBoxElement from '../../../../elements/CheckBoxElement';
+import InputElement from '../../../../elements/InputElement';
+import LinkEditUserPreferences from '../../../../components/dashboard/users/LinkEditUserPreferences';
+import SectionTitleContainer from '../../../../elements/SectionTitleContainer';
+import SectionTabs from '../../../../components/dashboard/users/SectionTabs';
+import loading from '../../../../components/loading/loading';
+import toast from '../../../../components/toast/toast';
+import SelectElement from '../../../../elements/SelectElement';
+import Page from '../../../../components/Page';
+
+type ResetProvider = AuthProvider & {
+    checkedAttribute: string
+};
+
+type AuthProvider = {
     Name?: string;
     Id?: string;
-    checkedAttribute: string
+};
+
+const getCheckedElementDataIds = (elements: NodeListOf<Element>) => (
+    Array.prototype.filter.call(elements, e => e.checked)
+        .map(e => e.getAttribute('data-id'))
+);
+
+function onSaveComplete() {
+    Dashboard.navigate('/dashboard/users')
+        .catch(err => {
+            console.error('[useredit] failed to navigate to user profile', err);
+        });
+    loading.hide();
+    toast(globalize.translate('SettingsSaved'));
 }
 
-const UserEditPage: FunctionComponent = () => {
+const UserEdit: FunctionComponent = () => {
+    const [ searchParams ] = useSearchParams();
+    const userId = searchParams.get('userId');
     const [ userName, setUserName ] = useState('');
-    const [ deleteFoldersAccess, setDeleteFoldersAccess ] = useState<ItemsArr[]>([]);
-    const [ authProviders, setAuthProviders ] = useState([]);
-    const [ passwordResetProviders, setPasswordResetProviders ] = useState([]);
+    const [ deleteFoldersAccess, setDeleteFoldersAccess ] = useState<ResetProvider[]>([]);
+    const [ authProviders, setAuthProviders ] = useState<AuthProvider[]>([]);
+    const [ passwordResetProviders, setPasswordResetProviders ] = useState<ResetProvider[]>([]);
 
     const [ authenticationProviderId, setAuthenticationProviderId ] = useState('');
     const [ passwordResetProviderId, setPasswordResetProviderId ] = useState('');
@@ -34,13 +54,12 @@ const UserEditPage: FunctionComponent = () => {
     const element = useRef<HTMLDivElement>(null);
 
     const triggerChange = (select: HTMLInputElement) => {
-        const evt = document.createEvent('HTMLEvents');
-        evt.initEvent('change', false, true);
+        const evt = new Event('change', { bubbles: false, cancelable: true });
         select.dispatchEvent(evt);
     };
 
     const getUser = () => {
-        const userId = appRouter.param('userId');
+        if (!userId) throw new Error('missing user id');
         return window.ApiClient.getUser(userId);
     };
 
@@ -53,7 +72,7 @@ const UserEditPage: FunctionComponent = () => {
         }
 
         const fldSelectLoginProvider = page.querySelector('.fldSelectLoginProvider') as HTMLDivElement;
-        providers.length > 1 ? fldSelectLoginProvider.classList.remove('hide') : fldSelectLoginProvider.classList.add('hide');
+        fldSelectLoginProvider.classList.toggle('hide', providers.length <= 1);
 
         setAuthProviders(providers);
 
@@ -70,7 +89,7 @@ const UserEditPage: FunctionComponent = () => {
         }
 
         const fldSelectPasswordResetProvider = page.querySelector('.fldSelectPasswordResetProvider') as HTMLDivElement;
-        providers.length > 1 ? fldSelectPasswordResetProvider.classList.remove('hide') : fldSelectPasswordResetProvider.classList.add('hide');
+        fldSelectPasswordResetProvider.classList.toggle('hide', providers.length <= 1);
 
         setPasswordResetProviders(providers);
 
@@ -91,7 +110,7 @@ const UserEditPage: FunctionComponent = () => {
         })).then(function (channelsResult) {
             let isChecked;
             let checkedAttribute;
-            const itemsArr: ItemsArr[] = [];
+            const itemsArr: ResetProvider[] = [];
 
             for (const folder of mediaFolders) {
                 isChecked = user.Policy.EnableContentDeletion || user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id) != -1;
@@ -118,6 +137,8 @@ const UserEditPage: FunctionComponent = () => {
             const chkEnableDeleteAllFolders = page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement;
             chkEnableDeleteAllFolders.checked = user.Policy.EnableContentDeletion;
             triggerChange(chkEnableDeleteAllFolders);
+        }).catch(err => {
+            console.error('[useredit] failed to fetch channels', err);
         });
     }, []);
 
@@ -125,24 +146,30 @@ const UserEditPage: FunctionComponent = () => {
         const page = element.current;
 
         if (!page) {
-            console.error('Unexpected null reference');
+            console.error('[useredit] Unexpected null page reference');
             return;
         }
 
         window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/Providers')).then(function (providers) {
             loadAuthProviders(user, providers);
+        }).catch(err => {
+            console.error('[useredit] failed to fetch auth providers', err);
         });
         window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/PasswordResetProviders')).then(function (providers) {
             loadPasswordResetProviders(user, providers);
+        }).catch(err => {
+            console.error('[useredit] failed to fetch password reset providers', err);
         });
         window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
             IsHidden: false
         })).then(function (folders) {
             loadDeleteFolders(user, folders.Items);
+        }).catch(err => {
+            console.error('[useredit] failed to fetch media folders', err);
         });
 
         const disabledUserBanner = page.querySelector('.disabledUserBanner') as HTMLDivElement;
-        user.Policy.IsDisabled ? disabledUserBanner.classList.remove('hide') : disabledUserBanner.classList.add('hide');
+        disabledUserBanner.classList.toggle('hide', !user.Policy.IsDisabled);
 
         const txtUserName = page.querySelector('#txtUserName') as HTMLInputElement;
         txtUserName.disabled = false;
@@ -156,6 +183,8 @@ const UserEditPage: FunctionComponent = () => {
         (page.querySelector('.chkIsAdmin') as HTMLInputElement).checked = user.Policy.IsAdministrator;
         (page.querySelector('.chkDisabled') as HTMLInputElement).checked = user.Policy.IsDisabled;
         (page.querySelector('.chkIsHidden') as HTMLInputElement).checked = user.Policy.IsHidden;
+        (page.querySelector('.chkEnableCollectionManagement') as HTMLInputElement).checked = user.Policy.EnableCollectionManagement;
+        (page.querySelector('.chkEnableSubtitleManagement') as HTMLInputElement).checked = user.Policy.EnableSubtitleManagement;
         (page.querySelector('.chkRemoteControlSharedDevices') as HTMLInputElement).checked = user.Policy.EnableSharedDeviceControl;
         (page.querySelector('.chkEnableRemoteControlOtherUsers') as HTMLInputElement).checked = user.Policy.EnableRemoteControlOfOtherUsers;
         (page.querySelector('.chkEnableDownloading') as HTMLInputElement).checked = user.Policy.EnableContentDownloading;
@@ -168,11 +197,11 @@ const UserEditPage: FunctionComponent = () => {
         (page.querySelector('.chkForceRemoteSourceTranscoding') as HTMLInputElement).checked = user.Policy.ForceRemoteSourceTranscoding;
         (page.querySelector('.chkRemoteAccess') as HTMLInputElement).checked = user.Policy.EnableRemoteAccess == null || user.Policy.EnableRemoteAccess;
         (page.querySelector('#txtRemoteClientBitrateLimit') as HTMLInputElement).value = user.Policy.RemoteClientBitrateLimit > 0 ?
-            (user.Policy.RemoteClientBitrateLimit / 1e6).toLocaleString(undefined, {maximumFractionDigits: 6}) : '';
+            (user.Policy.RemoteClientBitrateLimit / 1e6).toLocaleString(undefined, { maximumFractionDigits: 6 }) : '';
         (page.querySelector('#txtLoginAttemptsBeforeLockout') as HTMLInputElement).value = user.Policy.LoginAttemptsBeforeLockout || '0';
         (page.querySelector('#txtMaxActiveSessions') as HTMLInputElement).value = user.Policy.MaxActiveSessions || '0';
         if (window.ApiClient.isMinServerVersion('10.6.0')) {
-            (page.querySelector('#selectSyncPlayAccess') as HTMLInputElement).value = user.Policy.SyncPlayAccess;
+            (page.querySelector('#selectSyncPlayAccess') as HTMLSelectElement).value = user.Policy.SyncPlayAccess;
         }
         loading.hide();
     }, [loadAuthProviders, loadPasswordResetProviders, loadDeleteFolders ]);
@@ -181,6 +210,8 @@ const UserEditPage: FunctionComponent = () => {
         loading.show();
         getUser().then(function (user) {
             loadUser(user);
+        }).catch(err => {
+            console.error('[useredit] failed to load data', err);
         });
     }, [loadUser]);
 
@@ -188,25 +219,15 @@ const UserEditPage: FunctionComponent = () => {
         const page = element.current;
 
         if (!page) {
-            console.error('Unexpected null reference');
+            console.error('[useredit] Unexpected null page reference');
             return;
         }
 
         loadData();
 
-        function onSaveComplete() {
-            Dashboard.navigate('userprofiles.html');
-            loading.hide();
-            toast(globalize.translate('SettingsSaved'));
-        }
-
         const saveUser = (user: UserDto) => {
-            if (!user.Id) {
-                throw new Error('Unexpected null user.Id');
-            }
-
-            if (!user.Policy) {
-                throw new Error('Unexpected null user.Policy');
+            if (!user.Id || !user.Policy) {
+                throw new Error('Unexpected null user id or policy');
             }
 
             user.Name = (page.querySelector('#txtUserName') as HTMLInputElement).value;
@@ -221,27 +242,26 @@ const UserEditPage: FunctionComponent = () => {
             user.Policy.EnableAudioPlaybackTranscoding = (page.querySelector('.chkEnableAudioPlaybackTranscoding') as HTMLInputElement).checked;
             user.Policy.EnableVideoPlaybackTranscoding = (page.querySelector('.chkEnableVideoPlaybackTranscoding') as HTMLInputElement).checked;
             user.Policy.EnablePlaybackRemuxing = (page.querySelector('.chkEnableVideoPlaybackRemuxing') as HTMLInputElement).checked;
+            user.Policy.EnableCollectionManagement = (page.querySelector('.chkEnableCollectionManagement') as HTMLInputElement).checked;
+            user.Policy.EnableSubtitleManagement = (page.querySelector('.chkEnableSubtitleManagement') as HTMLInputElement).checked;
             user.Policy.ForceRemoteSourceTranscoding = (page.querySelector('.chkForceRemoteSourceTranscoding') as HTMLInputElement).checked;
             user.Policy.EnableContentDownloading = (page.querySelector('.chkEnableDownloading') as HTMLInputElement).checked;
             user.Policy.EnableRemoteAccess = (page.querySelector('.chkRemoteAccess') as HTMLInputElement).checked;
             user.Policy.RemoteClientBitrateLimit = Math.floor(1e6 * parseFloat((page.querySelector('#txtRemoteClientBitrateLimit') as HTMLInputElement).value || '0'));
-            user.Policy.LoginAttemptsBeforeLockout = parseInt((page.querySelector('#txtLoginAttemptsBeforeLockout') as HTMLInputElement).value || '0');
-            user.Policy.MaxActiveSessions = parseInt((page.querySelector('#txtMaxActiveSessions') as HTMLInputElement).value || '0');
-            user.Policy.AuthenticationProviderId = (page.querySelector('.selectLoginProvider') as HTMLInputElement).value;
-            user.Policy.PasswordResetProviderId = (page.querySelector('.selectPasswordResetProvider') as HTMLInputElement).value;
+            user.Policy.LoginAttemptsBeforeLockout = parseInt((page.querySelector('#txtLoginAttemptsBeforeLockout') as HTMLInputElement).value || '0', 10);
+            user.Policy.MaxActiveSessions = parseInt((page.querySelector('#txtMaxActiveSessions') as HTMLInputElement).value || '0', 10);
+            user.Policy.AuthenticationProviderId = (page.querySelector('#selectLoginProvider') as HTMLSelectElement).value;
+            user.Policy.PasswordResetProviderId = (page.querySelector('#selectPasswordResetProvider') as HTMLSelectElement).value;
             user.Policy.EnableContentDeletion = (page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement).checked;
-            user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : Array.prototype.filter.call(page.querySelectorAll('.chkFolder'), function (c) {
-                return c.checked;
-            }).map(function (c) {
-                return c.getAttribute('data-id');
-            });
-            if (window.ApiClient.isMinServerVersion('10.6.0')) {
-                user.Policy.SyncPlayAccess = (page.querySelector('#selectSyncPlayAccess') as HTMLInputElement).value as SyncPlayUserAccessType;
-            }
-            window.ApiClient.updateUser(user).then(function () {
-                window.ApiClient.updateUserPolicy(user.Id || '', user.Policy || {}).then(function () {
-                    onSaveComplete();
-                });
+            user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : getCheckedElementDataIds(page.querySelectorAll('.chkFolder'));
+            user.Policy.SyncPlayAccess = (page.querySelector('#selectSyncPlayAccess') as HTMLSelectElement).value as SyncPlayUserAccessType;
+
+            window.ApiClient.updateUser(user).then(() => (
+                window.ApiClient.updateUserPolicy(user.Id || '', user.Policy || { PasswordResetProviderId: '', AuthenticationProviderId: '' })
+            )).then(() => {
+                onSaveComplete();
+            }).catch(err => {
+                console.error('[useredit] failed to update user', err);
             });
         };
 
@@ -249,6 +269,8 @@ const UserEditPage: FunctionComponent = () => {
             loading.show();
             getUser().then(function (result) {
                 saveUser(result);
+            }).catch(err => {
+                console.error('[useredit] failed to fetch user', err);
             });
             e.preventDefault();
             e.stopPropagation();
@@ -256,44 +278,57 @@ const UserEditPage: FunctionComponent = () => {
         };
 
         (page.querySelector('.chkEnableDeleteAllFolders') as HTMLInputElement).addEventListener('change', function (this: HTMLInputElement) {
-            if (this.checked) {
-                (page.querySelector('.deleteAccess') as HTMLDivElement).classList.add('hide');
-            } else {
-                (page.querySelector('.deleteAccess') as HTMLDivElement).classList.remove('hide');
-            }
+            (page.querySelector('.deleteAccess') as HTMLDivElement).classList.toggle('hide', this.checked);
         });
 
         window.ApiClient.getNamedConfiguration('network').then(function (config) {
-            const fldRemoteAccess = page.querySelector('.fldRemoteAccess') as HTMLDivElement;
-            config.EnableRemoteAccess ? fldRemoteAccess.classList.remove('hide') : fldRemoteAccess.classList.add('hide');
+            (page.querySelector('.fldRemoteAccess') as HTMLDivElement).classList.toggle('hide', !config.EnableRemoteAccess);
+        }).catch(err => {
+            console.error('[useredit] failed to load network config', err);
         });
 
         (page.querySelector('.editUserProfileForm') as HTMLFormElement).addEventListener('submit', onSubmit);
 
-        (page.querySelector('.button-cancel') as HTMLButtonElement).addEventListener('click', function() {
+        (page.querySelector('#btnCancel') as HTMLButtonElement).addEventListener('click', function() {
             window.history.back();
         });
     }, [loadData]);
 
+    const optionLoginProvider = authProviders.map((provider) => {
+        const selected = provider.Id === authenticationProviderId || authProviders.length < 2 ? ' selected' : '';
+        return `<option value="${provider.Id}"${selected}>${escapeHTML(provider.Name)}</option>`;
+    });
+
+    const optionPasswordResetProvider = passwordResetProviders.map((provider) => {
+        const selected = provider.Id === passwordResetProviderId || passwordResetProviders.length < 2 ? ' selected' : '';
+        return `<option value="${provider.Id}"${selected}>${escapeHTML(provider.Name)}</option>`;
+    });
+
+    const optionSyncPlayAccess = () => {
+        let content = '';
+        content += `<option value='CreateAndJoinGroups'>${globalize.translate('LabelSyncPlayAccessCreateAndJoinGroups')}</option>`;
+        content += `<option value='JoinGroups'>${globalize.translate('LabelSyncPlayAccessJoinGroups')}</option>`;
+        content += `<option value='None'>${globalize.translate('LabelSyncPlayAccessNone')}</option>`;
+        return content;
+    };
+
     return (
-        <div ref={element}>
-            <div className='content-primary'>
+        <Page
+            id='editUserPage'
+            className='mainAnimatedPage type-interior'
+        >
+            <div ref={element} className='content-primary'>
                 <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
+                    <SectionTitleContainer
+                        title={userName}
+                        url='https://jellyfin.org/docs/general/server/users/'
+                    />
                 </div>
+
                 <SectionTabs activeTab='useredit'/>
                 <div
                     className='lnkEditUserPreferencesContainer'
-                    style={{paddingBottom: '1em'}}
+                    style={{ paddingBottom: '1em' }}
                 >
                     <LinkEditUserPreferences
                         className= 'lnkEditUserPreferences button-link'
@@ -306,7 +341,7 @@ const UserEditPage: FunctionComponent = () => {
                             <div>
                                 {globalize.translate('HeaderThisUserIsCurrentlyDisabled')}
                             </div>
-                            <div style={{marginTop: 5}}>
+                            <div style={{ marginTop: 5 }}>
                                 {globalize.translate('MessageReenableUser')}
                             </div>
                         </div>
@@ -321,29 +356,29 @@ const UserEditPage: FunctionComponent = () => {
                     </div>
                     <div className='selectContainer fldSelectLoginProvider hide'>
                         <SelectElement
-                            className= 'selectLoginProvider'
-                            label= 'LabelAuthProvider'
-                            currentProviderId={authenticationProviderId}
-                            providers={authProviders}
-                        />
+                            id='selectLoginProvider'
+                            label='LabelAuthProvider'
+                        >
+                            {optionLoginProvider}
+                        </SelectElement>
+
                         <div className='fieldDescription'>
                             {globalize.translate('AuthProviderHelp')}
                         </div>
                     </div>
                     <div className='selectContainer fldSelectPasswordResetProvider hide'>
                         <SelectElement
-                            className= 'selectPasswordResetProvider'
-                            label= 'LabelPasswordResetProvider'
-                            currentProviderId={passwordResetProviderId}
-                            providers={passwordResetProviders}
-                        />
+                            id='selectPasswordResetProvider'
+                            label='LabelPasswordResetProvider'
+                        >
+                            {optionPasswordResetProvider}
+                        </SelectElement>
                         <div className='fieldDescription'>
                             {globalize.translate('PasswordResetProviderHelp')}
                         </div>
                     </div>
                     <div className='checkboxContainer checkboxContainer-withDescription fldRemoteAccess hide'>
                         <CheckBoxElement
-                            type='checkbox'
                             className='chkRemoteAccess'
                             title='AllowRemoteAccess'
                         />
@@ -353,22 +388,29 @@ const UserEditPage: FunctionComponent = () => {
                     </div>
                     <CheckBoxElement
                         labelClassName='checkboxContainer'
-                        type='checkbox'
                         className='chkIsAdmin'
                         title='OptionAllowUserToManageServer'
                     />
+                    <CheckBoxElement
+                        labelClassName='checkboxContainer'
+                        className='chkEnableCollectionManagement'
+                        title='AllowCollectionManagement'
+                    />
+                    <CheckBoxElement
+                        labelClassName='checkboxContainer'
+                        className='chkEnableSubtitleManagement'
+                        title='AllowSubtitleManagement'
+                    />
                     <div id='featureAccessFields' className='verticalSection'>
                         <h2 className='paperListLabel'>
                             {globalize.translate('HeaderFeatureAccess')}
                         </h2>
-                        <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
+                        <div className='checkboxList paperList' style={{ padding: '.5em 1em' }}>
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkEnableLiveTvAccess'
                                 title='OptionAllowBrowsingLiveTv'
                             />
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkManageLiveTv'
                                 title='OptionAllowManageLiveTv'
                             />
@@ -378,29 +420,24 @@ const UserEditPage: FunctionComponent = () => {
                         <h2 className='paperListLabel'>
                             {globalize.translate('HeaderPlayback')}
                         </h2>
-                        <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
+                        <div className='checkboxList paperList' style={{ padding: '.5em 1em' }}>
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkEnableMediaPlayback'
                                 title='OptionAllowMediaPlayback'
                             />
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkEnableAudioPlaybackTranscoding'
                                 title='OptionAllowAudioPlaybackTranscoding'
                             />
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkEnableVideoPlaybackTranscoding'
                                 title='OptionAllowVideoPlaybackTranscoding'
                             />
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkEnableVideoPlaybackRemuxing'
                                 title='OptionAllowVideoPlaybackRemuxing'
                             />
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkForceRemoteSourceTranscoding'
                                 title='OptionForceRemoteSourceTranscoding'
                             />
@@ -428,35 +465,35 @@ const UserEditPage: FunctionComponent = () => {
                     </div>
                     <div className='verticalSection'>
                         <div className='selectContainer fldSelectSyncPlayAccess'>
-                            <SelectSyncPlayAccessElement
-                                className='selectSyncPlayAccess'
+                            <SelectElement
                                 id='selectSyncPlayAccess'
                                 label='LabelSyncPlayAccess'
-                            />
+                            >
+                                {optionSyncPlayAccess()}
+                            </SelectElement>
                             <div className='fieldDescription'>
                                 {globalize.translate('SyncPlayAccessHelp')}
                             </div>
                         </div>
                     </div>
                     <div className='verticalSection'>
-                        <h2 className='checkboxListLabel' style={{marginBottom: '1em'}}>
+                        <h2 className='checkboxListLabel' style={{ marginBottom: '1em' }}>
                             {globalize.translate('HeaderAllowMediaDeletionFrom')}
                         </h2>
                         <div className='checkboxList paperList checkboxList-paperList'>
                             <CheckBoxElement
                                 labelClassName='checkboxContainer'
-                                type='checkbox'
                                 className='chkEnableDeleteAllFolders'
                                 title='AllLibraries'
                             />
                             <div className='deleteAccess'>
                                 {deleteFoldersAccess.map(Item => (
-                                    <CheckBoxListItem
+                                    <CheckBoxElement
                                         key={Item.Id}
                                         className='chkFolder'
-                                        Id={Item.Id}
-                                        Name={Item.Name}
-                                        checkedAttribute={Item.checkedAttribute}
+                                        itemId={Item.Id}
+                                        itemName={Item.Name}
+                                        itemCheckedAttribute={Item.checkedAttribute}
                                     />
                                 ))}
                             </div>
@@ -466,14 +503,12 @@ const UserEditPage: FunctionComponent = () => {
                         <h2 className='checkboxListLabel'>
                             {globalize.translate('HeaderRemoteControl')}
                         </h2>
-                        <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
+                        <div className='checkboxList paperList' style={{ padding: '.5em 1em' }}>
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkEnableRemoteControlOtherUsers'
                                 title='OptionAllowRemoteControlOthers'
                             />
                             <CheckBoxElement
-                                type='checkbox'
                                 className='chkRemoteControlSharedDevices'
                                 title='OptionAllowRemoteSharedDevices'
                             />
@@ -487,7 +522,6 @@ const UserEditPage: FunctionComponent = () => {
                     </h2>
                     <div className='checkboxContainer checkboxContainer-withDescription'>
                         <CheckBoxElement
-                            type='checkbox'
                             className='chkEnableDownloading'
                             title='OptionAllowContentDownload'
                         />
@@ -497,7 +531,6 @@ const UserEditPage: FunctionComponent = () => {
                     </div>
                     <div className='checkboxContainer checkboxContainer-withDescription' id='fldIsEnabled'>
                         <CheckBoxElement
-                            type='checkbox'
                             className='chkDisabled'
                             title='OptionDisableUser'
                         />
@@ -507,7 +540,6 @@ const UserEditPage: FunctionComponent = () => {
                     </div>
                     <div className='checkboxContainer checkboxContainer-withDescription' id='fldIsHidden'>
                         <CheckBoxElement
-                            type='checkbox'
                             className='chkIsHidden'
                             title='OptionHideUser'
                         />
@@ -558,14 +590,16 @@ const UserEditPage: FunctionComponent = () => {
                         />
                         <ButtonElement
                             type='button'
-                            className='raised button-cancel block btnCancel'
+                            id='btnCancel'
+                            className='raised button-cancel block'
                             title='ButtonCancel'
                         />
                     </div>
                 </form>
             </div>
-        </div>
+        </Page>
+
     );
 };
 
-export default UserEditPage;
+export default UserEdit;

src/apps/experimental/AppLayout.tsx

@@ -0,0 +1,80 @@
+import React, { useCallback, useState } from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import { type Theme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { Outlet, useLocation } from 'react-router-dom';
+
+import AppBody from 'components/AppBody';
+import ElevationScroll from 'components/ElevationScroll';
+import { DRAWER_WIDTH } from 'components/ResponsiveDrawer';
+import { useApi } from 'hooks/useApi';
+
+import AppToolbar from './components/AppToolbar';
+import AppDrawer, { isDrawerPath } from './components/drawers/AppDrawer';
+
+import './AppOverrides.scss';
+
+const AppLayout = () => {
+    const [ isDrawerActive, setIsDrawerActive ] = useState(false);
+    const { user } = useApi();
+    const location = useLocation();
+
+    const isMediumScreen = useMediaQuery((t: Theme) => t.breakpoints.up('md'));
+    const isDrawerAvailable = isDrawerPath(location.pathname) && Boolean(user);
+    const isDrawerOpen = isDrawerActive && isDrawerAvailable;
+
+    const onToggleDrawer = useCallback(() => {
+        setIsDrawerActive(!isDrawerActive);
+    }, [ isDrawerActive, setIsDrawerActive ]);
+
+    return (
+        <Box sx={{ position: 'relative', display: 'flex', height: '100%' }}>
+            <ElevationScroll elevate={false}>
+                <AppBar
+                    position='fixed'
+                    sx={{
+                        width: {
+                            xs: '100%',
+                            md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
+                        },
+                        ml: {
+                            xs: 0,
+                            md: isDrawerAvailable ? DRAWER_WIDTH : 0
+                        }
+                    }}
+                >
+                    <AppToolbar
+                        isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
+                        isDrawerOpen={isDrawerOpen}
+                        onDrawerButtonClick={onToggleDrawer}
+                    />
+                </AppBar>
+            </ElevationScroll>
+
+            {
+                isDrawerAvailable && (
+                    <AppDrawer
+                        open={isDrawerOpen}
+                        onClose={onToggleDrawer}
+                        onOpen={onToggleDrawer}
+                    />
+                )
+            }
+
+            <Box
+                component='main'
+                sx={{
+                    width: '100%',
+                    flexGrow: 1
+                }}
+            >
+                <AppBody>
+                    <Outlet />
+                </AppBody>
+            </Box>
+        </Box>
+    );
+};
+
+export default AppLayout;

src/apps/experimental/AppOverrides.scss

@@ -0,0 +1,51 @@
+// Default MUI breakpoints
+// https://mui.com/material-ui/customization/breakpoints/#default-breakpoints
+$mui-bp-sm: 600px;
+$mui-bp-md: 900px;
+$mui-bp-lg: 1200px;
+$mui-bp-xl: 1536px;
+
+$drawer-width: 240px;
+
+#reactRoot {
+    height: 100%;
+}
+
+// Fix main pages layout to work with drawer
+.mainAnimatedPage {
+    @media all and (min-width: $mui-bp-md) {
+        left: $drawer-width;
+    }
+}
+
+// Hide some items from the user "settings" page that are in the drawer
+#myPreferencesMenuPage {
+    .lnkQuickConnectPreferences,
+    .adminSection,
+    .userSection {
+        display: none !important;
+    }
+}
+
+// Fix the padding of some pages
+.homePage.libraryPage.withTabs, // Home page
+// Library pages excluding the item details page and tabbed pages
+.libraryPage:not(
+    .itemDetailPage,
+    .withTabs
+) {
+    padding-top: 3.25rem !important;
+}
+// Tabbed library pages
+.libraryPage.withTabs {
+    padding-top: 6.5rem !important;
+
+    @media all and (min-width: $mui-bp-lg) {
+        padding-top: 3.25rem !important;
+    }
+}
+
+// Fix backdrop position on mobile item details page
+.layout-mobile .itemBackdrop {
+    margin-top: 0 !important;
+}

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

@@ -0,0 +1,112 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import CastConnected from '@mui/icons-material/CastConnected';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Cast from '@mui/icons-material/Cast';
+import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+
+import { playbackManager } from 'components/playback/playbackmanager';
+import globalize from 'scripts/globalize';
+import Events from 'utils/events';
+
+import RemotePlayMenu, { ID } from './menus/RemotePlayMenu';
+import RemotePlayActiveMenu, { ID as ACTIVE_ID } from './menus/RemotePlayActiveMenu';
+
+const RemotePlayButton = () => {
+    const theme = useTheme();
+    const [ playerInfo, setPlayerInfo ] = useState(playbackManager.getPlayerInfo());
+
+    const updatePlayerInfo = useCallback(() => {
+        setPlayerInfo(playbackManager.getPlayerInfo());
+    }, [ setPlayerInfo ]);
+
+    useEffect(() => {
+        Events.on(playbackManager, 'playerchange', updatePlayerInfo);
+
+        return () => {
+            Events.off(playbackManager, 'playerchange', updatePlayerInfo);
+        };
+    }, [ updatePlayerInfo ]);
+
+    const [ remotePlayMenuAnchorEl, setRemotePlayMenuAnchorEl ] = useState<null | HTMLElement>(null);
+    const isRemotePlayMenuOpen = Boolean(remotePlayMenuAnchorEl);
+
+    const onRemotePlayButtonClick = useCallback((event) => {
+        setRemotePlayMenuAnchorEl(event.currentTarget);
+    }, [ setRemotePlayMenuAnchorEl ]);
+
+    const onRemotePlayMenuClose = useCallback(() => {
+        setRemotePlayMenuAnchorEl(null);
+    }, [ setRemotePlayMenuAnchorEl ]);
+
+    const [ remotePlayActiveMenuAnchorEl, setRemotePlayActiveMenuAnchorEl ] = useState<null | HTMLElement>(null);
+    const isRemotePlayActiveMenuOpen = Boolean(remotePlayActiveMenuAnchorEl);
+
+    const onRemotePlayActiveButtonClick = useCallback((event) => {
+        setRemotePlayActiveMenuAnchorEl(event.currentTarget);
+    }, [ setRemotePlayActiveMenuAnchorEl ]);
+
+    const onRemotePlayActiveMenuClose = useCallback(() => {
+        setRemotePlayActiveMenuAnchorEl(null);
+    }, [ setRemotePlayActiveMenuAnchorEl ]);
+
+    return (
+        <>
+            {(playerInfo && !playerInfo.isLocalPlayer) ? (
+                <Box
+                    sx={{
+                        alignSelf: 'center'
+                    }}
+                >
+                    <Tooltip title={globalize.translate('ButtonCast')}>
+                        <Button
+                            variant='text'
+                            size='large'
+                            startIcon={<CastConnected />}
+                            aria-label={globalize.translate('ButtonCast')}
+                            aria-controls={ACTIVE_ID}
+                            aria-haspopup='true'
+                            onClick={onRemotePlayActiveButtonClick}
+                            color='inherit'
+                            sx={{
+                                color: theme.palette.primary.main
+                            }}
+                        >
+                            {playerInfo.deviceName || playerInfo.name}
+                        </Button>
+                    </Tooltip>
+                </Box>
+            ) : (
+                <Tooltip title={globalize.translate('ButtonCast')}>
+                    <IconButton
+                        size='large'
+                        aria-label={globalize.translate('ButtonCast')}
+                        aria-controls={ID}
+                        aria-haspopup='true'
+                        onClick={onRemotePlayButtonClick}
+                        color='inherit'
+                    >
+                        <Cast />
+                    </IconButton>
+                </Tooltip>
+            )}
+
+            <RemotePlayMenu
+                open={isRemotePlayMenuOpen}
+                anchorEl={remotePlayMenuAnchorEl}
+                onMenuClose={onRemotePlayMenuClose}
+            />
+
+            <RemotePlayActiveMenu
+                open={isRemotePlayActiveMenuOpen}
+                anchorEl={remotePlayActiveMenuAnchorEl}
+                onMenuClose={onRemotePlayActiveMenuClose}
+                playerInfo={playerInfo}
+            />
+        </>
+    );
+};
+
+export default RemotePlayButton;

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

@@ -0,0 +1,61 @@
+import { SyncPlayUserAccessType } from '@jellyfin/sdk/lib/generated-client/models/sync-play-user-access-type';
+import Groups from '@mui/icons-material/Groups';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import React, { useCallback, useState } from 'react';
+
+import { pluginManager } from 'components/pluginManager';
+import { useApi } from 'hooks/useApi';
+import globalize from 'scripts/globalize';
+import { PluginType } from 'types/plugin';
+
+import AppSyncPlayMenu, { ID } from './menus/SyncPlayMenu';
+
+const SyncPlayButton = () => {
+    const { user } = useApi();
+
+    const [ syncPlayMenuAnchorEl, setSyncPlayMenuAnchorEl ] = useState<null | HTMLElement>(null);
+    const isSyncPlayMenuOpen = Boolean(syncPlayMenuAnchorEl);
+
+    const onSyncPlayButtonClick = useCallback((event) => {
+        setSyncPlayMenuAnchorEl(event.currentTarget);
+    }, [ setSyncPlayMenuAnchorEl ]);
+
+    const onSyncPlayMenuClose = useCallback(() => {
+        setSyncPlayMenuAnchorEl(null);
+    }, [ setSyncPlayMenuAnchorEl ]);
+
+    if (
+        // SyncPlay not enabled for user
+        (user?.Policy && user.Policy.SyncPlayAccess === SyncPlayUserAccessType.None)
+        // SyncPlay plugin is not loaded
+        || pluginManager.ofType(PluginType.SyncPlay).length === 0
+    ) {
+        return null;
+    }
+
+    return (
+        <>
+            <Tooltip title={globalize.translate('ButtonSyncPlay')}>
+                <IconButton
+                    size='large'
+                    aria-label={globalize.translate('ButtonSyncPlay')}
+                    aria-controls={ID}
+                    aria-haspopup='true'
+                    onClick={onSyncPlayButtonClick}
+                    color='inherit'
+                >
+                    <Groups />
+                </IconButton>
+            </Tooltip>
+
+            <AppSyncPlayMenu
+                open={isSyncPlayMenuOpen}
+                anchorEl={syncPlayMenuAnchorEl}
+                onMenuClose={onSyncPlayMenuClose}
+            />
+        </>
+    );
+};
+
+export default SyncPlayButton;

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

@@ -0,0 +1,72 @@
+import SearchIcon from '@mui/icons-material/Search';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import React, { FC } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+import AppToolbar from 'components/toolbar/AppToolbar';
+import globalize from 'scripts/globalize';
+
+import AppTabs from '../tabs/AppTabs';
+import RemotePlayButton from './RemotePlayButton';
+import SyncPlayButton from './SyncPlayButton';
+import { isTabPath } from '../tabs/tabRoutes';
+
+interface AppToolbarProps {
+    isDrawerAvailable: boolean
+    isDrawerOpen: boolean
+    onDrawerButtonClick: (event: React.MouseEvent<HTMLElement>) => void
+}
+
+const PUBLIC_PATHS = [
+    '/addserver.html',
+    '/selectserver.html',
+    '/login.html',
+    '/forgotpassword.html',
+    '/forgotpasswordpin.html'
+];
+
+const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
+    isDrawerAvailable,
+    isDrawerOpen,
+    onDrawerButtonClick
+}) => {
+    const location = useLocation();
+
+    // The video osd does not show the standard toolbar
+    if (location.pathname === '/video') return null;
+
+    const isTabsAvailable = isTabPath(location.pathname);
+    const isPublicPath = PUBLIC_PATHS.includes(location.pathname);
+
+    return (
+        <AppToolbar
+            buttons={!isPublicPath && (
+                <>
+                    <SyncPlayButton />
+                    <RemotePlayButton />
+
+                    <Tooltip title={globalize.translate('Search')}>
+                        <IconButton
+                            size='large'
+                            aria-label={globalize.translate('Search')}
+                            color='inherit'
+                            component={Link}
+                            to='/search.html'
+                        >
+                            <SearchIcon />
+                        </IconButton>
+                    </Tooltip>
+                </>
+            )}
+            isDrawerAvailable={isDrawerAvailable}
+            isDrawerOpen={isDrawerOpen}
+            onDrawerButtonClick={onDrawerButtonClick}
+            isUserMenuAvailable={!isPublicPath}
+        >
+            {isTabsAvailable && (<AppTabs isDrawerOpen={isDrawerOpen} />)}
+        </AppToolbar>
+    );
+};
+
+export default ExperimentalAppToolbar;

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

@@ -0,0 +1,157 @@
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
+import SettingsRemote from '@mui/icons-material/SettingsRemote';
+import Divider from '@mui/material/Divider';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
+import Menu, { MenuProps } from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import dialog from 'components/dialog/dialog';
+import { playbackManager } from 'components/playback/playbackmanager';
+import React, { FC, useCallback, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import { enable, isEnabled } from 'scripts/autocast';
+import globalize from 'scripts/globalize';
+
+interface RemotePlayActiveMenuProps extends MenuProps {
+    onMenuClose: () => void
+    playerInfo: {
+        name: string
+        isLocalPlayer: boolean
+        id?: string
+        deviceName?: string
+        playableMediaTypes?: string[]
+        supportedCommands?: string[]
+    } | null
+}
+
+export const ID = 'app-remote-play-active-menu';
+
+const RemotePlayActiveMenu: FC<RemotePlayActiveMenuProps> = ({
+    anchorEl,
+    open,
+    onMenuClose,
+    playerInfo
+}) => {
+    const [ isDisplayMirrorEnabled, setIsDisplayMirrorEnabled ] = useState(playbackManager.enableDisplayMirroring());
+    const isDisplayMirrorSupported = playerInfo?.supportedCommands && playerInfo.supportedCommands.indexOf('DisplayContent') !== -1;
+    const toggleDisplayMirror = useCallback(() => {
+        playbackManager.enableDisplayMirroring(!isDisplayMirrorEnabled);
+        setIsDisplayMirrorEnabled(!isDisplayMirrorEnabled);
+    }, [ isDisplayMirrorEnabled, setIsDisplayMirrorEnabled ]);
+
+    const [ isAutoCastEnabled, setIsAutoCastEnabled ] = useState(isEnabled());
+    const toggleAutoCast = useCallback(() => {
+        enable(!isAutoCastEnabled);
+        setIsAutoCastEnabled(!isAutoCastEnabled);
+    }, [ isAutoCastEnabled ]);
+
+    const remotePlayerName = playerInfo?.deviceName || playerInfo?.name;
+
+    const disconnectRemotePlayer = useCallback(() => {
+        if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
+            dialog.show({
+                buttons: [
+                    {
+                        name: globalize.translate('Yes'),
+                        id: 'yes'
+                    }, {
+                        name: globalize.translate('No'),
+                        id: 'no'
+                    }
+                ],
+                text: globalize.translate('ConfirmEndPlayerSession', remotePlayerName)
+            }).then(id => {
+                onMenuClose();
+
+                if (id === 'yes') {
+                    playbackManager.getCurrentPlayer().endSession();
+                }
+                playbackManager.setDefaultPlayerActive();
+            }).catch(() => {
+            // Dialog closed
+            });
+        } else {
+            onMenuClose();
+            playbackManager.setDefaultPlayerActive();
+        }
+    }, [ onMenuClose, remotePlayerName ]);
+
+    return (
+        <Menu
+            anchorEl={anchorEl}
+            anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'right'
+            }}
+            transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right'
+            }}
+            id={ID}
+            keepMounted
+            open={open}
+            onClose={onMenuClose}
+            MenuListProps={{
+                'aria-labelledby': 'remote-play-active-subheader',
+                subheader: (
+                    <ListSubheader component='div' id='remote-play-active-subheader'>
+                        {remotePlayerName}
+                    </ListSubheader>
+                )
+            }}
+        >
+            {isDisplayMirrorSupported && (
+                <MenuItem onClick={toggleDisplayMirror}>
+                    {isDisplayMirrorEnabled && (
+                        <ListItemIcon>
+                            <Check />
+                        </ListItemIcon>
+                    )}
+                    <ListItemText inset={!isDisplayMirrorEnabled}>
+                        {globalize.translate('EnableDisplayMirroring')}
+                    </ListItemText>
+                </MenuItem>
+            )}
+
+            <MenuItem onClick={toggleAutoCast}>
+                {isAutoCastEnabled && (
+                    <ListItemIcon>
+                        <Check />
+                    </ListItemIcon>
+                )}
+                <ListItemText inset={!isAutoCastEnabled}>
+                    {globalize.translate('EnableAutoCast')}
+                </ListItemText>
+            </MenuItem>
+
+            <Divider />
+
+            <MenuItem
+                component={Link}
+                to='/queue'
+                onClick={onMenuClose}
+            >
+                <ListItemIcon>
+                    <SettingsRemote />
+                </ListItemIcon>
+                <ListItemText>
+                    {globalize.translate('HeaderRemoteControl')}
+                </ListItemText>
+            </MenuItem>
+            <Divider />
+            <MenuItem onClick={disconnectRemotePlayer}>
+                <ListItemIcon>
+                    <Close />
+                </ListItemIcon>
+                <ListItemText>
+                    {globalize.translate('Disconnect')}
+                </ListItemText>
+            </MenuItem>
+        </Menu>
+    );
+};
+
+export default RemotePlayActiveMenu;