Merge branch 'es6' into es6-shortcuts

.ci/azure-pipelines-build.yml

@@ -0,0 +1,63 @@
+jobs:
+- job: Build
+  displayName: 'Build'
+
+  strategy:
+    matrix:
+      Development:
+        BuildConfiguration: development
+      Production:
+        BuildConfiguration: production
+      Standalone:
+        BuildConfiguration: standalone
+
+  pool:
+    vmImage: 'ubuntu-latest'
+
+  steps:
+  - task: NodeTool@0
+    displayName: 'Install Node'
+    inputs:
+      versionSpec: '12.x'
+
+  - task: Cache@2
+    displayName: 'Check Cache'
+    inputs:
+      key: 'yarn | yarn.lock'
+      path: 'node_modules'
+      cacheHitVar: CACHE_RESTORED
+
+  - script: 'yarn install --frozen-lockfile'
+    displayName: 'Install Dependencies'
+    condition: ne(variables.CACHE_RESTORED, 'true')
+
+  - script: 'yarn build:development'
+    displayName: 'Build Development'
+    condition: eq(variables['BuildConfiguration'], 'development')
+
+  - script: 'yarn build:production'
+    displayName: 'Build Production'
+    condition: eq(variables['BuildConfiguration'], 'production')
+
+  - script: 'yarn build:standalone'
+    displayName: 'Build Standalone'
+    condition: eq(variables['BuildConfiguration'], 'standalone')
+
+  - 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-lint.yml

@@ -0,0 +1,29 @@
+jobs:
+- job: Lint
+  displayName: 'Lint'
+
+  pool:
+    vmImage: 'ubuntu-latest'
+
+  steps:
+  - task: NodeTool@0
+    displayName: 'Install Node'
+    inputs:
+      versionSpec: '12.x'
+
+  - task: Cache@2
+    displayName: 'Check Cache'
+    inputs:
+      key: 'yarn | yarn.lock'
+      path: 'node_modules'
+      cacheHitVar: CACHE_RESTORED
+
+  - script: 'yarn install --frozen-lockfile'
+    displayName: 'Install Dependencies'
+    condition: ne(variables.CACHE_RESTORED, 'true')
+
+  - script: 'yarn run lint --quiet'
+    displayName: 'Run ESLint'
+
+  - script: 'yarn run stylelint'
+    displayName: 'Run Stylelint'

.ci/azure-pipelines-package.yml

@@ -0,0 +1,106 @@
+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: '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: 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'
+
+  steps:
+  - 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)
+        stable
+
+- 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)'

.ci/azure-pipelines.yml

@@ -12,88 +12,6 @@ pr:
     - '*'
 
 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: 'Check Cache'
-    inputs:
-      key: 'yarn | yarn.lock'
-      path: 'node_modules'
-      cacheHitVar: CACHE_RESTORED
-
-  - script: 'yarn install --frozen-lockfile'
-    displayName: 'Install Dependencies'
-    condition: ne(variables.CACHE_RESTORED, 'true')
-
-  - script: 'yarn build:development'
-    displayName: 'Build Development'
-    condition: eq(variables['BuildConfiguration'], 'development')
-
-  - script: 'yarn 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)'
-
-- job: Lint
-  displayName: 'Lint'
-
-  pool:
-    vmImage: 'ubuntu-latest'
-
-  steps:
-  - task: NodeTool@0
-    displayName: 'Install Node'
-    inputs:
-      versionSpec: '12.x'
-
-  - task: Cache@2
-    displayName: 'Check Cache'
-    inputs:
-      key: 'yarn | yarn.lock'
-      path: 'node_modules'
-      cacheHitVar: CACHE_RESTORED
-
-  - script: 'yarn install --frozen-lockfile'
-    displayName: 'Install Dependencies'
-    condition: ne(variables.CACHE_RESTORED, 'true')
-
-  - script: 'yarn run lint --quiet'
-    displayName: 'Run ESLint'
-
-  - script: 'yarn run stylelint'
-    displayName: 'Run Stylelint'
+- template: azure-pipelines-build.yml
+- template: azure-pipelines-lint.yml
+- template: azure-pipelines-package.yml

.eslintrc.js

@@ -132,6 +132,7 @@ module.exports = {
                     'Object.getOwnPropertyDescriptor',
                     'Object.getPrototypeOf',
                     'Object.keys',
+                    'Object.entries',
                     'Object.getOwnPropertyNames',
                     'Function.name',
                     'Function.hasInstance',

.gitignore

@@ -1,6 +1,3 @@
-# config
-config.json
-
 # npm
 dist
 web
@@ -10,5 +7,5 @@ node_modules
 .idea
 .vscode
 
-#log
+# log
 yarn-error.log

deployment/Dockerfile.centos

@@ -1,7 +1,9 @@
 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
@@ -9,19 +11,19 @@ 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 nodejs-yarn autoconf automake glibc-devel
+  && yum install -y epel-release \
+  && yum install -y @buildsys-build rpmdevtools git yum-plugins-core nodejs-yarn autoconf automake glibc-devel
 
 # Install recent NodeJS and Yarn
 RUN curl -fSsLo /etc/yum.repos.d/yarn.repo https://dl.yarnpkg.com/rpm/yarn.repo \
- && rpm -i https://rpm.nodesource.com/pub_10.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm \
- && yum install -y yarn
+  && rpm -i https://rpm.nodesource.com/pub_10.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm \
+  && yum install -y yarn
 
 # Link to build script
-RUN ln -sf ${SOURCE_DIR}/deployment/build.centos.all /build.sh
+RUN ln -sf ${SOURCE_DIR}/deployment/build.centos /build.sh
 
-VOLUME ${SOURCE_DIR}/
+VOLUME ${SOURCE_DIR}
 
-VOLUME ${ARTIFACT_DIR}/
+VOLUME ${ARTIFACT_DIR}
 
 ENTRYPOINT ["/build.sh"]

deployment/Dockerfile.debian

@@ -1,7 +1,9 @@
 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
@@ -10,16 +12,16 @@ ENV IS_DOCKER=YES
 
 # Prepare Debian build environment
 RUN apt-get update \
- && apt-get install -y debhelper mmv npm git
+  && apt-get install -y debhelper mmv npm git
 
 # Prepare Yarn
 RUN npm install -g yarn
 
 # Link to build script
-RUN ln -sf ${SOURCE_DIR}/deployment/build.debian.all /build.sh
+RUN ln -sf ${SOURCE_DIR}/deployment/build.debian /build.sh
 
-VOLUME ${SOURCE_DIR}/
+VOLUME ${SOURCE_DIR}
 
-VOLUME ${ARTIFACT_DIR}/
+VOLUME ${ARTIFACT_DIR}
 
 ENTRYPOINT ["/build.sh"]

deployment/Dockerfile.docker

@@ -0,0 +1,11 @@
+FROM node: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 python
+
+WORKDIR ${SOURCE_DIR}
+COPY . .
+
+RUN yarn install && mv dist ${ARTIFACT_DIR}

deployment/Dockerfile.fedora

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

deployment/Dockerfile.portable

@@ -1,16 +1,17 @@
 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 mmv npm git
+  && apt-get install -y mmv npm git
 
 # Prepare Yarn
 RUN npm install -g yarn
@@ -18,8 +19,8 @@ RUN npm install -g yarn
 # Link to build script
 RUN ln -sf ${SOURCE_DIR}/deployment/build.portable /build.sh
 
-VOLUME ${SOURCE_DIR}/
+VOLUME ${SOURCE_DIR}
 
-VOLUME ${ARTIFACT_DIR}/
+VOLUME ${ARTIFACT_DIR}
 
 ENTRYPOINT ["/build.sh"]

deployment/build.centos

@@ -0,0 +1,41 @@
+#!/bin/bash
+
+set -o errexit
+set -o xtrace
+
+# move to source directory
+pushd ${SOURCE_DIR}
+
+cp -a yarn.lock /tmp/yarn.lock
+
+# 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/yarn.lock yarn.lock
+
+popd

deployment/build.centos.all

@@ -1,27 +0,0 @@
-#!/bin/bash
-
-#= CentOS 7 all .rpm
-
-set -o errexit
-set -o xtrace
-
-# Move to source directory
-pushd ${SOURCE_DIR}
-
-cp -a yarn.lock /tmp/yarn.lock
-
-# Build RPM
-make -f fedora/Makefile srpm outdir=/root/rpmbuild/SRPMS
-rpmbuild --rebuild -bb /root/rpmbuild/SRPMS/jellyfin-*.src.rpm
-
-# Move the artifacts out
-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/yarn.lock yarn.lock
-
-popd

deployment/build.debian

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+set -o errexit
+set -o xtrace
+
+# move to source directory
+pushd ${SOURCE_DIR}
+
+cp -a yarn.lock /tmp/yarn.lock
+
+# 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/yarn.lock yarn.lock
+
+if [[ ${IS_DOCKER} == YES ]]; then
+    chown -Rc $(stat -c %u:%g ${ARTIFACT_DIR}) ${ARTIFACT_DIR}
+fi
+
+popd

deployment/build.debian.all

@@ -1,25 +0,0 @@
-#!/bin/bash
-
-#= Debian/Ubuntu all .deb
-
-set -o errexit
-set -o xtrace
-
-# Move to source directory
-pushd ${SOURCE_DIR}
-
-cp -a yarn.lock /tmp/yarn.lock
-
-# 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/yarn.lock yarn.lock
-
-if [[ ${IS_DOCKER} == YES ]]; then
-    chown -Rc $(stat -c %u:%g ${ARTIFACT_DIR}) ${ARTIFACT_DIR}
-fi
-
-popd

deployment/build.fedora

@@ -0,0 +1,41 @@
+#!/bin/bash
+
+set -o errexit
+set -o xtrace
+
+# move to source directory
+pushd ${SOURCE_DIR}
+
+cp -a yarn.lock /tmp/yarn.lock
+
+# 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/yarn.lock yarn.lock
+
+popd

deployment/build.fedora.all

@@ -1,27 +0,0 @@
-#!/bin/bash
-
-#= Fedora 29+ all .rpm
-
-set -o errexit
-set -o xtrace
-
-# Move to source directory
-pushd ${SOURCE_DIR}
-
-cp -a yarn.lock /tmp/yarn.lock
-
-# Build RPM
-make -f fedora/Makefile srpm outdir=/root/rpmbuild/SRPMS
-rpmbuild -rb /root/rpmbuild/SRPMS/jellyfin-*.src.rpm
-
-# Move the artifacts out
-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/yarn.lock yarn.lock
-
-popd

deployment/build.portable

@@ -1,25 +1,27 @@
 #!/bin/bash
 
-#= Portable .NET DLL .tar.gz
-
 set -o errexit
 set -o xtrace
 
-# Move to source directory
+# move to source directory
 pushd ${SOURCE_DIR}
 
-# Get version
-version="$( grep "version:" ./build.yaml | sed -E 's/version: "([0-9\.]+.*)"/\1/' )"
+# 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
+# build archives
 npx yarn install
-mv dist/ jellyfin-web_${version}
+mv dist jellyfin-web_${version}
 tar -czf jellyfin-web_${version}_portable.tar.gz jellyfin-web_${version}
-rm -rf dist/
+rm -rf dist
 
-# Move the artifacts out
-mkdir -p ${ARTIFACT_DIR}/
-mv jellyfin[-_]*.tar.gz ${ARTIFACT_DIR}/
+# 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}

fedora/jellyfin-web.spec

@@ -12,7 +12,7 @@ Source0:        jellyfin-web-%{version}.tar.gz
 %if 0%{?centos}
 BuildRequires:  yarn
 %else
-BuildRequires   nodejs-yarn
+BuildRequires:  nodejs-yarn
 %endif
 BuildArch:		noarch
 

gulpfile.js

@@ -16,6 +16,7 @@ const stream = require('webpack-stream');
 const inject = require('gulp-inject');
 const postcss = require('gulp-postcss');
 const sass = require('gulp-sass');
+const gulpif = require('gulp-if');
 const lazypipe = require('lazypipe');
 
 sass.compiler = require('node-sass');
@@ -67,7 +68,7 @@ function serve() {
         }
     });
 
-    watch(options.apploader.query, apploader());
+    watch(options.apploader.query, apploader(true));
 
     watch('src/bundle.js', webpack);
 
@@ -130,12 +131,18 @@ function javascript(query) {
         .pipe(browserSync.stream());
 }
 
-function apploader() {
-    return src(options.apploader.query, { base: './src/' })
-        .pipe(concat('scripts/apploader.js'))
-        .pipe(pipelineJavascript())
-        .pipe(dest('dist/'))
-        .pipe(browserSync.stream());
+function apploader(standalone) {
+    function task() {
+        return src(options.apploader.query, { base: './src/' })
+            .pipe(gulpif(standalone, concat('scripts/apploader.js')))
+            .pipe(pipelineJavascript())
+            .pipe(dest('dist/'))
+            .pipe(browserSync.stream());
+    }
+
+    task.displayName = 'apploader';
+
+    return task;
 }
 
 function webpack() {
@@ -183,5 +190,10 @@ function injectBundle() {
         .pipe(browserSync.stream());
 }
 
-exports.default = series(clean, parallel(javascript, apploader, webpack, css, html, images, copy), injectBundle);
-exports.serve = series(exports.default, serve);
+function build(standalone) {
+    return series(clean, parallel(javascript, apploader(standalone), webpack, css, html, images, copy));
+}
+
+exports.default = series(build(false), injectBundle);
+exports.standalone = series(build(true), injectBundle);
+exports.serve = series(exports.standalone, serve);

package.json

@@ -5,29 +5,29 @@
   "repository": "https://github.com/jellyfin/jellyfin-web",
   "license": "GPL-2.0-or-later",
   "devDependencies": {
-    "@babel/core": "^7.10.2",
+    "@babel/core": "^7.10.3",
     "@babel/plugin-proposal-class-properties": "^7.10.1",
     "@babel/plugin-proposal-private-methods": "^7.10.1",
     "@babel/plugin-transform-modules-amd": "^7.9.6",
     "@babel/polyfill": "^7.8.7",
-    "@babel/preset-env": "^7.10.2",
-    "autoprefixer": "^9.8.0",
+    "@babel/preset-env": "^7.10.3",
+    "autoprefixer": "^9.8.2",
     "babel-eslint": "^11.0.0-beta.2",
     "babel-loader": "^8.0.6",
     "browser-sync": "^2.26.7",
     "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.4.2",
+    "css-loader": "^3.6.0",
     "cssnano": "^4.1.10",
     "del": "^5.1.0",
     "eslint": "^6.8.0",
     "eslint-plugin-compat": "^3.5.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-import": "^2.21.2",
     "eslint-plugin-promise": "^4.2.1",
     "file-loader": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
-    "gulp-cli": "^2.2.1",
+    "gulp-cli": "^2.3.0",
     "gulp-concat": "^2.6.1",
     "gulp-htmlmin": "^5.0.1",
     "gulp-if": "^3.0.0",
@@ -44,41 +44,42 @@
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
     "style-loader": "^1.1.3",
-    "stylelint": "^13.5.0",
+    "stylelint": "^13.6.1",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-no-browser-hacks": "^1.2.1",
-    "stylelint-order": "^4.0.0",
+    "stylelint-order": "^4.1.0",
     "webpack": "^4.41.5",
     "webpack-merge": "^4.2.2",
     "webpack-stream": "^5.2.1"
   },
   "dependencies": {
     "alameda": "^1.4.0",
+    "blurhash": "^1.1.3",
     "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
     "core-js": "^3.6.5",
     "date-fns": "^2.14.0",
     "document-register-element": "^1.14.3",
     "epubjs": "^0.3.85",
-    "fast-text-encoding": "^1.0.1",
+    "fast-text-encoding": "^1.0.3",
     "flv.js": "^1.5.0",
     "headroom.js": "^0.11.0",
     "hls.js": "^0.13.1",
     "howler": "^2.2.0",
     "intersection-observer": "^0.10.0",
-    "jellyfin-apiclient": "^1.2.0",
+    "jellyfin-apiclient": "^1.2.2",
     "jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto",
     "jquery": "^3.5.1",
-    "jstree": "^3.3.7",
+    "jstree": "^3.3.10",
     "libass-wasm": "https://github.com/jellyfin/JavascriptSubtitlesOctopus#4.0.0-jf-smarttv",
     "material-design-icons-iconfont": "^5.0.1",
     "native-promise-only": "^0.8.0-a",
     "page": "^1.11.6",
-    "query-string": "^6.11.1",
+    "query-string": "^6.13.1",
     "resize-observer-polyfill": "^1.5.1",
     "screenfull": "^5.0.2",
-    "shaka-player": "^2.5.12",
+    "shaka-player": "^3.0.1",
     "sortablejs": "^1.10.2",
-    "swiper": "^5.4.1",
+    "swiper": "^5.4.5",
     "webcomponents.js": "^0.7.24",
     "whatwg-fetch": "^3.0.0"
   },
@@ -89,24 +90,36 @@
     "overrides": [
       {
         "test": [
+          "src/components/accessSchedule/accessSchedule.js",
           "src/components/actionSheet/actionSheet.js",
           "src/components/autoFocuser.js",
           "src/components/cardbuilder/cardBuilder.js",
+          "src/components/cardbuilder/chaptercardbuilder.js",
+          "src/components/cardbuilder/peoplecardbuilder.js",
           "src/components/images/imageLoader.js",
           "src/components/indicators/indicators.js",
           "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
+          "src/components/playback/brightnessosd.js",
           "src/components/playback/mediasession.js",
+          "src/components/playback/nowplayinghelper.js",
+          "src/components/playback/playbackorientation.js",
+          "src/components/playback/playerSelectionMenu.js",
+          "src/components/playback/playersettingsmenu.js",
+          "src/components/playback/playmethodhelper.js",
           "src/components/playback/remotecontrolautoplay.js",
+          "src/components/playback/volumeosd.js",
           "src/components/playmenu.js",
           "src/components/sanatizefilename.js",
           "src/components/scrollManager.js",
-          "src/components/syncplay/groupSelectionMenu.js",
-          "src/components/syncplay/playbackPermissionManager.js",
-          "src/components/syncplay/syncPlayManager.js",
-          "src/components/syncplay/timeSyncManager.js",
           "src/components/shortcuts.js",
+          "src/components/syncPlay/groupSelectionMenu.js",
+          "src/components/syncPlay/playbackPermissionManager.js",
+          "src/components/syncPlay/syncPlayManager.js",
+          "src/components/syncPlay/timeSyncManager.js",
+          "src/controllers/dashboard/logs.js",
+          "src/controllers/dashboard/plugins/repositories.js",
           "src/plugins/bookPlayer/plugin.js",
-          "src/plugins/bookPlayer/tableOfContent.js",
+          "src/plugins/bookPlayer/tableOfContents.js",
           "src/plugins/photoPlayer/plugin.js",
           "src/scripts/deleteHelper.js",
           "src/scripts/dfnshelper.js",
@@ -115,6 +128,9 @@
           "src/scripts/filesystem.js",
           "src/scripts/imagehelper.js",
           "src/scripts/inputManager.js",
+          "src/plugins/backdropScreensaver/plugin.js",
+          "src/components/filterdialog/filterdialog.js",
+          "src/components/fetchhelper.js",
           "src/scripts/keyboardNavigation.js",
           "src/scripts/settings/appSettings.js",
           "src/scripts/settings/userSettings.js",
@@ -148,6 +164,7 @@
     "prepare": "gulp --production",
     "build:development": "gulp --development",
     "build:production": "gulp --production",
+    "build:standalone": "gulp standalone --development",
     "lint": "eslint \".\"",
     "stylelint": "stylelint \"src/**/*.css\""
   }

src/addserver.html

@@ -1,6 +1,6 @@
 <div data-role="page" class="page standalonePage">
     <div class="padded-left padded-right padded-bottom-page">
-        <form class="addServerForm" style="margin: 0 auto;">
+        <form class="addServerForm" style="margin: 0 auto;" novalidate>
             <h1>${HeaderConnectToServer}</h1>
             <div class="inputContainer">
                 <input is="emby-input" type="url" id="txtServerHost" required="required" label="${LabelServerHost}"/>

src/assets/css/librarybrowser.css

@@ -597,6 +597,7 @@
 .detailImageContainer {
     position: relative;
     margin-top: -25vh;
+    margin-bottom: 10vh;
     float: left;
     width: 25vw;
     z-index: 3;
@@ -641,7 +642,8 @@ div.itemDetailGalleryLink.defaultCardBackground {
 }
 
 .itemDetailGalleryLink.defaultCardBackground {
-    height: 23vw; /* Dirty hack to get it to look somewhat square. Less than ideal. */
+    /* Dirty hack to get it to look somewhat square. Less than ideal. */
+    height: 23vw;
 }
 
 .itemDetailGalleryLink.defaultCardBackground > .material-icons {
@@ -797,9 +799,9 @@ div.itemDetailGalleryLink.defaultCardBackground {
 }
 
 .detailImageProgressContainer {
-    position: absolute;
     bottom: 0;
-    width: 22.786458333333332vw;
+    margin-top: -0.4vw;
+    width: 100%;
 }
 
 .detailButton-text {

src/assets/css/site.css

@@ -121,6 +121,11 @@ div[data-role=page] {
     transform: translateY(-100%);
 }
 
+.drawerContent {
+    /* make sure the bottom of the drawer is visible when music is playing */
+    padding-bottom: 4em;
+}
+
 .force-scroll {
     overflow-y: scroll;
 }

src/bundle.js

@@ -16,6 +16,12 @@ _define('fetch', function() {
     return fetch;
 });
 
+// Blurhash
+var blurhash = require('blurhash');
+_define('blurhash', function() {
+    return blurhash;
+});
+
 // query-string
 var query = require('query-string');
 _define('queryString', function() {

src/components/accessSchedule/accessSchedule.js

@@ -1,9 +1,20 @@
-define(['dialogHelper', 'datetime', 'globalize', 'emby-select', 'paper-icon-button-light', 'formDialogStyle'], function (dialogHelper, datetime, globalize) {
-    'use strict';
+/* eslint-disable indent */
+
+/**
+ * Module for controlling user parental control from.
+ * @module components/accessSchedule/accessSchedule
+ */
+
+import dialogHelper from 'dialogHelper';
+import datetime from 'datetime';
+import globalize from 'globalize';
+import 'emby-select';
+import 'paper-icon-button-light';
+import 'formDialogStyle';
 
     function getDisplayTime(hours) {
-        var minutes = 0;
-        var pct = hours % 1;
+        let minutes = 0;
+        const pct = hours % 1;
 
         if (pct) {
             minutes = parseInt(60 * pct);
@@ -13,25 +24,25 @@ define(['dialogHelper', 'datetime', 'globalize', 'emby-select', 'paper-icon-butt
     }
 
     function populateHours(context) {
-        var html = '';
+        let html = '';
 
-        for (var i = 0; i < 24; i++) {
-            html += '<option value="' + i + '">' + getDisplayTime(i) + '</option>';
+        for (let i = 0; i < 24; i++) {
+            html += `<option value="${i}">${getDisplayTime(i)}</option>`;
         }
 
-        html += '<option value="24">' + getDisplayTime(0) + '</option>';
+        html += `<option value="24">${getDisplayTime(0)}</option>`;
         context.querySelector('#selectStart').innerHTML = html;
         context.querySelector('#selectEnd').innerHTML = html;
     }
 
-    function loadSchedule(context, schedule) {
-        context.querySelector('#selectDay').value = schedule.DayOfWeek || 'Sunday';
-        context.querySelector('#selectStart').value = schedule.StartHour || 0;
-        context.querySelector('#selectEnd').value = schedule.EndHour || 0;
+    function loadSchedule(context, {DayOfWeek, StartHour, EndHour}) {
+        context.querySelector('#selectDay').value = DayOfWeek || 'Sunday';
+        context.querySelector('#selectStart').value = StartHour || 0;
+        context.querySelector('#selectEnd').value = EndHour || 0;
     }
 
     function submitSchedule(context, options) {
-        var updatedSchedule = {
+        const updatedSchedule = {
             DayOfWeek: context.querySelector('#selectDay').value,
             StartHour: context.querySelector('#selectStart').value,
             EndHour: context.querySelector('#selectEnd').value
@@ -46,44 +57,42 @@ define(['dialogHelper', 'datetime', 'globalize', 'emby-select', 'paper-icon-butt
         dialogHelper.close(context);
     }
 
-    return {
-        show: function (options) {
-            return new Promise(function (resolve, reject) {
-                var xhr = new XMLHttpRequest();
-                xhr.open('GET', 'components/accessSchedule/accessSchedule.template.html', true);
-
-                xhr.onload = function (e) {
-                    var template = this.response;
-                    var dlg = dialogHelper.createDialog({
-                        removeOnClose: true,
-                        size: 'small'
-                    });
-                    dlg.classList.add('formDialog');
-                    var html = '';
-                    html += globalize.translateDocument(template);
-                    dlg.innerHTML = html;
-                    populateHours(dlg);
-                    loadSchedule(dlg, options.schedule);
-                    dialogHelper.open(dlg);
-                    dlg.addEventListener('close', function () {
-                        if (dlg.submitted) {
-                            resolve(options.schedule);
-                        } else {
-                            reject();
-                        }
-                    });
-                    dlg.querySelector('.btnCancel').addEventListener('click', function () {
-                        dialogHelper.close(dlg);
-                    });
-                    dlg.querySelector('form').addEventListener('submit', function (event) {
-                        submitSchedule(dlg, options);
-                        event.preventDefault();
-                        return false;
-                    });
-                };
-
-                xhr.send();
+    export function show(options) {
+        return new Promise((resolve, reject) => {
+            // TODO: remove require
+            require(['text!./components/accessSchedule/accessSchedule.template.html'], template => {
+                const dlg = dialogHelper.createDialog({
+                    removeOnClose: true,
+                    size: 'small'
+                });
+                dlg.classList.add('formDialog');
+                let html = '';
+                html += globalize.translateDocument(template);
+                dlg.innerHTML = html;
+                populateHours(dlg);
+                loadSchedule(dlg, options.schedule);
+                dialogHelper.open(dlg);
+                dlg.addEventListener('close', () => {
+                    if (dlg.submitted) {
+                        resolve(options.schedule);
+                    } else {
+                        reject();
+                    }
+                });
+                dlg.querySelector('.btnCancel').addEventListener('click', () => {
+                    dialogHelper.close(dlg);
+                });
+                dlg.querySelector('form').addEventListener('submit', event => {
+                    submitSchedule(dlg, options);
+                    event.preventDefault();
+                    return false;
+                });
             });
-        }
-    };
-});
+        });
+    }
+
+/* eslint-enable indent */
+
+export default {
+    show: show
+};

src/components/cardbuilder/card.css

@@ -192,9 +192,14 @@ button::-moz-focus-inner {
 
     /* Needed in case this is a button */
     display: block;
-
-    /* Needed in case this is a button */
     margin: 0 !important;
+    border: 0 !important;
+    padding: 0 !important;
+    cursor: pointer;
+    color: inherit;
+    width: 100%;
+    font-family: inherit;
+    font-size: inherit;
 
     /* Needed in safari */
     height: 100%;
@@ -203,19 +208,12 @@ button::-moz-focus-inner {
     contain: strict;
 }
 
-.cardContent-button {
-    border: 0 !important;
-    padding: 0 !important;
-    cursor: pointer;
-    color: inherit;
-    width: 100%;
-    vertical-align: middle;
-    font-family: inherit;
-    font-size: inherit;
+.cardContent:not(.defaultCardBackground) {
+    background-color: transparent;
 }
 
-.cardContent-button:not(.defaultCardBackground) {
-    background-color: transparent;
+.cardBox:not(.visualCardBox) .cardPadder {
+    background-color: #242424;
 }
 
 .visualCardBox .cardContent {
@@ -223,7 +221,8 @@ button::-moz-focus-inner {
     border-bottom-right-radius: 0;
 }
 
-.cardContent-shadow {
+.cardContent-shadow,
+.cardBox:not(.visualCardBox) .cardPadder {
     box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }
 

src/components/cardbuilder/cardBuilder.js

@@ -368,9 +368,7 @@ import 'programStyles';
             let apiClient;
             let lastServerId;
 
-            for (let i = 0; i < items.length; i++) {
-
-                let item = items[i];
+            for (const [i, item] of items.entries()) {
                 let serverId = item.ServerId || options.serverId;
 
                 if (serverId !== lastServerId) {
@@ -503,94 +501,49 @@ import 'programStyles';
             const primaryImageAspectRatio = item.PrimaryImageAspectRatio;
             let forceName = false;
             let imgUrl = null;
+            let imgTag = null;
             let coverImage = false;
             let uiAspect = null;
+            let imgType = null;
+            let itemId = null;
 
             if (options.preferThumb && item.ImageTags && item.ImageTags.Thumb) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: 'Thumb',
-                    maxWidth: width,
-                    tag: item.ImageTags.Thumb
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.ImageTags.Thumb;
             } else if ((options.preferBanner || shape === 'banner') && item.ImageTags && item.ImageTags.Banner) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: 'Banner',
-                    maxWidth: width,
-                    tag: item.ImageTags.Banner
-                });
-
+                imgType = 'Banner';
+                imgTag = item.ImageTags.Banner;
             } else if (options.preferDisc && item.ImageTags && item.ImageTags.Disc) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: 'Disc',
-                    maxWidth: width,
-                    tag: item.ImageTags.Disc
-                });
-
+                imgType = 'Disc';
+                imgTag = item.ImageTags.Disc;
             } else if (options.preferLogo && item.ImageTags && item.ImageTags.Logo) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: 'Logo',
-                    maxWidth: width,
-                    tag: item.ImageTags.Logo
-                });
-
+                imgType = 'Logo';
+                imgTag = item.ImageTags.Logo;
             } else if (options.preferLogo && item.ParentLogoImageTag && item.ParentLogoItemId) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, {
-                    type: 'Logo',
-                    maxWidth: width,
-                    tag: item.ParentLogoImageTag
-                });
-
+                imgType = 'Logo';
+                imgTag = item.ParentLogoImageTag;
+                itemId = item.ParentLogoItemId;
             } else if (options.preferThumb && item.SeriesThumbImageTag && options.inheritThumb !== false) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
-                    type: 'Thumb',
-                    maxWidth: width,
-                    tag: item.SeriesThumbImageTag
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.SeriesThumbImageTag;
+                itemId = item.SeriesId;
             } else if (options.preferThumb && item.ParentThumbItemId && options.inheritThumb !== false && item.MediaType !== 'Photo') {
-
-                imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
-                    type: 'Thumb',
-                    maxWidth: width,
-                    tag: item.ParentThumbImageTag
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.ParentThumbImageTag;
+                itemId = item.ParentThumbItemId;
             } else if (options.preferThumb && item.BackdropImageTags && item.BackdropImageTags.length) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: 'Backdrop',
-                    maxWidth: width,
-                    tag: item.BackdropImageTags[0]
-                });
-
+                imgType = 'Backdrop';
+                imgTag = item.BackdropImageTags[0];
                 forceName = true;
-
             } else if (options.preferThumb && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length && options.inheritThumb !== false && item.Type === 'Episode') {
-
-                imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
-                    type: 'Backdrop',
-                    maxWidth: width,
-                    tag: item.ParentBackdropImageTags[0]
-                });
-
-            } else if (item.ImageTags && item.ImageTags.Primary) {
-
+                imgType = 'Backdrop';
+                imgTag = item.ParentBackdropImageTags[0];
+                itemId = item.ParentBackdropItemId;
+            } else if (item.ImageTags && item.ImageTags.Primary && (item.Type !== 'Episode' || item.ChildCount !== 0)) {
+                imgType = 'Primary';
+                imgTag = item.ImageTags.Primary;
                 height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
 
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: 'Primary',
-                    maxHeight: height,
-                    maxWidth: width,
-                    tag: item.ImageTags.Primary
-                });
-
                 if (options.preferThumb && options.showTitle !== false) {
                     forceName = true;
                 }
@@ -601,18 +554,16 @@ import 'programStyles';
                         coverImage = (Math.abs(primaryImageAspectRatio - uiAspect) / uiAspect) <= 0.2;
                     }
                 }
-
+            } else if (item.SeriesPrimaryImageTag) {
+                imgType = 'Primary';
+                imgTag = item.SeriesPrimaryImageTag;
+                itemId = item.SeriesId;
             } else if (item.PrimaryImageTag) {
-
+                imgType = 'Primary';
+                imgTag = item.PrimaryImageTag;
+                itemId = item.PrimaryImageItemId;
                 height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
 
-                imgUrl = apiClient.getScaledImageUrl(item.PrimaryImageItemId || item.Id || item.ItemId, {
-                    type: 'Primary',
-                    maxHeight: height,
-                    maxWidth: width,
-                    tag: item.PrimaryImageTag
-                });
-
                 if (options.preferThumb && options.showTitle !== false) {
                     forceName = true;
                 }
@@ -624,30 +575,15 @@ import 'programStyles';
                     }
                 }
             } else if (item.ParentPrimaryImageTag) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
-                    type: 'Primary',
-                    maxWidth: width,
-                    tag: item.ParentPrimaryImageTag
-                });
-            } else if (item.SeriesPrimaryImageTag) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
-                    type: 'Primary',
-                    maxWidth: width,
-                    tag: item.SeriesPrimaryImageTag
-                });
+                imgType = 'Primary';
+                imgTag = item.ParentPrimaryImageTag;
+                itemId = item.ParentPrimaryImageItemId;
             } else if (item.AlbumId && item.AlbumPrimaryImageTag) {
-
+                imgType = 'Primary';
+                imgTag = item.AlbumPrimaryImageTag;
+                itemId = item.AlbumId;
                 height = width && primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
 
-                imgUrl = apiClient.getScaledImageUrl(item.AlbumId, {
-                    type: 'Primary',
-                    maxHeight: height,
-                    maxWidth: width,
-                    tag: item.AlbumPrimaryImageTag
-                });
-
                 if (primaryImageAspectRatio) {
                     uiAspect = getDesiredAspect(shape);
                     if (uiAspect) {
@@ -655,57 +591,46 @@ import 'programStyles';
                     }
                 }
             } else if (item.Type === 'Season' && item.ImageTags && item.ImageTags.Thumb) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: 'Thumb',
-                    maxWidth: width,
-                    tag: item.ImageTags.Thumb
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.ImageTags.Thumb;
             } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: 'Backdrop',
-                    maxWidth: width,
-                    tag: item.BackdropImageTags[0]
-                });
-
+                imgType = 'Backdrop';
+                imgTag = item.BackdropImageTags[0];
             } else if (item.ImageTags && item.ImageTags.Thumb) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.Id, {
-                    type: 'Thumb',
-                    maxWidth: width,
-                    tag: item.ImageTags.Thumb
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.ImageTags.Thumb;
             } else if (item.SeriesThumbImageTag && options.inheritThumb !== false) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.SeriesId, {
-                    type: 'Thumb',
-                    maxWidth: width,
-                    tag: item.SeriesThumbImageTag
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.SeriesThumbImageTag;
+                itemId = item.SeriesId;
             } else if (item.ParentThumbItemId && options.inheritThumb !== false) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.ParentThumbItemId, {
-                    type: 'Thumb',
-                    maxWidth: width,
-                    tag: item.ParentThumbImageTag
-                });
-
+                imgType = 'Thumb';
+                imgTag = item.ParentThumbImageTag;
+                itemId = item.ParentThumbItemId;
             } else if (item.ParentBackdropImageTags && item.ParentBackdropImageTags.length && options.inheritThumb !== false) {
-
-                imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, {
-                    type: 'Backdrop',
-                    maxWidth: width,
-                    tag: item.ParentBackdropImageTags[0]
-                });
-
+                imgType = 'Backdrop';
+                imgTag = item.ParentBackdropImageTags[0];
+                itemId = item.ParentBackdropItemId;
             }
 
+            if (!itemId) {
+                itemId = item.Id;
+            }
+
+            if (imgTag && imgType) {
+                imgUrl = apiClient.getScaledImageUrl(itemId, {
+                    type: imgType,
+                    maxHeight: height,
+                    maxWidth: width,
+                    tag: imgTag
+                });
+            }
+
+            let blurHashes = options.imageBlurhashes || item.ImageBlurHashes || {};
+
             return {
                 imgUrl: imgUrl,
+                blurhash: (blurHashes[imgType] || {})[imgTag],
                 forceName: forceName,
                 coverImage: coverImage
             };
@@ -1321,6 +1246,7 @@ import 'programStyles';
 
             const imgInfo = getCardImageUrl(item, apiClient, options, shape);
             const imgUrl = imgInfo.imgUrl;
+            const blurhash = imgInfo.blurhash;
 
             const forceName = imgInfo.forceName;
 
@@ -1441,26 +1367,27 @@ import 'programStyles';
             let cardScalableClose = '';
 
             let cardContentClass = 'cardContent';
-            if (!options.cardLayout) {
-                cardContentClass += ' cardContent-shadow';
+
+            let blurhashAttrib = '';
+            if (blurhash && blurhash.length > 0) {
+                blurhashAttrib = 'data-blurhash="' + blurhash + '"';
             }
 
             if (layoutManager.tv) {
-
                 // Don't use the IMG tag with safari because it puts a white border around it
-                cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' ' + cardContentClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + ' ' + cardContentClass + '">');
+                cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' ' + cardContentClass + ' lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + '>') : ('<div class="' + cardImageContainerClass + ' ' + cardContentClass + '">');
 
                 cardImageContainerClose = '</div>';
             } else {
                 // Don't use the IMG tag with safari because it puts a white border around it
-                cardImageContainerOpen = imgUrl ? ('<button data-action="' + action + '" class="cardContent-button ' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '">') : ('<button data-action="' + action + '" class="cardContent-button ' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction">');
+                cardImageContainerOpen = imgUrl ? ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + '>') : ('<button data-action="' + action + '" class="' + cardImageContainerClass + ' ' + cardContentClass + ' itemAction">');
 
                 cardImageContainerClose = '</button>';
             }
 
             let cardScalableClass = 'cardScalable';
 
-            cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
+            cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
             cardBoxClose = '</div>';
             cardScalableClose = '</div>';
 

src/components/cardbuilder/chaptercardbuilder.js

@@ -1,13 +1,23 @@
-define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browser'], function (datetime, imageLoader, connectionManager, layoutManager, browser) {
-    'use strict';
+/* eslint-disable indent */
 
-    var enableFocusTransform = !browser.slow && !browser.edge;
+/**
+ * Module for building cards from item data.
+ * @module components/cardBuilder/chaptercardbuilder
+ */
 
-    function buildChapterCardsHtml(item, chapters, options) {
+import datetime from 'datetime';
+import imageLoader from 'imageLoader';
+import connectionManager from 'connectionManager';
+import layoutManager from 'layoutManager';
+import browser from 'browser';
+
+    const enableFocusTransform = !browser.slow && !browser.edge;
+
+     function buildChapterCardsHtml(item, chapters, options) {
 
         // TODO move card creation code to Card component
 
-        var className = 'card itemAction chapterCard';
+        let className = 'card itemAction chapterCard';
 
         if (layoutManager.tv) {
             className += ' show-focus';
@@ -17,12 +27,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
             }
         }
 
-        var mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
-        var videoStream = mediaStreams.filter(function (i) {
-            return i.Type === 'Video';
+        const mediaStreams = ((item.MediaSources || [])[0] || {}).MediaStreams || [];
+        const videoStream = mediaStreams.filter(({Type}) => {
+            return Type === 'Video';
         })[0] || {};
 
-        var shape = (options.backdropShape || 'backdrop');
+        let shape = (options.backdropShape || 'backdrop');
 
         if (videoStream.Width && videoStream.Height) {
 
@@ -31,24 +41,24 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
             }
         }
 
-        className += ' ' + shape + 'Card';
+        className += ` ${shape}Card`;
 
         if (options.block || options.rows) {
             className += ' block';
         }
 
-        var html = '';
-        var itemsInRow = 0;
+        let html = '';
+        let itemsInRow = 0;
 
-        var apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = connectionManager.getApiClient(item.ServerId);
 
-        for (var i = 0, length = chapters.length; i < length; i++) {
+        for (let i = 0, length = chapters.length; i < length; i++) {
 
             if (options.rows && itemsInRow === 0) {
                 html += '<div class="cardColumn">';
             }
 
-            var chapter = chapters[i];
+            const chapter = chapters[i];
 
             html += buildChapterCard(item, apiClient, chapter, i, options, className, shape);
             itemsInRow++;
@@ -62,50 +72,50 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
         return html;
     }
 
-    function getImgUrl(item, chapter, index, maxWidth, apiClient) {
+    function getImgUrl({Id}, {ImageTag}, index, maxWidth, apiClient) {
 
-        if (chapter.ImageTag) {
+        if (ImageTag) {
 
-            return apiClient.getScaledImageUrl(item.Id, {
+            return apiClient.getScaledImageUrl(Id, {
 
                 maxWidth: maxWidth * 2,
-                tag: chapter.ImageTag,
+                tag: ImageTag,
                 type: 'Chapter',
-                index: index
+                index
             });
         }
 
         return null;
     }
 
-    function buildChapterCard(item, apiClient, chapter, index, options, className, shape) {
+    function buildChapterCard(item, apiClient, chapter, index, {width, coverImage}, className, shape) {
 
-        var imgUrl = getImgUrl(item, chapter, index, options.width || 400, apiClient);
+        const imgUrl = getImgUrl(item, chapter, index, width || 400, apiClient);
 
-        var cardImageContainerClass = 'cardContent cardContent-shadow cardImageContainer chapterCardImageContainer';
-        if (options.coverImage) {
+        let cardImageContainerClass = 'cardContent cardContent-shadow cardImageContainer chapterCardImageContainer';
+        if (coverImage) {
             cardImageContainerClass += ' coveredImage';
         }
-        var dataAttributes = ' data-action="play" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '" data-positionticks="' + chapter.StartPositionTicks + '"';
-        var cardImageContainer = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
+        const dataAttributes = ` data-action="play" data-isfolder="${item.IsFolder}" data-id="${item.Id}" data-serverid="${item.ServerId}" data-type="${item.Type}" data-mediatype="${item.MediaType}" data-positionticks="${chapter.StartPositionTicks}"`;
+        let cardImageContainer = imgUrl ? (`<div class="${cardImageContainerClass} lazy" data-src="${imgUrl}">`) : (`<div class="${cardImageContainerClass}">`);
 
         if (!imgUrl) {
             cardImageContainer += '<span class="material-icons cardImageIcon local_movies"></span>';
         }
 
-        var nameHtml = '';
-        nameHtml += '<div class="cardText">' + chapter.Name + '</div>';
-        nameHtml += '<div class="cardText">' + datetime.getDisplayRunningTime(chapter.StartPositionTicks) + '</div>';
+        let nameHtml = '';
+        nameHtml += `<div class="cardText">${chapter.Name}</div>`;
+        nameHtml += `<div class="cardText">${datetime.getDisplayRunningTime(chapter.StartPositionTicks)}</div>`;
 
-        var cardBoxCssClass = 'cardBox';
-        var cardScalableClass = 'cardScalable';
+        const cardBoxCssClass = 'cardBox';
+        const cardScalableClass = 'cardScalable';
 
-        var html = '<button type="button" class="' + className + '"' + dataAttributes + '><div class="' + cardBoxCssClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder-' + shape + '"></div>' + cardImageContainer + '</div><div class="innerCardFooter">' + nameHtml + '</div></div></div></button>';
+        const html = `<button type="button" class="${className}"${dataAttributes}><div class="${cardBoxCssClass}"><div class="${cardScalableClass}"><div class="cardPadder-${shape}"></div>${cardImageContainer}</div><div class="innerCardFooter">${nameHtml}</div></div></div></button>`;
 
         return html;
     }
 
-    function buildChapterCards(item, chapters, options) {
+    export function buildChapterCards(item, chapters, options) {
 
         if (options.parentContainer) {
             // Abort if the container has been disposed
@@ -121,15 +131,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'layoutManager', 'browse
             }
         }
 
-        var html = buildChapterCardsHtml(item, chapters, options);
+        const html = buildChapterCardsHtml(item, chapters, options);
 
         options.itemsContainer.innerHTML = html;
 
         imageLoader.lazyChildren(options.itemsContainer);
     }
 
-    return {
-        buildChapterCards: buildChapterCards
-    };
+/* eslint-enable indent */
+
+export default {
+    buildChapterCards: buildChapterCards
+};
 
-});

src/components/cardbuilder/peoplecardbuilder.js

@@ -1,7 +1,13 @@
-define(['cardBuilder'], function (cardBuilder) {
-    'use strict';
+/* eslint-disable indent */
 
-    function buildPeopleCards(items, options) {
+/**
+ * Module for building cards from item data.
+ * @module components/cardBuilder/peoplecardbuilder
+ */
+
+import cardBuilder from 'cardBuilder';
+
+    export function buildPeopleCards(items, options) {
 
         options = Object.assign(options || {}, {
             cardLayout: false,
@@ -15,8 +21,8 @@ define(['cardBuilder'], function (cardBuilder) {
         cardBuilder.buildCards(items, options);
     }
 
-    return {
-        buildPeopleCards: buildPeopleCards
-    };
+ /* eslint-enable indent */
 
-});
+export default {
+    buildPeopleCards: buildPeopleCards
+};

src/components/dialog/dialog.template.html

@@ -4,12 +4,8 @@
 
 <div class="formDialogContent smoothScrollY">
     <div class="dialogContentInner dialog-content-centered" style="padding-top:1em;padding-bottom: 1em; text-align: center;">
-
-        <div class="text">
-
-        </div>
+        <div class="text"></div>
     </div>
 </div>
 
-<div class="formDialogFooter formDialogFooter-clear formDialogFooter-flex" style="padding-bottom: 1.5em;">
-</div>
+<div class="formDialogFooter formDialogFooter-clear formDialogFooter-flex" style="margin:1em"></div>

src/components/displaySettings/displaySettings.js

@@ -181,6 +181,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
         context.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs();
         context.querySelector('#chkThemeVideo').checked = userSettings.enableThemeVideos();
         context.querySelector('#chkFadein').checked = userSettings.enableFastFadein();
+        context.querySelector('#chkBlurhash').checked = userSettings.enableBlurhash();
         context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops();
         context.querySelector('#chkDetailsBanner').checked = userSettings.detailsBanner();
 
@@ -223,6 +224,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
         userSettingsInstance.skin(context.querySelector('.selectSkin').value);
 
         userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked);
+        userSettingsInstance.enableBlurhash(context.querySelector('#chkBlurhash').checked);
         userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked);
         userSettingsInstance.detailsBanner(context.querySelector('#chkDetailsBanner').checked);
 

src/components/displaySettings/displaySettings.template.html

@@ -143,20 +143,28 @@
         <select is="emby-select" class="selectSoundEffects" label="${LabelSoundEffects}"></select>
     </div>
 
-    <div class="inputContainer inputContainer-withDescription fldFadein">
+    <div class="inputContainer inputContainer-withDescription">
         <input is="emby-input" type="number" id="txtLibraryPageSize" pattern="[0-9]*" required="required" min="0" max="1000" step="1" label="${LabelLibraryPageSize}" />
         <div class="fieldDescription">${LabelLibraryPageSizeHelp}</div>
     </div>
 
-    <div class="checkboxContainer checkboxContainer-withDescription fldFadein">
+    <div class="checkboxContainer checkboxContainer-withDescription">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkFadein" />
-            <span>${EnableFastImageFadeIn}</span>
+            <span>${EnableFasterAnimations}</span>
         </label>
-        <div class="fieldDescription checkboxFieldDescription">${EnableFastImageFadeInHelp}</div>
+        <div class="fieldDescription checkboxFieldDescription">${EnableFasterAnimationsHelp}</div>
     </div>
 
-    <div class="checkboxContainer checkboxContainer-withDescription fldDetailsBanner">
+    <div class="checkboxContainer checkboxContainer-withDescription">
+        <label>
+            <input type="checkbox" is="emby-checkbox" id="chkBlurhash" />
+            <span>${EnableBlurhash}</span>
+        </label>
+        <div class="fieldDescription checkboxFieldDescription">${EnableBlurhashHelp}</div>
+    </div>
+
+    <div class="checkboxContainer checkboxContainer-withDescription">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkDetailsBanner" />
             <span>${EnableDetailsBanner}</span>

src/components/fetchhelper.js

@@ -1,21 +1,19 @@
-define([], function () {
-    'use strict';
+/* eslint-disable indent */
+    export function getFetchPromise(request) {
 
-    function getFetchPromise(request) {
-
-        var headers = request.headers || {};
+        const headers = request.headers || {};
 
         if (request.dataType === 'json') {
             headers.accept = 'application/json';
         }
 
-        var fetchRequest = {
+        const fetchRequest = {
             headers: headers,
             method: request.type,
             credentials: 'same-origin'
         };
 
-        var contentType = request.contentType;
+        let contentType = request.contentType;
 
         if (request.data) {
 
@@ -33,12 +31,12 @@ define([], function () {
             headers['Content-Type'] = contentType;
         }
 
-        var url = request.url;
+        let url = request.url;
 
         if (request.query) {
-            var paramString = paramsToString(request.query);
+            const paramString = paramsToString(request.query);
             if (paramString) {
-                url += '?' + paramString;
+                url += `?${paramString}`;
             }
         }
 
@@ -51,11 +49,11 @@ define([], function () {
 
     function fetchWithTimeout(url, options, timeoutMs) {
 
-        console.debug('fetchWithTimeout: timeoutMs: ' + timeoutMs + ', url: ' + url);
+        console.debug(`fetchWithTimeout: timeoutMs: ${timeoutMs}, url: ${url}`);
 
         return new Promise(function (resolve, reject) {
 
-            var timeout = setTimeout(reject, timeoutMs);
+            const timeout = setTimeout(reject, timeoutMs);
 
             options = options || {};
             options.credentials = 'same-origin';
@@ -63,50 +61,47 @@ define([], function () {
             fetch(url, options).then(function (response) {
                 clearTimeout(timeout);
 
-                console.debug('fetchWithTimeout: succeeded connecting to url: ' + url);
+                console.debug(`fetchWithTimeout: succeeded connecting to url: ${url}`);
 
                 resolve(response);
             }, function (error) {
 
                 clearTimeout(timeout);
 
-                console.debug('fetchWithTimeout: timed out connecting to url: ' + url);
+                console.debug(`fetchWithTimeout: timed out connecting to url: ${url}`);
 
-                reject();
+                reject(error);
             });
         });
     }
 
+    /**
+     * @param params {Record<string, string | number | boolean>}
+     * @returns {string} Query string
+     */
     function paramsToString(params) {
-
-        var values = [];
-
-        for (var key in params) {
-
-            var value = params[key];
-
-            if (value !== null && value !== undefined && value !== '') {
-                values.push(encodeURIComponent(key) + '=' + encodeURIComponent(value));
-            }
-        }
-        return values.join('&');
+        return Object.entries(params)
+            // eslint-disable-next-line no-unused-vars
+            .filter(([_, v]) => v !== null && v !== undefined && v !== '')
+            .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+            .join('&');
     }
 
-    function ajax(request) {
+    export function ajax(request) {
         if (!request) {
             throw new Error('Request cannot be null');
         }
 
         request.headers = request.headers || {};
 
-        console.debug('requesting url: ' + request.url);
+        console.debug(`requesting url: ${request.url}`);
 
         return getFetchPromise(request).then(function (response) {
-            console.debug('response status: ' + response.status + ', url: ' + request.url);
+            console.debug(`response status: ${response.status}, url: ${request.url}`);
             if (response.status < 400) {
                 if (request.dataType === 'json' || request.headers.accept === 'application/json') {
                     return response.json();
-                } else if (request.dataType === 'text' || (response.headers.get('Content-Type') || '').toLowerCase().indexOf('text/') === 0) {
+                } else if (request.dataType === 'text' || (response.headers.get('Content-Type') || '').toLowerCase().startsWith('text/')) {
                     return response.text();
                 } else {
                     return response;
@@ -115,12 +110,8 @@ define([], function () {
                 return Promise.reject(response);
             }
         }, function (err) {
-            console.error('request failed to url: ' + request.url);
+            console.error(`request failed to url: ${request.url}`);
             throw err;
         });
     }
-    return {
-        getFetchPromise: getFetchPromise,
-        ajax: ajax
-    };
-});
+/* eslint-enable indent */

src/components/filterdialog/filterdialog.js

@@ -1,21 +1,28 @@
-define(['dom', 'dialogHelper', 'globalize', 'connectionManager', 'events', 'browser', 'require', 'emby-checkbox', 'emby-collapse', 'css!./style'], function (dom, dialogHelper, globalize, connectionManager, events, browser, require) {
-    'use strict';
+import dom from 'dom';
+import dialogHelper from 'dialogHelper';
+import globalize from 'globalize';
+import connectionManager from 'connectionManager';
+import events from 'events';
+import 'emby-checkbox';
+import 'emby-collapse';
+import 'css!./style.css';
 
+/* eslint-disable indent */
     function renderOptions(context, selector, cssClass, items, isCheckedFn) {
-        var elem = context.querySelector(selector);
+        const elem = context.querySelector(selector);
         if (items.length) {
             elem.classList.remove('hide');
         } else {
             elem.classList.add('hide');
         }
-        var html = '';
+        let html = '';
         html += '<div class="checkboxList">';
         html += items.map(function (filter) {
-            var itemHtml = '';
-            var checkedHtml = isCheckedFn(filter) ? ' checked' : '';
+            let itemHtml = '';
+            const checkedHtml = isCheckedFn(filter) ? 'checked' : '';
             itemHtml += '<label>';
-            itemHtml += '<input is="emby-checkbox" type="checkbox"' + checkedHtml + ' data-filter="' + filter + '" class="' + cssClass + '"/>';
-            itemHtml += '<span>' + filter + '</span>';
+            itemHtml += `<input is="emby-checkbox" type="checkbox" ${checkedHtml} data-filter="${filter}" class="${cssClass}"/>`;
+            itemHtml += `<span>${filter}</span>`;
             itemHtml += '</label>';
             return itemHtml;
         }).join('');
@@ -24,21 +31,24 @@ define(['dom', 'dialogHelper', 'globalize', 'connectionManager', 'events', 'brow
     }
 
     function renderFilters(context, result, query) {
+        if (result.Tags) {
+            result.Tags.length = Math.min(result.Tags.length, 50);
+        }
         renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
-            var delimeter = '|';
-            return (delimeter + (query.Genres || '') + delimeter).indexOf(delimeter + i + delimeter) != -1;
+            const delimeter = '|';
+            return (delimeter + (query.Genres || '') + delimeter).includes(delimeter + i + delimeter);
         });
         renderOptions(context, '.officialRatingFilters', 'chkOfficialRatingFilter', result.OfficialRatings, function (i) {
-            var delimeter = '|';
-            return (delimeter + (query.OfficialRatings || '') + delimeter).indexOf(delimeter + i + delimeter) != -1;
+            const delimeter = '|';
+            return (delimeter + (query.OfficialRatings || '') + delimeter).includes(delimeter + i + delimeter);
         });
         renderOptions(context, '.tagFilters', 'chkTagFilter', result.Tags, function (i) {
-            var delimeter = '|';
-            return (delimeter + (query.Tags || '') + delimeter).indexOf(delimeter + i + delimeter) != -1;
+            const delimeter = '|';
+            return (delimeter + (query.Tags || '') + delimeter).includes(delimeter + i + delimeter);
         });
         renderOptions(context, '.yearFilters', 'chkYearFilter', result.Years, function (i) {
-            var delimeter = ',';
-            return (delimeter + (query.Years || '') + delimeter).indexOf(delimeter + i + delimeter) != -1;
+            const delimeter = ',';
+            return (delimeter + (query.Years || '') + delimeter).includes(delimeter + i + delimeter);
         });
     }
 
@@ -52,59 +62,58 @@ define(['dom', 'dialogHelper', 'globalize', 'connectionManager', 'events', 'brow
         });
     }
 
+    /**
+     * @param context {HTMLDivElement} Dialog
+     * @param options {any} Options
+     */
     function updateFilterControls(context, options) {
-        var elems;
-        var i;
-        var length;
-        var query = options.query;
+        const query = options.query;
 
-        if (options.mode == 'livetvchannels') {
-            context.querySelector('.chkFavorite').checked = query.IsFavorite == true;
-            context.querySelector('.chkLikes').checked = query.IsLiked == true;
-            context.querySelector('.chkDislikes').checked = query.IsDisliked == true;
+        if (options.mode === 'livetvchannels') {
+            context.querySelector('.chkFavorite').checked = query.IsFavorite === true;
+            context.querySelector('.chkLikes').checked = query.IsLiked === true;
+            context.querySelector('.chkDislikes').checked = query.IsDisliked === true;
         } else {
-            elems = context.querySelectorAll('.chkStandardFilter');
-            for (i = 0, length = elems.length; i < length; i++) {
-                var chkStandardFilter = elems[i];
-                var filters = ',' + (query.Filters || '');
-                var filterName = chkStandardFilter.getAttribute('data-filter');
-                chkStandardFilter.checked = filters.indexOf(',' + filterName) != -1;
+            for (const elem of context.querySelectorAll('.chkStandardFilter')) {
+                const filters = `,${query.Filters || ''}`;
+                const filterName = elem.getAttribute('data-filter');
+                elem.checked = filters.includes(`,${filterName}`);
             }
         }
 
-        elems = context.querySelectorAll('.chkVideoTypeFilter');
-        for (i = 0, length = elems.length; i < length; i++) {
-            var chkVideoTypeFilter = elems[i];
-            var filters = ',' + (query.VideoTypes || '');
-            var filterName = chkVideoTypeFilter.getAttribute('data-filter');
-            chkVideoTypeFilter.checked = filters.indexOf(',' + filterName) != -1;
+        for (const elem of context.querySelectorAll('.chkVideoTypeFilter')) {
+            const filters = `,${query.VideoTypes || ''}`;
+            const filterName = elem.getAttribute('data-filter');
+            elem.checked = filters.includes(`,${filterName}`);
         }
-        context.querySelector('.chk3DFilter').checked = query.Is3D == true;
-        context.querySelector('.chkHDFilter').checked = query.IsHD == true;
-        context.querySelector('.chk4KFilter').checked = query.Is4K == true;
-        context.querySelector('.chkSDFilter').checked = query.IsHD == true;
-        context.querySelector('#chkSubtitle').checked = query.HasSubtitles == true;
-        context.querySelector('#chkTrailer').checked = query.HasTrailer == true;
-        context.querySelector('#chkThemeSong').checked = query.HasThemeSong == true;
-        context.querySelector('#chkThemeVideo').checked = query.HasThemeVideo == true;
-        context.querySelector('#chkSpecialFeature').checked = query.HasSpecialFeature == true;
-        context.querySelector('#chkSpecialEpisode').checked = query.ParentIndexNumber == 0;
-        context.querySelector('#chkMissingEpisode').checked = query.IsMissing == true;
-        context.querySelector('#chkFutureEpisode').checked = query.IsUnaired == true;
-        for (i = 0, length = elems.length; i < length; i++) {
-            var chkStatus = elems[i];
-            var filters = ',' + (query.SeriesStatus || '');
-            var filterName = chkStatus.getAttribute('data-filter');
-            chkStatus.checked = filters.indexOf(',' + filterName) != -1;
+        context.querySelector('.chk3DFilter').checked = query.Is3D === true;
+        context.querySelector('.chkHDFilter').checked = query.IsHD === true;
+        context.querySelector('.chk4KFilter').checked = query.Is4K === true;
+        context.querySelector('.chkSDFilter').checked = query.IsHD === true;
+        context.querySelector('#chkSubtitle').checked = query.HasSubtitles === true;
+        context.querySelector('#chkTrailer').checked = query.HasTrailer === true;
+        context.querySelector('#chkThemeSong').checked = query.HasThemeSong === true;
+        context.querySelector('#chkThemeVideo').checked = query.HasThemeVideo === true;
+        context.querySelector('#chkSpecialFeature').checked = query.HasSpecialFeature === true;
+        context.querySelector('#chkSpecialEpisode').checked = query.ParentIndexNumber === 0;
+        context.querySelector('#chkMissingEpisode').checked = query.IsMissing === true;
+        context.querySelector('#chkFutureEpisode').checked = query.IsUnaired === true;
+        for (const elem of context.querySelectorAll('.chkStatus')) {
+            const filters = `,${query.SeriesStatus || ''}`;
+            const filterName = elem.getAttribute('data-filter');
+            elem.checked = filters.includes(`,${filterName}`);
         }
     }
 
+    /**
+     * @param instance {FilterDialog} An instance of FilterDialog
+     */
     function triggerChange(instance) {
         events.trigger(instance, 'filterchange');
     }
 
     function setVisibility(context, options) {
-        if (options.mode == 'livetvchannels' || options.mode == 'albums' || options.mode == 'artists' || options.mode == 'albumartists' || options.mode == 'songs') {
+        if (options.mode === 'livetvchannels' || options.mode === 'albums' || options.mode === 'artists' || options.mode === 'albumartists' || options.mode === 'songs') {
             hideByClass(context, 'videoStandard');
         }
 
@@ -115,263 +124,287 @@ define(['dom', 'dialogHelper', 'globalize', 'connectionManager', 'events', 'brow
             context.querySelector('.yearFilters').classList.remove('hide');
         }
 
-        if (options.mode == 'movies' || options.mode == 'episodes') {
+        if (options.mode === 'movies' || options.mode === 'episodes') {
             context.querySelector('.videoTypeFilters').classList.remove('hide');
         }
 
-        if (options.mode == 'movies' || options.mode == 'series' || options.mode == 'episodes') {
+        if (options.mode === 'movies' || options.mode === 'series' || options.mode === 'episodes') {
             context.querySelector('.features').classList.remove('hide');
         }
 
-        if (options.mode == 'series') {
+        if (options.mode === 'series') {
             context.querySelector('.seriesStatus').classList.remove('hide');
         }
 
-        if (options.mode == 'episodes') {
+        if (options.mode === 'episodes') {
             showByClass(context, 'episodeFilter');
         }
     }
 
     function showByClass(context, className) {
-        var elems = context.querySelectorAll('.' + className);
-
-        for (var i = 0, length = elems.length; i < length; i++) {
-            elems[i].classList.remove('hide');
+        for (const elem of context.querySelectorAll(`.${className}`)) {
+            elem.classList.remove('hide');
         }
     }
 
     function hideByClass(context, className) {
-        var elems = context.querySelectorAll('.' + className);
-
-        for (var i = 0, length = elems.length; i < length; i++) {
-            elems[i].classList.add('hide');
+        for (const elem of context.querySelectorAll(`.${className}`)) {
+            elem.classList.add('hide');
         }
     }
 
     function enableDynamicFilters(mode) {
-        return mode == 'movies' || mode == 'series' || mode == 'albums' || mode == 'albumartists' || mode == 'artists' || mode == 'songs' || mode == 'episodes';
+        return mode === 'movies' || mode === 'series' || mode === 'albums' || mode === 'albumartists' || mode === 'artists' || mode === 'songs' || mode === 'episodes';
     }
 
-    return function (options) {
-        function onFavoriteChange() {
-            var query = options.query;
-            query.StartIndex = 0;
-            query.IsFavorite = !!this.checked || null;
-            triggerChange(self);
+    class FilterDialog {
+        constructor(options) {
+            /**
+             * @private
+             */
+            this.options = options;
         }
 
-        function onStandardFilterChange() {
-            var query = options.query;
-            var filterName = this.getAttribute('data-filter');
-            var filters = query.Filters || '';
-            filters = (',' + filters).replace(',' + filterName, '').substring(1);
+        /**
+         * @private
+         */
+        onFavoriteChange(elem) {
+            const query = this.options.query;
+            query.StartIndex = 0;
+            query.IsFavorite = !!elem.checked || null;
+            triggerChange(this);
+        }
 
-            if (this.checked) {
-                filters = filters ? filters + ',' + filterName : filterName;
+        /**
+         * @private
+         */
+        onStandardFilterChange(elem) {
+            const query = this.options.query;
+            const filterName = elem.getAttribute('data-filter');
+            let filters = query.Filters || '';
+            filters = (`,${filters}`).replace(`,${filterName}`, '').substring(1);
+
+            if (elem.checked) {
+                filters = filters ? `${filters},${filterName}` : filterName;
             }
 
             query.StartIndex = 0;
             query.Filters = filters;
-            triggerChange(self);
+            triggerChange(this);
         }
 
-        function onVideoTypeFilterChange() {
-            var query = options.query;
-            var filterName = this.getAttribute('data-filter');
-            var filters = query.VideoTypes || '';
-            filters = (',' + filters).replace(',' + filterName, '').substring(1);
+        /**
+         * @private
+         */
+        onVideoTypeFilterChange(elem) {
+            const query = this.options.query;
+            const filterName = elem.getAttribute('data-filter');
+            let filters = query.VideoTypes || '';
+            filters = (`,${filters}`).replace(`,${filterName}`, '').substring(1);
 
-            if (this.checked) {
-                filters = filters ? filters + ',' + filterName : filterName;
+            if (elem.checked) {
+                filters = filters ? `${filters},${filterName}` : filterName;
             }
 
             query.StartIndex = 0;
             query.VideoTypes = filters;
-            triggerChange(self);
+            triggerChange(this);
         }
 
-        function onStatusChange() {
-            var query = options.query;
-            var filterName = this.getAttribute('data-filter');
-            var filters = query.SeriesStatus || '';
-            filters = (',' + filters).replace(',' + filterName, '').substring(1);
+        /**
+         * @private
+         */
+        onStatusChange(elem) {
+            const query = this.options.query;
+            const filterName = elem.getAttribute('data-filter');
+            let filters = query.SeriesStatus || '';
+            filters = (`,${filters}`).replace(`,${filterName}`, '').substring(1);
 
-            if (this.checked) {
-                filters = filters ? filters + ',' + filterName : filterName;
+            if (elem.checked) {
+                filters = filters ? `${filters},${filterName}` : filterName;
             }
 
             query.SeriesStatus = filters;
             query.StartIndex = 0;
-            triggerChange(self);
+            triggerChange(this);
         }
 
-        function bindEvents(context) {
-            var elems;
-            var i;
-            var length;
-            var query = options.query;
+        /**
+         * @param context {HTMLDivElement} The dialog
+         */
+        bindEvents(context) {
+            const query = this.options.query;
 
-            if (options.mode == 'livetvchannels') {
-                elems = context.querySelectorAll('.chkFavorite');
-                for (i = 0, length = elems.length; i < length; i++) {
-                    elems[i].addEventListener('change', onFavoriteChange);
+            if (this.options.mode === 'livetvchannels') {
+                for (const elem of context.querySelectorAll('.chkFavorite')) {
+                    elem.addEventListener('change', () => this.onFavoriteChange(elem));
                 }
-                context.querySelector('.chkLikes').addEventListener('change', function () {
+
+                const chkLikes = context.querySelector('.chkLikes');
+                chkLikes.addEventListener('change', () => {
                     query.StartIndex = 0;
-                    query.IsLiked = this.checked ? true : null;
-                    triggerChange(self);
+                    query.IsLiked = chkLikes.checked ? true : null;
+                    triggerChange(this);
                 });
-                context.querySelector('.chkDislikes').addEventListener('change', function () {
+                const chkDislikes = context.querySelector('.chkDislikes');
+                chkDislikes.addEventListener('change', () => {
                     query.StartIndex = 0;
-                    query.IsDisliked = this.checked ? true : null;
-                    triggerChange(self);
+                    query.IsDisliked = chkDislikes.checked ? true : null;
+                    triggerChange(this);
                 });
             } else {
-                elems = context.querySelectorAll('.chkStandardFilter');
-                for (i = 0, length = elems.length; i < length; i++) {
-                    elems[i].addEventListener('change', onStandardFilterChange);
+                for (const elem of context.querySelectorAll('.chkStandardFilter')) {
+                    elem.addEventListener('change', () => this.onStandardFilterChange(elem));
                 }
             }
-            elems = context.querySelectorAll('.chkVideoTypeFilter');
-            for (i = 0, length = elems.length; i < length; i++) {
-                elems[i].addEventListener('change', onVideoTypeFilterChange);
+
+            for (const elem of context.querySelectorAll('.chkVideoTypeFilter')) {
+                elem.addEventListener('change', () => this.onVideoTypeFilterChange(elem));
             }
-            context.querySelector('.chk3DFilter').addEventListener('change', function () {
+            const chk3DFilter = context.querySelector('.chk3DFilter');
+            chk3DFilter.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.Is3D = this.checked ? true : null;
-                triggerChange(self);
+                query.Is3D = chk3DFilter.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector('.chk4KFilter').addEventListener('change', function () {
+            const chk4KFilter = context.querySelector('.chk4KFilter');
+            chk4KFilter.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.Is4K = this.checked ? true : null;
-                triggerChange(self);
+                query.Is4K = chk4KFilter.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector('.chkHDFilter').addEventListener('change', function () {
+            const chkHDFilter = context.querySelector('.chkHDFilter');
+            chkHDFilter.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.IsHD = this.checked ? true : null;
-                triggerChange(self);
+                query.IsHD = chkHDFilter.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector('.chkSDFilter').addEventListener('change', function () {
+            const chkSDFilter = context.querySelector('.chkSDFilter');
+            chkSDFilter.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.IsHD = this.checked ? false : null;
-                triggerChange(self);
+                query.IsHD = chkSDFilter.checked ? false : null;
+                triggerChange(this);
             });
-            elems = context.querySelectorAll('.chkStatus');
-            for (i = 0, length = elems.length; i < length; i++) {
-                elems[i].addEventListener('change', onStatusChange);
+            for (const elem of context.querySelectorAll('.chkStatus')) {
+                elem.addEventListener('change', () => this.onStatusChange(elem));
             }
-            context.querySelector('#chkTrailer').addEventListener('change', function () {
+            const chkTrailer = context.querySelector('#chkTrailer');
+            chkTrailer.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.HasTrailer = this.checked ? true : null;
-                triggerChange(self);
+                query.HasTrailer = chkTrailer.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector('#chkThemeSong').addEventListener('change', function () {
+            const chkThemeSong = context.querySelector('#chkThemeSong');
+            chkThemeSong.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.HasThemeSong = this.checked ? true : null;
-                triggerChange(self);
+                query.HasThemeSong = chkThemeSong.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector('#chkSpecialFeature').addEventListener('change', function () {
+            const chkSpecialFeature = context.querySelector('#chkSpecialFeature');
+            chkSpecialFeature.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.HasSpecialFeature = this.checked ? true : null;
-                triggerChange(self);
+                query.HasSpecialFeature = chkSpecialFeature.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector('#chkThemeVideo').addEventListener('change', function () {
+            const chkThemeVideo = context.querySelector('#chkThemeVideo');
+            chkThemeVideo.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.HasThemeVideo = this.checked ? true : null;
-                triggerChange(self);
+                query.HasThemeVideo = chkThemeVideo.checked ? true : null;
+                triggerChange(this);
             });
-            context.querySelector('#chkMissingEpisode').addEventListener('change', function () {
+            const chkMissingEpisode = context.querySelector('#chkMissingEpisode');
+            chkMissingEpisode.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.IsMissing = this.checked ? true : false;
-                triggerChange(self);
+                query.IsMissing = !!chkMissingEpisode.checked;
+                triggerChange(this);
             });
-            context.querySelector('#chkSpecialEpisode').addEventListener('change', function () {
+            const chkSpecialEpisode = context.querySelector('#chkSpecialEpisode');
+            chkSpecialEpisode.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.ParentIndexNumber = this.checked ? 0 : null;
-                triggerChange(self);
+                query.ParentIndexNumber = chkSpecialEpisode.checked ? 0 : null;
+                triggerChange(this);
             });
-            context.querySelector('#chkFutureEpisode').addEventListener('change', function () {
+            const chkFutureEpisode = context.querySelector('#chkFutureEpisode');
+            chkFutureEpisode.addEventListener('change', () => {
                 query.StartIndex = 0;
-                if (this.checked) {
+                if (chkFutureEpisode.checked) {
                     query.IsUnaired = true;
                     query.IsVirtualUnaired = null;
                 } else {
                     query.IsUnaired = null;
                     query.IsVirtualUnaired = false;
                 }
-                triggerChange(self);
+                triggerChange(this);
             });
-            context.querySelector('#chkSubtitle').addEventListener('change', function () {
+            const chkSubtitle = context.querySelector('#chkSubtitle');
+            chkSubtitle.addEventListener('change', () => {
                 query.StartIndex = 0;
-                query.HasSubtitles = this.checked ? true : null;
-                triggerChange(self);
+                query.HasSubtitles = chkSubtitle.checked ? true : null;
+                triggerChange(this);
             });
-            context.addEventListener('change', function (e) {
-                var chkGenreFilter = dom.parentWithClass(e.target, 'chkGenreFilter');
+            context.addEventListener('change', (e) => {
+                const chkGenreFilter = dom.parentWithClass(e.target, 'chkGenreFilter');
                 if (chkGenreFilter) {
-                    var filterName = chkGenreFilter.getAttribute('data-filter');
-                    var filters = query.Genres || '';
-                    var delimiter = '|';
+                    const filterName = chkGenreFilter.getAttribute('data-filter');
+                    let filters = query.Genres || '';
+                    const delimiter = '|';
                     filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
                     if (chkGenreFilter.checked) {
                         filters = filters ? (filters + delimiter + filterName) : filterName;
                     }
                     query.StartIndex = 0;
                     query.Genres = filters;
-                    triggerChange(self);
+                    triggerChange(this);
                     return;
                 }
-                var chkTagFilter = dom.parentWithClass(e.target, 'chkTagFilter');
+                const chkTagFilter = dom.parentWithClass(e.target, 'chkTagFilter');
                 if (chkTagFilter) {
-                    var filterName = chkTagFilter.getAttribute('data-filter');
-                    var filters = query.Tags || '';
-                    var delimiter = '|';
+                    const filterName = chkTagFilter.getAttribute('data-filter');
+                    let filters = query.Tags || '';
+                    const delimiter = '|';
                     filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
                     if (chkTagFilter.checked) {
                         filters = filters ? (filters + delimiter + filterName) : filterName;
                     }
                     query.StartIndex = 0;
                     query.Tags = filters;
-                    triggerChange(self);
+                    triggerChange(this);
                     return;
                 }
-                var chkYearFilter = dom.parentWithClass(e.target, 'chkYearFilter');
+                const chkYearFilter = dom.parentWithClass(e.target, 'chkYearFilter');
                 if (chkYearFilter) {
-                    var filterName = chkYearFilter.getAttribute('data-filter');
-                    var filters = query.Years || '';
-                    var delimiter = ',';
+                    const filterName = chkYearFilter.getAttribute('data-filter');
+                    let filters = query.Years || '';
+                    const delimiter = ',';
                     filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
                     if (chkYearFilter.checked) {
                         filters = filters ? (filters + delimiter + filterName) : filterName;
                     }
                     query.StartIndex = 0;
                     query.Years = filters;
-                    triggerChange(self);
+                    triggerChange(this);
                     return;
                 }
-                var chkOfficialRatingFilter = dom.parentWithClass(e.target, 'chkOfficialRatingFilter');
+                const chkOfficialRatingFilter = dom.parentWithClass(e.target, 'chkOfficialRatingFilter');
                 if (chkOfficialRatingFilter) {
-                    var filterName = chkOfficialRatingFilter.getAttribute('data-filter');
-                    var filters = query.OfficialRatings || '';
-                    var delimiter = '|';
+                    const filterName = chkOfficialRatingFilter.getAttribute('data-filter');
+                    let filters = query.OfficialRatings || '';
+                    const delimiter = '|';
                     filters = (delimiter + filters).replace(delimiter + filterName, '').substring(1);
                     if (chkOfficialRatingFilter.checked) {
                         filters = filters ? (filters + delimiter + filterName) : filterName;
                     }
                     query.StartIndex = 0;
                     query.OfficialRatings = filters;
-                    triggerChange(self);
-                    return;
+                    triggerChange(this);
                 }
             });
         }
 
-        var self = this;
-
-        self.show = function () {
-            return new Promise(function (resolve, reject) {
-                require(['text!./filterdialog.template.html'], function (template) {
-                    var dlg = dialogHelper.createDialog({
+        show() {
+            return import('text!./filterdialog.template.html').then(({default: template}) => {
+                return new Promise((resolve) => {
+                    const dlg = dialogHelper.createDialog({
                         removeOnClose: true,
                         modal: false
                     });
@@ -380,18 +413,21 @@ define(['dom', 'dialogHelper', 'globalize', 'connectionManager', 'events', 'brow
                     dlg.classList.add('formDialog');
                     dlg.classList.add('filterDialog');
                     dlg.innerHTML = globalize.translateDocument(template);
-                    setVisibility(dlg, options);
+                    setVisibility(dlg, this.options);
                     dialogHelper.open(dlg);
                     dlg.addEventListener('close', resolve);
-                    updateFilterControls(dlg, options);
-                    bindEvents(dlg);
-                    if (enableDynamicFilters(options.mode)) {
+                    updateFilterControls(dlg, this.options);
+                    this.bindEvents(dlg);
+                    if (enableDynamicFilters(this.options.mode)) {
                         dlg.classList.add('dynamicFilterDialog');
-                        var apiClient = connectionManager.getApiClient(options.serverId);
-                        loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), options.query);
+                        const apiClient = connectionManager.getApiClient(this.options.serverId);
+                        loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), this.options.query);
                     }
                 });
             });
-        };
-    };
-});
+        }
+    }
+
+/* eslint-enable indent */
+
+export default FilterDialog;

src/components/formdialog.css

@@ -55,7 +55,7 @@
     /* Without this emby-checkbox is able to appear on top */
     z-index: 1;
     align-items: flex-end;
-    justify-content: flex-end;
+    justify-content: center;
     flex-wrap: wrap;
 }
 

src/components/homesections/homesections.js

@@ -168,7 +168,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
     }
 
     function getPortraitShape() {
-        return enableScrollX() ? 'autooverflow' : 'auto';
+        return enableScrollX() ? 'overflowPortrait' : 'portrait';
     }
 
     function getLibraryButtonsHtml(items) {
@@ -254,7 +254,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             return cardBuilder.getCardsHtml({
                 items: items,
                 shape: shape,
-                preferThumb: viewType !== 'movies' && itemType !== 'Channel' && viewType !== 'music' ? 'auto' : null,
+                preferThumb: viewType !== 'movies' && viewType !== 'tvshows' && itemType !== 'Channel' && viewType !== 'music' ? 'auto' : null,
                 showUnplayedIndicator: false,
                 showChildCountIndicator: true,
                 context: 'home',

src/components/imageUploader/imageUploader.js

@@ -58,6 +58,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
                 var html = ['<img style="max-width:100%;max-height:100%;" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
 
                 page.querySelector('#imageOutput').innerHTML = html;
+                page.querySelector('#dropImageText').classList.add('hide');
                 page.querySelector('#fldUpload').classList.remove('hide');
             };
         })(file);

src/components/imageUploader/imageUploader.template.html

@@ -20,7 +20,7 @@
             </div>
             <div>
                 <div class="imageEditor-dropZone fieldDescription">
-                    <div>${LabelDropImageHere}</div>
+                    <div id="dropImageText">${LabelDropImageHere}</div>
                     <output id="imageOutput" class="flex align-items-center justify-content-center" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;"></output>
                     <input type="file" accept="image/*" id="uploadImage" name="uploadImage" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;opacity:0;" />
                 </div>

src/components/images/imageLoader.js

@@ -1,5 +1,6 @@
 import * as lazyLoader from 'lazyLoader';
 import * as userSettings from 'userSettings';
+import * as blurhash from 'blurhash';
 import 'css!./style';
 /* eslint-disable indent */
 
@@ -11,47 +12,111 @@ import 'css!./style';
         fillImageElement(elem, source);
     }
 
+    async function itemBlurhashing(target, blurhashstr) {
+        if (blurhash.isBlurhashValid(blurhashstr)) {
+            // Although the default values recommended by Blurhash developers is 32x32, a size of 18x18 seems to be the sweet spot for us,
+            // improving the performance and reducing the memory usage, while retaining almost full blur quality.
+            // Lower values had more visible pixelation
+            let width = 18;
+            let height = 18;
+            let pixels;
+            try {
+                pixels = blurhash.decode(blurhashstr, width, height);
+            } catch (err) {
+                console.error('Blurhash decode error: ', err);
+                target.classList.add('non-blurhashable');
+                return;
+            }
+            let canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            let ctx = canvas.getContext('2d');
+            let imgData = ctx.createImageData(width, height);
+
+            imgData.data.set(pixels);
+            ctx.putImageData(imgData, 0, 0);
+
+            let child = target.appendChild(canvas);
+            child.classList.add('blurhash-canvas');
+            child.style.opacity = 1;
+            if (userSettings.enableFastFadein()) {
+                child.classList.add('lazy-blurhash-fadein-fast');
+            } else {
+                child.classList.add('lazy-blurhash-fadein');
+            }
+
+            target.classList.add('blurhashed');
+            target.removeAttribute('data-blurhash');
+        }
+    }
+
+    function switchCanvas(elem) {
+        let child = elem.getElementsByClassName('blurhash-canvas')[0];
+        if (child) {
+            child.style.opacity = elem.getAttribute('data-src') ? 1 : 0;
+        }
+    }
+
     export function fillImage(entry) {
         if (!entry) {
             throw new Error('entry cannot be null');
         }
-
+        let target = entry.target;
         var source = undefined;
-        if (entry.target) {
-            source = entry.target.getAttribute('data-src');
+
+        if (target) {
+            source = target.getAttribute('data-src');
+            var blurhashstr = target.getAttribute('data-blurhash');
         } else {
             source = entry;
         }
 
+        if (userSettings.enableBlurhash()) {
+            if (!target.classList.contains('blurhashed', 'non-blurhashable') && blurhashstr) {
+                itemBlurhashing(target, blurhashstr);
+            } else if (!blurhashstr && !target.classList.contains('blurhashed')) {
+                target.classList.add('non-blurhashable');
+            }
+        }
+
         if (entry.intersectionRatio > 0) {
-            if (source) fillImageElement(entry.target, source);
+            if (source) fillImageElement(target, source);
         } else if (!source) {
-            emptyImageElement(entry.target);
+            emptyImageElement(target);
         }
     }
 
     function fillImageElement(elem, url) {
         if (url === undefined) {
-            throw new Error('url cannot be undefined');
+            throw new TypeError('url cannot be undefined');
         }
 
         let preloaderImg = new Image();
         preloaderImg.src = url;
 
+        // This is necessary here, so changing blurhash settings without reloading the page works
+        if (!userSettings.enableBlurhash() || elem.classList.contains('non-blurhashable')) {
+            elem.classList.add('lazy-hidden');
+        }
+
         preloaderImg.addEventListener('load', () => {
             if (elem.tagName !== 'IMG') {
                 elem.style.backgroundImage = "url('" + url + "')";
             } else {
                 elem.setAttribute('src', url);
             }
-
-            if (userSettings.enableFastFadein()) {
-                elem.classList.add('lazy-image-fadein-fast');
-            } else {
-                elem.classList.add('lazy-image-fadein');
-            }
-
             elem.removeAttribute('data-src');
+
+            if (elem.classList.contains('non-blurhashable') || !userSettings.enableBlurhash()) {
+                elem.classList.remove('lazy-hidden');
+                if (userSettings.enableFastFadein()) {
+                    elem.classList.add('lazy-image-fadein-fast');
+                } else {
+                    elem.classList.add('lazy-image-fadein');
+                }
+            } else {
+                switchCanvas(elem);
+            }
         });
     }
 
@@ -65,11 +130,14 @@ import 'css!./style';
             url = elem.getAttribute('src');
             elem.setAttribute('src', '');
         }
-
         elem.setAttribute('data-src', url);
 
-        elem.classList.remove('lazy-image-fadein-fast');
-        elem.classList.remove('lazy-image-fadein');
+        if (elem.classList.contains('non-blurhashable') || !userSettings.enableBlurhash()) {
+            elem.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein');
+            elem.classList.add('lazy-hidden');
+        } else {
+            switchCanvas(elem);
+        }
     }
 
     export function lazyChildren(elem) {

src/components/images/style.css

@@ -1,13 +1,33 @@
-.cardImageContainer.lazy {
+.lazy-image-fadein {
+    opacity: 1;
+    transition: opacity 0.5s;
+}
+
+.lazy-image-fadein-fast {
+    opacity: 1;
+    transition: opacity 0.1s;
+}
+
+.lazy-hidden {
     opacity: 0;
 }
 
-.cardImageContainer.lazy.lazy-image-fadein {
-    opacity: 1;
+.lazy-blurhash-fadein-fast {
+    transition: opacity 0.2s;
+}
+
+.lazy-blurhash-fadein {
     transition: opacity 0.7s;
 }
 
-.cardImageContainer.lazy.lazy-image-fadein-fast {
-    opacity: 1;
-    transition: opacity 0.2s;
+.blurhash-canvas {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    pointer-events: none;
 }

src/components/itemContextMenu.js

@@ -403,7 +403,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     break;
                 case 'moremediainfo':
                     require(['itemMediaInfo'], function (itemMediaInfo) {
-                        itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
+                        itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id));
                     });
                     break;
                 case 'refresh':

src/components/lazyLoader/lazyLoaderIntersectionObserver.js

@@ -11,9 +11,9 @@
                 (entries) => {
                     entries.forEach(entry => {
                         callback(entry);
-                    },
-                    {rootMargin: '50%'});
-                });
+                    });
+                },
+                {rootMargin: '25%'});
 
             this.observer = observer;
         }

src/components/listview/listview.js

@@ -70,6 +70,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
     function getImageUrl(item, width) {
 
         var apiClient = connectionManager.getApiClient(item.ServerId);
+        let itemId;
 
         var options = {
             maxWidth: width * 2,
@@ -77,45 +78,45 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
         };
 
         if (item.ImageTags && item.ImageTags.Primary) {
-
             options.tag = item.ImageTags.Primary;
-            return apiClient.getScaledImageUrl(item.Id, options);
-        }
-
-        if (item.AlbumId && item.AlbumPrimaryImageTag) {
-
+            itemId = item.Id;
+        } else if (item.AlbumId && item.AlbumPrimaryImageTag) {
             options.tag = item.AlbumPrimaryImageTag;
-            return apiClient.getScaledImageUrl(item.AlbumId, options);
+            itemId = item.AlbumId;
         } else if (item.SeriesId && item.SeriesPrimaryImageTag) {
-
             options.tag = item.SeriesPrimaryImageTag;
-            return apiClient.getScaledImageUrl(item.SeriesId, options);
-
+            itemId = item.SeriesId;
         } else if (item.ParentPrimaryImageTag) {
-
             options.tag = item.ParentPrimaryImageTag;
-            return apiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, options);
+            itemId = item.ParentPrimaryImageItemId;
         }
 
+        let blurHashes = item.ImageBlurHashes || {};
+        let blurhashstr = (blurHashes[options.type] || {})[options.tag];
+
+        if (itemId) {
+            return { url: apiClient.getScaledImageUrl(itemId, options), blurhash: blurhashstr };
+        }
         return null;
     }
 
     function getChannelImageUrl(item, width) {
 
         var apiClient = connectionManager.getApiClient(item.ServerId);
-
         var options = {
             maxWidth: width * 2,
             type: 'Primary'
         };
 
         if (item.ChannelId && item.ChannelPrimaryImageTag) {
-
             options.tag = item.ChannelPrimaryImageTag;
-            return apiClient.getScaledImageUrl(item.ChannelId, options);
         }
+        let blurHashes = item.ImageBlurHashes || {};
+        let blurhashstr = (blurHashes[options.type])[options.tag];
 
-        return null;
+        if (item.ChannelId) {
+            return { url: apiClient.getScaledImageUrl(item.ChannelId, options), blurhash: blurhashstr };
+        }
     }
 
     function getTextLinesHtml(textlines, isLargeStyle) {
@@ -268,8 +269,10 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             }
 
             if (options.image !== false) {
-                var imgUrl = options.imageSource === 'channel' ? getChannelImageUrl(item, downloadWidth) : getImageUrl(item, downloadWidth);
-                var imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
+                let imgData = options.imageSource === 'channel' ? getChannelImageUrl(item, downloadWidth) : getImageUrl(item, downloadWidth);
+                let imgUrl = imgData.url;
+                let blurhash = imgData.blurhash;
+                let imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
 
                 if (isLargeStyle && layoutManager.tv) {
                     imageClass += ' listItemImage-large-tv';
@@ -283,8 +286,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
                 var imageAction = playOnImageClick ? 'resume' : action;
 
+                let blurhashAttrib = '';
+                if (blurhash && blurhash.length > 0) {
+                    blurhashAttrib = 'data-blurhash="' + blurhash + '"';
+                }
+
                 if (imgUrl) {
-                    html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" item-icon>';
+                    html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" ' + blurhashAttrib + ' item-icon>';
                 } else {
                     html += '<div class="' + imageClass + '">';
                 }

src/components/loadingDialog/loadingDialog.js

@@ -1,92 +0,0 @@
-define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle', 'flexStyles'], function (loading, events, dialogHelper, dom, layoutManager, scrollHelper, globalize, require) {
-    'use strict';
-
-    function showDialog(instance, options, template) {
-        var dialogOptions = {
-            removeOnClose: true,
-            scrollY: false
-        };
-
-        var enableTvLayout = layoutManager.tv;
-        if (enableTvLayout) {
-            dialogOptions.size = 'fullscreen';
-        }
-
-        var dlg = dialogHelper.createDialog(dialogOptions);
-
-        var configuredButtons = [];
-
-        dlg.classList.add('formDialog');
-
-        dlg.innerHTML = globalize.translateHtml(template, 'core');
-
-        dlg.classList.add('align-items-center');
-        dlg.classList.add('justify-items-center');
-
-        var formDialogContent = dlg.querySelector('.formDialogContent');
-        formDialogContent.style['flex-grow'] = 'initial';
-        formDialogContent.style['max-width'] = '50%';
-        formDialogContent.style['max-height'] = '60%';
-
-        if (enableTvLayout) {
-            scrollHelper.centerFocus.on(formDialogContent, false);
-            dlg.querySelector('.formDialogHeader').style.marginTop = '15%';
-        } else {
-            dlg.classList.add('dialog-fullscreen-lowres');
-        }
-
-        //dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
-        //    dialogHelper.close(dlg);
-        //});
-
-        dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.title;
-
-        dlg.querySelector('.text').innerHTML = options.text;
-
-        instance.dlg = dlg;
-
-        return dialogHelper.open(dlg).then(function () {
-            if (enableTvLayout) {
-                scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
-            }
-
-            loading.hide();
-        });
-    }
-
-    function LoadingDialog(options) {
-        this.options = options;
-    }
-
-    LoadingDialog.prototype.show = function () {
-        var instance = this;
-        loading.show();
-
-        return new Promise(function (resolve, reject) {
-            require(['text!./../dialog/dialog.template.html'], function (template) {
-                showDialog(instance, instance.options, template);
-                resolve();
-            });
-        });
-    };
-
-    LoadingDialog.prototype.setTitle = function (title) {
-    };
-
-    LoadingDialog.prototype.setText = function (text) {
-    };
-
-    LoadingDialog.prototype.hide = function () {
-        if (this.dlg) {
-            dialogHelper.close(this.dlg);
-            this.dlg = null;
-        }
-    };
-
-    LoadingDialog.prototype.destroy = function () {
-        this.dlg = null;
-        this.options = null;
-    };
-
-    return LoadingDialog;
-});

src/components/mediainfo/mediainfo.js

@@ -273,7 +273,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
             }
         }
 
-        if (item.RunTimeTicks && item.Type !== 'Series' && item.Type !== 'Program' && !showFolderRuntime && options.runtime !== false) {
+        if (item.RunTimeTicks && item.Type !== 'Series' && item.Type !== 'Program' && item.Type !== 'Book' && !showFolderRuntime && options.runtime !== false) {
 
             if (item.Type === 'Audio') {
 

src/components/metadataEditor/metadataEditor.js

@@ -308,8 +308,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
             }
         });
 
-        context.removeEventListener('submit', onEditorClick);
-        context.addEventListener('submit', onEditorClick);
+        context.removeEventListener('click', onEditorClick);
+        context.addEventListener('click', onEditorClick);
 
         var form = context.querySelector('form');
         form.removeEventListener('submit', onSubmit);

src/components/metadataEditor/personEditor.template.html

@@ -7,7 +7,6 @@
 
 <div class="formDialogContent smoothScrollY" style="padding-top:2em;">
     <form class="popupEditPersonForm dialogContentInner dialog-content-centered">
-
         <div class="inputContainer">
             <input type="text" is="emby-input" class="txtPersonName" required="required" label="${LabelName}" />
         </div>
@@ -23,6 +22,7 @@
                 <option value="Writer">${Writer}</option>
             </select>
         </div>
+
         <div class="inputContainer fldRole hide">
             <input is="emby-input" type="text" class="txtPersonRole" label="${LabelPersonRole}" />
             <div class="fieldDescription">${LabelPersonRoleHelp}</div>
@@ -33,6 +33,5 @@
                 <span>${Save}</span>
             </button>
         </div>
-
     </form>
 </div>

src/components/playback/brightnessosd.js

@@ -1,171 +1,171 @@
-define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'material-icons'], function (events, playbackManager, dom, browser) {
-    'use strict';
+import events from 'events';
+import playbackManager from 'playbackManager';
+import dom from 'dom';
+import browser from 'browser';
+import 'css!./iconosd';
+import 'material-icons';
 
-    var currentPlayer;
-    var osdElement;
-    var iconElement;
-    var progressElement;
+var currentPlayer;
+var osdElement;
+var iconElement;
+var progressElement;
 
-    var enableAnimation;
+var enableAnimation;
 
-    function getOsdElementHtml() {
-        var html = '';
+function getOsdElementHtml() {
+    var html = '';
 
-        html += '<span class="material-icons iconOsdIcon brightness_high"></span>';
+    html += '<span class="material-icons iconOsdIcon brightness_high"></span>';
 
-        html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner brightnessOsdProgressInner"></div></div>';
+    html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner brightnessOsdProgressInner"></div></div>';
 
-        return html;
+    return html;
+}
+
+function ensureOsdElement() {
+
+    var elem = osdElement;
+    if (!elem) {
+
+        enableAnimation = browser.supportsCssAnimation();
+
+        elem = document.createElement('div');
+        elem.classList.add('hide');
+        elem.classList.add('iconOsd');
+        elem.classList.add('iconOsd-hidden');
+        elem.classList.add('brightnessOsd');
+        elem.innerHTML = getOsdElementHtml();
+
+        iconElement = elem.querySelector('.material-icons');
+        progressElement = elem.querySelector('.iconOsdProgressInner');
+
+        document.body.appendChild(elem);
+        osdElement = elem;
     }
+}
 
-    function ensureOsdElement() {
+function onHideComplete() {
+    this.classList.add('hide');
+}
 
-        var elem = osdElement;
-        if (!elem) {
+var hideTimeout;
+function showOsd() {
 
-            enableAnimation = browser.supportsCssAnimation();
+    clearHideTimeout();
 
-            elem = document.createElement('div');
-            elem.classList.add('hide');
-            elem.classList.add('iconOsd');
-            elem.classList.add('iconOsd-hidden');
-            elem.classList.add('brightnessOsd');
-            elem.innerHTML = getOsdElementHtml();
+    var elem = osdElement;
 
-            iconElement = elem.querySelector('.material-icons');
-            progressElement = elem.querySelector('.iconOsdProgressInner');
-
-            document.body.appendChild(elem);
-            osdElement = elem;
-        }
-    }
-
-    function onHideComplete() {
-        this.classList.add('hide');
-    }
-
-    var hideTimeout;
-    function showOsd() {
-
-        clearHideTimeout();
-
-        var elem = osdElement;
-
-        dom.removeEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
-            once: true
-        });
-
-        elem.classList.remove('hide');
-
-        // trigger reflow
-        void elem.offsetWidth;
-
-        requestAnimationFrame(function () {
-            elem.classList.remove('iconOsd-hidden');
-
-            hideTimeout = setTimeout(hideOsd, 3000);
-        });
-    }
-
-    function clearHideTimeout() {
-        if (hideTimeout) {
-            clearTimeout(hideTimeout);
-            hideTimeout = null;
-        }
-    }
-
-    function hideOsd() {
-
-        clearHideTimeout();
-
-        var elem = osdElement;
-        if (elem) {
-
-            if (enableAnimation) {
-                // trigger reflow
-                void elem.offsetWidth;
-
-                requestAnimationFrame(function () {
-                    elem.classList.add('iconOsd-hidden');
-
-                    dom.addEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
-                        once: true
-                    });
-                });
-            } else {
-                onHideComplete.call(elem);
-            }
-        }
-    }
-
-    function setIcon(iconElement, icon) {
-        iconElement.classList.remove('brightness_high');
-        iconElement.classList.remove('brightness_medium');
-        iconElement.classList.remove('brightness_low');
-        iconElement.classList.add(icon);
-    }
-
-    function updateElementsFromPlayer(brightness) {
-
-        if (iconElement) {
-            if (brightness >= 80) {
-                setIcon(iconElement, 'brightness_high');
-            } else if (brightness >= 20) {
-                setIcon(iconElement, 'brightness_medium');
-            } else {
-                setIcon(iconElement, 'brightness_low');
-            }
-        }
-        if (progressElement) {
-            progressElement.style.width = (brightness || 0) + '%';
-        }
-    }
-
-    function releaseCurrentPlayer() {
-
-        var player = currentPlayer;
-
-        if (player) {
-            events.off(player, 'brightnesschange', onBrightnessChanged);
-            events.off(player, 'playbackstop', hideOsd);
-            currentPlayer = null;
-        }
-    }
-
-    function onBrightnessChanged(e) {
-
-        var player = this;
-
-        ensureOsdElement();
-
-        updateElementsFromPlayer(playbackManager.getBrightness(player));
-
-        showOsd();
-    }
-
-    function bindToPlayer(player) {
-
-        if (player === currentPlayer) {
-            return;
-        }
-
-        releaseCurrentPlayer();
-
-        currentPlayer = player;
-
-        if (!player) {
-            return;
-        }
-
-        hideOsd();
-        events.on(player, 'brightnesschange', onBrightnessChanged);
-        events.on(player, 'playbackstop', hideOsd);
-    }
-
-    events.on(playbackManager, 'playerchange', function () {
-        bindToPlayer(playbackManager.getCurrentPlayer());
+    dom.removeEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
+        once: true
     });
 
-    bindToPlayer(playbackManager.getCurrentPlayer());
+    elem.classList.remove('hide');
 
+    // trigger reflow
+    void elem.offsetWidth;
+
+    requestAnimationFrame(function () {
+        elem.classList.remove('iconOsd-hidden');
+
+        hideTimeout = setTimeout(hideOsd, 3000);
+    });
+}
+
+function clearHideTimeout() {
+    if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = null;
+    }
+}
+
+function hideOsd() {
+
+    clearHideTimeout();
+
+    var elem = osdElement;
+    if (elem) {
+
+        if (enableAnimation) {
+            // trigger reflow
+            void elem.offsetWidth;
+
+            requestAnimationFrame(function () {
+                elem.classList.add('iconOsd-hidden');
+
+                dom.addEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
+                    once: true
+                });
+            });
+        } else {
+            onHideComplete.call(elem);
+        }
+    }
+}
+
+function setIcon(iconElement, icon) {
+    iconElement.classList.remove('brightness_high', 'brightness_medium', 'brightness_low');
+    iconElement.classList.add(icon);
+}
+
+function updateElementsFromPlayer(brightness) {
+
+    if (iconElement) {
+        if (brightness >= 80) {
+            setIcon(iconElement, 'brightness_high');
+        } else if (brightness >= 20) {
+            setIcon(iconElement, 'brightness_medium');
+        } else {
+            setIcon(iconElement, 'brightness_low');
+        }
+    }
+    if (progressElement) {
+        progressElement.style.width = (brightness || 0) + '%';
+    }
+}
+
+function releaseCurrentPlayer() {
+
+    var player = currentPlayer;
+
+    if (player) {
+        events.off(player, 'brightnesschange', onBrightnessChanged);
+        events.off(player, 'playbackstop', hideOsd);
+        currentPlayer = null;
+    }
+}
+
+function onBrightnessChanged(e) {
+
+    var player = this;
+
+    ensureOsdElement();
+
+    updateElementsFromPlayer(playbackManager.getBrightness(player));
+
+    showOsd();
+}
+
+function bindToPlayer(player) {
+
+    if (player === currentPlayer) {
+        return;
+    }
+
+    releaseCurrentPlayer();
+
+    currentPlayer = player;
+
+    if (!player) {
+        return;
+    }
+
+    hideOsd();
+    events.on(player, 'brightnesschange', onBrightnessChanged);
+    events.on(player, 'playbackstop', hideOsd);
+}
+
+events.on(playbackManager, 'playerchange', function () {
+    bindToPlayer(playbackManager.getCurrentPlayer());
 });
+
+bindToPlayer(playbackManager.getCurrentPlayer());

src/components/playback/mediasession.js

@@ -241,6 +241,15 @@ import connectionManager from 'connectionManager';
         navigator.mediaSession.setActionHandler('seekforward', function () {
             execute('fastForward');
         });
+
+        /* eslint-disable-next-line compat/compat */
+        navigator.mediaSession.setActionHandler('seekto', function (object) {
+            let item = playbackManager.getPlayerState(currentPlayer).NowPlayingItem;
+            // Convert to ms
+            let duration = parseInt(item.RunTimeTicks ? (item.RunTimeTicks / 10000) : 0);
+            let wantedTime = object.seekTime * 1000;
+            playbackManager.seekPercent(wantedTime / duration * 100, currentPlayer);
+        });
     }
 
     events.on(playbackManager, 'playerchange', function () {

src/components/playback/nowplayinghelper.js

@@ -1,86 +1,82 @@
-define([], function () {
-    'use strict';
+export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
 
-    function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
+    var topItem = nowPlayingItem;
+    var bottomItem = null;
+    var topText = nowPlayingItem.Name;
 
-        var topItem = nowPlayingItem;
-        var bottomItem = null;
-        var topText = nowPlayingItem.Name;
-
-        if (nowPlayingItem.AlbumId && nowPlayingItem.MediaType === 'Audio') {
-            topItem = {
-                Id: nowPlayingItem.AlbumId,
-                Name: nowPlayingItem.Album,
-                Type: 'MusicAlbum',
-                IsFolder: true
-            };
-        }
-
-        if (nowPlayingItem.MediaType === 'Video') {
-            if (nowPlayingItem.IndexNumber != null) {
-                topText = nowPlayingItem.IndexNumber + ' - ' + topText;
-            }
-            if (nowPlayingItem.ParentIndexNumber != null) {
-                topText = nowPlayingItem.ParentIndexNumber + '.' + topText;
-            }
-        }
-
-        var bottomText = '';
-
-        if (nowPlayingItem.ArtistItems && nowPlayingItem.ArtistItems.length) {
-
-            bottomItem = {
-                Id: nowPlayingItem.ArtistItems[0].Id,
-                Name: nowPlayingItem.ArtistItems[0].Name,
-                Type: 'MusicArtist',
-                IsFolder: true
-            };
-
-            bottomText = nowPlayingItem.ArtistItems.map(function (a) {
-                return a.Name;
-            }).join(', ');
-
-        } else if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
-
-            bottomText = nowPlayingItem.Artists.join(', ');
-        } else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
-            bottomText = topText;
-            topText = nowPlayingItem.SeriesName || nowPlayingItem.Album;
-
-            bottomItem = topItem;
-
-            if (nowPlayingItem.SeriesId) {
-                topItem = {
-                    Id: nowPlayingItem.SeriesId,
-                    Name: nowPlayingItem.SeriesName,
-                    Type: 'Series',
-                    IsFolder: true
-                };
-            } else {
-                topItem = null;
-            }
-        } else if (nowPlayingItem.ProductionYear && includeNonNameInfo !== false) {
-            bottomText = nowPlayingItem.ProductionYear;
-        }
-
-        var list = [];
-
-        list.push({
-            text: topText,
-            item: topItem
-        });
-
-        if (bottomText) {
-            list.push({
-                text: bottomText,
-                item: bottomItem
-            });
-        }
-
-        return list;
+    if (nowPlayingItem.AlbumId && nowPlayingItem.MediaType === 'Audio') {
+        topItem = {
+            Id: nowPlayingItem.AlbumId,
+            Name: nowPlayingItem.Album,
+            Type: 'MusicAlbum',
+            IsFolder: true
+        };
     }
 
-    return {
-        getNowPlayingNames: getNowPlayingNames
-    };
-});
+    if (nowPlayingItem.MediaType === 'Video') {
+        if (nowPlayingItem.IndexNumber != null) {
+            topText = nowPlayingItem.IndexNumber + ' - ' + topText;
+        }
+        if (nowPlayingItem.ParentIndexNumber != null) {
+            topText = nowPlayingItem.ParentIndexNumber + '.' + topText;
+        }
+    }
+
+    var bottomText = '';
+
+    if (nowPlayingItem.ArtistItems && nowPlayingItem.ArtistItems.length) {
+
+        bottomItem = {
+            Id: nowPlayingItem.ArtistItems[0].Id,
+            Name: nowPlayingItem.ArtistItems[0].Name,
+            Type: 'MusicArtist',
+            IsFolder: true
+        };
+
+        bottomText = nowPlayingItem.ArtistItems.map(function (a) {
+            return a.Name;
+        }).join(', ');
+
+    } else if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
+
+        bottomText = nowPlayingItem.Artists.join(', ');
+    } else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
+        bottomText = topText;
+        topText = nowPlayingItem.SeriesName || nowPlayingItem.Album;
+
+        bottomItem = topItem;
+
+        if (nowPlayingItem.SeriesId) {
+            topItem = {
+                Id: nowPlayingItem.SeriesId,
+                Name: nowPlayingItem.SeriesName,
+                Type: 'Series',
+                IsFolder: true
+            };
+        } else {
+            topItem = null;
+        }
+    } else if (nowPlayingItem.ProductionYear && includeNonNameInfo !== false) {
+        bottomText = nowPlayingItem.ProductionYear;
+    }
+
+    var list = [];
+
+    list.push({
+        text: topText,
+        item: topItem
+    });
+
+    if (bottomText) {
+        list.push({
+            text: bottomText,
+            item: bottomItem
+        });
+    }
+
+    return list;
+}
+
+export default {
+    getNowPlayingNames: getNowPlayingNames
+};

src/components/playback/playbackmanager.js

@@ -1907,11 +1907,8 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                     // Setting this to true may cause some incorrect sorting
                     Recursive: false,
                     SortBy: options.shuffle ? 'Random' : 'SortName',
-                    MediaTypes: 'Photo,Video',
-                    Limit: 500
-
+                    MediaTypes: 'Photo,Video'
                 }).then(function (result) {
-
                     var items = result.Items;
 
                     var index = items.map(function (i) {

src/components/playback/playbackorientation.js

@@ -1,57 +1,57 @@
-define(['playbackManager', 'layoutManager', 'events'], function (playbackManager, layoutManager, events) {
-    'use strict';
+import playbackManager from 'playbackManager';
+import layoutManager from 'layoutManager';
+import events from 'events';
 
-    var orientationLocked;
+var orientationLocked;
 
-    function onOrientationChangeSuccess() {
-        orientationLocked = true;
-    }
+function onOrientationChangeSuccess() {
+    orientationLocked = true;
+}
 
-    function onOrientationChangeError(err) {
-        orientationLocked = false;
-        console.error('error locking orientation: ' + err);
-    }
+function onOrientationChangeError(err) {
+    orientationLocked = false;
+    console.error('error locking orientation: ' + err);
+}
 
-    events.on(playbackManager, 'playbackstart', function (e, player, state) {
+events.on(playbackManager, 'playbackstart', function (e, player, state) {
 
-        var isLocalVideo = player.isLocalPlayer && !player.isExternalPlayer && playbackManager.isPlayingVideo(player);
+    var isLocalVideo = player.isLocalPlayer && !player.isExternalPlayer && playbackManager.isPlayingVideo(player);
 
-        if (isLocalVideo && layoutManager.mobile) {
-            /* eslint-disable-next-line compat/compat */
-            var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation || (screen.orientation && screen.orientation.lock);
+    if (isLocalVideo && layoutManager.mobile) {
+        /* eslint-disable-next-line compat/compat */
+        var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation || (screen.orientation && screen.orientation.lock);
 
-            if (lockOrientation) {
+        if (lockOrientation) {
 
-                try {
-                    var promise = lockOrientation('landscape');
-                    if (promise.then) {
-                        promise.then(onOrientationChangeSuccess, onOrientationChangeError);
-                    } else {
-                        // returns a boolean
-                        orientationLocked = promise;
-                    }
-                } catch (err) {
-                    onOrientationChangeError(err);
+            try {
+                var promise = lockOrientation('landscape');
+                if (promise.then) {
+                    promise.then(onOrientationChangeSuccess, onOrientationChangeError);
+                } else {
+                    // returns a boolean
+                    orientationLocked = promise;
                 }
+            } catch (err) {
+                onOrientationChangeError(err);
             }
         }
-    });
-
-    events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) {
-
-        if (orientationLocked && !playbackStopInfo.nextMediaType) {
-
-            /* eslint-disable-next-line compat/compat */
-            var unlockOrientation = screen.unlockOrientation || screen.mozUnlockOrientation || screen.msUnlockOrientation || (screen.orientation && screen.orientation.unlock);
-
-            if (unlockOrientation) {
-                try {
-                    unlockOrientation();
-                } catch (err) {
-                    console.error('error unlocking orientation: ' + err);
-                }
-                orientationLocked = false;
-            }
-        }
-    });
+    }
+});
+
+events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) {
+
+    if (orientationLocked && !playbackStopInfo.nextMediaType) {
+
+        /* eslint-disable-next-line compat/compat */
+        var unlockOrientation = screen.unlockOrientation || screen.mozUnlockOrientation || screen.msUnlockOrientation || (screen.orientation && screen.orientation.unlock);
+
+        if (unlockOrientation) {
+            try {
+                unlockOrientation();
+            } catch (err) {
+                console.error('error unlocking orientation: ' + err);
+            }
+            orientationLocked = false;
+        }
+    }
 });

src/components/playback/playerSelectionMenu.js

@@ -1,320 +1,325 @@
-define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRouter', 'globalize', 'apphost'], function (appSettings, events, browser, loading, playbackManager, appRouter, globalize, appHost) {
-    'use strict';
+import appSettings from 'appSettings';
+import events from 'events';
+import browser from 'browser';
+import loading from 'loading';
+import playbackManager from 'playbackManager';
+import appRouter from 'appRouter';
+import globalize from 'globalize';
+import appHost from 'apphost';
 
-    function mirrorItem(info, player) {
+function mirrorItem(info, player) {
 
-        var item = info.item;
+    var item = info.item;
 
-        playbackManager.displayContent({
+    playbackManager.displayContent({
 
-            ItemName: item.Name,
-            ItemId: item.Id,
-            ItemType: item.Type,
-            Context: info.context
-        }, player);
-    }
+        ItemName: item.Name,
+        ItemId: item.Id,
+        ItemType: item.Type,
+        Context: info.context
+    }, player);
+}
 
-    function mirrorIfEnabled(info) {
+function mirrorIfEnabled(info) {
 
-        if (info && playbackManager.enableDisplayMirroring()) {
+    if (info && playbackManager.enableDisplayMirroring()) {
 
-            var getPlayerInfo = playbackManager.getPlayerInfo();
+        var getPlayerInfo = playbackManager.getPlayerInfo();
 
-            if (getPlayerInfo) {
-                if (!getPlayerInfo.isLocalPlayer && getPlayerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
-                    mirrorItem(info, playbackManager.getCurrentPlayer());
-                }
+        if (getPlayerInfo) {
+            if (!getPlayerInfo.isLocalPlayer && getPlayerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
+                mirrorItem(info, playbackManager.getCurrentPlayer());
             }
         }
     }
+}
 
-    function emptyCallback() {
-        // avoid console logs about uncaught promises
+function emptyCallback() {
+    // avoid console logs about uncaught promises
+}
+
+function getTargetSecondaryText(target) {
+
+    if (target.user) {
+
+        return target.user.Name;
     }
 
-    function getTargetSecondaryText(target) {
+    return null;
+}
 
-        if (target.user) {
+function getIcon(target) {
 
-            return target.user.Name;
-        }
+    var deviceType = target.deviceType;
 
-        return null;
-    }
-
-    function getIcon(target) {
-
-        var deviceType = target.deviceType;
-
-        if (!deviceType && target.isLocalPlayer) {
-            if (browser.tv) {
-                deviceType = 'tv';
-            } else if (browser.mobile) {
-                deviceType = 'smartphone';
-            } else {
-                deviceType = 'desktop';
-            }
-        }
-
-        if (!deviceType) {
+    if (!deviceType && target.isLocalPlayer) {
+        if (browser.tv) {
             deviceType = 'tv';
-        }
-
-        switch (deviceType) {
-
-            case 'smartphone':
-                return 'smartphone';
-            case 'tablet':
-                return 'tablet';
-            case 'tv':
-                return 'tv';
-            case 'cast':
-                return 'cast';
-            case 'desktop':
-                return 'computer';
-            default:
-                return 'tv';
-        }
-    }
-
-    function showPlayerSelection(button) {
-
-        var currentPlayerInfo = playbackManager.getPlayerInfo();
-
-        if (currentPlayerInfo) {
-            if (!currentPlayerInfo.isLocalPlayer) {
-                showActivePlayerMenu(currentPlayerInfo);
-                return;
-            }
-        }
-
-        var currentPlayerId = currentPlayerInfo ? currentPlayerInfo.id : null;
-
-        loading.show();
-
-        playbackManager.getTargets().then(function (targets) {
-
-            var menuItems = targets.map(function (t) {
-
-                var name = t.name;
-
-                if (t.appName && t.appName !== t.name) {
-                    name += ' - ' + t.appName;
-                }
-
-                return {
-                    name: name,
-                    id: t.id,
-                    selected: currentPlayerId === t.id,
-                    secondaryText: getTargetSecondaryText(t),
-                    icon: getIcon(t)
-                };
-
-            });
-
-            require(['actionsheet'], function (actionsheet) {
-
-                loading.hide();
-
-                var menuOptions = {
-                    title: globalize.translate('HeaderPlayOn'),
-                    items: menuItems,
-                    positionTo: button,
-
-                    resolveOnClick: true,
-                    border: true
-                };
-
-                // Unfortunately we can't allow the url to change or chromecast will throw a security error
-                // Might be able to solve this in the future by moving the dialogs to hashbangs
-                if (!(!browser.chrome || appHost.supports('castmenuhashchange'))) {
-                    menuOptions.enableHistory = false;
-                }
-
-                actionsheet.show(menuOptions).then(function (id) {
-
-                    var target = targets.filter(function (t) {
-                        return t.id === id;
-                    })[0];
-
-                    playbackManager.trySetActivePlayer(target.playerName, target);
-
-                    mirrorIfEnabled();
-
-                }, emptyCallback);
-            });
-        });
-    }
-
-    function showActivePlayerMenu(playerInfo) {
-
-        require(['dialogHelper', 'dialog', 'emby-checkbox', 'emby-button'], function (dialogHelper) {
-            showActivePlayerMenuInternal(dialogHelper, playerInfo);
-        });
-    }
-
-    function disconnectFromPlayer(currentDeviceName) {
-
-        if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
-
-            require(['dialog'], function (dialog) {
-
-                var menuItems = [];
-
-                menuItems.push({
-                    name: globalize.translate('Yes'),
-                    id: 'yes'
-                });
-                menuItems.push({
-                    name: globalize.translate('No'),
-                    id: 'no'
-                });
-
-                dialog({
-                    buttons: menuItems,
-                    //positionTo: positionTo,
-                    text: globalize.translate('ConfirmEndPlayerSession', currentDeviceName)
-
-                }).then(function (id) {
-                    switch (id) {
-
-                        case 'yes':
-                            playbackManager.getCurrentPlayer().endSession();
-                            playbackManager.setDefaultPlayerActive();
-                            break;
-                        case 'no':
-                            playbackManager.setDefaultPlayerActive();
-                            break;
-                        default:
-                            break;
-                    }
-                });
-
-            });
-
+        } else if (browser.mobile) {
+            deviceType = 'smartphone';
         } else {
-
-            playbackManager.setDefaultPlayerActive();
+            deviceType = 'desktop';
         }
     }
 
-    function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
-
-        var html = '';
-
-        var dialogOptions = {
-            removeOnClose: true
-        };
-
-        dialogOptions.modal = false;
-        dialogOptions.entryAnimationDuration = 160;
-        dialogOptions.exitAnimationDuration = 160;
-        dialogOptions.autoFocus = false;
-
-        var dlg = dialogHelper.createDialog(dialogOptions);
-
-        dlg.classList.add('promptDialog');
-
-        var currentDeviceName = (playerInfo.deviceName || playerInfo.name);
-
-        html += '<div class="promptDialogContent" style="padding:1.5em;">';
-        html += '<h2 style="margin-top:.5em;">';
-        html += currentDeviceName;
-        html += '</h2>';
-
-        html += '<div>';
-
-        if (playerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
-
-            html += '<label class="checkboxContainer">';
-            var checkedHtml = playbackManager.enableDisplayMirroring() ? ' checked' : '';
-            html += '<input type="checkbox" is="emby-checkbox" class="chkMirror"' + checkedHtml + '/>';
-            html += '<span>' + globalize.translate('EnableDisplayMirroring') + '</span>';
-            html += '</label>';
-        }
-
-        html += '</div>';
-
-        html += '<div style="margin-top:1em;display:flex;justify-content: flex-end;">';
-
-        html += '<button is="emby-button" type="button" class="button-flat btnRemoteControl promptDialogButton">' + globalize.translate('HeaderRemoteControl') + '</button>';
-        html += '<button is="emby-button" type="button" class="button-flat btnDisconnect promptDialogButton ">' + globalize.translate('Disconnect') + '</button>';
-        html += '<button is="emby-button" type="button" class="button-flat btnCancel promptDialogButton">' + globalize.translate('ButtonCancel') + '</button>';
-        html += '</div>';
-
-        html += '</div>';
-        dlg.innerHTML = html;
-
-        var chkMirror = dlg.querySelector('.chkMirror');
-
-        if (chkMirror) {
-            chkMirror.addEventListener('change', onMirrorChange);
-        }
-
-        var destination = '';
-
-        var btnRemoteControl = dlg.querySelector('.btnRemoteControl');
-        if (btnRemoteControl) {
-            btnRemoteControl.addEventListener('click', function () {
-                destination = 'nowplaying';
-                dialogHelper.close(dlg);
-            });
-        }
-
-        dlg.querySelector('.btnDisconnect').addEventListener('click', function () {
-            destination = 'disconnectFromPlayer';
-            dialogHelper.close(dlg);
-        });
-
-        dlg.querySelector('.btnCancel').addEventListener('click', function () {
-            dialogHelper.close(dlg);
-        });
-
-        dialogHelper.open(dlg).then(function () {
-            if (destination === 'nowplaying') {
-                appRouter.showNowPlaying();
-            } else if (destination === 'disconnectFromPlayer') {
-                disconnectFromPlayer(currentDeviceName);
-            }
-        }, emptyCallback);
+    if (!deviceType) {
+        deviceType = 'tv';
     }
 
-    function onMirrorChange() {
-        playbackManager.enableDisplayMirroring(this.checked);
+    switch (deviceType) {
+
+        case 'smartphone':
+            return 'smartphone';
+        case 'tablet':
+            return 'tablet';
+        case 'tv':
+            return 'tv';
+        case 'cast':
+            return 'cast';
+        case 'desktop':
+            return 'computer';
+        default:
+            return 'tv';
     }
+}
 
-    document.addEventListener('viewshow', function (e) {
+export function show(button) {
 
-        var state = e.detail.state || {};
-        var item = state.item;
+    var currentPlayerInfo = playbackManager.getPlayerInfo();
 
-        if (item && item.ServerId) {
-            mirrorIfEnabled({
-                item: item
-            });
+    if (currentPlayerInfo) {
+        if (!currentPlayerInfo.isLocalPlayer) {
+            showActivePlayerMenu(currentPlayerInfo);
             return;
         }
-    });
+    }
 
-    events.on(appSettings, 'change', function (e, name) {
-        if (name === 'displaymirror') {
-            mirrorIfEnabled();
-        }
-    });
+    var currentPlayerId = currentPlayerInfo ? currentPlayerInfo.id : null;
 
-    events.on(playbackManager, 'pairing', function (e) {
-        loading.show();
-    });
+    loading.show();
 
-    events.on(playbackManager, 'paired', function (e) {
-        loading.hide();
-    });
+    playbackManager.getTargets().then(function (targets) {
 
-    events.on(playbackManager, 'pairerror', function (e) {
-        loading.hide();
-    });
+        var menuItems = targets.map(function (t) {
 
-    return {
-        show: showPlayerSelection
+            var name = t.name;
+
+            if (t.appName && t.appName !== t.name) {
+                name += ' - ' + t.appName;
+            }
+
+            return {
+                name: name,
+                id: t.id,
+                selected: currentPlayerId === t.id,
+                secondaryText: getTargetSecondaryText(t),
+                icon: getIcon(t)
+            };
+
+        });
+
+        require(['actionsheet'], function (actionsheet) {
+
+            loading.hide();
+
+            var menuOptions = {
+                title: globalize.translate('HeaderPlayOn'),
+                items: menuItems,
+                positionTo: button,
+
+                resolveOnClick: true,
+                border: true
+            };
+
+            // Unfortunately we can't allow the url to change or chromecast will throw a security error
+            // Might be able to solve this in the future by moving the dialogs to hashbangs
+            if (!(!browser.chrome || appHost.supports('castmenuhashchange'))) {
+                menuOptions.enableHistory = false;
+            }
+
+            actionsheet.show(menuOptions).then(function (id) {
+
+                var target = targets.filter(function (t) {
+                    return t.id === id;
+                })[0];
+
+                playbackManager.trySetActivePlayer(target.playerName, target);
+
+                mirrorIfEnabled();
+
+            }, emptyCallback);
+        });
+    });
+}
+
+function showActivePlayerMenu(playerInfo) {
+
+    require(['dialogHelper', 'dialog', 'emby-checkbox', 'emby-button'], function (dialogHelper) {
+        showActivePlayerMenuInternal(dialogHelper, playerInfo);
+    });
+}
+
+function disconnectFromPlayer(currentDeviceName) {
+
+    if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
+
+        require(['dialog'], function (dialog) {
+
+            var menuItems = [];
+
+            menuItems.push({
+                name: globalize.translate('Yes'),
+                id: 'yes'
+            });
+            menuItems.push({
+                name: globalize.translate('No'),
+                id: 'no'
+            });
+
+            dialog({
+                buttons: menuItems,
+                //positionTo: positionTo,
+                text: globalize.translate('ConfirmEndPlayerSession', currentDeviceName)
+
+            }).then(function (id) {
+                switch (id) {
+
+                    case 'yes':
+                        playbackManager.getCurrentPlayer().endSession();
+                        playbackManager.setDefaultPlayerActive();
+                        break;
+                    case 'no':
+                        playbackManager.setDefaultPlayerActive();
+                        break;
+                    default:
+                        break;
+                }
+            });
+
+        });
+
+    } else {
+
+        playbackManager.setDefaultPlayerActive();
+    }
+}
+
+function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
+
+    var html = '';
+
+    var dialogOptions = {
+        removeOnClose: true
     };
+
+    dialogOptions.modal = false;
+    dialogOptions.entryAnimationDuration = 160;
+    dialogOptions.exitAnimationDuration = 160;
+    dialogOptions.autoFocus = false;
+
+    var dlg = dialogHelper.createDialog(dialogOptions);
+
+    dlg.classList.add('promptDialog');
+
+    var currentDeviceName = (playerInfo.deviceName || playerInfo.name);
+
+    html += '<div class="promptDialogContent" style="padding:1.5em;">';
+    html += '<h2 style="margin-top:.5em;">';
+    html += currentDeviceName;
+    html += '</h2>';
+
+    html += '<div>';
+
+    if (playerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
+
+        html += '<label class="checkboxContainer">';
+        var checkedHtml = playbackManager.enableDisplayMirroring() ? ' checked' : '';
+        html += '<input type="checkbox" is="emby-checkbox" class="chkMirror"' + checkedHtml + '/>';
+        html += '<span>' + globalize.translate('EnableDisplayMirroring') + '</span>';
+        html += '</label>';
+    }
+
+    html += '</div>';
+
+    html += '<div style="margin-top:1em;display:flex;justify-content: flex-end;">';
+
+    html += '<button is="emby-button" type="button" class="button-flat btnRemoteControl promptDialogButton">' + globalize.translate('HeaderRemoteControl') + '</button>';
+    html += '<button is="emby-button" type="button" class="button-flat btnDisconnect promptDialogButton ">' + globalize.translate('Disconnect') + '</button>';
+    html += '<button is="emby-button" type="button" class="button-flat btnCancel promptDialogButton">' + globalize.translate('ButtonCancel') + '</button>';
+    html += '</div>';
+
+    html += '</div>';
+    dlg.innerHTML = html;
+
+    var chkMirror = dlg.querySelector('.chkMirror');
+
+    if (chkMirror) {
+        chkMirror.addEventListener('change', onMirrorChange);
+    }
+
+    var destination = '';
+
+    var btnRemoteControl = dlg.querySelector('.btnRemoteControl');
+    if (btnRemoteControl) {
+        btnRemoteControl.addEventListener('click', function () {
+            destination = 'nowplaying';
+            dialogHelper.close(dlg);
+        });
+    }
+
+    dlg.querySelector('.btnDisconnect').addEventListener('click', function () {
+        destination = 'disconnectFromPlayer';
+        dialogHelper.close(dlg);
+    });
+
+    dlg.querySelector('.btnCancel').addEventListener('click', function () {
+        dialogHelper.close(dlg);
+    });
+
+    dialogHelper.open(dlg).then(function () {
+        if (destination === 'nowplaying') {
+            appRouter.showNowPlaying();
+        } else if (destination === 'disconnectFromPlayer') {
+            disconnectFromPlayer(currentDeviceName);
+        }
+    }, emptyCallback);
+}
+
+function onMirrorChange() {
+    playbackManager.enableDisplayMirroring(this.checked);
+}
+
+document.addEventListener('viewshow', function (e) {
+
+    var state = e.detail.state || {};
+    var item = state.item;
+
+    if (item && item.ServerId) {
+        mirrorIfEnabled({
+            item: item
+        });
+        return;
+    }
 });
+
+events.on(appSettings, 'change', function (e, name) {
+    if (name === 'displaymirror') {
+        mirrorIfEnabled();
+    }
+});
+
+events.on(playbackManager, 'pairing', function (e) {
+    loading.show();
+});
+
+events.on(playbackManager, 'paired', function (e) {
+    loading.hide();
+});
+
+events.on(playbackManager, 'pairerror', function (e) {
+    loading.hide();
+});
+
+export default {
+    show: show
+};

src/components/playback/playersettingsmenu.js

@@ -1,270 +1,272 @@
-define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings', 'qualityoptions'], function (connectionManager, actionsheet, datetime, playbackManager, globalize, appSettings, qualityoptions) {
-    'use strict';
+import connectionManager from 'connectionManager';
+import actionsheet from 'actionsheet';
+import playbackManager from 'playbackManager';
+import globalize from 'globalize';
+import qualityoptions from 'qualityoptions';
 
-    function showQualityMenu(player, btn) {
+function showQualityMenu(player, btn) {
 
-        var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
-            return stream.Type === 'Video';
-        })[0];
-        var videoWidth = videoStream ? videoStream.Width : null;
-        var videoHeight = videoStream ? videoStream.Height : null;
+    var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
+        return stream.Type === 'Video';
+    })[0];
+    var videoWidth = videoStream ? videoStream.Width : null;
+    var videoHeight = videoStream ? videoStream.Height : null;
 
-        var options = qualityoptions.getVideoQualityOptions({
-            currentMaxBitrate: playbackManager.getMaxStreamingBitrate(player),
-            isAutomaticBitrateEnabled: playbackManager.enableAutomaticBitrateDetection(player),
-            videoWidth: videoWidth,
-            videoHeight: videoHeight,
-            enableAuto: true
-        });
+    var options = qualityoptions.getVideoQualityOptions({
+        currentMaxBitrate: playbackManager.getMaxStreamingBitrate(player),
+        isAutomaticBitrateEnabled: playbackManager.enableAutomaticBitrateDetection(player),
+        videoWidth: videoWidth,
+        videoHeight: videoHeight,
+        enableAuto: true
+    });
 
-        var menuItems = options.map(function (o) {
-            var opt = {
-                name: o.name,
-                id: o.bitrate,
-                asideText: o.secondaryText
-            };
+    var menuItems = options.map(function (o) {
+        var opt = {
+            name: o.name,
+            id: o.bitrate,
+            asideText: o.secondaryText
+        };
 
-            if (o.selected) {
-                opt.selected = true;
-            }
+        if (o.selected) {
+            opt.selected = true;
+        }
 
-            return opt;
-        });
+        return opt;
+    });
 
-        var selectedId = options.filter(function (o) {
-            return o.selected;
-        });
+    var selectedId = options.filter(function (o) {
+        return o.selected;
+    });
 
-        selectedId = selectedId.length ? selectedId[0].bitrate : null;
+    selectedId = selectedId.length ? selectedId[0].bitrate : null;
 
-        return actionsheet.show({
-            items: menuItems,
-            positionTo: btn
-        }).then(function (id) {
-            var bitrate = parseInt(id);
-            if (bitrate !== selectedId) {
-                playbackManager.setMaxStreamingBitrate({
-                    enableAutomaticBitrateDetection: bitrate ? false : true,
-                    maxBitrate: bitrate
-                }, player);
-            }
-        });
+    return actionsheet.show({
+        items: menuItems,
+        positionTo: btn
+    }).then(function (id) {
+        var bitrate = parseInt(id);
+        if (bitrate !== selectedId) {
+            playbackManager.setMaxStreamingBitrate({
+                enableAutomaticBitrateDetection: bitrate ? false : true,
+                maxBitrate: bitrate
+            }, player);
+        }
+    });
+}
+
+function showRepeatModeMenu(player, btn) {
+    var menuItems = [];
+    var currentValue = playbackManager.getRepeatMode(player);
+
+    menuItems.push({
+        name: globalize.translate('RepeatAll'),
+        id: 'RepeatAll',
+        selected: currentValue === 'RepeatAll'
+    });
+
+    menuItems.push({
+        name: globalize.translate('RepeatOne'),
+        id: 'RepeatOne',
+        selected: currentValue === 'RepeatOne'
+    });
+
+    menuItems.push({
+        name: globalize.translate('None'),
+        id: 'RepeatNone',
+        selected: currentValue === 'RepeatNone'
+    });
+
+    return actionsheet.show({
+        items: menuItems,
+        positionTo: btn
+    }).then(function (mode) {
+        if (mode) {
+            playbackManager.setRepeatMode(mode, player);
+        }
+    });
+}
+
+function getQualitySecondaryText(player) {
+    var state = playbackManager.getPlayerState(player);
+    var isAutoEnabled = playbackManager.enableAutomaticBitrateDetection(player);
+    var currentMaxBitrate = playbackManager.getMaxStreamingBitrate(player);
+
+    var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
+        return stream.Type === 'Video';
+    })[0];
+
+    var videoWidth = videoStream ? videoStream.Width : null;
+    var videoHeight = videoStream ? videoStream.Height : null;
+
+    var options = qualityoptions.getVideoQualityOptions({
+        currentMaxBitrate: playbackManager.getMaxStreamingBitrate(player),
+        isAutomaticBitrateEnabled: playbackManager.enableAutomaticBitrateDetection(player),
+        videoWidth: videoWidth,
+        videoHeight: videoHeight,
+        enableAuto: true
+    });
+
+    var menuItems = options.map(function (o) {
+        var opt = {
+            name: o.name,
+            id: o.bitrate,
+            asideText: o.secondaryText
+        };
+
+        if (o.selected) {
+            opt.selected = true;
+        }
+
+        return opt;
+    });
+
+    var selectedOption = options.filter(function (o) {
+        return o.selected;
+    });
+
+    if (!selectedOption.length) {
+        return null;
     }
 
-    function showRepeatModeMenu(player, btn) {
-        var menuItems = [];
-        var currentValue = playbackManager.getRepeatMode(player);
+    selectedOption = selectedOption[0];
+    var text = selectedOption.name;
 
-        menuItems.push({
-            name: globalize.translate('RepeatAll'),
-            id: 'RepeatAll',
-            selected: currentValue === 'RepeatAll'
-        });
-
-        menuItems.push({
-            name: globalize.translate('RepeatOne'),
-            id: 'RepeatOne',
-            selected: currentValue === 'RepeatOne'
-        });
-
-        menuItems.push({
-            name: globalize.translate('None'),
-            id: 'RepeatNone',
-            selected: currentValue === 'RepeatNone'
-        });
-
-        return actionsheet.show({
-            items: menuItems,
-            positionTo: btn
-        }).then(function (mode) {
-            if (mode) {
-                playbackManager.setRepeatMode(mode, player);
-            }
-        });
+    if (selectedOption.autoText) {
+        if (state.PlayState && state.PlayState.PlayMethod !== 'Transcode') {
+            text += ' - Direct';
+        } else {
+            text += ' ' + selectedOption.autoText;
+        }
     }
 
-    function getQualitySecondaryText(player) {
-        var state = playbackManager.getPlayerState(player);
-        var isAutoEnabled = playbackManager.enableAutomaticBitrateDetection(player);
-        var currentMaxBitrate = playbackManager.getMaxStreamingBitrate(player);
+    return text;
+}
 
-        var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
-            return stream.Type === 'Video';
-        })[0];
+function showAspectRatioMenu(player, btn) {
+    // each has a name and id
+    var currentId = playbackManager.getAspectRatio(player);
+    var menuItems = playbackManager.getSupportedAspectRatios(player).map(function (i) {
+        return {
+            id: i.id,
+            name: i.name,
+            selected: i.id === currentId
+        };
+    });
 
-        var videoWidth = videoStream ? videoStream.Width : null;
-        var videoHeight = videoStream ? videoStream.Height : null;
-
-        var options = qualityoptions.getVideoQualityOptions({
-            currentMaxBitrate: playbackManager.getMaxStreamingBitrate(player),
-            isAutomaticBitrateEnabled: playbackManager.enableAutomaticBitrateDetection(player),
-            videoWidth: videoWidth,
-            videoHeight: videoHeight,
-            enableAuto: true
-        });
-
-        var menuItems = options.map(function (o) {
-            var opt = {
-                name: o.name,
-                id: o.bitrate,
-                asideText: o.secondaryText
-            };
-
-            if (o.selected) {
-                opt.selected = true;
-            }
-
-            return opt;
-        });
-
-        var selectedOption = options.filter(function (o) {
-            return o.selected;
-        });
-
-        if (!selectedOption.length) {
-            return null;
-        }
-
-        selectedOption = selectedOption[0];
-        var text = selectedOption.name;
-
-        if (selectedOption.autoText) {
-            if (state.PlayState && state.PlayState.PlayMethod !== 'Transcode') {
-                text += ' - Direct';
-            } else {
-                text += ' ' + selectedOption.autoText;
-            }
-        }
-
-        return text;
-    }
-
-    function showAspectRatioMenu(player, btn) {
-        // each has a name and id
-        var currentId = playbackManager.getAspectRatio(player);
-        var menuItems = playbackManager.getSupportedAspectRatios(player).map(function (i) {
-            return {
-                id: i.id,
-                name: i.name,
-                selected: i.id === currentId
-            };
-        });
-
-        return actionsheet.show({
-            items: menuItems,
-            positionTo: btn
-        }).then(function (id) {
-            if (id) {
-                playbackManager.setAspectRatio(id, player);
-                return Promise.resolve();
-            }
-
-            return Promise.reject();
-        });
-    }
-
-    function showWithUser(options, player, user) {
-        var supportedCommands = playbackManager.getSupportedCommands(player);
-        var mediaType = options.mediaType;
-
-        var menuItems = [];
-        if (supportedCommands.indexOf('SetAspectRatio') !== -1) {
-            var currentAspectRatioId = playbackManager.getAspectRatio(player);
-            var currentAspectRatio = playbackManager.getSupportedAspectRatios(player).filter(function (i) {
-                return i.id === currentAspectRatioId;
-            })[0];
-
-            menuItems.push({
-                name: globalize.translate('AspectRatio'),
-                id: 'aspectratio',
-                asideText: currentAspectRatio ? currentAspectRatio.name : null
-            });
-        }
-
-        if (user && user.Policy.EnableVideoPlaybackTranscoding) {
-            var secondaryQualityText = getQualitySecondaryText(player);
-
-            menuItems.push({
-                name: globalize.translate('Quality'),
-                id: 'quality',
-                asideText: secondaryQualityText
-            });
-        }
-
-        var repeatMode = playbackManager.getRepeatMode(player);
-
-        if (supportedCommands.indexOf('SetRepeatMode') !== -1 && playbackManager.currentMediaSource(player).RunTimeTicks) {
-            menuItems.push({
-                name: globalize.translate('RepeatMode'),
-                id: 'repeatmode',
-                asideText: repeatMode === 'RepeatNone' ? globalize.translate('None') : globalize.translate('' + repeatMode)
-            });
-        }
-
-        if (options.suboffset) {
-            menuItems.push({
-                name: globalize.translate('SubtitleOffset'),
-                id: 'suboffset',
-                asideText: null
-            });
-        }
-
-        if (options.stats) {
-            menuItems.push({
-                name: globalize.translate('PlaybackData'),
-                id: 'stats',
-                asideText: null
-            });
-        }
-
-        return actionsheet.show({
-            items: menuItems,
-            positionTo: options.positionTo
-        }).then(function (id) {
-            return handleSelectedOption(id, options, player);
-        });
-    }
-
-    function show(options) {
-        var player = options.player;
-        var currentItem = playbackManager.currentItem(player);
-
-        if (!currentItem || !currentItem.ServerId) {
-            return showWithUser(options, player, null);
-        }
-
-        var apiClient = connectionManager.getApiClient(currentItem.ServerId);
-        return apiClient.getCurrentUser().then(function (user) {
-            return showWithUser(options, player, user);
-        });
-    }
-
-    function handleSelectedOption(id, options, player) {
-        switch (id) {
-            case 'quality':
-                return showQualityMenu(player, options.positionTo);
-            case 'aspectratio':
-                return showAspectRatioMenu(player, options.positionTo);
-            case 'repeatmode':
-                return showRepeatModeMenu(player, options.positionTo);
-            case 'stats':
-                if (options.onOption) {
-                    options.onOption('stats');
-                }
-                return Promise.resolve();
-            case 'suboffset':
-                if (options.onOption) {
-                    options.onOption('suboffset');
-                }
-                return Promise.resolve();
-            default:
-                break;
+    return actionsheet.show({
+        items: menuItems,
+        positionTo: btn
+    }).then(function (id) {
+        if (id) {
+            playbackManager.setAspectRatio(id, player);
+            return Promise.resolve();
         }
 
         return Promise.reject();
+    });
+}
+
+function showWithUser(options, player, user) {
+    var supportedCommands = playbackManager.getSupportedCommands(player);
+    var mediaType = options.mediaType;
+
+    var menuItems = [];
+    if (supportedCommands.indexOf('SetAspectRatio') !== -1) {
+        var currentAspectRatioId = playbackManager.getAspectRatio(player);
+        var currentAspectRatio = playbackManager.getSupportedAspectRatios(player).filter(function (i) {
+            return i.id === currentAspectRatioId;
+        })[0];
+
+        menuItems.push({
+            name: globalize.translate('AspectRatio'),
+            id: 'aspectratio',
+            asideText: currentAspectRatio ? currentAspectRatio.name : null
+        });
     }
 
-    return {
-        show: show
-    };
-});
+    if (user && user.Policy.EnableVideoPlaybackTranscoding) {
+        var secondaryQualityText = getQualitySecondaryText(player);
+
+        menuItems.push({
+            name: globalize.translate('Quality'),
+            id: 'quality',
+            asideText: secondaryQualityText
+        });
+    }
+
+    var repeatMode = playbackManager.getRepeatMode(player);
+
+    if (supportedCommands.indexOf('SetRepeatMode') !== -1 && playbackManager.currentMediaSource(player).RunTimeTicks) {
+        menuItems.push({
+            name: globalize.translate('RepeatMode'),
+            id: 'repeatmode',
+            asideText: repeatMode === 'RepeatNone' ? globalize.translate('None') : globalize.translate('' + repeatMode)
+        });
+    }
+
+    if (options.suboffset) {
+        menuItems.push({
+            name: globalize.translate('SubtitleOffset'),
+            id: 'suboffset',
+            asideText: null
+        });
+    }
+
+    if (options.stats) {
+        menuItems.push({
+            name: globalize.translate('PlaybackData'),
+            id: 'stats',
+            asideText: null
+        });
+    }
+
+    return actionsheet.show({
+        items: menuItems,
+        positionTo: options.positionTo
+    }).then(function (id) {
+        return handleSelectedOption(id, options, player);
+    });
+}
+
+export function show(options) {
+    var player = options.player;
+    var currentItem = playbackManager.currentItem(player);
+
+    if (!currentItem || !currentItem.ServerId) {
+        return showWithUser(options, player, null);
+    }
+
+    var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+    return apiClient.getCurrentUser().then(function (user) {
+        return showWithUser(options, player, user);
+    });
+}
+
+function handleSelectedOption(id, options, player) {
+    switch (id) {
+        case 'quality':
+            return showQualityMenu(player, options.positionTo);
+        case 'aspectratio':
+            return showAspectRatioMenu(player, options.positionTo);
+        case 'repeatmode':
+            return showRepeatModeMenu(player, options.positionTo);
+        case 'stats':
+            if (options.onOption) {
+                options.onOption('stats');
+            }
+            return Promise.resolve();
+        case 'suboffset':
+            if (options.onOption) {
+                options.onOption('suboffset');
+            }
+            return Promise.resolve();
+        default:
+            break;
+    }
+
+    return Promise.reject();
+}
+
+export default {
+    show: show
+};

src/components/playback/playmethodhelper.js

@@ -1,24 +1,20 @@
-define([], function () {
-    'use strict';
+export function getDisplayPlayMethod(session) {
 
-    function getDisplayPlayMethod(session) {
-
-        if (!session.NowPlayingItem) {
-            return null;
-        }
-
-        if (session.TranscodingInfo && session.TranscodingInfo.IsVideoDirect) {
-            return 'DirectStream';
-        } else if (session.PlayState.PlayMethod === 'Transcode') {
-            return 'Transcode';
-        } else if (session.PlayState.PlayMethod === 'DirectStream') {
-            return 'DirectPlay';
-        } else if (session.PlayState.PlayMethod === 'DirectPlay') {
-            return 'DirectPlay';
-        }
+    if (!session.NowPlayingItem) {
+        return null;
     }
 
-    return {
-        getDisplayPlayMethod: getDisplayPlayMethod
-    };
-});
+    if (session.TranscodingInfo && session.TranscodingInfo.IsVideoDirect) {
+        return 'DirectStream';
+    } else if (session.PlayState.PlayMethod === 'Transcode') {
+        return 'Transcode';
+    } else if (session.PlayState.PlayMethod === 'DirectStream') {
+        return 'DirectPlay';
+    } else if (session.PlayState.PlayMethod === 'DirectPlay') {
+        return 'DirectPlay';
+    }
+}
+
+export default {
+    getDisplayPlayMethod: getDisplayPlayMethod
+};

src/components/playback/volumeosd.js

@@ -1,159 +1,161 @@
-define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'material-icons'], function (events, playbackManager, dom, browser) {
-    'use strict';
+import events from 'events';
+import playbackManager from 'playbackManager';
+import dom from 'dom';
+import browser from 'browser';
+import 'css!./iconosd';
+import 'material-icons';
 
-    var currentPlayer;
-    var osdElement;
-    var iconElement;
-    var progressElement;
+var currentPlayer;
+var osdElement;
+var iconElement;
+var progressElement;
 
-    var enableAnimation;
+var enableAnimation;
 
-    function getOsdElementHtml() {
-        var html = '';
+function getOsdElementHtml() {
+    var html = '';
 
-        html += '<span class="material-icons iconOsdIcon volume_up"></span>';
+    html += '<span class="material-icons iconOsdIcon volume_up"></span>';
 
-        html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner"></div></div>';
+    html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner"></div></div>';
 
-        return html;
+    return html;
+}
+
+function ensureOsdElement() {
+
+    var elem = osdElement;
+    if (!elem) {
+
+        enableAnimation = browser.supportsCssAnimation();
+
+        elem = document.createElement('div');
+        elem.classList.add('hide');
+        elem.classList.add('iconOsd');
+        elem.classList.add('iconOsd-hidden');
+        elem.classList.add('volumeOsd');
+        elem.innerHTML = getOsdElementHtml();
+
+        iconElement = elem.querySelector('.material-icons');
+        progressElement = elem.querySelector('.iconOsdProgressInner');
+
+        document.body.appendChild(elem);
+        osdElement = elem;
     }
+}
 
-    function ensureOsdElement() {
+function onHideComplete() {
+    this.classList.add('hide');
+}
 
-        var elem = osdElement;
-        if (!elem) {
+var hideTimeout;
+function showOsd() {
 
-            enableAnimation = browser.supportsCssAnimation();
+    clearHideTimeout();
 
-            elem = document.createElement('div');
-            elem.classList.add('hide');
-            elem.classList.add('iconOsd');
-            elem.classList.add('iconOsd-hidden');
-            elem.classList.add('volumeOsd');
-            elem.innerHTML = getOsdElementHtml();
+    var elem = osdElement;
 
-            iconElement = elem.querySelector('.material-icons');
-            progressElement = elem.querySelector('.iconOsdProgressInner');
-
-            document.body.appendChild(elem);
-            osdElement = elem;
-        }
-    }
-
-    function onHideComplete() {
-        this.classList.add('hide');
-    }
-
-    var hideTimeout;
-    function showOsd() {
-
-        clearHideTimeout();
-
-        var elem = osdElement;
-
-        dom.removeEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
-            once: true
-        });
-
-        elem.classList.remove('hide');
-
-        // trigger reflow
-        void elem.offsetWidth;
-
-        requestAnimationFrame(function () {
-            elem.classList.remove('iconOsd-hidden');
-
-            hideTimeout = setTimeout(hideOsd, 3000);
-        });
-    }
-
-    function clearHideTimeout() {
-        if (hideTimeout) {
-            clearTimeout(hideTimeout);
-            hideTimeout = null;
-        }
-    }
-
-    function hideOsd() {
-
-        clearHideTimeout();
-
-        var elem = osdElement;
-        if (elem) {
-
-            if (enableAnimation) {
-                // trigger reflow
-                void elem.offsetWidth;
-
-                requestAnimationFrame(function () {
-                    elem.classList.add('iconOsd-hidden');
-
-                    dom.addEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
-                        once: true
-                    });
-                });
-            } else {
-                onHideComplete.call(elem);
-            }
-        }
-    }
-
-    function updatePlayerVolumeState(isMuted, volume) {
-
-        if (iconElement) {
-            iconElement.classList.remove('volume_off', 'volume_up');
-            iconElement.classList.add(isMuted ? 'volume_off' : 'volume_up');
-        }
-        if (progressElement) {
-            progressElement.style.width = (volume || 0) + '%';
-        }
-    }
-
-    function releaseCurrentPlayer() {
-
-        var player = currentPlayer;
-
-        if (player) {
-            events.off(player, 'volumechange', onVolumeChanged);
-            events.off(player, 'playbackstop', hideOsd);
-            currentPlayer = null;
-        }
-    }
-
-    function onVolumeChanged(e) {
-
-        var player = this;
-
-        ensureOsdElement();
-
-        updatePlayerVolumeState(player.isMuted(), player.getVolume());
-
-        showOsd();
-    }
-
-    function bindToPlayer(player) {
-
-        if (player === currentPlayer) {
-            return;
-        }
-
-        releaseCurrentPlayer();
-
-        currentPlayer = player;
-
-        if (!player) {
-            return;
-        }
-
-        hideOsd();
-        events.on(player, 'volumechange', onVolumeChanged);
-        events.on(player, 'playbackstop', hideOsd);
-    }
-
-    events.on(playbackManager, 'playerchange', function () {
-        bindToPlayer(playbackManager.getCurrentPlayer());
+    dom.removeEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
+        once: true
     });
 
-    bindToPlayer(playbackManager.getCurrentPlayer());
+    elem.classList.remove('hide');
 
+    // trigger reflow
+    void elem.offsetWidth;
+
+    requestAnimationFrame(function () {
+        elem.classList.remove('iconOsd-hidden');
+
+        hideTimeout = setTimeout(hideOsd, 3000);
+    });
+}
+
+function clearHideTimeout() {
+    if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = null;
+    }
+}
+
+function hideOsd() {
+
+    clearHideTimeout();
+
+    var elem = osdElement;
+    if (elem) {
+
+        if (enableAnimation) {
+            // trigger reflow
+            void elem.offsetWidth;
+
+            requestAnimationFrame(function () {
+                elem.classList.add('iconOsd-hidden');
+
+                dom.addEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
+                    once: true
+                });
+            });
+        } else {
+            onHideComplete.call(elem);
+        }
+    }
+}
+
+function updatePlayerVolumeState(isMuted, volume) {
+
+    if (iconElement) {
+        iconElement.classList.remove('volume_off', 'volume_up');
+        iconElement.classList.add(isMuted ? 'volume_off' : 'volume_up');
+    }
+    if (progressElement) {
+        progressElement.style.width = (volume || 0) + '%';
+    }
+}
+
+function releaseCurrentPlayer() {
+
+    var player = currentPlayer;
+
+    if (player) {
+        events.off(player, 'volumechange', onVolumeChanged);
+        events.off(player, 'playbackstop', hideOsd);
+        currentPlayer = null;
+    }
+}
+
+function onVolumeChanged(e) {
+
+    var player = this;
+
+    ensureOsdElement();
+
+    updatePlayerVolumeState(player.isMuted(), player.getVolume());
+
+    showOsd();
+}
+
+function bindToPlayer(player) {
+
+    if (player === currentPlayer) {
+        return;
+    }
+
+    releaseCurrentPlayer();
+
+    currentPlayer = player;
+
+    if (!player) {
+        return;
+    }
+
+    hideOsd();
+    events.on(player, 'volumechange', onVolumeChanged);
+    events.on(player, 'playbackstop', hideOsd);
+}
+
+events.on(playbackManager, 'playerchange', function () {
+    bindToPlayer(playbackManager.getCurrentPlayer());
 });
+
+bindToPlayer(playbackManager.getCurrentPlayer());

src/components/prompt/prompt.template.html

@@ -2,12 +2,12 @@
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
         <span class="material-icons arrow_back"></span>
     </button>
+
     <h3 class="formDialogHeaderTitle"></h3>
 </div>
 
 <div class="formDialogContent smoothScrollY">
     <div class="dialogContentInner dialog-content-centered" style="padding-top:2em;">
-
         <form>
             <div class="inputContainer">
                 <input is="emby-input" type="text" id="txtInput" label="" />
@@ -19,7 +19,6 @@
                     <span class="submitText"></span>
                 </button>
             </div>
-
         </form>
     </div>
 </div>

src/components/remotecontrol/remotecontrol.js

@@ -196,7 +196,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
                 context.querySelector('.nowPlayingPageImage').classList.remove('nowPlayingPageImageAudio');
             }
         } else {
-            imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardContent-button cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album"></span></button></div>';
+            imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album"></span></button></div>';
         }
     }
 

src/components/serverRestartDialog.js

@@ -1,158 +0,0 @@
-define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle', 'flexStyles'], function (loading, events, dialogHelper, dom, layoutManager, scrollHelper, globalize, require) {
-    'use strict';
-
-    var currentApiClient;
-    var currentDlg;
-    var currentInstance;
-
-    function reloadPageWhenServerAvailable(retryCount) {
-        var apiClient = currentApiClient;
-        if (!apiClient) {
-            return;
-        }
-
-        // Don't use apiclient method because we don't want it reporting authentication under the old version
-        apiClient.getJSON(apiClient.getUrl('System/Info')).then(function (info) {
-
-            // If this is back to false, the restart completed
-            if (!info.IsShuttingDown) {
-                currentInstance.restarted = true;
-                dialogHelper.close(currentDlg);
-            } else {
-                retryReload(retryCount);
-            }
-
-        }, function () {
-            retryReload(retryCount);
-        });
-    }
-
-    function retryReload(retryCount) {
-        setTimeout(function () {
-            retryCount = retryCount || 0;
-            retryCount++;
-
-            if (retryCount < 150) {
-                reloadPageWhenServerAvailable(retryCount);
-            }
-        }, 500);
-    }
-
-    function startRestart(instance, apiClient, dlg) {
-        currentApiClient = apiClient;
-        currentDlg = dlg;
-        currentInstance = instance;
-
-        apiClient.restartServer().then(function () {
-            setTimeout(reloadPageWhenServerAvailable, 250);
-        });
-    }
-
-    function showDialog(instance, options, template) {
-
-        var dialogOptions = {
-            removeOnClose: true,
-            scrollY: false
-        };
-
-        var enableTvLayout = layoutManager.tv;
-
-        if (enableTvLayout) {
-            dialogOptions.size = 'fullscreen';
-        }
-
-        var dlg = dialogHelper.createDialog(dialogOptions);
-
-        var configuredButtons = [];
-
-        dlg.classList.add('formDialog');
-
-        dlg.innerHTML = globalize.translateHtml(template, 'core');
-
-        dlg.classList.add('align-items-center');
-        dlg.classList.add('justify-items-center');
-
-        var formDialogContent = dlg.querySelector('.formDialogContent');
-        formDialogContent.style['flex-grow'] = 'initial';
-
-        if (enableTvLayout) {
-            formDialogContent.style['max-width'] = '50%';
-            formDialogContent.style['max-height'] = '60%';
-            scrollHelper.centerFocus.on(formDialogContent, false);
-        } else {
-            formDialogContent.style.maxWidth = (Math.min((configuredButtons.length * 150) + 200, dom.getWindowSize().innerWidth - 50)) + 'px';
-            dlg.classList.add('dialog-fullscreen-lowres');
-        }
-
-        dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('HeaderRestartingServer');
-
-        dlg.querySelector('.text').innerHTML = globalize.translate('RestartPleaseWaitMessage');
-
-        var i;
-        var length;
-        var html = '';
-        for (i = 0, length = configuredButtons.length; i < length; i++) {
-            var item = configuredButtons[i];
-            var autoFocus = i === 0 ? ' autofocus' : '';
-            var buttonClass = 'btnOption raised formDialogFooterItem formDialogFooterItem-autosize';
-
-            if (item.type) {
-                buttonClass += ' button-' + item.type;
-            }
-            html += '<button is="emby-button" type="button" class="' + buttonClass + '" data-id="' + item.id + '"' + autoFocus + '>' + item.name + '</button>';
-        }
-
-        dlg.querySelector('.formDialogFooter').innerHTML = html;
-
-        function onButtonClick() {
-            dialogHelper.close(dlg);
-        }
-
-        var buttons = dlg.querySelectorAll('.btnOption');
-        for (i = 0, length = buttons.length; i < length; i++) {
-            buttons[i].addEventListener('click', onButtonClick);
-        }
-
-        var dlgPromise = dialogHelper.open(dlg);
-
-        startRestart(instance, options.apiClient, dlg);
-
-        return dlgPromise.then(function () {
-
-            if (enableTvLayout) {
-                scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
-            }
-
-            instance.destroy();
-            loading.hide();
-
-            if (instance.restarted) {
-                events.trigger(instance, 'restarted');
-            }
-        });
-    }
-
-    function ServerRestartDialog(options) {
-        this.options = options;
-    }
-
-    ServerRestartDialog.prototype.show = function () {
-        var instance = this;
-        loading.show();
-
-        return new Promise(function (resolve, reject) {
-            require(['text!./../dialog/dialog.template.html'], function (template) {
-                showDialog(instance, instance.options, template).then(resolve, reject);
-            });
-        });
-    };
-
-    ServerRestartDialog.prototype.destroy = function () {
-        currentApiClient = null;
-        currentDlg = null;
-        currentInstance = null;
-        this.options = null;
-    };
-
-    return ServerRestartDialog;
-});

src/components/slideshow/slideshow.js

@@ -2,9 +2,20 @@
  * Image viewer component
  * @module components/slideshow/slideshow
  */
-define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost) {
+define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'dom', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost, dom) {
     'use strict';
 
+    /**
+     * Name of transition event.
+     */
+    const transitionEndEventName = dom.whichTransitionEvent();
+
+    /**
+     * Flag to use fake image to fix blurry zoomed image.
+     * At least WebKit doesn't restore quality for zoomed images.
+     */
+    const useFakeZoomImage = browser.safari;
+
     /**
      * Retrieves an item's image URL from the API.
      * @param {object|string} item - Item used to generate the image URL.
@@ -240,6 +251,41 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
             }
         }
 
+        /**
+         * Handles zoom changes.
+         */
+        function onZoomChange(scale, imageEl, slideEl) {
+            const zoomImage = slideEl.querySelector('.swiper-zoom-fakeimg');
+
+            if (zoomImage) {
+                zoomImage.style.width = zoomImage.style.height = scale * 100 + '%';
+
+                if (scale > 1) {
+                    if (zoomImage.classList.contains('swiper-zoom-fakeimg-hidden')) {
+                        // Await for Swiper style changes
+                        setTimeout(() => {
+                            const callback = () => {
+                                imageEl.removeEventListener(transitionEndEventName, callback);
+                                zoomImage.classList.remove('swiper-zoom-fakeimg-hidden');
+                            };
+
+                            // Swiper set 'transition-duration: 300ms' for auto zoom
+                            // and 'transition-duration: 0s' for touch zoom
+                            const transitionDuration = parseFloat(imageEl.style.transitionDuration.replace(/[a-z]/i, ''));
+
+                            if (transitionDuration > 0) {
+                                imageEl.addEventListener(transitionEndEventName, callback);
+                            } else {
+                                callback();
+                            }
+                        }, 0);
+                    }
+                } else {
+                    zoomImage.classList.add('swiper-zoom-fakeimg-hidden');
+                }
+            }
+        }
+
         /**
          * Initializes the Swiper instance and binds the relevant events.
          * @param {HTMLElement} dialog - Element containing the dialog.
@@ -260,8 +306,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
                     loop: false,
                     zoom: {
                         minRatio: 1,
-                        toggle: true,
-                        containerClass: 'slider-zoom-container'
+                        toggle: true
                     },
                     autoplay: !options.interactive,
                     keyboard: {
@@ -288,6 +333,10 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
 
                 swiperInstance.on('autoplayStart', onAutoplayStart);
                 swiperInstance.on('autoplayStop', onAutoplayStop);
+
+                if (useFakeZoomImage) {
+                    swiperInstance.on('zoomChange', onZoomChange);
+                }
             });
         }
 
@@ -328,7 +377,10 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
         function getSwiperSlideHtmlFromSlide(item) {
             var html = '';
             html += '<div class="swiper-slide" data-original="' + item.originalImage + '" data-itemid="' + item.Id + '" data-serverid="' + item.ServerId + '">';
-            html += '<div class="slider-zoom-container">';
+            html += '<div class="swiper-zoom-container">';
+            if (useFakeZoomImage) {
+                html += `<div class="swiper-zoom-fakeimg swiper-zoom-fakeimg-hidden" style="background-image: url('${item.originalImage}')"></div>`;
+            }
             html += '<img src="' + item.originalImage + '" class="swiper-slide-img">';
             html += '</div>';
             if (item.title || item.subtitle) {

src/components/slideshow/style.css

@@ -40,16 +40,6 @@
     text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
 }
 
-.swiper-slide-img {
-    max-height: 100%;
-    max-width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    margin: auto;
-}
-
 .slideshowButtonIcon {
     color: #fff;
     opacity: 0.7;
@@ -135,13 +125,18 @@
     color: #ccc;
 }
 
-.swiper-slide {
-    display: flex;
-    flex-direction: column;
+.swiper-zoom-fakeimg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: contain;
+    z-index: 1;
+    pointer-events: none;
 }
 
-.slider-zoom-container {
-    margin: auto;
-    max-height: 100%;
-    max-width: 100%;
+.swiper-zoom-fakeimg-hidden {
+    display: none;
 }

src/components/syncPlay/syncPlayManager.js

@@ -1,6 +1,6 @@
 /**
  * Module that manages the SyncPlay feature.
- * @module components/syncplay/syncPlayManager
+ * @module components/syncPlay/syncPlayManager
  */
 
 import events from 'events';

src/components/syncPlay/timeSyncManager.js

@@ -1,6 +1,6 @@
 /**
  * Module that manages time syncing with server.
- * @module components/syncplay/timeSyncManager
+ * @module components/syncPlay/timeSyncManager
  */
 
 import events from 'events';
@@ -65,8 +65,6 @@ class TimeSyncManager {
         this.pings = 0; // number of pings
         this.measurement = null; // current time sync
         this.measurements = [];
-
-        this.startPing();
     }
 
     /**

src/components/viewContainer.js

@@ -43,10 +43,6 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
             var newView = newViewInfo.elem;
             var modulesToLoad = [];
 
-            if (isPluginpage) {
-                modulesToLoad.push('legacyDashboard');
-            }
-
             if (newViewInfo.hasjQuerySelect) {
                 modulesToLoad.push('legacySelectMenu');
             }

src/components/viewManager/viewManager.js

@@ -21,10 +21,11 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
         if (!newView.initComplete) {
             newView.initComplete = true;
 
+            var controller;
             if (typeof options.controllerFactory === 'function') {
-
-                // Use controller method
-                var controller = new options.controllerFactory(newView, eventDetail.detail.params);
+                controller = new options.controllerFactory(newView, eventDetail.detail.params);
+            } else if (options.controllerFactory && typeof options.controllerFactory.default === 'function') {
+                controller = new options.controllerFactory.default(newView, eventDetail.detail.params);
             }
 
             if (!options.controllerFactory || dispatchPageEvents) {

src/components/viewSettings/viewSettings.js

@@ -57,7 +57,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
 
         return new Promise(function (resolve, reject) {
 
-            require(['text!./viewsettings.template.html'], function (template) {
+            require(['text!./viewSettings.template.html'], function (template) {
 
                 var dialogOptions = {
                     removeOnClose: true,

src/config.json

@@ -0,0 +1 @@
+config.template.json

src/config.template.json

@@ -1,3 +1,3 @@
 {
-    "multiserver": true
+    "multiserver": false
 }

src/controllers/dashboard/dashboard.js

@@ -252,12 +252,6 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
                 html += '</div>';
                 html += '</div>';
 
-                if (session.TranscodingInfo && session.TranscodingInfo.Framerate) {
-                    html += '<div class="sessionTranscodingFramerate">' + session.TranscodingInfo.Framerate + ' fps</div>';
-                } else {
-                    html += '<div class="sessionTranscodingFramerate"></div>';
-                }
-
                 html += '<div class="sessionNowPlayingDetails">';
                 var nowPlayingName = DashboardPage.getNowPlayingName(session);
                 html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
@@ -573,7 +567,6 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
             row.querySelector('.sessionNowPlayingTime').innerHTML = DashboardPage.getSessionNowPlayingTime(session);
             row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session);
             row.querySelector('.sessionAppSecondaryText').innerHTML = DashboardPage.getAppSecondaryText(session);
-            row.querySelector('.sessionTranscodingFramerate').innerHTML = session.TranscodingInfo && session.TranscodingInfo.Framerate ? session.TranscodingInfo.Framerate + ' fps' : '';
             var nowPlayingName = DashboardPage.getNowPlayingName(session);
             var nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo');
 

src/controllers/dashboard/dlna/profile.js

@@ -23,8 +23,8 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         $('.chkMediaType', page).each(function () {
             this.checked = -1 != (profile.SupportedMediaTypes || '').split(',').indexOf(this.getAttribute('data-value'));
         });
-        $('#chkEnableAlbumArtInDidl', page).checked = profile.EnableAlbumArtInDidl;
-        $('#chkEnableSingleImageLimit', page).checked = profile.EnableSingleAlbumArtLimit;
+        $('#chkEnableAlbumArtInDidl', page).prop('checked', profile.EnableAlbumArtInDidl);
+        $('#chkEnableSingleImageLimit', page).prop('checked', profile.EnableSingleAlbumArtLimit);
         renderXmlDocumentAttributes(page, profile.XmlRootAttributes || []);
         var idInfo = profile.Identification || {};
         renderIdentificationHeaders(page, idInfo.Headers || []);
@@ -51,11 +51,11 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         $('#txtAlbumArtMaxHeight', page).val(profile.MaxAlbumArtHeight || '');
         $('#txtIconMaxWidth', page).val(profile.MaxIconWidth || '');
         $('#txtIconMaxHeight', page).val(profile.MaxIconHeight || '');
-        $('#chkIgnoreTranscodeByteRangeRequests', page).checked = profile.IgnoreTranscodeByteRangeRequests;
+        $('#chkIgnoreTranscodeByteRangeRequests', page).prop('checked', profile.IgnoreTranscodeByteRangeRequests);
         $('#txtMaxAllowedBitrate', page).val(profile.MaxStreamingBitrate || '');
         $('#txtMusicStreamingTranscodingBitrate', page).val(profile.MusicStreamingTranscodingBitrate || '');
-        $('#chkRequiresPlainFolders', page).checked = profile.RequiresPlainFolders;
-        $('#chkRequiresPlainVideoItems', page).checked = profile.RequiresPlainVideoItems;
+        $('#chkRequiresPlainFolders', page).prop('checked', profile.RequiresPlainFolders);
+        $('#chkRequiresPlainVideoItems', page).prop('checked', profile.RequiresPlainVideoItems);
         $('#txtProtocolInfo', page).val(profile.ProtocolInfo || '');
         $('#txtXDlnaCap', page).val(profile.XDlnaCap || '');
         $('#txtXDlnaDoc', page).val(profile.XDlnaDoc || '');
@@ -357,9 +357,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         $('#txtTranscodingAudioCodec', popup).val(transcodingProfile.AudioCodec || '');
         $('#txtTranscodingVideoCodec', popup).val(transcodingProfile.VideoCodec || '');
         $('#selectTranscodingProtocol', popup).val(transcodingProfile.Protocol || 'Http');
-        $('#chkEnableMpegtsM2TsMode', popup).checked = transcodingProfile.EnableMpegtsM2TsMode || false;
-        $('#chkEstimateContentLength', popup).checked = transcodingProfile.EstimateContentLength || false;
-        $('#chkReportByteRangeRequests', popup).checked = 'Bytes' == transcodingProfile.TranscodeSeekInfo;
+        $('#chkEnableMpegtsM2TsMode', popup).prop('checked', transcodingProfile.EnableMpegtsM2TsMode || false);
+        $('#chkEstimateContentLength', popup).prop('checked', transcodingProfile.EstimateContentLength || false);
+        $('#chkReportByteRangeRequests', popup).prop('checked', 'Bytes' == transcodingProfile.TranscodeSeekInfo);
         $('.radioTabButton:first', popup).trigger('click');
         openPopup(popup[0]);
     }
@@ -376,9 +376,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         currentSubProfile.VideoCodec = $('#txtTranscodingVideoCodec', page).val();
         currentSubProfile.Protocol = $('#selectTranscodingProtocol', page).val();
         currentSubProfile.Context = 'Streaming';
-        currentSubProfile.EnableMpegtsM2TsMode = $('#chkEnableMpegtsM2TsMode', page).checked;
-        currentSubProfile.EstimateContentLength = $('#chkEstimateContentLength', page).checked;
-        currentSubProfile.TranscodeSeekInfo = $('#chkReportByteRangeRequests', page).checked ? 'Bytes' : 'Auto';
+        currentSubProfile.EnableMpegtsM2TsMode = $('#chkEnableMpegtsM2TsMode', page).is(':checked');
+        currentSubProfile.EstimateContentLength = $('#chkEstimateContentLength', page).is(':checked');
+        currentSubProfile.TranscodeSeekInfo = $('#chkReportByteRangeRequests', page).is(':checked') ? 'Bytes' : 'Auto';
 
         if (isSubProfileNew) {
             currentProfile.TranscodingProfiles.push(currentSubProfile);
@@ -647,8 +647,8 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
 
     function updateProfile(page, profile) {
         profile.Name = $('#txtName', page).val();
-        profile.EnableAlbumArtInDidl = $('#chkEnableAlbumArtInDidl', page).checked;
-        profile.EnableSingleAlbumArtLimit = $('#chkEnableSingleImageLimit', page).checked;
+        profile.EnableAlbumArtInDidl = $('#chkEnableAlbumArtInDidl', page).is(':checked');
+        profile.EnableSingleAlbumArtLimit = $('#chkEnableSingleImageLimit', page).is(':checked');
         profile.SupportedMediaTypes = $('.chkMediaType:checked', page).get().map(function (c) {
             return c.getAttribute('data-value');
         }).join(',');
@@ -675,9 +675,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in
         profile.MaxAlbumArtHeight = $('#txtAlbumArtMaxHeight', page).val();
         profile.MaxIconWidth = $('#txtIconMaxWidth', page).val();
         profile.MaxIconHeight = $('#txtIconMaxHeight', page).val();
-        profile.RequiresPlainFolders = $('#chkRequiresPlainFolders', page).checked;
-        profile.RequiresPlainVideoItems = $('#chkRequiresPlainVideoItems', page).checked;
-        profile.IgnoreTranscodeByteRangeRequests = $('#chkIgnoreTranscodeByteRangeRequests', page).checked;
+        profile.RequiresPlainFolders = $('#chkRequiresPlainFolders', page).is(':checked');
+        profile.RequiresPlainVideoItems = $('#chkRequiresPlainVideoItems', page).is(':checked');
+        profile.IgnoreTranscodeByteRangeRequests = $('#chkIgnoreTranscodeByteRangeRequests', page).is(':checked');
         profile.MaxStreamingBitrate = $('#txtMaxAllowedBitrate', page).val();
         profile.MusicStreamingTranscodingBitrate = $('#txtMusicStreamingTranscodingBitrate', page).val();
         profile.ProtocolInfo = $('#txtProtocolInfo', page).val();

src/controllers/dashboard/dlna/settings.js

@@ -5,8 +5,8 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
         page.querySelector('#chkEnablePlayTo').checked = config.EnablePlayTo;
         page.querySelector('#chkEnableDlnaDebugLogging').checked = config.EnableDebugLog;
         $('#txtClientDiscoveryInterval', page).val(config.ClientDiscoveryIntervalSeconds);
-        $('#chkEnableServer', page).checked = config.EnableServer;
-        $('#chkBlastAliveMessages', page).checked = config.BlastAliveMessages;
+        $('#chkEnableServer', page).prop('checked', config.EnableServer);
+        $('#chkBlastAliveMessages', page).prop('checked', config.BlastAliveMessages);
         $('#txtBlastInterval', page).val(config.BlastAliveMessageIntervalSeconds);
         var usersHtml = users.map(function (u) {
             return '<option value="' + u.Id + '">' + u.Name + '</option>';
@@ -22,8 +22,8 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
             config.EnablePlayTo = form.querySelector('#chkEnablePlayTo').checked;
             config.EnableDebugLog = form.querySelector('#chkEnableDlnaDebugLogging').checked;
             config.ClientDiscoveryIntervalSeconds = $('#txtClientDiscoveryInterval', form).val();
-            config.EnableServer = $('#chkEnableServer', form).checked;
-            config.BlastAliveMessages = $('#chkBlastAliveMessages', form).checked;
+            config.EnableServer = $('#chkEnableServer', form).is(':checked');
+            config.BlastAliveMessages = $('#chkBlastAliveMessages', form).is(':checked');
             config.BlastAliveMessageIntervalSeconds = $('#txtBlastInterval', form).val();
             config.DefaultUserId = $('#selectUser', form).val();
             ApiClient.updateNamedConfiguration('dlna', config).then(Dashboard.processServerConfigurationUpdateResult);

src/controllers/dashboard/encodingsettings.js

@@ -5,6 +5,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
         Array.prototype.forEach.call(page.querySelectorAll('.chkDecodeCodec'), function (c) {
             c.checked = -1 !== (config.HardwareDecodingCodecs || []).indexOf(c.getAttribute('data-codec'));
         });
+        page.querySelector('#chkDecodingColorDepth10Hevc').checked = config.EnableDecodingColorDepth10Hevc;
+        page.querySelector('#chkDecodingColorDepth10Vp9').checked = config.EnableDecodingColorDepth10Vp9;
         page.querySelector('#chkHardwareEncoding').checked = config.EnableHardwareEncoding;
         $('#selectVideoDecoder', page).val(config.HardwareAccelerationType);
         $('#selectThreadCount', page).val(config.EncodingThreadCount);
@@ -67,6 +69,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo
                 }), function (c) {
                     return c.getAttribute('data-codec');
                 });
+                config.EnableDecodingColorDepth10Hevc = form.querySelector('#chkDecodingColorDepth10Hevc').checked;
+                config.EnableDecodingColorDepth10Vp9 = form.querySelector('#chkDecodingColorDepth10Vp9').checked;
                 config.EnableHardwareEncoding = form.querySelector('#chkHardwareEncoding').checked;
                 ApiClient.updateNamedConfiguration('encoding', config).then(function () {
                     updateEncoder(form);

src/controllers/dashboard/logs.js

@@ -1,6 +1,12 @@
-define(['datetime', 'loading', 'apphost', 'listViewStyle', 'emby-button', 'flexStyles'], function(datetime, loading, appHost) {
-    'use strict';
-    return function(view, params) {
+import datetime from 'datetime';
+import loading from 'loading';
+import 'emby-button';
+import 'listViewStyle';
+import 'flexStyles';
+
+/* eslint-disable indent */
+
+    export default function(view, params) {
         view.addEventListener('viewbeforeshow', function() {
             loading.show();
             var apiClient = ApiClient;
@@ -29,5 +35,6 @@ define(['datetime', 'loading', 'apphost', 'listViewStyle', 'emby-button', 'flexS
                 loading.hide();
             });
         });
-    };
-});
+    }
+
+/* eslint-enable indent */

src/controllers/dashboard/notifications/notification.js

@@ -50,7 +50,7 @@ define(['jQuery', 'emby-checkbox'], function ($) {
             fillItems($('.monitorUsersList', page), users, 'chkMonitor', 'chkMonitor', notificationConfig.DisabledMonitorUsers);
             fillItems($('.sendToUsersList', page), users, 'chkSendTo', 'chkSendTo', notificationConfig.SendToUsers, true);
             fillItems($('.servicesList', page), services, 'chkService', 'chkService', notificationConfig.DisabledServices);
-            $('#chkEnabled', page).checked = notificationConfig.Enabled || false;
+            $('#chkEnabled', page).prop('checked', notificationConfig.Enabled || false);
             $('#selectUsers', page).val(notificationConfig.SendToUserMode).trigger('change');
         });
     }
@@ -73,7 +73,7 @@ define(['jQuery', 'emby-checkbox'], function ($) {
                 notificationOptions.Options.push(notificationConfig);
             }
 
-            notificationConfig.Enabled = $('#chkEnabled', page).checked;
+            notificationConfig.Enabled = $('#chkEnabled', page).is(':checked');
             notificationConfig.SendToUserMode = $('#selectUsers', page).val();
             notificationConfig.DisabledMonitorUsers = $('.chkMonitor', page).get().filter(function (c) {
                 return !c.checked;

src/controllers/dashboard/plugins/available.js

@@ -123,6 +123,9 @@ define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby
         }, {
             href: 'availableplugins.html',
             name: globalize.translate('TabCatalog')
+        }, {
+            href: 'repositories.html',
+            name: globalize.translate('TabRepositories')
         }];
     }
 

src/controllers/dashboard/plugins/installed.js

@@ -37,20 +37,24 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
         })[0];
         var configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null;
         var html = '';
-        html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' class='card backdropCard'>";
+        html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' data-removable='" + plugin.CanUninstall + "' class='card backdropCard'>";
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable">';
         html += '<div class="cardPadder cardPadder-backdrop"></div>';
-        html += configPageUrl ? '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + configPageUrl + '">' : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer">';
+        html += configPageUrl ? '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + configPageUrl + '">' : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer emby-button">';
         html += '<span class="cardImageIcon material-icons folder"></span>';
         html += configPageUrl ? '</a>' : '</div>';
         html += '</div>';
         html += '<div class="cardFooter">';
-        html += '<div style="text-align:right; float:right;padding-top:5px;">';
-        html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert"></span></button>';
-        html += '</div>';
+
+        if (configPage || plugin.CanUninstall) {
+            html += '<div style="text-align:right; float:right;padding-top:5px;">';
+            html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert"></span></button>';
+            html += '</div>';
+        }
+
         html += "<div class='cardText'>";
-        html += configPage.DisplayName || plugin.Name;
+        html += configPage && configPage.DisplayName ? configPage.DisplayName : plugin.Name;
         html += '</div>';
         html += "<div class='cardText cardText-secondary'>";
         html += plugin.Version;
@@ -104,6 +108,7 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
         var card = dom.parentWithClass(elem, 'card');
         var id = card.getAttribute('data-id');
         var name = card.getAttribute('data-name');
+        var removable = card.getAttribute('data-removable');
         var configHref = card.querySelector('.cardContent').getAttribute('href');
         var menuItems = [];
 
@@ -115,11 +120,13 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
             });
         }
 
-        menuItems.push({
-            name: globalize.translate('ButtonUninstall'),
-            id: 'delete',
-            icon: 'delete'
-        });
+        if (removable === 'true') {
+            menuItems.push({
+                name: globalize.translate('ButtonUninstall'),
+                id: 'delete',
+                icon: 'delete'
+            });
+        }
 
         require(['actionsheet'], function (actionsheet) {
             actionsheet.show({
@@ -153,6 +160,9 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'
         }, {
             href: 'availableplugins.html',
             name: globalize.translate('TabCatalog')
+        }, {
+            href: 'repositories.html',
+            name: globalize.translate('TabRepositories')
         }];
     }
 

src/controllers/dashboard/plugins/repositories.js

@@ -0,0 +1,153 @@
+import loading from 'loading';
+import libraryMenu from 'libraryMenu';
+import globalize from 'globalize';
+import dialogHelper from 'dialogHelper';
+import 'emby-button';
+import 'emby-checkbox';
+import 'emby-select';
+import 'formDialogStyle';
+import 'listViewStyle';
+
+let repositories = [];
+
+function reloadList(page) {
+    loading.show();
+    ApiClient.getJSON(ApiClient.getUrl('Repositories')).then(list => {
+        repositories = list;
+        populateList({
+            listElement: page.querySelector('#repositories'),
+            noneElement: page.querySelector('#none'),
+            repositories: repositories
+        });
+    }).catch(error => {
+        console.error('error loading repositories');
+        page.querySelector('#none').classList.remove('hide');
+        loading.hide();
+    });
+}
+
+function saveList(page) {
+    loading.show();
+    ApiClient.ajax({
+        type: 'POST',
+        url: ApiClient.getUrl('Repositories'),
+        data: JSON.stringify(repositories),
+        contentType: 'application/json'
+    }).then(response => {
+        reloadList(page);
+    }).catch(error => {
+        console.error('error saving repositories');
+        loading.hide();
+    });
+}
+
+function populateList(options) {
+    var html = '';
+
+    html += '<div class="paperList">';
+    for (var i = 0; i < options.repositories.length; i++) {
+        html += getRepositoryHtml(options.repositories[i]);
+    }
+
+    html += '</div>';
+    if (!options.repositories.length) {
+        options.noneElement.classList.remove('hide');
+    }
+
+    options.listElement.innerHTML = html;
+    loading.hide();
+}
+
+function getRepositoryHtml(repository) {
+    var html = '';
+
+    html += '<div class="listItem listItem-border">';
+    html += `<a is="emby-linkbutton" style="margin:0;padding:0" class="clearLink listItemIconContainer" href="${repository.Url}">`;
+    html += '<span class="material-icons listItemIcon open_in_new"></span>';
+    html += '</a>';
+    html += '<div class="listItemBody two-line">';
+    html += `<h3 class="listItemBodyText">${repository.Name}</h3>`;
+    html += `<div class="listItemBodyText secondary">${repository.Url}</div>`;
+    html += '</div>';
+    html += `<button type="button" is="paper-icon-button-light" id="${repository.Url}" class="btnDelete" title="${globalize.translate('ButtonDelete')}"><span class="material-icons delete"></span></button>`;
+    html += '</div>';
+
+    return html;
+}
+
+function getTabs() {
+    return [{
+        href: 'installedplugins.html',
+        name: globalize.translate('TabMyPlugins')
+    }, {
+        href: 'availableplugins.html',
+        name: globalize.translate('TabCatalog')
+    }, {
+        href: 'repositories.html',
+        name: globalize.translate('TabRepositories')
+    }];
+}
+
+export default function(view, params) {
+    view.addEventListener('viewshow', function () {
+        libraryMenu.setTabs('plugins', 2, getTabs);
+        reloadList(this);
+
+        var save = this;
+        $('#repositories', view).on('click', '.btnDelete', function() {
+            var button = this;
+            repositories = repositories.filter(function (r) {
+                return r.Url !== button.id;
+            });
+
+            saveList(save);
+        });
+    });
+
+    view.querySelector('.btnNewRepository').addEventListener('click', () => {
+        let dialog = dialogHelper.createDialog({
+            scrollY: false,
+            size: 'large',
+            modal: false,
+            removeOnClose: true
+        });
+
+        let html = '';
+
+        html += '<div class="formDialogHeader">';
+        html += '<button type="button" is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
+        html += `<h3 class="formDialogHeaderTitle">${globalize.translate('HeaderNewRepository')}</h3>`;
+        html += '</div>';
+        html += '<form class="newPluginForm" style="margin:4em">';
+        html += '<div class="inputContainer">';
+        html += `<input is="emby-input" id="txtRepositoryName" label="${globalize.translate('LabelRepositoryName')}" type="text" required />`;
+        html += `<div class="fieldDescription">${globalize.translate('LabelRepositoryNameHelp')}</div>`;
+        html += '</div>';
+        html += '<div class="inputContainer">';
+        html += `<input is="emby-input" id="txtRepositoryUrl" label="${globalize.translate('LabelRepositoryUrl')}" type="url" required />`;
+        html += `<div class="fieldDescription">${globalize.translate('LabelRepositoryUrlHelp')}</div>`;
+        html += '</div>';
+        html += `<button is="emby-button" type="submit" class="raised button-submit block"><span>${globalize.translate('ButtonSave')}</span></button>`;
+        html += '</div>';
+        html += '</form>';
+
+        dialog.innerHTML = html;
+        dialog.querySelector('.btnCancel').addEventListener('click', () => {
+            dialogHelper.close(dialog);
+        });
+
+        dialog.querySelector('.newPluginForm').addEventListener('submit', () => {
+            repositories.push({
+                Name: dialog.querySelector('#txtRepositoryName').value,
+                Url: dialog.querySelector('#txtRepositoryUrl').value,
+                Enabled: true
+            });
+
+            saveList(view);
+            dialogHelper.close(dialog);
+            return false;
+        });
+
+        dialogHelper.open(dialog);
+    });
+}

src/controllers/dashboard/users/useredit.js

@@ -27,7 +27,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
             }
 
             $('.deleteAccess', page).html(html).trigger('create');
-            $('#chkEnableDeleteAllFolders', page).checked = user.Policy.EnableContentDeletion;
+            $('#chkEnableDeleteAllFolders', page).prop('checked', user.Policy.EnableContentDeletion);
         });
     }
 
@@ -85,23 +85,23 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
         libraryMenu.setTitle(user.Name);
         page.querySelector('.username').innerHTML = user.Name;
         $('#txtUserName', page).val(user.Name);
-        $('#chkIsAdmin', page).checked = user.Policy.IsAdministrator;
-        $('#chkDisabled', page).checked = user.Policy.IsDisabled;
-        $('#chkIsHidden', page).checked = user.Policy.IsHidden;
-        $('#chkRemoteControlSharedDevices', page).checked = user.Policy.EnableSharedDeviceControl;
-        $('#chkEnableRemoteControlOtherUsers', page).checked = user.Policy.EnableRemoteControlOfOtherUsers;
-        $('#chkEnableDownloading', page).checked = user.Policy.EnableContentDownloading;
-        $('#chkManageLiveTv', page).checked = user.Policy.EnableLiveTvManagement;
-        $('#chkEnableLiveTvAccess', page).checked = user.Policy.EnableLiveTvAccess;
-        $('#chkEnableMediaPlayback', page).checked = user.Policy.EnableMediaPlayback;
-        $('#chkEnableAudioPlaybackTranscoding', page).checked = user.Policy.EnableAudioPlaybackTranscoding;
-        $('#chkEnableVideoPlaybackTranscoding', page).checked = user.Policy.EnableVideoPlaybackTranscoding;
-        $('#chkEnableVideoPlaybackRemuxing', page).checked = user.Policy.EnablePlaybackRemuxing;
-        $('#chkForceRemoteSourceTranscoding', page).checked = user.Policy.ForceRemoteSourceTranscoding;
-        $('#chkRemoteAccess', page).checked = null == user.Policy.EnableRemoteAccess || user.Policy.EnableRemoteAccess;
-        $('#chkEnableSyncTranscoding', page).checked = user.Policy.EnableSyncTranscoding;
-        $('#chkEnableConversion', page).checked = user.Policy.EnableMediaConversion || false;
-        $('#chkEnableSharing', page).checked = user.Policy.EnablePublicSharing;
+        $('#chkIsAdmin', page).prop('checked', user.Policy.IsAdministrator);
+        $('#chkDisabled', page).prop('checked', user.Policy.IsDisabled);
+        $('#chkIsHidden', page).prop('checked', user.Policy.IsHidden);
+        $('#chkRemoteControlSharedDevices', page).prop('checked', user.Policy.EnableSharedDeviceControl);
+        $('#chkEnableRemoteControlOtherUsers', page).prop('checked', user.Policy.EnableRemoteControlOfOtherUsers);
+        $('#chkEnableDownloading', page).prop('checked', user.Policy.EnableContentDownloading);
+        $('#chkManageLiveTv', page).prop('checked', user.Policy.EnableLiveTvManagement);
+        $('#chkEnableLiveTvAccess', page).prop('checked', user.Policy.EnableLiveTvAccess);
+        $('#chkEnableMediaPlayback', page).prop('checked', user.Policy.EnableMediaPlayback);
+        $('#chkEnableAudioPlaybackTranscoding', page).prop('checked', user.Policy.EnableAudioPlaybackTranscoding);
+        $('#chkEnableVideoPlaybackTranscoding', page).prop('checked', user.Policy.EnableVideoPlaybackTranscoding);
+        $('#chkEnableVideoPlaybackRemuxing', page).prop('checked', user.Policy.EnablePlaybackRemuxing);
+        $('#chkForceRemoteSourceTranscoding', page).prop('checked', user.Policy.ForceRemoteSourceTranscoding);
+        $('#chkRemoteAccess', page).prop('checked', null == user.Policy.EnableRemoteAccess || user.Policy.EnableRemoteAccess);
+        $('#chkEnableSyncTranscoding', page).prop('checked', user.Policy.EnableSyncTranscoding);
+        $('#chkEnableConversion', page).prop('checked', user.Policy.EnableMediaConversion || false);
+        $('#chkEnableSharing', page).prop('checked', user.Policy.EnablePublicSharing);
         $('#txtRemoteClientBitrateLimit', page).val(user.Policy.RemoteClientBitrateLimit / 1e6 || '');
         $('#txtLoginAttemptsBeforeLockout', page).val(user.Policy.LoginAttemptsBeforeLockout || '0');
         $('#selectSyncPlayAccess').val(user.Policy.SyncPlayAccess);
@@ -119,28 +119,28 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
 
     function saveUser(user, page) {
         user.Name = $('#txtUserName', page).val();
-        user.Policy.IsAdministrator = $('#chkIsAdmin', page).checked;
-        user.Policy.IsHidden = $('#chkIsHidden', page).checked;
-        user.Policy.IsDisabled = $('#chkDisabled', page).checked;
-        user.Policy.EnableRemoteControlOfOtherUsers = $('#chkEnableRemoteControlOtherUsers', page).checked;
-        user.Policy.EnableLiveTvManagement = $('#chkManageLiveTv', page).checked;
-        user.Policy.EnableLiveTvAccess = $('#chkEnableLiveTvAccess', page).checked;
-        user.Policy.EnableSharedDeviceControl = $('#chkRemoteControlSharedDevices', page).checked;
-        user.Policy.EnableMediaPlayback = $('#chkEnableMediaPlayback', page).checked;
-        user.Policy.EnableAudioPlaybackTranscoding = $('#chkEnableAudioPlaybackTranscoding', page).checked;
-        user.Policy.EnableVideoPlaybackTranscoding = $('#chkEnableVideoPlaybackTranscoding', page).checked;
-        user.Policy.EnablePlaybackRemuxing = $('#chkEnableVideoPlaybackRemuxing', page).checked;
-        user.Policy.ForceRemoteSourceTranscoding = $('#chkForceRemoteSourceTranscoding', page).checked;
-        user.Policy.EnableContentDownloading = $('#chkEnableDownloading', page).checked;
-        user.Policy.EnableSyncTranscoding = $('#chkEnableSyncTranscoding', page).checked;
-        user.Policy.EnableMediaConversion = $('#chkEnableConversion', page).checked;
-        user.Policy.EnablePublicSharing = $('#chkEnableSharing', page).checked;
-        user.Policy.EnableRemoteAccess = $('#chkRemoteAccess', page).checked;
+        user.Policy.IsAdministrator = $('#chkIsAdmin', page).is(':checked');
+        user.Policy.IsHidden = $('#chkIsHidden', page).is(':checked');
+        user.Policy.IsDisabled = $('#chkDisabled', page).is(':checked');
+        user.Policy.EnableRemoteControlOfOtherUsers = $('#chkEnableRemoteControlOtherUsers', page).is(':checked');
+        user.Policy.EnableLiveTvManagement = $('#chkManageLiveTv', page).is(':checked');
+        user.Policy.EnableLiveTvAccess = $('#chkEnableLiveTvAccess', page).is(':checked');
+        user.Policy.EnableSharedDeviceControl = $('#chkRemoteControlSharedDevices', page).is(':checked');
+        user.Policy.EnableMediaPlayback = $('#chkEnableMediaPlayback', page).is(':checked');
+        user.Policy.EnableAudioPlaybackTranscoding = $('#chkEnableAudioPlaybackTranscoding', page).is(':checked');
+        user.Policy.EnableVideoPlaybackTranscoding = $('#chkEnableVideoPlaybackTranscoding', page).is(':checked');
+        user.Policy.EnablePlaybackRemuxing = $('#chkEnableVideoPlaybackRemuxing', page).is(':checked');
+        user.Policy.ForceRemoteSourceTranscoding = $('#chkForceRemoteSourceTranscoding', page).is(':checked');
+        user.Policy.EnableContentDownloading = $('#chkEnableDownloading', page).is(':checked');
+        user.Policy.EnableSyncTranscoding = $('#chkEnableSyncTranscoding', page).is(':checked');
+        user.Policy.EnableMediaConversion = $('#chkEnableConversion', page).is(':checked');
+        user.Policy.EnablePublicSharing = $('#chkEnableSharing', page).is(':checked');
+        user.Policy.EnableRemoteAccess = $('#chkRemoteAccess', page).is(':checked');
         user.Policy.RemoteClientBitrateLimit = parseInt(1e6 * parseFloat($('#txtRemoteClientBitrateLimit', page).val() || '0'));
         user.Policy.LoginAttemptsBeforeLockout = parseInt($('#txtLoginAttemptsBeforeLockout', page).val() || '0');
         user.Policy.AuthenticationProviderId = page.querySelector('.selectLoginProvider').value;
         user.Policy.PasswordResetProviderId = page.querySelector('.selectPasswordResetProvider').value;
-        user.Policy.EnableContentDeletion = $('#chkEnableDeleteAllFolders', page).checked;
+        user.Policy.EnableContentDeletion = $('#chkEnableDeleteAllFolders', page).is(':checked');
         user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : $('.chkFolder', page).get().filter(function (c) {
             return c.checked;
         }).map(function (c) {

src/controllers/dashboard/users/userlibraryaccess.js

@@ -47,7 +47,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
             $('.channelAccessContainer', page).hide();
         }
 
-        $('#chkEnableAllChannels', page).checked = user.Policy.EnableAllChannels;
+        $('#chkEnableAllChannels', page).prop('checked', user.Policy.EnableAllChannels);
     }
 
     function loadDevices(page, user, devices) {
@@ -63,7 +63,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
 
         html += '</div>';
         $('.deviceAccess', page).show().html(html);
-        $('#chkEnableAllDevices', page).checked = user.Policy.EnableAllDevices;
+        $('#chkEnableAllDevices', page).prop('checked', user.Policy.EnableAllDevices);
 
         if (user.Policy.IsAdministrator) {
             page.querySelector('.deviceAccessContainer').classList.add('hide');
@@ -90,19 +90,19 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading,
     }
 
     function saveUser(user, page) {
-        user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).checked;
+        user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).is(':checked');
         user.Policy.EnabledFolders = user.Policy.EnableAllFolders ? [] : $('.chkFolder', page).get().filter(function (c) {
             return c.checked;
         }).map(function (c) {
             return c.getAttribute('data-id');
         });
-        user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).checked;
+        user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).is(':checked');
         user.Policy.EnabledChannels = user.Policy.EnableAllChannels ? [] : $('.chkChannel', page).get().filter(function (c) {
             return c.checked;
         }).map(function (c) {
             return c.getAttribute('data-id');
         });
-        user.Policy.EnableAllDevices = $('#chkEnableAllDevices', page).checked;
+        user.Policy.EnableAllDevices = $('#chkEnableAllDevices', page).is(':checked');
         user.Policy.EnabledDevices = user.Policy.EnableAllDevices ? [] : $('.chkDevice', page).get().filter(function (c) {
             return c.checked;
         }).map(function (c) {

src/controllers/dashboard/users/usernew.js

@@ -13,7 +13,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox'], function ($, loading
 
         html += '</div>';
         $('.folderAccess', page).html(html).trigger('create');
-        $('#chkEnableAllFolders', page).checked = false;
+        $('#chkEnableAllFolders', page).prop('checked', false);
     }
 
     function loadChannels(page, channels) {
@@ -35,7 +35,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox'], function ($, loading
             $('.channelAccessContainer', page).hide();
         }
 
-        $('#chkEnableAllChannels', page).checked = false;
+        $('#chkEnableAllChannels', page).prop('checked', false);
     }
 
     function loadUser(page) {
@@ -58,7 +58,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox'], function ($, loading
         user.Name = $('#txtUsername', page).val();
         user.Password = $('#txtPassword', page).val();
         ApiClient.createUser(user).then(function (user) {
-            user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).checked;
+            user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).is(':checked');
             user.Policy.EnabledFolders = [];
 
             if (!user.Policy.EnableAllFolders) {
@@ -69,7 +69,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox'], function ($, loading
                 });
             }
 
-            user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).checked;
+            user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).is(':checked');
             user.Policy.EnabledChannels = [];
 
             if (!user.Policy.EnableAllChannels) {

src/controllers/itemDetails.js

@@ -141,29 +141,29 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
             return;
         }
 
-        playbackManager.getPlaybackMediaSources(item).then(function (mediaSources) {
-            instance._currentPlaybackMediaSources = mediaSources;
-            page.querySelector('.trackSelections').classList.remove('hide');
-            select.setLabel(globalize.translate('LabelVersion'));
-            var currentValue = select.value;
-            var selectedId = mediaSources[0].Id;
-            select.innerHTML = mediaSources.map(function (v) {
-                var selected = v.Id === selectedId ? ' selected' : '';
-                return '<option value="' + v.Id + '"' + selected + '>' + v.Name + '</option>';
-            }).join('');
+        var mediaSources = item.MediaSources;
+        instance._currentPlaybackMediaSources = mediaSources;
+        page.querySelector('.trackSelections').classList.remove('hide');
+        select.setLabel(globalize.translate('LabelVersion'));
+        var currentValue = select.value;
+        var selectedId = mediaSources[0].Id;
+        select.innerHTML = mediaSources.map(function (v) {
+            var selected = v.Id === selectedId ? ' selected' : '';
+            return '<option value="' + v.Id + '"' + selected + '>' + v.Name + '</option>';
+        }).join('');
 
-            if (mediaSources.length > 1) {
-                page.querySelector('.selectSourceContainer').classList.remove('hide');
-            } else {
-                page.querySelector('.selectSourceContainer').classList.add('hide');
-            }
+        if (mediaSources.length > 1) {
+            page.querySelector('.selectSourceContainer').classList.remove('hide');
+        } else {
+            page.querySelector('.selectSourceContainer').classList.add('hide');
+        }
+
+        if (select.value !== currentValue || forceReload) {
+            renderVideoSelections(page, mediaSources);
+            renderAudioSelections(page, mediaSources);
+            renderSubtitleSelections(page, mediaSources);
+        }
 
-            if (select.value !== currentValue || forceReload) {
-                renderVideoSelections(page, mediaSources);
-                renderAudioSelections(page, mediaSources);
-                renderSubtitleSelections(page, mediaSources);
-            }
-        });
     }
 
     function renderVideoSelections(page, mediaSources) {
@@ -400,6 +400,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         } else if (item.Album) {
             parentNameHtml.push(item.Album);
         }
+
         // FIXME: This whole section needs some refactoring, so it becames easier to scale across all form factors. See GH #1022
         var html = '';
         var tvShowHtml = parentNameHtml[0];
@@ -415,9 +416,9 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
                 }
             } else {
                 if (layoutManager.mobile) {
-                    html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + parentNameHtml.join('</br>') + '</h1>';
+                    html = '<h1 class="parentName" style="margin: 0.2em 0 0">' + parentNameHtml.join('</br>') + '</h1>';
                 } else {
-                    html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + tvShowHtml + '</h1>';
+                    html = '<h1 class="parentName" style="margin: 0.2em 0 0">' + tvShowHtml + '</h1>';
                 }
             }
         }
@@ -425,20 +426,19 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         var name = itemHelper.getDisplayName(item, {
             includeParentInfo: false
         });
-        var offset = parentNameLast ? '.25em' : '.5em';
 
         if (html && !parentNameLast) {
             if (!layoutManager.mobile && tvSeasonHtml) {
-                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + tvSeasonHtml + ' - ' + name + '</h3>';
+                html += '<h3 class="itemName infoText" style="margin: 0.2em 0 0">' + tvSeasonHtml + ' - ' + name + '</h3>';
             } else {
-                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + name + '</h3>';
+                html += '<h3 class="itemName infoText" style="margin: 0.2em 0 0">' + name + '</h3>';
             }
         } else {
-            html = '<h1 class="itemName infoText" style="margin: .1em 0 ' + offset + ';">' + name + '</h1>' + html;
+            html = '<h1 class="itemName infoText" style="margin: 0.4em 0 0">' + name + '</h1>' + html;
         }
 
         if (item.OriginalTitle && item.OriginalTitle != item.Name) {
-            html += '<h4 class="itemName infoText" style="margin: -' + offset + ' 0 0;">' + item.OriginalTitle + '</h4>';
+            html += '<h4 class="itemName infoText" style="margin: 0 0 0;">' + item.OriginalTitle + '</h4>';
         }
 
         container.innerHTML = html;
@@ -1106,10 +1106,10 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         var externalLinksElem = page.querySelector('.itemExternalLinks');
 
         renderOverview([overview], item);
+
         var i;
         var itemMiscInfo;
         itemMiscInfo = page.querySelectorAll('.itemMiscInfo-primary');
-
         for (i = 0; i < itemMiscInfo.length; i++) {
             mediaInfo.fillPrimaryMediaInfo(itemMiscInfo[i], item, {
                 interactive: true,
@@ -1125,7 +1125,6 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         }
 
         itemMiscInfo = page.querySelectorAll('.itemMiscInfo-secondary');
-
         for (i = 0; i < itemMiscInfo.length; i++) {
             mediaInfo.fillSecondaryMediaInfo(itemMiscInfo[i], item, {
                 interactive: true
@@ -1840,7 +1839,8 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
                 chaptercardbuilder.buildChapterCards(item, chapters, {
                     itemsContainer: scenesContent,
                     backdropShape: 'overflowBackdrop',
-                    squareShape: 'overflowSquare'
+                    squareShape: 'overflowSquare',
+                    imageBlurhashes: item.ImageBlurHashes
                 });
             });
         } else {
@@ -1891,7 +1891,8 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
                 itemsContainer: castContent,
                 coverImage: true,
                 serverId: item.ServerId,
-                shape: 'overflowPortrait'
+                shape: 'overflowPortrait',
+                imageBlurhashes: item.ImageBlurHashes
             });
         });
     }

src/controllers/livetv/livetvchannels.js

@@ -86,7 +86,7 @@ define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'us
         }
 
         function showFilterMenu(context) {
-            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
                 var filterDialog = new filterDialogFactory({
                     query: getQuery(),
                     mode: 'livetvchannels',

src/controllers/movies/moviecollections.js

@@ -171,7 +171,12 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
                 }
 
                 if (!result.Items.length) {
-                    html = '<p style="text-align:center;">' + globalize.translate('MessageNoCollectionsAvailable') + '</p>';
+                    html = '';
+
+                    html += '<div class="noItemsMessage centerMessage">';
+                    html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
+                    html += '<p>' + globalize.translate('MessageNoCollectionsAvailable') + '</p>';
+                    html += '</div>';
                 }
 
                 var itemsContainer = tabContent.querySelector('.itemsContainer');

src/controllers/movies/moviegenres.js

@@ -165,6 +165,15 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
                     html += '</div>';
                 }
 
+                if (!result.Items.length) {
+                    html = '';
+
+                    html += '<div class="noItemsMessage centerMessage">';
+                    html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
+                    html += '<p>' + globalize.translate('MessageNoGenresAvailable') + '</p>';
+                    html += '</div>';
+                }
+
                 elem.innerHTML = html;
                 lazyLoader.lazyChildren(elem, fillItemsContainer);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(), query);

src/controllers/movies/movies.js

@@ -270,7 +270,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser',
         query = userSettings.loadQuerySettings(savedQueryKey, query);
 
         self.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
                 var filterDialog = new filterDialogFactory({
                     query: query,
                     mode: 'movies',

src/controllers/movies/movietrailers.js

@@ -158,7 +158,12 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
                 }
 
                 if (!result.Items.length) {
-                    html = '<p style="text-align:center;">' + globalize.translate('MessageNoTrailersFound') + '</p>';
+                    html = '';
+
+                    html += '<div class="noItemsMessage centerMessage">';
+                    html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
+                    html += '<p>' + globalize.translate('MessageNoTrailersFound') + '</p>';
+                    html += '</div>';
                 }
 
                 var itemsContainer = tabContent.querySelector('.itemsContainer');
@@ -180,7 +185,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
         var isLoading = false;
 
         self.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
                 var filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: 'movies',

src/controllers/music/musicalbums.js

@@ -186,7 +186,7 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser
         var isLoading = false;
 
         self.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
                 var filterDialog = new filterDialogFactory({
                     query: getQuery(),
                     mode: 'albums',

src/controllers/music/musicartists.js

@@ -170,7 +170,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
         var isLoading = false;
 
         self.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
                 var filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: self.mode,

src/controllers/music/songs.js

@@ -124,7 +124,7 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS
         var isLoading = false;
 
         self.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
                 var filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: 'songs',

src/controllers/shows/episodes.js

@@ -164,7 +164,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB
         var isLoading = false;
 
         self.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
                 var filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: 'episodes',

src/controllers/shows/tvgenres.js

@@ -161,6 +161,15 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader
                     html += '</div>';
                 }
 
+                if (!result.Items.length) {
+                    html = '';
+
+                    html += '<div class="noItemsMessage centerMessage">';
+                    html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
+                    html += '<p>' + globalize.translate('MessageNoGenresAvailable') + '</p>';
+                    html += '</div>';
+                }
+
                 elem.innerHTML = html;
                 lazyLoader.lazyChildren(elem, fillItemsContainer);
                 libraryBrowser.saveQueryValues(getSavedQueryKey(), query);

src/controllers/shows/tvshows.js

@@ -197,7 +197,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', '
         var isLoading = false;
 
         self.showFilterMenu = function () {
-            require(['components/filterdialog/filterdialog'], function (filterDialogFactory) {
+            require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) {
                 var filterDialog = new filterDialogFactory({
                     query: getQuery(tabContent),
                     mode: 'series',

src/controllers/user/display.js

@@ -1,6 +1,9 @@
 define(['displaySettings', 'userSettings', 'autoFocuser'], function (DisplaySettings, userSettings, autoFocuser) {
     'use strict';
 
+    // Shortcuts
+    const UserSettings = userSettings.UserSettings;
+
     return function (view, params) {
         function onBeforeUnload(e) {
             if (hasChanges) {
@@ -11,7 +14,7 @@ define(['displaySettings', 'userSettings', 'autoFocuser'], function (DisplaySett
         var settingsInstance;
         var hasChanges;
         var userId = params.userId || ApiClient.getCurrentUserId();
-        var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new userSettings();
+        var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new UserSettings();
         view.addEventListener('viewshow', function () {
             window.addEventListener('beforeunload', onBeforeUnload);
 

src/controllers/user/home.js

@@ -1,6 +1,9 @@
 define(['homescreenSettings', 'dom', 'globalize', 'loading', 'userSettings', 'autoFocuser', 'listViewStyle'], function (HomescreenSettings, dom, globalize, loading, userSettings, autoFocuser) {
     'use strict';
 
+    // Shortcuts
+    const UserSettings = userSettings.UserSettings;
+
     return function (view, params) {
         function onBeforeUnload(e) {
             if (hasChanges) {
@@ -11,7 +14,7 @@ define(['homescreenSettings', 'dom', 'globalize', 'loading', 'userSettings', 'au
         var homescreenSettingsInstance;
         var hasChanges;
         var userId = params.userId || ApiClient.getCurrentUserId();
-        var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new userSettings();
+        var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new UserSettings();
         view.addEventListener('viewshow', function () {
             window.addEventListener('beforeunload', onBeforeUnload);
 

src/controllers/user/menu.js

@@ -43,12 +43,6 @@ define(['apphost', 'connectionManager', 'layoutManager', 'listViewStyle', 'emby-
                 page.querySelector('.adminSection').classList.add('hide');
             }
 
-            if (layoutManager.mobile) {
-                page.querySelector('.headerUsername').classList.add('hide');
-                page.querySelector('.adminSection').classList.add('hide');
-                page.querySelector('.userSection').classList.add('hide');
-            }
-
             ApiClient.getUser(userId).then(function(user) {
                 page.querySelector('.headerUsername').innerHTML = user.Name;
                 if (!user.Policy.IsAdministrator) {