diff --git a/.ci/azure-pipelines-build.yml b/.ci/azure-pipelines-build.yml new file mode 100644 index 0000000000..128fe54605 --- /dev/null +++ b/.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)' diff --git a/.ci/azure-pipelines-lint.yml b/.ci/azure-pipelines-lint.yml new file mode 100644 index 0000000000..1e4bddbd04 --- /dev/null +++ b/.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' diff --git a/.ci/azure-pipelines-package.yml b/.ci/azure-pipelines-package.yml new file mode 100644 index 0000000000..2249bd20eb --- /dev/null +++ b/.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)' diff --git a/.ci/azure-pipelines.yml b/.ci/azure-pipelines.yml index 059c39aa56..3d7a5f1cde 100644 --- a/.ci/azure-pipelines.yml +++ b/.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 diff --git a/.eslintrc.js b/.eslintrc.js index 27b5c2a237..baf6d0e084 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -132,6 +132,7 @@ module.exports = { 'Object.getOwnPropertyDescriptor', 'Object.getPrototypeOf', 'Object.keys', + 'Object.entries', 'Object.getOwnPropertyNames', 'Function.name', 'Function.hasInstance', @@ -192,4 +193,4 @@ module.exports = { } } ] -} +}; diff --git a/.gitignore b/.gitignore index 9bccd32fb8..36b843f022 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,3 @@ -# config -config.json - # npm dist web @@ -10,5 +7,5 @@ node_modules .idea .vscode -#log +# log yarn-error.log diff --git a/deployment/Dockerfile.centos.all b/deployment/Dockerfile.centos similarity index 51% rename from deployment/Dockerfile.centos.all rename to deployment/Dockerfile.centos index 93bf8d6988..64cffc7eed 100644 --- a/deployment/Dockerfile.centos.all +++ b/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"] diff --git a/deployment/Dockerfile.debian.all b/deployment/Dockerfile.debian similarity index 69% rename from deployment/Dockerfile.debian.all rename to deployment/Dockerfile.debian index 54281a5eb4..80ea103b92 100644 --- a/deployment/Dockerfile.debian.all +++ b/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"] diff --git a/deployment/Dockerfile.docker b/deployment/Dockerfile.docker new file mode 100644 index 0000000000..5d12938185 --- /dev/null +++ b/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} diff --git a/deployment/Dockerfile.fedora.all b/deployment/Dockerfile.fedora similarity index 56% rename from deployment/Dockerfile.fedora.all rename to deployment/Dockerfile.fedora index d47f4ff4da..e6026985d1 100644 --- a/deployment/Dockerfile.fedora.all +++ b/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"] diff --git a/deployment/Dockerfile.portable b/deployment/Dockerfile.portable index e0d1f45265..0d4c79bb2f 100644 --- a/deployment/Dockerfile.portable +++ b/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"] diff --git a/deployment/build.centos b/deployment/build.centos new file mode 100755 index 0000000000..25d1e8c175 --- /dev/null +++ b/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 <>jellyfin-web.spec +* $( LANG=C date '+%a %b %d %Y' ) Jellyfin Packaging Team +- 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 diff --git a/deployment/build.centos.all b/deployment/build.centos.all deleted file mode 100755 index 8c2cec6d33..0000000000 --- a/deployment/build.centos.all +++ /dev/null @@ -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 diff --git a/deployment/build.debian b/deployment/build.debian new file mode 100755 index 0000000000..9fe3fb51e9 --- /dev/null +++ b/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 <changelog +jellyfin-web (${BUILD_ID}-unstable) unstable; urgency=medium + + * Jellyfin Web unstable build ${BUILD_ID} for merged PR #${PR_ID} + + -- Jellyfin Packaging Team $( 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 diff --git a/deployment/build.debian.all b/deployment/build.debian.all deleted file mode 100755 index 8d617a288e..0000000000 --- a/deployment/build.debian.all +++ /dev/null @@ -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 diff --git a/deployment/build.fedora b/deployment/build.fedora new file mode 100755 index 0000000000..60d270ed6c --- /dev/null +++ b/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 <>jellyfin-web.spec +* $( LANG=C date '+%a %b %d %Y' ) Jellyfin Packaging Team +- 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 diff --git a/deployment/build.fedora.all b/deployment/build.fedora.all deleted file mode 100755 index 4ba12f35ea..0000000000 --- a/deployment/build.fedora.all +++ /dev/null @@ -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 diff --git a/deployment/build.portable b/deployment/build.portable index c4cbe927e4..873c145fab 100755 --- a/deployment/build.portable +++ b/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} diff --git a/fedora/jellyfin-web.spec b/fedora/jellyfin-web.spec index dbc0bd0efa..dcc9d9d2ab 100644 --- a/fedora/jellyfin-web.spec +++ b/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 diff --git a/gulpfile.js b/gulpfile.js index 03826e8b6e..84f4558e6a 100644 --- a/gulpfile.js +++ b/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); diff --git a/package.json b/package.json index fdeacda2f2..824e521f5b 100644 --- a/package.json +++ b/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,10 +44,10 @@ "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" @@ -60,26 +60,26 @@ "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" }, @@ -90,14 +90,45 @@ "overrides": [ { "test": [ + "src/components/accessSchedule/accessSchedule.js", "src/components/actionSheet/actionSheet.js", + "src/components/activitylog.js", + "src/components/alert.js", + "src/components/alphaPicker/alphaPicker.js", + "src/components/appFooter/appFooter.js", "src/components/autoFocuser.js", + "src/components/backdrop/backdrop.js", "src/components/cardbuilder/cardBuilder.js", "src/components/imageOptionsEditor/imageOptionsEditor.js", + "src/components/cardbuilder/chaptercardbuilder.js", + "src/components/cardbuilder/peoplecardbuilder.js", + "src/components/channelMapper/channelMapper.js", + "src/components/confirm/confirm.js", + "src/components/displaySettings/displaySettings.js", + "src/components/homeScreenSettings/homeScreenSettings.js", + "src/components/directorybrowser/directorybrowser.js", + "src/components/collectionEditor/collectionEditor.js", + "src/components/dialog/dialog.js", + "src/components/directorybrowser/directorybrowser.js", + "src/components/dialogHelper/dialogHelper.js", + "src/components/homesections/homesections.js", "src/components/images/imageLoader.js", + "src/components/imageUploader/imageUploader.js", "src/components/indicators/indicators.js", "src/components/libraryoptionseditor/libraryoptionseditor.js", + "src/components/itemContextMenu.js", + "src/components/itemidentifier/itemidentifier.js", + "src/components/itemMediaInfo/itemMediaInfo.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js", + "src/components/mediainfo/mediainfo.js", + "src/components/multiSelect/multiSelect.js", + "src/components/maintabsmanager.js", + "src/components/mediaLibraryCreator/mediaLibraryCreator.js", + "src/components/mediaLibraryEditor/mediaLibraryEditor.js", + "src/components/metadataEditor/metadataEditor.js", + "src/components/metadataEditor/personEditor.js", + "src/components/nowPlayingBar/nowPlayingBar.js", + "src/components/listview/listview.js", "src/components/playback/brightnessosd.js", "src/components/playback/mediasession.js", "src/components/playback/nowplayinghelper.js", @@ -107,16 +138,101 @@ "src/components/playback/playmethodhelper.js", "src/components/playback/remotecontrolautoplay.js", "src/components/playback/volumeosd.js", + "src/components/playerstats/playerstats.js", + "src/components/prompt/prompt.js", + "src/components/playbackSettings/playbackSettings.js", + "src/components/playlisteditor/playlisteditor.js", + "src/components/groupedcards.js", + "src/components/htmlMediaHelper.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/search/searchfields.js", + "src/components/search/searchresults.js", + "src/components/settingshelper.js", + "src/components/subtitlesettings/subtitlesettings.js", + "src/components/subtitlesettings/subtitleappearancehelper.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/auth/addserver.js", + "src/controllers/auth/forgotpassword.js", + "src/controllers/auth/forgotpasswordpin.js", + "src/controllers/auth/login.js", + "src/controllers/auth/selectserver.js", + "src/controllers/dashboard/apikeys.js", + "src/controllers/dashboard/dashboard.js", + "src/controllers/dashboard/encodingsettings.js", + "src/controllers/dashboard/logs.js", + "src/controllers/user/menu.js", + "src/controllers/user/profile.js", + "src/controllers/user/subtitles.js", + "src/controllers/dashboard/general.js", + "src/controllers/dashboard/librarydisplay.js", + "src/controllers/dashboard/metadataImages.js", + "src/controllers/dashboard/metadatanfo.js", + "src/controllers/dashboard/plugins/repositories.js", + "src/controllers/dashboard/streaming.js", + "src/controllers/dashboard/mediaLibrary.js", + "src/controllers/dashboard/networking.js", + "src/controllers/dashboard/playback.js", + "src/controllers/dashboard/plugins/repositories.js", + "src/controllers/wizard/finish.js", + "src/controllers/wizard/remoteaccess.js", + "src/controllers/wizard/settings.js", + "src/controllers/wizard/start.js", + "src/controllers/wizard/user.js", + "src/controllers/shows/episodes.js", + "src/controllers/shows/tvgenres.js", + "src/controllers/shows/tvlatest.js", + "src/controllers/shows/tvrecommended.js", + "src/controllers/shows/tvshows.js", + "src/controllers/shows/tvstudios.js", + "src/controllers/shows/tvupcoming.js", + "src/controllers/searchpage.js", + "src/controllers/dashboard/scheduledtasks/scheduledtask.js", + "src/controllers/dashboard/scheduledtasks/scheduledtasks.js", + "src/controllers/dashboard/dlna/profile.js", + "src/controllers/dashboard/dlna/profiles.js", + "src/controllers/dashboard/dlna/settings.js", + "src/controllers/dashboard/devices/devices.js", + "src/controllers/dashboard/devices/device.js", + "src/controllers/dashboard/serveractivity.js", + "src/elements/emby-tabs/emby-tabs.js", + "src/elements/emby-scroller/emby-scroller.js", + "src/elements/emby-radio/emby-radio.js", + "src/elements/emby-checkbox/emby-checkbox.js", + "src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js", + "src/elements/emby-progressbar/emby-progressbar.js", + "src/elements/emby-progressring/emby-progressring.js", + "src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js", + "src/elements/emby-itemscontainer/emby-itemscontainer.js", + "src/elements/emby-playstatebutton/emby-playstatebutton.js", + "src/elements/emby-programcell/emby-programcell.js", + "src/elements/emby-radio/emby-radio.js", + "src/elements/emby-ratingbutton/emby-ratingbutton.js", + "src/elements/emby-scrollbuttons/emby-scrollbuttons.js", + "src/elements/emby-scroller/emby-scroller.js", + "src/elements/emby-select/emby-select.js", + "src/elements/emby-slider/emby-slider.js", + "src/elements/emby-tabs/emby-tabs.js", + "src/elements/emby-textarea/emby-textarea.js", + "src/elements/emby-toggle/emby-toggle.js", + "src/elements/emby-button/emby-button.js", + "src/elements/emby-button/paper-icon-button-light.js", + "src/elements/emby-collapse/emby-collapse.js", + "src/elements/emby-input/emby-input.js", "src/plugins/bookPlayer/plugin.js", - "src/plugins/bookPlayer/tableOfContent.js", + "src/plugins/bookPlayer/tableOfContents.js", "src/plugins/photoPlayer/plugin.js", + "src/scripts/alphanumericshortcuts.js", + "src/scripts/autoBackdrops.js", + "src/scripts/settings/appSettings.js", + "src/scripts/settings/userSettings.js", + "src/scripts/settings/webSettings.js", + "src/scripts/datetime.js", "src/scripts/deleteHelper.js", "src/scripts/dfnshelper.js", "src/scripts/dom.js", @@ -124,10 +240,20 @@ "src/scripts/filesystem.js", "src/scripts/imagehelper.js", "src/scripts/inputManager.js", + "src/plugins/backdropScreensaver/plugin.js", + "src/plugins/youtubePlayer/plugin.js", + "src/components/filterdialog/filterdialog.js", + "src/components/fetchhelper.js", + "src/scripts/editorsidebar.js", + "src/scripts/globalize.js", + "src/scripts/playlists.js", "src/scripts/keyboardNavigation.js", - "src/scripts/settings/appSettings.js", - "src/scripts/settings/userSettings.js", - "src/scripts/settings/webSettings.js" + "src/scripts/taskbutton.js", + "src/scripts/touchHelper.js", + "src/scripts/themeLoader.js", + "src/plugins/backdropScreensaver/plugin.js", + "src/components/filterdialog/filterdialog.js", + "src/components/fetchhelper.js" ], "plugins": [ "@babel/plugin-transform-modules-amd", @@ -157,6 +283,7 @@ "prepare": "gulp --production", "build:development": "gulp --development", "build:production": "gulp --production", + "build:standalone": "gulp standalone --development", "lint": "eslint \".\"", "stylelint": "stylelint \"src/**/*.css\"" } diff --git a/src/addserver.html b/src/addserver.html index 02850fffb8..d25a8eef98 100644 --- a/src/addserver.html +++ b/src/addserver.html @@ -1,6 +1,6 @@
-
+

${HeaderConnectToServer}

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 494a6c523d..88598fb94d 100644 --- a/src/assets/css/librarybrowser.css +++ b/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 { diff --git a/src/assets/css/site.css b/src/assets/css/site.css index d489f77f01..9fbd8a4fca 100644 --- a/src/assets/css/site.css +++ b/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; } diff --git a/src/components/accessSchedule/accessSchedule.js b/src/components/accessSchedule/accessSchedule.js index 768e310593..edfef3a06c 100644 --- a/src/components/accessSchedule/accessSchedule.js +++ b/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 += ''; + for (let i = 0; i < 24; i++) { + html += ``; } - html += ''; + html += ``; 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,41 @@ 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) => { + import('text!./components/accessSchedule/accessSchedule.template.html').then(({default: template}) => { + const dlg = dialogHelper.createDialog({ + removeOnClose: true, + size: 'small' + }); + dlg.classList.add('formDialog'); + let html = ''; + html += globalize.translateHtml(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 +}; diff --git a/src/components/actionSheet/actionSheet.js b/src/components/actionSheet/actionSheet.js index c56f42a9d9..1c8992bf55 100644 --- a/src/components/actionSheet/actionSheet.js +++ b/src/components/actionSheet/actionSheet.js @@ -73,7 +73,7 @@ function getPosition(options, dlg) { } function centerFocus(elem, horiz, on) { - require(['scrollHelper'], function (scrollHelper) { + import('scrollHelper').then(({default: scrollHelper}) => { const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); diff --git a/src/components/activitylog.js b/src/components/activitylog.js index bbb0995063..2d5a21756f 100644 --- a/src/components/activitylog.js +++ b/src/components/activitylog.js @@ -1,11 +1,21 @@ -define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings', 'serverNotifications', 'connectionManager', 'emby-button', 'listViewStyle'], function (events, globalize, dom, datefns, dfnshelper, userSettings, serverNotifications, connectionManager) { - 'use strict'; +import events from 'events'; +import globalize from 'globalize'; +import dom from 'dom'; +import * as datefns from 'date-fns'; +import dfnshelper from 'dfnshelper'; +import userSettings from 'userSettings'; +import serverNotifications from 'serverNotifications'; +import connectionManager from 'connectionManager'; +import 'emby-button'; +import 'listViewStyle'; + +/* eslint-disable indent */ function getEntryHtml(entry, apiClient) { - var html = ''; + let html = ''; html += '
'; - var color = '#00a4dc'; - var icon = 'notifications'; + let color = '#00a4dc'; + let icon = 'notifications'; if ('Error' == entry.Severity || 'Fatal' == entry.Severity || 'Warn' == entry.Severity) { color = '#cc0000'; @@ -56,8 +66,8 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings', } limit = limit || parseInt(elem.getAttribute('data-activitylimit') || '7'); - var minDate = new Date(); - var hasUserId = 'false' !== elem.getAttribute('data-useractivity'); + const minDate = new Date(); + const hasUserId = 'false' !== elem.getAttribute('data-useractivity'); if (hasUserId) { minDate.setTime(minDate.getTime() - 24 * 60 * 60 * 1000); // one day back @@ -74,7 +84,7 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings', elem.setAttribute('data-activitystartindex', startIndex); elem.setAttribute('data-activitylimit', limit); if (!startIndex) { - var activityContainer = dom.parentWithClass(elem, 'activityContainer'); + const activityContainer = dom.parentWithClass(elem, 'activityContainer'); if (activityContainer) { if (result.Items.length) { @@ -91,7 +101,7 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings', } function onActivityLogUpdate(e, apiClient, data) { - var options = this.options; + const options = this.options; if (options && options.serverId === apiClient.serverId()) { reloadData(this, options.element, apiClient); @@ -99,14 +109,14 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings', } function onListClick(e) { - var btnEntryInfo = dom.parentWithClass(e.target, 'btnEntryInfo'); + const btnEntryInfo = dom.parentWithClass(e.target, 'btnEntryInfo'); if (btnEntryInfo) { - var id = btnEntryInfo.getAttribute('data-id'); - var items = this.items; + const id = btnEntryInfo.getAttribute('data-id'); + const items = this.items; if (items) { - var item = items.filter(function (i) { + const item = items.filter(function (i) { return i.Id.toString() === id; })[0]; @@ -118,35 +128,35 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings', } function showItemOverview(item) { - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert({ text: item.Overview }); }); } - function ActivityLog(options) { +class ActivityLog { + constructor(options) { this.options = options; - var element = options.element; + const element = options.element; element.classList.add('activityLogListWidget'); element.addEventListener('click', onListClick.bind(this)); - var apiClient = connectionManager.getApiClient(options.serverId); + const apiClient = connectionManager.getApiClient(options.serverId); reloadData(this, element, apiClient); - var onUpdate = onActivityLogUpdate.bind(this); + const onUpdate = onActivityLogUpdate.bind(this); this.updateFn = onUpdate; events.on(serverNotifications, 'ActivityLogEntry', onUpdate); apiClient.sendMessage('ActivityLogEntryStart', '0,1500'); } - - ActivityLog.prototype.destroy = function () { - var options = this.options; + destroy() { + const options = this.options; if (options) { options.element.classList.remove('activityLogListWidget'); connectionManager.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500'); } - var onUpdate = this.updateFn; + const onUpdate = this.updateFn; if (onUpdate) { events.off(serverNotifications, 'ActivityLogEntry', onUpdate); @@ -154,7 +164,9 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings', this.items = null; this.options = null; - }; + } +} - return ActivityLog; -}); +export default ActivityLog; + +/* eslint-enable indent */ diff --git a/src/components/alert.js b/src/components/alert.js index 8a37ac1845..5d396e3a62 100644 --- a/src/components/alert.js +++ b/src/components/alert.js @@ -1,14 +1,17 @@ -define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize) { - 'use strict'; +import browser from 'browser'; +import dialog from 'dialog'; +import globalize from 'globalize'; + +/* eslint-disable indent */ function replaceAll(originalString, strReplace, strWith) { - var reg = new RegExp(strReplace, 'ig'); + const reg = new RegExp(strReplace, 'ig'); return originalString.replace(reg, strWith); } - return function (text, title) { + export default function (text, title) { - var options; + let options; if (typeof text === 'string') { options = { title: title, @@ -21,7 +24,7 @@ define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize) if (browser.tv && window.alert) { alert(replaceAll(options.text || '', '
', '\n')); } else { - var items = []; + const items = []; items.push({ name: globalize.translate('ButtonGotIt'), @@ -31,7 +34,7 @@ define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize) options.buttons = items; - return dialog(options).then(function (result) { + return dialog.show(options).then(function (result) { if (result === 'ok') { return Promise.resolve(); } @@ -41,5 +44,6 @@ define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize) } return Promise.resolve(); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/components/alphaPicker/alphaPicker.js b/src/components/alphaPicker/alphaPicker.js index 79f74879e5..bd11afc7f1 100644 --- a/src/components/alphaPicker/alphaPicker.js +++ b/src/components/alphaPicker/alphaPicker.js @@ -1,11 +1,22 @@ -define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-button-light', 'material-icons'], function (focusManager, layoutManager, dom) { - 'use strict'; +/* eslint-disable indent */ - var selectedButtonClass = 'alphaPickerButton-selected'; +/** + * Module alphaPicker. + * @module components/alphaPicker/alphaPicker + */ + +import focusManager from 'focusManager'; +import layoutManager from 'layoutManager'; +import dom from 'dom'; +import 'css!./style.css'; +import 'paper-icon-button-light'; +import 'material-icons'; + + const selectedButtonClass = 'alphaPickerButton-selected'; function focus() { - var scope = this; - var selected = scope.querySelector('.' + selectedButtonClass); + const scope = this; + const selected = scope.querySelector(`.${selectedButtonClass}`); if (selected) { focusManager.focus(selected); @@ -16,7 +27,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b function getAlphaPickerButtonClassName(vertical) { - var alphaPickerButtonClassName = 'alphaPickerButton'; + let alphaPickerButtonClassName = 'alphaPickerButton'; if (layoutManager.tv) { alphaPickerButtonClassName += ' alphaPickerButton-tv'; @@ -30,12 +41,12 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b } function getLetterButton(l, vertical) { - return ''; + return ``; } function mapLetters(letters, vertical) { - return letters.map(function (l) { + return letters.map(l => { return getLetterButton(l, vertical); }); } @@ -48,26 +59,26 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b element.classList.add('alphaPicker-tv'); } - var vertical = element.classList.contains('alphaPicker-vertical'); + const vertical = element.classList.contains('alphaPicker-vertical'); if (!vertical) { element.classList.add('focuscontainer-x'); } - var html = ''; - var letters; + let html = ''; + let letters; - var alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical); + const alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical); - var rowClassName = 'alphaPickerRow'; + let rowClassName = 'alphaPickerRow'; if (vertical) { rowClassName += ' alphaPickerRow-vertical'; } - html += '
'; + html += `
`; if (options.mode === 'keyboard') { - html += ''; + html += ``; } else { letters = ['#']; html += mapLetters(letters, vertical).join(''); @@ -77,11 +88,11 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b html += mapLetters(letters, vertical).join(''); if (options.mode === 'keyboard') { - html += ''; + html += ``; html += '
'; letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; - html += '
'; + html += `
`; html += '
'; html += mapLetters(letters, vertical).join(''); html += '
'; @@ -95,227 +106,228 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b element.focus = focus; } - function AlphaPicker(options) { + export class AlphaPicker { + constructor(options) { - var self = this; - this.options = options; + this.options = options; - var element = options.element; - var itemsContainer = options.itemsContainer; - var itemClass = options.itemClass; + const element = options.element; + const itemsContainer = options.itemsContainer; + const itemClass = options.itemClass; - var itemFocusValue; - var itemFocusTimeout; + let itemFocusValue; + let itemFocusTimeout; - function onItemFocusTimeout() { - itemFocusTimeout = null; - self.value(itemFocusValue); - } - - var alphaFocusedElement; - var alphaFocusTimeout; - - function onAlphaFocusTimeout() { - - alphaFocusTimeout = null; - - if (document.activeElement === alphaFocusedElement) { - var value = alphaFocusedElement.getAttribute('data-value'); - self.value(value, true); + function onItemFocusTimeout() { + itemFocusTimeout = null; + this.value(itemFocusValue); } - } - function onAlphaPickerInKeyboardModeClick(e) { + let alphaFocusedElement; + let alphaFocusTimeout; - var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); + function onAlphaFocusTimeout() { - if (alphaPickerButton) { - var value = alphaPickerButton.getAttribute('data-value'); - - element.dispatchEvent(new CustomEvent('alphavalueclicked', { - cancelable: false, - detail: { - value: value - } - })); - } - } - - function onAlphaPickerClick(e) { - - var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); - - if (alphaPickerButton) { - var value = alphaPickerButton.getAttribute('data-value'); - if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) { - self.value(null, true); - } else { - self.value(value, true); - } - } - } - - function onAlphaPickerFocusIn(e) { - - if (alphaFocusTimeout) { - clearTimeout(alphaFocusTimeout); alphaFocusTimeout = null; + + if (document.activeElement === alphaFocusedElement) { + const value = alphaFocusedElement.getAttribute('data-value'); + this.value(value, true); + } } - var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); + function onAlphaPickerInKeyboardModeClick(e) { - if (alphaPickerButton) { - alphaFocusedElement = alphaPickerButton; - alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600); + const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); + + if (alphaPickerButton) { + const value = alphaPickerButton.getAttribute('data-value'); + + element.dispatchEvent(new CustomEvent('alphavalueclicked', { + cancelable: false, + detail: { + value + } + })); + } } - } - function onItemsFocusIn(e) { + function onAlphaPickerClick(e) { - var item = dom.parentWithClass(e.target, itemClass); + const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); - if (item) { - var prefix = item.getAttribute('data-prefix'); - if (prefix && prefix.length) { - - itemFocusValue = prefix[0]; - if (itemFocusTimeout) { - clearTimeout(itemFocusTimeout); + if (alphaPickerButton) { + const value = alphaPickerButton.getAttribute('data-value'); + if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) { + this.value(null, true); + } else { + this.value(value, true); } - itemFocusTimeout = setTimeout(onItemFocusTimeout, 100); } } - } - self.enabled = function (enabled) { + function onAlphaPickerFocusIn(e) { - if (enabled) { - - if (itemsContainer) { - itemsContainer.addEventListener('focus', onItemsFocusIn, true); + if (alphaFocusTimeout) { + clearTimeout(alphaFocusTimeout); + alphaFocusTimeout = null; } - if (options.mode === 'keyboard') { - element.addEventListener('click', onAlphaPickerInKeyboardModeClick); - } + const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); + + if (alphaPickerButton) { + alphaFocusedElement = alphaPickerButton; + alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600); + } + } + + function onItemsFocusIn(e) { + + const item = dom.parentWithClass(e.target, itemClass); + + if (item) { + const prefix = item.getAttribute('data-prefix'); + if (prefix && prefix.length) { + + itemFocusValue = prefix[0]; + if (itemFocusTimeout) { + clearTimeout(itemFocusTimeout); + } + itemFocusTimeout = setTimeout(onItemFocusTimeout, 100); + } + } + } + + this.enabled = function (enabled) { + + if (enabled) { + + if (itemsContainer) { + itemsContainer.addEventListener('focus', onItemsFocusIn, true); + } + + if (options.mode === 'keyboard') { + element.addEventListener('click', onAlphaPickerInKeyboardModeClick); + } + + if (options.valueChangeEvent !== 'click') { + element.addEventListener('focus', onAlphaPickerFocusIn, true); + } else { + element.addEventListener('click', onAlphaPickerClick.bind(this)); + } - if (options.valueChangeEvent !== 'click') { - element.addEventListener('focus', onAlphaPickerFocusIn, true); } else { - element.addEventListener('click', onAlphaPickerClick.bind(this)); - } - } else { - - if (itemsContainer) { - itemsContainer.removeEventListener('focus', onItemsFocusIn, true); - } - - element.removeEventListener('click', onAlphaPickerInKeyboardModeClick); - element.removeEventListener('focus', onAlphaPickerFocusIn, true); - element.removeEventListener('click', onAlphaPickerClick.bind(this)); - } - }; - - render(element, options); - - this.enabled(true); - this.visible(true); - } - - AlphaPicker.prototype.value = function (value, applyValue) { - - var element = this.options.element; - var btn; - var selected; - - if (value !== undefined) { - if (value != null) { - - value = value.toUpperCase(); - this._currentValue = value; - - if (this.options.mode !== 'keyboard') { - selected = element.querySelector('.' + selectedButtonClass); - - try { - btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']'); - } catch (err) { - console.error('error in querySelector: ' + err); + if (itemsContainer) { + itemsContainer.removeEventListener('focus', onItemsFocusIn, true); } - if (btn && btn !== selected) { - btn.classList.add(selectedButtonClass); + element.removeEventListener('click', onAlphaPickerInKeyboardModeClick); + element.removeEventListener('focus', onAlphaPickerFocusIn, true); + element.removeEventListener('click', onAlphaPickerClick.bind(this)); + } + }; + + render(element, options); + + this.enabled(true); + this.visible(true); + } + + value(value, applyValue) { + + const element = this.options.element; + let btn; + let selected; + + if (value !== undefined) { + if (value != null) { + + value = value.toUpperCase(); + this._currentValue = value; + + if (this.options.mode !== 'keyboard') { + selected = element.querySelector(`.${selectedButtonClass}`); + + try { + btn = element.querySelector(`.alphaPickerButton[data-value='${value}']`); + } catch (err) { + console.error('error in querySelector:', err); + } + + if (btn && btn !== selected) { + btn.classList.add(selectedButtonClass); + } + if (selected && selected !== btn) { + selected.classList.remove(selectedButtonClass); + } } - if (selected && selected !== btn) { + } else { + this._currentValue = value; + + selected = element.querySelector(`.${selectedButtonClass}`); + if (selected) { selected.classList.remove(selectedButtonClass); } } - } else { - this._currentValue = value; - - selected = element.querySelector('.' + selectedButtonClass); - if (selected) { - selected.classList.remove(selectedButtonClass); - } } + + if (applyValue) { + element.dispatchEvent(new CustomEvent('alphavaluechanged', { + cancelable: false, + detail: { + value + } + })); + } + + return this._currentValue; } - if (applyValue) { - element.dispatchEvent(new CustomEvent('alphavaluechanged', { - cancelable: false, - detail: { - value: value - } - })); + on(name, fn) { + const element = this.options.element; + element.addEventListener(name, fn); } - return this._currentValue; - }; - - AlphaPicker.prototype.on = function (name, fn) { - var element = this.options.element; - element.addEventListener(name, fn); - }; - - AlphaPicker.prototype.off = function (name, fn) { - var element = this.options.element; - element.removeEventListener(name, fn); - }; - - AlphaPicker.prototype.visible = function (visible) { - - var element = this.options.element; - element.style.visibility = visible ? 'visible' : 'hidden'; - }; - - AlphaPicker.prototype.values = function () { - - var element = this.options.element; - var elems = element.querySelectorAll('.alphaPickerButton'); - var values = []; - for (var i = 0, length = elems.length; i < length; i++) { - - values.push(elems[i].getAttribute('data-value')); - + off(name, fn) { + const element = this.options.element; + element.removeEventListener(name, fn); } - return values; - }; + visible(visible) { - AlphaPicker.prototype.focus = function () { + const element = this.options.element; + element.style.visibility = visible ? 'visible' : 'hidden'; + } - var element = this.options.element; - focusManager.autoFocus(element, true); - }; + values() { - AlphaPicker.prototype.destroy = function () { + const element = this.options.element; + const elems = element.querySelectorAll('.alphaPickerButton'); + const values = []; + for (let i = 0, length = elems.length; i < length; i++) { - var element = this.options.element; - this.enabled(false); - element.classList.remove('focuscontainer-x'); - this.options = null; - }; + values.push(elems[i].getAttribute('data-value')); - return AlphaPicker; -}); + } + + return values; + } + + focus() { + + const element = this.options.element; + focusManager.autoFocus(element, true); + } + + destroy() { + + const element = this.options.element; + this.enabled(false); + element.classList.remove('focuscontainer-x'); + this.options = null; + } + } + +/* eslint-enable indent */ +export default AlphaPicker; diff --git a/src/components/appFooter/appFooter.js b/src/components/appFooter/appFooter.js index 033a0b008d..427d3b8019 100644 --- a/src/components/appFooter/appFooter.js +++ b/src/components/appFooter/appFooter.js @@ -1,17 +1,18 @@ -define(['browser', 'css!./appFooter'], function (browser) { - 'use strict'; +import browser from 'browser'; +import 'css!./appFooter'; - function render(options) { - var elem = document.createElement('div'); - elem.classList.add('appfooter'); +function render(options) { + const elem = document.createElement('div'); + elem.classList.add('appfooter'); - document.body.appendChild(elem); + document.body.appendChild(elem); - return elem; - } + return elem; +} - function appFooter(options) { - var self = this; +class appFooter { + constructor(options) { + const self = this; self.element = render(options); self.add = function (elem) { @@ -26,12 +27,11 @@ define(['browser', 'css!./appFooter'], function (browser) { } }; } - - appFooter.prototype.destroy = function () { + destroy() { var self = this; self.element = null; - }; + } +} - return appFooter; -}); +export default new appFooter; diff --git a/src/components/appRouter.js b/src/components/appRouter.js index 0861cf7e00..ace35ac851 100644 --- a/src/components/appRouter.js +++ b/src/components/appRouter.js @@ -21,7 +21,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro }; function beginConnectionWizard() { - backdrop.clear(); + backdrop.clearBackdrop(); loading.show(); connectionManager.connect({ enableAutoLogin: appSettings.enableAutoLogin() @@ -53,7 +53,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro break; case 'ServerUpdateNeeded': require(['alert'], function (alert) { - alert({ + alert.default({ text: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin'), html: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin') }).then(function () { @@ -465,7 +465,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro function loadContent(ctx, route, html, request) { - html = globalize.translateDocument(html, route.dictionary); + html = globalize.translateHtml(html, route.dictionary); request.view = html; viewManager.loadView(request); @@ -657,7 +657,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro } if (level === 'full' || level === 2) { - backdrop.clear(true); + backdrop.clearBackdrop(true); document.documentElement.classList.add('transparentDocument'); backgroundContainer.classList.add('backgroundContainer-transparent'); backdropContainer.classList.add('hide'); diff --git a/src/components/backdrop/backdrop.js b/src/components/backdrop/backdrop.js index c15e35524c..d3c9e58b59 100644 --- a/src/components/backdrop/backdrop.js +++ b/src/components/backdrop/backdrop.js @@ -1,5 +1,11 @@ -define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings', 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom, userSettings) { - 'use strict'; +import browser from 'browser'; +import connectionManager from 'connectionManager'; +import playbackManager from 'playbackManager'; +import dom from 'dom'; +import * as userSettings from 'userSettings'; +import 'css!./backdrop'; + +/* eslint-disable indent */ function enableAnimation(elem) { if (browser.slow) { @@ -22,71 +28,70 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' return true; } - function Backdrop() { - } + class Backdrop { + load(url, parent, existingBackdropImage) { + const img = new Image(); + const self = this; - Backdrop.prototype.load = function (url, parent, existingBackdropImage) { - var img = new Image(); - var self = this; - - img.onload = function () { - if (self.isDestroyed) { - return; - } - - var backdropImage = document.createElement('div'); - backdropImage.classList.add('backdropImage'); - backdropImage.classList.add('displayingBackdropImage'); - backdropImage.style.backgroundImage = "url('" + url + "')"; - backdropImage.setAttribute('data-url', url); - - backdropImage.classList.add('backdropImageFadeIn'); - parent.appendChild(backdropImage); - - if (!enableAnimation(backdropImage)) { - if (existingBackdropImage && existingBackdropImage.parentNode) { - existingBackdropImage.parentNode.removeChild(existingBackdropImage); + img.onload = () => { + if (self.isDestroyed) { + return; } - internalBackdrop(true); - return; - } - var onAnimationComplete = function () { - dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, { + const backdropImage = document.createElement('div'); + backdropImage.classList.add('backdropImage'); + backdropImage.classList.add('displayingBackdropImage'); + backdropImage.style.backgroundImage = `url('${url}')`; + backdropImage.setAttribute('data-url', url); + + backdropImage.classList.add('backdropImageFadeIn'); + parent.appendChild(backdropImage); + + if (!enableAnimation(backdropImage)) { + if (existingBackdropImage && existingBackdropImage.parentNode) { + existingBackdropImage.parentNode.removeChild(existingBackdropImage); + } + internalBackdrop(true); + return; + } + + const onAnimationComplete = () => { + dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, { + once: true + }); + if (backdropImage === self.currentAnimatingElement) { + self.currentAnimatingElement = null; + } + if (existingBackdropImage && existingBackdropImage.parentNode) { + existingBackdropImage.parentNode.removeChild(existingBackdropImage); + } + }; + + dom.addEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, { once: true }); - if (backdropImage === self.currentAnimatingElement) { - self.currentAnimatingElement = null; - } - if (existingBackdropImage && existingBackdropImage.parentNode) { - existingBackdropImage.parentNode.removeChild(existingBackdropImage); - } + + internalBackdrop(true); }; - dom.addEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, { - once: true - }); - - internalBackdrop(true); - }; - - img.src = url; - }; - - Backdrop.prototype.cancelAnimation = function () { - var elem = this.currentAnimatingElement; - if (elem) { - elem.classList.remove('backdropImageFadeIn'); - this.currentAnimatingElement = null; + img.src = url; } - }; - Backdrop.prototype.destroy = function () { - this.isDestroyed = true; - this.cancelAnimation(); - }; + cancelAnimation() { + const elem = this.currentAnimatingElement; + if (elem) { + elem.classList.remove('backdropImageFadeIn'); + this.currentAnimatingElement = null; + } + } - var backdropContainer; + destroy() { + this.isDestroyed = true; + this.cancelAnimation(); + } + } + + let backdropContainer; function getBackdropContainer() { if (!backdropContainer) { backdropContainer = document.querySelector('.backdropContainer'); @@ -101,7 +106,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' return backdropContainer; } - function clearBackdrop(clearAll) { + export function clearBackdrop(clearAll) { clearRotation(); if (currentLoadingBackdrop) { @@ -109,7 +114,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' currentLoadingBackdrop = null; } - var elem = getBackdropContainer(); + const elem = getBackdropContainer(); elem.innerHTML = ''; if (clearAll) { @@ -119,7 +124,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' internalBackdrop(false); } - var backgroundContainer; + let backgroundContainer; function getBackgroundContainer() { if (!backgroundContainer) { backgroundContainer = document.querySelector('.backgroundContainer'); @@ -135,31 +140,27 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' } } - var hasInternalBackdrop; + let hasInternalBackdrop; function internalBackdrop(enabled) { hasInternalBackdrop = enabled; setBackgroundContainerBackgroundEnabled(); } - var hasExternalBackdrop; - function externalBackdrop(enabled) { + let hasExternalBackdrop; + export function externalBackdrop(enabled) { hasExternalBackdrop = enabled; setBackgroundContainerBackgroundEnabled(); } - function getRandom(min, max) { - return Math.floor(Math.random() * (max - min) + min); - } - - var currentLoadingBackdrop; + let currentLoadingBackdrop; function setBackdropImage(url) { if (currentLoadingBackdrop) { currentLoadingBackdrop.destroy(); currentLoadingBackdrop = null; } - var elem = getBackdropContainer(); - var existingBackdropImage = elem.querySelector('.displayingBackdropImage'); + const elem = getBackdropContainer(); + const existingBackdropImage = elem.querySelector('.displayingBackdropImage'); if (existingBackdropImage && existingBackdropImage.getAttribute('data-url') === url) { if (existingBackdropImage.getAttribute('data-url') === url) { @@ -168,7 +169,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' existingBackdropImage.classList.remove('displayingBackdropImage'); } - var instance = new Backdrop(); + const instance = new Backdrop(); instance.load(url, elem, existingBackdropImage); currentLoadingBackdrop = instance; } @@ -176,9 +177,9 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' function getItemImageUrls(item, imageOptions) { imageOptions = imageOptions || {}; - var apiClient = connectionManager.getApiClient(item.ServerId); + const apiClient = connectionManager.getApiClient(item.ServerId); if (item.BackdropImageTags && item.BackdropImageTags.length > 0) { - return item.BackdropImageTags.map(function (imgTag, index) { + return item.BackdropImageTags.map((imgTag, index) => { return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, { type: 'Backdrop', tag: imgTag, @@ -189,7 +190,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' } if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) { - return item.ParentBackdropImageTags.map(function (imgTag, index) { + return item.ParentBackdropImageTags.map((imgTag, index) => { return apiClient.getScaledImageUrl(item.ParentBackdropItemId, Object.assign(imageOptions, { type: 'Backdrop', tag: imgTag, @@ -203,13 +204,13 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' } function getImageUrls(items, imageOptions) { - var list = []; - var onImg = function (img) { + const list = []; + const onImg = img => { list.push(img); }; - for (var i = 0, length = items.length; i < length; i++) { - var itemImages = getItemImageUrls(items[i], imageOptions); + for (let i = 0, length = items.length; i < length; i++) { + const itemImages = getItemImageUrls(items[i], imageOptions); itemImages.forEach(onImg); } @@ -229,7 +230,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' // If you don't care about the order of the elements inside // the array, you should sort both arrays here. - for (var i = 0; i < a.length; ++i) { + for (let i = 0; i < a.length; ++i) { if (a[i] !== b[i]) { return false; } @@ -242,12 +243,12 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' return userSettings.enableBackdrops(); } - var rotationInterval; - var currentRotatingImages = []; - var currentRotationIndex = -1; - function setBackdrops(items, imageOptions, enableImageRotation) { + let rotationInterval; + let currentRotatingImages = []; + let currentRotationIndex = -1; + export function setBackdrops(items, imageOptions, enableImageRotation) { if (enabled()) { - var images = getImageUrls(items, imageOptions); + const images = getImageUrls(items, imageOptions); if (images.length) { startRotation(images, enableImageRotation); @@ -279,7 +280,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' return; } - var newIndex = currentRotationIndex + 1; + let newIndex = currentRotationIndex + 1; if (newIndex >= currentRotatingImages.length) { newIndex = 0; } @@ -289,7 +290,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' } function clearRotation() { - var interval = rotationInterval; + const interval = rotationInterval; if (interval) { clearInterval(interval); } @@ -299,7 +300,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' currentRotationIndex = -1; } - function setBackdrop(url, imageOptions) { + export function setBackdrop(url, imageOptions) { if (url && typeof url !== 'string') { url = getImageUrls([url], imageOptions)[0]; } @@ -312,10 +313,11 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings' } } - return { - setBackdrops: setBackdrops, - setBackdrop: setBackdrop, - clear: clearBackdrop, - externalBackdrop: externalBackdrop - }; -}); +/* eslint-enable indent */ + +export default { + setBackdrops: setBackdrops, + setBackdrop: setBackdrop, + clearBackdrop: clearBackdrop, + externalBackdrop: externalBackdrop +}; diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css index c24fcf6ba6..d77fe5660c 100644 --- a/src/components/cardbuilder/card.css +++ b/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); } diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index e540a40211..1c59a7ae94 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/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) { @@ -541,7 +539,7 @@ import 'programStyles'; imgType = 'Backdrop'; imgTag = item.ParentBackdropImageTags[0]; itemId = item.ParentBackdropItemId; - } else if (item.ImageTags && item.ImageTags.Primary) { + } 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; @@ -556,7 +554,10 @@ 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; @@ -577,10 +578,6 @@ import 'programStyles'; imgType = 'Primary'; imgTag = item.ParentPrimaryImageTag; itemId = item.ParentPrimaryImageItemId; - } else if (item.SeriesPrimaryImageTag) { - imgType = 'Primary'; - imgTag = item.SeriesPrimaryImageTag; - itemId = item.SeriesId; } else if (item.AlbumId && item.AlbumPrimaryImageTag) { imgType = 'Primary'; imgTag = item.AlbumPrimaryImageTag; @@ -1163,10 +1160,10 @@ import 'programStyles'; /** * Imports the refresh indicator element. */ - function requireRefreshIndicator() { + function importRefreshIndicator() { if (!refreshIndicatorLoaded) { refreshIndicatorLoaded = true; - require(['emby-itemrefreshindicator']); + import('emby-itemrefreshindicator'); } } @@ -1370,9 +1367,6 @@ import 'programStyles'; let cardScalableClose = ''; let cardContentClass = 'cardContent'; - if (!options.cardLayout) { - cardContentClass += ' cardContent-shadow'; - } let blurhashAttrib = ''; if (blurhash && blurhash.length > 0) { @@ -1380,21 +1374,20 @@ import 'programStyles'; } if (layoutManager.tv) { - // Don't use the IMG tag with safari because it puts a white border around it cardImageContainerOpen = imgUrl ? ('
') : ('
'); cardImageContainerClose = '
'; } else { // Don't use the IMG tag with safari because it puts a white border around it - cardImageContainerOpen = imgUrl ? (''; } let cardScalableClass = 'cardScalable'; - cardImageContainerOpen = '
' + cardImageContainerOpen; + cardImageContainerOpen = '
' + cardImageContainerOpen; cardBoxClose = '
'; cardScalableClose = '
'; @@ -1421,7 +1414,7 @@ import 'programStyles'; if (item.Type === 'CollectionFolder' || item.CollectionType) { const refreshClass = item.RefreshProgress ? '' : ' class="hide"'; indicatorsHtml += '
'; - requireRefreshIndicator(); + importRefreshIndicator(); } if (indicatorsHtml) { @@ -1502,7 +1495,7 @@ import 'programStyles'; const userData = item.UserData || {}; if (itemHelper.canMarkPlayed(item)) { - require(['emby-playstatebutton']); + import('emby-playstatebutton'); html += ''; } @@ -1510,7 +1503,7 @@ import 'programStyles'; const likes = userData.Likes == null ? '' : userData.Likes; - require(['emby-ratingbutton']); + import('emby-ratingbutton'); html += ''; } diff --git a/src/components/cardbuilder/chaptercardbuilder.js b/src/components/cardbuilder/chaptercardbuilder.js index eae60574b3..c6ee9ba3c5 100644 --- a/src/components/cardbuilder/chaptercardbuilder.js +++ b/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 += '
'; } - 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 ? ('
') : ('
'); + 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 ? (`
`) : (`
`); if (!imgUrl) { cardImageContainer += ''; } - var nameHtml = ''; - nameHtml += '
' + chapter.Name + '
'; - nameHtml += '
' + datetime.getDisplayRunningTime(chapter.StartPositionTicks) + '
'; + let nameHtml = ''; + nameHtml += `
${chapter.Name}
`; + nameHtml += `
${datetime.getDisplayRunningTime(chapter.StartPositionTicks)}
`; - var cardBoxCssClass = 'cardBox'; - var cardScalableClass = 'cardScalable'; + const cardBoxCssClass = 'cardBox'; + const cardScalableClass = 'cardScalable'; - var html = '
'; + const html = `
`; 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 +}; -}); diff --git a/src/components/cardbuilder/peoplecardbuilder.js b/src/components/cardbuilder/peoplecardbuilder.js index 5d34d29e6e..3b9a26a704 100644 --- a/src/components/cardbuilder/peoplecardbuilder.js +++ b/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 +}; diff --git a/src/components/channelMapper/channelMapper.js b/src/components/channelMapper/channelMapper.js index f2ad88e713..89d085c185 100644 --- a/src/components/channelMapper/channelMapper.js +++ b/src/components/channelMapper/channelMapper.js @@ -1,10 +1,21 @@ -define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'actionsheet', 'emby-input', 'paper-icon-button-light', 'emby-button', 'listViewStyle', 'material-icons', 'formDialogStyle'], function (dom, dialogHelper, loading, connectionManager, globalize, actionsheet) { - 'use strict'; +import dom from 'dom'; +import dialogHelper from 'dialogHelper'; +import loading from 'loading'; +import connectionManager from 'connectionManager'; +import globalize from 'globalize'; +import actionsheet from 'actionsheet'; +import 'emby-input'; +import 'paper-icon-button-light'; +import 'emby-button'; +import 'listViewStyle'; +import 'material-icons'; +import 'formDialogStyle'; - return function (options) { +export default class channelMapper { + constructor(options) { function mapChannel(button, channelId, providerChannelId) { loading.show(); - var providerId = options.providerId; + const providerId = options.providerId; connectionManager.getApiClient(options.serverId).ajax({ type: 'POST', url: ApiClient.getUrl('LiveTv/ChannelMappings'), @@ -14,8 +25,8 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act providerChannelId: providerChannelId }, dataType: 'json' - }).then(function (mapping) { - var listItem = dom.parentWithClass(button, 'listItem'); + }).then(mapping => { + const listItem = dom.parentWithClass(button, 'listItem'); button.setAttribute('data-providerid', mapping.ProviderChannelId); listItem.querySelector('.secondary').innerHTML = getMappingSecondaryName(mapping, currentMappingOptions.ProviderName); loading.hide(); @@ -23,42 +34,42 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act } function onChannelsElementClick(e) { - var btnMap = dom.parentWithClass(e.target, 'btnMap'); + const btnMap = dom.parentWithClass(e.target, 'btnMap'); if (btnMap) { - var channelId = btnMap.getAttribute('data-id'); - var providerChannelId = btnMap.getAttribute('data-providerid'); - var menuItems = currentMappingOptions.ProviderChannels.map(function (m) { + const channelId = btnMap.getAttribute('data-id'); + const providerChannelId = btnMap.getAttribute('data-providerid'); + const menuItems = currentMappingOptions.ProviderChannels.map(m => { return { name: m.Name, id: m.Id, selected: m.Id.toLowerCase() === providerChannelId.toLowerCase() }; - }).sort(function (a, b) { + }).sort((a, b) => { return a.name.localeCompare(b.name); }); actionsheet.show({ positionTo: btnMap, items: menuItems - }).then(function (newChannelId) { + }).then(newChannelId => { mapChannel(btnMap, channelId, newChannelId); }); } } function getChannelMappingOptions(serverId, providerId) { - var apiClient = connectionManager.getApiClient(serverId); + const apiClient = connectionManager.getApiClient(serverId); return apiClient.getJSON(apiClient.getUrl('LiveTv/ChannelMappingOptions', { providerId: providerId })); } function getMappingSecondaryName(mapping, providerName) { - return (mapping.ProviderChannelName || '') + ' - ' + providerName; + return `${mapping.ProviderChannelName || ''} - ${providerName}`; } function getTunerChannelHtml(channel, providerName) { - var html = ''; + let html = ''; html += '
'; html += ''; html += '
'; @@ -73,16 +84,16 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act html += '
'; html += '
'; - html += ''; + html += ``; return html += '
'; } function getEditorHtml() { - var html = ''; + let html = ''; html += '
'; html += '
'; html += ''; - html += '

' + globalize.translate('HeaderChannels') + '

'; + html += `

${globalize.translate('HeaderChannels')}

`; html += '
'; html += '
'; html += ''; @@ -91,30 +102,29 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act } function initEditor(dlg, options) { - getChannelMappingOptions(options.serverId, options.providerId).then(function (result) { + getChannelMappingOptions(options.serverId, options.providerId).then(result => { currentMappingOptions = result; - var channelsElement = dlg.querySelector('.channels'); - channelsElement.innerHTML = result.TunerChannels.map(function (channel) { + const channelsElement = dlg.querySelector('.channels'); + channelsElement.innerHTML = result.TunerChannels.map(channel => { return getTunerChannelHtml(channel, result.ProviderName); }).join(''); channelsElement.addEventListener('click', onChannelsElementClick); }); } - var currentMappingOptions; - var self = this; + let currentMappingOptions; - self.show = function () { - var dialogOptions = { + this.show = () => { + const dialogOptions = { removeOnClose: true }; dialogOptions.size = 'small'; - var dlg = dialogHelper.createDialog(dialogOptions); + const dlg = dialogHelper.createDialog(dialogOptions); dlg.classList.add('formDialog'); dlg.classList.add('ui-body-a'); dlg.classList.add('background-theme-a'); - var html = ''; - var title = globalize.translate('MapChannels'); + let html = ''; + const title = globalize.translate('MapChannels'); html += '
'; html += ''; html += '

'; @@ -124,13 +134,13 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act html += getEditorHtml(); dlg.innerHTML = html; initEditor(dlg, options); - dlg.querySelector('.btnCancel').addEventListener('click', function () { + dlg.querySelector('.btnCancel').addEventListener('click', () => { dialogHelper.close(dlg); }); - return new Promise(function (resolve, reject) { + return new Promise(resolve => { dlg.addEventListener('close', resolve); dialogHelper.open(dlg); }); }; - }; -}); + } +} diff --git a/src/components/collectionEditor/collectionEditor.js b/src/components/collectionEditor/collectionEditor.js index 46b0640305..18cc0d311f 100644 --- a/src/components/collectionEditor/collectionEditor.js +++ b/src/components/collectionEditor/collectionEditor.js @@ -1,16 +1,32 @@ -define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (dom, dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize) { - 'use strict'; +import dom from 'dom'; +import dialogHelper from 'dialogHelper'; +import loading from 'loading'; +import appHost from 'apphost'; +import layoutManager from 'layoutManager'; +import connectionManager from 'connectionManager'; +import appRouter from 'appRouter'; +import globalize from 'globalize'; +import 'emby-checkbox'; +import 'emby-input'; +import 'paper-icon-button-light'; +import 'emby-select'; +import 'material-icons'; +import 'css!./../formdialog'; +import 'emby-button'; +import 'flexStyles'; - var currentServerId; +/* eslint-disable indent */ + + let currentServerId; function onSubmit(e) { loading.show(); - var panel = dom.parentWithClass(this, 'dialog'); + const panel = dom.parentWithClass(this, 'dialog'); - var collectionId = panel.querySelector('#selectCollectionToAddTo').value; + const collectionId = panel.querySelector('#selectCollectionToAddTo').value; - var apiClient = connectionManager.getApiClient(currentServerId); + const apiClient = connectionManager.getApiClient(currentServerId); if (collectionId) { addToCollection(apiClient, panel, collectionId); @@ -24,7 +40,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio function createCollection(apiClient, dlg) { - var url = apiClient.getUrl('Collections', { + const url = apiClient.getUrl('Collections', { Name: dlg.querySelector('#txtNewCollectionName').value, IsLocked: !dlg.querySelector('#chkEnableInternetMetadata').checked, @@ -36,11 +52,11 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio url: url, dataType: 'json' - }).then(function (result) { + }).then(result => { loading.hide(); - var id = result.Id; + const id = result.Id; dlg.submitted = true; dialogHelper.close(dlg); @@ -56,7 +72,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio function addToCollection(apiClient, dlg, id) { - var url = apiClient.getUrl('Collections/' + id + '/Items', { + const url = apiClient.getUrl(`Collections/${id}/Items`, { Ids: dlg.querySelector('.fldSelectedItemIds').value || '' }); @@ -65,14 +81,14 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio type: 'POST', url: url - }).then(function () { + }).then(() => { loading.hide(); dlg.submitted = true; dialogHelper.close(dlg); - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('MessageItemsAdded')); }); }); @@ -86,11 +102,11 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio loading.show(); - var select = panel.querySelector('#selectCollectionToAddTo'); + const select = panel.querySelector('#selectCollectionToAddTo'); panel.querySelector('.newCollectionInfo').classList.add('hide'); - var options = { + const options = { Recursive: true, IncludeItemTypes: 'BoxSet', @@ -98,16 +114,16 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio EnableTotalRecordCount: false }; - var apiClient = connectionManager.getApiClient(currentServerId); - apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) { + const apiClient = connectionManager.getApiClient(currentServerId); + apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => { - var html = ''; + let html = ''; - html += ''; + html += ``; - html += result.Items.map(function (i) { + html += result.Items.map(i => { - return ''; + return ``; }); select.innerHTML = html; @@ -120,7 +136,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio function getEditorHtml() { - var html = ''; + let html = ''; html += '
'; html += '
'; @@ -134,27 +150,27 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio html += '
'; html += '
'; html += '
'; - html += ''; + html += ``; html += '
'; html += '
'; html += '
'; html += '
'; - html += ''; - html += '
' + globalize.translate('NewCollectionNameExample') + '
'; + html += ``; + html += `
${globalize.translate('NewCollectionNameExample')}
`; html += '
'; html += ''; // newCollectionInfo html += '
'; html += '
'; - html += ''; + html += ``; html += '
'; html += ''; @@ -188,7 +204,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio } else { content.querySelector('.fldSelectCollection').classList.add('hide'); - var selectCollectionToAddTo = content.querySelector('#selectCollectionToAddTo'); + const selectCollectionToAddTo = content.querySelector('#selectCollectionToAddTo'); selectCollectionToAddTo.innerHTML = ''; selectCollectionToAddTo.value = ''; triggerChange(selectCollectionToAddTo); @@ -196,79 +212,77 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio } function centerFocus(elem, horiz, on) { - require(['scrollHelper'], function (scrollHelper) { - var fn = on ? 'on' : 'off'; + import('scrollHelper').then(scrollHelper => { + const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); } - function CollectionEditor() { + export class showEditor { + constructor(options) { - } + const items = options.items || {}; + currentServerId = options.serverId; - CollectionEditor.prototype.show = function (options) { - - var items = options.items || {}; - currentServerId = options.serverId; - - var dialogOptions = { - removeOnClose: true, - scrollY: false - }; - - if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; - } else { - dialogOptions.size = 'small'; - } - - var dlg = dialogHelper.createDialog(dialogOptions); - - dlg.classList.add('formDialog'); - - var html = ''; - var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection'); - - html += '
'; - html += ''; - html += '

'; - html += title; - html += '

'; - - if (appHost.supports('externallinks')) { - html += '' + globalize.translate('Help') + ''; - } - - html += '
'; - - html += getEditorHtml(); - - dlg.innerHTML = html; - - initEditor(dlg, items); - - dlg.querySelector('.btnCancel').addEventListener('click', function () { - - dialogHelper.close(dlg); - }); - - if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, true); - } - - return dialogHelper.open(dlg).then(function () { + const dialogOptions = { + removeOnClose: true, + scrollY: false + }; if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, false); + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'small'; } - if (dlg.submitted) { - return Promise.resolve(); + const dlg = dialogHelper.createDialog(dialogOptions); + + dlg.classList.add('formDialog'); + + let html = ''; + const title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection'); + + html += '
'; + html += ''; + html += '

'; + html += title; + html += '

'; + + if (appHost.supports('externallinks')) { + html += `${globalize.translate('Help')}`; } - return Promise.reject(); - }); - }; + html += '
'; - return CollectionEditor; -}); + html += getEditorHtml(); + + dlg.innerHTML = html; + + initEditor(dlg, items); + + dlg.querySelector('.btnCancel').addEventListener('click', () => { + + dialogHelper.close(dlg); + }); + + if (layoutManager.tv) { + centerFocus(dlg.querySelector('.formDialogContent'), false, true); + } + + return dialogHelper.open(dlg).then(() => { + + if (layoutManager.tv) { + centerFocus(dlg.querySelector('.formDialogContent'), false, false); + } + + if (dlg.submitted) { + return Promise.resolve(); + } + + return Promise.reject(); + }); + } + } + +/* eslint-enable indent */ +export default showEditor; diff --git a/src/components/confirm/confirm.js b/src/components/confirm/confirm.js index 517d6fa9be..2d5cfdb55c 100644 --- a/src/components/confirm/confirm.js +++ b/src/components/confirm/confirm.js @@ -1,5 +1,9 @@ -define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) { - 'use strict'; +import browser from 'browser'; +import dialog from 'dialog'; +import globalize from 'globalize'; + +/* eslint-disable indent */ +export default (() => { function replaceAll(str, find, replace) { return str.split(find).join(replace); @@ -7,7 +11,7 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) if (browser.tv && window.confirm) { // Use the native confirm dialog - return function (options) { + return options => { if (typeof options === 'string') { options = { title: '', @@ -15,8 +19,8 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) }; } - var text = replaceAll(options.text || '', '
', '\n'); - var result = confirm(text); + const text = replaceAll(options.text || '', '
', '\n'); + const result = confirm(text); if (result) { return Promise.resolve(); @@ -26,8 +30,8 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) }; } else { // Use our own dialog - return function (text, title) { - var options; + return (text, title) => { + let options; if (typeof text === 'string') { options = { title: title, @@ -37,7 +41,7 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) options = text; } - var items = []; + const items = []; items.push({ name: options.cancelText || globalize.translate('ButtonCancel'), @@ -53,7 +57,7 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) options.buttons = items; - return dialog(options).then(function (result) { + return dialog.show(options).then(result => { if (result === 'ok') { return Promise.resolve(); } @@ -62,4 +66,5 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) }); }; } -}); +})(); +/* eslint-enable indent */ diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js index cfb5821b38..937e96d297 100644 --- a/src/components/dialog/dialog.js +++ b/src/components/dialog/dialog.js @@ -1,20 +1,31 @@ -define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle', 'flexStyles'], function (dialogHelper, dom, layoutManager, scrollHelper, globalize, require) { - 'use strict'; +import dialogHelper from 'dialogHelper'; +import dom from 'dom'; +import layoutManager from 'layoutManager'; +import scrollHelper from 'scrollHelper'; +import globalize from 'globalize'; +import 'material-icons'; +import 'emby-button'; +import 'paper-icon-button-light'; +import 'emby-input'; +import 'formDialogStyle'; +import 'flexStyles'; + +/* eslint-disable indent */ function showDialog(options, template) { - var dialogOptions = { + const dialogOptions = { removeOnClose: true, scrollY: false }; - var enableTvLayout = layoutManager.tv; + const enableTvLayout = layoutManager.tv; if (enableTvLayout) { dialogOptions.size = 'fullscreen'; } - var dlg = dialogHelper.createDialog(dialogOptions); + const dlg = dialogHelper.createDialog(dialogOptions); dlg.classList.add('formDialog'); @@ -22,7 +33,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're dlg.classList.add('align-items-center'); dlg.classList.add('justify-content-center'); - var formDialogContent = dlg.querySelector('.formDialogContent'); + const formDialogContent = dlg.querySelector('.formDialogContent'); formDialogContent.classList.add('no-grow'); if (enableTvLayout) { @@ -30,7 +41,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're formDialogContent.style['max-height'] = '60%'; scrollHelper.centerFocus.on(formDialogContent, false); } else { - formDialogContent.style.maxWidth = (Math.min((options.buttons.length * 150) + 200, dom.getWindowSize().innerWidth - 50)) + 'px'; + formDialogContent.style.maxWidth = `${Math.min((options.buttons.length * 150) + 200, dom.getWindowSize().innerWidth - 50)}px`; dlg.classList.add('dialog-fullscreen-lowres'); } @@ -44,27 +55,27 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're dlg.querySelector('.formDialogHeaderTitle').classList.add('hide'); } - var displayText = options.html || options.text || ''; + const displayText = options.html || options.text || ''; dlg.querySelector('.text').innerHTML = displayText; if (!displayText) { dlg.querySelector('.dialogContentInner').classList.add('hide'); } - var i; - var length; - var html = ''; - var hasDescriptions = false; + let i; + let length; + let html = ''; + let hasDescriptions = false; for (i = 0, length = options.buttons.length; i < length; i++) { - var item = options.buttons[i]; - var autoFocus = i === 0 ? ' autofocus' : ''; + const item = options.buttons[i]; + const autoFocus = i === 0 ? ' autofocus' : ''; - var buttonClass = 'btnOption raised formDialogFooterItem formDialogFooterItem-autosize'; + let buttonClass = 'btnOption raised formDialogFooterItem formDialogFooterItem-autosize'; if (item.type) { - buttonClass += ' button-' + item.type; + buttonClass += ` button-${item.type}`; } if (item.description) { @@ -75,10 +86,10 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're buttonClass += ' formDialogFooterItem-vertical formDialogFooterItem-nomarginbottom'; } - html += ''; + html += ``; if (item.description) { - html += '
' + item.description + '
'; + html += `
${item.description}
`; } } @@ -88,18 +99,18 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're dlg.querySelector('.formDialogFooter').classList.add('formDialogFooter-vertical'); } - var dialogResult; + let dialogResult; function onButtonClick() { dialogResult = this.getAttribute('data-id'); dialogHelper.close(dlg); } - var buttons = dlg.querySelectorAll('.btnOption'); + const buttons = dlg.querySelectorAll('.btnOption'); for (i = 0, length = buttons.length; i < length; i++) { buttons[i].addEventListener('click', onButtonClick); } - return dialogHelper.open(dlg).then(function () { + return dialogHelper.open(dlg).then(() => { if (enableTvLayout) { scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false); @@ -113,9 +124,9 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're }); } - return function (text, title) { + export async function show(text, title) { - var options; + let options; if (typeof text === 'string') { options = { title: title, @@ -125,10 +136,13 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're options = text; } - return new Promise(function (resolve, reject) { - require(['text!./dialog.template.html'], function (template) { - showDialog(options, template).then(resolve, reject); - }); + const { default: template } = await import('text!./dialog.template.html'); + return new Promise((resolve, reject) => { + showDialog(options, template).then(resolve, reject); }); - }; -}); + } + +/* eslint-enable indent */ +export default { + show: show +}; diff --git a/src/components/dialog/dialog.template.html b/src/components/dialog/dialog.template.html index bee0ef7f73..6d4310c0f4 100644 --- a/src/components/dialog/dialog.template.html +++ b/src/components/dialog/dialog.template.html @@ -4,12 +4,8 @@
- -
- -
+
-
-
+
diff --git a/src/components/dialogHelper/dialogHelper.js b/src/components/dialogHelper/dialogHelper.js index 8b08cde678..ca7c94a416 100644 --- a/src/components/dialogHelper/dialogHelper.js +++ b/src/components/dialogHelper/dialogHelper.js @@ -1,7 +1,15 @@ -define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'dom', 'css!./dialoghelper.css', 'scrollStyles'], function (appRouter, focusManager, browser, layoutManager, inputManager, dom) { - 'use strict'; +import appRouter from 'appRouter'; +import focusManager from 'focusManager'; +import browser from 'browser'; +import layoutManager from 'layoutManager'; +import inputManager from 'inputManager'; +import dom from 'dom'; +import 'css!./dialoghelper.css'; +import 'scrollStyles'; - var globalOnOpenCallback; +/* eslint-disable indent */ + + let globalOnOpenCallback; function enableAnimation() { @@ -25,7 +33,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', } function tryRemoveElement(elem) { - var parentNode = elem.parentNode; + const parentNode = elem.parentNode; if (parentNode) { // Seeing crashes in edge webview @@ -39,14 +47,14 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', function DialogHashHandler(dlg, hash, resolve) { - var self = this; + const self = this; self.originalUrl = window.location.href; - var activeElement = document.activeElement; - var removeScrollLockOnClose = false; + const activeElement = document.activeElement; + let removeScrollLockOnClose = false; function onHashChange(e) { - var isBack = self.originalUrl === window.location.href; + const isBack = self.originalUrl === window.location.href; if (isBack || !isOpened(dlg)) { window.removeEventListener('popstate', onHashChange); @@ -84,7 +92,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', } if (!self.closedByBack && isHistoryEnabled(dlg)) { - var state = history.state || {}; + const state = history.state || {}; if (state.dialogId === hash) { history.back(); } @@ -97,7 +105,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', if (dlg.getAttribute('data-removeonclose') !== 'false') { removeCenterFocus(dlg); - var dialogContainer = dlg.dialogContainer; + const dialogContainer = dlg.dialogContainer; if (dialogContainer) { tryRemoveElement(dialogContainer); dlg.dialogContainer = null; @@ -108,7 +116,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', //resolve(); // if we just called history.back(), then use a timeout to allow the history events to fire first - setTimeout(function () { + setTimeout(() => { resolve({ element: dlg, closedByBack: self.closedByBack @@ -118,7 +126,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', dlg.addEventListener('close', onDialogClosed); - var center = !dlg.classList.contains('dialog-fixedSize'); + const center = !dlg.classList.contains('dialog-fixedSize'); if (center) { dlg.classList.add('centeredDialog'); } @@ -141,7 +149,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', animateDialogOpen(dlg); if (isHistoryEnabled(dlg)) { - appRouter.pushState({ dialogId: hash }, 'Dialog', '#' + hash); + appRouter.pushState({ dialogId: hash }, 'Dialog', `#${hash}`); window.addEventListener('popstate', onHashChange); } else { @@ -151,10 +159,10 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', function addBackdropOverlay(dlg) { - var backdrop = document.createElement('div'); + const backdrop = document.createElement('div'); backdrop.classList.add('dialogBackdrop'); - var backdropParent = dlg.dialogContainer || dlg; + const backdropParent = dlg.dialogContainer || dlg; backdropParent.parentNode.insertBefore(backdrop, backdropParent); dlg.backdrop = backdrop; @@ -162,7 +170,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', void backdrop.offsetWidth; backdrop.classList.add('dialogBackdropOpened'); - dom.addEventListener((dlg.dialogContainer || backdrop), 'click', function (e) { + dom.addEventListener((dlg.dialogContainer || backdrop), 'click', e => { if (e.target === dlg.dialogContainer) { close(dlg); } @@ -170,7 +178,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', passive: true }); - dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', function (e) { + dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', e => { if (e.target === dlg.dialogContainer) { // Close the application dialog menu close(dlg); @@ -184,26 +192,26 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', return dlg.getAttribute('data-history') === 'true'; } - function open(dlg) { + export function open(dlg) { if (globalOnOpenCallback) { globalOnOpenCallback(dlg); } - var parent = dlg.parentNode; + const parent = dlg.parentNode; if (parent) { parent.removeChild(dlg); } - var dialogContainer = document.createElement('div'); + const dialogContainer = document.createElement('div'); dialogContainer.classList.add('dialogContainer'); dialogContainer.appendChild(dlg); dlg.dialogContainer = dialogContainer; document.body.appendChild(dialogContainer); - return new Promise(function (resolve, reject) { + return new Promise((resolve, reject) => { - new DialogHashHandler(dlg, 'dlg' + new Date().getTime(), resolve); + new DialogHashHandler(dlg, `dlg${new Date().getTime()}`, resolve); }); } @@ -213,7 +221,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', return !dlg.classList.contains('hide'); } - function close(dlg) { + export function close(dlg) { if (isOpened(dlg)) { if (isHistoryEnabled(dlg)) { @@ -233,7 +241,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', cancelable: false })); - var onAnimationFinish = function () { + const onAnimationFinish = () => { focusManager.popScope(dlg); dlg.classList.add('hide'); @@ -249,7 +257,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', function animateDialogOpen(dlg) { - var onAnimationFinish = function () { + const onAnimationFinish = () => { focusManager.pushScope(dlg); if (dlg.getAttribute('data-autofocus') === 'true') { @@ -264,7 +272,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', if (enableAnimation()) { - var onFinish = function () { + const onFinish = () => { dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, { once: true }); @@ -283,24 +291,24 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', if (enableAnimation()) { - var animated = true; + let animated = true; switch (dlg.animationConfig.exit.name) { case 'fadeout': - dlg.style.animation = 'fadeout ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both'; + dlg.style.animation = `fadeout ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`; break; case 'scaledown': - dlg.style.animation = 'scaledown ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both'; + dlg.style.animation = `scaledown ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`; break; case 'slidedown': - dlg.style.animation = 'slidedown ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both'; + dlg.style.animation = `slidedown ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`; break; default: animated = false; break; } - var onFinish = function () { + const onFinish = () => { dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, { once: true }); @@ -318,7 +326,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', onAnimationFinish(); } - var supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style; + const supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style; function shouldLockDocumentScroll(options) { @@ -343,7 +351,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', function removeBackdrop(dlg) { - var backdrop = dlg.backdrop; + const backdrop = dlg.backdrop; if (!backdrop) { return; @@ -351,7 +359,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', dlg.backdrop = null; - var onAnimationFinish = function () { + const onAnimationFinish = () => { tryRemoveElement(backdrop); }; @@ -368,20 +376,20 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', } function centerFocus(elem, horiz, on) { - require(['scrollHelper'], function (scrollHelper) { - var fn = on ? 'on' : 'off'; + import('scrollHelper').then(scrollHelper => { + const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); } - function createDialog(options) { + export function createDialog(options) { options = options || {}; // If there's no native dialog support, use a plain div // Also not working well in samsung tizen browser, content inside not clickable // Just go ahead and always use a plain div because we're seeing issues overlaying absoltutely positioned content over a modal dialog - var dlg = document.createElement('div'); + const dlg = document.createElement('div'); dlg.classList.add('focuscontainer'); dlg.classList.add('hide'); @@ -406,17 +414,17 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', dlg.setAttribute('data-autofocus', 'true'); } - var defaultEntryAnimation; - var defaultExitAnimation; + let defaultEntryAnimation; + let defaultExitAnimation; defaultEntryAnimation = 'scaleup'; defaultExitAnimation = 'scaledown'; - var entryAnimation = options.entryAnimation || defaultEntryAnimation; - var exitAnimation = options.exitAnimation || defaultExitAnimation; + const entryAnimation = options.entryAnimation || defaultEntryAnimation; + const exitAnimation = options.exitAnimation || defaultExitAnimation; // If it's not fullscreen then lower the default animation speed to make it open really fast - var entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280); - var exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220); + const entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280); + const exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220); dlg.animationConfig = { // scale up @@ -461,7 +469,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', if (options.size) { dlg.classList.add('dialog-fixedSize'); - dlg.classList.add('dialog-' + options.size); + dlg.classList.add(`dialog-${options.size}`); } if (enableAnimation()) { @@ -469,16 +477,16 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', switch (dlg.animationConfig.entry.name) { case 'fadein': - dlg.style.animation = 'fadein ' + entryAnimationDuration + 'ms ease-out normal'; + dlg.style.animation = `fadein ${entryAnimationDuration}ms ease-out normal`; break; case 'scaleup': - dlg.style.animation = 'scaleup ' + entryAnimationDuration + 'ms ease-out normal both'; + dlg.style.animation = `scaleup ${entryAnimationDuration}ms ease-out normal both`; break; case 'slideup': - dlg.style.animation = 'slideup ' + entryAnimationDuration + 'ms ease-out normal'; + dlg.style.animation = `slideup ${entryAnimationDuration}ms ease-out normal`; break; case 'slidedown': - dlg.style.animation = 'slidedown ' + entryAnimationDuration + 'ms ease-out normal'; + dlg.style.animation = `slidedown ${entryAnimationDuration}ms ease-out normal`; break; default: break; @@ -488,12 +496,15 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', return dlg; } - return { - open: open, - close: close, - createDialog: createDialog, - setOnOpen: function (val) { - globalOnOpenCallback = val; - } - }; -}); + export function setOnOpen(val) { + globalOnOpenCallback = val; + } + +/* eslint-enable indent */ + +export default { + open: open, + close: close, + createDialog: createDialog, + setOnOpen: setOnOpen +}; diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js index e08fcc8336..41744bdcbb 100644 --- a/src/components/directorybrowser/directorybrowser.js +++ b/src/components/directorybrowser/directorybrowser.js @@ -1,9 +1,19 @@ -define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-input', 'paper-icon-button-light', 'css!./directorybrowser', 'formDialogStyle', 'emby-button'], function(loading, dialogHelper, dom, globalize) { - 'use strict'; +import loading from 'loading'; +import dialogHelper from 'dialogHelper'; +import dom from 'dom'; +import globalize from 'globalize'; +import 'listViewStyle'; +import 'emby-input'; +import 'paper-icon-button-light'; +import 'css!./directorybrowser'; +import 'formDialogStyle'; +import 'emby-button'; + +/* eslint-disable indent */ function getSystemInfo() { return systemInfo ? Promise.resolve(systemInfo) : ApiClient.getPublicSystemInfo().then( - function(info) { + info => { systemInfo = info; return info; } @@ -21,9 +31,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in loading.show(); - var promises = []; + const promises = []; - if ('Network' === path) { + if (path === 'Network') { promises.push(ApiClient.getNetworkDevices()); } else { if (path) { @@ -35,10 +45,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } Promise.all(promises).then( - function(responses) { - var folders = responses[0]; - var parentPath = responses[1] || ''; - var html = ''; + responses => { + const folders = responses[0]; + const parentPath = responses[1] || ''; + let html = ''; page.querySelector('.results').scrollTop = 0; page.querySelector('#txtDirectoryPickerPath').value = path || ''; @@ -46,9 +56,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in if (path) { html += getItem('lnkPath lnkDirectory', '', parentPath, '...'); } - for (var i = 0, length = folders.length; i < length; i++) { - var folder = folders[i]; - var cssClass = 'File' === folder.Type ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory'; + for (let i = 0, length = folders.length; i < length; i++) { + const folder = folders[i]; + const cssClass = folder.Type === 'File' ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory'; html += getItem(cssClass, folder.Type, folder.Path, folder.Name); } @@ -58,7 +68,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in page.querySelector('.results').innerHTML = html; loading.hide(); - }, function() { + }, () => { if (updatePathOnError) { page.querySelector('#txtDirectoryPickerPath').value = ''; page.querySelector('.results').innerHTML = ''; @@ -69,8 +79,8 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } function getItem(cssClass, type, path, name) { - var html = ''; - html += '
'; + let html = ''; + html += `
`; html += '
'; html += '
'; html += name; @@ -82,19 +92,19 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } function getEditorHtml(options, systemInfo) { - var html = ''; + let html = ''; html += '
'; html += '
'; if (!options.pathReadOnly) { - var instruction = options.instruction ? options.instruction + '

' : ''; + const instruction = options.instruction ? `${options.instruction}

` : ''; html += '
'; html += instruction; - if ('bsd' === systemInfo.OperatingSystem.toLowerCase()) { + if (systemInfo.OperatingSystem.toLowerCase() === 'bsd') { html += '
'; html += '
'; html += globalize.translate('MessageDirectoryPickerBSDInstruction'); html += '
'; - } else if ('linux' === systemInfo.OperatingSystem.toLowerCase()) { + } else if (systemInfo.OperatingSystem.toLowerCase() === 'linux') { html += '
'; html += '
'; html += globalize.translate('MessageDirectoryPickerLinuxInstruction'); @@ -105,17 +115,17 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in html += '
'; html += '
'; html += '
'; - var labelKey; + let labelKey; if (options.includeFiles !== true) { labelKey = 'LabelFolder'; } else { labelKey = 'LabelPath'; } - var readOnlyAttribute = options.pathReadOnly ? ' readonly' : ''; - html += ''; + const readOnlyAttribute = options.pathReadOnly ? ' readonly' : ''; + html += ``; html += '
'; if (!readOnlyAttribute) { - html += ''; + html += ``; } html += '
'; if (!readOnlyAttribute) { @@ -123,14 +133,14 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } if (options.enableNetworkSharePath) { html += '
'; - html += ''; + html += ``; html += '
'; html += globalize.translate('LabelOptionalNetworkPathHelp', '\\\\server', '\\\\192.168.1.101'); html += '
'; html += '
'; } html += '
'; - html += ''; + html += ``; html += '
'; html += '
'; html += '
'; @@ -147,7 +157,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } function alertTextWithOptions(options) { - require(['alert'], function(alert) { + import('alert').then(({default: alert}) => { alert(options); }); } @@ -160,7 +170,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in ValidateWriteable: validateWriteable, Path: path } - }).catch(function(response) { + }).catch(response => { if (response) { if (response.status === 404) { alertText(globalize.translate('PathNotFound')); @@ -180,10 +190,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } function initEditor(content, options, fileOptions) { - content.addEventListener('click', function(e) { - var lnkPath = dom.parentWithClass(e.target, 'lnkPath'); + content.addEventListener('click', e => { + const lnkPath = dom.parentWithClass(e.target, 'lnkPath'); if (lnkPath) { - var path = lnkPath.getAttribute('data-path'); + const path = lnkPath.getAttribute('data-path'); if (lnkPath.classList.contains('lnkFile')) { content.querySelector('#txtDirectoryPickerPath').value = path; } else { @@ -192,25 +202,25 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in } }); - content.addEventListener('click', function(e) { + content.addEventListener('click', e => { if (dom.parentWithClass(e.target, 'btnRefreshDirectories')) { - var path = content.querySelector('#txtDirectoryPickerPath').value; + const path = content.querySelector('#txtDirectoryPickerPath').value; refreshDirectoryBrowser(content, path, fileOptions); } }); - content.addEventListener('change', function(e) { - var txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT'); - if (txtDirectoryPickerPath && 'txtDirectoryPickerPath' === txtDirectoryPickerPath.id) { + content.addEventListener('change', e => { + const txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT'); + if (txtDirectoryPickerPath && txtDirectoryPickerPath.id === 'txtDirectoryPickerPath') { refreshDirectoryBrowser(content, txtDirectoryPickerPath.value, fileOptions); } }); content.querySelector('form').addEventListener('submit', function(e) { if (options.callback) { - var networkSharePath = this.querySelector('#txtNetworkPath'); + let networkSharePath = this.querySelector('#txtNetworkPath'); networkSharePath = networkSharePath ? networkSharePath.value : null; - var path = this.querySelector('#txtDirectoryPickerPath').value; + const path = this.querySelector('#txtDirectoryPickerPath').value; validatePath(path, options.validateWriteable, ApiClient).then(options.callback(path, networkSharePath)); } e.preventDefault(); @@ -224,77 +234,79 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in return Promise.resolve(options.path); } else { return ApiClient.getJSON(ApiClient.getUrl('Environment/DefaultDirectoryBrowser')).then( - function(result) { + result => { return result.Path || ''; - }, function() { + }, () => { return ''; } ); } } - function directoryBrowser() { - var currentDialog; - var self = this; - self.show = function(options) { - options = options || {}; - var fileOptions = { - includeDirectories: true - }; - if (options.includeDirectories != null) { - fileOptions.includeDirectories = options.includeDirectories; - } - if (options.includeFiles != null) { - fileOptions.includeFiles = options.includeFiles; - } - Promise.all([getSystemInfo(), getDefaultPath(options)]).then( - function(responses) { - var systemInfo = responses[0]; - var initialPath = responses[1]; - var dlg = dialogHelper.createDialog({ - size: 'small', - removeOnClose: true, - scrollY: false - }); - dlg.classList.add('ui-body-a'); - dlg.classList.add('background-theme-a'); - dlg.classList.add('directoryPicker'); - dlg.classList.add('formDialog'); - - var html = ''; - html += '
'; - html += ''; - html += '

'; - html += options.header || globalize.translate('HeaderSelectPath'); - html += '

'; - html += '
'; - html += getEditorHtml(options, systemInfo); - dlg.innerHTML = html; - initEditor(dlg, options, fileOptions); - dlg.addEventListener('close', onDialogClosed); - dialogHelper.open(dlg); - dlg.querySelector('.btnCloseDialog').addEventListener('click', function() { - dialogHelper.close(dlg); - }); - currentDialog = dlg; - dlg.querySelector('#txtDirectoryPickerPath').value = initialPath; - var txtNetworkPath = dlg.querySelector('#txtNetworkPath'); - if (txtNetworkPath) { - txtNetworkPath.value = options.networkSharePath || ''; - } - if (!options.pathReadOnly) { - refreshDirectoryBrowser(dlg, initialPath, fileOptions, true); - } + class directoryBrowser { + constructor() { + let currentDialog; + this.show = options => { + options = options || {}; + const fileOptions = { + includeDirectories: true + }; + if (options.includeDirectories != null) { + fileOptions.includeDirectories = options.includeDirectories; } - ); - }; - self.close = function() { - if (currentDialog) { - dialogHelper.close(currentDialog); - } - }; + if (options.includeFiles != null) { + fileOptions.includeFiles = options.includeFiles; + } + Promise.all([getSystemInfo(), getDefaultPath(options)]).then( + responses => { + const systemInfo = responses[0]; + const initialPath = responses[1]; + const dlg = dialogHelper.createDialog({ + size: 'small', + removeOnClose: true, + scrollY: false + }); + dlg.classList.add('ui-body-a'); + dlg.classList.add('background-theme-a'); + dlg.classList.add('directoryPicker'); + dlg.classList.add('formDialog'); + + let html = ''; + html += '
'; + html += ''; + html += '

'; + html += options.header || globalize.translate('HeaderSelectPath'); + html += '

'; + html += '
'; + html += getEditorHtml(options, systemInfo); + dlg.innerHTML = html; + initEditor(dlg, options, fileOptions); + dlg.addEventListener('close', onDialogClosed); + dialogHelper.open(dlg); + dlg.querySelector('.btnCloseDialog').addEventListener('click', () => { + dialogHelper.close(dlg); + }); + currentDialog = dlg; + dlg.querySelector('#txtDirectoryPickerPath').value = initialPath; + const txtNetworkPath = dlg.querySelector('#txtNetworkPath'); + if (txtNetworkPath) { + txtNetworkPath.value = options.networkSharePath || ''; + } + if (!options.pathReadOnly) { + refreshDirectoryBrowser(dlg, initialPath, fileOptions, true); + } + } + ); + }; + this.close = () => { + if (currentDialog) { + dialogHelper.close(currentDialog); + } + }; + } } - var systemInfo; - return directoryBrowser; -}); + let systemInfo; + +/* eslint-enable indent */ +export default directoryBrowser; diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js index c4eb35f49f..801c8657bd 100644 --- a/src/components/displaySettings/displaySettings.js +++ b/src/components/displaySettings/displaySettings.js @@ -1,22 +1,37 @@ -define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', 'apphost', 'focusManager', 'datetime', 'globalize', 'loading', 'connectionManager', 'skinManager', 'dom', 'events', 'emby-select', 'emby-checkbox', 'emby-button'], function (require, browser, layoutManager, appSettings, pluginManager, appHost, focusManager, datetime, globalize, loading, connectionManager, skinManager, dom, events) { - 'use strict'; +import browser from 'browser'; +import layoutManager from 'layoutManager'; +import appSettings from 'appSettings'; +import pluginManager from 'pluginManager'; +import appHost from 'apphost'; +import focusManager from 'focusManager'; +import datetime from 'datetime'; +import globalize from 'globalize'; +import loading from 'loading'; +import connectionManager from 'connectionManager'; +import skinManager from 'skinManager'; +import events from 'events'; +import 'emby-select'; +import 'emby-checkbox'; +import 'emby-button'; + +/* eslint-disable indent */ function fillThemes(select, isDashboard) { - select.innerHTML = skinManager.getThemes().map(function (t) { - var value = t.id; + select.innerHTML = skinManager.getThemes().map(t => { + let value = t.id; if (t.isDefault && !isDashboard) { value = ''; } else if (t.isDefaultServerDashboard && isDashboard) { value = ''; } - return ''; + return ``; }).join(''); } function loadScreensavers(context, userSettings) { - var selectScreensaver = context.querySelector('.selectScreensaver'); - var options = pluginManager.ofType('screensaver').map(function (plugin) { + const selectScreensaver = context.querySelector('.selectScreensaver'); + const options = pluginManager.ofType('screensaver').map(plugin => { return { name: plugin.name, value: plugin.id @@ -28,8 +43,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' value: 'none' }); - selectScreensaver.innerHTML = options.map(function (o) { - return ''; + selectScreensaver.innerHTML = options.map(o => { + return ``; }).join(''); selectScreensaver.value = userSettings.screensaver(); @@ -41,8 +56,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' function loadSoundEffects(context, userSettings) { - var selectSoundEffects = context.querySelector('.selectSoundEffects'); - var options = pluginManager.ofType('soundeffects').map(function (plugin) { + const selectSoundEffects = context.querySelector('.selectSoundEffects'); + const options = pluginManager.ofType('soundeffects').map(plugin => { return { name: plugin.name, value: plugin.id @@ -54,8 +69,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' value: 'none' }); - selectSoundEffects.innerHTML = options.map(function (o) { - return ''; + selectSoundEffects.innerHTML = options.map(o => { + return ``; }).join(''); selectSoundEffects.value = userSettings.soundEffects(); @@ -67,17 +82,17 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' function loadSkins(context, userSettings) { - var selectSkin = context.querySelector('.selectSkin'); + const selectSkin = context.querySelector('.selectSkin'); - var options = pluginManager.ofType('skin').map(function (plugin) { + const options = pluginManager.ofType('skin').map(plugin => { return { name: plugin.name, value: plugin.id }; }); - selectSkin.innerHTML = options.map(function (o) { - return ''; + selectSkin.innerHTML = options.map(o => { + return ``; }).join(''); selectSkin.value = userSettings.skin(); @@ -92,7 +107,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' } } - function showOrHideMissingEpisodesField(context, user, apiClient) { + function showOrHideMissingEpisodesField(context) { if (browser.tizen || browser.web0s) { context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide'); @@ -102,10 +117,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide'); } - function loadForm(context, user, userSettings, apiClient) { - - var loggedInUserId = apiClient.getCurrentUserId(); - var userId = user.Id; + function loadForm(context, user, userSettings) { if (user.Policy.IsAdministrator) { context.querySelector('.selectDashboardThemeContainer').classList.remove('hide'); @@ -167,8 +179,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup(); - var selectTheme = context.querySelector('#selectTheme'); - var selectDashboardTheme = context.querySelector('#selectDashboardTheme'); + const selectTheme = context.querySelector('#selectTheme'); + const selectDashboardTheme = context.querySelector('#selectDashboardTheme'); fillThemes(selectTheme); fillThemes(selectDashboardTheme, true); @@ -195,7 +207,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || ''; - showOrHideMissingEpisodesField(context, user, apiClient); + showOrHideMissingEpisodesField(context); loading.hide(); } @@ -239,29 +251,29 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { loading.show(); - apiClient.getUser(userId).then(function (user) { - saveUser(context, user, userSettings, apiClient).then(function () { + apiClient.getUser(userId).then(user => { + saveUser(context, user, userSettings, apiClient).then(() => { loading.hide(); if (enableSaveConfirmation) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('SettingsSaved')); }); } events.trigger(instance, 'saved'); - }, function () { + }, () => { loading.hide(); }); }); } function onSubmit(e) { - var self = this; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userId = self.options.userId; - var userSettings = self.options.userSettings; + const self = this; + const apiClient = connectionManager.getApiClient(self.options.serverId); + const userId = self.options.userId; + const userSettings = self.options.userSettings; - userSettings.setUserInfo(userId, apiClient).then(function () { - var enableSaveConfirmation = self.options.enableSaveConfirmation; + userSettings.setUserInfo(userId, apiClient).then(() => { + const enableSaveConfirmation = self.options.enableSaveConfirmation; save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); }); @@ -272,50 +284,51 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' return false; } - function embed(options, self) { - require(['text!./displaySettings.template.html'], function (template) { - options.element.innerHTML = globalize.translateDocument(template, 'core'); - options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); - if (options.enableSaveButton) { - options.element.querySelector('.btnSave').classList.remove('hide'); - } - self.loadData(options.autoFocus); - }); + async function embed(options, self) { + const { default: template } = await import('text!./displaySettings.template.html'); + options.element.innerHTML = globalize.translateDocument(template, 'core'); + options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); + if (options.enableSaveButton) { + options.element.querySelector('.btnSave').classList.remove('hide'); + } + self.loadData(options.autoFocus); } - function DisplaySettings(options) { - this.options = options; - embed(options, this); - } + class DisplaySettings { + constructor(options) { + this.options = options; + embed(options, this); + } - DisplaySettings.prototype.loadData = function (autoFocus) { - var self = this; - var context = self.options.element; + loadData(autoFocus) { + const self = this; + const context = self.options.element; - loading.show(); + loading.show(); - var userId = self.options.userId; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userSettings = self.options.userSettings; + const userId = self.options.userId; + const apiClient = connectionManager.getApiClient(self.options.serverId); + const userSettings = self.options.userSettings; - return apiClient.getUser(userId).then(function (user) { - return userSettings.setUserInfo(userId, apiClient).then(function () { - self.dataLoaded = true; - loadForm(context, user, userSettings, apiClient); - if (autoFocus) { - focusManager.autoFocus(context); - } + return apiClient.getUser(userId).then(user => { + return userSettings.setUserInfo(userId, apiClient).then(() => { + self.dataLoaded = true; + loadForm(context, user, userSettings); + if (autoFocus) { + focusManager.autoFocus(context); + } + }); }); - }); - }; + } - DisplaySettings.prototype.submit = function () { - onSubmit.call(this); - }; + submit() { + onSubmit.call(this); + } - DisplaySettings.prototype.destroy = function () { - this.options = null; - }; + destroy() { + this.options = null; + } + } - return DisplaySettings; -}); +/* eslint-enable indent */ +export default DisplaySettings; diff --git a/src/components/fetchhelper.js b/src/components/fetchhelper.js index 08fe803ecf..f626abefee 100644 --- a/src/components/fetchhelper.js +++ b/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} + * @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 */ diff --git a/src/components/filterdialog/filterdialog.js b/src/components/filterdialog/filterdialog.js index 1dfd04c679..df17c19dec 100644 --- a/src/components/filterdialog/filterdialog.js +++ b/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 += '
'; html += items.map(function (filter) { - var itemHtml = ''; - var checkedHtml = isCheckedFn(filter) ? ' checked' : ''; + let itemHtml = ''; + const checkedHtml = isCheckedFn(filter) ? 'checked' : ''; itemHtml += ''; 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 }); @@ -379,19 +412,22 @@ define(['dom', 'dialogHelper', 'globalize', 'connectionManager', 'events', 'brow dlg.classList.add('background-theme-a'); dlg.classList.add('formDialog'); dlg.classList.add('filterDialog'); - dlg.innerHTML = globalize.translateDocument(template); - setVisibility(dlg, options); + dlg.innerHTML = globalize.translateHtml(template); + 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; diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js index c189856e7b..936e2b0407 100644 --- a/src/components/filtermenu/filtermenu.js +++ b/src/components/filtermenu/filtermenu.js @@ -286,7 +286,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost', html += template; - dlg.innerHTML = globalize.translateDocument(html, 'core'); + dlg.innerHTML = globalize.translateHtml(html, 'core'); var settingElements = dlg.querySelectorAll('.viewSetting'); for (var i = 0, length = settingElements.length; i < length; i++) { diff --git a/src/components/formdialog.css b/src/components/formdialog.css index 94695f4865..d7cb162e8c 100644 --- a/src/components/formdialog.css +++ b/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; } diff --git a/src/components/groupedcards.js b/src/components/groupedcards.js index 602c4310f4..543b295fea 100644 --- a/src/components/groupedcards.js +++ b/src/components/groupedcards.js @@ -1,5 +1,8 @@ -define(['dom', 'appRouter', 'connectionManager'], function (dom, appRouter, connectionManager) { - 'use strict'; +/* eslint-disable indent */ + +import dom from 'dom'; +import appRouter from 'appRouter'; +import connectionManager from 'connectionManager'; function onGroupedCardClick(e, card) { var itemId = card.getAttribute('data-id'); @@ -31,7 +34,7 @@ define(['dom', 'appRouter', 'connectionManager'], function (dom, appRouter, conn } } - function onItemsContainerClick(e) { + export function onItemsContainerClick(e) { var groupedCard = dom.parentWithClass(e.target, 'groupedCard'); if (groupedCard) { @@ -39,7 +42,4 @@ define(['dom', 'appRouter', 'connectionManager'], function (dom, appRouter, conn } } - return { - onItemsContainerClick: onItemsContainerClick - }; -}); +/* eslint-enable indent */ diff --git a/src/components/guide/guide-settings.js b/src/components/guide/guide-settings.js index 7409a7e943..77a3637251 100644 --- a/src/components/guide/guide-settings.js +++ b/src/components/guide/guide-settings.js @@ -114,7 +114,7 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio var html = ''; - html += globalize.translateDocument(template, 'core'); + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js index 223d3a2063..4ae2041223 100644 --- a/src/components/guide/guide.js +++ b/src/components/guide/guide.js @@ -1151,7 +1151,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', context.classList.add('tvguide'); - context.innerHTML = globalize.translateDocument(template, 'core'); + context.innerHTML = globalize.translateHtml(template, 'core'); programGrid = context.querySelector('.programGrid'); var timeslotHeaders = context.querySelector('.timeslotHeaders'); diff --git a/src/components/homeScreenSettings/homeScreenSettings.js b/src/components/homeScreenSettings/homeScreenSettings.js index 9eae944d26..6d6c26fce4 100644 --- a/src/components/homeScreenSettings/homeScreenSettings.js +++ b/src/components/homeScreenSettings/homeScreenSettings.js @@ -1,26 +1,37 @@ -define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'homeSections', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager, homeSections, dom, events) { - 'use strict'; +import layoutManager from 'layoutManager'; +import focusManager from 'focusManager'; +import globalize from 'globalize'; +import loading from 'loading'; +import connectionManager from 'connectionManager'; +import homeSections from 'homeSections'; +import dom from 'dom'; +import events from 'events'; +import 'listViewStyle'; +import 'emby-select'; +import 'emby-checkbox'; - var numConfigurableSections = 7; +/* eslint-disable indent */ + + const numConfigurableSections = 7; function renderViews(page, user, result) { - var folderHtml = ''; + let folderHtml = ''; folderHtml += '
'; - folderHtml += result.map(function (i) { + folderHtml += result.map(i => { - var currentHtml = ''; + let currentHtml = ''; - var id = 'chkGroupFolder' + i.Id; + const id = `chkGroupFolder${i.Id}`; - var isChecked = user.Configuration.GroupedFolders.indexOf(i.Id) !== -1; + const isChecked = user.Configuration.GroupedFolders.includes(i.Id); - var checkedHtml = isChecked ? ' checked="checked"' : ''; + const checkedHtml = isChecked ? ' checked="checked"' : ''; currentHtml += ''; return currentHtml; @@ -34,7 +45,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function getLandingScreenOptions(type) { - var list = []; + const list = []; if (type === 'movies') { list.push({ @@ -123,27 +134,27 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function getLandingScreenOptionsHtml(type, userValue) { - return getLandingScreenOptions(type).map(function (o) { + return getLandingScreenOptions(type).map(o => { - var selected = userValue === o.value || (o.isDefault && !userValue); - var selectedHtml = selected ? ' selected' : ''; - var optionValue = o.isDefault ? '' : o.value; + const selected = userValue === o.value || (o.isDefault && !userValue); + const selectedHtml = selected ? ' selected' : ''; + const optionValue = o.isDefault ? '' : o.value; - return ''; + return ``; }).join(''); } function renderViewOrder(context, user, result) { - var html = ''; + let html = ''; - var index = 0; + let index = 0; - html += result.Items.map(function (view) { + html += result.Items.map(view => { - var currentHtml = ''; + let currentHtml = ''; - currentHtml += '
'; + currentHtml += `
`; currentHtml += ''; @@ -155,8 +166,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa currentHtml += '
'; - currentHtml += ''; - currentHtml += ''; + currentHtml += ``; + currentHtml += ``; currentHtml += '
'; @@ -170,14 +181,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function updateHomeSectionValues(context, userSettings) { - for (var i = 1; i <= 7; i++) { + for (let i = 1; i <= 7; i++) { - var select = context.querySelector('#selectHomeSection' + i); - var defaultValue = homeSections.getDefaultSection(i - 1); + const select = context.querySelector(`#selectHomeSection${i}`); + const defaultValue = homeSections.getDefaultSection(i - 1); - var option = select.querySelector('option[value=' + defaultValue + ']') || select.querySelector('option[value=""]'); + const option = select.querySelector(`option[value=${defaultValue}]`) || select.querySelector('option[value=""]'); - var userValue = userSettings.get('homesection' + (i - 1)); + const userValue = userSettings.get(`homesection${i - 1}`); option.value = ''; @@ -193,42 +204,42 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function getPerLibrarySettingsHtml(item, user, userSettings, apiClient) { - var html = ''; + let html = ''; - var isChecked; + let isChecked; if (item.Type === 'Channel' || item.CollectionType === 'boxsets' || item.CollectionType === 'playlists') { - isChecked = (user.Configuration.MyMediaExcludes || []).indexOf(item.Id) === -1; + isChecked = !(user.Configuration.MyMediaExcludes || []).includes(item.Id); html += '
'; html += ''; html += '
'; } - var excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels']; - if (excludeFromLatest.indexOf(item.CollectionType || '') === -1) { + const excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels']; + if (!excludeFromLatest.includes(item.CollectionType || '')) { - isChecked = user.Configuration.LatestItemsExcludes.indexOf(item.Id) === -1; + isChecked = !user.Configuration.LatestItemsExcludes.includes(item.Id); html += ''; } if (html) { - html = '
' + html + '
'; + html = `
${html}
`; } if (item.CollectionType === 'movies' || item.CollectionType === 'tvshows' || item.CollectionType === 'music' || item.CollectionType === 'livetv') { - var idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id; + const idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id; html += '
'; - html += '`; - var userValue = userSettings.get('landing-' + idForLanding); + const userValue = userSettings.get(`landing-${idForLanding}`); html += getLandingScreenOptionsHtml(item.CollectionType, userValue); @@ -238,7 +249,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa if (html) { - var prefix = ''; + let prefix = ''; prefix += '
'; prefix += '

'; @@ -254,10 +265,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function renderPerLibrarySettings(context, user, userViews, userSettings, apiClient) { - var elem = context.querySelector('.perLibrarySettings'); - var html = ''; + const elem = context.querySelector('.perLibrarySettings'); + let html = ''; - for (var i = 0, length = userViews.length; i < length; i++) { + for (let i = 0, length = userViews.length; i < length; i++) { html += getPerLibrarySettingsHtml(userViews[i], user, userSettings, apiClient); } @@ -271,10 +282,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa updateHomeSectionValues(context, userSettings); - var promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id); - var promise2 = apiClient.getJSON(apiClient.getUrl('Users/' + user.Id + '/GroupingOptions')); + const promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id); + const promise2 = apiClient.getJSON(apiClient.getUrl(`Users/${user.Id}/GroupingOptions`)); - Promise.all([promise1, promise2]).then(function (responses) { + Promise.all([promise1, promise2]).then(responses => { renderViewOrder(context, user, responses[0]); @@ -286,38 +297,19 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa }); } - function getSibling(elem, type, className) { - - var sibling = elem[type]; - - while (sibling != null) { - if (sibling.classList.contains(className)) { - break; - } - } - - if (sibling != null) { - if (!sibling.classList.contains(className)) { - sibling = null; - } - } - - return sibling; - } - function onSectionOrderListClick(e) { - var target = dom.parentWithClass(e.target, 'btnViewItemMove'); + const target = dom.parentWithClass(e.target, 'btnViewItemMove'); if (target) { - var viewItem = dom.parentWithClass(target, 'viewItem'); + const viewItem = dom.parentWithClass(target, 'viewItem'); if (viewItem) { - var ul = dom.parentWithClass(viewItem, 'paperList'); + const ul = dom.parentWithClass(viewItem, 'paperList'); if (target.classList.contains('btnViewItemDown')) { - var next = viewItem.nextSibling; + const next = viewItem.nextSibling; if (next) { viewItem.parentNode.removeChild(viewItem); @@ -327,7 +319,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa } else { - var prev = viewItem.previousSibling; + const prev = viewItem.previousSibling; if (prev) { viewItem.parentNode.removeChild(viewItem); @@ -341,10 +333,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function getCheckboxItems(selector, context, isChecked) { - var inputs = context.querySelectorAll(selector); - var list = []; + const inputs = context.querySelectorAll(selector); + const list = []; - for (var i = 0, length = inputs.length; i < length; i++) { + for (let i = 0, length = inputs.length; i < length; i++) { if (inputs[i].checked === isChecked) { list.push(inputs[i]); @@ -359,25 +351,25 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa user.Configuration.HidePlayedInLatest = context.querySelector('.chkHidePlayedFromLatest').checked; - user.Configuration.LatestItemsExcludes = getCheckboxItems('.chkIncludeInLatest', context, false).map(function (i) { + user.Configuration.LatestItemsExcludes = getCheckboxItems('.chkIncludeInLatest', context, false).map(i => { return i.getAttribute('data-folderid'); }); - user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(function (i) { + user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(i => { return i.getAttribute('data-folderid'); }); - user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(function (i) { + user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(i => { return i.getAttribute('data-folderid'); }); - var viewItems = context.querySelectorAll('.viewItem'); - var orderedViews = []; - var i; - var length; + const viewItems = context.querySelectorAll('.viewItem'); + const orderedViews = []; + let i; + let length; for (i = 0, length = viewItems.length; i < length; i++) { orderedViews.push(viewItems[i].getAttribute('data-viewid')); } @@ -394,10 +386,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa userSettingsInstance.set('homesection5', context.querySelector('#selectHomeSection6').value); userSettingsInstance.set('homesection6', context.querySelector('#selectHomeSection7').value); - var selectLandings = context.querySelectorAll('.selectLanding'); + const selectLandings = context.querySelectorAll('.selectLanding'); for (i = 0, length = selectLandings.length; i < length; i++) { - var selectLanding = selectLandings[i]; - userSettingsInstance.set('landing-' + selectLanding.getAttribute('data-folderid'), selectLanding.value); + const selectLanding = selectLandings[i]; + userSettingsInstance.set(`landing-${selectLanding.getAttribute('data-folderid')}`, selectLanding.value); } return apiClient.updateUserConfiguration(user.Id, user.Configuration); @@ -407,20 +399,20 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa loading.show(); - apiClient.getUser(userId).then(function (user) { + apiClient.getUser(userId).then(user => { - saveUser(context, user, userSettings, apiClient).then(function () { + saveUser(context, user, userSettings, apiClient).then(() => { loading.hide(); if (enableSaveConfirmation) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('SettingsSaved')); }); } events.trigger(instance, 'saved'); - }, function () { + }, () => { loading.hide(); }); }); @@ -428,14 +420,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function onSubmit(e) { - var self = this; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userId = self.options.userId; - var userSettings = self.options.userSettings; + const self = this; + const apiClient = connectionManager.getApiClient(self.options.serverId); + const userId = self.options.userId; + const userSettings = self.options.userSettings; - userSettings.setUserInfo(userId, apiClient).then(function () { + userSettings.setUserInfo(userId, apiClient).then(() => { - var enableSaveConfirmation = self.options.enableSaveConfirmation; + const enableSaveConfirmation = self.options.enableSaveConfirmation; save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); }); @@ -448,13 +440,13 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function onChange(e) { - var chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia'); + const chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia'); if (!chkIncludeInMyMedia) { return; } - var section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection'); - var fldIncludeInLatest = section.querySelector('.fldIncludeInLatest'); + const section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection'); + const fldIncludeInLatest = section.querySelector('.fldIncludeInLatest'); if (fldIncludeInLatest) { if (chkIncludeInMyMedia.checked) { fldIncludeInLatest.classList.remove('hide'); @@ -466,13 +458,13 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function embed(options, self) { - require(['text!./homeScreenSettings.template.html'], function (template) { + return import('text!./homeScreenSettings.template.html').then(({default: template}) => { - for (var i = 1; i <= numConfigurableSections; i++) { - template = template.replace('{section' + i + 'label}', globalize.translate('LabelHomeScreenSectionValue', i)); + for (let i = 1; i <= numConfigurableSections; i++) { + template = template.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i)); } - options.element.innerHTML = globalize.translateDocument(template, 'core'); + options.element.innerHTML = globalize.translateHtml(template, 'core'); options.element.querySelector('.viewOrderList').addEventListener('click', onSectionOrderListClick); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); @@ -492,47 +484,48 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa }); } - function HomeScreenSettings(options) { + class HomeScreenSettings { + constructor(options) { + this.options = options; + embed(options, this); + } - this.options = options; + loadData(autoFocus) { - embed(options, this); + const self = this; + const context = self.options.element; + + loading.show(); + + const userId = self.options.userId; + const apiClient = connectionManager.getApiClient(self.options.serverId); + const userSettings = self.options.userSettings; + + apiClient.getUser(userId).then(user => { + + userSettings.setUserInfo(userId, apiClient).then(() => { + + self.dataLoaded = true; + + loadForm(context, user, userSettings, apiClient); + + if (autoFocus) { + focusManager.autoFocus(context); + } + }); + }); + } + + submit() { + onSubmit.call(this); + } + + destroy() { + + this.options = null; + } } - HomeScreenSettings.prototype.loadData = function (autoFocus) { +/* eslint-enable indent */ - var self = this; - var context = self.options.element; - - loading.show(); - - var userId = self.options.userId; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userSettings = self.options.userSettings; - - apiClient.getUser(userId).then(function (user) { - - userSettings.setUserInfo(userId, apiClient).then(function () { - - self.dataLoaded = true; - - loadForm(context, user, userSettings, apiClient); - - if (autoFocus) { - focusManager.autoFocus(context); - } - }); - }); - }; - - HomeScreenSettings.prototype.submit = function () { - onSubmit.call(this); - }; - - HomeScreenSettings.prototype.destroy = function () { - - this.options = null; - }; - - return HomeScreenSettings; -}); +export default HomeScreenSettings; diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js index 535f1cd687..010b6b1a78 100644 --- a/src/components/homesections/homesections.js +++ b/src/components/homesections/homesections.js @@ -1,7 +1,24 @@ -define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'layoutManager', 'imageLoader', 'globalize', 'itemShortcuts', 'itemHelper', 'appRouter', 'scripts/imagehelper', 'paper-icon-button-light', 'emby-itemscontainer', 'emby-scroller', 'emby-button', 'css!./homesections'], function (connectionManager, cardBuilder, appSettings, dom, appHost, layoutManager, imageLoader, globalize, itemShortcuts, itemHelper, appRouter, imageHelper) { - 'use strict'; +import connectionManager from 'connectionManager'; +import cardBuilder from 'cardBuilder'; +import appSettings from 'appSettings'; +import dom from 'dom'; +import appHost from 'apphost'; +import layoutManager from 'layoutManager'; +import imageLoader from 'imageLoader'; +import globalize from 'globalize'; +import itemShortcuts from 'itemShortcuts'; +import itemHelper from 'itemHelper'; +import appRouter from 'appRouter'; +import imageHelper from 'scripts/imagehelper'; +import 'paper-icon-button-light'; +import 'emby-itemscontainer'; +import 'emby-scroller'; +import 'emby-button'; +import 'css!./homesections'; - function getDefaultSection(index) { +/* eslint-disable indent */ + + export function getDefaultSection(index) { switch (index) { case 0: return 'smalllibrarytiles'; @@ -23,9 +40,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getAllSectionsToShow(userSettings, sectionCount) { - var sections = []; - for (var i = 0, length = sectionCount; i < length; i++) { - var section = userSettings.get('homesection' + i) || getDefaultSection(i); + const sections = []; + for (let i = 0, length = sectionCount; i < length; i++) { + let section = userSettings.get('homesection' + i) || getDefaultSection(i); if (section === 'folders') { section = getDefaultSection(0); } @@ -36,22 +53,22 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la return sections; } - function loadSections(elem, apiClient, user, userSettings) { + export function loadSections(elem, apiClient, user, userSettings) { return getUserViews(apiClient, user.Id).then(function (userViews) { - var html = ''; + let html = ''; if (userViews.length) { - var sectionCount = 7; - for (var i = 0; i < sectionCount; i++) { + const sectionCount = 7; + for (let i = 0; i < sectionCount; i++) { html += '
'; } elem.innerHTML = html; elem.classList.add('homeSectionsContainer'); - var promises = []; - var sections = getAllSectionsToShow(userSettings, sectionCount); - for (var i = 0; i < sections.length; i++) { + const promises = []; + const sections = getAllSectionsToShow(userSettings, sectionCount); + for (let i = 0; i < sections.length; i++) { promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i)); } @@ -62,7 +79,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la }); }); } else { - var noLibDescription; + let noLibDescription; if (user['Policy'] && user['Policy']['IsAdministrator']) { noLibDescription = globalize.translate('NoCreatedLibraries', '
', ''); } else { @@ -75,7 +92,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la html += '

'; elem.innerHTML = html; - var createNowLink = elem.querySelector('#button-createLibrary'); + const createNowLink = elem.querySelector('#button-createLibrary'); if (createNowLink) { createNowLink.addEventListener('click', function () { Dashboard.navigate('library.html'); @@ -85,9 +102,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la }); } - function destroySections(elem) { - var elems = elem.querySelectorAll('.itemsContainer'); - for (var i = 0; i < elems.length; i++) { + export function destroySections(elem) { + const elems = elem.querySelectorAll('.itemsContainer'); + for (let i = 0; i < elems.length; i++) { elems[i].fetchData = null; elems[i].parentContainer = null; elems[i].getItemsHtml = null; @@ -96,24 +113,22 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la elem.innerHTML = ''; } - function pause(elem) { - var elems = elem.querySelectorAll('.itemsContainer'); - for (var i = 0; i < elems.length; i++) { + export function pause(elem) { + const elems = elem.querySelectorAll('.itemsContainer'); + for (let i = 0; i < elems.length; i++) { elems[i].pause(); } } - function resume(elem, options) { - var elems = elem.querySelectorAll('.itemsContainer'); - var i; - var length; - var promises = []; + export function resume(elem, options) { + const elems = elem.querySelectorAll('.itemsContainer'); + const promises = []; - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { promises.push(elems[i].resume(options)); } - var promise = Promise.all(promises); + const promise = Promise.all(promises); if (!options || options.returnPromise !== false) { return promise; } @@ -121,10 +136,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la function loadSection(page, apiClient, user, userSettings, userViews, allSections, index) { - var section = allSections[index]; - var userId = user.Id; + const section = allSections[index]; + const userId = user.Id; - var elem = page.querySelector('.section' + index); + const elem = page.querySelector('.section' + index); if (section === 'latestmedia') { loadRecentlyAdded(elem, apiClient, user, userViews); @@ -168,11 +183,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getPortraitShape() { - return enableScrollX() ? 'autooverflow' : 'auto'; + return enableScrollX() ? 'overflowPortrait' : 'portrait'; } function getLibraryButtonsHtml(items) { - var html = ''; + let html = ''; html += '
'; html += '

' + globalize.translate('HeaderMyMedia') + '

'; @@ -180,9 +195,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la html += '
'; // library card background images - for (var i = 0, length = items.length; i < length; i++) { - var item = items[i]; - var icon = imageHelper.getLibraryIcon(item.CollectionType); + for (let i = 0, length = items.length; i < length; i++) { + const item = items[i]; + const icon = imageHelper.getLibraryIcon(item.CollectionType); html += '' + item.Name + ''; } @@ -194,7 +209,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la function loadlibraryButtons(elem, apiClient, user, userSettings, userViews) { elem.classList.remove('verticalSection'); - var html = getLibraryButtonsHtml(userViews); + const html = getLibraryButtonsHtml(userViews); elem.innerHTML = html; imageLoader.lazyChildren(elem); @@ -210,8 +225,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la function getFetchLatestItemsFn(serverId, parentId, collectionType) { return function () { - var apiClient = connectionManager.getApiClient(serverId); - var limit = 16; + const apiClient = connectionManager.getApiClient(serverId); + let limit = 16; if (enableScrollX()) { if (collectionType === 'music') { @@ -227,7 +242,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } } - var options = { + const options = { Limit: limit, Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,Path', ImageTypeLimit: 1, @@ -241,8 +256,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la function getLatestItemsHtmlFn(itemType, viewType) { return function (items) { - var cardLayout = false; - var shape; + const cardLayout = false; + let shape; if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') { shape = getPortraitShape(); } else if (viewType === 'music' || viewType === 'homevideos') { @@ -254,7 +269,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', @@ -272,7 +287,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function renderLatestSection(elem, apiClient, user, parent) { - var html = ''; + let html = ''; html += '
'; if (!layoutManager.tv) { @@ -303,7 +318,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la elem.innerHTML = html; - var itemsContainer = elem.querySelector('.itemsContainer'); + const itemsContainer = elem.querySelector('.itemsContainer'); itemsContainer.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType); itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType); itemsContainer.parentContainer = elem; @@ -311,10 +326,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la function loadRecentlyAdded(elem, apiClient, user, userViews) { elem.classList.remove('verticalSection'); - var excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels']; + const excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels']; - for (var i = 0, length = userViews.length; i < length; i++) { - var item = userViews[i]; + for (let i = 0, length = userViews.length; i < length; i++) { + const item = userViews[i]; if (user.Configuration.LatestItemsExcludes.indexOf(item.Id) !== -1) { continue; } @@ -323,7 +338,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la continue; } - var frag = document.createElement('div'); + const frag = document.createElement('div'); frag.classList.add('verticalSection'); frag.classList.add('hide'); elem.appendChild(frag); @@ -334,12 +349,14 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la function getRequirePromise(deps) { return new Promise(function (resolve, reject) { - require(deps, resolve); + import(deps).then(() => { + return resolve; + }); }); } - function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) { - var html = ''; + export function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) { + let html = ''; if (userViews.length) { html += '

' + globalize.translate('HeaderMyMedia') + '

'; if (enableScrollX()) { @@ -372,10 +389,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la function getContinueWatchingFetchFn(serverId) { return function () { - var apiClient = connectionManager.getApiClient(serverId); - var screenWidth = dom.getWindowSize().innerWidth; + const apiClient = connectionManager.getApiClient(serverId); + const screenWidth = dom.getWindowSize().innerWidth; - var limit; + let limit; if (enableScrollX()) { limit = 12; } else { @@ -383,7 +400,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la limit = Math.min(limit, 5); } - var options = { + const options = { Limit: limit, Recursive: true, Fields: 'PrimaryImageAspectRatio,BasicSyncInfo', @@ -398,7 +415,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getContinueWatchingItemsHtml(items) { - var cardLayout = false; + const cardLayout = false; return cardBuilder.getCardsHtml({ items: items, preferThumb: true, @@ -419,7 +436,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function loadResumeVideo(elem, apiClient, userId) { - var html = ''; + let html = ''; html += '

' + globalize.translate('HeaderContinueWatching') + '

'; if (enableScrollX()) { @@ -437,7 +454,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la elem.classList.add('hide'); elem.innerHTML = html; - var itemsContainer = elem.querySelector('.itemsContainer'); + const itemsContainer = elem.querySelector('.itemsContainer'); itemsContainer.fetchData = getContinueWatchingFetchFn(apiClient.serverId()); itemsContainer.getItemsHtml = getContinueWatchingItemsHtml; itemsContainer.parentContainer = elem; @@ -445,10 +462,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la function getContinueListeningFetchFn(serverId) { return function () { - var apiClient = connectionManager.getApiClient(serverId); - var screenWidth = dom.getWindowSize().innerWidth; + const apiClient = connectionManager.getApiClient(serverId); + const screenWidth = dom.getWindowSize().innerWidth; - var limit; + let limit; if (enableScrollX()) { limit = 12; } else { @@ -456,7 +473,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la limit = Math.min(limit, 5); } - var options = { + const options = { Limit: limit, Recursive: true, Fields: 'PrimaryImageAspectRatio,BasicSyncInfo', @@ -471,7 +488,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getContinueListeningItemsHtml(items) { - var cardLayout = false; + const cardLayout = false; return cardBuilder.getCardsHtml({ items: items, preferThumb: true, @@ -492,7 +509,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function loadResumeAudio(elem, apiClient, userId) { - var html = ''; + let html = ''; html += '

' + globalize.translate('HeaderContinueWatching') + '

'; if (enableScrollX()) { @@ -510,7 +527,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la elem.classList.add('hide'); elem.innerHTML = html; - var itemsContainer = elem.querySelector('.itemsContainer'); + const itemsContainer = elem.querySelector('.itemsContainer'); itemsContainer.fetchData = getContinueListeningFetchFn(apiClient.serverId()); itemsContainer.getItemsHtml = getContinueListeningItemsHtml; itemsContainer.parentContainer = elem; @@ -518,7 +535,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la function getOnNowFetchFn(serverId) { return function () { - var apiClient = connectionManager.getApiClient(serverId); + const apiClient = connectionManager.getApiClient(serverId); return apiClient.getLiveTvRecommendedPrograms({ userId: apiClient.getCurrentUserId(), IsAiring: true, @@ -532,7 +549,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getOnNowItemsHtml(items) { - var cardLayout = false; + const cardLayout = false; return cardBuilder.getCardsHtml({ items: items, preferThumb: 'auto', @@ -559,7 +576,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la return Promise.resolve(); } - var userId = user.Id; + const userId = user.Id; return apiClient.getLiveTvRecommendedPrograms({ userId: apiClient.getCurrentUserId(), IsAiring: true, @@ -569,7 +586,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la EnableTotalRecordCount: false, Fields: 'ChannelInfo,PrimaryImageAspectRatio' }).then(function (result) { - var html = ''; + let html = ''; if (result.Items.length) { elem.classList.remove('padded-left'); elem.classList.remove('padded-right'); @@ -654,7 +671,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la elem.innerHTML = html; - var itemsContainer = elem.querySelector('.itemsContainer'); + const itemsContainer = elem.querySelector('.itemsContainer'); itemsContainer.parentContainer = elem; itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId()); itemsContainer.getItemsHtml = getOnNowItemsHtml; @@ -664,7 +681,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la function getNextUpFetchFn(serverId) { return function () { - var apiClient = connectionManager.getApiClient(serverId); + const apiClient = connectionManager.getApiClient(serverId); return apiClient.getNextUpEpisodes({ Limit: enableScrollX() ? 24 : 15, Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo,Path', @@ -677,7 +694,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function getNextUpItemsHtml(items) { - var cardLayout = false; + const cardLayout = false; return cardBuilder.getCardsHtml({ items: items, preferThumb: true, @@ -695,7 +712,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function loadNextUp(elem, apiClient, userId) { - var html = ''; + let html = ''; html += '
'; if (!layoutManager.tv) { @@ -727,7 +744,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la elem.classList.add('hide'); elem.innerHTML = html; - var itemsContainer = elem.querySelector('.itemsContainer'); + const itemsContainer = elem.querySelector('.itemsContainer'); itemsContainer.fetchData = getNextUpFetchFn(apiClient.serverId()); itemsContainer.getItemsHtml = getNextUpItemsHtml; itemsContainer.parentContainer = elem; @@ -735,7 +752,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) { return function () { - var apiClient = connectionManager.getApiClient(serverId); + const apiClient = connectionManager.getApiClient(serverId); return apiClient.getLiveTvRecordings({ userId: apiClient.getCurrentUserId(), Limit: enableScrollX() ? 12 : 5, @@ -749,7 +766,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la function getLatestRecordingItemsHtml(activeRecordingsOnly) { return function (items) { - var cardLayout = false; + const cardLayout = false; return cardBuilder.getCardsHtml({ items: items, shape: enableScrollX() ? 'autooverflow' : 'auto', @@ -774,11 +791,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la } function loadLatestLiveTvRecordings(elem, activeRecordingsOnly, apiClient, userId) { - var title = activeRecordingsOnly ? + const title = activeRecordingsOnly ? globalize.translate('HeaderActiveRecordings') : globalize.translate('HeaderLatestRecordings'); - var html = ''; + let html = ''; html += '
'; html += '

' + title + '

'; @@ -799,18 +816,19 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la elem.classList.add('hide'); elem.innerHTML = html; - var itemsContainer = elem.querySelector('.itemsContainer'); + const itemsContainer = elem.querySelector('.itemsContainer'); itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly); itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly); itemsContainer.parentContainer = elem; } - return { - loadLibraryTiles: loadLibraryTiles, - getDefaultSection: getDefaultSection, - loadSections: loadSections, - destroySections: destroySections, - pause: pause, - resume: resume - }; -}); +export default { + loadLibraryTiles: loadLibraryTiles, + getDefaultSection: getDefaultSection, + loadSections: loadSections, + destroySections: destroySections, + pause: pause, + resume: resume +}; + +/* eslint-enable indent */ diff --git a/src/components/htmlMediaHelper.js b/src/components/htmlMediaHelper.js index 3f17eeb336..062c80efa6 100644 --- a/src/components/htmlMediaHelper.js +++ b/src/components/htmlMediaHelper.js @@ -1,17 +1,20 @@ -define(['appSettings', 'browser', 'events'], function (appSettings, browser, events) { - 'use strict'; +/* eslint-disable indent */ - function getSavedVolume() { +import appSettings from 'appSettings' ; +import browser from 'browser'; +import events from 'events'; + + export function getSavedVolume() { return appSettings.get('volume') || 1; } - function saveVolume(value) { + export function saveVolume(value) { if (value) { appSettings.set('volume', value); } } - function getCrossOriginValue(mediaSource) { + export function getCrossOriginValue(mediaSource) { if (mediaSource.IsRemote) { return null; } @@ -30,7 +33,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve return false; } - function enableHlsShakaPlayer(item, mediaSource, mediaType) { + export function enableHlsShakaPlayer(item, mediaSource, mediaType) { /* eslint-disable-next-line compat/compat */ if (!!window.MediaSource && !!MediaSource.isTypeSupported) { @@ -56,7 +59,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve return false; } - function enableHlsJsPlayer(runTimeTicks, mediaType) { + export function enableHlsJsPlayer(runTimeTicks, mediaType) { if (window.MediaSource == null) { return false; @@ -98,7 +101,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve var recoverDecodingErrorDate; var recoverSwapAudioCodecDate; - function handleHlsJsMediaError(instance, reject) { + export function handleHlsJsMediaError(instance, reject) { var hlsPlayer = instance._hlsPlayer; @@ -134,7 +137,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve } } - function onErrorInternal(instance, type) { + export function onErrorInternal(instance, type) { // Needed for video if (instance.destroyCustomTrack) { @@ -148,7 +151,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve ]); } - function isValidDuration(duration) { + export function isValidDuration(duration) { if (duration && !isNaN(duration) && duration !== Number.POSITIVE_INFINITY && duration !== Number.NEGATIVE_INFINITY) { return true; } @@ -162,7 +165,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve } } - function seekOnPlaybackStart(instance, element, ticks, onMediaReady) { + export function seekOnPlaybackStart(instance, element, ticks, onMediaReady) { var seconds = (ticks || 0) / 10000000; @@ -200,7 +203,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve } } - function applySrc(elem, src, options) { + export function applySrc(elem, src, options) { if (window.Windows && options.mediaSource && options.mediaSource.IsLocal) { @@ -228,7 +231,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve elem.addEventListener('error', onErrorFn); } - function playWithPromise(elem, onErrorFn) { + export function playWithPromise(elem, onErrorFn) { try { var promise = elem.play(); @@ -256,7 +259,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve } } - function destroyCastPlayer(instance) { + export function destroyCastPlayer(instance) { var player = instance._castPlayer; if (player) { @@ -270,7 +273,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve } } - function destroyShakaPlayer(instance) { + export function destroyShakaPlayer(instance) { var player = instance._shakaPlayer; if (player) { try { @@ -283,7 +286,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve } } - function destroyHlsPlayer(instance) { + export function destroyHlsPlayer(instance) { var player = instance._hlsPlayer; if (player) { try { @@ -296,7 +299,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve } } - function destroyFlvPlayer(instance) { + export function destroyFlvPlayer(instance) { var player = instance._flvPlayer; if (player) { try { @@ -311,7 +314,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve } } - function bindEventsToHlsPlayer(instance, hls, elem, onErrorFn, resolve, reject) { + export function bindEventsToHlsPlayer(instance, hls, elem, onErrorFn, resolve, reject) { hls.on(Hls.Events.MANIFEST_PARSED, function () { playWithPromise(elem, onErrorFn).then(resolve, function () { @@ -403,7 +406,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve }); } - function onEndedInternal(instance, elem, onErrorFn) { + export function onEndedInternal(instance, elem, onErrorFn) { elem.removeEventListener('error', onErrorFn); @@ -427,7 +430,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve instance._currentPlayOptions = null; } - function getBufferedRanges(instance, elem) { + export function getBufferedRanges(instance, elem) { var ranges = []; var seekable = elem.buffered || []; @@ -462,23 +465,4 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve return ranges; } - return { - getSavedVolume: getSavedVolume, - saveVolume: saveVolume, - enableHlsJsPlayer: enableHlsJsPlayer, - enableHlsShakaPlayer: enableHlsShakaPlayer, - handleHlsJsMediaError: handleHlsJsMediaError, - isValidDuration: isValidDuration, - onErrorInternal: onErrorInternal, - seekOnPlaybackStart: seekOnPlaybackStart, - applySrc: applySrc, - playWithPromise: playWithPromise, - destroyHlsPlayer: destroyHlsPlayer, - destroyFlvPlayer: destroyFlvPlayer, - destroyCastPlayer: destroyCastPlayer, - bindEventsToHlsPlayer: bindEventsToHlsPlayer, - onEndedInternal: onEndedInternal, - getCrossOriginValue: getCrossOriginValue, - getBufferedRanges: getBufferedRanges - }; -}); +/* eslint-enable indent */ diff --git a/src/components/imageDownloader/imageDownloader.js b/src/components/imageDownloader/imageDownloader.js index a3965279cf..fbe98c532f 100644 --- a/src/components/imageDownloader/imageDownloader.js +++ b/src/components/imageDownloader/imageDownloader.js @@ -339,7 +339,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image var dlg = dialogHelper.createDialog(dialogOptions); - dlg.innerHTML = globalize.translateDocument(template, 'core'); + dlg.innerHTML = globalize.translateHtml(template, 'core'); if (layoutManager.tv) { scrollHelper.centerFocus.on(dlg, false); diff --git a/src/components/imageOptionsEditor/imageOptionsEditor.js b/src/components/imageOptionsEditor/imageOptionsEditor.js index b857548ec3..6660ecf74c 100644 --- a/src/components/imageOptionsEditor/imageOptionsEditor.js +++ b/src/components/imageOptionsEditor/imageOptionsEditor.js @@ -99,7 +99,7 @@ import 'emby-input'; scrollY: false }); dlg.classList.add('formDialog'); - dlg.innerHTML = globalize.translateDocument(template); + dlg.innerHTML = globalize.translateHtml(template); dlg.addEventListener('close', function () { saveValues(dlg, options); }); @@ -112,7 +112,6 @@ import 'emby-input'; dlg.querySelector('.btnCancel').addEventListener('click', function () { dialogHelper.close(dlg); }); - } export class editor { diff --git a/src/components/imageUploader/imageUploader.js b/src/components/imageUploader/imageUploader.js index e078a9fa30..3cf7aa000d 100644 --- a/src/components/imageUploader/imageUploader.js +++ b/src/components/imageUploader/imageUploader.js @@ -1,10 +1,26 @@ -define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', 'layoutManager', 'globalize', 'require', 'emby-button', 'emby-select', 'formDialogStyle', 'css!./style'], function (dialogHelper, connectionManager, dom, loading, scrollHelper, layoutManager, globalize, require) { - 'use strict'; +/* eslint-disable indent */ - var currentItemId; - var currentServerId; - var currentFile; - var hasChanges = false; +/** + * Module for imageUploader. + * @module components/imageUploader/imageUploader + */ + +import dialogHelper from 'dialogHelper'; +import connectionManager from 'connectionManager'; +import dom from 'dom'; +import loading from 'loading'; +import scrollHelper from 'scrollHelper'; +import layoutManager from 'layoutManager'; +import globalize from 'globalize'; +import 'emby-button'; +import 'emby-select'; +import 'formDialogStyle'; +import 'css!./style'; + + let currentItemId; + let currentServerId; + let currentFile; + let hasChanges = false; function onFileReaderError(evt) { @@ -12,14 +28,14 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' switch (evt.target.error.code) { case evt.target.error.NOT_FOUND_ERR: - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('MessageFileReadError')); }); break; case evt.target.error.ABORT_ERR: break; // noop default: - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('MessageFileReadError')); }); break; @@ -28,7 +44,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' function setFiles(page, files) { - var file = files[0]; + const file = files[0]; if (!file || !file.type.match('image.*')) { page.querySelector('#imageOutput').innerHTML = ''; @@ -39,25 +55,26 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' currentFile = file; - var reader = new FileReader(); + const reader = new FileReader(); reader.onerror = onFileReaderError; - reader.onloadstart = function () { + reader.onloadstart = () => { page.querySelector('#fldUpload').classList.add('hide'); }; - reader.onabort = function () { + reader.onabort = () => { loading.hide(); console.debug('File read cancelled'); }; // Closure to capture the file information. - reader.onload = (function (theFile) { - return function (e) { + reader.onload = (theFile => { + return e => { // Render thumbnail. - var html = [''].join(''); + const html = [''].join(''); page.querySelector('#imageOutput').innerHTML = html; + page.querySelector('#dropImageText').classList.add('hide'); page.querySelector('#fldUpload').classList.remove('hide'); }; })(file); @@ -68,14 +85,14 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' function onSubmit(e) { - var file = currentFile; + const file = currentFile; if (!file) { return false; } if (!file.type.startsWith('image/')) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('MessageImageFileTypeAllowed')); }); e.preventDefault(); @@ -84,18 +101,18 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' loading.show(); - var dlg = dom.parentWithClass(this, 'dialog'); + const dlg = dom.parentWithClass(this, 'dialog'); - var imageType = dlg.querySelector('#selectImageType').value; + const imageType = dlg.querySelector('#selectImageType').value; if (imageType === 'None') { - require(['toast'], function(toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('MessageImageTypeNotSelected')); }); e.preventDefault(); return false; } - connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(function () { + connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => { dlg.querySelector('#uploadImage').value = ''; @@ -116,21 +133,21 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' setFiles(page, this.files); }); - page.querySelector('.btnBrowse').addEventListener('click', function () { + page.querySelector('.btnBrowse').addEventListener('click', () => { page.querySelector('#uploadImage').click(); }); } - function showEditor(options, resolve, reject) { + function showEditor(options, resolve) { options = options || {}; - require(['text!./imageUploader.template.html'], function (template) { + return import('text!./imageUploader.template.html').then(({default: template}) => { currentItemId = options.itemId; currentServerId = options.serverId; - var dialogOptions = { + const dialogOptions = { removeOnClose: true }; @@ -140,18 +157,18 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' dialogOptions.size = 'small'; } - var dlg = dialogHelper.createDialog(dialogOptions); + const dlg = dialogHelper.createDialog(dialogOptions); dlg.classList.add('formDialog'); - dlg.innerHTML = globalize.translateDocument(template, 'core'); + dlg.innerHTML = globalize.translateHtml(template, 'core'); if (layoutManager.tv) { scrollHelper.centerFocus.on(dlg, false); } // Has to be assigned a z-index after the call to .open() - dlg.addEventListener('close', function () { + dlg.addEventListener('close', () => { if (layoutManager.tv) { scrollHelper.centerFocus.off(dlg, false); @@ -167,22 +184,24 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' dlg.querySelector('#selectImageType').value = options.imageType || 'Primary'; - dlg.querySelector('.btnCancel').addEventListener('click', function () { + dlg.querySelector('.btnCancel').addEventListener('click', () => { dialogHelper.close(dlg); }); }); } - return { - show: function (options) { + export function show(options) { - return new Promise(function (resolve, reject) { + return new Promise(resolve => { - hasChanges = false; + hasChanges = false; - showEditor(options, resolve, reject); - }); - } - }; -}); + showEditor(options, resolve); + }); + } + +/* eslint-enable indent */ +export default { + show: show +}; diff --git a/src/components/imageUploader/imageUploader.template.html b/src/components/imageUploader/imageUploader.template.html index 9c6a139c04..6a9e21ff15 100644 --- a/src/components/imageUploader/imageUploader.template.html +++ b/src/components/imageUploader/imageUploader.template.html @@ -20,7 +20,7 @@
-
${LabelDropImageHere}
+
${LabelDropImageHere}
diff --git a/src/components/imageeditor/imageeditor.js b/src/components/imageeditor/imageeditor.js index 2927a0b120..0a873fa4c7 100644 --- a/src/components/imageeditor/imageeditor.js +++ b/src/components/imageeditor/imageeditor.js @@ -200,7 +200,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', require(['confirm'], function (confirm) { - confirm({ + confirm.default({ text: globalize.translate('ConfirmDeleteImage'), confirmText: globalize.translate('Delete'), @@ -464,7 +464,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', dlg.classList.add('formDialog'); - dlg.innerHTML = globalize.translateDocument(template, 'core'); + dlg.innerHTML = globalize.translateHtml(template, 'core'); if (layoutManager.tv) { scrollHelper.centerFocus.on(dlg, false); diff --git a/src/components/images/style.css b/src/components/images/style.css index a709f732c5..2b09da2da4 100644 --- a/src/components/images/style.css +++ b/src/components/images/style.css @@ -1,11 +1,11 @@ .lazy-image-fadein { opacity: 1; - transition: opacity 0.7s; + transition: opacity 0.5s; } .lazy-image-fadein-fast { opacity: 1; - transition: opacity 0.2s; + transition: opacity 0.1s; } .lazy-hidden { @@ -29,4 +29,5 @@ width: 100%; height: 100%; z-index: 100; + pointer-events: none; } diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js index f258f5fe4b..96a5cb71d7 100644 --- a/src/components/itemContextMenu.js +++ b/src/components/itemContextMenu.js @@ -1,14 +1,24 @@ -define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', 'playbackManager', 'loading', 'appSettings', 'browser', 'actionsheet'], function (appHost, globalize, connectionManager, itemHelper, appRouter, playbackManager, loading, appSettings, browser, actionsheet) { - 'use strict'; +import appHost from 'apphost'; +import globalize from 'globalize'; +import connectionManager from 'connectionManager'; +import itemHelper from 'itemHelper'; +import appRouter from 'appRouter'; +import playbackManager from 'playbackManager'; +import loading from 'loading'; +import appSettings from 'appSettings'; +import browser from 'browser'; +import actionsheet from 'actionsheet'; - function getCommands(options) { - var item = options.item; - var user = options.user; +/* eslint-disable indent */ - var canPlay = playbackManager.canPlay(item); - var restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator; + export function getCommands(options) { + const item = options.item; + const user = options.user; - var commands = []; + const canPlay = playbackManager.canPlay(item); + const restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator; + + let commands = []; if (canPlay && item.MediaType !== 'Photo') { if (options.play !== false) { @@ -161,10 +171,10 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', }); } - var canEdit = itemHelper.canEdit(user, item); + const canEdit = itemHelper.canEdit(user, item); if (canEdit) { if (options.edit !== false && item.Type !== 'SeriesTimer') { - var text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata'); + const text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata'); commands.push({ name: text, id: 'edit', @@ -311,31 +321,31 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } function executeCommand(item, id, options) { - var itemId = item.Id; - var serverId = item.ServerId; - var apiClient = connectionManager.getApiClient(serverId); + const itemId = item.Id; + const serverId = item.ServerId; + const apiClient = connectionManager.getApiClient(serverId); return new Promise(function (resolve, reject) { switch (id) { case 'addtocollection': - require(['collectionEditor'], function (collectionEditor) { - new collectionEditor().show({ + import('collectionEditor').then(({default: collectionEditor}) => { + new collectionEditor({ items: [itemId], serverId: serverId }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; case 'addtoplaylist': - require(['playlistEditor'], function (playlistEditor) { - new playlistEditor().show({ + import('playlistEditor').then(({default: playlistEditor}) => { + new playlistEditor({ items: [itemId], serverId: serverId }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; case 'download': - require(['fileDownloader'], function (fileDownloader) { - var downloadHref = apiClient.getItemDownloadUrl(itemId); + import('fileDownloader').then(({default: fileDownloader}) => { + const downloadHref = apiClient.getItemDownloadUrl(itemId); fileDownloader.download([{ url: downloadHref, itemId: itemId, @@ -346,17 +356,17 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', getResolveFunction(getResolveFunction(resolve, id), id)(); }); break; - case 'copy-stream': - var downloadHref = apiClient.getItemDownloadUrl(itemId); - var textAreaCopy = function () { - var textArea = document.createElement('textarea'); + case 'copy-stream': { + const downloadHref = apiClient.getItemDownloadUrl(itemId); + const textAreaCopy = function () { + let textArea = document.createElement('textarea'); textArea.value = downloadHref; document.body.appendChild(textArea); textArea.focus(); textArea.select(); if (document.execCommand('copy')) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('CopyStreamURLSuccess')); }); } else { @@ -371,7 +381,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } else { /* eslint-disable-next-line compat/compat */ navigator.clipboard.writeText(downloadHref).then(function () { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('CopyStreamURLSuccess')); }); }).catch(function () { @@ -380,8 +390,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } getResolveFunction(resolve, id)(); break; + } case 'editsubtitles': - require(['subtitleEditor'], function (subtitleEditor) { + import('subtitleEditor').then(({default: subtitleEditor}) => { subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; @@ -389,7 +400,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); break; case 'editimages': - require(['imageEditor'], function (imageEditor) { + import('imageEditor').then(({default: imageEditor}) => { imageEditor.show({ itemId: itemId, serverId: serverId @@ -397,13 +408,13 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', }); break; case 'identify': - require(['itemIdentifier'], function (itemIdentifier) { + import('itemIdentifier').then(({default: itemIdentifier}) => { itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; case 'moremediainfo': - require(['itemMediaInfo'], function (itemMediaInfo) { - itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); + import('itemMediaInfo').then(({default: itemMediaInfo}) => { + itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id)); }); break; case 'refresh': @@ -431,7 +442,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', getResolveFunction(resolve, id)(); break; case 'record': - require(['recordingCreator'], function (recordingCreator) { + import('recordingCreator').then(({default: recordingCreator}) => { recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; @@ -502,8 +513,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } function deleteTimer(apiClient, item, resolve, command) { - require(['recordingHelper'], function (recordingHelper) { - var timerId = item.TimerId || item.Id; + import('recordingHelper').then(({default: recordingHelper}) => { + const timerId = item.TimerId || item.Id; recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () { getResolveFunction(resolve, command, true)(); }); @@ -511,7 +522,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } function deleteSeriesTimer(apiClient, item, resolve, command) { - require(['recordingHelper'], function (recordingHelper) { + import('recordingHelper').then(({default: recordingHelper}) => { recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () { getResolveFunction(resolve, command, true)(); }); @@ -519,9 +530,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } function play(item, resume, queue, queueNext) { - var method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play'; + const method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play'; - var startPosition = 0; + let startPosition = 0; if (resume && item.UserData && item.UserData.PlaybackPositionTicks) { startPosition = item.UserData.PlaybackPositionTicks; } @@ -542,18 +553,18 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', function editItem(apiClient, item) { return new Promise(function (resolve, reject) { - var serverId = apiClient.serverInfo().Id; + const serverId = apiClient.serverInfo().Id; if (item.Type === 'Timer') { - require(['recordingEditor'], function (recordingEditor) { + import('recordingEditor').then(({default: recordingEditor}) => { recordingEditor.show(item.Id, serverId).then(resolve, reject); }); } else if (item.Type === 'SeriesTimer') { - require(['seriesRecordingEditor'], function (recordingEditor) { + import('seriesRecordingEditor').then(({default: recordingEditor}) => { recordingEditor.show(item.Id, serverId).then(resolve, reject); }); } else { - require(['metadataEditor'], function (metadataEditor) { + import('metadataEditor').then(({default: metadataEditor}) => { metadataEditor.show(item.Id, serverId).then(resolve, reject); }); } @@ -562,7 +573,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', function deleteItem(apiClient, item) { return new Promise(function (resolve, reject) { - require(['deleteHelper'], function (deleteHelper) { + import('deleteHelper').then(({default: deleteHelper}) => { deleteHelper.deleteItem({ item: item, navigate: false @@ -574,7 +585,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } function refresh(apiClient, item) { - require(['refreshDialog'], function (refreshDialog) { + import('refreshDialog').then(({default: refreshDialog}) => { new refreshDialog({ itemIds: [item.Id], serverId: apiClient.serverInfo().Id, @@ -583,8 +594,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', }); } - function show(options) { - var commands = getCommands(options); + export function show(options) { + const commands = getCommands(options); if (!commands.length) { return Promise.reject(); } @@ -598,8 +609,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', }); } - return { - getCommands: getCommands, - show: show - }; -}); +/* eslint-enable indent */ + +export default { + getCommands: getCommands, + show: show +}; diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js index 81c84b6a23..c3fd9e0d0a 100644 --- a/src/components/itemMediaInfo/itemMediaInfo.js +++ b/src/components/itemMediaInfo/itemMediaInfo.js @@ -1,44 +1,61 @@ -define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', 'connectionManager', 'loading', 'focusManager', 'dom', 'apphost', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'emby-button', 'flexStyles'], function (dialogHelper, require, layoutManager, globalize, userSettings, connectionManager, loading, focusManager, dom, appHost) { - 'use strict'; +/* eslint-disable indent */ + +/** + * Module for display media info. + * @module components/itemMediaInfo/itemMediaInfo + */ + +import dialogHelper from 'dialogHelper'; +import layoutManager from 'layoutManager'; +import globalize from 'globalize'; +import connectionManager from 'connectionManager'; +import loading from 'loading'; +import 'emby-select'; +import 'listViewStyle'; +import 'paper-icon-button-light'; +import 'css!./../formdialog'; +import 'material-icons'; +import 'emby-button'; +import 'flexStyles'; function setMediaInfo(user, page, item) { - var html = item.MediaSources.map(function (version) { + let html = item.MediaSources.map(version => { return getMediaSourceHtml(user, item, version); }).join('
'); if (item.MediaSources.length > 1) { - html = '
' + html; + html = `
${html}`; } - var mediaInfoContent = page.querySelector('#mediaInfoContent'); + const mediaInfoContent = page.querySelector('#mediaInfoContent'); mediaInfoContent.innerHTML = html; } function getMediaSourceHtml(user, item, version) { - var html = ''; + let html = ''; if (version.Name) { - html += '

' + version.Name + '

'; + html += `

${version.Name}

`; } if (version.Container) { - html += createAttribute(globalize.translate('MediaInfoContainer'), version.Container) + '
'; + html += `${createAttribute(globalize.translate('MediaInfoContainer'), version.Container)}
`; } if (version.Formats && version.Formats.length) { - html += createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(',')) + '
'; + html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}
`; } if (version.Path && user && user.Policy.IsAdministrator) { - html += createAttribute(globalize.translate('MediaInfoPath'), version.Path) + '
'; + html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path)}
`; } if (version.Size) { - var size = (version.Size / (1024 * 1024)).toFixed(0) + ' MB'; - html += createAttribute(globalize.translate('MediaInfoSize'), size) + '
'; + const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`; + html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}
`; } - for (var i = 0, length = version.MediaStreams.length; i < length; i++) { - var stream = version.MediaStreams[i]; + for (let i = 0, length = version.MediaStreams.length; i < length; i++) { + const stream = version.MediaStreams[i]; if (stream.Type === 'Data') { continue; } html += '
'; - var displayType = globalize.translate('MediaInfoStreamType' + stream.Type); - html += '

' + displayType + '

'; - var attributes = []; + const displayType = globalize.translate(`MediaInfoStreamType${stream.Type}`); + html += `

${displayType}

`; + const attributes = []; if (stream.DisplayTitle) { attributes.push(createAttribute('Title', stream.DisplayTitle)); } @@ -61,7 +78,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', attributes.push(createAttribute(globalize.translate('MediaInfoLevel'), stream.Level)); } if (stream.Width || stream.Height) { - attributes.push(createAttribute(globalize.translate('MediaInfoResolution'), stream.Width + 'x' + stream.Height)); + attributes.push(createAttribute(globalize.translate('MediaInfoResolution'), `${stream.Width}x${stream.Height}`)); } if (stream.AspectRatio && stream.Codec !== 'mjpeg') { attributes.push(createAttribute(globalize.translate('MediaInfoAspectRatio'), stream.AspectRatio)); @@ -79,16 +96,16 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', attributes.push(createAttribute(globalize.translate('MediaInfoLayout'), stream.ChannelLayout)); } if (stream.Channels) { - attributes.push(createAttribute(globalize.translate('MediaInfoChannels'), stream.Channels + ' ch')); + attributes.push(createAttribute(globalize.translate('MediaInfoChannels'), `${stream.Channels} ch`)); } if (stream.BitRate && stream.Codec !== 'mjpeg') { - attributes.push(createAttribute(globalize.translate('MediaInfoBitrate'), (parseInt(stream.BitRate / 1000)) + ' kbps')); + attributes.push(createAttribute(globalize.translate('MediaInfoBitrate'), `${parseInt(stream.BitRate / 1000)} kbps`)); } if (stream.SampleRate) { - attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), stream.SampleRate + ' Hz')); + attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), `${stream.SampleRate} Hz`)); } if (stream.BitDepth) { - attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), stream.BitDepth + ' bit')); + attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), `${stream.BitDepth} bit`)); } if (stream.PixelFormat) { attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat)); @@ -116,13 +133,13 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', } function createAttribute(label, value) { - return '' + label + '' + value + ''; + return `${label}${value}`; } - function showMediaInfoMore(itemId, serverId, template) { - var apiClient = connectionManager.getApiClient(serverId); - return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { - var dialogOptions = { + function loadMediaInfo(itemId, serverId, template) { + const apiClient = connectionManager.getApiClient(serverId); + return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => { + const dialogOptions = { size: 'small', removeOnClose: true, scrollY: false @@ -130,35 +147,35 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', if (layoutManager.tv) { dialogOptions.size = 'fullscreen'; } - var dlg = dialogHelper.createDialog(dialogOptions); + const dlg = dialogHelper.createDialog(dialogOptions); dlg.classList.add('formDialog'); - var html = ''; - html += globalize.translateDocument(template, 'core'); + let html = ''; + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; if (layoutManager.tv) { dlg.querySelector('.formDialogContent'); } dialogHelper.open(dlg); - dlg.querySelector('.btnCancel').addEventListener('click', function (e) { + dlg.querySelector('.btnCancel').addEventListener('click', () => { dialogHelper.close(dlg); }); - apiClient.getCurrentUser().then(function (user) { + apiClient.getCurrentUser().then(user => { setMediaInfo(user, dlg, item); }); loading.hide(); }); } - function showMediaInfo(itemId, serverId) { + export function show(itemId, serverId) { loading.show(); - return new Promise(function (resolve, reject) { - require(['text!./itemMediaInfo.template.html'], function (template) { - showMediaInfoMore(itemId, serverId, template).then(resolve, reject); + return import('text!./itemMediaInfo.template.html').then(({default: template}) => { + return new Promise((resolve, reject) => { + loadMediaInfo(itemId, serverId, template).then(resolve, reject); }); }); } - return { - show: showMediaInfo - }; -}); +/* eslint-enable indent */ +export default { + show: show +}; diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js index b335d1dfd3..11e164dede 100644 --- a/src/components/itemidentifier/itemidentifier.js +++ b/src/components/itemidentifier/itemidentifier.js @@ -1,15 +1,34 @@ -define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', 'scrollHelper', 'layoutManager', 'focusManager', 'browser', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'cardStyle'], function (dialogHelper, loading, connectionManager, require, globalize, scrollHelper, layoutManager, focusManager, browser) { - 'use strict'; +/* eslint-disable indent */ - var enableFocusTransform = !browser.slow && !browser.edge; +/** + * Module for itemidentifier media item. + * @module components/itemidentifier/itemidentifier + */ - var currentItem; - var currentItemType; - var currentServerId; - var currentResolve; - var currentReject; - var hasChanges = false; - var currentSearchResult; +import dialogHelper from 'dialogHelper'; +import loading from 'loading'; +import connectionManager from 'connectionManager'; +import globalize from 'globalize'; +import scrollHelper from 'scrollHelper'; +import layoutManager from 'layoutManager'; +import focusManager from 'focusManager'; +import browser from 'browser'; +import 'emby-input'; +import 'emby-checkbox'; +import 'paper-icon-button-light'; +import 'css!./../formdialog'; +import 'material-icons'; +import 'cardStyle'; + + const enableFocusTransform = !browser.slow && !browser.edge; + + let currentItem; + let currentItemType; + let currentServerId; + let currentResolve; + let currentReject; + let hasChanges = false; + let currentSearchResult; function getApiClient() { return connectionManager.getApiClient(currentServerId); @@ -17,14 +36,14 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', function searchForIdentificationResults(page) { - var lookupInfo = { + let lookupInfo = { ProviderIds: {} }; - var i; - var length; - var identifyField = page.querySelectorAll('.identifyField'); - var value; + let i; + let length; + const identifyField = page.querySelectorAll('.identifyField'); + let value; for (i = 0, length = identifyField.length; i < length; i++) { value = identifyField[i].value; @@ -39,9 +58,9 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', } } - var hasId = false; + let hasId = false; - var txtLookupId = page.querySelectorAll('.txtLookupId'); + const txtLookupId = page.querySelectorAll('.txtLookupId'); for (i = 0, length = txtLookupId.length; i < length; i++) { value = txtLookupId[i].value; @@ -53,7 +72,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', } if (!hasId && !lookupInfo.Name) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('PleaseEnterNameOrId')); }); return; @@ -71,16 +90,16 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', loading.show(); - var apiClient = getApiClient(); + const apiClient = getApiClient(); apiClient.ajax({ type: 'POST', - url: apiClient.getUrl('Items/RemoteSearch/' + currentItemType), + url: apiClient.getUrl(`Items/RemoteSearch/${currentItemType}`), data: JSON.stringify(lookupInfo), contentType: 'application/json', dataType: 'json' - }).then(function (results) { + }).then(results => { loading.hide(); showIdentificationSearchResults(page, results); @@ -89,29 +108,29 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', function showIdentificationSearchResults(page, results) { - var identificationSearchResults = page.querySelector('.identificationSearchResults'); + const identificationSearchResults = page.querySelector('.identificationSearchResults'); page.querySelector('.popupIdentifyForm').classList.add('hide'); identificationSearchResults.classList.remove('hide'); page.querySelector('.identifyOptionsForm').classList.add('hide'); page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered'); - var html = ''; - var i; - var length; + let html = ''; + let i; + let length; for (i = 0, length = results.length; i < length; i++) { - var result = results[i]; + const result = results[i]; html += getSearchResultHtml(result, i); } - var elem = page.querySelector('.identificationSearchResultList'); + const elem = page.querySelector('.identificationSearchResultList'); elem.innerHTML = html; function onSearchImageClick() { - var index = parseInt(this.getAttribute('data-index')); + const index = parseInt(this.getAttribute('data-index')); - var currentResult = results[index]; + const currentResult = results[index]; if (currentItem != null) { @@ -122,7 +141,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', } } - var searchImages = elem.querySelectorAll('.card'); + const searchImages = elem.querySelectorAll('.card'); for (i = 0, length = searchImages.length; i < length; i++) { searchImages[i].addEventListener('click', onSearchImageClick); @@ -143,7 +162,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', function showIdentifyOptions(page, identifyResult) { - var identifyOptionsForm = page.querySelector('.identifyOptionsForm'); + const identifyOptionsForm = page.querySelector('.identifyOptionsForm'); page.querySelector('.popupIdentifyForm').classList.add('hide'); page.querySelector('.identificationSearchResults').classList.add('hide'); @@ -153,19 +172,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', currentSearchResult = identifyResult; - var lines = []; + const lines = []; lines.push(identifyResult.Name); if (identifyResult.ProductionYear) { lines.push(identifyResult.ProductionYear); } - var resultHtml = lines.join('
'); + let resultHtml = lines.join('
'); if (identifyResult.ImageUrl) { - var displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName); + const displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName); - resultHtml = '
' + resultHtml + '
'; + resultHtml = `
${resultHtml}
`; } page.querySelector('.selectedSearchResult').innerHTML = resultHtml; @@ -177,10 +196,10 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', // TODO move card creation code to Card component - var html = ''; - var cssClass = 'card scalableCard'; - var cardBoxCssClass = 'cardBox'; - var padderClass; + let html = ''; + let cssClass = 'card scalableCard'; + let cardBoxCssClass = 'cardBox'; + let padderClass; if (currentItemType === 'Episode') { cssClass += ' backdropCard backdropCard-scalable'; @@ -203,30 +222,30 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', cardBoxCssClass += ' cardBox-bottompadded'; - html += ''; + html += ``; } return html; @@ -171,34 +186,34 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan return item.Id; } - function getListViewHtml(options) { + export function getListViewHtml(options) { - var items = options.items; + const items = options.items; - var groupTitle = ''; - var action = options.action || 'link'; + let groupTitle = ''; + const action = options.action || 'link'; - var isLargeStyle = options.imageSize === 'large'; - var enableOverview = options.enableOverview; + const isLargeStyle = options.imageSize === 'large'; + const enableOverview = options.enableOverview; - var clickEntireItem = layoutManager.tv ? true : false; - var outerTagName = clickEntireItem ? 'button' : 'div'; - var enableSideMediaInfo = options.enableSideMediaInfo != null ? options.enableSideMediaInfo : true; + const clickEntireItem = layoutManager.tv ? true : false; + const outerTagName = clickEntireItem ? 'button' : 'div'; + const enableSideMediaInfo = options.enableSideMediaInfo != null ? options.enableSideMediaInfo : true; - var outerHtml = ''; + let outerHtml = ''; - var enableContentWrapper = options.enableOverview && !layoutManager.tv; - var containerAlbumArtistIds = (options.containerAlbumArtists || []).map(getId); + const enableContentWrapper = options.enableOverview && !layoutManager.tv; + const containerAlbumArtistIds = (options.containerAlbumArtists || []).map(getId); - for (var i = 0, length = items.length; i < length; i++) { + for (let i = 0, length = items.length; i < length; i++) { - var item = items[i]; + const item = items[i]; - var html = ''; + let html = ''; if (options.showIndex) { - var itemGroupTitle = getIndex(item, options); + const itemGroupTitle = getIndex(item, options); if (itemGroupTitle !== groupTitle) { @@ -220,7 +235,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan } } - var cssClass = 'listItem'; + let cssClass = 'listItem'; if (options.border || (options.highlight !== false && !layoutManager.tv)) { cssClass += ' listItem-border'; @@ -234,28 +249,28 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan cssClass += ' listItem-focusscale'; } - var downloadWidth = 80; + let downloadWidth = 80; if (isLargeStyle) { cssClass += ' listItem-largeImage'; downloadWidth = 500; } - var playlistItemId = item.PlaylistItemId ? (' data-playlistitemid="' + item.PlaylistItemId + '"') : ''; + const playlistItemId = item.PlaylistItemId ? (` data-playlistitemid="${item.PlaylistItemId}"`) : ''; - var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : ''; - var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : ''; - var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : ''; - var mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : ''; - var collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : ''; - var channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : ''; + const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (` data-positionticks="${item.UserData.PlaybackPositionTicks}"`) : ''; + const collectionIdData = options.collectionId ? (` data-collectionid="${options.collectionId}"`) : ''; + const playlistIdData = options.playlistId ? (` data-playlistid="${options.playlistId}"`) : ''; + const mediaTypeData = item.MediaType ? (` data-mediatype="${item.MediaType}"`) : ''; + const collectionTypeData = item.CollectionType ? (` data-collectiontype="${item.CollectionType}"`) : ''; + const channelIdData = item.ChannelId ? (` data-channelid="${item.ChannelId}"`) : ''; if (enableContentWrapper) { cssClass += ' listItem-withContentWrapper'; } - html += '<' + outerTagName + ' class="' + cssClass + '"' + playlistItemId + ' data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + '>'; + html += `<${outerTagName} class="${cssClass}"${playlistItemId} data-action="${action}" data-isfolder="${item.IsFolder}" data-id="${item.Id}" data-serverid="${item.ServerId}" data-type="${item.Type}"${mediaTypeData}${collectionTypeData}${channelIdData}${positionTicksData}${collectionIdData}${playlistIdData}>`; if (enableContentWrapper) { @@ -278,37 +293,37 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan imageClass += ' listItemImage-large-tv'; } - var playOnImageClick = options.imagePlayButton && !layoutManager.tv; + const playOnImageClick = options.imagePlayButton && !layoutManager.tv; if (!clickEntireItem) { imageClass += ' itemAction'; } - var imageAction = playOnImageClick ? 'resume' : action; + const imageAction = playOnImageClick ? 'resume' : action; let blurhashAttrib = ''; if (blurhash && blurhash.length > 0) { - blurhashAttrib = 'data-blurhash="' + blurhash + '"'; + blurhashAttrib = `data-blurhash="${blurhash}"`; } if (imgUrl) { - html += '
'; + html += `
`; } else { - html += '
'; + html += `
`; } - var indicatorsHtml = ''; + let indicatorsHtml = ''; indicatorsHtml += indicators.getPlayedIndicatorHtml(item); if (indicatorsHtml) { - html += '
' + indicatorsHtml + '
'; + html += `
${indicatorsHtml}
`; } if (playOnImageClick) { html += ''; } - var progressHtml = indicators.getProgressBarHtml(item, { + const progressHtml = indicators.getProgressBarHtml(item, { containerClass: 'listItemProgressBar' }); @@ -325,7 +340,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan html += '
'; } - var textlines = []; + const textlines = []; if (options.showProgramDateTime) { textlines.push(datetime.toLocaleString(datetime.parseISO8601Date(item.StartDate), { @@ -348,7 +363,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan } } - var parentTitle = null; + let parentTitle = null; if (options.showParentTitle) { if (item.Type === 'Episode') { @@ -358,12 +373,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan } } - var displayName = itemHelper.getDisplayName(item, { + let displayName = itemHelper.getDisplayName(item, { includeParentInfo: options.includeParentInfoInTitle }); if (options.showIndexNumber && item.IndexNumber != null) { - displayName = item.IndexNumber + '. ' + displayName; + displayName = `${item.IndexNumber}. ${displayName}`; } if (options.showParentTitle && options.parentTitleWithTitle) { @@ -394,14 +409,14 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan } } else { - var showArtist = options.artist === true; - var artistItems = item.ArtistItems; + let showArtist = options.artist === true; + const artistItems = item.ArtistItems; if (!showArtist && options.artist !== false) { if (!artistItems || !artistItems.length) { showArtist = true; - } else if (artistItems.length > 1 || containerAlbumArtistIds.indexOf(artistItems[0].Id) === -1) { + } else if (artistItems.length > 1 || !containerAlbumArtistIds.includes(artistItems[0].Id)) { showArtist = true; } } @@ -409,7 +424,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan if (showArtist) { if (artistItems && item.Type !== 'MusicAlbum') { - textlines.push(artistItems.map(function (a) { + textlines.push(artistItems.map(a => { return a.Name; }).join(', ')); } @@ -432,7 +447,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan cssClass += ' listItemBody-noleftpadding'; } - html += '
'; + html += `
`; const moreIcon = 'more_vert'; @@ -441,14 +456,16 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan if (options.mediaInfo !== false) { if (!enableSideMediaInfo) { - var mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText'; + const mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText'; - html += '
' + mediaInfo.getPrimaryMediaInfoHtml(item, { + html += `
`; + html += mediaInfo.getPrimaryMediaInfoHtml(item, { episodeTitle: false, originalAirDate: false, subtitles: false - }) + '
'; + }); + html += '
'; } } @@ -462,7 +479,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan if (options.mediaInfo !== false) { if (enableSideMediaInfo) { - html += '
' + mediaInfo.getPrimaryMediaInfoHtml(item, { + html += '
'; + html += mediaInfo.getPrimaryMediaInfoHtml(item, { year: false, container: false, @@ -470,7 +488,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan criticRating: false, endsAt: false - }) + '
'; + }); + html += '
'; } } @@ -487,7 +506,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan } if (options.moreButton !== false) { - html += ''; + html += ``; } if (options.infoButton) { @@ -500,15 +519,15 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan if (options.enableUserDataButtons !== false) { - var userData = item.UserData || {}; - var likes = userData.Likes == null ? '' : userData.Likes; + const userData = item.UserData || {}; + const likes = userData.Likes == null ? '' : userData.Likes; if (itemHelper.canMarkPlayed(item)) { - html += ''; + html += ``; } if (itemHelper.canRate(item)) { - html += ''; + html += ``; } } } @@ -524,7 +543,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan } } - html += ''; + html += ``; outerHtml += html; } @@ -532,7 +551,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan return outerHtml; } - return { - getListViewHtml: getListViewHtml - }; -}); +/* eslint-enable indent */ +export default { + getListViewHtml: getListViewHtml +}; diff --git a/src/components/loadingDialog/loadingDialog.js b/src/components/loadingDialog/loadingDialog.js deleted file mode 100644 index bd6a80fd5b..0000000000 --- a/src/components/loadingDialog/loadingDialog.js +++ /dev/null @@ -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; -}); diff --git a/src/components/maintabsmanager.js b/src/components/maintabsmanager.js index e1c5434363..0d31c2958a 100644 --- a/src/components/maintabsmanager.js +++ b/src/components/maintabsmanager.js @@ -1,11 +1,16 @@ -define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, browser, events) { - 'use strict'; +import dom from 'dom'; +import browser from 'browser'; +import events from 'events'; +import 'emby-tabs'; +import 'emby-button'; - var tabOwnerView; - var queryScope = document.querySelector('.skinHeader'); - var footerTabsContainer; - var headerTabsContainer; - var tabsElem; +/* eslint-disable indent */ + + let tabOwnerView; + const queryScope = document.querySelector('.skinHeader'); + let footerTabsContainer; + let headerTabsContainer; + let tabsElem; function enableTabsInFooter() { return false; @@ -44,7 +49,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, return false; } - var classList = elem.classList; + const classList = elem.classList; if (classList) { return !classList.contains('scrollX') && !classList.contains('animatedScrollX'); } @@ -52,7 +57,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, return true; } - var parent = target; + let parent = target; while (parent != null) { if (!allowSwipeOn(parent)) { return false; @@ -70,22 +75,22 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, } // implement without hammer - var pageCount = getTabContainersFn().length; - var onSwipeLeft = function (e, target) { + const pageCount = getTabContainersFn().length; + const onSwipeLeft = function (e, target) { if (allowSwipe(target) && view.contains(target)) { tabsElem.selectNext(); } }; - var onSwipeRight = function (e, target) { + const onSwipeRight = function (e, target) { if (allowSwipe(target) && view.contains(target)) { tabsElem.selectPrevious(); } }; - require(['touchHelper'], function (TouchHelper) { + import('touchHelper').then(({default: TouchHelper}) => { - var touchHelper = new TouchHelper(view.parentNode.parentNode); + const touchHelper = new TouchHelper(view.parentNode.parentNode); events.on(touchHelper, 'swipeleft', onSwipeLeft); events.on(touchHelper, 'swiperight', onSwipeRight); @@ -96,9 +101,9 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, }); } - function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) { + export function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) { - var enableInFooter = enableTabsInFooter(); + const enableInFooter = enableTabsInFooter(); if (!view) { if (tabOwnerView) { @@ -129,7 +134,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, ensureElements(enableInFooter); - var tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer; + const tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer; if (!tabOwnerView) { tabsContainerElem.classList.remove('hide'); @@ -137,18 +142,18 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, if (tabOwnerView !== view) { - var index = 0; + let index = 0; - var indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"'); - var tabsHtml = '
' + getTabsFn().map(function (t) { + const indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"'); + const tabsHtml = '
' + getTabsFn().map(function (t) { - var tabClass = 'emby-tab-button'; + let tabClass = 'emby-tab-button'; if (t.enabled === false) { tabClass += ' hide'; } - var tabHtml; + let tabHtml; if (t.cssClass) { tabClass += ' ' + t.cssClass; @@ -177,16 +182,16 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, tabsElem.addEventListener('beforetabchange', function (e) { - var tabContainers = getTabContainersFn(); + const tabContainers = getTabContainersFn(); if (e.detail.previousIndex != null) { - var previousPanel = tabContainers[e.detail.previousIndex]; + const previousPanel = tabContainers[e.detail.previousIndex]; if (previousPanel) { previousPanel.classList.remove('is-active'); } } - var newPanel = tabContainers[e.detail.selectedTabIndex]; + const newPanel = tabContainers[e.detail.selectedTabIndex]; //if (e.detail.previousIndex != null && e.detail.previousIndex != e.detail.selectedTabIndex) { // if (newPanel.animate && (animateTabs || []).indexOf(e.detail.selectedTabIndex) != -1) { @@ -241,9 +246,9 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, }; } - function selectedTabIndex(index) { + export function selectedTabIndex(index) { - var tabsContainerElem = headerTabsContainer; + const tabsContainerElem = headerTabsContainer; if (!tabsElem) { tabsElem = tabsContainerElem.querySelector('[is="emby-tabs"]'); @@ -256,13 +261,8 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, } } - function getTabsElement() { + export function getTabsElement() { return document.querySelector('.tabs-viewmenubar'); } - return { - setTabs: setTabs, - getTabsElement: getTabsElement, - selectedTabIndex: selectedTabIndex - }; -}); +/* eslint-enable indent */ diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.js b/src/components/mediaLibraryCreator/mediaLibraryCreator.js index bbef6e1f07..4e0d7b026c 100644 --- a/src/components/mediaLibraryCreator/mediaLibraryCreator.js +++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.js @@ -1,5 +1,24 @@ -define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionseditor/libraryoptionseditor', 'globalize', 'emby-toggle', 'emby-input', 'emby-select', 'paper-icon-button-light', 'listViewStyle', 'formDialogStyle', 'emby-button', 'flexStyles'], function (loading, dialogHelper, dom, $, libraryoptionseditor, globalize) { - 'use strict'; +/* eslint-disable indent */ + +/** + * Module for media library creator. + * @module components/mediaLibraryCreator/mediaLibraryCreator + */ + +import loading from 'loading'; +import dialogHelper from 'dialogHelper'; +import dom from 'dom'; +import $ from 'jQuery'; +import libraryoptionseditor from 'components/libraryoptionseditor/libraryoptionseditor'; +import globalize from 'globalize'; +import 'emby-toggle'; +import 'emby-input'; +import 'emby-select'; +import 'paper-icon-button-light'; +import 'listViewStyle'; +import 'formDialogStyle'; +import 'emby-button'; +import 'flexStyles'; function onAddLibrary() { if (isCreating) { @@ -7,7 +26,7 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed } if (pathInfos.length == 0) { - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert({ text: globalize.translate('PleaseAddAtLeastOneFolder'), type: 'error' @@ -19,23 +38,23 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed isCreating = true; loading.show(); - var dlg = dom.parentWithClass(this, 'dlg-librarycreator'); - var name = $('#txtValue', dlg).val(); - var type = $('#selectCollectionType', dlg).val(); + const dlg = dom.parentWithClass(this, 'dlg-librarycreator'); + const name = $('#txtValue', dlg).val(); + let type = $('#selectCollectionType', dlg).val(); if (type == 'mixed') { type = null; } - var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions')); + const libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions')); libraryOptions.PathInfos = pathInfos; - ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function () { + ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(() => { hasChanges = true; isCreating = false; loading.hide(); dialogHelper.close(dlg); - }, function () { - require(['toast'], function (toast) { + }, () => { + import('toast').then(({default: toast}) => { toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder')); }); @@ -46,15 +65,15 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed } function getCollectionTypeOptionsHtml(collectionTypeOptions) { - return collectionTypeOptions.map(function (i) { - return ''; + return collectionTypeOptions.map(i => { + return ``; }).join(''); } function initEditor(page, collectionTypeOptions) { $('#selectCollectionType', page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val('').on('change', function () { - var value = this.value; - var dlg = $(this).parents('.dialog')[0]; + const value = this.value; + const dlg = $(this).parents('.dialog')[0]; libraryoptionseditor.setContentType(dlg.querySelector('.libraryOptions'), value == 'mixed' ? '' : value); if (value) { @@ -64,12 +83,12 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed } if (value != 'mixed') { - var index = this.selectedIndex; + const index = this.selectedIndex; if (index != -1) { - var name = this.options[index].innerHTML.replace('*', '').replace('&', '&'); + const name = this.options[index].innerHTML.replace('*', '').replace('&', '&'); $('#txtValue', dlg).val(name); - var folderOption = collectionTypeOptions.filter(function (i) { + const folderOption = collectionTypeOptions.filter(i => { return i.value == value; })[0]; $('.collectionTypeFieldDescription', dlg).html(folderOption.message || ''); @@ -83,15 +102,15 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed } function onToggleAdvancedChange() { - var dlg = dom.parentWithClass(this, 'dlg-librarycreator'); + const dlg = dom.parentWithClass(this, 'dlg-librarycreator'); libraryoptionseditor.setAdvancedVisible(dlg.querySelector('.libraryOptions'), this.checked); } function onAddButtonClick() { - var page = dom.parentWithClass(this, 'dlg-librarycreator'); + const page = dom.parentWithClass(this, 'dlg-librarycreator'); - require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + import('directorybrowser').then(({default: directoryBrowser}) => { + const picker = new directoryBrowser(); picker.show({ enableNetworkSharePath: true, callback: function (path, networkSharePath) { @@ -106,24 +125,24 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed } function getFolderHtml(pathInfo, index) { - var html = ''; + let html = ''; html += '
'; - html += '
'; - html += '
' + pathInfo.Path + '
'; + html += `
`; + html += `
${pathInfo.Path}
`; if (pathInfo.NetworkPath) { - html += '
' + pathInfo.NetworkPath + '
'; + html += `
${pathInfo.NetworkPath}
`; } html += '
'; - html += ''; + html += ``; html += '
'; return html; } function renderPaths(page) { - var foldersHtml = pathInfos.map(getFolderHtml).join(''); - var folderList = page.querySelector('.folderList'); + const foldersHtml = pathInfos.map(getFolderHtml).join(''); + const folderList = page.querySelector('.folderList'); folderList.innerHTML = foldersHtml; if (foldersHtml) { @@ -134,13 +153,13 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed } function addMediaLocation(page, path, networkSharePath) { - var pathLower = path.toLowerCase(); - var pathFilter = pathInfos.filter(function (p) { + const pathLower = path.toLowerCase(); + const pathFilter = pathInfos.filter(p => { return p.Path.toLowerCase() == pathLower; }); if (!pathFilter.length) { - var pathInfo = { + const pathInfo = { Path: path }; @@ -154,11 +173,11 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed } function onRemoveClick(e) { - var button = dom.parentWithClass(e.target, 'btnRemovePath'); - var index = parseInt(button.getAttribute('data-index')); - var location = pathInfos[index].Path; - var locationLower = location.toLowerCase(); - pathInfos = pathInfos.filter(function (p) { + const button = dom.parentWithClass(e.target, 'btnRemovePath'); + const index = parseInt(button.getAttribute('data-index')); + const location = pathInfos[index].Path; + const locationLower = location.toLowerCase(); + pathInfos = pathInfos.filter(p => { return p.Path.toLowerCase() != locationLower; }); renderPaths(dom.parentWithClass(button, 'dlg-librarycreator')); @@ -169,54 +188,49 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed } function initLibraryOptions(dlg) { - libraryoptionseditor.embed(dlg.querySelector('.libraryOptions')).then(function () { + libraryoptionseditor.embed(dlg.querySelector('.libraryOptions')).then(() => { $('#selectCollectionType', dlg).trigger('change'); onToggleAdvancedChange.call(dlg.querySelector('.chkAdvanced')); }); } - function editor() { - this.show = function (options) { - return new Promise(function (resolve, reject) { - currentOptions = options; - currentResolve = resolve; - hasChanges = false; - var xhr = new XMLHttpRequest(); - xhr.open('GET', 'components/mediaLibraryCreator/mediaLibraryCreator.template.html', true); - - xhr.onload = function (e) { - var template = this.response; - var dlg = dialogHelper.createDialog({ - size: 'small', - modal: false, - removeOnClose: true, - scrollY: false - }); - dlg.classList.add('ui-body-a'); - dlg.classList.add('background-theme-a'); - dlg.classList.add('dlg-librarycreator'); - dlg.classList.add('formDialog'); - dlg.innerHTML = globalize.translateDocument(template); - initEditor(dlg, options.collectionTypeOptions); - dlg.addEventListener('close', onDialogClosed); - dialogHelper.open(dlg); - dlg.querySelector('.btnCancel').addEventListener('click', function () { - dialogHelper.close(dlg); - }); - pathInfos = []; - renderPaths(dlg); - initLibraryOptions(dlg); - }; - - xhr.send(); +export class showEditor { + constructor(options) { + return new Promise((resolve) => { + currentOptions = options; + currentResolve = resolve; + hasChanges = false; + import('text!./components/mediaLibraryCreator/mediaLibraryCreator.template.html').then(({default: template}) => { + const dlg = dialogHelper.createDialog({ + size: 'small', + modal: false, + removeOnClose: true, + scrollY: false + }); + dlg.classList.add('ui-body-a'); + dlg.classList.add('background-theme-a'); + dlg.classList.add('dlg-librarycreator'); + dlg.classList.add('formDialog'); + dlg.innerHTML = globalize.translateHtml(template); + initEditor(dlg, options.collectionTypeOptions); + dlg.addEventListener('close', onDialogClosed); + dialogHelper.open(dlg); + dlg.querySelector('.btnCancel').addEventListener('click', () => { + dialogHelper.close(dlg); + }); + pathInfos = []; + renderPaths(dlg); + initLibraryOptions(dlg); }); - }; + }); } +} - var pathInfos = []; - var currentResolve; - var currentOptions; - var hasChanges = false; - var isCreating = false; - return editor; -}); + let pathInfos = []; + let currentResolve; + let currentOptions; + let hasChanges = false; + let isCreating = false; + +/* eslint-enable indent */ +export default showEditor; diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.js b/src/components/mediaLibraryEditor/mediaLibraryEditor.js index 554cf4cc0f..1cee6984d9 100644 --- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js +++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js @@ -1,5 +1,22 @@ -define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionseditor/libraryoptionseditor', 'globalize', 'emby-button', 'listViewStyle', 'paper-icon-button-light', 'formDialogStyle', 'emby-toggle', 'flexStyles'], function (jQuery, loading, dialogHelper, dom, libraryoptionseditor, globalize) { - 'use strict'; +/* eslint-disable indent */ + +/** + * Module for media library editor. + * @module components/mediaLibraryEditor/mediaLibraryEditor + */ + +import jQuery from 'jQuery'; +import loading from 'loading'; +import dialogHelper from 'dialogHelper'; +import dom from 'dom'; +import libraryoptionseditor from 'components/libraryoptionseditor/libraryoptionseditor'; +import globalize from 'globalize'; +import 'emby-button'; +import 'listViewStyle'; +import 'paper-icon-button-light'; +import 'formDialogStyle'; +import 'emby-toggle'; +import 'flexStyles'; function onEditLibrary() { if (isCreating) { @@ -8,15 +25,15 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed isCreating = true; loading.show(); - var dlg = dom.parentWithClass(this, 'dlg-libraryeditor'); - var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions')); + const dlg = dom.parentWithClass(this, 'dlg-libraryeditor'); + let libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions')); libraryOptions = Object.assign(currentOptions.library.LibraryOptions || {}, libraryOptions); - ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions).then(function () { + ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions).then(() => { hasChanges = true; isCreating = false; loading.hide(); dialogHelper.close(dlg); - }, function () { + }, () => { isCreating = false; loading.hide(); }); @@ -24,50 +41,50 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed } function addMediaLocation(page, path, networkSharePath) { - var virtualFolder = currentOptions.library; - var refreshAfterChange = currentOptions.refresh; - ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(function () { + const virtualFolder = currentOptions.library; + const refreshAfterChange = currentOptions.refresh; + ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(() => { hasChanges = true; refreshLibraryFromServer(page); - }, function () { - require(['toast'], function (toast) { + }, () => { + import('toast').then(({default: toast}) => { toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder')); }); }); } function updateMediaLocation(page, path, networkSharePath) { - var virtualFolder = currentOptions.library; + const virtualFolder = currentOptions.library; ApiClient.updateMediaPath(virtualFolder.Name, { Path: path, NetworkPath: networkSharePath - }).then(function () { + }).then(() => { hasChanges = true; refreshLibraryFromServer(page); - }, function () { - require(['toast'], function (toast) { + }, () => { + import('toast').then(({default: toast}) => { toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder')); }); }); } function onRemoveClick(btnRemovePath, location) { - var button = btnRemovePath; - var virtualFolder = currentOptions.library; + const button = btnRemovePath; + const virtualFolder = currentOptions.library; - require(['confirm'], function (confirm) { + import('confirm').then(({default: confirm}) => { confirm({ title: globalize.translate('HeaderRemoveMediaLocation'), text: globalize.translate('MessageConfirmRemoveMediaLocation'), confirmText: globalize.translate('ButtonDelete'), primary: 'delete' - }).then(function () { - var refreshAfterChange = currentOptions.refresh; - ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function () { + }).then(() => { + const refreshAfterChange = currentOptions.refresh; + ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(() => { hasChanges = true; refreshLibraryFromServer(dom.parentWithClass(button, 'dlg-libraryeditor')); - }, function () { - require(['toast'], function (toast) { + }, () => { + import('toast').then(({default: toast}) => { toast(globalize.translate('DefaultErrorMessage')); }); }); @@ -76,14 +93,14 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed } function onListItemClick(e) { - var listItem = dom.parentWithClass(e.target, 'listItem'); + const listItem = dom.parentWithClass(e.target, 'listItem'); if (listItem) { - var index = parseInt(listItem.getAttribute('data-index')); - var pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || []; - var pathInfo = null == index ? {} : pathInfos[index] || {}; - var originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]); - var btnRemovePath = dom.parentWithClass(e.target, 'btnRemovePath'); + const index = parseInt(listItem.getAttribute('data-index')); + const pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || []; + const pathInfo = null == index ? {} : pathInfos[index] || {}; + const originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]); + const btnRemovePath = dom.parentWithClass(e.target, 'btnRemovePath'); if (btnRemovePath) { onRemoveClick(btnRemovePath, originalPath); @@ -95,26 +112,26 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed } function getFolderHtml(pathInfo, index) { - var html = ''; - html += '
'; - html += '
'; + let html = ''; + html += `
`; + html += `
`; html += '

'; html += pathInfo.Path; html += '

'; if (pathInfo.NetworkPath) { - html += '
' + pathInfo.NetworkPath + '
'; + html += `
${pathInfo.NetworkPath}
`; } html += '
'; - html += ''; + html += ``; html += '
'; return html; } function refreshLibraryFromServer(page) { - ApiClient.getVirtualFolders().then(function (result) { - var library = result.filter(function (f) { + ApiClient.getVirtualFolders().then(result => { + const library = result.filter(f => { return f.Name === currentOptions.library.Name; })[0]; @@ -126,10 +143,10 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed } function renderLibrary(page, options) { - var pathInfos = (options.library.LibraryOptions || {}).PathInfos || []; + let pathInfos = (options.library.LibraryOptions || {}).PathInfos || []; if (!pathInfos.length) { - pathInfos = options.library.Locations.map(function (p) { + pathInfos = options.library.Locations.map(p => { return { Path: p }; @@ -150,8 +167,8 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed } function showDirectoryBrowser(context, originalPath, networkPath) { - require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + import('directorybrowser').then(({default: directoryBrowser}) => { + const picker = new directoryBrowser(); picker.show({ enableNetworkSharePath: true, pathReadOnly: null != originalPath, @@ -173,7 +190,7 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed } function onToggleAdvancedChange() { - var dlg = dom.parentWithClass(this, 'dlg-libraryeditor'); + const dlg = dom.parentWithClass(this, 'dlg-libraryeditor'); libraryoptionseditor.setAdvancedVisible(dlg.querySelector('.libraryOptions'), this.checked); } @@ -183,7 +200,7 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed dlg.querySelector('.folderList').addEventListener('click', onListItemClick); dlg.querySelector('.chkAdvanced').addEventListener('change', onToggleAdvancedChange); dlg.querySelector('.btnSubmit').addEventListener('click', onEditLibrary); - libraryoptionseditor.embed(dlg.querySelector('.libraryOptions'), options.library.CollectionType, options.library.LibraryOptions).then(function () { + libraryoptionseditor.embed(dlg.querySelector('.libraryOptions'), options.library.CollectionType, options.library.LibraryOptions).then(() => { onToggleAdvancedChange.call(dlg.querySelector('.chkAdvanced')); }); } @@ -192,46 +209,41 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed currentDeferred.resolveWith(null, [hasChanges]); } - function editor() { - this.show = function (options) { - var deferred = jQuery.Deferred(); - currentOptions = options; - currentDeferred = deferred; - hasChanges = false; - var xhr = new XMLHttpRequest(); - xhr.open('GET', 'components/mediaLibraryEditor/mediaLibraryEditor.template.html', true); - - xhr.onload = function (e) { - var template = this.response; - var dlg = dialogHelper.createDialog({ - size: 'small', - modal: false, - removeOnClose: true, - scrollY: false - }); - dlg.classList.add('dlg-libraryeditor'); - dlg.classList.add('ui-body-a'); - dlg.classList.add('background-theme-a'); - dlg.classList.add('formDialog'); - dlg.innerHTML = globalize.translateDocument(template); - dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.library.Name; - initEditor(dlg, options); - dlg.addEventListener('close', onDialogClosed); - dialogHelper.open(dlg); - dlg.querySelector('.btnCancel').addEventListener('click', function () { - dialogHelper.close(dlg); - }); - refreshLibraryFromServer(dlg); - }; - - xhr.send(); - return deferred.promise(); - }; +export class showEditor { + constructor(options) { + const deferred = jQuery.Deferred(); + currentOptions = options; + currentDeferred = deferred; + hasChanges = false; + import('text!./components/mediaLibraryEditor/mediaLibraryEditor.template.html').then(({default: template}) => { + const dlg = dialogHelper.createDialog({ + size: 'small', + modal: false, + removeOnClose: true, + scrollY: false + }); + dlg.classList.add('dlg-libraryeditor'); + dlg.classList.add('ui-body-a'); + dlg.classList.add('background-theme-a'); + dlg.classList.add('formDialog'); + dlg.innerHTML = globalize.translateHtml(template); + dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.library.Name; + initEditor(dlg, options); + dlg.addEventListener('close', onDialogClosed); + dialogHelper.open(dlg); + dlg.querySelector('.btnCancel').addEventListener('click', () => { + dialogHelper.close(dlg); + }); + refreshLibraryFromServer(dlg); + }); + return deferred.promise(); } +} - var currentDeferred; - var currentOptions; - var hasChanges = false; - var isCreating = false; - return editor; -}); + let currentDeferred; + let currentOptions; + let hasChanges = false; + let isCreating = false; + +/* eslint-enable indent */ +export default showEditor; diff --git a/src/components/mediainfo/mediainfo.js b/src/components/mediainfo/mediainfo.js index c569a7c78c..71acc5bbce 100644 --- a/src/components/mediainfo/mediainfo.js +++ b/src/components/mediainfo/mediainfo.js @@ -1,9 +1,18 @@ -define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'material-icons', 'css!./mediainfo.css', 'programStyles', 'emby-button'], function (datetime, globalize, appRouter, itemHelper, indicators) { - 'use strict'; +import datetime from 'datetime'; +import globalize from 'globalize'; +import appRouter from 'appRouter'; +import itemHelper from 'itemHelper'; +import indicators from 'indicators'; +import 'material-icons'; +import 'css!./mediainfo.css'; +import 'programStyles'; +import 'emby-button'; + +/* eslint-disable indent */ function getTimerIndicator(item) { - var status; + let status; if (item.Type === 'SeriesTimer') { return ''; @@ -30,11 +39,11 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater } function getProgramInfoHtml(item, options) { - var html = ''; + let html = ''; - var miscInfo = []; - var text; - var date; + const miscInfo = []; + let text; + let date; if (item.StartDate && options.programTime !== false) { @@ -48,35 +57,35 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater text += datetime.toLocaleDateString(date, { weekday: 'short', month: 'short', day: 'numeric' }); } - text += ' ' + datetime.getDisplayTime(date); + text += ` ${datetime.getDisplayTime(date)}`; if (item.EndDate) { date = datetime.parseISO8601Date(item.EndDate); - text += ' - ' + datetime.getDisplayTime(date); + text += ` - ${datetime.getDisplayTime(date)}`; } miscInfo.push(text); } catch (e) { - console.error('error parsing date: ' + item.StartDate); + console.error('error parsing date:', item.StartDate); } } if (item.ChannelNumber) { - miscInfo.push('CH ' + item.ChannelNumber); + miscInfo.push(`CH ${item.ChannelNumber}`); } if (item.ChannelName) { if (options.interactive && item.ChannelId) { miscInfo.push({ - html: '' + item.ChannelName + '' + })}">${item.ChannelName}` }); } else { miscInfo.push(item.ChannelName); @@ -84,7 +93,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater } if (options.timerIndicator !== false) { - var timerHtml = getTimerIndicator(item); + const timerHtml = getTimerIndicator(item); if (timerHtml) { miscInfo.push({ html: timerHtml @@ -92,24 +101,24 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater } } - html += miscInfo.map(function (m) { + html += miscInfo.map(m => { return getMediaInfoItem(m); }).join(''); return html; } - function getMediaInfoHtml(item, options) { - var html = ''; + export function getMediaInfoHtml(item, options) { + let html = ''; - var miscInfo = []; + const miscInfo = []; options = options || {}; - var text; - var date; - var minutes; - var count; + let text; + let date; + let minutes; + let count; - var showFolderRuntime = item.Type === 'MusicAlbum' || item.MediaType === 'MusicArtist' || item.MediaType === 'Playlist' || item.MediaType === 'MusicGenre'; + const showFolderRuntime = item.Type === 'MusicAlbum' || item.MediaType === 'MusicArtist' || item.MediaType === 'Playlist' || item.MediaType === 'MusicGenre'; if (showFolderRuntime) { @@ -143,7 +152,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater text = datetime.toLocaleDateString(date); miscInfo.push(text); } catch (e) { - console.error('error parsing date: ' + item.PremiereDate); + console.error('error parsing date:', item.PremiereDate); } } } @@ -176,7 +185,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater miscInfo.push(text); } } catch (e) { - console.error('error parsing date: ' + item.StartDate); + console.error('error parsing date:', item.StartDate); } } @@ -193,14 +202,14 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater try { - var endYear = datetime.parseISO8601Date(item.EndDate).getFullYear(); + const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear(); if (endYear !== item.ProductionYear) { - text += '-' + datetime.parseISO8601Date(item.EndDate).getFullYear(); + text += `-${datetime.parseISO8601Date(item.EndDate).getFullYear()}`; } } catch (e) { - console.error('error parsing date: ' + item.EndDate); + console.error('error parsing date:', item.EndDate); } } @@ -213,19 +222,19 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater if (options.programIndicator !== false) { if (item.IsLive) { miscInfo.push({ - html: '
' + globalize.translate('Live') + '
' + html: `
${globalize.translate('Live')}
` }); } else if (item.IsPremiere) { miscInfo.push({ - html: '
' + globalize.translate('Premiere') + '
' + html: `
${globalize.translate('Premiere')}
` }); } else if (item.IsSeries && !item.IsRepeat) { miscInfo.push({ - html: '
' + globalize.translate('AttributeNew') + '
' + html: `
${globalize.translate('AttributeNew')}
` }); } else if (item.IsSeries && item.IsRepeat) { miscInfo.push({ - html: '
' + globalize.translate('Repeat') + '
' + html: `
${globalize.translate('Repeat')}
` }); } } @@ -248,7 +257,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater text = globalize.translate('OriginalAirDateValue', datetime.toLocaleDateString(date)); miscInfo.push(text); } catch (e) { - console.error('error parsing date: ' + item.PremiereDate); + console.error('error parsing date:', item.PremiereDate); } } else if (item.ProductionYear) { miscInfo.push(item.ProductionYear); @@ -267,13 +276,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater text = datetime.parseISO8601Date(item.PremiereDate).getFullYear(); miscInfo.push(text); } catch (e) { - console.error('error parsing date: ' + item.PremiereDate); + console.error('error parsing date:', item.PremiereDate); } } } } - 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') { @@ -284,7 +293,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater minutes = minutes || 1; - miscInfo.push(Math.round(minutes) + ' mins'); + miscInfo.push(`${Math.round(minutes)} mins`); } } @@ -300,14 +309,14 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater } if (item.MediaType === 'Photo' && item.Width && item.Height) { - miscInfo.push(item.Width + 'x' + item.Height); + miscInfo.push(`${item.Width}x${item.Height}`); } if (options.container !== false && item.Type === 'Audio' && item.Container) { miscInfo.push(item.Container); } - html += miscInfo.map(function (m) { + html += miscInfo.map(m => { return getMediaInfoItem(m); }).join(''); @@ -320,15 +329,15 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater if (item.CriticRating && options.criticRating !== false) { if (item.CriticRating >= 60) { - html += '
' + item.CriticRating + '
'; + html += `
${item.CriticRating}
`; } else { - html += '
' + item.CriticRating + '
'; + html += `
${item.CriticRating}
`; } } if (options.endsAt !== false) { - var endsAt = getEndsAt(item); + const endsAt = getEndsAt(item); if (endsAt) { html += getMediaInfoItem(endsAt, 'endsAt'); } @@ -339,15 +348,15 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater return html; } - function getEndsAt(item) { + export function getEndsAt(item) { if (item.MediaType === 'Video' && item.RunTimeTicks) { if (!item.StartDate) { - var endDate = new Date().getTime() + (item.RunTimeTicks / 10000); + let endDate = new Date().getTime() + (item.RunTimeTicks / 10000); endDate = new Date(endDate); - var displayTime = datetime.getDisplayTime(endDate); + const displayTime = datetime.getDisplayTime(endDate); return globalize.translate('EndsAtValue', displayTime); } } @@ -355,12 +364,12 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater return null; } - function getEndsAtFromPosition(runtimeTicks, positionTicks, includeText) { + export function getEndsAtFromPosition(runtimeTicks, positionTicks, includeText) { - var endDate = new Date().getTime() + ((runtimeTicks - (positionTicks || 0)) / 10000); + let endDate = new Date().getTime() + ((runtimeTicks - (positionTicks || 0)) / 10000); endDate = new Date(endDate); - var displayTime = datetime.getDisplayTime(endDate); + const displayTime = datetime.getDisplayTime(endDate); if (includeText === false) { return displayTime; @@ -370,8 +379,8 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater function getMediaInfoItem(m, cssClass) { - cssClass = cssClass ? (cssClass + ' mediaInfoItem') : 'mediaInfoItem'; - var mediaInfoText = m; + cssClass = cssClass ? (`${cssClass} mediaInfoItem`) : 'mediaInfoItem'; + let mediaInfoText = m; if (typeof (m) !== 'string' && typeof (m) !== 'number') { @@ -379,13 +388,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater return m.html; } mediaInfoText = m.text; - cssClass += ' ' + m.cssClass; + cssClass += ` ${m.cssClass}`; } - return '
' + mediaInfoText + '
'; + return `
${mediaInfoText}
`; } function getStarIconsHtml(item) { - var html = ''; + let html = ''; if (item.CommunityRating) { html += '
'; @@ -400,7 +409,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater function dynamicEndTime(elem, item) { - var interval = setInterval(function () { + const interval = setInterval(() => { if (!document.body.contains(elem)) { @@ -413,15 +422,15 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater }, 60000); } - function fillPrimaryMediaInfo(elem, item, options) { - var html = getPrimaryMediaInfoHtml(item, options); + export function fillPrimaryMediaInfo(elem, item, options) { + const html = getPrimaryMediaInfoHtml(item, options); elem.innerHTML = html; afterFill(elem, item, options); } - function fillSecondaryMediaInfo(elem, item, options) { - var html = getSecondaryMediaInfoHtml(item, options); + export function fillSecondaryMediaInfo(elem, item, options) { + const html = getSecondaryMediaInfoHtml(item, options); elem.innerHTML = html; afterFill(elem, item, options); @@ -430,13 +439,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater function afterFill(elem, item, options) { if (options.endsAt !== false) { - var endsAtElem = elem.querySelector('.endsAt'); + const endsAtElem = elem.querySelector('.endsAt'); if (endsAtElem) { dynamicEndTime(endsAtElem, item); } } - var lnkChannel = elem.querySelector('.lnkChannel'); + const lnkChannel = elem.querySelector('.lnkChannel'); if (lnkChannel) { lnkChannel.addEventListener('click', onChannelLinkClick); } @@ -444,8 +453,8 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater function onChannelLinkClick(e) { - var channelId = this.getAttribute('data-id'); - var serverId = this.getAttribute('data-serverid'); + const channelId = this.getAttribute('data-id'); + const serverId = this.getAttribute('data-serverid'); appRouter.showItem(channelId, serverId); @@ -453,7 +462,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater return false; } - function getPrimaryMediaInfoHtml(item, options) { + export function getPrimaryMediaInfoHtml(item, options) { options = options || {}; if (options.interactive == null) { @@ -463,7 +472,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater return getMediaInfoHtml(item, options); } - function getSecondaryMediaInfoHtml(item, options) { + export function getSecondaryMediaInfoHtml(item, options) { options = options || {}; if (options.interactive == null) { @@ -476,10 +485,10 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater return ''; } - function getResolutionText(i) { + export function getResolutionText(i) { - var width = i.Width; - var height = i.Height; + const width = i.Width; + const height = i.Height; if (width && height) { @@ -522,28 +531,28 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater return null; } - var mediaSource = item.MediaSources[0]; + const mediaSource = item.MediaSources[0]; if (!mediaSource) { return null; } - return (mediaSource.MediaStreams || []).filter(function (i) { + return (mediaSource.MediaStreams || []).filter(i => { return i.Type === 'Audio' && (i.Index === mediaSource.DefaultAudioStreamIndex || mediaSource.DefaultAudioStreamIndex == null); })[0]; } - function getMediaInfoStats(item, options) { + export function getMediaInfoStats(item, options) { options = options || {}; - var list = []; + const list = []; - var mediaSource = (item.MediaSources || [])[0] || {}; + const mediaSource = (item.MediaSources || [])[0] || {}; - var videoStream = (mediaSource.MediaStreams || []).filter(function (i) { + const videoStream = (mediaSource.MediaStreams || []).filter(i => { return i.Type === 'Video'; })[0] || {}; - var audioStream = getAudioStreamForDisplay(item) || {}; + const audioStream = getAudioStreamForDisplay(item) || {}; if (item.VideoType === 'Dvd') { list.push({ @@ -563,7 +572,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater // html += '
' + mediaSource.Container + '
'; //} - var resolutionText = getResolutionText(videoStream); + const resolutionText = getResolutionText(videoStream); if (resolutionText) { list.push({ type: 'mediainfo', @@ -578,8 +587,8 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater }); } - var channels = audioStream.Channels; - var channelText; + const channels = audioStream.Channels; + let channelText; if (channels === 8) { @@ -605,7 +614,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater }); } - var audioCodec = (audioStream.Codec || '').toLowerCase(); + const audioCodec = (audioStream.Codec || '').toLowerCase(); if ((audioCodec === 'dca' || audioCodec === 'dts') && audioStream.Profile) { list.push({ @@ -621,27 +630,27 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater if (item.DateCreated && itemHelper.enableDateAddedDisplay(item)) { - var dateCreated = datetime.parseISO8601Date(item.DateCreated); + const dateCreated = datetime.parseISO8601Date(item.DateCreated); list.push({ type: 'added', - text: globalize.translate('AddedOnValue', datetime.toLocaleDateString(dateCreated) + ' ' + datetime.getDisplayTime(dateCreated)) + text: globalize.translate('AddedOnValue', `${datetime.toLocaleDateString(dateCreated)} ${datetime.getDisplayTime(dateCreated)}`) }); } return list; } - return { - getMediaInfoHtml: getPrimaryMediaInfoHtml, - fill: fillPrimaryMediaInfo, - getEndsAt: getEndsAt, - getEndsAtFromPosition: getEndsAtFromPosition, - getPrimaryMediaInfoHtml: getPrimaryMediaInfoHtml, - getSecondaryMediaInfoHtml: getSecondaryMediaInfoHtml, - fillPrimaryMediaInfo: fillPrimaryMediaInfo, - fillSecondaryMediaInfo: fillSecondaryMediaInfo, - getMediaInfoStats: getMediaInfoStats, - getResolutionText: getResolutionText - }; -}); +/* eslint-enable indent */ + +export default { + getMediaInfoHtml: getPrimaryMediaInfoHtml, + getEndsAt: getEndsAt, + getEndsAtFromPosition: getEndsAtFromPosition, + getPrimaryMediaInfoHtml: getPrimaryMediaInfoHtml, + getSecondaryMediaInfoHtml: getSecondaryMediaInfoHtml, + fillPrimaryMediaInfo: fillPrimaryMediaInfo, + fillSecondaryMediaInfo: fillSecondaryMediaInfo, + getMediaInfoStats: getMediaInfoStats, + getResolutionText: getResolutionText +}; diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js index 52f030cd23..28bc8a6dae 100644 --- a/src/components/metadataEditor/metadataEditor.js +++ b/src/components/metadataEditor/metadataEditor.js @@ -1,9 +1,30 @@ -define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loading', 'focusManager', 'connectionManager', 'globalize', 'require', 'shell', 'emby-checkbox', 'emby-input', 'emby-select', 'listViewStyle', 'emby-textarea', 'emby-button', 'paper-icon-button-light', 'css!./../formdialog', 'clearButtonStyle', 'flexStyles'], function (itemHelper, dom, layoutManager, dialogHelper, datetime, loading, focusManager, connectionManager, globalize, require, shell) { - 'use strict'; +import itemHelper from 'itemHelper'; +import dom from 'dom'; +import layoutManager from 'layoutManager'; +import dialogHelper from 'dialogHelper'; +import datetime from 'datetime'; +import loading from 'loading'; +import focusManager from 'focusManager'; +import connectionManager from 'connectionManager'; +import globalize from 'globalize'; +import require from 'require'; +import shell from 'shell'; +import 'emby-checkbox'; +import 'emby-input'; +import 'emby-select'; +import 'listViewStyle'; +import 'emby-textarea'; +import 'emby-button'; +import 'paper-icon-button-light'; +import 'css!./../formdialog'; +import 'clearButtonStyle'; +import 'flexStyles'; - var currentContext; - var metadataEditorInfo; - var currentItem; +/* eslint-disable indent */ + + let currentContext; + let metadataEditorInfo; + let currentItem; function isDialog() { return currentContext.classList.contains('dialog'); @@ -28,11 +49,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi closeDialog(true); } - var apiClient = getApiClient(); + const apiClient = getApiClient(); apiClient.updateItem(item).then(function () { - var newContentType = form.querySelector('#selectContentType').value || ''; + const newContentType = form.querySelector('#selectContentType').value || ''; if ((metadataEditorInfo.ContentType || '') !== newContentType) { @@ -56,7 +77,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi } function getSelectedAirDays(form) { - var checkedItems = form.querySelectorAll('.chkAirDay:checked') || []; + const checkedItems = form.querySelectorAll('.chkAirDay:checked') || []; return Array.prototype.map.call(checkedItems, function (c) { return c.getAttribute('data-day'); }); @@ -92,7 +113,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi function getDateValue(form, element, property) { - var val = form.querySelector(element).value; + let val = form.querySelector(element).value; if (!val) { return null; @@ -100,14 +121,14 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi if (currentItem[property]) { - var date = datetime.parseISO8601Date(currentItem[property], true); + const date = datetime.parseISO8601Date(currentItem[property], true); - var parts = date.toISOString().split('T'); + const parts = date.toISOString().split('T'); // If the date is the same, preserve the time if (parts[0].indexOf(val) === 0) { - var iso = parts[1]; + const iso = parts[1]; val += 'T' + iso; } @@ -120,9 +141,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi loading.show(); - var form = this; + const form = this; - var item = { + const item = { Id: currentItem.Id, Name: form.querySelector('#txtName').value, OriginalTitle: form.querySelector('#txtOriginalName').value, @@ -168,9 +189,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi item.ProviderIds = Object.assign({}, currentItem.ProviderIds); - var idElements = form.querySelectorAll('.txtExternalId'); + const idElements = form.querySelectorAll('.txtExternalId'); Array.prototype.map.call(idElements, function (idElem) { - var providerKey = idElem.getAttribute('data-providerkey'); + const providerKey = idElem.getAttribute('data-providerkey'); item.ProviderIds[providerKey] = idElem.value; }); @@ -179,7 +200,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi if (currentItem.Type === 'Person') { - var placeOfBirth = form.querySelector('#txtPlaceOfBirth').value; + const placeOfBirth = form.querySelector('#txtPlaceOfBirth').value; item.ProductionLocations = placeOfBirth ? [placeOfBirth] : []; } @@ -187,11 +208,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi if (currentItem.Type === 'Series') { // 600000000 - var seriesRuntime = form.querySelector('#txtSeriesRuntime').value; + const seriesRuntime = form.querySelector('#txtSeriesRuntime').value; item.RunTimeTicks = seriesRuntime ? (seriesRuntime * 600000000) : null; } - var tagline = form.querySelector('#txtTagline').value; + const tagline = form.querySelector('#txtTagline').value; item.Taglines = tagline ? [tagline] : []; submitUpdatedItem(form, item); @@ -212,11 +233,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi function addElementToList(source, sortCallback) { require(['prompt'], function (prompt) { - prompt({ + prompt.default({ label: 'Value:' }).then(function (text) { - var list = dom.parentWithClass(source, 'editableListviewContainer').querySelector('.paperList'); - var items = getListValues(list); + const list = dom.parentWithClass(source, 'editableListviewContainer').querySelector('.paperList'); + const items = getListValues(list); items.push(text); populateListView(list, items, sortCallback); }); @@ -224,7 +245,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi } function removeElementFromList(source) { - var el = dom.parentWithClass(source, 'listItem'); + const el = dom.parentWithClass(source, 'listItem'); el.parentNode.removeChild(el); } @@ -234,7 +255,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi personEditor.show(person).then(function (updatedPerson) { - var isNew = index === -1; + const isNew = index === -1; if (isNew) { currentItem.People.push(updatedPerson); @@ -247,13 +268,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi function onEditorClick(e) { - var btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList'); + const btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList'); if (btnRemoveFromEditorList) { removeElementFromList(btnRemoveFromEditorList); return; } - var btnAddTextItem = dom.parentWithClass(e.target, 'btnAddTextItem'); + const btnAddTextItem = dom.parentWithClass(e.target, 'btnAddTextItem'); if (btnAddTextItem) { addElementToList(btnAddTextItem); } @@ -264,7 +285,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi } function bindAll(elems, eventName, fn) { - for (var i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener(eventName, fn); } } @@ -272,11 +293,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi function init(context, apiClient) { context.querySelector('.externalIds').addEventListener('click', function (e) { - var btnOpenExternalId = dom.parentWithClass(e.target, 'btnOpenExternalId'); + const btnOpenExternalId = dom.parentWithClass(e.target, 'btnOpenExternalId'); if (btnOpenExternalId) { - var field = context.querySelector('#' + btnOpenExternalId.getAttribute('data-fieldid')); + const field = context.querySelector('#' + btnOpenExternalId.getAttribute('data-fieldid')); - var formatString = field.getAttribute('data-formatstring'); + const formatString = field.getAttribute('data-formatstring'); if (field.value) { shell.openUrl(formatString.replace('{0}', field.value)); @@ -308,10 +329,10 @@ 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'); + const form = context.querySelector('form'); form.removeEventListener('submit', onSubmit); form.addEventListener('submit', onSubmit); @@ -322,15 +343,15 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi context.querySelector('#peopleList').addEventListener('click', function (e) { - var index; - var btnDeletePerson = dom.parentWithClass(e.target, 'btnDeletePerson'); + let index; + const btnDeletePerson = dom.parentWithClass(e.target, 'btnDeletePerson'); if (btnDeletePerson) { index = parseInt(btnDeletePerson.getAttribute('data-index')); currentItem.People.splice(index, 1); populatePeople(context, currentItem.People); } - var btnEditPerson = dom.parentWithClass(e.target, 'btnEditPerson'); + const btnEditPerson = dom.parentWithClass(e.target, 'btnEditPerson'); if (btnEditPerson) { index = parseInt(btnEditPerson.getAttribute('data-index')); editPerson(context, currentItem.People[index], index); @@ -340,7 +361,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi function getItem(itemId, serverId) { - var apiClient = connectionManager.getApiClient(serverId); + const apiClient = connectionManager.getApiClient(serverId); if (itemId) { return apiClient.getItem(apiClient.getCurrentUserId(), itemId); @@ -351,7 +372,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi function getEditorConfig(itemId, serverId) { - var apiClient = connectionManager.getApiClient(serverId); + const apiClient = connectionManager.getApiClient(serverId); if (itemId) { return apiClient.getJSON(apiClient.getUrl('Items/' + itemId + '/MetadataEditor')); @@ -362,13 +383,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi function populateCountries(select, allCountries) { - var html = ''; + let html = ''; html += ""; - for (var i = 0, length = allCountries.length; i < length; i++) { + for (let i = 0, length = allCountries.length; i < length; i++) { - var culture = allCountries[i]; + const culture = allCountries[i]; html += "'; } @@ -378,13 +399,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi function populateLanguages(select, languages) { - var html = ''; + let html = ''; html += ""; - for (var i = 0, length = languages.length; i < length; i++) { + for (let i = 0, length = languages.length; i < length; i++) { - var culture = languages[i]; + const culture = languages[i]; html += "'; } @@ -400,41 +421,41 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi showElement('#fldContentType', context); } - var html = metadataInfo.ContentTypeOptions.map(function (i) { + const html = metadataInfo.ContentTypeOptions.map(function (i) { return ''; }).join(''); - var selectEl = context.querySelector('#selectContentType'); + const selectEl = context.querySelector('#selectContentType'); selectEl.innerHTML = html; selectEl.value = metadataInfo.ContentType || ''; } function loadExternalIds(context, item, externalIds) { - var html = ''; + let html = ''; - var providerIds = item.ProviderIds || {}; + const providerIds = item.ProviderIds || {}; - for (var i = 0, length = externalIds.length; i < length; i++) { + for (let i = 0, length = externalIds.length; i < length; i++) { - var idInfo = externalIds[i]; + const idInfo = externalIds[i]; - var id = 'txt1' + idInfo.Key; - var formatString = idInfo.UrlFormatString || ''; + const id = 'txt1' + idInfo.Key; + const formatString = idInfo.UrlFormatString || ''; - var fullName = idInfo.Name; + let fullName = idInfo.Name; if (idInfo.Type) { fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type); } - var labelText = globalize.translate('LabelDynamicExternalId', fullName); + const labelText = globalize.translate('LabelDynamicExternalId', fullName); html += '
'; html += '
'; - var value = providerIds[idInfo.Key] || ''; + const value = providerIds[idInfo.Key] || ''; html += '
'; html += ''; @@ -448,7 +469,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi html += '
'; } - var elem = context.querySelector('.externalIds', context); + const elem = context.querySelector('.externalIds', context); elem.innerHTML = html; if (externalIds.length) { @@ -465,7 +486,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi context = context || document; if (typeof selector === 'string') { - var elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)]; + const elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)]; Array.prototype.forEach.call(elements, function (el) { if (el) { @@ -484,7 +505,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi context = context || document; if (typeof selector === 'string') { - var elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)]; + const elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)]; Array.prototype.forEach.call(elements, function (el) { if (el) { @@ -686,7 +707,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi function fillItemInfo(context, item, parentalRatingOptions) { - var select = context.querySelector('#selectOfficialRating'); + let select = context.querySelector('#selectOfficialRating'); populateRatings(parentalRatingOptions, select, item.OfficialRating); @@ -698,7 +719,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi select.value = item.CustomRating || ''; - var selectStatus = context.querySelector('#selectStatus'); + const selectStatus = context.querySelector('#selectStatus'); populateStatus(selectStatus); selectStatus.value = item.Status || ''; @@ -717,8 +738,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi populateListView(context.querySelector('#listTags'), item.Tags); - var lockData = (item.LockData || false); - var chkLockData = context.querySelector('#chkLockData'); + const lockData = (item.LockData || false); + const chkLockData = context.querySelector('#chkLockData'); chkLockData.checked = lockData; if (chkLockData.checked) { hideElement('.providerSettingsContainer', context); @@ -756,7 +777,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi return a.Name; }).join(';'); - var date; + let date; if (item.DateCreated) { try { @@ -798,7 +819,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi context.querySelector('#txtAirTime').value = item.AirTime || ''; - var placeofBirth = item.ProductionLocations && item.ProductionLocations.length ? item.ProductionLocations[0] : ''; + const placeofBirth = item.ProductionLocations && item.ProductionLocations.length ? item.ProductionLocations[0] : ''; context.querySelector('#txtPlaceOfBirth').value = placeofBirth; context.querySelector('#txtOriginalAspectRatio').value = item.AspectRatio || ''; @@ -808,7 +829,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi if (item.RunTimeTicks) { - var minutes = item.RunTimeTicks / 600000000; + const minutes = item.RunTimeTicks / 600000000; context.querySelector('#txtSeriesRuntime').value = Math.round(minutes); } else { @@ -818,18 +839,16 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi function populateRatings(allParentalRatings, select, currentValue) { - var html = ''; + let html = ''; html += ""; - var ratings = []; - var i; - var length; - var rating; + const ratings = []; + let rating; - var currentValueFound = false; + let currentValueFound = false; - for (i = 0, length = allParentalRatings.length; i < length; i++) { + for (let i = 0, length = allParentalRatings.length; i < length; i++) { rating = allParentalRatings[i]; @@ -844,7 +863,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi ratings.push({ Name: currentValue, Value: currentValue }); } - for (i = 0, length = ratings.length; i < length; i++) { + for (let i = 0, length = ratings.length; i < length; i++) { rating = ratings[i]; @@ -855,7 +874,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi } function populateStatus(select) { - var html = ''; + let html = ''; html += ""; html += "'; @@ -873,8 +892,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi } else { items = sortCallback(items); } - var html = ''; - for (var i = 0; i < items.length; i++) { + let html = ''; + for (let i = 0; i < items.length; i++) { html += '
'; html += ''; @@ -897,14 +916,14 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi function populatePeople(context, people) { - var lastType = ''; - var html = ''; + let lastType = ''; + let html = ''; - var elem = context.querySelector('#peopleList'); + const elem = context.querySelector('#peopleList'); - for (var i = 0, length = people.length; i < length; i++) { + for (let i = 0, length = people.length; i < length; i++) { - var person = people[i]; + const person = people[i]; html += '
'; @@ -934,13 +953,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi function getLockedFieldsHtml(fields, currentFields) { - var html = ''; - for (var i = 0; i < fields.length; i++) { + let html = ''; + for (let i = 0; i < fields.length; i++) { - var field = fields[i]; - var name = field.name; - var value = field.value || field.name; - var checkedHtml = currentFields.indexOf(value) === -1 ? ' checked' : ''; + const field = fields[i]; + const name = field.name; + const value = field.value || field.name; + const checkedHtml = currentFields.indexOf(value) === -1 ? ' checked' : ''; html += '
diff --git a/src/components/multiSelect/multiSelect.js b/src/components/multiSelect/multiSelect.js index 83982413ae..742b8e86da 100644 --- a/src/components/multiSelect/multiSelect.js +++ b/src/components/multiSelect/multiSelect.js @@ -1,13 +1,20 @@ -define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'globalize', 'appRouter', 'dom', 'css!./multiSelect'], function (browser, appStorage, appHost, loading, connectionManager, globalize, appRouter, dom) { - 'use strict'; +import browser from 'browser'; +import appHost from 'apphost'; +import loading from 'loading'; +import connectionManager from 'connectionManager'; +import globalize from 'globalize'; +import dom from 'dom'; +import 'css!./multiSelect'; - var selectedItems = []; - var selectedElements = []; - var currentSelectionCommandsPanel; +/* eslint-disable indent */ + + let selectedItems = []; + let selectedElements = []; + let currentSelectionCommandsPanel; function hideSelections() { - var selectionCommandsPanel = currentSelectionCommandsPanel; + const selectionCommandsPanel = currentSelectionCommandsPanel; if (selectionCommandsPanel) { selectionCommandsPanel.parentNode.removeChild(selectionCommandsPanel); @@ -15,10 +22,10 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo selectedItems = []; selectedElements = []; - var elems = document.querySelectorAll('.itemSelectionPanel'); - for (var i = 0, length = elems.length; i < length; i++) { + const elems = document.querySelectorAll('.itemSelectionPanel'); + for (let i = 0, length = elems.length; i < length; i++) { - var parent = elems[i].parentNode; + const parent = elems[i].parentNode; parent.removeChild(elems[i]); parent.classList.remove('withMultiSelect'); } @@ -29,14 +36,14 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo // toggle the checkbox, if it wasn't clicked on if (!dom.parentWithClass(e.target, 'chkItemSelect')) { - var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); + const chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); if (chkItemSelect) { if (chkItemSelect.classList.contains('checkedInitial')) { chkItemSelect.classList.remove('checkedInitial'); } else { - var newValue = !chkItemSelect.checked; + const newValue = !chkItemSelect.checked; chkItemSelect.checked = newValue; updateItemSelection(chkItemSelect, newValue); } @@ -50,11 +57,11 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function updateItemSelection(chkItemSelect, selected) { - var id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id'); + const id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id'); if (selected) { - var current = selectedItems.filter(function (i) { + const current = selectedItems.filter(i => { return i === id; }); @@ -64,16 +71,16 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo } } else { - selectedItems = selectedItems.filter(function (i) { + selectedItems = selectedItems.filter(i => { return i !== id; }); - selectedElements = selectedElements.filter(function (i) { + selectedElements = selectedElements.filter(i => { return i !== chkItemSelect; }); } if (selectedItems.length) { - var itemSelectionCount = document.querySelector('.itemSelectionCount'); + const itemSelectionCount = document.querySelector('.itemSelectionCount'); if (itemSelectionCount) { itemSelectionCount.innerHTML = selectedItems.length; } @@ -88,33 +95,33 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function showSelection(item, isChecked) { - var itemSelectionPanel = item.querySelector('.itemSelectionPanel'); + let itemSelectionPanel = item.querySelector('.itemSelectionPanel'); if (!itemSelectionPanel) { itemSelectionPanel = document.createElement('div'); itemSelectionPanel.classList.add('itemSelectionPanel'); - var parent = item.querySelector('.cardBox') || item.querySelector('.cardContent'); + const parent = item.querySelector('.cardBox') || item.querySelector('.cardContent'); parent.classList.add('withMultiSelect'); parent.appendChild(itemSelectionPanel); - var cssClass = 'chkItemSelect'; + let cssClass = 'chkItemSelect'; if (isChecked && !browser.firefox) { // In firefox, the initial tap hold doesnt' get treated as a click // In other browsers it does, so we need to make sure that initial click is ignored cssClass += ' checkedInitial'; } - var checkedAttribute = isChecked ? ' checked' : ''; - itemSelectionPanel.innerHTML = ''; - var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); + const checkedAttribute = isChecked ? ' checked' : ''; + itemSelectionPanel.innerHTML = ``; + const chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); chkItemSelect.addEventListener('change', onSelectionChange); } } function showSelectionCommands() { - var selectionCommandsPanel = currentSelectionCommandsPanel; + let selectionCommandsPanel = currentSelectionCommandsPanel; if (!selectionCommandsPanel) { @@ -124,19 +131,19 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo document.body.appendChild(selectionCommandsPanel); currentSelectionCommandsPanel = selectionCommandsPanel; - var html = ''; + let html = ''; html += ''; html += '

'; const moreIcon = 'more_vert'; - html += ''; + html += ``; selectionCommandsPanel.innerHTML = html; selectionCommandsPanel.querySelector('.btnCloseSelectionPanel').addEventListener('click', hideSelections); - var btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions'); + const btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions'); dom.addEventListener(btnSelectionPanelOptions, 'click', showMenuForSelectedItems, { passive: true }); } @@ -144,9 +151,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function alertText(options) { - return new Promise(function (resolve, reject) { + return new Promise((resolve, reject) => { - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert(options).then(resolve, resolve); }); }); @@ -154,24 +161,24 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function deleteItems(apiClient, itemIds) { - return new Promise(function (resolve, reject) { + return new Promise((resolve, reject) => { - var msg = globalize.translate('ConfirmDeleteItem'); - var title = globalize.translate('HeaderDeleteItem'); + let msg = globalize.translate('ConfirmDeleteItem'); + let title = globalize.translate('HeaderDeleteItem'); if (itemIds.length > 1) { msg = globalize.translate('ConfirmDeleteItems'); title = globalize.translate('HeaderDeleteItems'); } - require(['confirm'], function (confirm) { + import('confirm').then(({default: confirm}) => { - confirm(msg, title).then(function () { - var promises = itemIds.map(function (itemId) { + confirm(msg, title).then(() => { + const promises = itemIds.map(itemId => { apiClient.deleteItem(itemId); }); - Promise.all(promises).then(resolve, function () { + Promise.all(promises).then(resolve, () => { alertText(globalize.translate('ErrorDeletingItem')).then(reject, reject); }); @@ -183,11 +190,11 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function showMenuForSelectedItems(e) { - var apiClient = connectionManager.currentApiClient(); + const apiClient = connectionManager.currentApiClient(); - apiClient.getCurrentUser().then(function (user) { + apiClient.getCurrentUser().then(user => { - var menuItems = []; + const menuItems = []; menuItems.push({ name: globalize.translate('AddToCollection'), @@ -244,18 +251,18 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo icon: 'refresh' }); - require(['actionsheet'], function (actionsheet) { + import('actionsheet').then(({default: actionsheet}) => { actionsheet.show({ items: menuItems, positionTo: e.target, callback: function (id) { - var items = selectedItems.slice(0); - var serverId = apiClient.serverInfo().Id; + const items = selectedItems.slice(0); + const serverId = apiClient.serverInfo().Id; switch (id) { case 'addtocollection': - require(['collectionEditor'], function (collectionEditor) { - new collectionEditor().show({ + import('collectionEditor').then(({default: collectionEditor}) => { + new collectionEditor.showEditor({ items: items, serverId: serverId }); @@ -264,8 +271,8 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo dispatchNeedsRefresh(); break; case 'playlist': - require(['playlistEditor'], function (playlistEditor) { - new playlistEditor().show({ + import('playlistEditor').then(({default: playlistEditor}) => { + new playlistEditor.showEditor({ items: items, serverId: serverId }); @@ -282,21 +289,21 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo combineVersions(apiClient, items); break; case 'markplayed': - items.forEach(function (itemId) { + items.forEach(itemId => { apiClient.markPlayed(apiClient.getCurrentUserId(), itemId); }); hideSelections(); dispatchNeedsRefresh(); break; case 'markunplayed': - items.forEach(function (itemId) { + items.forEach(itemId => { apiClient.markUnplayed(apiClient.getCurrentUserId(), itemId); }); hideSelections(); dispatchNeedsRefresh(); break; case 'refresh': - require(['refreshDialog'], function (refreshDialog) { + import('refreshDialog').then(({default: refreshDialog}) => { new refreshDialog({ itemIds: items, serverId: serverId @@ -317,18 +324,18 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function dispatchNeedsRefresh() { - var elems = []; + const elems = []; - [].forEach.call(selectedElements, function (i) { + [].forEach.call(selectedElements, i => { - var container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer'); + const container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer'); - if (container && elems.indexOf(container) === -1) { + if (container && !elems.includes(container)) { elems.push(container); } }); - for (var i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].notifyRefreshNeeded(true); } } @@ -337,8 +344,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo if (selection.length < 2) { - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert({ + text: globalize.translate('PleaseSelectTwoItems') }); }); @@ -352,7 +360,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo type: 'POST', url: apiClient.getUrl('Videos/MergeVersions', { Ids: selection.join(',') }) - }).then(function () { + }).then(() => { loading.hide(); hideSelections(); @@ -362,9 +370,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function showSelections(initialCard) { - require(['emby-checkbox'], function () { - var cards = document.querySelectorAll('.card'); - for (var i = 0, length = cards.length; i < length; i++) { + import('emby-checkbox').then(() => { + const cards = document.querySelectorAll('.card'); + for (let i = 0, length = cards.length; i < length; i++) { showSelection(cards[i], initialCard === cards[i]); } @@ -375,13 +383,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function onContainerClick(e) { - var target = e.target; + const target = e.target; if (selectedItems.length) { - var card = dom.parentWithClass(target, 'card'); + const card = dom.parentWithClass(target, 'card'); if (card) { - var itemSelectionPanel = card.querySelector('.itemSelectionPanel'); + const itemSelectionPanel = card.querySelector('.itemSelectionPanel'); if (itemSelectionPanel) { return onItemSelectionPanelClick(e, itemSelectionPanel); } @@ -395,15 +403,15 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo document.addEventListener('viewbeforehide', hideSelections); - return function (options) { + export default function (options) { - var self = this; + const self = this; - var container = options.container; + const container = options.container; function onTapHold(e) { - var card = dom.parentWithClass(e.target, 'card'); + const card = dom.parentWithClass(e.target, 'card'); if (card) { @@ -423,13 +431,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo return e.changedTouches || e.targetTouches || e.touches; } - var touchTarget; - var touchStartTimeout; - var touchStartX; - var touchStartY; + let touchTarget; + let touchStartTimeout; + let touchStartX; + let touchStartY; function onTouchStart(e) { - var touch = getTouches(e)[0]; + const touch = getTouches(e)[0]; touchTarget = null; touchStartX = 0; touchStartY = 0; @@ -437,10 +445,10 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo if (touch) { touchStartX = touch.clientX; touchStartY = touch.clientY; - var element = touch.target; + const element = touch.target; if (element) { - var card = dom.parentWithClass(element, 'card'); + const card = dom.parentWithClass(element, 'card'); if (card) { @@ -459,13 +467,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function onTouchMove(e) { if (touchTarget) { - var touch = getTouches(e)[0]; - var deltaX; - var deltaY; + const touch = getTouches(e)[0]; + let deltaX; + let deltaY; if (touch) { - var touchEndX = touch.clientX || 0; - var touchEndY = touch.clientY || 0; + const touchEndX = touch.clientX || 0; + const touchEndY = touch.clientY || 0; deltaX = Math.abs(touchEndX - (touchStartX || 0)); deltaY = Math.abs(touchEndY - (touchStartY || 0)); } else { @@ -509,7 +517,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo return; } - var card = dom.parentWithClass(touchTarget, 'card'); + const card = dom.parentWithClass(touchTarget, 'card'); touchTarget = null; if (card) { @@ -556,12 +564,12 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo self.onContainerClick = onContainerClick; - self.destroy = function () { + self.destroy = () => { container.removeEventListener('click', onContainerClick); container.removeEventListener('contextmenu', onTapHold); - var element = container; + const element = container; dom.removeEventListener(element, 'touchstart', onTouchStart, { passive: true @@ -586,5 +594,6 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo passive: true }); }; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/components/nowPlayingBar/nowPlayingBar.js b/src/components/nowPlayingBar/nowPlayingBar.js index bc9c3c1a88..ec413cb7ae 100644 --- a/src/components/nowPlayingBar/nowPlayingBar.js +++ b/src/components/nowPlayingBar/nowPlayingBar.js @@ -1,31 +1,46 @@ -define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', 'layoutManager', 'playbackManager', 'nowPlayingHelper', 'apphost', 'dom', 'connectionManager', 'itemContextMenu', 'paper-icon-button-light', 'emby-ratingbutton'], function (require, datetime, itemHelper, events, browser, imageLoader, layoutManager, playbackManager, nowPlayingHelper, appHost, dom, connectionManager, itemContextMenu) { - 'use strict'; +import require from 'require'; +import datetime from 'datetime'; +import itemHelper from 'itemHelper'; +import events from 'events'; +import browser from 'browser'; +import imageLoader from 'imageLoader'; +import layoutManager from 'layoutManager'; +import playbackManager from 'playbackManager'; +import nowPlayingHelper from 'nowPlayingHelper'; +import appHost from 'apphost'; +import dom from 'dom'; +import connectionManager from 'connectionManager'; +import itemContextMenu from 'itemContextMenu'; +import 'paper-icon-button-light'; +import 'emby-ratingbutton'; - var currentPlayer; - var currentPlayerSupportedCommands = []; +/* eslint-disable indent */ - var currentTimeElement; - var nowPlayingImageElement; - var nowPlayingTextElement; - var nowPlayingUserData; - var muteButton; - var volumeSlider; - var volumeSliderContainer; - var playPauseButtons; - var positionSlider; - var toggleRepeatButton; - var toggleRepeatButtonIcon; + let currentPlayer; + let currentPlayerSupportedCommands = []; - var lastUpdateTime = 0; - var lastPlayerState = {}; - var isEnabled; - var currentRuntimeTicks = 0; + let currentTimeElement; + let nowPlayingImageElement; + let nowPlayingTextElement; + let nowPlayingUserData; + let muteButton; + let volumeSlider; + let volumeSliderContainer; + let playPauseButtons; + let positionSlider; + let toggleRepeatButton; + let toggleRepeatButtonIcon; - var isVisibilityAllowed = true; + let lastUpdateTime = 0; + let lastPlayerState = {}; + let isEnabled; + let currentRuntimeTicks = 0; + + let isVisibilityAllowed = true; function getNowPlayingBarHtml() { - var html = ''; + let html = ''; html += '
'; @@ -198,7 +213,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', if (currentPlayer) { - var newPercent = parseFloat(this.value); + const newPercent = parseFloat(this.value); playbackManager.seekPercent(newPercent, currentPlayer); } @@ -207,13 +222,13 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', positionSlider.getBubbleText = function (value) { - var state = lastPlayerState; + const state = lastPlayerState; if (!state || !state.NowPlayingItem || !currentRuntimeTicks) { return '--:--'; } - var ticks = currentRuntimeTicks; + let ticks = currentRuntimeTicks; ticks /= 100; ticks *= value; @@ -230,12 +245,12 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', function showRemoteControl() { - require(['appRouter'], function (appRouter) { + import('appRouter').then(({default: appRouter}) => { appRouter.showNowPlaying(); }); } - var nowPlayingBarElement; + let nowPlayingBarElement; function getNowPlayingBar() { if (nowPlayingBarElement) { @@ -243,10 +258,15 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', } return new Promise(function (resolve, reject) { - - require(['appFooter-shared', 'itemShortcuts', 'css!./nowPlayingBar.css', 'emby-slider'], function (appfooter, itemShortcuts) { - - var parentContainer = appfooter.element; + Promise.all([ + import('appFooter-shared'), + import('itemShortcuts'), + import('css!./nowPlayingBar.css'), + import('emby-slider') + ]) + .then(([appfooter, itemShortcuts]) => { + console.log(appfooter); + const parentContainer = appfooter.element; nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar'); if (nowPlayingBarElement) { @@ -294,13 +314,13 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', lastPlayerState = state; - var playerInfo = playbackManager.getPlayerInfo(); + const playerInfo = playbackManager.getPlayerInfo(); - var playState = state.PlayState || {}; + const playState = state.PlayState || {}; updatePlayPauseState(playState.IsPaused); - var supportedCommands = playerInfo.supportedCommands; + const supportedCommands = playerInfo.supportedCommands; currentPlayerSupportedCommands = supportedCommands; if (supportedCommands.indexOf('SetRepeatMode') === -1) { @@ -317,11 +337,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', positionSlider.disabled = !playState.CanSeek; // determines if both forward and backward buffer progress will be visible - var isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null; + const isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null; positionSlider.setIsClear(isProgressClear); } - var nowPlayingItem = state.NowPlayingItem || {}; + const nowPlayingItem = state.NowPlayingItem || {}; updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playbackManager.getBufferedRanges(player)); updateNowPlayingInfo(state); @@ -348,7 +368,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', if (positionSlider && !positionSlider.dragging) { if (runtimeTicks) { - var pct = positionTicks / runtimeTicks; + let pct = positionTicks / runtimeTicks; pct *= 100; positionSlider.value = pct; @@ -365,7 +385,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', if (currentTimeElement) { - var timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks); + let timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks); if (runtimeTicks) { timeText += ' / ' + datetime.getDisplayRunningTime(runtimeTicks); @@ -377,10 +397,10 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', function updatePlayerVolumeState(isMuted, volumeLevel) { - var supportedCommands = currentPlayerSupportedCommands; + const supportedCommands = currentPlayerSupportedCommands; - var showMuteButton = true; - var showVolumeSlider = true; + let showMuteButton = true; + let showVolumeSlider = true; if (supportedCommands.indexOf('ToggleMute') === -1) { showMuteButton = false; @@ -495,37 +515,37 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', return null; } - var currentImgUrl; + let currentImgUrl; function updateNowPlayingInfo(state) { - var nowPlayingItem = state.NowPlayingItem; + const nowPlayingItem = state.NowPlayingItem; - var textLines = nowPlayingItem ? nowPlayingHelper.getNowPlayingNames(nowPlayingItem) : []; + const textLines = nowPlayingItem ? nowPlayingHelper.getNowPlayingNames(nowPlayingItem) : []; if (textLines.length > 1) { textLines[1].secondary = true; } nowPlayingTextElement.innerHTML = textLines.map(function (nowPlayingName) { - var cssClass = nowPlayingName.secondary ? ' class="nowPlayingBarSecondaryText"' : ''; + const cssClass = nowPlayingName.secondary ? ' class="nowPlayingBarSecondaryText"' : ''; if (nowPlayingName.item) { - var nowPlayingText = getTextActionButton(nowPlayingName.item, nowPlayingName.text); + const nowPlayingText = getTextActionButton(nowPlayingName.item, nowPlayingName.text); return `
${nowPlayingText}
`; } - + let nowPlayingText = ''; return `
${nowPlayingText}
`; }).join(''); - var imgHeight = 70; + const imgHeight = 70; - var url = nowPlayingItem ? (seriesImageUrl(nowPlayingItem, { + const url = nowPlayingItem ? (seriesImageUrl(nowPlayingItem, { height: imgHeight }) || imageUrl(nowPlayingItem, { height: imgHeight })) : null; - var isRefreshing = false; + let isRefreshing = false; if (url !== currentImgUrl) { currentImgUrl = url; @@ -541,12 +561,12 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', if (nowPlayingItem.Id) { if (isRefreshing) { - var apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId); + const apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId); apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) { - var userData = item.UserData || {}; - var likes = userData.Likes == null ? '' : userData.Likes; - var contextButton = document.querySelector('.btnToggleContextMenu'); - var options = { + const userData = item.UserData || {}; + const likes = userData.Likes == null ? '' : userData.Likes; + const contextButton = document.querySelector('.btnToggleContextMenu'); + const options = { play: false, queue: false, positionTo: contextButton @@ -570,7 +590,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', function onPlaybackStart(e, state) { console.debug('nowplaying event: ' + e.type); - var player = this; + const player = this; onStateChanged.call(player, e, state); } @@ -581,7 +601,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', return; } - var player = this; + const player = this; updateRepeatModeDisplay(playbackManager.getRepeatMode(player)); } @@ -604,7 +624,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', // in the event of a stop->play command // Don't call getNowPlayingBar here because we don't want to end up creating it just to hide it - var elem = document.getElementsByClassName('nowPlayingBar')[0]; + const elem = document.getElementsByClassName('nowPlayingBar')[0]; if (elem) { slideDown(elem); @@ -614,7 +634,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', function onPlaybackStopped(e, state) { console.debug('nowplaying event: ' + e.type); - var player = this; + const player = this; if (player.isLocalPlayer) { if (state.NextMediaType !== 'Audio') { @@ -633,14 +653,14 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', return; } - var player = this; + const player = this; updatePlayPauseState(player.paused()); } function onStateChanged(event, state) { console.debug('nowplaying event: ' + event.type); - var player = this; + const player = this; if (!state.NowPlayingItem || layoutManager.tv) { hideNowPlayingBar(); @@ -671,21 +691,21 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', } // Try to avoid hammering the document with changes - var now = new Date().getTime(); + const now = new Date().getTime(); if ((now - lastUpdateTime) < 700) { return; } lastUpdateTime = now; - var player = this; + const player = this; currentRuntimeTicks = playbackManager.duration(player); updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks, playbackManager.getBufferedRanges(player)); } function releaseCurrentPlayer() { - var player = currentPlayer; + const player = currentPlayer; if (player) { events.off(player, 'playbackstart', onPlaybackStart); @@ -708,14 +728,14 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', return; } - var player = this; + const player = this; updatePlayerVolumeState(player.isMuted(), player.getVolume()); } function refreshFromPlayer(player) { - var state = playbackManager.getPlayerState(player); + const state = playbackManager.getPlayerState(player); onStateChanged.call(player, { type: 'init' }, state); } @@ -771,4 +791,5 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', } } }); -}); + +/* eslint-enable indent */ diff --git a/src/components/packagemanager.js b/src/components/packageManager.js similarity index 100% rename from src/components/packagemanager.js rename to src/components/packageManager.js diff --git a/src/components/playback/mediasession.js b/src/components/playback/mediasession.js index 5eac56b5ce..0f275c88f7 100644 --- a/src/components/playback/mediasession.js +++ b/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 () { diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js index 88d4e0d599..b74ca5fb3d 100644 --- a/src/components/playback/playbackmanager.js +++ b/src/components/playback/playbackmanager.js @@ -709,7 +709,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla function showPlaybackInfoErrorMessage(instance, errorCode, playNextTrack) { require(['alert'], function (alert) { - alert({ + alert.default({ text: globalize.translate('PlaybackError' + errorCode), title: globalize.translate('HeaderPlaybackError') }).then(function () { @@ -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) { diff --git a/src/components/playback/playerSelectionMenu.js b/src/components/playback/playerSelectionMenu.js index 91b1ddc20b..298ae0b07e 100644 --- a/src/components/playback/playerSelectionMenu.js +++ b/src/components/playback/playerSelectionMenu.js @@ -118,7 +118,7 @@ export function show(button) { }); - require(['actionsheet'], function (actionsheet) { + import('actionsheet').then(({default: actionsheet}) => { loading.hide(); @@ -153,8 +153,12 @@ export function show(button) { } function showActivePlayerMenu(playerInfo) { - - require(['dialogHelper', 'dialog', 'emby-checkbox', 'emby-button'], function (dialogHelper) { + Promise.all([ + import('dialogHelper'), + import('dialog'), + import('emby-checkbox'), + import('emby-button') + ]).then(([dialogHelper]) => { showActivePlayerMenuInternal(dialogHelper, playerInfo); }); } @@ -163,7 +167,7 @@ function disconnectFromPlayer(currentDeviceName) { if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) { - require(['dialog'], function (dialog) { + import('dialog').then(({default: dialog}) => { var menuItems = []; diff --git a/src/components/playbackSettings/playbackSettings.js b/src/components/playbackSettings/playbackSettings.js index 06d2e38d2c..9c7e20f9e1 100644 --- a/src/components/playbackSettings/playbackSettings.js +++ b/src/components/playbackSettings/playbackSettings.js @@ -1,31 +1,42 @@ -define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'qualityoptions', 'globalize', 'loading', 'connectionManager', 'dom', 'events', 'emby-select', 'emby-checkbox'], function (require, browser, appSettings, appHost, focusManager, qualityoptions, globalize, loading, connectionManager, dom, events) { - 'use strict'; +import browser from 'browser'; +import appSettings from 'appSettings'; +import appHost from 'apphost'; +import focusManager from 'focusManager'; +import qualityoptions from 'qualityoptions'; +import globalize from 'globalize'; +import loading from 'loading'; +import connectionManager from 'connectionManager'; +import events from 'events'; +import 'emby-select'; +import 'emby-checkbox'; + +/* eslint-disable indent */ function fillSkipLengths(select) { - var options = [5, 10, 15, 20, 25, 30]; + const options = [5, 10, 15, 20, 25, 30]; - select.innerHTML = options.map(function (option) { + select.innerHTML = options.map(option => { return { name: globalize.translate('ValueSeconds', option), value: option * 1000 }; - }).map(function (o) { - return ''; + }).map(o => { + return ``; }).join(''); } function populateLanguages(select, languages) { - var html = ''; + let html = ''; - html += "'; + html += ``; - for (var i = 0, length = languages.length; i < length; i++) { + for (let i = 0, length = languages.length; i < length; i++) { - var culture = languages[i]; + const culture = languages[i]; - html += "'; + html += ``; } select.innerHTML = html; @@ -33,7 +44,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality function setMaxBitrateIntoField(select, isInNetwork, mediatype) { - var options = mediatype === 'Audio' ? qualityoptions.getAudioQualityOptions({ + const options = mediatype === 'Audio' ? qualityoptions.getAudioQualityOptions({ currentMaxBitrate: appSettings.maxStreamingBitrate(isInNetwork, mediatype), isAutomaticBitrateEnabled: appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype), @@ -47,10 +58,10 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality }); - select.innerHTML = options.map(function (i) { + select.innerHTML = options.map(i => { // render empty string instead of 0 for the auto option - return ''; + return ``; }).join(''); if (appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype)) { @@ -62,23 +73,23 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality function fillChromecastQuality(select) { - var options = qualityoptions.getVideoQualityOptions({ + const options = qualityoptions.getVideoQualityOptions({ currentMaxBitrate: appSettings.maxChromecastBitrate(), isAutomaticBitrateEnabled: !appSettings.maxChromecastBitrate(), enableAuto: true }); - select.innerHTML = options.map(function (i) { + select.innerHTML = options.map(i => { // render empty string instead of 0 for the auto option - return ''; + return ``; }).join(''); select.value = appSettings.maxChromecastBitrate() || ''; } - function setMaxBitrateFromField(select, isInNetwork, mediatype, value) { + function setMaxBitrateFromField(select, isInNetwork, mediatype) { if (select.value) { appSettings.maxStreamingBitrate(isInNetwork, mediatype, select.value); @@ -110,7 +121,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality return; } - apiClient.getEndpointInfo().then(function (endpointInfo) { + apiClient.getEndpointInfo().then(endpointInfo => { if (endpointInfo.IsInNetwork) { @@ -133,7 +144,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality }); } - function showOrHideEpisodesField(context, user, apiClient) { + function showOrHideEpisodesField(context) { if (browser.tizen || browser.web0s) { context.querySelector('.fldEpisodeAutoPlay').classList.add('hide'); @@ -145,12 +156,12 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality function loadForm(context, user, userSettings, apiClient) { - var loggedInUserId = apiClient.getCurrentUserId(); - var userId = user.Id; + const loggedInUserId = apiClient.getCurrentUserId(); + const userId = user.Id; showHideQualityFields(context, user, apiClient); - apiClient.getCultures().then(function (allCultures) { + apiClient.getCultures().then(allCultures => { populateLanguages(context.querySelector('#selectAudioLanguage'), allCultures); @@ -159,7 +170,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality }); // hide cinema mode options if disabled at server level - apiClient.getNamedConfiguration('cinemamode').then(function (cinemaConfig) { + apiClient.getNamedConfiguration('cinemamode').then(cinemaConfig => { if (cinemaConfig.EnableIntrosForMovies || cinemaConfig.EnableIntrosForEpisodes) { context.querySelector('.cinemaModeOptions').classList.remove('hide'); @@ -204,18 +215,18 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality fillChromecastQuality(context.querySelector('.selectChromecastVideoQuality')); - var selectChromecastVersion = context.querySelector('.selectChromecastVersion'); + const selectChromecastVersion = context.querySelector('.selectChromecastVersion'); selectChromecastVersion.value = userSettings.chromecastVersion(); - var selectSkipForwardLength = context.querySelector('.selectSkipForwardLength'); + const selectSkipForwardLength = context.querySelector('.selectSkipForwardLength'); fillSkipLengths(selectSkipForwardLength); selectSkipForwardLength.value = userSettings.skipForwardLength(); - var selectSkipBackLength = context.querySelector('.selectSkipBackLength'); + const selectSkipBackLength = context.querySelector('.selectSkipBackLength'); fillSkipLengths(selectSkipBackLength); selectSkipBackLength.value = userSettings.skipBackLength(); - showOrHideEpisodesField(context, user, apiClient); + showOrHideEpisodesField(context); loading.hide(); } @@ -248,20 +259,20 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality loading.show(); - apiClient.getUser(userId).then(function (user) { + apiClient.getUser(userId).then(user => { - saveUser(context, user, userSettings, apiClient).then(function () { + saveUser(context, user, userSettings, apiClient).then(() => { loading.hide(); if (enableSaveConfirmation) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('SettingsSaved')); }); } events.trigger(instance, 'saved'); - }, function () { + }, () => { loading.hide(); }); }); @@ -269,14 +280,14 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality function onSubmit(e) { - var self = this; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userId = self.options.userId; - var userSettings = self.options.userSettings; + const self = this; + const apiClient = connectionManager.getApiClient(self.options.serverId); + const userId = self.options.userId; + const userSettings = self.options.userSettings; - userSettings.setUserInfo(userId, apiClient).then(function () { + userSettings.setUserInfo(userId, apiClient).then(() => { - var enableSaveConfirmation = self.options.enableSaveConfirmation; + const enableSaveConfirmation = self.options.enableSaveConfirmation; save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); }); @@ -289,9 +300,9 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality function embed(options, self) { - require(['text!./playbackSettings.template.html'], function (template) { + return import('text!./playbackSettings.template.html').then(({default: template}) => { - options.element.innerHTML = globalize.translateDocument(template, 'core'); + options.element.innerHTML = globalize.translateHtml(template, 'core'); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); @@ -307,43 +318,43 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality }); } - function PlaybackSettings(options) { + class PlaybackSettings { + constructor(options) { + this.options = options; + embed(options, this); + } - this.options = options; + loadData() { - embed(options, this); + const self = this; + const context = self.options.element; + + loading.show(); + + const userId = self.options.userId; + const apiClient = connectionManager.getApiClient(self.options.serverId); + const userSettings = self.options.userSettings; + + apiClient.getUser(userId).then(user => { + + userSettings.setUserInfo(userId, apiClient).then(() => { + + self.dataLoaded = true; + + loadForm(context, user, userSettings, apiClient); + }); + }); + } + + submit() { + onSubmit.call(this); + } + + destroy() { + + this.options = null; + } } - PlaybackSettings.prototype.loadData = function () { - - var self = this; - var context = self.options.element; - - loading.show(); - - var userId = self.options.userId; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userSettings = self.options.userSettings; - - apiClient.getUser(userId).then(function (user) { - - userSettings.setUserInfo(userId, apiClient).then(function () { - - self.dataLoaded = true; - - loadForm(context, user, userSettings, apiClient); - }); - }); - }; - - PlaybackSettings.prototype.submit = function () { - onSubmit.call(this); - }; - - PlaybackSettings.prototype.destroy = function () { - - this.options = null; - }; - - return PlaybackSettings; -}); +/* eslint-enable indent */ +export default PlaybackSettings; diff --git a/src/components/playerstats/playerstats.js b/src/components/playerstats/playerstats.js index a65baf3553..ca9d6dc20e 100644 --- a/src/components/playerstats/playerstats.js +++ b/src/components/playerstats/playerstats.js @@ -1,9 +1,19 @@ -define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlayManager', 'playMethodHelper', 'layoutManager', 'serverNotifications', 'paper-icon-button-light', 'css!./playerstats'], function (events, globalize, playbackManager, connectionManager, syncPlayManager, playMethodHelper, layoutManager, serverNotifications) { - 'use strict'; +import events from 'events'; +import globalize from 'globalize'; +import playbackManager from 'playbackManager'; +import connectionManager from 'connectionManager'; +import syncPlayManager from 'syncPlayManager'; +import playMethodHelper from 'playMethodHelper'; +import layoutManager from 'layoutManager'; +import serverNotifications from 'serverNotifications'; +import 'paper-icon-button-light'; +import 'css!./playerstats'; + +/* eslint-disable indent */ function init(instance) { - var parent = document.createElement('div'); + const parent = document.createElement('div'); parent.classList.add('playerStats'); @@ -13,7 +23,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay parent.classList.add('hide'); - var button; + let button; if (layoutManager.tv) { button = ''; @@ -21,7 +31,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay button = ''; } - var contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content'; + const contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content'; parent.innerHTML = '
' + button + '
'; @@ -44,9 +54,9 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay elem.querySelector('.playerStats-stats').innerHTML = categories.map(function (category) { - var categoryHtml = ''; + let categoryHtml = ''; - var stats = category.stats; + const stats = category.stats; if (stats.length && category.name) { categoryHtml += '
'; @@ -62,11 +72,11 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay categoryHtml += '
'; } - for (var i = 0, length = stats.length; i < length; i++) { + for (let i = 0, length = stats.length; i < length; i++) { categoryHtml += '
'; - var stat = stats[i]; + const stat = stats[i]; categoryHtml += '
'; categoryHtml += stat.label; @@ -86,13 +96,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay function getSession(instance, player) { - var now = new Date().getTime(); + const now = new Date().getTime(); if ((now - (instance.lastSessionTime || 0)) < 10000) { return Promise.resolve(instance.lastSession); } - var apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId); + const apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId); return apiClient.getSessions({ deviceId: apiClient.deviceId() @@ -114,12 +124,12 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay } function getTranscodingStats(session, player, displayPlayMethod) { - var sessionStats = []; + const sessionStats = []; - var videoCodec; - var audioCodec; - var totalBitrate; - var audioChannels; + let videoCodec; + let audioCodec; + let totalBitrate; + let audioChannels; if (session.TranscodingInfo) { @@ -208,11 +218,11 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay function getMediaSourceStats(session, player, displayPlayMethod) { - var sessionStats = []; + const sessionStats = []; - var mediaSource = playbackManager.currentMediaSource(player) || {}; - var totalBitrate = mediaSource.Bitrate; - var mediaFileSize = mediaSource.Size; + const mediaSource = playbackManager.currentMediaSource(player) || {}; + const totalBitrate = mediaSource.Bitrate; + const mediaFileSize = mediaSource.Size; if (mediaSource.Container) { sessionStats.push({ @@ -236,26 +246,26 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay }); } - var mediaStreams = mediaSource.MediaStreams || []; - var videoStream = mediaStreams.filter(function (s) { + const mediaStreams = mediaSource.MediaStreams || []; + const videoStream = mediaStreams.filter(function (s) { return s.Type === 'Video'; })[0] || {}; - var videoCodec = videoStream.Codec; + const videoCodec = videoStream.Codec; - var audioStreamIndex = playbackManager.getAudioStreamIndex(player); - var audioStream = playbackManager.audioTracks(player).filter(function (s) { + const audioStreamIndex = playbackManager.getAudioStreamIndex(player); + const audioStream = playbackManager.audioTracks(player).filter(function (s) { return s.Type === 'Audio' && s.Index === audioStreamIndex; })[0] || {}; - var audioCodec = audioStream.Codec; - var audioChannels = audioStream.Channels; + const audioCodec = audioStream.Codec; + const audioChannels = audioStream.Channels; - var videoInfos = []; + const videoInfos = []; if (videoCodec) { videoInfos.push(videoCodec.toUpperCase()); @@ -279,7 +289,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay }); } - var audioInfos = []; + const audioInfos = []; if (audioCodec) { audioInfos.push(audioCodec.toUpperCase()); @@ -328,8 +338,8 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay } function getSyncPlayStats() { - var syncStats = []; - var stats = syncPlayManager.getStats(); + const syncStats = []; + const stats = syncPlayManager.getStats(); syncStats.push({ label: globalize.translate('LabelSyncPlayTimeOffset'), @@ -351,18 +361,18 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay function getStats(instance, player) { - var statsPromise = player.getStats ? player.getStats() : Promise.resolve({}); - var sessionPromise = getSession(instance, player); + const statsPromise = player.getStats ? player.getStats() : Promise.resolve({}); + const sessionPromise = getSession(instance, player); return Promise.all([statsPromise, sessionPromise]).then(function (responses) { - var playerStatsResult = responses[0]; - var playerStats = playerStatsResult.categories || []; - var session = responses[1]; + const playerStatsResult = responses[0]; + const playerStats = playerStatsResult.categories || []; + const session = responses[1]; - var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); + const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); - var baseCategory = { + const baseCategory = { stats: [], name: 'Playback Info' }; @@ -377,13 +387,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay value: player.name }); - var categories = []; + const categories = []; categories.push(baseCategory); - for (var i = 0, length = playerStats.length; i < length; i++) { + for (let i = 0, length = playerStats.length; i < length; i++) { - var category = playerStats[i]; + const category = playerStats[i]; if (category.type === 'audio') { category.name = 'Audio Info'; } else if (category.type === 'video') { @@ -418,7 +428,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay function renderPlayerStats(instance, player) { - var now = new Date().getTime(); + const now = new Date().getTime(); if ((now - (instance.lastRender || 0)) < 700) { return; @@ -428,7 +438,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay getStats(instance, player).then(function (stats) { - var elem = instance.element; + const elem = instance.element; if (!elem) { return; } @@ -439,7 +449,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay function bindEvents(instance, player) { - var localOnTimeUpdate = function () { + const localOnTimeUpdate = function () { renderPlayerStats(instance, player); }; @@ -449,14 +459,15 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay function unbindEvents(instance, player) { - var localOnTimeUpdate = instance.onTimeUpdate; + const localOnTimeUpdate = instance.onTimeUpdate; if (localOnTimeUpdate) { events.off(player, 'timeupdate', localOnTimeUpdate); } } - function PlayerStats(options) { +class PlayerStats { + constructor(options) { this.options = options; @@ -465,13 +476,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay this.enabled(true); } - PlayerStats.prototype.enabled = function (enabled) { + enabled(enabled) { if (enabled == null) { return this._enabled; } - var options = this.options; + const options = this.options; if (!options) { return; @@ -485,15 +496,15 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay this.element.classList.add('hide'); unbindEvents(this, options.player); } - }; + } - PlayerStats.prototype.toggle = function () { + toggle() { this.enabled(!this.enabled()); - }; + } - PlayerStats.prototype.destroy = function () { + destroy() { - var options = this.options; + const options = this.options; if (options) { @@ -501,12 +512,14 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay unbindEvents(this, options.player); } - var elem = this.element; + const elem = this.element; if (elem) { elem.parentNode.removeChild(elem); this.element = null; } - }; + } +} - return PlayerStats; -}); +/* eslint-enable indent */ + +export default PlayerStats; diff --git a/src/components/playlisteditor/playlisteditor.js b/src/components/playlisteditor/playlisteditor.js index 56d7142ad3..7b1e915e1f 100644 --- a/src/components/playlisteditor/playlisteditor.js +++ b/src/components/playlisteditor/playlisteditor.js @@ -1,13 +1,28 @@ -define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', 'connectionManager', 'userSettings', 'appRouter', 'globalize', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (dom, shell, dialogHelper, loading, layoutManager, playbackManager, connectionManager, userSettings, appRouter, globalize) { - 'use strict'; +import dom from 'dom'; +import dialogHelper from 'dialogHelper'; +import loading from 'loading'; +import layoutManager from 'layoutManager'; +import playbackManager from 'playbackManager'; +import connectionManager from 'connectionManager'; +import * as userSettings from 'userSettings'; +import appRouter from 'appRouter'; +import globalize from 'globalize'; +import 'emby-input'; +import 'paper-icon-button-light'; +import 'emby-select'; +import 'material-icons'; +import 'css!./../formdialog'; +import 'emby-button'; - var currentServerId; +/* eslint-disable indent */ + + let currentServerId; function onSubmit(e) { - var panel = dom.parentWithClass(this, 'dialog'); + const panel = dom.parentWithClass(this, 'dialog'); - var playlistId = panel.querySelector('#selectPlaylistToAddTo').value; - var apiClient = connectionManager.getApiClient(currentServerId); + const playlistId = panel.querySelector('#selectPlaylistToAddTo').value; + const apiClient = connectionManager.getApiClient(currentServerId); if (playlistId) { userSettings.set('playlisteditor-lastplaylistid', playlistId); @@ -23,7 +38,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan function createPlaylist(apiClient, dlg) { loading.show(); - var url = apiClient.getUrl('Playlists', { + const url = apiClient.getUrl('Playlists', { Name: dlg.querySelector('#txtNewPlaylistName').value, Ids: dlg.querySelector('.fldSelectedItemIds').value || '', userId: apiClient.getCurrentUserId() @@ -34,10 +49,10 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan type: 'POST', url: url, dataType: 'json' - }).then(function (result) { + }).then(result => { loading.hide(); - var id = result.Id; + const id = result.Id; dlg.submitted = true; dialogHelper.close(dlg); redirectToPlaylist(apiClient, id); @@ -49,7 +64,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan } function addToPlaylist(apiClient, dlg, id) { - var itemIds = dlg.querySelector('.fldSelectedItemIds').value || ''; + const itemIds = dlg.querySelector('.fldSelectedItemIds').value || ''; if (id === 'queue') { playbackManager.queue({ @@ -63,7 +78,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan loading.show(); - var url = apiClient.getUrl('Playlists/' + id + '/Items', { + const url = apiClient.getUrl(`Playlists/${id}/Items`, { Ids: itemIds, userId: apiClient.getCurrentUserId() }); @@ -72,7 +87,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan type: 'POST', url: url - }).then(function () { + }).then(() => { loading.hide(); dlg.submitted = true; @@ -85,36 +100,36 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan } function populatePlaylists(editorOptions, panel) { - var select = panel.querySelector('#selectPlaylistToAddTo'); + const select = panel.querySelector('#selectPlaylistToAddTo'); loading.hide(); panel.querySelector('.newPlaylistInfo').classList.add('hide'); - var options = { + const options = { Recursive: true, IncludeItemTypes: 'Playlist', SortBy: 'SortName', EnableTotalRecordCount: false }; - var apiClient = connectionManager.getApiClient(currentServerId); - apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) { - var html = ''; + const apiClient = connectionManager.getApiClient(currentServerId); + apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => { + let html = ''; if (editorOptions.enableAddToPlayQueue !== false && playbackManager.isPlaying()) { - html += ''; + html += ``; } - html += ''; + html += ``; - html += result.Items.map(function (i) { - return ''; + html += result.Items.map(i => { + return ``; }); select.innerHTML = html; - var defaultValue = editorOptions.defaultValue; + let defaultValue = editorOptions.defaultValue; if (!defaultValue) { defaultValue = userSettings.get('playlisteditor-lastplaylistid') || ''; } @@ -132,29 +147,29 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan } function getEditorHtml(items) { - var html = ''; + let html = ''; html += '
'; html += '
'; html += '
'; html += '
'; - var autoFocus = items.length ? ' autofocus' : ''; - html += ''; + let autoFocus = items.length ? ' autofocus' : ''; + html += ``; html += '
'; html += '
'; html += '
'; autoFocus = items.length ? '' : ' autofocus'; - html += ''; + html += ``; html += '
'; // newPlaylistInfo html += '
'; html += '
'; - html += ''; + html += ``; html += '
'; html += ''; @@ -187,7 +202,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan } else { content.querySelector('.fldSelectPlaylist').classList.add('hide'); - var selectPlaylistToAddTo = content.querySelector('#selectPlaylistToAddTo'); + const selectPlaylistToAddTo = content.querySelector('#selectPlaylistToAddTo'); selectPlaylistToAddTo.innerHTML = ''; selectPlaylistToAddTo.value = ''; triggerChange(selectPlaylistToAddTo); @@ -195,72 +210,70 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan } function centerFocus(elem, horiz, on) { - require(['scrollHelper'], function (scrollHelper) { - var fn = on ? 'on' : 'off'; + import('scrollHelper').then(scrollHelper => { + const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); } - function PlaylistEditor() { + export class showEditor { + constructor(options) { + const items = options.items || {}; + currentServerId = options.serverId; + const dialogOptions = { + removeOnClose: true, + scrollY: false + }; + + if (layoutManager.tv) { + dialogOptions.size = 'fullscreen'; + } else { + dialogOptions.size = 'small'; + } + + const dlg = dialogHelper.createDialog(dialogOptions); + + dlg.classList.add('formDialog'); + + let html = ''; + const title = globalize.translate('HeaderAddToPlaylist'); + + html += '
'; + html += ''; + html += '

'; + html += title; + html += '

'; + + html += '
'; + + html += getEditorHtml(items); + + dlg.innerHTML = html; + + initEditor(dlg, options, items); + + dlg.querySelector('.btnCancel').addEventListener('click', () => { + dialogHelper.close(dlg); + }); + + if (layoutManager.tv) { + centerFocus(dlg.querySelector('.formDialogContent'), false, true); + } + + return dialogHelper.open(dlg).then(() => { + if (layoutManager.tv) { + centerFocus(dlg.querySelector('.formDialogContent'), false, false); + } + + if (dlg.submitted) { + return Promise.resolve(); + } + + return Promise.reject(); + }); + } } - PlaylistEditor.prototype.show = function (options) { - var items = options.items || {}; - currentServerId = options.serverId; - - var dialogOptions = { - removeOnClose: true, - scrollY: false - }; - - if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; - } else { - dialogOptions.size = 'small'; - } - - var dlg = dialogHelper.createDialog(dialogOptions); - - dlg.classList.add('formDialog'); - - var html = ''; - var title = globalize.translate('HeaderAddToPlaylist'); - - html += '
'; - html += ''; - html += '

'; - html += title; - html += '

'; - - html += '
'; - - html += getEditorHtml(items); - - dlg.innerHTML = html; - - initEditor(dlg, options, items); - - dlg.querySelector('.btnCancel').addEventListener('click', function () { - dialogHelper.close(dlg); - }); - - if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, true); - } - - return dialogHelper.open(dlg).then(function () { - if (layoutManager.tv) { - centerFocus(dlg.querySelector('.formDialogContent'), false, false); - } - - if (dlg.submitted) { - return Promise.resolve(); - } - - return Promise.reject(); - }); - }; - - return PlaylistEditor; -}); +/* eslint-enable indent */ +export default showEditor; diff --git a/src/components/prompt/prompt.js b/src/components/prompt/prompt.js index a76083cf04..f3bf72f8f2 100644 --- a/src/components/prompt/prompt.js +++ b/src/components/prompt/prompt.js @@ -1,12 +1,24 @@ -define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'dom', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle'], function(browser, dialogHelper, layoutManager, scrollHelper, globalize, dom, require) { - 'use strict'; +import browser from 'browser'; +import dialogHelper from 'dialogHelper'; +import layoutManager from 'layoutManager'; +import scrollHelper from 'scrollHelper'; +import globalize from 'globalize'; +import dom from 'dom'; +import 'material-icons'; +import 'emby-button'; +import 'paper-icon-button-light'; +import 'emby-input'; +import 'formDialogStyle'; + +/* eslint-disable indent */ +export default (() => { function replaceAll(str, find, replace) { return str.split(find).join(replace); } function setInputProperties(dlg, options) { - var txtInput = dlg.querySelector('#txtInput'); + const txtInput = dlg.querySelector('#txtInput'); if (txtInput.label) { txtInput.label(options.label || ''); @@ -17,7 +29,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', } function showDialog(options, template) { - var dialogOptions = { + const dialogOptions = { removeOnClose: true, scrollY: false }; @@ -26,7 +38,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', dialogOptions.size = 'fullscreen'; } - var dlg = dialogHelper.createDialog(dialogOptions); + const dlg = dialogHelper.createDialog(dialogOptions); dlg.classList.add('formDialog'); @@ -39,7 +51,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', dlg.classList.add('dialog-fullscreen-lowres'); } - dlg.querySelector('.btnCancel').addEventListener('click', function (e) { + dlg.querySelector('.btnCancel').addEventListener('click', () => { dialogHelper.close(dlg); }); @@ -53,16 +65,16 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', setInputProperties(dlg, options); - var submitValue; + let submitValue; - dlg.querySelector('form').addEventListener('submit', function (e) { + dlg.querySelector('form').addEventListener('submit', e => { submitValue = dlg.querySelector('#txtInput').value; e.preventDefault(); e.stopPropagation(); // Important, don't close the dialog until after the form has completed submitting, or it will cause an error in Chrome - setTimeout(function () { + setTimeout(() => { dialogHelper.close(dlg); }, 300); @@ -71,9 +83,9 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', dlg.querySelector('.submitText').innerHTML = options.confirmText || globalize.translate('ButtonOk'); - dlg.style.minWidth = (Math.min(400, dom.getWindowSize().innerWidth - 50)) + 'px'; + dlg.style.minWidth = `${Math.min(400, dom.getWindowSize().innerWidth - 50)}px`; - return dialogHelper.open(dlg).then(function () { + return dialogHelper.open(dlg).then(() => { if (layoutManager.tv) { scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false); } @@ -87,7 +99,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', } if ((browser.tv || browser.xboxOne) && window.confirm) { - return function (options) { + return options => { if (typeof options === 'string') { options = { label: '', @@ -95,8 +107,8 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', }; } - var label = replaceAll(options.label || '', '
', '\n'); - var result = prompt(label, options.text || ''); + const label = replaceAll(options.label || '', '
', '\n'); + const result = prompt(label, options.text || ''); if (result) { return Promise.resolve(result); @@ -105,9 +117,9 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', } }; } else { - return function (options) { - return new Promise(function (resolve, reject) { - require(['text!./prompt.template.html'], function (template) { + return options => { + return new Promise((resolve, reject) => { + import('text!./prompt.template.html').then(({default: template}) => { if (typeof options === 'string') { options = { title: '', @@ -119,4 +131,5 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', }); }; } -}); +})(); +/* eslint-enable indent */ diff --git a/src/components/prompt/prompt.template.html b/src/components/prompt/prompt.template.html index 981fa9f102..a07629ae7e 100644 --- a/src/components/prompt/prompt.template.html +++ b/src/components/prompt/prompt.template.html @@ -2,12 +2,12 @@ +

-
@@ -19,7 +19,6 @@
-
diff --git a/src/components/recordingcreator/recordingcreator.js b/src/components/recordingcreator/recordingcreator.js index ae26d0debc..d18d5fcb6c 100644 --- a/src/components/recordingcreator/recordingcreator.js +++ b/src/components/recordingcreator/recordingcreator.js @@ -156,7 +156,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c var html = ''; - html += globalize.translateDocument(template, 'core'); + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; diff --git a/src/components/recordingcreator/recordingeditor.js b/src/components/recordingcreator/recordingeditor.js index 86c731ad26..c3f40fcddb 100644 --- a/src/components/recordingcreator/recordingeditor.js +++ b/src/components/recordingcreator/recordingeditor.js @@ -116,7 +116,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c var html = ''; - html += globalize.translateDocument(template, 'core'); + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; diff --git a/src/components/recordingcreator/recordingfields.js b/src/components/recordingcreator/recordingfields.js index b4cbdfab0a..84348fcfbc 100644 --- a/src/components/recordingcreator/recordingfields.js +++ b/src/components/recordingcreator/recordingfields.js @@ -219,7 +219,7 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa require(['text!./recordingfields.template.html'], function (template) { var options = self.options; var context = options.parent; - context.innerHTML = globalize.translateDocument(template, 'core'); + context.innerHTML = globalize.translateHtml(template, 'core'); context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self)); context.querySelector('.seriesRecordingButton').addEventListener('click', onRecordSeriesChange.bind(self)); diff --git a/src/components/recordingcreator/recordinghelper.js b/src/components/recordingcreator/recordinghelper.js index a071cb2032..c773368f2d 100644 --- a/src/components/recordingcreator/recordinghelper.js +++ b/src/components/recordingcreator/recordinghelper.js @@ -34,7 +34,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi require(['confirm'], function (confirm) { - confirm({ + confirm.default({ text: globalize.translate('MessageConfirmRecordingCancellation'), primary: 'delete', @@ -59,7 +59,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi require(['confirm'], function (confirm) { - confirm({ + confirm.default({ text: globalize.translate('MessageConfirmRecordingCancellation'), primary: 'delete', diff --git a/src/components/recordingcreator/seriesrecordingeditor.js b/src/components/recordingcreator/seriesrecordingeditor.js index 62accd5b63..a101ce53ec 100644 --- a/src/components/recordingcreator/seriesrecordingeditor.js +++ b/src/components/recordingcreator/seriesrecordingeditor.js @@ -168,7 +168,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c var dlg = options.context; dlg.classList.add('hide'); - dlg.innerHTML = globalize.translateDocument(template, 'core'); + dlg.innerHTML = globalize.translateHtml(template, 'core'); dlg.querySelector('.formDialogHeader').classList.add('hide'); dlg.querySelector('.formDialogFooter').classList.add('hide'); @@ -221,7 +221,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c var html = ''; - html += globalize.translateDocument(template, 'core'); + html += globalize.translateHtml(template, 'core'); dlg.innerHTML = html; diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index 089915a834..fe239e9579 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -175,7 +175,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; }); } else { - backdrop.clear(); + backdrop.clearBackdrop(); context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; } } @@ -196,7 +196,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL context.querySelector('.nowPlayingPageImage').classList.remove('nowPlayingPageImageAudio'); } } else { - imgContainer.innerHTML = '
'; + imgContainer.innerHTML = '
'; } } @@ -589,7 +589,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL require(['playlistEditor'], function (playlistEditor) { getSaveablePlaylistItems().then(function (items) { var serverId = items.length ? items[0].ServerId : ApiClient.serverId(); - new playlistEditor().show({ + new playlistEditor.showEditor({ items: items.map(function (i) { return i.Id; }), diff --git a/src/components/search/searchfields.js b/src/components/search/searchfields.js index 53ab187a81..b0c59dcf4a 100644 --- a/src/components/search/searchfields.js +++ b/src/components/search/searchfields.js @@ -1,10 +1,20 @@ -define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPicker', 'emby-input', 'flexStyles', 'material-icons', 'css!./searchfields'], function (layoutManager, globalize, require, events, browser, AlphaPicker) { - 'use strict'; +import layoutManager from 'layoutManager'; +import globalize from 'globalize'; +import require from 'require'; +import events from 'events'; +import browser from 'browser'; +import AlphaPicker from 'alphaPicker'; +import 'emby-input'; +import 'flexStyles'; +import 'material-icons'; +import 'css!./searchfields'; + +/* eslint-disable indent */ function onSearchTimeout() { - var instance = this; - var value = instance.nextSearchValue; + const instance = this; + let value = instance.nextSearchValue; value = (value || '').trim(); events.trigger(instance, 'search', [value]); @@ -22,14 +32,14 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick function onAlphaValueClicked(e) { - var value = e.detail.value; - var searchFieldsInstance = this; + const value = e.detail.value; + const searchFieldsInstance = this; - var txtSearch = searchFieldsInstance.options.element.querySelector('.searchfields-txtSearch'); + const txtSearch = searchFieldsInstance.options.element.querySelector('.searchfields-txtSearch'); if (value === 'backspace') { - var val = txtSearch.value; + const val = txtSearch.value; txtSearch.value = val.length ? val.substring(0, val.length - 1) : ''; } else { @@ -43,7 +53,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick function initAlphaPicker(alphaPickerElement, instance) { - instance.alphaPicker = new AlphaPicker({ + instance.alphaPicker = new AlphaPicker.default({ element: alphaPickerElement, mode: 'keyboard' }); @@ -53,16 +63,16 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick function onSearchInput(e) { - var value = e.target.value; - var searchFieldsInstance = this; + const value = e.target.value; + const searchFieldsInstance = this; triggerSearch(searchFieldsInstance, value); } function embed(elem, instance, options) { - require(['text!./searchfields.template.html'], function (template) { + import('text!./searchfields.template.html').then(({default: template}) => { - var html = globalize.translateDocument(template, 'core'); + let html = globalize.translateHtml(template, 'core'); if (browser.tizen || browser.orsay) { html = html.replace(''; + let itemHtml = ''; return itemHtml; }).join(''); - var searchSuggestions = context.querySelector('.searchSuggestions'); + const searchSuggestions = context.querySelector('.searchSuggestions'); searchSuggestions.querySelector('.searchSuggestionsList').innerHTML = html; if (result.Items.length) { @@ -49,9 +59,9 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager', }); } - var allowSearch = true; + let allowSearch = true; - var queryIncludeItemTypes = query.IncludeItemTypes; + const queryIncludeItemTypes = query.IncludeItemTypes; if (instance.options.collectionType === 'tvshows') { if (query.IncludeArtists) { @@ -127,7 +137,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager', query.EnableTotalRecordCount = false; query.ImageTypeLimit = 1; - var methodName = 'getItems'; + let methodName = 'getItems'; if (!query.IncludeMedia) { if (query.IncludePeople) { @@ -566,9 +576,9 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager', section = context.querySelector(section); - var items = result.Items || result.SearchHints; + const items = result.Items || result.SearchHints; - var itemsContainer = section.querySelector('.itemsContainer'); + const itemsContainer = section.querySelector('.itemsContainer'); cardBuilder.buildCards(items, Object.assign({ @@ -588,20 +598,20 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager', } function replaceAll(originalString, strReplace, strWith) { - var reg = new RegExp(strReplace, 'ig'); + const reg = new RegExp(strReplace, 'ig'); return originalString.replace(reg, strWith); } function embed(elem, instance, options) { - require(['text!./searchresults.template.html'], function (template) { + import('text!./searchresults.template.html').then(({default: template}) => { if (!enableScrollX()) { template = replaceAll(template, 'data-horizontal="true"', 'data-horizontal="false"'); template = replaceAll(template, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap'); } - var html = globalize.translateDocument(template, 'core'); + const html = globalize.translateHtml(template, 'core'); elem.innerHTML = html; @@ -610,28 +620,29 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager', }); } - function SearchResults(options) { +class SearchResults { + constructor(options) { this.options = options; embed(options.element, this, options); } + search(value) { - SearchResults.prototype.search = function (value) { - - var apiClient = connectionManager.getApiClient(this.options.serverId); + const apiClient = connectionManager.getApiClient(this.options.serverId); search(this, apiClient, this.options.element, value); - }; + } + destroy() { - SearchResults.prototype.destroy = function () { - - var options = this.options; + const options = this.options; if (options) { options.element.classList.remove('searchFields'); } this.options = null; - }; + } +} - return SearchResults; -}); +export default SearchResults; + +/* eslint-enable indent */ diff --git a/src/components/serverRestartDialog.js b/src/components/serverRestartDialog.js deleted file mode 100644 index 4c52d5f01b..0000000000 --- a/src/components/serverRestartDialog.js +++ /dev/null @@ -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 += ''; - } - - 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; -}); diff --git a/src/components/settingshelper.js b/src/components/settingshelper.js new file mode 100644 index 0000000000..3db638c7ad --- /dev/null +++ b/src/components/settingshelper.js @@ -0,0 +1,22 @@ +import globalize from 'globalize'; + +/** + * Helper for handling settings. + * @module components/settingsHelper + */ + +export function populateLanguages(select, languages) { + let html = ''; + + html += "'; + for (let i = 0, length = languages.length; i < length; i++) { + const culture = languages[i]; + html += "'; + } + + select.innerHTML = html; +} + +export default { + populateLanguages: populateLanguages +}; diff --git a/src/components/shortcuts.js b/src/components/shortcuts.js index ab606ab1d2..f105d6c599 100644 --- a/src/components/shortcuts.js +++ b/src/components/shortcuts.js @@ -1,18 +1,30 @@ -define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'globalize', 'loading', 'dom', 'recordingHelper'], function (playbackManager, inputManager, connectionManager, appRouter, globalize, loading, dom, recordingHelper) { - 'use strict'; +/* eslint-disable indent */ + +/** + * Module shortcuts. + * @module components/shortcuts + */ + +import playbackManager from 'playbackManager'; +import inputManager from 'inputManager'; +import connectionManager from 'connectionManager'; +import appRouter from 'appRouter'; +import globalize from 'globalize'; +import dom from 'dom'; +import recordingHelper from 'recordingHelper'; function playAllFromHere(card, serverId, queue) { - var parent = card.parentNode; - var className = card.classList.length ? ('.' + card.classList[0]) : ''; - var cards = parent.querySelectorAll(className + '[data-id]'); + const parent = card.parentNode; + const className = card.classList.length ? (`.${card.classList[0]}`) : ''; + const cards = parent.querySelectorAll(`${className}[data-id]`); - var ids = []; + const ids = []; - var foundCard = false; - var startIndex; + let foundCard = false; + let startIndex; - for (var i = 0, length = cards.length; i < length; i++) { + for (let i = 0, length = cards.length; i < length; i++) { if (cards[i] === card) { foundCard = true; startIndex = i; @@ -22,12 +34,12 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl } } - var itemsContainer = dom.parentWithClass(card, 'itemsContainer'); + const itemsContainer = dom.parentWithClass(card, 'itemsContainer'); if (itemsContainer && itemsContainer.fetchData) { - var queryOptions = queue ? { StartIndex: startIndex } : {}; + const queryOptions = queue ? { StartIndex: startIndex } : {}; - return itemsContainer.fetchData(queryOptions).then(function (result) { + return itemsContainer.fetchData(queryOptions).then(result => { if (queue) { return playbackManager.queue({ @@ -64,7 +76,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl function showProgramDialog(item) { - require(['recordingCreator'], function (recordingCreator) { + import('recordingCreator').then(({default:recordingCreator}) => { recordingCreator.show(item.Id, item.ServerId); }); @@ -73,11 +85,11 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl function getItem(button) { button = dom.parentWithAttribute(button, 'data-id'); - var serverId = button.getAttribute('data-serverid'); - var id = button.getAttribute('data-id'); - var type = button.getAttribute('data-type'); + const serverId = button.getAttribute('data-serverid'); + const id = button.getAttribute('data-id'); + const type = button.getAttribute('data-type'); - var apiClient = connectionManager.getApiClient(serverId); + const apiClient = connectionManager.getApiClient(serverId); if (type === 'Timer') { return apiClient.getLiveTvTimer(id); @@ -99,19 +111,19 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl function showContextMenu(card, options) { - getItem(card).then(function (item) { + getItem(card).then(item => { - var playlistId = card.getAttribute('data-playlistid'); - var collectionId = card.getAttribute('data-collectionid'); + const playlistId = card.getAttribute('data-playlistid'); + const collectionId = card.getAttribute('data-collectionid'); if (playlistId) { - var elem = dom.parentWithAttribute(card, 'data-playlistitemid'); + const elem = dom.parentWithAttribute(card, 'data-playlistitemid'); item.PlaylistItemId = elem ? elem.getAttribute('data-playlistitemid') : null; } - require(['itemContextMenu'], function (itemContextMenu) { + import('itemContextMenu').then(({default: itemContextMenu}) => { - connectionManager.getApiClient(item.ServerId).getCurrentUser().then(function (user) { + connectionManager.getApiClient(item.ServerId).getCurrentUser().then(user => { itemContextMenu.show(Object.assign({ item: item, play: true, @@ -122,9 +134,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl collectionId: collectionId, user: user - }, options || {})).then(function (result) { - - var itemsContainer; + }, options || {})).then(result => { if (result.command === 'playallfromhere' || result.command === 'queueallfromhere') { executeAction(card, options.positionTo, result.command); @@ -157,9 +167,9 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl function showPlayMenu(card, target) { - var item = getItemInfoFromCard(card); + const item = getItemInfoFromCard(card); - require(['playMenu'], function (playMenu) { + import('playMenu').then(({default: playMenu}) => { playMenu.show({ @@ -170,7 +180,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl } function sendToast(text) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(text); }); } @@ -179,19 +189,19 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl target = target || card; - var id = card.getAttribute('data-id'); + let id = card.getAttribute('data-id'); if (!id) { card = dom.parentWithAttribute(card, 'data-id'); id = card.getAttribute('data-id'); } - var item = getItemInfoFromCard(card); + const item = getItemInfoFromCard(card); - var serverId = item.ServerId; - var type = item.Type; + const serverId = item.ServerId; + const type = item.Type; - var playableItemId = type === 'Program' ? item.ChannelId : item.Id; + const playableItemId = type === 'Program' ? item.ChannelId : item.Id; if (item.MediaType === 'Photo' && action === 'link') { action = 'play'; @@ -213,7 +223,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl }); } else if (action === 'play' || action === 'resume') { - var startPositionTicks = parseInt(card.getAttribute('data-positionticks') || '0'); + const startPositionTicks = parseInt(card.getAttribute('data-positionticks') || '0'); playbackManager.play({ ids: [playableItemId], @@ -244,7 +254,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl onRecordCommand(serverId, id, type, card.getAttribute('data-timerid'), card.getAttribute('data-seriestimerid')); } else if (action === 'menu') { - var options = target.getAttribute('data-playoptions') === 'false' ? + const options = target.getAttribute('data-playoptions') === 'false' ? { shuffle: false, instantMix: false, @@ -261,7 +271,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl } else if (action === 'playmenu') { showPlayMenu(card, target); } else if (action === 'edit') { - getItem(target).then(function (item) { + getItem(target).then(item => { editItem(item, serverId); }); } else if (action === 'playtrailer') { @@ -270,9 +280,9 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl getItem(target).then(addToPlaylist); } else if (action === 'custom') { - var customAction = target.getAttribute('data-customaction'); + const customAction = target.getAttribute('data-customaction'); - card.dispatchEvent(new CustomEvent('action-' + customAction, { + card.dispatchEvent(new CustomEvent(`action-${customAction}`, { detail: { playlistItemId: card.getAttribute('data-playlistitemid') }, @@ -283,7 +293,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl } function addToPlaylist(item) { - require(['playlistEditor'], function (playlistEditor) { + import('playlistEditor').then(({default: playlistEditor}) => { new playlistEditor().show({ items: [item.Id], @@ -295,35 +305,35 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl function playTrailer(item) { - var apiClient = connectionManager.getApiClient(item.ServerId); + const apiClient = connectionManager.getApiClient(item.ServerId); - apiClient.getLocalTrailers(apiClient.getCurrentUserId(), item.Id).then(function (trailers) { + apiClient.getLocalTrailers(apiClient.getCurrentUserId(), item.Id).then(trailers => { playbackManager.play({ items: trailers }); }); } function editItem(item, serverId) { - var apiClient = connectionManager.getApiClient(serverId); + const apiClient = connectionManager.getApiClient(serverId); - return new Promise(function (resolve, reject) { + return new Promise((resolve, reject) => { - var serverId = apiClient.serverInfo().Id; + const serverId = apiClient.serverInfo().Id; if (item.Type === 'Timer') { if (item.ProgramId) { - require(['recordingCreator'], function (recordingCreator) { + import('recordingCreator').then(({default: recordingCreator}) => { recordingCreator.show(item.ProgramId, serverId).then(resolve, reject); }); } else { - require(['recordingEditor'], function (recordingEditor) { + import('recordingEditor').then(({default: recordingEditor}) => { recordingEditor.show(item.Id, serverId).then(resolve, reject); }); } } else { - require(['metadataEditor'], function (metadataEditor) { + import('metadataEditor').then(({default: metadataEditor}) => { metadataEditor.show(item.Id, serverId).then(resolve, reject); }); @@ -335,19 +345,19 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl if (type === 'Program' || timerId || seriesTimerId) { - var programId = type === 'Program' ? id : null; + const programId = type === 'Program' ? id : null; recordingHelper.toggleRecording(serverId, programId, timerId, seriesTimerId); } } - function onClick(e) { + export function onClick(e) { - var card = dom.parentWithClass(e.target, 'itemAction'); + const card = dom.parentWithClass(e.target, 'itemAction'); if (card) { - var actionElement = card; - var action = actionElement.getAttribute('data-action'); + let actionElement = card; + let action = actionElement.getAttribute('data-action'); if (!action) { actionElement = dom.parentWithAttribute(actionElement, 'data-action'); @@ -368,12 +378,12 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl function onCommand(e) { - var cmd = e.detail.command; + const cmd = e.detail.command; if (cmd === 'play' || cmd === 'resume' || cmd === 'record' || cmd === 'menu' || cmd === 'info') { - var target = e.target; - var card = dom.parentWithClass(target, 'itemAction') || dom.parentWithAttribute(target, 'data-id'); + const target = e.target; + const card = dom.parentWithClass(target, 'itemAction') || dom.parentWithAttribute(target, 'data-id'); if (card) { e.preventDefault(); @@ -383,7 +393,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl } } - function on(context, options) { + export function on(context, options) { options = options || {}; @@ -396,7 +406,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl } } - function off(context, options) { + export function off(context, options) { options = options || {}; context.removeEventListener('click', onClick); @@ -406,23 +416,24 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl } } - function getShortcutAttributesHtml(item, serverId) { + export function getShortcutAttributesHtml(item, serverId) { - var html = 'data-id="' + item.Id + '" data-serverid="' + (serverId || item.ServerId) + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '" data-channelid="' + item.ChannelId + '" data-isfolder="' + item.IsFolder + '"'; + let html = `data-id="${item.Id}" data-serverid="${serverId || item.ServerId}" data-type="${item.Type}" data-mediatype="${item.MediaType}" data-channelid="${item.ChannelId}" data-isfolder="${item.IsFolder}"`; - var collectionType = item.CollectionType; + const collectionType = item.CollectionType; if (collectionType) { - html += ' data-collectiontype="' + collectionType + '"'; + html += ` data-collectiontype="${collectionType}"`; } return html; } - return { - on: on, - off: off, - onClick: onClick, - getShortcutAttributesHtml: getShortcutAttributesHtml - }; +/* eslint-enable indent */ + +export default { + on: on, + off: off, + onClick: onClick, + getShortcutAttributesHtml: getShortcutAttributesHtml +}; -}); diff --git a/src/components/skinManager.js b/src/components/skinManager.js index c38d34181b..faa1a1f306 100644 --- a/src/components/skinManager.js +++ b/src/components/skinManager.js @@ -84,7 +84,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'backdrop', 'globalize', currentSound = null; } - backdrop.clear(); + backdrop.clearBackdrop(); } function onThemeLoaded() { diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js index 6ff88a00c9..b027c203a5 100644 --- a/src/components/slideshow/slideshow.js +++ b/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 += '
'; - html += '
'; + html += '
'; + if (useFakeZoomImage) { + html += `
`; + } html += ''; html += '
'; if (item.title || item.subtitle) { diff --git a/src/components/slideshow/style.css b/src/components/slideshow/style.css index f1fea508d7..af50eb9cd7 100644 --- a/src/components/slideshow/style.css +++ b/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; } diff --git a/src/components/sortmenu/sortmenu.js b/src/components/sortmenu/sortmenu.js index 9950afb89a..dbf7ef1a7f 100644 --- a/src/components/sortmenu/sortmenu.js +++ b/src/components/sortmenu/sortmenu.js @@ -73,7 +73,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana html += template; - dlg.innerHTML = globalize.translateDocument(html, 'core'); + dlg.innerHTML = globalize.translateHtml(html, 'core'); fillSortBy(dlg, options.sortOptions); initEditor(dlg, options.settings); diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js index e9bcc0bfca..9c0992c53c 100644 --- a/src/components/subtitleeditor/subtitleeditor.js +++ b/src/components/subtitleeditor/subtitleeditor.js @@ -69,7 +69,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', require(['confirm'], function (confirm) { - confirm({ + confirm.default({ title: globalize.translate('ConfirmDeletion'), text: msg, @@ -448,7 +448,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', dlg.classList.add('formDialog'); dlg.classList.add('subtitleEditorDialog'); - dlg.innerHTML = globalize.translateDocument(template, 'core'); + dlg.innerHTML = globalize.translateHtml(template, 'core'); dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File'); diff --git a/src/components/subtitlesettings/subtitleappearancehelper.js b/src/components/subtitlesettings/subtitleappearancehelper.js index bec8156aca..f710751376 100644 --- a/src/components/subtitlesettings/subtitleappearancehelper.js +++ b/src/components/subtitlesettings/subtitleappearancehelper.js @@ -1,159 +1,154 @@ -define([], function () { - 'use strict'; +/** + * Subtitle settings visual helper. + * @module components/subtitleSettings/subtitleAppearanceHelper + */ - function getTextStyles(settings, isCue) { +function getTextStyles(settings, isCue) { - var list = []; + let list = []; - if (isCue) { - switch (settings.textSize || '') { + if (isCue) { + switch (settings.textSize || '') { - case 'smaller': - list.push({ name: 'font-size', value: '.5em' }); - break; - case 'small': - list.push({ name: 'font-size', value: '.7em' }); - break; - case 'large': - list.push({ name: 'font-size', value: '1.3em' }); - break; - case 'larger': - list.push({ name: 'font-size', value: '1.72em' }); - break; - case 'extralarge': - list.push({ name: 'font-size', value: '2em' }); - break; - default: - case 'medium': - break; - } - } else { - switch (settings.textSize || '') { - - case 'smaller': - list.push({ name: 'font-size', value: '.8em' }); - break; - case 'small': - list.push({ name: 'font-size', value: 'inherit' }); - break; - case 'larger': - list.push({ name: 'font-size', value: '2em' }); - break; - case 'extralarge': - list.push({ name: 'font-size', value: '2.2em' }); - break; - case 'large': - list.push({ name: 'font-size', value: '1.72em' }); - break; - default: - case 'medium': - list.push({ name: 'font-size', value: '1.36em' }); - break; - } - } - - switch (settings.dropShadow || '') { - - case 'raised': - list.push({ name: 'text-shadow', value: '-1px -1px white, 0px -1px white, -1px 0px white, 1px 1px black, 0px 1px black, 1px 0px black' }); + case 'smaller': + list.push({ name: 'font-size', value: '.5em' }); break; - case 'depressed': - list.push({ name: 'text-shadow', value: '1px 1px white, 0px 1px white, 1px 0px white, -1px -1px black, 0px -1px black, -1px 0px black' }); + case 'small': + list.push({ name: 'font-size', value: '.7em' }); break; - case 'uniform': - list.push({ name: 'text-shadow', value: '-1px 0px #000000, 0px 1px #000000, 1px 0px #000000, 0px -1px #000000' }); + case 'large': + list.push({ name: 'font-size', value: '1.3em' }); break; - case 'none': - list.push({ name: 'text-shadow', value: 'none' }); + case 'larger': + list.push({ name: 'font-size', value: '1.72em' }); + break; + case 'extralarge': + list.push({ name: 'font-size', value: '2em' }); break; default: - case 'dropshadow': - list.push({ name: 'text-shadow', value: '#000000 0px 0px 7px' }); + case 'medium': break; } + } else { + switch (settings.textSize || '') { - var background = settings.textBackground || 'transparent'; - if (background) { - list.push({ name: 'background-color', value: background }); - } - - var textColor = settings.textColor || '#ffffff'; - if (textColor) { - list.push({ name: 'color', value: textColor }); - } - - switch (settings.font || '') { - - case 'typewriter': - list.push({ name: 'font-family', value: '"Courier New",monospace' }); - list.push({ name: 'font-variant', value: 'none' }); + case 'smaller': + list.push({ name: 'font-size', value: '.8em' }); break; - case 'print': - list.push({ name: 'font-family', value: 'Georgia,Times New Roman,Arial,Helvetica,serif' }); - list.push({ name: 'font-variant', value: 'none' }); + case 'small': + list.push({ name: 'font-size', value: 'inherit' }); break; - case 'console': - list.push({ name: 'font-family', value: 'Consolas,Lucida Console,Menlo,Monaco,monospace' }); - list.push({ name: 'font-variant', value: 'none' }); + case 'larger': + list.push({ name: 'font-size', value: '2em' }); break; - case 'cursive': - list.push({ name: 'font-family', value: 'Lucida Handwriting,Brush Script MT,Segoe Script,cursive,Quintessential,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); - list.push({ name: 'font-variant', value: 'none' }); + case 'extralarge': + list.push({ name: 'font-size', value: '2.2em' }); break; - case 'casual': - list.push({ name: 'font-family', value: 'Gabriola,Segoe Print,Comic Sans MS,Chalkboard,Short Stack,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); - list.push({ name: 'font-variant', value: 'none' }); - break; - case 'smallcaps': - list.push({ name: 'font-family', value: 'Copperplate Gothic,Copperplate Gothic Bold,Copperplate,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); - list.push({ name: 'font-variant', value: 'small-caps' }); + case 'large': + list.push({ name: 'font-size', value: '1.72em' }); break; default: - list.push({ name: 'font-family', value: 'inherit' }); - list.push({ name: 'font-variant', value: 'none' }); + case 'medium': + list.push({ name: 'font-size', value: '1.36em' }); break; } - - return list; } - function getWindowStyles(settings) { + switch (settings.dropShadow || '') { - return []; + case 'raised': + list.push({ name: 'text-shadow', value: '-1px -1px white, 0px -1px white, -1px 0px white, 1px 1px black, 0px 1px black, 1px 0px black' }); + break; + case 'depressed': + list.push({ name: 'text-shadow', value: '1px 1px white, 0px 1px white, 1px 0px white, -1px -1px black, 0px -1px black, -1px 0px black' }); + break; + case 'uniform': + list.push({ name: 'text-shadow', value: '-1px 0px #000000, 0px 1px #000000, 1px 0px #000000, 0px -1px #000000' }); + break; + case 'none': + list.push({ name: 'text-shadow', value: 'none' }); + break; + default: + case 'dropshadow': + list.push({ name: 'text-shadow', value: '#000000 0px 0px 7px' }); + break; } - function getStyles(settings, isCue) { - - return { - text: getTextStyles(settings, isCue), - window: getWindowStyles(settings) - }; + const background = settings.textBackground || 'transparent'; + if (background) { + list.push({ name: 'background-color', value: background }); } - function applyStyleList(styles, elem) { - - for (var i = 0, length = styles.length; i < length; i++) { - - var style = styles[i]; - - elem.style[style.name] = style.value; - } + const textColor = settings.textColor || '#ffffff'; + if (textColor) { + list.push({ name: 'color', value: textColor }); } - function applyStyles(elements, appearanceSettings) { + switch (settings.font || '') { - var styles = getStyles(appearanceSettings); - - if (elements.text) { - applyStyleList(styles.text, elements.text); - } - if (elements.window) { - applyStyleList(styles.window, elements.window); - } + case 'typewriter': + list.push({ name: 'font-family', value: '"Courier New",monospace' }); + list.push({ name: 'font-variant', value: 'none' }); + break; + case 'print': + list.push({ name: 'font-family', value: 'Georgia,Times New Roman,Arial,Helvetica,serif' }); + list.push({ name: 'font-variant', value: 'none' }); + break; + case 'console': + list.push({ name: 'font-family', value: 'Consolas,Lucida Console,Menlo,Monaco,monospace' }); + list.push({ name: 'font-variant', value: 'none' }); + break; + case 'cursive': + list.push({ name: 'font-family', value: 'Lucida Handwriting,Brush Script MT,Segoe Script,cursive,Quintessential,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); + list.push({ name: 'font-variant', value: 'none' }); + break; + case 'casual': + list.push({ name: 'font-family', value: 'Gabriola,Segoe Print,Comic Sans MS,Chalkboard,Short Stack,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); + list.push({ name: 'font-variant', value: 'none' }); + break; + case 'smallcaps': + list.push({ name: 'font-family', value: 'Copperplate Gothic,Copperplate Gothic Bold,Copperplate,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); + list.push({ name: 'font-variant', value: 'small-caps' }); + break; + default: + list.push({ name: 'font-family', value: 'inherit' }); + list.push({ name: 'font-variant', value: 'none' }); + break; } + return list; +} + +export function getStyles(settings, isCue) { + return { - getStyles: getStyles, - applyStyles: applyStyles + text: getTextStyles(settings, isCue), + window: [] }; -}); +} + +function applyStyleList(styles, elem) { + + for (let i = 0, length = styles.length; i < length; i++) { + + let style = styles[i]; + + elem.style[style.name] = style.value; + } +} + +export function applyStyles(elements, appearanceSettings) { + + let styles = getStyles(appearanceSettings); + + if (elements.text) { + applyStyleList(styles.text, elements.text); + } + if (elements.window) { + applyStyleList(styles.window, elements.window); + } +} +export default { + getStyles: getStyles, + applyStyles: applyStyles +}; diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js index d728360d05..d2ae852bd5 100644 --- a/src/components/subtitlesettings/subtitlesettings.js +++ b/src/components/subtitlesettings/subtitlesettings.js @@ -1,109 +1,212 @@ -define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loading', 'connectionManager', 'subtitleAppearanceHelper', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-input', 'emby-checkbox', 'flexStyles'], function (require, globalize, appSettings, appHost, focusManager, loading, connectionManager, subtitleAppearanceHelper, dom, events) { - 'use strict'; +import require from 'require'; +import globalize from 'globalize'; +import appHost from 'apphost'; +import appSettings from 'appSettings'; +import focusManager from 'focusManager'; +import loading from 'loading'; +import connectionManager from 'connectionManager'; +import subtitleAppearanceHelper from 'subtitleAppearanceHelper'; +import settingsHelper from 'settingsHelper'; +import dom from 'dom'; +import events from 'events'; +import 'listViewStyle'; +import 'emby-select'; +import 'emby-input'; +import 'emby-checkbox'; +import 'flexStyles'; - function populateLanguages(select, languages) { - var html = ''; +/** + * Subtitle settings. + * @module components/subtitleSettings/subtitleSettings + */ - html += "'; - for (var i = 0, length = languages.length; i < length; i++) { - var culture = languages[i]; - html += "'; +function getSubtitleAppearanceObject(context) { + let appearanceSettings = {}; + + appearanceSettings.textSize = context.querySelector('#selectTextSize').value; + appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value; + appearanceSettings.font = context.querySelector('#selectFont').value; + appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value; + appearanceSettings.textColor = context.querySelector('#inputTextColor').value; + + return appearanceSettings; +} + +function loadForm(context, user, userSettings, appearanceSettings, apiClient) { + + apiClient.getCultures().then(function (allCultures) { + + if (appHost.supports('subtitleburnsettings') && user.Policy.EnableVideoPlaybackTranscoding) { + context.querySelector('.fldBurnIn').classList.remove('hide'); } - select.innerHTML = html; - } + let selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage'); - function getSubtitleAppearanceObject(context) { - var appearanceSettings = {}; + settingsHelper.populateLanguages(selectSubtitleLanguage, allCultures); - appearanceSettings.textSize = context.querySelector('#selectTextSize').value; - appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value; - appearanceSettings.font = context.querySelector('#selectFont').value; - appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value; - appearanceSettings.textColor = context.querySelector('#inputTextColor').value; + selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || ''; + context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || ''; - return appearanceSettings; - } + context.querySelector('#selectSubtitlePlaybackMode').dispatchEvent(new CustomEvent('change', {})); - function loadForm(context, user, userSettings, appearanceSettings, apiClient) { + context.querySelector('#selectTextSize').value = appearanceSettings.textSize || ''; + context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || ''; + context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent'; + context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff'; + context.querySelector('#selectFont').value = appearanceSettings.font || ''; - apiClient.getCultures().then(function (allCultures) { + context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || ''; - if (appHost.supports('subtitleburnsettings') && user.Policy.EnableVideoPlaybackTranscoding) { - context.querySelector('.fldBurnIn').classList.remove('hide'); - } + onAppearanceFieldChange({ + target: context.querySelector('#selectTextSize') + }); - var selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage'); + loading.hide(); + }); +} - populateLanguages(selectSubtitleLanguage, allCultures); +function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) { - selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || ''; - context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || ''; + let appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey); + appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context)); - context.querySelector('#selectSubtitlePlaybackMode').dispatchEvent(new CustomEvent('change', {})); + userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey); - context.querySelector('#selectTextSize').value = appearanceSettings.textSize || ''; - context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || ''; - context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent'; - context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff'; - context.querySelector('#selectFont').value = appearanceSettings.font || ''; + user.Configuration.SubtitleLanguagePreference = context.querySelector('#selectSubtitleLanguage').value; + user.Configuration.SubtitleMode = context.querySelector('#selectSubtitlePlaybackMode').value; - context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || ''; + return apiClient.updateUserConfiguration(user.Id, user.Configuration); +} - onAppearanceFieldChange({ - target: context.querySelector('#selectTextSize') - }); +function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { + + loading.show(); + + appSettings.set('subtitleburnin', context.querySelector('#selectSubtitleBurnIn').value); + + apiClient.getUser(userId).then(function (user) { + + saveUser(context, user, userSettings, instance.appearanceKey, apiClient).then(function () { loading.hide(); + if (enableSaveConfirmation) { + import('toast').then(({default: toast}) => { + toast(globalize.translate('SettingsSaved')); + }); + } + + events.trigger(instance, 'saved'); + + }, function () { + loading.hide(); }); + }); +} + +function onSubtitleModeChange(e) { + + let view = dom.parentWithClass(e.target, 'subtitlesettings'); + + let subtitlesHelp = view.querySelectorAll('.subtitlesHelp'); + for (let i = 0, length = subtitlesHelp.length; i < length; i++) { + subtitlesHelp[i].classList.add('hide'); + } + view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide'); +} + +function onAppearanceFieldChange(e) { + + let view = dom.parentWithClass(e.target, 'subtitlesettings'); + + let appearanceSettings = getSubtitleAppearanceObject(view); + + let elements = { + window: view.querySelector('.subtitleappearance-preview-window'), + text: view.querySelector('.subtitleappearance-preview-text') + }; + + subtitleAppearanceHelper.applyStyles(elements, appearanceSettings); +} + +function embed(options, self) { + + import('text!./subtitlesettings.template.html').then(({default: template}) => { + + options.element.classList.add('subtitlesettings'); + options.element.innerHTML = globalize.translateHtml(template, 'core'); + + options.element.querySelector('form').addEventListener('submit', self.onSubmit.bind(self)); + + options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange); + options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange); + + if (options.enableSaveButton) { + options.element.querySelector('.btnSave').classList.remove('hide'); + } + + if (appHost.supports('subtitleappearancesettings')) { + options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide'); + } + + self.loadData(); + + if (options.autoFocus) { + focusManager.autoFocus(options.element); + } + }); +} + +export class SubtitleSettings { + + constructor(options) { + + this.options = options; + + embed(options, this); } - function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) { - - var appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey); - appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context)); - - userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey); - - user.Configuration.SubtitleLanguagePreference = context.querySelector('#selectSubtitleLanguage').value; - user.Configuration.SubtitleMode = context.querySelector('#selectSubtitlePlaybackMode').value; - - return apiClient.updateUserConfiguration(user.Id, user.Configuration); - } - - function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { + loadData() { + let self = this; + let context = self.options.element; loading.show(); - appSettings.set('subtitleburnin', context.querySelector('#selectSubtitleBurnIn').value); + let userId = self.options.userId; + let apiClient = connectionManager.getApiClient(self.options.serverId); + let userSettings = self.options.userSettings; apiClient.getUser(userId).then(function (user) { + userSettings.setUserInfo(userId, apiClient).then(function () { + self.dataLoaded = true; - saveUser(context, user, userSettings, instance.appearanceKey, apiClient).then(function () { + let appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey); - loading.hide(); - if (enableSaveConfirmation) { - require(['toast'], function (toast) { - toast(globalize.translate('SettingsSaved')); - }); - } - - events.trigger(instance, 'saved'); - - }, function () { - loading.hide(); + loadForm(context, user, userSettings, appearanceSettings, apiClient); }); }); } - function onSubmit(e) { - var self = this; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userId = self.options.userId; - var userSettings = self.options.userSettings; + submit() { + this.onSubmit(null); + } + + destroy() { + this.options = null; + } + + onSubmit(e) { + const self = this; + let apiClient = connectionManager.getApiClient(self.options.serverId); + let userId = self.options.userId; + let userSettings = self.options.userSettings; userSettings.setUserInfo(userId, apiClient).then(function () { - var enableSaveConfirmation = self.options.enableSaveConfirmation; + + let enableSaveConfirmation = self.options.enableSaveConfirmation; save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); }); @@ -111,103 +214,8 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi if (e) { e.preventDefault(); } - return false; } +} - function onSubtitleModeChange(e) { - - var view = dom.parentWithClass(e.target, 'subtitlesettings'); - - var subtitlesHelp = view.querySelectorAll('.subtitlesHelp'); - for (var i = 0, length = subtitlesHelp.length; i < length; i++) { - subtitlesHelp[i].classList.add('hide'); - } - view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide'); - } - - function onAppearanceFieldChange(e) { - - var view = dom.parentWithClass(e.target, 'subtitlesettings'); - - var appearanceSettings = getSubtitleAppearanceObject(view); - - var elements = { - window: view.querySelector('.subtitleappearance-preview-window'), - text: view.querySelector('.subtitleappearance-preview-text') - }; - - subtitleAppearanceHelper.applyStyles(elements, appearanceSettings); - } - - function embed(options, self) { - - require(['text!./subtitlesettings.template.html'], function (template) { - - options.element.classList.add('subtitlesettings'); - options.element.innerHTML = globalize.translateDocument(template, 'core'); - - options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); - - options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange); - options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange); - options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange); - options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange); - options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange); - options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange); - - if (options.enableSaveButton) { - options.element.querySelector('.btnSave').classList.remove('hide'); - } - - if (appHost.supports('subtitleappearancesettings')) { - options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide'); - } - - self.loadData(); - - if (options.autoFocus) { - focusManager.autoFocus(options.element); - } - }); - } - - function SubtitleSettings(options) { - - this.options = options; - - embed(options, this); - } - - SubtitleSettings.prototype.loadData = function () { - - var self = this; - var context = self.options.element; - - loading.show(); - - var userId = self.options.userId; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userSettings = self.options.userSettings; - - apiClient.getUser(userId).then(function (user) { - userSettings.setUserInfo(userId, apiClient).then(function () { - self.dataLoaded = true; - - var appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey); - - loadForm(context, user, userSettings, appearanceSettings, apiClient); - }); - }); - }; - - SubtitleSettings.prototype.submit = function () { - onSubmit.call(this); - }; - - SubtitleSettings.prototype.destroy = function () { - this.options = null; - }; - - return SubtitleSettings; -}); +export default SubtitleSettings; diff --git a/src/components/syncplay/groupSelectionMenu.js b/src/components/syncPlay/groupSelectionMenu.js similarity index 100% rename from src/components/syncplay/groupSelectionMenu.js rename to src/components/syncPlay/groupSelectionMenu.js diff --git a/src/components/syncplay/playbackPermissionManager.js b/src/components/syncPlay/playbackPermissionManager.js similarity index 100% rename from src/components/syncplay/playbackPermissionManager.js rename to src/components/syncPlay/playbackPermissionManager.js diff --git a/src/components/syncplay/syncPlayManager.js b/src/components/syncPlay/syncPlayManager.js similarity index 99% rename from src/components/syncplay/syncPlayManager.js rename to src/components/syncPlay/syncPlayManager.js index f04d1aeb8c..6116884d7c 100644 --- a/src/components/syncplay/syncPlayManager.js +++ b/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'; diff --git a/src/components/syncplay/timeSyncManager.js b/src/components/syncPlay/timeSyncManager.js similarity index 98% rename from src/components/syncplay/timeSyncManager.js rename to src/components/syncPlay/timeSyncManager.js index ca92939576..d3b59589ee 100644 --- a/src/components/syncplay/timeSyncManager.js +++ b/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(); } /** diff --git a/src/components/tabbedview/itemstab.js b/src/components/tabbedview/itemstab.js index 884cfa2015..d40faef5dc 100644 --- a/src/components/tabbedview/itemstab.js +++ b/src/components/tabbedview/itemstab.js @@ -51,7 +51,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts instance.itemsContainer = view.querySelector('.itemsContainer'); - instance.alphaPicker = new AlphaPicker({ + instance.alphaPicker = new AlphaPicker.default({ element: instance.alphaPickerElement, itemsContainer: instance.itemsContainer, itemClass: 'card' @@ -331,7 +331,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts } if (this.enableAlphaNumericShortcuts !== false) { - this.alphaNumericShortcuts = new AlphaNumericShortcuts({ + this.alphaNumericShortcuts = new AlphaNumericShortcuts.default({ itemsContainer: this.itemsContainer }); } @@ -561,7 +561,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts var alphaNumericShortcuts = this.alphaNumericShortcuts; if (alphaNumericShortcuts) { - alphaNumericShortcuts.destroy(); + alphaNumericShortcuts.default.destroy(); this.alphaNumericShortcuts = null; } }; diff --git a/src/components/tabbedview/tabbedview.js b/src/components/tabbedview/tabbedview.js index a67e8e0fa1..4fec69f619 100644 --- a/src/components/tabbedview/tabbedview.js +++ b/src/components/tabbedview/tabbedview.js @@ -95,7 +95,7 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function ( TabbedView.prototype.onResume = function (options) { this.setTitle(); - backdrop.clear(); + backdrop.clearBackdrop(); var currentTabController = this.currentTabController; diff --git a/src/components/tvproviders/xmltv.js b/src/components/tvproviders/xmltv.js index 4c39b14430..054c5b640d 100644 --- a/src/components/tvproviders/xmltv.js +++ b/src/components/tvproviders/xmltv.js @@ -139,7 +139,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi var page = $(e.target).parents('.xmltvForm')[0]; require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ includeFiles: true, callback: function (path) { diff --git a/src/components/viewContainer.js b/src/components/viewContainer.js index 6c83e4a3ba..dfc9569f34 100644 --- a/src/components/viewContainer.js +++ b/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'); } diff --git a/src/components/viewManager/viewManager.js b/src/components/viewManager/viewManager.js index a8e514e06e..8e17264f9f 100644 --- a/src/components/viewManager/viewManager.js +++ b/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) { diff --git a/src/components/viewsettings/viewsettings.js b/src/components/viewSettings/viewSettings.js similarity index 97% rename from src/components/viewsettings/viewsettings.js rename to src/components/viewSettings/viewSettings.js index 441c35157b..28a9854c34 100644 --- a/src/components/viewsettings/viewsettings.js +++ b/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, @@ -84,7 +84,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne html += template; - dlg.innerHTML = globalize.translateDocument(html, 'core'); + dlg.innerHTML = globalize.translateHtml(html, 'core'); var settingElements = dlg.querySelectorAll('.viewSetting'); for (var i = 0, length = settingElements.length; i < length; i++) { diff --git a/src/components/viewsettings/viewsettings.template.html b/src/components/viewSettings/viewSettings.template.html similarity index 100% rename from src/components/viewsettings/viewsettings.template.html rename to src/components/viewSettings/viewSettings.template.html diff --git a/src/config.json b/src/config.json new file mode 120000 index 0000000000..f1bd2db71e --- /dev/null +++ b/src/config.json @@ -0,0 +1 @@ +config.template.json \ No newline at end of file diff --git a/src/config.template.json b/src/config.template.json index 1e79270943..4b22a699d6 100644 --- a/src/config.template.json +++ b/src/config.template.json @@ -1,3 +1,3 @@ { - "multiserver": true + "multiserver": false } diff --git a/src/controllers/auth/addserver.js b/src/controllers/auth/addserver.js index 622d19082e..1129283246 100644 --- a/src/controllers/auth/addserver.js +++ b/src/controllers/auth/addserver.js @@ -1,14 +1,20 @@ -define(['appSettings', 'loading', 'browser', 'globalize', 'emby-button'], function(appSettings, loading, browser, globalize) { - 'use strict'; +import appSettings from 'appSettings'; +import loading from 'loading'; +import browser from 'browser'; +import globalize from 'globalize'; +import 'emby-button'; + +/* eslint-disable indent */ function handleConnectionResult(page, result) { loading.hide(); switch (result.State) { - case 'SignedIn': - var apiClient = result.ApiClient; + case 'SignedIn': { + const apiClient = result.ApiClient; Dashboard.onServerChanged(apiClient.getCurrentUserId(), apiClient.accessToken(), apiClient); Dashboard.navigate('home.html'); break; + } case 'ServerSignIn': Dashboard.navigate('login.html?serverid=' + result.Servers[0].Id, false, 'none'); break; @@ -30,7 +36,7 @@ define(['appSettings', 'loading', 'browser', 'globalize', 'emby-button'], functi function submitServer(page) { loading.show(); - var host = page.querySelector('#txtServerHost').value; + const host = page.querySelector('#txtServerHost').value; ConnectionManager.connectToAddress(host, { enableAutoLogin: appSettings.enableAutoLogin() }).then(function(result) { @@ -42,11 +48,11 @@ define(['appSettings', 'loading', 'browser', 'globalize', 'emby-button'], functi }); } - return function(view, params) { + export default function(view, params) { view.querySelector('.addServerForm').addEventListener('submit', onServerSubmit); view.querySelector('.btnCancel').addEventListener('click', goBack); - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(view); }); @@ -57,9 +63,10 @@ define(['appSettings', 'loading', 'browser', 'globalize', 'emby-button'], functi } function goBack() { - require(['appRouter'], function(appRouter) { + import('appRouter').then(({default: appRouter}) => { appRouter.back(); }); } - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/auth/forgotpassword.js b/src/controllers/auth/forgotpassword.js index 3756bf814d..ace5a3ec15 100644 --- a/src/controllers/auth/forgotpassword.js +++ b/src/controllers/auth/forgotpassword.js @@ -1,5 +1,6 @@ -define(['globalize'], function (globalize) { - 'use strict'; +import globalize from 'globalize'; + +/* eslint-disable indent */ function processForgotPasswordResult(result) { if ('ContactAdmin' == result.Action) { @@ -17,7 +18,7 @@ define(['globalize'], function (globalize) { } if ('PinCode' == result.Action) { - var msg = globalize.translate('MessageForgotPasswordFileCreated'); + let msg = globalize.translate('MessageForgotPasswordFileCreated'); msg += '
'; msg += '
'; msg += 'Enter PIN here to finish Password Reset
'; @@ -34,7 +35,7 @@ define(['globalize'], function (globalize) { } } - return function (view, params) { + export default function (view, params) { function onSubmit(e) { ApiClient.ajax({ type: 'POST', @@ -49,5 +50,6 @@ define(['globalize'], function (globalize) { } view.querySelector('form').addEventListener('submit', onSubmit); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/auth/forgotpasswordpin.js b/src/controllers/auth/forgotpasswordpin.js index 2a51890d2f..a88e131eea 100644 --- a/src/controllers/auth/forgotpasswordpin.js +++ b/src/controllers/auth/forgotpasswordpin.js @@ -1,9 +1,10 @@ -define(['globalize'], function (globalize) { - 'use strict'; +import globalize from 'globalize'; + +/* eslint-disable indent */ function processForgotPasswordResult(result) { if (result.Success) { - var msg = globalize.translate('MessagePasswordResetForUsers'); + let msg = globalize.translate('MessagePasswordResetForUsers'); msg += '
'; msg += '
'; msg += result.UsersReset.join('
'); @@ -22,7 +23,7 @@ define(['globalize'], function (globalize) { }); } - return function (view, params) { + export default function (view, params) { function onSubmit(e) { ApiClient.ajax({ type: 'POST', @@ -37,5 +38,6 @@ define(['globalize'], function (globalize) { } view.querySelector('form').addEventListener('submit', onSubmit); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/auth/login.js b/src/controllers/auth/login.js index c0c37e27d6..fb16413ae7 100644 --- a/src/controllers/auth/login.js +++ b/src/controllers/auth/login.js @@ -1,14 +1,24 @@ -define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layoutManager', 'browser', 'globalize', 'cardStyle', 'emby-checkbox'], function (appHost, appSettings, dom, connectionManager, loading, layoutManager, browser, globalize) { - 'use strict'; +import appHost from 'apphost'; +import appSettings from 'appSettings'; +import dom from 'dom'; +import connectionManager from 'connectionManager'; +import loading from 'loading'; +import layoutManager from 'layoutManager'; +import browser from 'browser'; +import globalize from 'globalize'; +import 'cardStyle'; +import 'emby-checkbox'; - var enableFocusTransform = !browser.slow && !browser.edge; +/* eslint-disable indent */ + + const enableFocusTransform = !browser.slow && !browser.edge; function authenticateUserByName(page, apiClient, username, password) { loading.show(); apiClient.authenticateUserByName(username, password).then(function (result) { - var user = result.User; - var serverId = getParameterByName('serverid'); - var newUrl; + const user = result.User; + const serverId = getParameterByName('serverid'); + let newUrl; if (user.Policy.IsAdministrator && !serverId) { newUrl = 'dashboard.html'; @@ -26,7 +36,7 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout const UnauthorizedOrForbidden = [401, 403]; if (UnauthorizedOrForbidden.includes(response.status)) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { const messageKey = response.status === 401 ? 'MessageInvalidUser' : 'MessageUnauthorizedUser'; toast(globalize.translate(messageKey)); }); @@ -58,23 +68,23 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout } } - var metroColors = ['#6FBD45', '#4BB3DD', '#4164A5', '#E12026', '#800080', '#E1B222', '#008040', '#0094FF', '#FF00C7', '#FF870F', '#7F0037']; + const metroColors = ['#6FBD45', '#4BB3DD', '#4164A5', '#E12026', '#800080', '#E1B222', '#008040', '#0094FF', '#FF00C7', '#FF870F', '#7F0037']; function getRandomMetroColor() { - var index = Math.floor(Math.random() * (metroColors.length - 1)); + const index = Math.floor(Math.random() * (metroColors.length - 1)); return metroColors[index]; } function getMetroColor(str) { if (str) { - var character = String(str.substr(0, 1).charCodeAt()); - var sum = 0; + const character = String(str.substr(0, 1).charCodeAt()); + let sum = 0; - for (var i = 0; i < character.length; i++) { + for (let i = 0; i < character.length; i++) { sum += parseInt(character.charAt(i)); } - var index = String(sum).substr(-1); + const index = String(sum).substr(-1); return metroColors[index]; } @@ -82,13 +92,13 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout } function loadUserList(context, apiClient, users) { - var html = ''; + let html = ''; - for (var i = 0; i < users.length; i++) { - var user = users[i]; + for (let i = 0; i < users.length; i++) { + const user = users[i]; // TODO move card creation code to Card component - var cssClass = 'card squareCard scalableCard squareCard-scalable'; + let cssClass = 'card squareCard scalableCard squareCard-scalable'; if (layoutManager.tv) { cssClass += ' show-focus'; @@ -98,13 +108,13 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout } } - var cardBoxCssClass = 'cardBox cardBox-bottompadded'; + const cardBoxCssClass = 'cardBox cardBox-bottompadded'; html += '
'; return cardContainer; }).join(''); - var itemsContainer = view.querySelector('.servers'); + const itemsContainer = view.querySelector('.servers'); if (!items.length) { html = '

' + globalize.translate('MessageNoServersAvailable') + '

'; @@ -89,7 +106,7 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu } function alertTextWithOptions(options) { - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert(options); }); } @@ -98,14 +115,14 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu alertText(globalize.translate('MessageUnableToConnectToServer')); } - return function (view, params) { + export default function (view, params) { function connectToServer(server) { loading.show(); connectionManager.connectToServer(server, { enableAutoLogin: appSettings.enableAutoLogin() }).then(function (result) { loading.hide(); - var apiClient = result.ApiClient; + const apiClient = result.ApiClient; switch (result.State) { case 'SignedIn': @@ -140,7 +157,7 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu } function onServerClick(server) { - var menuItems = []; + const menuItems = []; menuItems.push({ name: globalize.translate('Connect'), id: 'connect' @@ -178,10 +195,10 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu connectionManager.getAvailableServers().then(onServersRetrieved); } - var servers; + let servers; updatePageStyle(view, params); view.addEventListener('viewshow', function (e) { - var isRestored = e.detail.isRestored; + const isRestored = e.detail.isRestored; appRouter.setTitle(null); if (!isRestored) { @@ -189,20 +206,21 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu } }); view.querySelector('.servers').addEventListener('click', function (e) { - var card = dom.parentWithClass(e.target, 'card'); + const card = dom.parentWithClass(e.target, 'card'); if (card) { - var url = card.getAttribute('data-url'); + const url = card.getAttribute('data-url'); if (url) { appRouter.show(url); } else { - var id = card.getAttribute('data-id'); + const id = card.getAttribute('data-id'); onServerClick(servers.filter(function (s) { return s.Id === id; })[0]); } } }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/apikeys.js b/src/controllers/dashboard/apikeys.js index f43bfd0329..0e122c486d 100644 --- a/src/controllers/dashboard/apikeys.js +++ b/src/controllers/dashboard/apikeys.js @@ -1,8 +1,14 @@ -define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button'], function (datetime, loading, libraryMenu, dom, globalize) { - 'use strict'; +import datetime from 'datetime'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import dom from 'dom'; +import globalize from 'globalize'; +import 'emby-button'; + +/* eslint-disable indent */ function revoke(page, key) { - require(['confirm'], function (confirm) { + import('confirm').then(({default: confirm}) => { confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () { loading.show(); ApiClient.ajax({ @@ -16,8 +22,8 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button'] } function renderKeys(page, keys) { - var rows = keys.map(function (item) { - var html = ''; + const rows = keys.map(function (item) { + let html = ''; html += ''; html += ''; html += ''; @@ -29,7 +35,7 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button'] html += item.AppName || ''; html += ''; html += ''; - var date = datetime.parseISO8601Date(item.DateCreated, true); + const date = datetime.parseISO8601Date(item.DateCreated, true); html += datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date); html += ''; return html += ''; @@ -46,7 +52,7 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button'] } function showNewKeyPrompt(page) { - require(['prompt'], function (prompt) { + import('prompt').then(({default: prompt}) => { prompt({ title: globalize.translate('HeaderNewApiKey'), label: globalize.translate('LabelAppName'), @@ -65,12 +71,12 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button'] } pageIdOn('pageinit', 'apiKeysPage', function () { - var page = this; + const page = this; page.querySelector('.btnNewKey').addEventListener('click', function () { showNewKeyPrompt(page); }); page.querySelector('.tblApiKeys').addEventListener('click', function (e) { - var btnRevoke = dom.parentWithClass(e.target, 'btnRevoke'); + const btnRevoke = dom.parentWithClass(e.target, 'btnRevoke'); if (btnRevoke) { revoke(page, btnRevoke.getAttribute('data-token')); @@ -80,4 +86,5 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button'] pageIdOn('pagebeforeshow', 'apiKeysPage', function () { loadData(this); }); -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js index f91f4e01ef..7aa706840d 100644 --- a/src/controllers/dashboard/dashboard.js +++ b/src/controllers/dashboard/dashboard.js @@ -1,11 +1,31 @@ -define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'loading', 'connectionManager', 'playMethodHelper', 'cardBuilder', 'imageLoader', 'components/activitylog', 'scripts/imagehelper', 'indicators', 'listViewStyle', 'emby-button', 'flexStyles', 'emby-button', 'emby-itemscontainer'], function (datetime, events, itemHelper, serverNotifications, dom, globalize, datefns, dfnshelper, loading, connectionManager, playMethodHelper, cardBuilder, imageLoader, ActivityLog, imageHelper, indicators) { - 'use strict'; +import datetime from 'datetime'; +import events from 'events'; +import itemHelper from 'itemHelper'; +import serverNotifications from 'serverNotifications'; +import dom from 'dom'; +import globalize from 'globalize'; +import * as datefns from 'date-fns'; +import dfnshelper from 'dfnshelper'; +import loading from 'loading'; +import connectionManager from 'connectionManager'; +import playMethodHelper from 'playMethodHelper'; +import cardBuilder from 'cardBuilder'; +import imageLoader from 'imageLoader'; +import ActivityLog from 'components/activitylog'; +import imageHelper from 'scripts/imagehelper'; +import indicators from 'indicators'; +import 'listViewStyle'; +import 'emby-button'; +import 'flexStyles'; +import 'emby-itemscontainer'; + +/* eslint-disable indent */ function showPlaybackInfo(btn, session) { - require(['alert'], function (alert) { - var title; - var text = []; - var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); + import('alert').then(({default: alert}) => { + let title; + let text = []; + const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); if (displayPlayMethod === 'DirectStream') { title = globalize.translate('DirectStreaming'); @@ -33,7 +53,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa } function showSendMessageForm(btn, session) { - require(['prompt'], function (prompt) { + import('prompt').then(({default: prompt}) => { prompt({ title: globalize.translate('HeaderSendMessage'), label: globalize.translate('LabelMessageText'), @@ -50,8 +70,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa } function showOptionsMenu(btn, session) { - require(['actionsheet'], function (actionsheet) { - var menuItems = []; + import('actionsheet').then(({default: actionsheet}) => { + const menuItems = []; if (session.ServerId && session.DeviceId !== connectionManager.deviceId()) { menuItems.push({ @@ -84,14 +104,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa } function onActiveDevicesClick(evt) { - var btn = dom.parentWithClass(evt.target, 'sessionCardButton'); + const btn = dom.parentWithClass(evt.target, 'sessionCardButton'); if (btn) { - var card = dom.parentWithClass(btn, 'card'); + const card = dom.parentWithClass(btn, 'card'); if (card) { - var sessionId = card.id; - var session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) { + const sessionId = card.id; + const session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) { return 'session' + dashboardSession.Id === sessionId; })[0]; @@ -113,11 +133,11 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa } function filterSessions(sessions) { - var list = []; - var minActiveDate = new Date().getTime() - 9e5; + const list = []; + const minActiveDate = new Date().getTime() - 9e5; - for (var i = 0, length = sessions.length; i < length; i++) { - var session = sessions[i]; + for (let i = 0, length = sessions.length; i < length; i++) { + const session = sessions[i]; if (!session.NowPlayingItem && !session.UserId) { continue; @@ -139,7 +159,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa EnableTotalRecordCount: false, EnableImageTypes: 'Primary,Thumb,Backdrop' }).then(function (result) { - var itemsContainer = view.querySelector('.activeRecordingItems'); + const itemsContainer = view.querySelector('.activeRecordingItems'); if (!result.Items.length) { view.querySelector('.activeRecordingsSection').classList.add('hide'); @@ -169,7 +189,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa function reloadSystemInfo(view, apiClient) { apiClient.getSystemInfo().then(function (systemInfo) { view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName); - var localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version); + let localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version); if (systemInfo.SystemUpdateLevel !== 'Release') { localizedVersion += ' ' + systemInfo.SystemUpdateLevel; @@ -205,31 +225,31 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa } function renderActiveConnections(view, sessions) { - var html = ''; + let html = ''; DashboardPage.sessionsList = sessions; - var parentElement = view.querySelector('.activeDevices'); - var cardElem = parentElement.querySelector('.card'); + const parentElement = view.querySelector('.activeDevices'); + const cardElem = parentElement.querySelector('.card'); if (cardElem) { cardElem.classList.add('deadSession'); } - for (var i = 0, length = sessions.length; i < length; i++) { - var session = sessions[i]; - var rowId = 'session' + session.Id; - var elem = view.querySelector('#' + rowId); + for (let i = 0, length = sessions.length; i < length; i++) { + const session = sessions[i]; + const rowId = 'session' + session.Id; + const elem = view.querySelector('#' + rowId); if (elem) { DashboardPage.updateSession(elem, session); } else { - var nowPlayingItem = session.NowPlayingItem; - var className = 'scalableCard card activeSession backdropCard backdropCard-scalable'; + const nowPlayingItem = session.NowPlayingItem; + const className = 'scalableCard card activeSession backdropCard backdropCard-scalable'; html += '
'; html += '
'; html += '
'; html += '
'; html += '
'; - var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem); + const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem); if (imgUrl) { html += '
'; - } else { - html += '
'; - } - html += '
'; - var nowPlayingName = DashboardPage.getNowPlayingName(session); + const nowPlayingName = DashboardPage.getNowPlayingName(session); html += '
'; html += nowPlayingName.html; html += '
'; @@ -267,7 +281,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa html += '
'; if (nowPlayingItem && nowPlayingItem.RunTimeTicks) { - var percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks; + const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks; html += indicators.getProgressHtml(percent, { containerClass: 'playbackProgress' }); @@ -279,7 +293,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa } if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) { - var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1); + const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1); html += indicators.getProgressHtml(percent, { containerClass: 'transcodingProgress' }); @@ -296,7 +310,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa html += '
'; html += '
'; - var btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? '' : ' hide'; + let btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? '' : ' hide'; const playIcon = session.PlayState.IsPaused ? 'pause' : 'play_arrow'; html += ''; @@ -314,7 +328,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa html += '
'; html += '
'; - var userImage = DashboardPage.getUserImage(session); + const userImage = DashboardPage.getUserImage(session); html += userImage ? '
" : '
'; html += '
'; html += DashboardPage.getUsersHtml(session); @@ -328,7 +342,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa } parentElement.insertAdjacentHTML('beforeend', html); - var deadSessionElem = parentElement.querySelector('.deadSession'); + const deadSessionElem = parentElement.querySelector('.deadSession'); if (deadSessionElem) { deadSessionElem.parentNode.removeChild(deadSessionElem); @@ -336,7 +350,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa } function renderRunningTasks(view, tasks) { - var html = ''; + let html = ''; tasks = tasks.filter(function (task) { if ('Idle' != task.State) { return !task.IsHidden; @@ -351,13 +365,13 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa view.querySelector('.runningTasksContainer').classList.add('hide'); } - for (var i = 0, length = tasks.length; i < length; i++) { - var task = tasks[i]; + for (let i = 0, length = tasks.length; i < length; i++) { + const task = tasks[i]; html += '

'; html += task.Name + '
'; if (task.State === 'Running') { - var progress = (task.CurrentProgressPercentage || 0).toFixed(1); + const progress = (task.CurrentProgressPercentage || 0).toFixed(1); html += ''; html += progress + '%'; html += ''; @@ -383,9 +397,9 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa apiClient.sendMessage('ScheduledTasksInfoStop'); }, getSessionNowPlayingStreamInfo: function (session) { - var html = ''; - var showTranscodingInfo = false; - var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); + let html = ''; + let showTranscodingInfo = false; + const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); if (displayPlayMethod === 'DirectStream') { html += globalize.translate('DirectStreaming'); @@ -402,7 +416,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa } if (showTranscodingInfo) { - var line = []; + const line = []; if (session.TranscodingInfo) { if (session.TranscodingInfo.Bitrate) { @@ -434,8 +448,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa return html; }, getSessionNowPlayingTime: function (session) { - var nowPlayingItem = session.NowPlayingItem; - var html = ''; + const nowPlayingItem = session.NowPlayingItem; + let html = ''; if (nowPlayingItem) { if (session.PlayState.PositionTicks) { @@ -459,8 +473,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa return session.Client + ' ' + session.ApplicationVersion; }, getNowPlayingName: function (session) { - var imgUrl = ''; - var nowPlayingItem = session.NowPlayingItem; + let imgUrl = ''; + const nowPlayingItem = session.NowPlayingItem; // FIXME: It seems that, sometimes, server sends date in the future, so date-fns displays messages like 'in less than a minute'. We should fix // how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences if (!nowPlayingItem) { @@ -470,8 +484,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa }; } - var topText = itemHelper.getDisplayName(nowPlayingItem); - var bottomText = ''; + let topText = itemHelper.getDisplayName(nowPlayingItem); + let bottomText = ''; if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) { bottomText = topText; @@ -511,13 +525,13 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa }; }, getUsersHtml: function (session) { - var html = []; + const html = []; if (session.UserId) { html.push(session.UserName); } - for (var i = 0, length = session.AdditionalUsers.length; i < length; i++) { + for (let i = 0, length = session.AdditionalUsers.length; i < length; i++) { html.push(session.AdditionalUsers[i].UserName); } @@ -535,7 +549,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa }, updateSession: function (row, session) { row.classList.remove('deadSession'); - var nowPlayingItem = session.NowPlayingItem; + const nowPlayingItem = session.NowPlayingItem; if (nowPlayingItem) { row.classList.add('playingSession'); @@ -555,7 +569,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa row.querySelector('.btnSessionInfo').classList.add('hide'); } - var btnSessionPlayPause = row.querySelector('.btnSessionPlayPause'); + const btnSessionPlayPause = row.querySelector('.btnSessionPlayPause'); if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== connectionManager.deviceId()) { btnSessionPlayPause.classList.remove('hide'); @@ -573,19 +587,18 @@ 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'); + const nowPlayingName = DashboardPage.getNowPlayingName(session); + const nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo'); if (!(nowPlayingName.image && nowPlayingName.image == nowPlayingInfoElem.getAttribute('data-imgsrc'))) { nowPlayingInfoElem.innerHTML = nowPlayingName.html; nowPlayingInfoElem.setAttribute('data-imgsrc', nowPlayingName.image || ''); } - var playbackProgressElem = row.querySelector('.playbackProgress'); + const playbackProgressElem = row.querySelector('.playbackProgress'); if (nowPlayingItem && nowPlayingItem.RunTimeTicks) { - var percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks; + const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks; playbackProgressElem.outerHTML = indicators.getProgressHtml(percent, { containerClass: 'playbackProgress' }); @@ -595,10 +608,10 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa }); } - var transcodingProgress = row.querySelector('.transcodingProgress'); + const transcodingProgress = row.querySelector('.transcodingProgress'); if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) { - var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1); + const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1); transcodingProgress.outerHTML = indicators.getProgressHtml(percent, { containerClass: 'transcodingProgress' }); @@ -608,8 +621,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa }); } - var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || ''; - var imgElem = row.querySelector('.sessionNowPlayingContent'); + const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || ''; + const imgElem = row.querySelector('.sessionNowPlayingContent'); if (imgUrl != imgElem.getAttribute('data-src')) { imgElem.style.backgroundImage = imgUrl ? "url('" + imgUrl + "')" : ''; @@ -623,7 +636,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa } }, getClientImage: function (connection) { - var iconUrl = imageHelper.getDeviceIcon(connection); + const iconUrl = imageHelper.getDeviceIcon(connection); return ""; }, getNowPlayingImageUrl: function (item) { @@ -653,7 +666,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa }); } - var imageTags = (item || {}).ImageTags || {}; + const imageTags = (item || {}).ImageTags || {}; if (item && imageTags.Thumb) { return ApiClient.getScaledImageUrl(item.Id, { @@ -707,20 +720,20 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa }, systemUpdateTaskKey: 'SystemUpdateTask', stopTask: function (btn, id) { - var page = dom.parentWithClass(btn, 'page'); + const page = dom.parentWithClass(btn, 'page'); ApiClient.stopScheduledTask(id).then(function () { pollForInfo(page, ApiClient); }); }, restart: function (btn) { - require(['confirm'], function (confirm) { + import('confirm').then(({default: confirm}) => { confirm({ title: globalize.translate('HeaderRestart'), text: globalize.translate('MessageConfirmRestart'), confirmText: globalize.translate('ButtonRestart'), primary: 'delete' }).then(function () { - var page = dom.parentWithClass(btn, 'page'); + const page = dom.parentWithClass(btn, 'page'); page.querySelector('#btnRestartServer').disabled = true; page.querySelector('#btnShutdown').disabled = true; ApiClient.restartServer(); @@ -728,14 +741,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa }); }, shutdown: function (btn) { - require(['confirm'], function (confirm) { + import('confirm').then(({default: confirm}) => { confirm({ title: globalize.translate('HeaderShutdown'), text: globalize.translate('MessageConfirmShutdown'), confirmText: globalize.translate('ButtonShutdown'), primary: 'delete' }).then(function () { - var page = dom.parentWithClass(btn, 'page'); + const page = dom.parentWithClass(btn, 'page'); page.querySelector('#btnRestartServer').disabled = true; page.querySelector('#btnShutdown').disabled = true; ApiClient.shutdownServer(); @@ -743,7 +756,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa }); } }; - return function (view, params) { + export default function (view, params) { function onRestartRequired(evt, apiClient) { console.debug('onRestartRequired not implemented', evt, apiClient); } @@ -782,11 +795,11 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa } } - var serverId = ApiClient.serverId(); + const serverId = ApiClient.serverId(); view.querySelector('.activeDevices').addEventListener('click', onActiveDevicesClick); view.addEventListener('viewshow', function () { - var page = this; - var apiClient = ApiClient; + const page = this; + const apiClient = ApiClient; if (apiClient) { loading.show(); @@ -823,7 +836,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa } }); view.addEventListener('viewbeforehide', function () { - var apiClient = ApiClient; + const apiClient = ApiClient; events.off(serverNotifications, 'RestartRequired', onRestartRequired); events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown); events.off(serverNotifications, 'ServerRestarting', onServerRestarting); @@ -837,18 +850,19 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa } }); view.addEventListener('viewdestroy', function () { - var page = this; - var userActivityLog = page.userActivityLog; + const page = this; + const userActivityLog = page.userActivityLog; if (userActivityLog) { userActivityLog.destroy(); } - var serverActivityLog = page.serverActivityLog; + const serverActivityLog = page.serverActivityLog; if (serverActivityLog) { serverActivityLog.destroy(); } }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/devices/device.js b/src/controllers/dashboard/devices/device.js index 9ff3f5902e..7faaee2494 100644 --- a/src/controllers/dashboard/devices/device.js +++ b/src/controllers/dashboard/devices/device.js @@ -1,5 +1,10 @@ -define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function (loading, libraryMenu, dom) { - 'use strict'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import dom from 'dom'; +import 'emby-input'; +import 'emby-button'; + +/* eslint-disable indent */ function load(page, device, deviceOptions) { page.querySelector('#txtCustomName', page).value = deviceOptions.CustomName || ''; @@ -7,13 +12,13 @@ define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function } function loadData() { - var page = this; + const page = this; loading.show(); - var id = getParameterByName('id'); - var promise1 = ApiClient.getJSON(ApiClient.getUrl('Devices/Info', { + const id = getParameterByName('id'); + const promise1 = ApiClient.getJSON(ApiClient.getUrl('Devices/Info', { Id: id })); - var promise2 = ApiClient.getJSON(ApiClient.getUrl('Devices/Options', { + const promise2 = ApiClient.getJSON(ApiClient.getUrl('Devices/Options', { Id: id })); Promise.all([promise1, promise2]).then(function (responses) { @@ -23,7 +28,7 @@ define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function } function save(page) { - var id = getParameterByName('id'); + const id = getParameterByName('id'); ApiClient.ajax({ url: ApiClient.getUrl('Devices/Options', { Id: id @@ -37,14 +42,15 @@ define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function } function onSubmit(e) { - var form = this; + const form = this; save(dom.parentWithClass(form, 'page')); e.preventDefault(); return false; } - return function (view, params) { + export default function (view, params) { view.querySelector('form').addEventListener('submit', onSubmit); view.addEventListener('viewshow', loadData); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/devices/devices.js b/src/controllers/dashboard/devices/devices.js index 0dea81c756..9f05d84713 100644 --- a/src/controllers/dashboard/devices/devices.js +++ b/src/controllers/dashboard/devices/devices.js @@ -1,14 +1,24 @@ -define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'date-fns', 'dfnshelper', 'emby-button', 'emby-itemscontainer', 'cardStyle'], function (loading, dom, libraryMenu, globalize, imageHelper, datefns, dfnshelper) { - 'use strict'; +import loading from 'loading'; +import dom from 'dom'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; +import imageHelper from 'scripts/imagehelper'; +import * as datefns from 'date-fns'; +import dfnshelper from 'dfnshelper'; +import 'emby-button'; +import 'emby-itemscontainer'; +import 'cardStyle'; + +/* eslint-disable indent */ function canDelete(deviceId) { return deviceId !== ApiClient.deviceId(); } function deleteDevice(page, id) { - var msg = globalize.translate('DeleteDeviceConfirmation'); + const msg = globalize.translate('DeleteDeviceConfirmation'); - require(['confirm'], function (confirm) { + import('confirm').then(({default: confirm}) => { confirm({ text: msg, title: globalize.translate('HeaderDeleteDevice'), @@ -29,7 +39,7 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da } function showDeviceMenu(view, btn, deviceId) { - var menuItems = []; + let menuItems = []; if (canEdit) { menuItems.push({ @@ -47,7 +57,7 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da }); } - require(['actionsheet'], function (actionsheet) { + import('actionsheet').then(({default: actionsheet}) => { actionsheet.show({ items: menuItems, positionTo: btn, @@ -66,15 +76,15 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da } function load(page, devices) { - var html = ''; + let html = ''; html += devices.map(function (device) { - var deviceHtml = ''; + let deviceHtml = ''; deviceHtml += "

"; deviceHtml += '
'; deviceHtml += '
'; deviceHtml += '
'; deviceHtml += ''; - var iconUrl = imageHelper.getDeviceIcon(device); + const iconUrl = imageHelper.getDeviceIcon(device); if (iconUrl) { deviceHtml += '
"; @@ -124,10 +134,10 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da }); } - var canEdit = ApiClient.isMinServerVersion('3.4.1.31'); - return function (view, params) { + const canEdit = ApiClient.isMinServerVersion('3.4.1.31'); + export default function (view, params) { view.querySelector('.devicesList').addEventListener('click', function (e) { - var btnDeviceMenu = dom.parentWithClass(e.target, 'btnDeviceMenu'); + const btnDeviceMenu = dom.parentWithClass(e.target, 'btnDeviceMenu'); if (btnDeviceMenu) { showDeviceMenu(view, btnDeviceMenu, btnDeviceMenu.getAttribute('data-id')); @@ -136,5 +146,6 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da view.addEventListener('viewshow', function () { loadData(this); }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/dlna/profile.js b/src/controllers/dashboard/dlna/profile.js index 81eb099f50..003cb88245 100644 --- a/src/controllers/dashboard/dlna/profile.js +++ b/src/controllers/dashboard/dlna/profile.js @@ -1,10 +1,18 @@ -define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-input', 'emby-checkbox', 'listViewStyle', 'emby-button'], function ($, loading, globalize) { - 'use strict'; +import $ from 'jQuery'; +import loading from 'loading'; +import globalize from 'globalize'; +import 'emby-select'; +import 'emby-button'; +import 'emby-input'; +import 'emby-checkbox'; +import 'listViewStyle'; + +/* eslint-disable indent */ function loadProfile(page) { loading.show(); - var promise1 = getProfile(); - var promise2 = ApiClient.getUsers(); + const promise1 = getProfile(); + const promise2 = ApiClient.getUsers(); Promise.all([promise1, promise2]).then(function (responses) { currentProfile = responses[0]; renderProfile(page, currentProfile, responses[1]); @@ -13,8 +21,8 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } function getProfile() { - var id = getParameterByName('id'); - var url = id ? 'Dlna/Profiles/' + id : 'Dlna/Profiles/Default'; + const id = getParameterByName('id'); + const url = id ? 'Dlna/Profiles/' + id : 'Dlna/Profiles/Default'; return ApiClient.getJSON(ApiClient.getUrl(url)); } @@ -23,10 +31,10 @@ 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 || {}; + const idInfo = profile.Identification || {}; renderIdentificationHeaders(page, idInfo.Headers || []); renderSubtitleProfiles(page, profile.SubtitleProfiles || []); $('#txtInfoFriendlyName', page).val(profile.FriendlyName || ''); @@ -51,11 +59,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 || ''); @@ -65,7 +73,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in profile.ContainerProfiles = profile.ContainerProfiles || []; profile.CodecProfiles = profile.CodecProfiles || []; profile.ResponseProfiles = profile.ResponseProfiles || []; - var usersHtml = '' + users.map(function (u) { + const usersHtml = '' + users.map(function (u) { return ''; }).join(''); $('#selectUser', page).html(usersHtml).val(profile.UserId || ''); @@ -73,9 +81,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } function renderIdentificationHeaders(page, headers) { - var index = 0; - var html = '
' + headers.map(function (h) { - var li = '
'; + let index = 0; + const html = '
' + headers.map(function (h) { + let li = '
'; li += ''; li += '
'; li += '

' + h.Name + ': ' + (h.Value || '') + '

'; @@ -86,9 +94,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in index++; return li; }).join('') + '
'; - var elem = $('.httpHeaderIdentificationList', page).html(html).trigger('create'); + const elem = $('.httpHeaderIdentificationList', page).html(html).trigger('create'); $('.btnDeleteIdentificationHeader', elem).on('click', function () { - var itemIndex = parseInt(this.getAttribute('data-index')); + const itemIndex = parseInt(this.getAttribute('data-index')); currentProfile.Identification.Headers.splice(itemIndex, 1); renderIdentificationHeaders(page, currentProfile.Identification.Headers); }); @@ -106,7 +114,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in isSubProfileNew = null == header; header = header || {}; currentSubProfile = header; - var popup = $('#identificationHeaderPopup', page); + const popup = $('#identificationHeaderPopup', page); $('#txtIdentificationHeaderName', popup).val(header.Name || ''); $('#txtIdentificationHeaderValue', popup).val(header.Value || ''); $('#selectMatchType', popup).val(header.Match || 'Equals'); @@ -130,8 +138,8 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } function renderXmlDocumentAttributes(page, attribute) { - var html = '
' + attribute.map(function (h) { - var li = '
'; + const html = '
' + attribute.map(function (h) { + let li = '
'; li += ''; li += '
'; li += '

' + h.Name + ' = ' + (h.Value || '') + '

'; @@ -139,9 +147,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in li += ''; return li += '
'; }).join('') + '
'; - var elem = $('.xmlDocumentAttributeList', page).html(html).trigger('create'); + const elem = $('.xmlDocumentAttributeList', page).html(html).trigger('create'); $('.btnDeleteXmlAttribute', elem).on('click', function () { - var itemIndex = parseInt(this.getAttribute('data-index')); + const itemIndex = parseInt(this.getAttribute('data-index')); currentProfile.XmlRootAttributes.splice(itemIndex, 1); renderXmlDocumentAttributes(page, currentProfile.XmlRootAttributes); }); @@ -151,7 +159,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in isSubProfileNew = null == attribute; attribute = attribute || {}; currentSubProfile = attribute; - var popup = $('#xmlAttributePopup', page); + const popup = $('#xmlAttributePopup', page); $('#txtXmlAttributeName', popup).val(attribute.Name || ''); $('#txtXmlAttributeValue', popup).val(attribute.Value || ''); openPopup(popup[0]); @@ -171,9 +179,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } function renderSubtitleProfiles(page, profiles) { - var index = 0; - var html = '
' + profiles.map(function (h) { - var li = '
'; + let index = 0; + const html = '
' + profiles.map(function (h) { + let li = '
'; li += ''; li += '
'; li += '

' + (h.Format || '') + '

'; @@ -183,14 +191,14 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in index++; return li; }).join('') + '
'; - var elem = $('.subtitleProfileList', page).html(html).trigger('create'); + const elem = $('.subtitleProfileList', page).html(html).trigger('create'); $('.btnDeleteProfile', elem).on('click', function () { - var itemIndex = parseInt(this.getAttribute('data-index')); + const itemIndex = parseInt(this.getAttribute('data-index')); currentProfile.SubtitleProfiles.splice(itemIndex, 1); renderSubtitleProfiles(page, currentProfile.SubtitleProfiles); }); $('.lnkEditSubProfile', elem).on('click', function () { - var itemIndex = parseInt(this.getAttribute('data-index')); + const itemIndex = parseInt(this.getAttribute('data-index')); editSubtitleProfile(page, currentProfile.SubtitleProfiles[itemIndex]); }); } @@ -199,7 +207,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in isSubProfileNew = null == profile; profile = profile || {}; currentSubProfile = profile; - var popup = $('#subtitleProfilePopup', page); + const popup = $('#subtitleProfilePopup', page); $('#txtSubtitleProfileFormat', popup).val(profile.Format || ''); $('#selectSubtitleProfileMethod', popup).val(profile.Method || ''); $('#selectSubtitleProfileDidlMode', popup).val(profile.DidlMode || ''); @@ -244,12 +252,12 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } function renderDirectPlayProfiles(page, profiles) { - var html = ''; + let html = ''; html += '
    '; - var currentType; + let currentType; - for (var i = 0, length = profiles.length; i < length; i++) { - var profile = profiles[i]; + for (let i = 0, length = profiles.length; i < length; i++) { + const profile = profiles[i]; if (profile.Type !== currentType) { html += '
  • ' + profile.Type + '
    • '; @@ -275,13 +283,13 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } html += '
'; - var elem = $('.directPlayProfiles', page).html(html).trigger('create'); + const elem = $('.directPlayProfiles', page).html(html).trigger('create'); $('.btnDeleteProfile', elem).on('click', function () { - var index = this.getAttribute('data-profileindex'); + const index = this.getAttribute('data-profileindex'); deleteDirectPlayProfile(page, index); }); $('.lnkEditSubProfile', elem).on('click', function () { - var index = parseInt(this.getAttribute('data-profileindex')); + const index = parseInt(this.getAttribute('data-profileindex')); editDirectPlayProfile(page, currentProfile.DirectPlayProfiles[index]); }); } @@ -295,7 +303,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in isSubProfileNew = null == directPlayProfile; directPlayProfile = directPlayProfile || {}; currentSubProfile = directPlayProfile; - var popup = $('#popupEditDirectPlayProfile', page); + const popup = $('#popupEditDirectPlayProfile', page); $('#selectDirectPlayProfileType', popup).val(directPlayProfile.Type || 'Video').trigger('change'); $('#txtDirectPlayContainer', popup).val(directPlayProfile.Container || ''); $('#txtDirectPlayAudioCodec', popup).val(directPlayProfile.AudioCodec || ''); @@ -304,12 +312,12 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } function renderTranscodingProfiles(page, profiles) { - var html = ''; + let html = ''; html += '
    '; - var currentType; + let currentType; - for (var i = 0, length = profiles.length; i < length; i++) { - var profile = profiles[i]; + for (let i = 0, length = profiles.length; i < length; i++) { + let profile = profiles[i]; if (profile.Type !== currentType) { html += '
  • ' + profile.Type + '
    • '; @@ -336,13 +344,13 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } html += '
'; - var elem = $('.transcodingProfiles', page).html(html).trigger('create'); + const elem = $('.transcodingProfiles', page).html(html).trigger('create'); $('.btnDeleteProfile', elem).on('click', function () { - var index = this.getAttribute('data-profileindex'); + const index = this.getAttribute('data-profileindex'); deleteTranscodingProfile(page, index); }); $('.lnkEditSubProfile', elem).on('click', function () { - var index = parseInt(this.getAttribute('data-profileindex')); + const index = parseInt(this.getAttribute('data-profileindex')); editTranscodingProfile(page, currentProfile.TranscodingProfiles[index]); }); } @@ -351,15 +359,15 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in isSubProfileNew = null == transcodingProfile; transcodingProfile = transcodingProfile || {}; currentSubProfile = transcodingProfile; - var popup = $('#transcodingProfilePopup', page); + const popup = $('#transcodingProfilePopup', page); $('#selectTranscodingProfileType', popup).val(transcodingProfile.Type || 'Video').trigger('change'); $('#txtTranscodingContainer', popup).val(transcodingProfile.Container || ''); $('#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 +384,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); @@ -390,12 +398,12 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } function renderContainerProfiles(page, profiles) { - var html = ''; + let html = ''; html += '
    '; - var currentType; + let currentType; - for (var i = 0, length = profiles.length; i < length; i++) { - var profile = profiles[i]; + for (let i = 0, length = profiles.length; i < length; i++) { + let profile = profiles[i]; if (profile.Type !== currentType) { html += '
  • ' + profile.Type + '
    • '; @@ -420,13 +428,13 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } html += '
'; - var elem = $('.containerProfiles', page).html(html).trigger('create'); + const elem = $('.containerProfiles', page).html(html).trigger('create'); $('.btnDeleteProfile', elem).on('click', function () { - var index = this.getAttribute('data-profileindex'); + const index = this.getAttribute('data-profileindex'); deleteContainerProfile(page, index); }); $('.lnkEditSubProfile', elem).on('click', function () { - var index = parseInt(this.getAttribute('data-profileindex')); + const index = parseInt(this.getAttribute('data-profileindex')); editContainerProfile(page, currentProfile.ContainerProfiles[index]); }); } @@ -440,7 +448,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in isSubProfileNew = null == containerProfile; containerProfile = containerProfile || {}; currentSubProfile = containerProfile; - var popup = $('#containerProfilePopup', page); + const popup = $('#containerProfilePopup', page); $('#selectContainerProfileType', popup).val(containerProfile.Type || 'Video').trigger('change'); $('#txtContainerProfileContainer', popup).val(containerProfile.Container || ''); $('.radioTabButton:first', popup).trigger('click'); @@ -461,13 +469,13 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } function renderCodecProfiles(page, profiles) { - var html = ''; + let html = ''; html += '
    '; - var currentType; + let currentType; - for (var i = 0, length = profiles.length; i < length; i++) { - var profile = profiles[i]; - var type = profile.Type.replace('VideoAudio', 'Video Audio'); + for (let i = 0, length = profiles.length; i < length; i++) { + let profile = profiles[i]; + const type = profile.Type.replace('VideoAudio', 'Video Audio'); if (type !== currentType) { html += '
  • ' + type + '
    • '; @@ -492,13 +500,13 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } html += '
'; - var elem = $('.codecProfiles', page).html(html).trigger('create'); + const elem = $('.codecProfiles', page).html(html).trigger('create'); $('.btnDeleteProfile', elem).on('click', function () { - var index = this.getAttribute('data-profileindex'); + const index = this.getAttribute('data-profileindex'); deleteCodecProfile(page, index); }); $('.lnkEditSubProfile', elem).on('click', function () { - var index = parseInt(this.getAttribute('data-profileindex')); + const index = parseInt(this.getAttribute('data-profileindex')); editCodecProfile(page, currentProfile.CodecProfiles[index]); }); } @@ -512,7 +520,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in isSubProfileNew = null == codecProfile; codecProfile = codecProfile || {}; currentSubProfile = codecProfile; - var popup = $('#codecProfilePopup', page); + const popup = $('#codecProfilePopup', page); $('#selectCodecProfileType', popup).val(codecProfile.Type || 'Video').trigger('change'); $('#txtCodecProfileCodec', popup).val(codecProfile.Codec || ''); $('.radioTabButton:first', popup).trigger('click'); @@ -533,12 +541,12 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } function renderResponseProfiles(page, profiles) { - var html = ''; + let html = ''; html += '
    '; - var currentType; + let currentType; - for (var i = 0, length = profiles.length; i < length; i++) { - var profile = profiles[i]; + for (let i = 0, length = profiles.length; i < length; i++) { + const profile = profiles[i]; if (profile.Type !== currentType) { html += '
  • ' + profile.Type + '
    • '; @@ -572,13 +580,13 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in } html += '
'; - var elem = $('.mediaProfiles', page).html(html).trigger('create'); + const elem = $('.mediaProfiles', page).html(html).trigger('create'); $('.btnDeleteProfile', elem).on('click', function () { - var index = this.getAttribute('data-profileindex'); + const index = this.getAttribute('data-profileindex'); deleteResponseProfile(page, index); }); $('.lnkEditSubProfile', elem).on('click', function () { - var index = parseInt(this.getAttribute('data-profileindex')); + const index = parseInt(this.getAttribute('data-profileindex')); editResponseProfile(page, currentProfile.ResponseProfiles[index]); }); } @@ -592,7 +600,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in isSubProfileNew = null == responseProfile; responseProfile = responseProfile || {}; currentSubProfile = responseProfile; - var popup = $('#responseProfilePopup', page); + const popup = $('#responseProfilePopup', page); $('#selectResponseProfileType', popup).val(responseProfile.Type || 'Video').trigger('change'); $('#txtResponseProfileContainer', popup).val(responseProfile.Container || ''); $('#txtResponseProfileAudioCodec', popup).val(responseProfile.AudioCodec || ''); @@ -618,7 +626,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in function saveProfile(page, profile) { updateProfile(page, profile); - var id = getParameterByName('id'); + const id = getParameterByName('id'); if (id) { ApiClient.ajax({ @@ -627,7 +635,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in data: JSON.stringify(profile), contentType: 'application/json' }).then(function () { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast('Settings saved.'); }); }, Dashboard.processErrorResponse); @@ -647,8 +655,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 +683,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(); @@ -687,18 +695,18 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in profile.UserId = $('#selectUser', page).val(); } - var currentProfile; - var currentSubProfile; - var isSubProfileNew; - var allText = globalize.translate('LabelAll'); + let currentProfile; + let currentSubProfile; + let isSubProfileNew; + const allText = globalize.translate('LabelAll'); $(document).on('pageinit', '#dlnaProfilePage', function () { - var page = this; + const page = this; $('.radioTabButton', page).on('click', function () { $(this).siblings().removeClass('ui-btn-active'); $(this).addClass('ui-btn-active'); - var value = 'A' == this.tagName ? this.getAttribute('data-value') : this.value; - var elem = $('.' + value, page); + const value = 'A' == this.tagName ? this.getAttribute('data-value') : this.value; + const elem = $('.' + value, page); elem.siblings('.tabContent').hide(); elem.show(); }); @@ -783,7 +791,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in $('.xmlAttributeForm').off('submit', DlnaProfilePage.onXmlAttributeFormSubmit).on('submit', DlnaProfilePage.onXmlAttributeFormSubmit); $('.subtitleProfileForm').off('submit', DlnaProfilePage.onSubtitleProfileFormSubmit).on('submit', DlnaProfilePage.onSubtitleProfileFormSubmit); }).on('pageshow', '#dlnaProfilePage', function () { - var page = this; + const page = this; $('#radioInfo', page).trigger('click'); loadProfile(page); }); @@ -826,4 +834,5 @@ define(['jQuery', 'loading', 'globalize', 'emby-select', 'emby-button', 'emby-in return false; } }; -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/dlna/profiles.js b/src/controllers/dashboard/dlna/profiles.js index fb4caadeb9..510128be4b 100644 --- a/src/controllers/dashboard/dlna/profiles.js +++ b/src/controllers/dashboard/dlna/profiles.js @@ -1,5 +1,11 @@ -define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby-button'], function ($, globalize, loading, libraryMenu) { - 'use strict'; +import $ from 'jQuery'; +import globalize from 'globalize'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import 'listViewStyle'; +import 'emby-button'; + +/* eslint-disable indent */ function loadProfiles(page) { loading.show(); @@ -23,14 +29,14 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby- } function renderProfiles(page, element, profiles) { - var html = ''; + let html = ''; if (profiles.length) { html += '
'; } - for (var i = 0, length = profiles.length; i < length; i++) { - var profile = profiles[i]; + for (let i = 0, length = profiles.length; i < length; i++) { + let profile = profiles[i]; html += '
'; html += ''; html += '
'; @@ -52,13 +58,13 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby- element.innerHTML = html; $('.btnDeleteProfile', element).on('click', function () { - var id = this.getAttribute('data-profileid'); + const id = this.getAttribute('data-profileid'); deleteProfile(page, id); }); } function deleteProfile(page, id) { - require(['confirm'], function (confirm) { + import('confirm').then(({default: confirm}) => { confirm(globalize.translate('MessageConfirmProfileDeletion'), globalize.translate('HeaderConfirmProfileDeletion')).then(function () { loading.show(); ApiClient.ajax({ @@ -86,4 +92,5 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby- libraryMenu.setTabs('dlna', 1, getTabs); loadProfiles(this); }); -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/dlna/settings.js b/src/controllers/dashboard/dlna/settings.js index da254c0bd9..9e7d78d799 100644 --- a/src/controllers/dashboard/dlna/settings.js +++ b/src/controllers/dashboard/dlna/settings.js @@ -1,14 +1,18 @@ -define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, libraryMenu, globalize) { - 'use strict'; +import $ from 'jQuery'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; + +/* eslint-disable indent */ function loadPage(page, config, users) { 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) { + const usersHtml = users.map(function (u) { return ''; }).join(''); $('#selectUser', page).html(usersHtml).val(config.DefaultUserId || ''); @@ -17,13 +21,13 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, function onSubmit() { loading.show(); - var form = this; + const form = this; ApiClient.getNamedConfiguration('dlna').then(function (config) { 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); @@ -46,11 +50,12 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, }).on('pageshow', '#dlnaSettingsPage', function () { libraryMenu.setTabs('dlna', 0, getTabs); loading.show(); - var page = this; - var promise1 = ApiClient.getNamedConfiguration('dlna'); - var promise2 = ApiClient.getUsers(); + const page = this; + const promise1 = ApiClient.getNamedConfiguration('dlna'); + const promise2 = ApiClient.getUsers(); Promise.all([promise1, promise2]).then(function (responses) { loadPage(page, responses[0], responses[1]); }); }); -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/encodingsettings.js b/src/controllers/dashboard/encodingsettings.js index 65f4e4401d..aac18360ac 100644 --- a/src/controllers/dashboard/encodingsettings.js +++ b/src/controllers/dashboard/encodingsettings.js @@ -1,10 +1,17 @@ -define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, loading, globalize, dom, libraryMenu) { - 'use strict'; +import $ from 'jQuery'; +import loading from 'loading'; +import globalize from 'globalize'; +import dom from 'dom'; +import libraryMenu from 'libraryMenu'; + +/* eslint-disable indent */ function loadPage(page, config, systemInfo) { 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); @@ -25,10 +32,10 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo function onSaveEncodingPathFailure(response) { loading.hide(); - var msg = ''; + let msg = ''; msg = globalize.translate('FFmpegSavePathNotFound'); - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert(msg); }); } @@ -47,9 +54,9 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo } function onSubmit() { - var form = this; + const form = this; - var onDecoderConfirmed = function () { + const onDecoderConfirmed = function () { loading.show(); ApiClient.getNamedConfiguration('encoding').then(function (config) { config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val(); @@ -67,11 +74,13 @@ 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); }, function () { - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert(globalize.translate('DefaultErrorMessage')); }); @@ -81,7 +90,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo }; if ($('#selectVideoDecoder', form).val()) { - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert({ title: globalize.translate('TitleHardwareAcceleration'), text: globalize.translate('HardwareAccelerationWarning') @@ -96,7 +105,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo function setDecodingCodecsVisible(context, value) { value = value || ''; - var any; + let any; Array.prototype.forEach.call(context.querySelectorAll('.chkDecodeCodec'), function (c) { if (-1 === c.getAttribute('data-types').split(',').indexOf(value)) { dom.parentWithTag(c, 'LABEL').classList.add('hide'); @@ -127,7 +136,7 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo } $(document).on('pageinit', '#encodingSettingsPage', function () { - var page = this; + const page = this; page.querySelector('#selectVideoDecoder').addEventListener('change', function () { if ('vaapi' == this.value) { page.querySelector('.fldVaapiDevice').classList.remove('hide'); @@ -146,8 +155,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo setDecodingCodecsVisible(page, this.value); }); $('#btnSelectEncoderPath', page).on('click.selectDirectory', function () { - require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + import('directorybrowser').then(({default: directoryBrowser}) => { + const picker = new directoryBrowser(); picker.show({ includeFiles: true, callback: function (path) { @@ -161,8 +170,8 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo }); }); $('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () { - require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + import('directorybrowser').then(({default: directoryBrowser}) => { + const picker = new directoryBrowser(); picker.show({ callback: function (path) { if (path) { @@ -181,11 +190,12 @@ define(['jQuery', 'loading', 'globalize', 'dom', 'libraryMenu'], function ($, lo }).on('pageshow', '#encodingSettingsPage', function () { loading.show(); libraryMenu.setTabs('playback', 0, getTabs); - var page = this; + const page = this; ApiClient.getNamedConfiguration('encoding').then(function (config) { ApiClient.getSystemInfo().then(function (systemInfo) { loadPage(page, config, systemInfo); }); }); }); -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/general.js b/src/controllers/dashboard/general.js index f215ace28b..8e30749aba 100644 --- a/src/controllers/dashboard/general.js +++ b/src/controllers/dashboard/general.js @@ -1,5 +1,13 @@ -define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emby-input', 'emby-select', 'emby-button'], function ($, loading, globalize) { - 'use strict'; +import $ from 'jQuery'; +import loading from 'loading'; +import globalize from 'globalize'; +import 'emby-checkbox'; +import 'emby-textarea'; +import 'emby-input'; +import 'emby-select'; +import 'emby-button'; + +/* eslint-disable indent */ function loadPage(page, config, languageOptions, systemInfo) { page.querySelector('#txtServerName').value = systemInfo.ServerName; @@ -16,7 +24,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emb function onSubmit() { loading.show(); - var form = this; + const form = this; $(form).parents('.page'); ApiClient.getServerConfiguration().then(function (config) { config.ServerName = $('#txtServerName', form).val(); @@ -24,7 +32,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emb config.CachePath = form.querySelector('#txtCachePath').value; config.MetadataPath = $('#txtMetadataPath', form).val(); config.MetadataNetworkPath = $('#txtMetadataNetworkPath', form).val(); - var requiresReload = config.UICulture !== currentLanguage; + let requiresReload = config.UICulture !== currentLanguage; ApiClient.updateServerConfiguration(config).then(function() { ApiClient.getNamedConfiguration(brandingConfigKey).then(function(brandingConfig) { brandingConfig.LoginDisclaimer = form.querySelector('#txtLoginDisclaimer').value; @@ -43,7 +51,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emb }); }); }, function () { - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert(globalize.translate('DefaultErrorMessage')); }); @@ -53,13 +61,13 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emb return false; } - var currentBrandingOptions; - var currentLanguage; - var brandingConfigKey = 'branding'; - return function (view, params) { + let currentBrandingOptions; + let currentLanguage; + const brandingConfigKey = 'branding'; + export default function (view, params) { $('#btnSelectCachePath', view).on('click.selectDirectory', function () { - require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + import('directorybrowser').then(({default: directoryBrowser}) => { + const picker = new directoryBrowser(); picker.show({ callback: function (path) { if (path) { @@ -75,8 +83,8 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emb }); }); $('#btnSelectMetadataPath', view).on('click.selectDirectory', function () { - require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + import('directorybrowser').then(({default: directoryBrowser}) => { + const picker = new directoryBrowser(); picker.show({ path: $('#txtMetadataPath', view).val(), networkSharePath: $('#txtMetadataNetworkPath', view).val(), @@ -100,9 +108,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emb }); $('.dashboardGeneralForm', view).off('submit', onSubmit).on('submit', onSubmit); view.addEventListener('viewshow', function () { - var promiseConfig = ApiClient.getServerConfiguration(); - var promiseLanguageOptions = ApiClient.getJSON(ApiClient.getUrl('Localization/Options')); - var promiseSystemInfo = ApiClient.getSystemInfo(); + const promiseConfig = ApiClient.getServerConfiguration(); + const promiseLanguageOptions = ApiClient.getJSON(ApiClient.getUrl('Localization/Options')); + const promiseSystemInfo = ApiClient.getSystemInfo(); Promise.all([promiseConfig, promiseLanguageOptions, promiseSystemInfo]).then(function (responses) { loadPage(view, responses[0], responses[1], responses[2]); }); @@ -112,5 +120,6 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-textarea', 'emb view.querySelector('#txtCustomCss').value = config.CustomCss || ''; }); }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/librarydisplay.js b/src/controllers/dashboard/librarydisplay.js index a820c37528..2269e19c44 100644 --- a/src/controllers/dashboard/librarydisplay.js +++ b/src/controllers/dashboard/librarydisplay.js @@ -1,5 +1,10 @@ -define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', 'emby-button', 'emby-button'], function(globalize, loading, libraryMenu) { - 'use strict'; +import globalize from 'globalize'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import 'emby-checkbox'; +import 'emby-button'; + +/* eslint-disable indent */ function getTabs() { return [{ @@ -17,7 +22,7 @@ define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', 'emby-button', ' }]; } - return function(view, params) { + export default function(view, params) { function loadData() { ApiClient.getServerConfiguration().then(function(config) { view.querySelector('.chkFolderView').checked = config.EnableFolderView; @@ -33,7 +38,7 @@ define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', 'emby-button', ' view.querySelector('form').addEventListener('submit', function(e) { loading.show(); - var form = this; + const form = this; ApiClient.getServerConfiguration().then(function(config) { config.EnableFolderView = form.querySelector('.chkFolderView').checked; config.EnableGroupingIntoCollections = form.querySelector('.chkGroupMoviesIntoCollections').checked; @@ -63,5 +68,6 @@ define(['globalize', 'loading', 'libraryMenu', 'emby-checkbox', 'emby-button', ' } }); }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/logs.js b/src/controllers/dashboard/logs.js index e0b000a130..7bf2785d50 100644 --- a/src/controllers/dashboard/logs.js +++ b/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 */ diff --git a/src/controllers/dashboard/mediaLibrary.js b/src/controllers/dashboard/mediaLibrary.js index 06eba37cbd..0b01a9488f 100644 --- a/src/controllers/dashboard/mediaLibrary.js +++ b/src/controllers/dashboard/mediaLibrary.js @@ -1,9 +1,20 @@ -define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'globalize', 'dom', 'indicators', 'scripts/imagehelper', 'cardStyle', 'emby-itemrefreshindicator'], function ($, appHost, taskButton, loading, libraryMenu, globalize, dom, indicators, imageHelper) { - 'use strict'; +import $ from 'jQuery'; +import appHost from 'apphost'; +import taskButton from 'scripts/taskbutton'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; +import dom from 'dom'; +import indicators from 'indicators'; +import imageHelper from 'scripts/imagehelper'; +import 'cardStyle'; +import 'emby-itemrefreshindicator'; + +/* eslint-disable indent */ function addVirtualFolder(page) { - require(['medialibrarycreator'], function (medialibrarycreator) { - new medialibrarycreator().show({ + import('medialibrarycreator').then(({default: medialibrarycreator}) => { + new medialibrarycreator({ collectionTypeOptions: getCollectionTypeOptions().filter(function (f) { return !f.hidden; }), @@ -17,8 +28,8 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } function editVirtualFolder(page, virtualFolder) { - require(['medialibraryeditor'], function (medialibraryeditor) { - new medialibraryeditor().show({ + import('medialibraryeditor').then(({default: medialibraryeditor}) => { + new medialibraryeditor({ refresh: shouldRefreshLibraryAfterChanges(page), library: virtualFolder }).then(function (hasChanges) { @@ -30,23 +41,21 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } function deleteVirtualFolder(page, virtualFolder) { - var msg = globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder'); + let msg = globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder'); if (virtualFolder.Locations.length) { msg += '

' + globalize.translate('MessageTheFollowingLocationWillBeRemovedFromLibrary') + '

'; msg += virtualFolder.Locations.join('
'); } - require(['confirm'], function (confirm) { + import('confirm').then(({default: confirm}) => { confirm({ - text: msg, title: globalize.translate('HeaderRemoveMediaFolder'), confirmText: globalize.translate('Delete'), primary: 'delete' - }).then(function () { - var refreshAfterChange = shouldRefreshLibraryAfterChanges(page); + const refreshAfterChange = shouldRefreshLibraryAfterChanges(page); ApiClient.removeVirtualFolder(virtualFolder.Name, refreshAfterChange).then(function () { reloadLibrary(page); }); @@ -55,7 +64,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } function refreshVirtualFolder(page, virtualFolder) { - require(['refreshDialog'], function (refreshDialog) { + import('refreshDialog').then(({default: refreshDialog}) => { new refreshDialog({ itemIds: [virtualFolder.ItemId], serverId: ApiClient.serverId(), @@ -65,13 +74,13 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } function renameVirtualFolder(page, virtualFolder) { - require(['prompt'], function (prompt) { + import('prompt').then(({default: prompt}) => { prompt({ label: globalize.translate('LabelNewName'), confirmText: globalize.translate('ButtonRename') }).then(function (newName) { if (newName && newName != virtualFolder.Name) { - var refreshAfterChange = shouldRefreshLibraryAfterChanges(page); + const refreshAfterChange = shouldRefreshLibraryAfterChanges(page); ApiClient.renameVirtualFolder(virtualFolder.Name, newName, refreshAfterChange).then(function () { reloadLibrary(page); }); @@ -81,10 +90,10 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } function showCardMenu(page, elem, virtualFolders) { - var card = dom.parentWithClass(elem, 'card'); - var index = parseInt(card.getAttribute('data-index')); - var virtualFolder = virtualFolders[index]; - var menuItems = []; + const card = dom.parentWithClass(elem, 'card'); + const index = parseInt(card.getAttribute('data-index')); + const virtualFolder = virtualFolders[index]; + const menuItems = []; menuItems.push({ name: globalize.translate('ButtonEditImages'), id: 'editimages', @@ -111,7 +120,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl icon: 'refresh' }); - require(['actionsheet'], function (actionsheet) { + import('actionsheet').then(({default: actionsheet}) => { actionsheet.show({ items: menuItems, positionTo: elem, @@ -153,7 +162,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } function reloadVirtualFolders(page, virtualFolders) { - var html = ''; + let html = ''; virtualFolders.push({ Name: globalize.translate('ButtonAddMediaLibrary'), icon: 'add_circle', @@ -164,12 +173,12 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl showNameWithIcon: true }); - for (var i = 0; i < virtualFolders.length; i++) { - var virtualFolder = virtualFolders[i]; + for (let i = 0; i < virtualFolders.length; i++) { + const virtualFolder = virtualFolders[i]; html += getVirtualFolderHtml(page, virtualFolder, i); } - var divVirtualFolders = page.querySelector('#divVirtualFolders'); + const divVirtualFolders = page.querySelector('#divVirtualFolders'); divVirtualFolders.innerHTML = html; divVirtualFolders.classList.add('itemsContainer'); divVirtualFolders.classList.add('vertical-wrap'); @@ -180,9 +189,9 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl addVirtualFolder(page); }); $('.editLibrary', divVirtualFolders).on('click', function () { - var card = $(this).parents('.card')[0]; - var index = parseInt(card.getAttribute('data-index')); - var virtualFolder = virtualFolders[index]; + const card = $(this).parents('.card')[0]; + const index = parseInt(card.getAttribute('data-index')); + const virtualFolder = virtualFolders[index]; if (virtualFolder.ItemId) { editVirtualFolder(page, virtualFolder); @@ -192,7 +201,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } function editImages(page, virtualFolder) { - require(['imageEditor'], function (imageEditor) { + import('imageEditor').then(({default: imageEditor}) => { imageEditor.show({ itemId: virtualFolder.ItemId, serverId: ApiClient.serverId() @@ -240,8 +249,8 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } function getVirtualFolderHtml(page, virtualFolder, index) { - var html = ''; - var style = ''; + let html = ''; + let style = ''; if (page.classList.contains('wizardPage')) { style += 'min-width:33.3%;'; @@ -252,7 +261,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl html += '
'; html += '
'; html += '
'; - var imgUrl = ''; + let imgUrl = ''; if (virtualFolder.PrimaryImageItemId) { imgUrl = ApiClient.getScaledImageUrl(virtualFolder.PrimaryImageItemId, { @@ -261,7 +270,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl }); } - var hasCardImageContainer; + let hasCardImageContainer; if (imgUrl) { html += '
"; @@ -311,7 +320,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } html += '
'; - var typeName = getCollectionTypeOptions().filter(function (t) { + let typeName = getCollectionTypeOptions().filter(function (t) { return t.value == virtualFolder.CollectionType; })[0]; typeName = typeName ? typeName.name : globalize.translate('FolderTypeUnset'); @@ -371,7 +380,8 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl }); pageIdOn('pageshow', 'mediaLibraryPage', function () { libraryMenu.setTabs('librarysetup', 0, getTabs); - var page = this; + + const page = this; taskButton({ mode: 'on', progressElem: page.querySelector('.refreshProgress'), @@ -380,7 +390,8 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl }); }); pageIdOn('pagebeforehide', 'mediaLibraryPage', function () { - var page = this; + + const page = this; taskButton({ mode: 'off', progressElem: page.querySelector('.refreshProgress'), @@ -388,4 +399,5 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl button: page.querySelector('.btnRefresh') }); }); -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/metadataImages.js b/src/controllers/dashboard/metadataImages.js index 3047736a68..cbfe05419c 100644 --- a/src/controllers/dashboard/metadataImages.js +++ b/src/controllers/dashboard/metadataImages.js @@ -1,12 +1,18 @@ -define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle'], function($, dom, loading, libraryMenu, globalize) { - 'use strict'; +import $ from 'jQuery'; +import dom from 'dom'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; +import 'listViewStyle'; + +/* eslint-disable indent */ function populateLanguages(select) { return ApiClient.getCultures().then(function(languages) { - var html = ''; + let html = ''; html += ""; - for (var i = 0, length = languages.length; i < length; i++) { - var culture = languages[i]; + for (let i = 0, length = languages.length; i < length; i++) { + const culture = languages[i]; html += "'; } select.innerHTML = html; @@ -15,10 +21,10 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle'] function populateCountries(select) { return ApiClient.getCountries().then(function(allCountries) { - var html = ''; + let html = ''; html += ""; - for (var i = 0, length = allCountries.length; i < length; i++) { - var culture = allCountries[i]; + for (let i = 0, length = allCountries.length; i < length; i++) { + const culture = allCountries[i]; html += "'; } select.innerHTML = html; @@ -26,9 +32,9 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle'] } function loadPage(page) { - var promises = [ApiClient.getServerConfiguration(), populateLanguages(page.querySelector('#selectLanguage')), populateCountries(page.querySelector('#selectCountry'))]; + const promises = [ApiClient.getServerConfiguration(), populateLanguages(page.querySelector('#selectLanguage')), populateCountries(page.querySelector('#selectCountry'))]; Promise.all(promises).then(function(responses) { - var config = responses[0]; + const config = responses[0]; page.querySelector('#selectLanguage').value = config.PreferredMetadataLanguage || ''; page.querySelector('#selectCountry').value = config.MetadataCountryCode || ''; loading.hide(); @@ -36,7 +42,7 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle'] } function onSubmit() { - var form = this; + const form = this; return loading.show(), ApiClient.getServerConfiguration().then(function(config) { config.PreferredMetadataLanguage = form.querySelector('#selectLanguage').value; config.MetadataCountryCode = form.querySelector('#selectCountry').value; @@ -67,4 +73,5 @@ define(['jQuery', 'dom', 'loading', 'libraryMenu', 'globalize', 'listViewStyle'] loading.show(); loadPage(this); }); -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/metadatanfo.js b/src/controllers/dashboard/metadatanfo.js index a936192618..f1b768d18b 100644 --- a/src/controllers/dashboard/metadatanfo.js +++ b/src/controllers/dashboard/metadatanfo.js @@ -1,8 +1,12 @@ -define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, libraryMenu, globalize) { - 'use strict'; +import $ from 'jQuery'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; + +/* eslint-disable indent */ function loadPage(page, config, users) { - var html = ''; + let html = ''; html += users.map(function (user) { return ''; }).join(''); @@ -16,7 +20,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, function onSubmit() { loading.show(); - var form = this; + const form = this; ApiClient.getNamedConfiguration(metadataKey).then(function (config) { config.UserId = $('#selectUser', form).val() || null; config.ReleaseDateFormat = $('#selectReleaseDateFormat', form).val(); @@ -32,10 +36,10 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, } function showConfirmMessage(config) { - var msg = []; + const msg = []; msg.push(globalize.translate('MetadataSettingChangeHelp')); - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert({ text: msg.join('

') }); @@ -58,17 +62,18 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, }]; } - var metadataKey = 'xbmcmetadata'; + const metadataKey = 'xbmcmetadata'; $(document).on('pageinit', '#metadataNfoPage', function () { $('.metadataNfoForm').off('submit', onSubmit).on('submit', onSubmit); }).on('pageshow', '#metadataNfoPage', function () { libraryMenu.setTabs('metadata', 3, getTabs); loading.show(); - var page = this; - var promise1 = ApiClient.getUsers(); - var promise2 = ApiClient.getNamedConfiguration(metadataKey); + const page = this; + const promise1 = ApiClient.getUsers(); + const promise2 = ApiClient.getNamedConfiguration(metadataKey); Promise.all([promise1, promise2]).then(function (responses) { loadPage(page, responses[1], responses[0]); }); }); -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/networking.js b/src/controllers/dashboard/networking.js index 4ddde7f24c..367ab8335c 100644 --- a/src/controllers/dashboard/networking.js +++ b/src/controllers/dashboard/networking.js @@ -1,12 +1,17 @@ -define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) { - 'use strict'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; +import 'emby-checkbox'; +import 'emby-select'; + +/* eslint-disable indent */ function onSubmit(e) { - var form = this; - var localAddress = form.querySelector('#txtLocalAddress').value; - var enableUpnp = form.querySelector('#chkEnableUpnp').checked; + const form = this; + const localAddress = form.querySelector('#txtLocalAddress').value; + const enableUpnp = form.querySelector('#chkEnableUpnp').checked; confirmSelections(localAddress, enableUpnp, function () { - var validationResult = getValidationAlert(form); + const validationResult = getValidationAlert(form); if (validationResult) { showAlertText(validationResult); @@ -47,7 +52,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], } function triggerChange(select) { - var evt = document.createEvent('HTMLEvents'); + const evt = document.createEvent('HTMLEvents'); evt.initEvent('change', false, true); select.dispatchEvent(evt); } @@ -65,8 +70,8 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], } function validateHttps(form) { - var certPath = form.querySelector('#txtCertificatePath').value || null; - var httpsEnabled = form.querySelector('#chkEnableHttps').checked; + const certPath = form.querySelector('#txtCertificatePath').value || null; + const httpsEnabled = form.querySelector('#chkEnableHttps').checked; if (httpsEnabled && !certPath) { return showAlertText({ @@ -80,7 +85,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], function showAlertText(options) { return new Promise(function (resolve, reject) { - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert(options).then(resolve, reject); }); }); @@ -97,7 +102,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], } } - return function (view, params) { + export default function (view, params) { function loadPage(page, config) { page.querySelector('#txtPortNumber').value = config.HttpServerPortNumber; page.querySelector('#txtPublicPort').value = config.PublicPort; @@ -111,7 +116,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], page.querySelector('#chkEnableHttps').checked = config.EnableHttps; page.querySelector('#chkRequireHttps').checked = config.RequireHttps; page.querySelector('#txtBaseUrl').value = config.BaseUrl || ''; - var txtCertificatePath = page.querySelector('#txtCertificatePath'); + const txtCertificatePath = page.querySelector('#txtCertificatePath'); txtCertificatePath.value = config.CertificatePath || ''; page.querySelector('#txtCertPassword').value = config.CertificatePassword || ''; page.querySelector('#chkEnableUpnp').checked = config.EnableUPnP; @@ -135,8 +140,8 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], } }); view.querySelector('#btnSelectCertPath').addEventListener('click', function () { - require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + import('directorybrowser').then(({default: directoryBrowser}) => { + const picker = new directoryBrowser(); picker.show({ includeFiles: true, includeDirectories: true, @@ -158,5 +163,6 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], loadPage(view, config); }); }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/notifications/notification.js b/src/controllers/dashboard/notifications/notification.js index 370fc6a369..af9301c13f 100644 --- a/src/controllers/dashboard/notifications/notification.js +++ b/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; diff --git a/src/controllers/dashboard/playback.js b/src/controllers/dashboard/playback.js index d5b67a2961..0406c21926 100644 --- a/src/controllers/dashboard/playback.js +++ b/src/controllers/dashboard/playback.js @@ -1,5 +1,9 @@ -define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, libraryMenu, globalize) { - 'use strict'; +import $ from 'jQuery'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; + +/* eslint-disable indent */ function loadPage(page, config) { $('#txtMinResumePct', page).val(config.MinResumePct); @@ -10,7 +14,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, function onSubmit() { loading.show(); - var form = this; + const form = this; ApiClient.getServerConfiguration().then(function (config) { config.MinResumePct = $('#txtMinResumePct', form).val(); config.MaxResumePct = $('#txtMaxResumePct', form).val(); @@ -40,9 +44,10 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, }).on('pageshow', '#playbackConfigurationPage', function () { loading.show(); libraryMenu.setTabs('playback', 1, getTabs); - var page = this; + const page = this; ApiClient.getServerConfiguration().then(function (config) { loadPage(page, config); }); }); -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/plugins/add.js b/src/controllers/dashboard/plugins/add.js index 8b1deb804d..375a0c0ec7 100644 --- a/src/controllers/dashboard/plugins/add.js +++ b/src/controllers/dashboard/plugins/add.js @@ -91,7 +91,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e msg += globalize.translate('PleaseConfirmPluginInstallation'); require(['confirm'], function (confirm) { - confirm(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () { + confirm.default(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () { alertCallback(); }, function () { console.debug('plugin not installed'); diff --git a/src/controllers/dashboard/plugins/available.js b/src/controllers/dashboard/plugins/available.js index 82fea00b58..37df8801b5 100644 --- a/src/controllers/dashboard/plugins/available.js +++ b/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') }]; } diff --git a/src/controllers/dashboard/plugins/installed.js b/src/controllers/dashboard/plugins/installed.js index 5ca739f711..d28a04cb2b 100644 --- a/src/controllers/dashboard/plugins/installed.js +++ b/src/controllers/dashboard/plugins/installed.js @@ -5,7 +5,7 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button' var msg = globalize.translate('UninstallPluginConfirmation', name); require(['confirm'], function (confirm) { - confirm({ + confirm.default({ title: globalize.translate('UninstallPluginHeader'), text: msg, primary: 'delete', @@ -37,20 +37,24 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button' })[0]; var configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null; var html = ''; - html += "
"; + html += "
"; html += '
'; html += '
'; html += '
'; - html += configPageUrl ? '' : '
'; + html += configPageUrl ? '' : '
'; html += ''; html += configPageUrl ? '' : '
'; html += '
'; html += '
'; - html += '
'; - html += ''; - html += '
'; + + if (configPage || plugin.CanUninstall) { + html += '
'; + html += ''; + html += '
'; + } + html += "
"; - html += configPage.DisplayName || plugin.Name; + html += configPage && configPage.DisplayName ? configPage.DisplayName : plugin.Name; html += '
'; html += "
"; 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') }]; } diff --git a/src/controllers/dashboard/plugins/repositories.js b/src/controllers/dashboard/plugins/repositories.js new file mode 100644 index 0000000000..3087cdd927 --- /dev/null +++ b/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 += '
'; + for (var i = 0; i < options.repositories.length; i++) { + html += getRepositoryHtml(options.repositories[i]); + } + + html += '
'; + if (!options.repositories.length) { + options.noneElement.classList.remove('hide'); + } + + options.listElement.innerHTML = html; + loading.hide(); +} + +function getRepositoryHtml(repository) { + var html = ''; + + html += '
'; + html += ``; + html += ''; + html += ''; + html += '
'; + html += `

${repository.Name}

`; + html += `
${repository.Url}
`; + html += '
'; + html += ``; + html += '
'; + + 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 += '
'; + html += ''; + html += `

${globalize.translate('HeaderNewRepository')}

`; + html += '
'; + html += '
'; + html += '
'; + html += ``; + html += `
${globalize.translate('LabelRepositoryNameHelp')}
`; + html += '
'; + html += '
'; + html += ``; + html += `
${globalize.translate('LabelRepositoryUrlHelp')}
`; + html += '
'; + html += ``; + html += '
'; + html += ''; + + 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); + }); +} diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtask.js b/src/controllers/dashboard/scheduledtasks/scheduledtask.js index 52050d1f80..fe214fef63 100644 --- a/src/controllers/dashboard/scheduledtasks/scheduledtask.js +++ b/src/controllers/dashboard/scheduledtasks/scheduledtask.js @@ -1,11 +1,19 @@ -define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby-button', 'emby-select'], function ($, loading, datetime, dom, globalize) { - 'use strict'; +import $ from 'jQuery'; +import loading from 'loading'; +import datetime from 'datetime'; +import dom from 'dom'; +import globalize from 'globalize'; +import 'emby-input'; +import 'emby-button'; +import 'emby-select'; + +/* eslint-disable indent */ function fillTimeOfDay(select) { - var options = []; + const options = []; - for (var i = 0; i < 86400000; i += 900000) { + for (let i = 0; i < 86400000; i += 900000) { options.push({ name: ScheduledTaskPage.getDisplayTime(i * 10000), value: i * 10000 @@ -18,15 +26,15 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby } Array.prototype.remove = function (from, to) { - var rest = this.slice((to || from) + 1 || this.length); + const rest = this.slice((to || from) + 1 || this.length); this.length = from < 0 ? this.length + from : from; return this.push.apply(this, rest); }; - var ScheduledTaskPage = { + const ScheduledTaskPage = { refreshScheduledTask: function (view) { loading.show(); - var id = getParameterByName('id'); + let id = getParameterByName('id'); ApiClient.getScheduledTask(id).then(function (task) { ScheduledTaskPage.loadScheduledTask(view, task); }); @@ -35,18 +43,18 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby $('.taskName', view).html(task.Name); $('#pTaskDescription', view).html(task.Description); - require(['listViewStyle'], function () { + import('listViewStyle').then(() => { ScheduledTaskPage.loadTaskTriggers(view, task); }); loading.hide(); }, loadTaskTriggers: function (context, task) { - var html = ''; + let html = ''; html += '
'; - for (var i = 0, length = task.Triggers.length; i < length; i++) { - var trigger = task.Triggers[i]; + for (let i = 0, length = task.Triggers.length; i < length; i++) { + const trigger = task.Triggers[i]; html += '
'; html += ''; @@ -58,7 +66,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby html += "
" + ScheduledTaskPage.getTriggerFriendlyName(trigger) + '
'; if (trigger.MaxRuntimeMs) { html += '
'; - var hours = trigger.MaxRuntimeTicks / 36e9; + const hours = trigger.MaxRuntimeTicks / 36e9; if (hours == 1) { html += globalize.translate('ValueTimeLimitSingleHour'); } else { @@ -92,7 +100,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby if (trigger.Type == 'IntervalTrigger') { - var hours = trigger.IntervalTicks / 36e9; + const hours = trigger.IntervalTicks / 36e9; if (hours == 0.25) { return globalize.translate('EveryXMinutes', '15'); @@ -117,8 +125,8 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby return trigger.Type; }, getDisplayTime: function (ticks) { - var ms = ticks / 1e4; - var now = new Date(); + const ms = ticks / 1e4; + const now = new Date(); now.setHours(0, 0, 0, 0); now.setTime(now.getTime() + ms); return datetime.getDisplayTime(now); @@ -129,15 +137,15 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby $('#popupAddTrigger', view).removeClass('hide'); }, confirmDeleteTrigger: function (view, index) { - require(['confirm'], function (confirm) { - confirm(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () { + import('confirm').then(({default: confirm}) => { + confirm.default(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () { ScheduledTaskPage.deleteTrigger(view, index); }); }); }, deleteTrigger: function (view, index) { loading.show(); - var id = getParameterByName('id'); + let id = getParameterByName('id'); ApiClient.getScheduledTask(id).then(function (task) { task.Triggers.remove(index); ApiClient.updateScheduledTaskTriggers(task.Id, task.Triggers).then(function () { @@ -179,7 +187,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby } }, getTriggerToAdd: function (page) { - var trigger = { + const trigger = { Type: $('#selectTriggerType', page).val() }; @@ -194,7 +202,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby trigger.IntervalTicks = $('#selectInterval', page).val(); } - var timeLimit = $('#txtTimeLimit', page).val() || '0'; + let timeLimit = $('#txtTimeLimit', page).val() || '0'; timeLimit = parseFloat(timeLimit) * 3600000; trigger.MaxRuntimeMs = timeLimit || null; @@ -202,10 +210,10 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby return trigger; } }; - return function (view, params) { + export default function (view, params) { function onSubmit(e) { loading.show(); - var id = getParameterByName('id'); + let id = getParameterByName('id'); ApiClient.getScheduledTask(id).then(function (task) { task.Triggers.push(ScheduledTaskPage.getTriggerToAdd(view)); ApiClient.updateScheduledTaskTriggers(task.Id, task.Triggers).then(function () { @@ -226,7 +234,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby ScheduledTaskPage.showAddTriggerPopup(view); }); view.addEventListener('click', function (e) { - var btnDeleteTrigger = dom.parentWithClass(e.target, 'btnDeleteTrigger'); + const btnDeleteTrigger = dom.parentWithClass(e.target, 'btnDeleteTrigger'); if (btnDeleteTrigger) { ScheduledTaskPage.confirmDeleteTrigger(view, parseInt(btnDeleteTrigger.getAttribute('data-index'))); @@ -235,5 +243,6 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby view.addEventListener('viewshow', function () { ScheduledTaskPage.refreshScheduledTask(view); }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js index 5ce53cf6fe..af96f34c15 100644 --- a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js +++ b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js @@ -1,5 +1,14 @@ -define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date-fns', 'dfnshelper', 'listViewStyle', 'emby-button'], function ($, loading, events, globalize, serverNotifications, datefns, dfnshelper) { - 'use strict'; +import $ from 'jQuery'; +import loading from 'loading'; +import events from 'events'; +import globalize from 'globalize'; +import serverNotifications from 'serverNotifications'; +import * as datefns from 'date-fns'; +import dfnshelper from 'dfnshelper'; +import 'listViewStyle'; +import 'emby-button'; + +/* eslint-disable indent */ function reloadList(page) { ApiClient.getScheduledTasks({ @@ -17,10 +26,10 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date return a == b ? 0 : a < b ? -1 : 1; }); - var currentCategory; - var html = ''; - for (var i = 0; i < tasks.length; i++) { - var task = tasks[i]; + let currentCategory; + let html = ''; + for (let i = 0; i < tasks.length; i++) { + const task = tasks[i]; if (task.Category != currentCategory) { currentCategory = task.Category; if (currentCategory) { @@ -63,11 +72,11 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date } function getTaskProgressHtml(task) { - var html = ''; + let html = ''; if (task.State === 'Idle') { if (task.LastExecutionResult) { - var endtime = Date.parse(task.LastExecutionResult.EndTimeUtc); - var starttime = Date.parse(task.LastExecutionResult.StartTimeUtc); + const endtime = Date.parse(task.LastExecutionResult.EndTimeUtc); + const starttime = Date.parse(task.LastExecutionResult.StartTimeUtc); html += globalize.translate('LabelScheduledTaskLastRan', datefns.formatDistanceToNow(endtime, dfnshelper.localeWithSuffix), datefns.formatDistance(starttime, endtime, { locale: dfnshelper.getLocale() })); if (task.LastExecutionResult.Status === 'Failed') { @@ -79,7 +88,7 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date } } } else if (task.State === 'Running') { - var progress = (task.CurrentProgressPercentage || 0).toFixed(1); + const progress = (task.CurrentProgressPercentage || 0).toFixed(1); html += '
'; html += '
'; html += '
'; @@ -94,7 +103,7 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date } function setTaskButtonIcon(button, icon) { - var inner = button.querySelector('.material-icons'); + let inner = button.querySelector('.material-icons'); inner.classList.remove('stop', 'play_arrow'); inner.classList.add(icon); } @@ -114,10 +123,10 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date $(elem).parents('.listItem')[0].setAttribute('data-status', state); } - return function(view, params) { + export default function(view, params) { function updateTasks(tasks) { - for (var i = 0; i < tasks.length; i++) { - var task = tasks[i]; + for (let i = 0; i < tasks.length; i++) { + const task = tasks[i]; view.querySelector('#taskProgress' + task.Id).innerHTML = getTaskProgressHtml(task); updateTaskButton(view.querySelector('#btnTask' + task.Id), task.State); } @@ -146,12 +155,12 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date pollInterval && clearInterval(pollInterval); } - var pollInterval; - var serverId = ApiClient.serverId(); + let pollInterval; + const serverId = ApiClient.serverId(); $('.divScheduledTasks', view).on('click', '.btnStartTask', function() { - var button = this; - var id = button.getAttribute('data-taskid'); + const button = this; + let id = button.getAttribute('data-taskid'); ApiClient.startScheduledTask(id).then(function() { updateTaskButton(button, 'Running'); reloadList(view); @@ -159,8 +168,8 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date }); $('.divScheduledTasks', view).on('click', '.btnStopTask', function() { - var button = this; - var id = button.getAttribute('data-taskid'); + const button = this; + let id = button.getAttribute('data-taskid'); ApiClient.stopScheduledTask(id).then(function() { updateTaskButton(button, ''); reloadList(view); @@ -178,5 +187,6 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date reloadList(view); events.on(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate); }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/serveractivity.js b/src/controllers/dashboard/serveractivity.js index c48a2903ae..1d5a49eef7 100644 --- a/src/controllers/dashboard/serveractivity.js +++ b/src/controllers/dashboard/serveractivity.js @@ -1,8 +1,10 @@ -define(['components/activitylog', 'globalize'], function (ActivityLog, globalize) { - 'use strict'; +import ActivityLog from 'components/activitylog'; +import globalize from 'globalize'; - return function (view, params) { - var activityLog; +/* eslint-disable indent */ + + export default function (view, params) { + let activityLog; if (params.useractivity !== 'false') { view.querySelector('.activityItems').setAttribute('data-useractivity', 'true'); @@ -14,7 +16,7 @@ define(['components/activitylog', 'globalize'], function (ActivityLog, globalize view.addEventListener('viewshow', function () { if (!activityLog) { - activityLog = new ActivityLog({ + activityLog = new ActivityLog.default({ serverId: ApiClient.serverId(), element: view.querySelector('.activityItems') }); @@ -27,5 +29,6 @@ define(['components/activitylog', 'globalize'], function (ActivityLog, globalize activityLog = null; }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/streaming.js b/src/controllers/dashboard/streaming.js index 37afe5a054..c54fbea472 100644 --- a/src/controllers/dashboard/streaming.js +++ b/src/controllers/dashboard/streaming.js @@ -1,5 +1,9 @@ -define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMenu, loading, globalize) { - 'use strict'; +import $ from 'jQuery'; +import libraryMenu from 'libraryMenu'; +import loading from 'loading'; +import globalize from 'globalize'; + +/* eslint-disable indent */ function loadPage(page, config) { $('#txtRemoteClientBitrateLimit', page).val(config.RemoteClientBitrateLimit / 1e6 || ''); @@ -8,7 +12,7 @@ define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMe function onSubmit() { loading.show(); - var form = this; + const form = this; ApiClient.getServerConfiguration().then(function (config) { config.RemoteClientBitrateLimit = parseInt(1e6 * parseFloat($('#txtRemoteClientBitrateLimit', form).val() || '0')); ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult); @@ -35,9 +39,10 @@ define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMe }).on('pageshow', '#streamingSettingsPage', function () { loading.show(); libraryMenu.setTabs('playback', 2, getTabs); - var page = this; + const page = this; ApiClient.getServerConfiguration().then(function (config) { loadPage(page, config); }); }); -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/users/useredit.js b/src/controllers/dashboard/users/useredit.js index c71c81d9e0..af187412d0 100644 --- a/src/controllers/dashboard/users/useredit.js +++ b/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) { diff --git a/src/controllers/dashboard/users/userlibraryaccess.js b/src/controllers/dashboard/users/userlibraryaccess.js index 1fdb6cb599..5ea24e3da3 100644 --- a/src/controllers/dashboard/users/userlibraryaccess.js +++ b/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 += '
'; $('.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) { diff --git a/src/controllers/dashboard/users/usernew.js b/src/controllers/dashboard/users/usernew.js index 1e4e2bbee2..ef4cd74f86 100644 --- a/src/controllers/dashboard/users/usernew.js +++ b/src/controllers/dashboard/users/usernew.js @@ -13,7 +13,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox'], function ($, loading html += '
'; $('.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) { diff --git a/src/controllers/dashboard/users/userparentalcontrol.js b/src/controllers/dashboard/users/userparentalcontrol.js index e8255512d6..f5d4e70afd 100644 --- a/src/controllers/dashboard/users/userparentalcontrol.js +++ b/src/controllers/dashboard/users/userparentalcontrol.js @@ -225,7 +225,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt function showBlockedTagPopup(page) { require(['prompt'], function (prompt) { - prompt({ + prompt.default({ label: globalize.translate('LabelTag') }).then(function (value) { var tags = getBlockedTagsFromPage(page); diff --git a/src/controllers/dashboard/users/userpasswordpage.js b/src/controllers/dashboard/users/userpasswordpage.js index 186e39b151..9061c00c7f 100644 --- a/src/controllers/dashboard/users/userpasswordpage.js +++ b/src/controllers/dashboard/users/userpasswordpage.js @@ -142,7 +142,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading var msg = globalize.translate('PasswordResetConfirmation'); require(['confirm'], function (confirm) { - confirm(msg, globalize.translate('PasswordResetHeader')).then(function () { + confirm.default(msg, globalize.translate('PasswordResetHeader')).then(function () { var userId = params.userId; loading.show(); ApiClient.resetUserPassword(userId).then(function () { @@ -161,7 +161,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading var msg = globalize.translate('PinCodeResetConfirmation'); require(['confirm'], function (confirm) { - confirm(msg, globalize.translate('HeaderPinCodeReset')).then(function () { + confirm.default(msg, globalize.translate('HeaderPinCodeReset')).then(function () { var userId = params.userId; loading.show(); ApiClient.resetEasyPassword(userId).then(function () { diff --git a/src/controllers/dashboard/users/userprofilespage.js b/src/controllers/dashboard/users/userprofilespage.js index c691c665f6..f04c7ad082 100644 --- a/src/controllers/dashboard/users/userprofilespage.js +++ b/src/controllers/dashboard/users/userprofilespage.js @@ -5,7 +5,7 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but var msg = globalize.translate('DeleteUserConfirmation'); require(['confirm'], function (confirm) { - confirm({ + confirm.default({ title: globalize.translate('DeleteUser'), text: msg, confirmText: globalize.translate('ButtonDelete'), diff --git a/src/controllers/itemDetails.js b/src/controllers/itemDetails.js index cbb8a1b43e..d7c0c74ee2 100644 --- a/src/controllers/itemDetails.js +++ b/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 ''; - }).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 ''; + }).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 = '

' + parentNameHtml.join('
') + '

'; + html = '

' + parentNameHtml.join('
') + '

'; } else { - html = '

' + tvShowHtml + '

'; + html = '

' + tvShowHtml + '

'; } } } @@ -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 += '

' + tvSeasonHtml + ' - ' + name + '

'; + html += '

' + tvSeasonHtml + ' - ' + name + '

'; } else { - html += '

' + name + '

'; + html += '

' + name + '

'; } } else { - html = '

' + name + '

' + html; + html = '

' + name + '

' + html; } if (item.OriginalTitle && item.OriginalTitle != item.Name) { - html += '

' + item.OriginalTitle + '

'; + html += '

' + item.OriginalTitle + '

'; } container.innerHTML = html; @@ -462,7 +462,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti if (dom.getWindowSize().innerWidth >= 1000) { backdrop.setBackdrops([item]); } else { - backdrop.clear(); + backdrop.clearBackdrop(); } } @@ -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 @@ -1788,7 +1787,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti imageLoader.lazyChildren(collectionItems); collectionItems.querySelector('.btnAddToCollection').addEventListener('click', function () { require(['alert'], function (alert) { - alert({ + alert.default({ text: globalize.translate('AddItemToCollectionHelp'), html: globalize.translate('AddItemToCollectionHelp') + '

' + globalize.translate('ButtonLearnMore') + '' }); @@ -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 { @@ -1935,7 +1935,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti function splitVersions(instance, page, apiClient, params) { require(['confirm'], function (confirm) { - confirm('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () { + confirm.default('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () { loading.show(); apiClient.ajax({ type: 'DELETE', diff --git a/src/controllers/list.js b/src/controllers/list.js index d05616ec9d..a988695784 100644 --- a/src/controllers/list.js +++ b/src/controllers/list.js @@ -1,4 +1,4 @@ -define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, alphaPicker) { +define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, AlphaPicker) { 'use strict'; function getInitialLiveTvQuery(instance, params) { @@ -386,7 +386,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' var instance = this; require(['playlistEditor'], function (playlistEditor) { - new playlistEditor().show({ + new playlistEditor.showEditor({ items: [], serverId: instance.params.serverId }); @@ -544,7 +544,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' alphaPickerElement.classList.add('focuscontainer-right'); self.itemsContainer.parentNode.classList.add('padded-right-withalphapicker'); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker.default({ element: alphaPickerElement, itemsContainer: layoutManager.tv ? self.itemsContainer : null, itemClass: 'card', @@ -803,7 +803,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' bindAll(view.querySelectorAll('.btnShuffle'), 'click', shuffle); } - this.alphaNumericShortcuts = new AlphaNumericShortcuts({ + this.alphaNumericShortcuts = new AlphaNumericShortcuts.default({ itemsContainer: self.itemsContainer }); }); @@ -817,7 +817,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' var alphaNumericShortcuts = self.alphaNumericShortcuts; if (alphaNumericShortcuts) { - alphaNumericShortcuts.destroy(); + alphaNumericShortcuts.default.destroy(); self.alphaNumericShortcuts = null; } }); diff --git a/src/controllers/livetv/livetvchannels.js b/src/controllers/livetv/livetvchannels.js index 7f22d3dd13..62906d9d21 100644 --- a/src/controllers/livetv/livetvchannels.js +++ b/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', diff --git a/src/controllers/livetvguideprovider.js b/src/controllers/livetvguideprovider.js index e83036992b..8f8b9f91c7 100644 --- a/src/controllers/livetvguideprovider.js +++ b/src/controllers/livetvguideprovider.js @@ -17,7 +17,7 @@ define(['events', 'loading', 'globalize'], function (events, loading, globalize) function loadTemplate(page, type, providerId) { require(['text!./components/tvproviders/' + type + '.template.html'], function (html) { - page.querySelector('.providerTemplate').innerHTML = globalize.translateDocument(html); + page.querySelector('.providerTemplate').innerHTML = globalize.translateHtml(html); init(page, type, providerId); }); } diff --git a/src/controllers/livetvsettings.js b/src/controllers/livetvsettings.js index 4c5fdc60de..715eb06214 100644 --- a/src/controllers/livetvsettings.js +++ b/src/controllers/livetvsettings.js @@ -59,7 +59,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading, $('.liveTvSettingsForm').off('submit', onSubmit).on('submit', onSubmit); $('#btnSelectRecordingPath', page).on('click.selectDirectory', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ callback: function (path) { if (path) { @@ -74,7 +74,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading, }); $('#btnSelectMovieRecordingPath', page).on('click.selectDirectory', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ callback: function (path) { if (path) { @@ -89,7 +89,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading, }); $('#btnSelectSeriesRecordingPath', page).on('click.selectDirectory', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ callback: function (path) { if (path) { @@ -104,7 +104,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-button'], function ($, loading, }); $('#btnSelectPostProcessorPath', page).on('click.selectDirectory', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ includeFiles: true, callback: function (path) { diff --git a/src/controllers/livetvstatus.js b/src/controllers/livetvstatus.js index 82d0b697db..84ea006fd9 100644 --- a/src/controllers/livetvstatus.js +++ b/src/controllers/livetvstatus.js @@ -49,7 +49,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo var message = globalize.translate('MessageConfirmDeleteTunerDevice'); require(['confirm'], function (confirm) { - confirm(message, globalize.translate('HeaderDeleteDevice')).then(function () { + confirm.default(message, globalize.translate('HeaderDeleteDevice')).then(function () { loading.show(); ApiClient.ajax({ type: 'DELETE', @@ -155,8 +155,8 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo } function mapChannels(page, providerId) { - require(['components/channelMapper/channelMapper'], function (channelmapper) { - new channelmapper({ + require(['components/channelMapper/channelMapper'], function (channelMapper) { + new channelMapper.default({ serverId: ApiClient.serverInfo().Id, providerId: providerId }).show(); @@ -167,7 +167,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo var message = globalize.translate('MessageConfirmDeleteGuideProvider'); require(['confirm'], function (confirm) { - confirm(message, globalize.translate('HeaderDeleteProvider')).then(function () { + confirm.default(message, globalize.translate('HeaderDeleteProvider')).then(function () { loading.show(); ApiClient.ajax({ type: 'DELETE', @@ -303,7 +303,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo }).on('pageshow', '#liveTvStatusPage', function () { var page = this; reload(page); - taskButton({ + taskButton.default({ mode: 'on', progressElem: page.querySelector('.refreshGuideProgress'), taskKey: 'RefreshGuide', @@ -311,7 +311,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo }); }).on('pagehide', '#liveTvStatusPage', function () { var page = this; - taskButton({ + taskButton.default({ mode: 'off', progressElem: page.querySelector('.refreshGuideProgress'), taskKey: 'RefreshGuide', diff --git a/src/controllers/livetvtuner.js b/src/controllers/livetvtuner.js index d7a4d92db2..92f705c02f 100644 --- a/src/controllers/livetvtuner.js +++ b/src/controllers/livetvtuner.js @@ -215,7 +215,7 @@ define(['globalize', 'loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button }); view.querySelector('.btnSelectPath').addEventListener('click', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + var picker = new directoryBrowser.default(); picker.show({ includeFiles: true, callback: function (path) { diff --git a/src/controllers/movies/moviecollections.js b/src/controllers/movies/moviecollections.js index e9ae599b92..65abca46e0 100644 --- a/src/controllers/movies/moviecollections.js +++ b/src/controllers/movies/moviecollections.js @@ -171,7 +171,12 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB } if (!result.Items.length) { - html = '

' + globalize.translate('MessageNoCollectionsAvailable') + '

'; + html = ''; + + html += '
'; + html += '

' + globalize.translate('MessageNothingHere') + '

'; + html += '

' + globalize.translate('MessageNoCollectionsAvailable') + '

'; + html += '
'; } var itemsContainer = tabContent.querySelector('.itemsContainer'); @@ -237,7 +242,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB tabContent.querySelector('.btnNewCollection').addEventListener('click', function () { require(['collectionEditor'], function (collectionEditor) { var serverId = ApiClient.serverInfo().Id; - new collectionEditor().show({ + new collectionEditor.showEditor({ items: [], serverId: serverId }); diff --git a/src/controllers/movies/moviegenres.js b/src/controllers/movies/moviegenres.js index e8e49ff9da..ab410c1bd4 100644 --- a/src/controllers/movies/moviegenres.js +++ b/src/controllers/movies/moviegenres.js @@ -165,6 +165,15 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader html += '
'; } + if (!result.Items.length) { + html = ''; + + html += '
'; + html += '

' + globalize.translate('MessageNothingHere') + '

'; + html += '

' + globalize.translate('MessageNoGenresAvailable') + '

'; + html += '
'; + } + elem.innerHTML = html; lazyLoader.lazyChildren(elem, fillItemsContainer); libraryBrowser.saveQueryValues(getSavedQueryKey(), query); diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js index 89bcc215e6..82b162e2ad 100644 --- a/src/controllers/movies/movies.js +++ b/src/controllers/movies/movies.js @@ -1,4 +1,4 @@ -define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, alphaPicker, listView, cardBuilder, globalize) { +define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, AlphaPicker, listView, cardBuilder, globalize) { 'use strict'; return function (view, params, tabContent, options) { @@ -168,7 +168,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', query.StartIndex = 0; itemsContainer.refreshItems(); }); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker.default({ element: alphaPickerElement, valueChangeEvent: 'click' }); @@ -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', diff --git a/src/controllers/movies/movietrailers.js b/src/controllers/movies/movietrailers.js index 25d41d4fba..a9db0abf49 100644 --- a/src/controllers/movies/movietrailers.js +++ b/src/controllers/movies/movietrailers.js @@ -1,4 +1,4 @@ -define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) { +define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) { 'use strict'; return function (view, params, tabContent) { @@ -158,7 +158,12 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' } if (!result.Items.length) { - html = '

' + globalize.translate('MessageNoTrailersFound') + '

'; + html = ''; + + html += '
'; + html += '

' + globalize.translate('MessageNothingHere') + '

'; + html += '

' + globalize.translate('MessageNoTrailersFound') + '

'; + html += '
'; } 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', @@ -208,7 +213,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' query.StartIndex = 0; reloadItems(); }); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker.default({ element: alphaPickerElement, valueChangeEvent: 'click' }); diff --git a/src/controllers/music/musicalbums.js b/src/controllers/music/musicalbums.js index ecb51f9dc3..3630e0b9f9 100644 --- a/src/controllers/music/musicalbums.js +++ b/src/controllers/music/musicalbums.js @@ -1,4 +1,4 @@ -define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) { +define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, userSettings, globalize) { 'use strict'; return function (view, params, tabContent) { @@ -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', @@ -215,7 +215,7 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser query.StartIndex = 0; reloadItems(tabContent); }); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker.default({ element: alphaPickerElement, valueChangeEvent: 'click' }); diff --git a/src/controllers/music/musicartists.js b/src/controllers/music/musicartists.js index bd9341be6d..c9a0b06b77 100644 --- a/src/controllers/music/musicartists.js +++ b/src/controllers/music/musicartists.js @@ -1,4 +1,4 @@ -define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'userSettings', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, appHost, userSettings) { +define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'userSettings', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, AlphaPicker, listView, cardBuilder, appHost, userSettings) { 'use strict'; return function (view, params, tabContent) { @@ -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, @@ -199,7 +199,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' query.StartIndex = 0; reloadItems(tabContent); }); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker.default({ element: alphaPickerElement, valueChangeEvent: 'click' }); diff --git a/src/controllers/music/songs.js b/src/controllers/music/songs.js index 8e50cd720c..aa63ec51fe 100644 --- a/src/controllers/music/songs.js +++ b/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', diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/videoosd.js index d6caf24e81..94fbcf5df3 100644 --- a/src/controllers/playback/videoosd.js +++ b/src/controllers/playback/videoosd.js @@ -964,7 +964,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med if (statsOverlay) { statsOverlay.toggle(); } else { - statsOverlay = new PlayerStats({ + statsOverlay = new PlayerStats.default({ player: player }); } @@ -1533,7 +1533,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med if (browser.touch) { (function () { require(['touchHelper'], function (TouchHelper) { - self.touchHelper = new TouchHelper(view, { + self.touchHelper = new TouchHelper.default(view, { swipeYThreshold: 30, triggerOnMove: true, preventDefaultOnMove: true, diff --git a/src/controllers/searchpage.js b/src/controllers/searchpage.js index 8a138b7516..8ce3e8afe8 100644 --- a/src/controllers/searchpage.js +++ b/src/controllers/searchpage.js @@ -1,36 +1,37 @@ -define(['focusManager', 'searchFields', 'searchResults', 'events'], function (focusManager, SearchFields, SearchResults, events) { - 'use strict'; +import focusManager from 'focusManager'; +import SearchFields from 'searchFields'; +import SearchResults from 'searchResults'; +import events from 'events'; - return function (view, params) { - function onSearch(e, value) { - self.searchResults.search(value); +export default function (view, params) { + function onSearch(e, value) { + self.searchResults.search(value); + } + + const self = this; + view.addEventListener('viewshow', function () { + if (!self.searchFields) { + self.searchFields = new SearchFields({ + element: view.querySelector('.searchFields') + }); + self.searchResults = new SearchResults({ + element: view.querySelector('.searchResults'), + serverId: params.serverId || ApiClient.serverId(), + parentId: params.parentId, + collectionType: params.collectionType + }); + events.on(self.searchFields, 'search', onSearch); + } + }); + view.addEventListener('viewdestroy', function () { + if (self.searchFields) { + self.searchFields.destroy(); + self.searchFields = null; } - var self = this; - view.addEventListener('viewshow', function () { - if (!self.searchFields) { - self.searchFields = new SearchFields({ - element: view.querySelector('.searchFields') - }); - self.searchResults = new SearchResults({ - element: view.querySelector('.searchResults'), - serverId: params.serverId || ApiClient.serverId(), - parentId: params.parentId, - collectionType: params.collectionType - }); - events.on(self.searchFields, 'search', onSearch); - } - }); - view.addEventListener('viewdestroy', function () { - if (self.searchFields) { - self.searchFields.destroy(); - self.searchFields = null; - } - - if (self.searchResults) { - self.searchResults.destroy(); - self.searchResults = null; - } - }); - }; -}); + if (self.searchResults) { + self.searchResults.destroy(); + self.searchResults = null; + } + }); +} diff --git a/src/controllers/shows/episodes.js b/src/controllers/shows/episodes.js index ca9a807cbf..1e067a7674 100644 --- a/src/controllers/shows/episodes.js +++ b/src/controllers/shows/episodes.js @@ -1,10 +1,19 @@ -define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) { - 'use strict'; +import loading from 'loading'; +import events from 'events'; +import libraryBrowser from 'libraryBrowser'; +import imageLoader from 'imageLoader'; +import listView from 'listView'; +import cardBuilder from 'cardBuilder'; +import * as userSettings from 'userSettings'; +import globalize from 'globalize'; +import 'emby-itemscontainer'; - return function (view, params, tabContent) { +/* eslint-disable indent */ + + export default function (view, params, tabContent) { function getPageData(context) { - var key = getSavedQueryKey(context); - var pageData = data[key]; + const key = getSavedQueryKey(context); + let pageData = data[key]; if (!pageData) { pageData = data[key] = { @@ -46,8 +55,8 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB } function onViewStyleChange() { - var viewStyle = self.getCurrentViewStyle(); - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const viewStyle = self.getCurrentViewStyle(); + const itemsContainer = tabContent.querySelector('.itemsContainer'); if ('List' == viewStyle) { itemsContainer.classList.add('vertical-list'); @@ -63,7 +72,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB function reloadItems(page) { loading.show(); isLoading = true; - var query = getQuery(page); + const query = getQuery(page); ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) { function onNextPageClick() { if (isLoading) { @@ -88,8 +97,8 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB } window.scrollTo(0, 0); - var html; - var pagingHtml = libraryBrowser.getQueryPagingHtml({ + let html; + const pagingHtml = libraryBrowser.getQueryPagingHtml({ startIndex: query.StartIndex, limit: query.Limit, totalRecordCount: result.TotalRecordCount, @@ -99,8 +108,8 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB sortButton: false, filterButton: false }); - var viewStyle = self.getCurrentViewStyle(); - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const viewStyle = self.getCurrentViewStyle(); + const itemsContainer = tabContent.querySelector('.itemsContainer'); if (viewStyle == 'List') { html = listView.getListViewHtml({ items: result.Items, @@ -128,22 +137,20 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB overlayPlayButton: true }); } - var i; - var length; - var elems; + let elems; elems = tabContent.querySelectorAll('.paging'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].innerHTML = pagingHtml; } elems = tabContent.querySelectorAll('.btnNextPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onNextPageClick); } elems = tabContent.querySelectorAll('.btnPreviousPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onPreviousPageClick); } @@ -153,19 +160,19 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB loading.hide(); isLoading = false; - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); } - var self = this; - var data = {}; - var isLoading = false; + const self = this; + const data = {}; + let isLoading = false; self.showFilterMenu = function () { - require(['components/filterdialog/filterdialog'], function (filterDialogFactory) { - var filterDialog = new filterDialogFactory({ + import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + const filterDialog = new filterDialogFactory({ query: getQuery(tabContent), mode: 'episodes', serverId: ApiClient.serverId() @@ -219,12 +226,12 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB button: e.target }); }); - var btnSelectView = tabContent.querySelector('.btnSelectView'); + const btnSelectView = tabContent.querySelector('.btnSelectView'); btnSelectView.addEventListener('click', function (e) { libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(',')); }); btnSelectView.addEventListener('layoutchange', function (e) { - var viewStyle = e.detail.viewStyle; + const viewStyle = e.detail.viewStyle; getPageData(tabContent).view = viewStyle; libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); onViewStyleChange(); @@ -240,5 +247,6 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB }; self.destroy = function () {}; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/shows/tvgenres.js b/src/controllers/shows/tvgenres.js index de38763e99..f48b91d68f 100644 --- a/src/controllers/shows/tvgenres.js +++ b/src/controllers/shows/tvgenres.js @@ -1,10 +1,20 @@ -define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost', 'globalize', 'appRouter', 'dom', 'emby-button'], function (layoutManager, loading, libraryBrowser, cardBuilder, lazyLoader, appHost, globalize, appRouter, dom) { - 'use strict'; +import layoutManager from 'layoutManager'; +import loading from 'loading'; +import libraryBrowser from 'libraryBrowser'; +import cardBuilder from 'cardBuilder'; +import lazyLoader from 'lazyLoader'; +import appHost from 'apphost'; +import globalize from 'globalize'; +import appRouter from 'appRouter'; +import dom from 'dom'; +import 'emby-button'; - return function (view, params, tabContent) { +/* eslint-disable indent */ + + export default function (view, params, tabContent) { function getPageData() { - var key = getSavedQueryKey(); - var pageData = data[key]; + const key = getSavedQueryKey(); + let pageData = data[key]; if (!pageData) { pageData = data[key] = { @@ -34,7 +44,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader function getPromise() { loading.show(); - var query = getQuery(); + const query = getQuery(); return ApiClient.getGenres(ApiClient.getCurrentUserId(), query); } @@ -51,17 +61,17 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader } function fillItemsContainer(entry) { - var elem = entry.target; - var id = elem.getAttribute('data-id'); - var viewStyle = self.getCurrentViewStyle(); - var limit = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 5 : 9; + const elem = entry.target; + const id = elem.getAttribute('data-id'); + const viewStyle = self.getCurrentViewStyle(); + let limit = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 5 : 9; if (enableScrollX()) { limit = 10; } - var enableImageTypes = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 'Primary,Backdrop,Thumb' : 'Primary'; - var query = { + const enableImageTypes = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 'Primary,Backdrop,Thumb' : 'Primary'; + const query = { SortBy: 'SortName', SortOrder: 'Ascending', IncludeItemTypes: 'Series', @@ -75,7 +85,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader ParentId: params.topParentId }; ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) { - var supportsImageAnalysis = appHost.supports('imageanalysis'); + const supportsImageAnalysis = appHost.supports('imageanalysis'); if (viewStyle == 'Thumb') { cardBuilder.buildCards(result.Items, { @@ -128,14 +138,14 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader } function reloadItems(context, promise) { - var query = getQuery(); + const query = getQuery(); promise.then(function (result) { - var elem = context.querySelector('#items'); - var html = ''; - var items = result.Items; + const elem = context.querySelector('#items'); + let html = ''; + const items = result.Items; - for (var i = 0, length = items.length; i < length; i++) { - var item = items[i]; + for (let i = 0, length = items.length; i < length; i++) { + const item = items[i]; html += '
'; html += '
'; html += ''; + html += '

' + globalize.translate('MessageNothingHere') + '

'; + html += '

' + globalize.translate('MessageNoGenresAvailable') + '

'; + html += '
'; + } + elem.innerHTML = html; lazyLoader.lazyChildren(elem, fillItemsContainer); libraryBrowser.saveQueryValues(getSavedQueryKey(), query); @@ -173,8 +192,8 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader self.renderTab(); } - var self = this; - var data = {}; + const self = this; + const data = {}; self.getViewStyles = function () { return 'Poster,PosterCard,Thumb,ThumbCard'.split(','); @@ -191,7 +210,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader }; self.enableViewSelection = true; - var promise; + let promise; self.preRender = function () { promise = getPromise(); @@ -200,5 +219,6 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader self.renderTab = function () { reloadItems(tabContent, promise); }; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/shows/tvlatest.js b/src/controllers/shows/tvlatest.js index 08e420a595..c08f3d5a15 100644 --- a/src/controllers/shows/tvlatest.js +++ b/src/controllers/shows/tvlatest.js @@ -1,11 +1,16 @@ -define(['loading', 'components/groupedcards', 'cardBuilder', 'apphost', 'imageLoader'], function (loading, groupedcards, cardBuilder, appHost, imageLoader) { - 'use strict'; +import loading from 'loading'; +import groupedcards from 'components/groupedcards'; +import cardBuilder from 'cardBuilder'; +import appHost from 'apphost'; +import imageLoader from 'imageLoader'; + +/* eslint-disable indent */ function getLatestPromise(context, params) { loading.show(); - var userId = ApiClient.getCurrentUserId(); - var parentId = params.topParentId; - var options = { + const userId = ApiClient.getCurrentUserId(); + const parentId = params.topParentId; + const options = { IncludeItemTypes: 'Episode', Limit: 30, Fields: 'PrimaryImageAspectRatio,BasicSyncInfo', @@ -18,7 +23,7 @@ define(['loading', 'components/groupedcards', 'cardBuilder', 'apphost', 'imageLo function loadLatest(context, params, promise) { promise.then(function (items) { - var html = ''; + let html = ''; appHost.supports('imageanalysis'); html += cardBuilder.getCardsHtml({ items: items, @@ -36,20 +41,20 @@ define(['loading', 'components/groupedcards', 'cardBuilder', 'apphost', 'imageLo overlayPlayButton: true, lines: 2 }); - var elem = context.querySelector('#latestEpisodes'); + const elem = context.querySelector('#latestEpisodes'); elem.innerHTML = html; imageLoader.lazyChildren(elem); loading.hide(); - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(context); }); }); } - return function (view, params, tabContent) { - var self = this; - var latestPromise; + export default function (view, params, tabContent) { + const self = this; + let latestPromise; self.preRender = function () { latestPromise = getLatestPromise(view, params); @@ -59,6 +64,7 @@ define(['loading', 'components/groupedcards', 'cardBuilder', 'apphost', 'imageLo loadLatest(tabContent, params, latestPromise); }; - tabContent.querySelector('#latestEpisodes').addEventListener('click', groupedcards.onItemsContainerClick); - }; -}); + tabContent.querySelector('#latestEpisodes').addEventListener('click', groupedcards); + } + +/* eslint-enable indent */ diff --git a/src/controllers/shows/tvrecommended.js b/src/controllers/shows/tvrecommended.js index 8087a03096..6853f11d65 100644 --- a/src/controllers/shows/tvrecommended.js +++ b/src/controllers/shows/tvrecommended.js @@ -1,5 +1,19 @@ -define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'dom', 'userSettings', 'cardBuilder', 'playbackManager', 'mainTabsManager', 'globalize', 'scrollStyles', 'emby-itemscontainer', 'emby-button'], function (events, inputManager, libraryMenu, layoutManager, loading, dom, userSettings, cardBuilder, playbackManager, mainTabsManager, globalize) { - 'use strict'; +import events from 'events'; +import inputManager from 'inputManager'; +import libraryMenu from 'libraryMenu'; +import layoutManager from 'layoutManager'; +import loading from 'loading'; +import dom from 'dom'; +import * as userSettings from 'userSettings'; +import cardBuilder from 'cardBuilder'; +import playbackManager from 'playbackManager'; +import mainTabsManager from 'mainTabsManager'; +import globalize from 'globalize'; +import 'scrollStyles'; +import 'emby-itemscontainer'; +import 'emby-button'; + +/* eslint-disable indent */ function getTabs() { return [{ @@ -59,7 +73,7 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do } } - return function (view, params) { + export default function (view, params) { function reload() { loading.show(); loadResume(); @@ -67,7 +81,7 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do } function loadNextUp() { - var query = { + const query = { Limit: 24, Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo', UserId: ApiClient.getCurrentUserId(), @@ -83,7 +97,7 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do view.querySelector('.noNextUpItems').classList.remove('hide'); } - var container = view.querySelector('#nextUpItems'); + const container = view.querySelector('#nextUpItems'); cardBuilder.buildCards(result.Items, { itemsContainer: container, preferThumb: true, @@ -98,7 +112,7 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do }); loading.hide(); - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(view); }); }); @@ -113,10 +127,10 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do } function loadResume() { - var parentId = libraryMenu.getTopParentId(); - var screenWidth = dom.getWindowSize().innerWidth; - var limit = screenWidth >= 1600 ? 5 : 6; - var options = { + const parentId = libraryMenu.getTopParentId(); + const screenWidth = dom.getWindowSize().innerWidth; + const limit = screenWidth >= 1600 ? 5 : 6; + const options = { SortBy: 'DatePlayed', SortOrder: 'Descending', IncludeItemTypes: 'Episode', @@ -137,8 +151,8 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do view.querySelector('#resumableSection').classList.add('hide'); } - var allowBottomPadding = !enableScrollX(); - var container = view.querySelector('#resumableItems'); + const allowBottomPadding = !enableScrollX(); + const container = view.querySelector('#resumableItems'); cardBuilder.buildCards(result.Items, { itemsContainer: container, preferThumb: true, @@ -160,7 +174,7 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do } function onTabChange(e) { - var newIndex = parseInt(e.detail.selectedTabIndex); + const newIndex = parseInt(e.detail.selectedTabIndex); loadTab(view, newIndex); } @@ -173,49 +187,50 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do } function getTabController(page, index, callback) { - var depends = []; + let depends; switch (index) { case 0: - depends.push('controllers/shows/tvshows'); + depends = 'controllers/shows/tvshows'; break; case 1: + depends = 'controllers/shows/tvrecommended'; break; case 2: - depends.push('controllers/shows/tvlatest'); + depends = 'controllers/shows/tvlatest'; break; case 3: - depends.push('controllers/shows/tvupcoming'); + depends = 'controllers/shows/tvupcoming'; break; case 4: - depends.push('controllers/shows/tvgenres'); + depends = 'controllers/shows/tvgenres'; break; case 5: - depends.push('controllers/shows/tvstudios'); + depends = 'controllers/shows/tvstudios'; break; case 6: - depends.push('controllers/shows/episodes'); + depends = 'controllers/shows/episodes'; break; case 7: - depends.push('scripts/searchtab'); + depends = 'scripts/searchtab'; } - require(depends, function (controllerFactory) { - var tabContent; + import(depends).then(({default: controllerFactory}) => { + let tabContent; if (index === 1) { tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); self.tabContent = tabContent; } - var controller = tabControllers[index]; + let controller = tabControllers[index]; if (!controller) { tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); @@ -270,7 +285,7 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do } function onWebSocketMessage(e, data) { - var msg = data; + const msg = data; if (msg.MessageType === 'UserDataChanged' && msg.Data.UserId == ApiClient.getCurrentUserId()) { renderedTabs = []; @@ -285,13 +300,13 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do } } - var isViewRestored; - var self = this; - var currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId)); - var initialTabIndex = currentTabIndex; + let isViewRestored; + const self = this; + let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId)); + let initialTabIndex = currentTabIndex; self.initTab = function () { - var tabContent = self.tabContent; + const tabContent = self.tabContent; setScrollClasses(tabContent.querySelector('#resumableItems'), enableScrollX()); }; @@ -299,14 +314,14 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do reload(); }; - var tabControllers = []; - var renderedTabs = []; + const tabControllers = []; + let renderedTabs = []; setScrollClasses(view.querySelector('#resumableItems'), enableScrollX()); view.addEventListener('viewshow', function (e) { isViewRestored = e.detail.isRestored; initTabs(); if (!view.getAttribute('data-title')) { - var parentId = params.topParentId; + const parentId = params.topParentId; if (parentId) { ApiClient.getItem(ApiClient.getCurrentUserId(), parentId).then(function (item) { @@ -335,5 +350,6 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do } }); }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/shows/tvshows.js b/src/controllers/shows/tvshows.js index 753516f902..cde5ae5058 100644 --- a/src/controllers/shows/tvshows.js +++ b/src/controllers/shows/tvshows.js @@ -1,10 +1,21 @@ -define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'alphaPicker', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, alphaPicker, userSettings, globalize) { - 'use strict'; +import layoutManager from 'layoutManager'; +import loading from 'loading'; +import events from 'events'; +import libraryBrowser from 'libraryBrowser'; +import imageLoader from 'imageLoader'; +import listView from 'listView'; +import cardBuilder from 'cardBuilder'; +import AlphaPicker from 'alphaPicker'; +import * as userSettings from 'userSettings'; +import globalize from 'globalize'; +import 'emby-itemscontainer'; - return function (view, params, tabContent) { +/* eslint-disable indent */ + + export default function (view, params, tabContent) { function getPageData(context) { - var key = getSavedQueryKey(context); - var pageData = data[key]; + const key = getSavedQueryKey(context); + let pageData = data[key]; if (!pageData) { pageData = data[key] = { @@ -45,8 +56,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' } function onViewStyleChange() { - var viewStyle = self.getCurrentViewStyle(); - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const viewStyle = self.getCurrentViewStyle(); + const itemsContainer = tabContent.querySelector('.itemsContainer'); if ('List' == viewStyle) { itemsContainer.classList.add('vertical-list'); @@ -62,7 +73,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' function reloadItems(page) { loading.show(); isLoading = true; - var query = getQuery(page); + const query = getQuery(page); ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) { function onNextPageClick() { if (isLoading) { @@ -88,8 +99,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' window.scrollTo(0, 0); updateFilterControls(page); - var html; - var pagingHtml = libraryBrowser.getQueryPagingHtml({ + let html; + const pagingHtml = libraryBrowser.getQueryPagingHtml({ startIndex: query.StartIndex, limit: query.Limit, totalRecordCount: result.TotalRecordCount, @@ -99,7 +110,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' sortButton: false, filterButton: false }); - var viewStyle = self.getCurrentViewStyle(); + const viewStyle = self.getCurrentViewStyle(); if (viewStyle == 'Thumb') { html = cardBuilder.getCardsHtml({ items: result.Items, @@ -156,49 +167,48 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' showYear: true }); } - var i; - var length; - var elems = tabContent.querySelectorAll('.paging'); - for (i = 0, length = elems.length; i < length; i++) { + let elems = tabContent.querySelectorAll('.paging'); + + for (let i = 0, length = elems.length; i < length; i++) { elems[i].innerHTML = pagingHtml; } elems = tabContent.querySelectorAll('.btnNextPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onNextPageClick); } elems = tabContent.querySelectorAll('.btnPreviousPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onPreviousPageClick); } - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const itemsContainer = tabContent.querySelector('.itemsContainer'); itemsContainer.innerHTML = html; imageLoader.lazyChildren(itemsContainer); libraryBrowser.saveQueryValues(getSavedQueryKey(page), query); loading.hide(); isLoading = false; - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); } function updateFilterControls(tabContent) { - var query = getQuery(tabContent); + const query = getQuery(tabContent); self.alphaPicker.value(query.NameStartsWithOrGreater); } - var self = this; - var data = {}; - var isLoading = false; + const self = this; + const data = {}; + let isLoading = false; self.showFilterMenu = function () { - require(['components/filterdialog/filterdialog'], function (filterDialogFactory) { - var filterDialog = new filterDialogFactory({ + import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + const filterDialog = new filterDialogFactory({ query: getQuery(tabContent), mode: 'series', serverId: ApiClient.serverId() @@ -216,17 +226,17 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' }; function initPage(tabContent) { - var alphaPickerElement = tabContent.querySelector('.alphaPicker'); - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const alphaPickerElement = tabContent.querySelector('.alphaPicker'); + const itemsContainer = tabContent.querySelector('.itemsContainer'); alphaPickerElement.addEventListener('alphavaluechanged', function (e) { - var newValue = e.detail.value; - var query = getQuery(tabContent); + const newValue = e.detail.value; + const query = getQuery(tabContent); query.NameStartsWithOrGreater = newValue; query.StartIndex = 0; reloadItems(tabContent); }); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker({ element: alphaPickerElement, valueChangeEvent: 'click' }); @@ -267,12 +277,12 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' button: e.target }); }); - var btnSelectView = tabContent.querySelector('.btnSelectView'); + const btnSelectView = tabContent.querySelector('.btnSelectView'); btnSelectView.addEventListener('click', function (e) { libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(',')); }); btnSelectView.addEventListener('layoutchange', function (e) { - var viewStyle = e.detail.viewStyle; + const viewStyle = e.detail.viewStyle; getPageData(tabContent).view = viewStyle; libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); getQuery(tabContent).StartIndex = 0; @@ -290,5 +300,6 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' }; self.destroy = function () {}; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/shows/tvstudios.js b/src/controllers/shows/tvstudios.js index 1051bfa10b..ba7fdfaf78 100644 --- a/src/controllers/shows/tvstudios.js +++ b/src/controllers/shows/tvstudios.js @@ -1,9 +1,13 @@ -define(['loading', 'libraryBrowser', 'cardBuilder', 'apphost'], function (loading, libraryBrowser, cardBuilder, appHost) { - 'use strict'; +import loading from 'loading'; +import libraryBrowser from 'libraryBrowser'; +import cardBuilder from 'cardBuilder'; +import appHost from 'apphost'; + +/* eslint-disable indent */ function getQuery(params) { - var key = getSavedQueryKey(); - var pageData = data[key]; + const key = getSavedQueryKey(); + let pageData = data[key]; if (!pageData) { pageData = data[key] = { @@ -27,14 +31,14 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'apphost'], function (loadin } function getPromise(context, params) { - var query = getQuery(params); + const query = getQuery(params); loading.show(); return ApiClient.getStudios(ApiClient.getCurrentUserId(), query); } function reloadItems(context, params, promise) { promise.then(function (result) { - var elem = context.querySelector('#items'); + const elem = context.querySelector('#items'); cardBuilder.buildCards(result.Items, { itemsContainer: elem, shape: 'backdrop', @@ -47,16 +51,17 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'apphost'], function (loadin }); loading.hide(); - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(context); }); }); } - var data = {}; - return function (view, params, tabContent) { - var promise; - var self = this; + const data = {}; + + export default function (view, params, tabContent) { + let promise; + const self = this; self.preRender = function () { promise = getPromise(view, params); @@ -65,5 +70,6 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'apphost'], function (loadin self.renderTab = function () { reloadItems(tabContent, params, promise); }; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/shows/tvupcoming.js b/src/controllers/shows/tvupcoming.js index d57a5ae3cd..a2016279b8 100644 --- a/src/controllers/shows/tvupcoming.js +++ b/src/controllers/shows/tvupcoming.js @@ -1,9 +1,19 @@ -define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'globalize', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, loading, datetime, libraryBrowser, cardBuilder, appHost, imageLoader, globalize) { - 'use strict'; +import layoutManager from 'layoutManager'; +import loading from 'loading'; +import datetime from 'datetime'; +import libraryBrowser from 'libraryBrowser'; +import cardBuilder from 'cardBuilder'; +import appHost from 'apphost'; +import imageLoader from 'imageLoader'; +import globalize from 'globalize'; +import 'scrollStyles'; +import 'emby-itemscontainer'; + +/* eslint-disable indent */ function getUpcomingPromise(context, params) { loading.show(); - var query = { + const query = { Limit: 48, Fields: 'AirTime,UserData', UserId: ApiClient.getCurrentUserId(), @@ -17,7 +27,7 @@ define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', function loadUpcoming(context, params, promise) { promise.then(function (result) { - var items = result.Items; + const items = result.Items; if (items.length) { context.querySelector('.noItemsMessage').style.display = 'none'; @@ -39,19 +49,17 @@ define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', } function renderUpcoming(elem, items) { - var i; - var length; - var groups = []; - var currentGroupName = ''; - var currentGroup = []; + const groups = []; + let currentGroupName = ''; + let currentGroup = []; - for (i = 0, length = items.length; i < length; i++) { - var item = items[i]; - var dateText = ''; + for (let i = 0, length = items.length; i < length; i++) { + const item = items[i]; + let dateText = ''; if (item.PremiereDate) { try { - var premiereDate = datetime.parseISO8601Date(item.PremiereDate, true); + const premiereDate = datetime.parseISO8601Date(item.PremiereDate, true); dateText = datetime.isRelativeDay(premiereDate, -1) ? globalize.translate('Yesterday') : datetime.toLocaleDateString(premiereDate, { weekday: 'long', month: 'short', @@ -77,17 +85,17 @@ define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', } } - var html = ''; + let html = ''; - for (i = 0, length = groups.length; i < length; i++) { - var group = groups[i]; + for (let i = 0, length = groups.length; i < length; i++) { + const group = groups[i]; html += '
'; html += '

' + group.name + '

'; - var allowBottomPadding = true; + let allowBottomPadding = true; if (enableScrollX()) { allowBottomPadding = false; - var scrollXClass = 'scrollX hiddenScrollX'; + let scrollXClass = 'scrollX hiddenScrollX'; if (layoutManager.tv) { scrollXClass += ' smoothScrollX'; @@ -98,7 +106,7 @@ define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', html += '
'; } - var supportsImageAnalysis = appHost.supports('imageanalysis'); + let supportsImageAnalysis = appHost.supports('imageanalysis'); supportsImageAnalysis = false; html += cardBuilder.getCardsHtml({ items: group.items, @@ -124,9 +132,9 @@ define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', imageLoader.lazyChildren(elem); } - return function (view, params, tabContent) { - var upcomingPromise; - var self = this; + export default function (view, params, tabContent) { + let upcomingPromise; + const self = this; self.preRender = function () { upcomingPromise = getUpcomingPromise(view, params); @@ -135,5 +143,6 @@ define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', self.renderTab = function () { loadUpcoming(tabContent, params, upcomingPromise); }; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/user/display.js b/src/controllers/user/display.js index 3aeb7db8ce..408631b383 100644 --- a/src/controllers/user/display.js +++ b/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,14 +14,14 @@ 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); if (settingsInstance) { settingsInstance.loadData(); } else { - settingsInstance = new DisplaySettings({ + settingsInstance = new DisplaySettings.default({ serverId: ApiClient.serverId(), userId: userId, element: view.querySelector('.settingsContainer'), diff --git a/src/controllers/user/home.js b/src/controllers/user/home.js index aa7d147c31..117a457d3f 100644 --- a/src/controllers/user/home.js +++ b/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,14 +14,14 @@ 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); if (homescreenSettingsInstance) { homescreenSettingsInstance.loadData(); } else { - homescreenSettingsInstance = new HomescreenSettings({ + homescreenSettingsInstance = new HomescreenSettings.default({ serverId: ApiClient.serverId(), userId: userId, element: view.querySelector('.homeScreenSettingsContainer'), diff --git a/src/controllers/user/menu.js b/src/controllers/user/menu.js index df5864dbdb..ef4b3b21c8 100644 --- a/src/controllers/user/menu.js +++ b/src/controllers/user/menu.js @@ -1,64 +1,60 @@ -define(['apphost', 'connectionManager', 'layoutManager', 'listViewStyle', 'emby-button'], function(appHost, connectionManager, layoutManager) { - 'use strict'; +import appHost from 'apphost'; +import connectionManager from 'connectionManager'; +import layoutManager from 'layoutManager'; +import 'listViewStyle'; +import 'emby-button'; - return function(view, params) { - view.querySelector('.btnLogout').addEventListener('click', function() { - Dashboard.logout(); - }); +export default function (view, params) { + view.querySelector('.btnLogout').addEventListener('click', function () { + Dashboard.logout(); + }); - view.querySelector('.selectServer').addEventListener('click', function () { - Dashboard.selectServer(); - }); + view.querySelector('.selectServer').addEventListener('click', function () { + Dashboard.selectServer(); + }); - view.querySelector('.clientSettings').addEventListener('click', function () { - window.NativeShell.openClientSettings(); - }); + view.querySelector('.clientSettings').addEventListener('click', function () { + window.NativeShell.openClientSettings(); + }); - view.addEventListener('viewshow', function() { - // this page can also be used by admins to change user preferences from the user edit page - var userId = params.userId || Dashboard.getCurrentUserId(); - var page = this; + view.addEventListener('viewshow', function () { + // this page can also be used by admins to change user preferences from the user edit page + const userId = params.userId || Dashboard.getCurrentUserId(); + const page = this; - page.querySelector('.lnkMyProfile').setAttribute('href', 'myprofile.html?userId=' + userId); - page.querySelector('.lnkDisplayPreferences').setAttribute('href', 'mypreferencesdisplay.html?userId=' + userId); - page.querySelector('.lnkHomePreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId); - page.querySelector('.lnkPlaybackPreferences').setAttribute('href', 'mypreferencesplayback.html?userId=' + userId); - page.querySelector('.lnkSubtitlePreferences').setAttribute('href', 'mypreferencessubtitles.html?userId=' + userId); + page.querySelector('.lnkMyProfile').setAttribute('href', 'myprofile.html?userId=' + userId); + page.querySelector('.lnkDisplayPreferences').setAttribute('href', 'mypreferencesdisplay.html?userId=' + userId); + page.querySelector('.lnkHomePreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId); + page.querySelector('.lnkPlaybackPreferences').setAttribute('href', 'mypreferencesplayback.html?userId=' + userId); + page.querySelector('.lnkSubtitlePreferences').setAttribute('href', 'mypreferencessubtitles.html?userId=' + userId); - if (window.NativeShell && window.NativeShell.AppHost.supports('clientsettings')) { - page.querySelector('.clientSettings').classList.remove('hide'); - } else { - page.querySelector('.clientSettings').classList.add('hide'); - } + if (window.NativeShell && window.NativeShell.AppHost.supports('clientsettings')) { + page.querySelector('.clientSettings').classList.remove('hide'); + } else { + page.querySelector('.clientSettings').classList.add('hide'); + } - if (appHost.supports('multiserver')) { - page.querySelector('.selectServer').classList.remove('hide'); - } else { - page.querySelector('.selectServer').classList.add('hide'); - } + if (appHost.supports('multiserver')) { + page.querySelector('.selectServer').classList.remove('hide'); + } else { + page.querySelector('.selectServer').classList.add('hide'); + } - // hide the actions if user preferences are being edited for a different user - if (params.userId && params.userId !== Dashboard.getCurrentUserId) { - page.querySelector('.userSection').classList.add('hide'); + // hide the actions if user preferences are being edited for a different user + if (params.userId && params.userId !== Dashboard.getCurrentUserId) { + page.querySelector('.userSection').classList.add('hide'); + page.querySelector('.adminSection').classList.add('hide'); + } + + ApiClient.getUser(userId).then(function (user) { + page.querySelector('.headerUsername').innerHTML = user.Name; + if (!user.Policy.IsAdministrator) { 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) { - page.querySelector('.adminSection').classList.add('hide'); - } - }); - - require(['autoFocuser'], function (autoFocuser) { - autoFocuser.autoFocus(view); - }); }); - }; -}); + + import('autoFocuser').then(({default: autoFocuser}) => { + autoFocuser.autoFocus(view); + }); + }); +} diff --git a/src/controllers/user/playback.js b/src/controllers/user/playback.js index e945a46aab..c138b5a86d 100644 --- a/src/controllers/user/playback.js +++ b/src/controllers/user/playback.js @@ -1,6 +1,9 @@ define(['playbackSettings', 'dom', 'globalize', 'loading', 'userSettings', 'autoFocuser', 'listViewStyle'], function (PlaybackSettings, dom, globalize, loading, userSettings, autoFocuser) { 'use strict'; + // Shortcuts + const UserSettings = userSettings.UserSettings; + return function (view, params) { function onBeforeUnload(e) { if (hasChanges) { @@ -11,14 +14,14 @@ define(['playbackSettings', 'dom', 'globalize', 'loading', 'userSettings', 'auto 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); if (settingsInstance) { settingsInstance.loadData(); } else { - settingsInstance = new PlaybackSettings({ + settingsInstance = new PlaybackSettings.default({ serverId: ApiClient.serverId(), userId: userId, element: view.querySelector('.settingsContainer'), diff --git a/src/controllers/user/profile.js b/src/controllers/user/profile.js index fd7d1e32cc..631253d019 100644 --- a/src/controllers/user/profile.js +++ b/src/controllers/user/profile.js @@ -1,106 +1,109 @@ -define(['controllers/dashboard/users/userpasswordpage', 'loading', 'libraryMenu', 'apphost', 'globalize', 'emby-button'], function (UserPasswordPage, loading, libraryMenu, appHost, globalize) { - 'use strict'; +import UserPasswordPage from 'controllers/dashboard/users/userpasswordpage'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import appHost from 'apphost'; +import globalize from 'globalize'; +import 'emby-button'; - function reloadUser(page) { - var userId = getParameterByName('userId'); - loading.show(); - ApiClient.getUser(userId).then(function (user) { - page.querySelector('.username').innerHTML = user.Name; - libraryMenu.setTitle(user.Name); +function reloadUser(page) { + const userId = getParameterByName('userId'); + loading.show(); + ApiClient.getUser(userId).then(function (user) { + page.querySelector('.username').innerHTML = user.Name; + libraryMenu.setTitle(user.Name); - var imageUrl = 'assets/img/avatar.png'; + let imageUrl = 'assets/img/avatar.png'; + if (user.PrimaryImageTag) { + imageUrl = ApiClient.getUserImageUrl(user.Id, { + tag: user.PrimaryImageTag, + type: 'Primary' + }); + } + + const userImage = page.querySelector('#image'); + userImage.style.backgroundImage = 'url(' + imageUrl + ')'; + + Dashboard.getCurrentUser().then(function (loggedInUser) { if (user.PrimaryImageTag) { - imageUrl = ApiClient.getUserImageUrl(user.Id, { - tag: user.PrimaryImageTag, - type: 'Primary' - }); + page.querySelector('#btnAddImage').classList.add('hide'); + page.querySelector('#btnDeleteImage').classList.remove('hide'); + } else if (appHost.supports('fileinput') && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) { + page.querySelector('#btnDeleteImage').classList.add('hide'); + page.querySelector('#btnAddImage').classList.remove('hide'); } + }); + loading.hide(); + }); +} - var userImage = page.querySelector('#image'); - userImage.style.backgroundImage = 'url(' + imageUrl + ')'; - - Dashboard.getCurrentUser().then(function (loggedInUser) { - if (user.PrimaryImageTag) { - page.querySelector('#btnAddImage').classList.add('hide'); - page.querySelector('#btnDeleteImage').classList.remove('hide'); - } else if (appHost.supports('fileinput') && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) { - page.querySelector('#btnDeleteImage').classList.add('hide'); - page.querySelector('#btnAddImage').classList.remove('hide'); - } +function onFileReaderError(evt) { + loading.hide(); + switch (evt.target.error.code) { + case evt.target.error.NOT_FOUND_ERR: + import('toast').then(({default: toast}) => { + toast(globalize.translate('FileNotFound')); }); + break; + case evt.target.error.ABORT_ERR: + onFileReaderAbort(); + break; + case evt.target.error.NOT_READABLE_ERR: + default: + import('toast').then(({default: toast}) => { + toast(globalize.translate('FileReadError')); + }); + } +} + +function onFileReaderAbort(evt) { + loading.hide(); + import('toast').then(({default: toast}) => { + toast(globalize.translate('FileReadCancelled')); + }); +} + +function setFiles(page, files) { + const userImage = page.querySelector('#image'); + const file = files[0]; + + if (!file || !file.type.match('image.*')) { + return false; + } + + const reader = new FileReader(); + reader.onerror = onFileReaderError; + reader.onabort = onFileReaderAbort; + reader.onload = function (evt) { + userImage.style.backgroundImage = 'url(' + evt.target.result + ')'; + const userId = getParameterByName('userId'); + ApiClient.uploadUserImage(userId, 'Primary', file).then(function () { loading.hide(); - }); - } - - function onFileReaderError(evt) { - loading.hide(); - switch (evt.target.error.code) { - case evt.target.error.NOT_FOUND_ERR: - require(['toast'], function (toast) { - toast(globalize.translate('FileNotFound')); - }); - break; - case evt.target.error.ABORT_ERR: - onFileReaderAbort(); - break; - case evt.target.error.NOT_READABLE_ERR: - default: - require(['toast'], function (toast) { - toast(globalize.translate('FileReadError')); - }); - } - } - - function onFileReaderAbort(evt) { - loading.hide(); - require(['toast'], function (toast) { - toast(globalize.translate('FileReadCancelled')); - }); - } - - function setFiles(page, files) { - var userImage = page.querySelector('#image'); - var file = files[0]; - - if (!file || !file.type.match('image.*')) { - return false; - } - - var reader = new FileReader(); - reader.onerror = onFileReaderError; - reader.onabort = onFileReaderAbort; - reader.onload = function (evt) { - userImage.style.backgroundImage = 'url(' + evt.target.result + ')'; - var userId = getParameterByName('userId'); - ApiClient.uploadUserImage(userId, 'Primary', file).then(function () { - loading.hide(); - reloadUser(page); - }); - }; - - reader.readAsDataURL(file); - } - - return function (view, params) { - reloadUser(view); - new UserPasswordPage(view, params); - view.querySelector('#btnDeleteImage').addEventListener('click', function () { - require(['confirm'], function (confirm) { - confirm(globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage')).then(function () { - loading.show(); - var userId = getParameterByName('userId'); - ApiClient.deleteUserImage(userId, 'primary').then(function () { - loading.hide(); - reloadUser(view); - }); - }); - }); - }); - view.querySelector('#btnAddImage').addEventListener('click', function (evt) { - view.querySelector('#uploadImage').click(); - }); - view.querySelector('#uploadImage').addEventListener('change', function (evt) { - setFiles(view, evt.target.files); + reloadUser(page); }); }; -}); + + reader.readAsDataURL(file); +} + +export default function (view, params) { + reloadUser(view); + new UserPasswordPage(view, params); + view.querySelector('#btnDeleteImage').addEventListener('click', function () { + import('confirm').then(({default: confirm}) => { + confirm(globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage')).then(function () { + loading.show(); + const userId = getParameterByName('userId'); + ApiClient.deleteUserImage(userId, 'primary').then(function () { + loading.hide(); + reloadUser(view); + }); + }); + }); + }); + view.querySelector('#btnAddImage').addEventListener('click', function (evt) { + view.querySelector('#uploadImage').click(); + }); + view.querySelector('#uploadImage').addEventListener('change', function (evt) { + setFiles(view, evt.target.files); + }); +} diff --git a/src/controllers/user/subtitles.js b/src/controllers/user/subtitles.js index 152301f31a..c14b4424ac 100644 --- a/src/controllers/user/subtitles.js +++ b/src/controllers/user/subtitles.js @@ -1,49 +1,63 @@ -define(['subtitleSettings', 'userSettings', 'autoFocuser'], function (SubtitleSettings, userSettings, autoFocuser) { - 'use strict'; +import subtitleSettings from 'subtitleSettings'; +import {UserSettings, currentSettings as userSettings} from 'userSettings'; +import autoFocuser from 'autoFocuser'; - return function (view, params) { - function onBeforeUnload(e) { - if (hasChanges) { - e.returnValue = 'You currently have unsaved changes. Are you sure you wish to leave?'; - } +export class SubtitleController { + constructor(view, params) { + this.userId = params.userId || ApiClient.getCurrentUserId(); + this.currentSettings = this.userId === ApiClient.getCurrentUserId() ? userSettings : new UserSettings(); + this.hasChanges = false; + this.subtitleSettingsInstance = null; + this.view = view; + + view.addEventListener('viewshow', this.viewShow.bind(this)); + view.addEventListener('change', this.change.bind(this)); + view.addEventListener('viewbeforehide', this.viewBeforeHide.bind(this)); + view.addEventListener('viewdestroy', this.viewDestroy.bind(this)); + } + + viewShow() { + window.addEventListener('beforeunload', this.beforeUnload.bind(this)); + + if (this.subtitleSettingsInstance) { + this.subtitleSettingsInstance.loadData(); + } else { + this.subtitleSettingsInstance = new subtitleSettings({ + serverId: ApiClient.serverId(), + userId: this.userId, + element: this.view.querySelector('.settingsContainer'), + userSettings: this.currentSettings, + enableSaveButton: false, + enableSaveConfirmation: false, + autoFocus: autoFocuser.isEnabled() + }); } + } - var subtitleSettingsInstance; - var hasChanges; - var userId = params.userId || ApiClient.getCurrentUserId(); - var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new userSettings(); - view.addEventListener('viewshow', function () { - window.addEventListener('beforeunload', onBeforeUnload); + viewDestroy() { + if (this.subtitleSettingsInstance) { + this.subtitleSettingsInstance.destroy(); + this.subtitleSettingsInstance = null; + } + } - if (subtitleSettingsInstance) { - subtitleSettingsInstance.loadData(); - } else { - subtitleSettingsInstance = new SubtitleSettings({ - serverId: ApiClient.serverId(), - userId: userId, - element: view.querySelector('.settingsContainer'), - userSettings: currentSettings, - enableSaveButton: false, - enableSaveConfirmation: false, - autoFocus: autoFocuser.isEnabled() - }); - } - }); - view.addEventListener('change', function () { - hasChanges = true; - }); - view.addEventListener('viewbeforehide', function () { - hasChanges = false; + viewBeforeHide() { + this.hasChanges = false; - if (subtitleSettingsInstance) { - subtitleSettingsInstance.submit(); - } - }); - view.addEventListener('viewdestroy', function () { - if (subtitleSettingsInstance) { - subtitleSettingsInstance.destroy(); - subtitleSettingsInstance = null; - } - }); - }; -}); + if (this.subtitleSettingsInstance) { + this.subtitleSettingsInstance.submit(); + } + } + + change() { + this.hasChanges = true; + } + + beforeUnload(e) { + if (this.hasChanges) { + e.returnValue = 'You currently have unsaved changes. Are you sure you wish to leave?'; + } + } +} + +export default SubtitleController; diff --git a/src/controllers/wizard/finish.js b/src/controllers/wizard/finish.js index c27d9a5f4b..5451d6665c 100644 --- a/src/controllers/wizard/finish.js +++ b/src/controllers/wizard/finish.js @@ -1,18 +1,16 @@ -define(['loading'], function (loading) { - 'use strict'; +import loading from 'loading'; - function onFinish() { - loading.show(); - ApiClient.ajax({ - url: ApiClient.getUrl('Startup/Complete'), - type: 'POST' - }).then(function () { - loading.hide(); - window.location.href = 'index.html'; - }); - } +function onFinish() { + loading.show(); + ApiClient.ajax({ + url: ApiClient.getUrl('Startup/Complete'), + type: 'POST' + }).then(function () { + loading.hide(); + window.location.href = 'index.html'; + }); +} - return function (view, params) { - view.querySelector('.btnWizardNext').addEventListener('click', onFinish); - }; -}); +export default function (view, params) { + view.querySelector('.btnWizardNext').addEventListener('click', onFinish); +} diff --git a/src/controllers/wizard/remoteaccess.js b/src/controllers/wizard/remoteaccess.js index 400cd357f4..3c482607de 100644 --- a/src/controllers/wizard/remoteaccess.js +++ b/src/controllers/wizard/remoteaccess.js @@ -1,39 +1,40 @@ -define(['loading', 'emby-checkbox', 'emby-button', 'emby-select'], function (loading) { - 'use strict'; +import loading from 'loading'; +import 'emby-checkbox'; +import 'emby-button'; +import 'emby-select'; - function save(page) { - loading.show(); - var apiClient = ApiClient; - var config = {}; - config.EnableRemoteAccess = page.querySelector('#chkRemoteAccess').checked; - config.EnableAutomaticPortMapping = page.querySelector('#chkEnableUpnp').checked; - apiClient.ajax({ - type: 'POST', - data: config, - url: apiClient.getUrl('Startup/RemoteAccess') - }).then(function () { - loading.hide(); - navigateToNextPage(); - }); - } +function save(page) { + loading.show(); + const apiClient = ApiClient; + const config = {}; + config.EnableRemoteAccess = page.querySelector('#chkRemoteAccess').checked; + config.EnableAutomaticPortMapping = page.querySelector('#chkEnableUpnp').checked; + apiClient.ajax({ + type: 'POST', + data: config, + url: apiClient.getUrl('Startup/RemoteAccess') + }).then(function () { + loading.hide(); + navigateToNextPage(); + }); +} - function navigateToNextPage() { - Dashboard.navigate('wizardfinish.html'); - } +function navigateToNextPage() { + Dashboard.navigate('wizardfinish.html'); +} - function onSubmit(e) { - save(this); - e.preventDefault(); - return false; - } +function onSubmit(e) { + save(this); + e.preventDefault(); + return false; +} - return function (view, params) { - view.querySelector('.wizardSettingsForm').addEventListener('submit', onSubmit); - view.addEventListener('viewshow', function () { - document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); - }); - view.addEventListener('viewhide', function () { - document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); - }); - }; -}); +export default function (view, params) { + view.querySelector('.wizardSettingsForm').addEventListener('submit', onSubmit); + view.addEventListener('viewshow', function () { + document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); + }); + view.addEventListener('viewhide', function () { + document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); + }); +} diff --git a/src/controllers/wizard/settings.js b/src/controllers/wizard/settings.js index 2062e795a3..a1c3c11267 100644 --- a/src/controllers/wizard/settings.js +++ b/src/controllers/wizard/settings.js @@ -1,84 +1,85 @@ -define(['loading', 'emby-checkbox', 'emby-button', 'emby-select'], function (loading) { - 'use strict'; +import loading from 'loading'; +import 'emby-checkbox'; +import 'emby-button'; +import 'emby-select'; - function save(page) { - loading.show(); - var apiClient = ApiClient; - apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) { - config.PreferredMetadataLanguage = page.querySelector('#selectLanguage').value; - config.MetadataCountryCode = page.querySelector('#selectCountry').value; - apiClient.ajax({ - type: 'POST', - data: config, - url: apiClient.getUrl('Startup/Configuration') - }).then(function () { - loading.hide(); - navigateToNextPage(); - }); +function save(page) { + loading.show(); + const apiClient = ApiClient; + apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) { + config.PreferredMetadataLanguage = page.querySelector('#selectLanguage').value; + config.MetadataCountryCode = page.querySelector('#selectCountry').value; + apiClient.ajax({ + type: 'POST', + data: config, + url: apiClient.getUrl('Startup/Configuration') + }).then(function () { + loading.hide(); + navigateToNextPage(); }); + }); +} + +function populateLanguages(select, languages) { + let html = ''; + html += ""; + + for (let i = 0, length = languages.length; i < length; i++) { + const culture = languages[i]; + html += "'; } - function populateLanguages(select, languages) { - var html = ''; - html += ""; + select.innerHTML = html; +} - for (var i = 0, length = languages.length; i < length; i++) { - var culture = languages[i]; - html += "'; - } +function populateCountries(select, allCountries) { + let html = ''; + html += ""; - select.innerHTML = html; + for (let i = 0, length = allCountries.length; i < length; i++) { + const culture = allCountries[i]; + html += "'; } - function populateCountries(select, allCountries) { - var html = ''; - html += ""; + select.innerHTML = html; +} - for (var i = 0, length = allCountries.length; i < length; i++) { - var culture = allCountries[i]; - html += "'; - } +function reloadData(page, config, cultures, countries) { + populateLanguages(page.querySelector('#selectLanguage'), cultures); + populateCountries(page.querySelector('#selectCountry'), countries); + page.querySelector('#selectLanguage').value = config.PreferredMetadataLanguage; + page.querySelector('#selectCountry').value = config.MetadataCountryCode; + loading.hide(); +} - select.innerHTML = html; - } +function reload(page) { + loading.show(); + const apiClient = ApiClient; + const promise1 = apiClient.getJSON(apiClient.getUrl('Startup/Configuration')); + const promise2 = apiClient.getCultures(); + const promise3 = apiClient.getCountries(); + Promise.all([promise1, promise2, promise3]).then(function (responses) { + reloadData(page, responses[0], responses[1], responses[2]); + }); +} - function reloadData(page, config, cultures, countries) { - populateLanguages(page.querySelector('#selectLanguage'), cultures); - populateCountries(page.querySelector('#selectCountry'), countries); - page.querySelector('#selectLanguage').value = config.PreferredMetadataLanguage; - page.querySelector('#selectCountry').value = config.MetadataCountryCode; - loading.hide(); - } +function navigateToNextPage() { + Dashboard.navigate('wizardremoteaccess.html'); +} - function reload(page) { - loading.show(); - var apiClient = ApiClient; - var promise1 = apiClient.getJSON(apiClient.getUrl('Startup/Configuration')); - var promise2 = apiClient.getCultures(); - var promise3 = apiClient.getCountries(); - Promise.all([promise1, promise2, promise3]).then(function (responses) { - reloadData(page, responses[0], responses[1], responses[2]); - }); - } +function onSubmit(e) { + save(this); + e.preventDefault(); + return false; +} - function navigateToNextPage() { - Dashboard.navigate('wizardremoteaccess.html'); - } - - function onSubmit(e) { - save(this); - e.preventDefault(); - return false; - } - - return function (view, params) { - view.querySelector('.wizardSettingsForm').addEventListener('submit', onSubmit); - view.addEventListener('viewshow', function () { - document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); - reload(this); - }); - view.addEventListener('viewhide', function () { - document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); - }); - }; -}); +export default function (view, params) { + view.querySelector('.wizardSettingsForm').addEventListener('submit', onSubmit); + view.addEventListener('viewshow', function () { + document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); + reload(this); + }); + view.addEventListener('viewhide', function () { + document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); + }); +} diff --git a/src/controllers/wizard/start.js b/src/controllers/wizard/start.js index b7fb920d45..cec93446db 100644 --- a/src/controllers/wizard/start.js +++ b/src/controllers/wizard/start.js @@ -1,48 +1,49 @@ -define(['jQuery', 'loading', 'emby-button', 'emby-select'], function ($, loading) { - 'use strict'; +import $ from 'jQuery'; +import loading from 'loading'; +import 'emby-button'; +import 'emby-select'; - function loadPage(page, config, languageOptions) { - $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) { - return ''; - })).val(config.UICulture); - loading.hide(); - } +function loadPage(page, config, languageOptions) { + $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) { + return ''; + })).val(config.UICulture); + loading.hide(); +} - function save(page) { +function save(page) { + loading.show(); + const apiClient = ApiClient; + apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) { + config.UICulture = $('#selectLocalizationLanguage', page).val(); + apiClient.ajax({ + type: 'POST', + data: config, + url: apiClient.getUrl('Startup/Configuration') + }).then(function () { + Dashboard.navigate('wizarduser.html'); + }); + }); +} + +function onSubmit() { + save($(this).parents('.page')); + return false; +} + +export default function (view, params) { + $('.wizardStartForm', view).on('submit', onSubmit); + view.addEventListener('viewshow', function () { + document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); loading.show(); - var apiClient = ApiClient; - apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) { - config.UICulture = $('#selectLocalizationLanguage', page).val(); - apiClient.ajax({ - type: 'POST', - data: config, - url: apiClient.getUrl('Startup/Configuration') - }).then(function () { - Dashboard.navigate('wizarduser.html'); - }); + const page = this; + const apiClient = ApiClient; + const promise1 = apiClient.getJSON(apiClient.getUrl('Startup/Configuration')); + const promise2 = apiClient.getJSON(apiClient.getUrl('Localization/Options')); + Promise.all([promise1, promise2]).then(function (responses) { + loadPage(page, responses[0], responses[1]); }); - } - - function onSubmit() { - save($(this).parents('.page')); - return false; - } - - return function (view, params) { - $('.wizardStartForm', view).on('submit', onSubmit); - view.addEventListener('viewshow', function () { - document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); - loading.show(); - var page = this; - var apiClient = ApiClient; - var promise1 = apiClient.getJSON(apiClient.getUrl('Startup/Configuration')); - var promise2 = apiClient.getJSON(apiClient.getUrl('Localization/Options')); - Promise.all([promise1, promise2]).then(function (responses) { - loadPage(page, responses[0], responses[1]); - }); - }); - view.addEventListener('viewhide', function () { - document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); - }); - }; -}); + }); + view.addEventListener('viewhide', function () { + document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); + }); +} diff --git a/src/controllers/wizard/user.js b/src/controllers/wizard/user.js index e62edef9fe..855086a3a4 100644 --- a/src/controllers/wizard/user.js +++ b/src/controllers/wizard/user.js @@ -1,67 +1,69 @@ -define(['loading', 'globalize', 'dashboardcss', 'emby-input', 'emby-button', 'emby-button'], function (loading, globalize) { - 'use strict'; +import loading from 'loading'; +import globalize from 'globalize'; +import 'dashboardcss'; +import 'emby-input'; +import 'emby-button'; - function getApiClient() { - return ApiClient; +function getApiClient() { + return ApiClient; +} + +function nextWizardPage() { + Dashboard.navigate('wizardlibrary.html'); +} + +function onUpdateUserComplete(result) { + console.debug('user update complete: ' + result); + loading.hide(); + nextWizardPage(); +} + +function submit(form) { + loading.show(); + const apiClient = getApiClient(); + apiClient.ajax({ + type: 'POST', + data: { + Name: form.querySelector('#txtUsername').value, + Password: form.querySelector('#txtManualPassword').value + }, + url: apiClient.getUrl('Startup/User') + }).then(onUpdateUserComplete); +} + +function onSubmit(e) { + const form = this; + + if (form.querySelector('#txtManualPassword').value != form.querySelector('#txtPasswordConfirm').value) { + import('toast').then(({default: toast}) => { + toast(globalize.translate('PasswordMatchError')); + }); + } else { + submit(form); } - function nextWizardPage() { - Dashboard.navigate('wizardlibrary.html'); - } + e.preventDefault(); + return false; +} - function onUpdateUserComplete(result) { - console.debug('user update complete: ' + result); +function onViewShow() { + loading.show(); + const page = this; + const apiClient = getApiClient(); + apiClient.getJSON(apiClient.getUrl('Startup/User')).then(function (user) { + page.querySelector('#txtUsername').value = user.Name || ''; + page.querySelector('#txtManualPassword').value = user.Password || ''; loading.hide(); - nextWizardPage(); - } + }); +} - function submit(form) { - loading.show(); - var apiClient = getApiClient(); - apiClient.ajax({ - type: 'POST', - data: { - Name: form.querySelector('#txtUsername').value, - Password: form.querySelector('#txtManualPassword').value - }, - url: apiClient.getUrl('Startup/User') - }).then(onUpdateUserComplete); - } - - function onSubmit(e) { - var form = this; - - if (form.querySelector('#txtManualPassword').value != form.querySelector('#txtPasswordConfirm').value) { - require(['toast'], function (toast) { - toast(globalize.translate('PasswordMatchError')); - }); - } else { - submit(form); - } - - e.preventDefault(); - return false; - } - - function onViewShow() { - loading.show(); - var page = this; - var apiClient = getApiClient(); - apiClient.getJSON(apiClient.getUrl('Startup/User')).then(function (user) { - page.querySelector('#txtUsername').value = user.Name || ''; - page.querySelector('#txtManualPassword').value = user.Password || ''; - loading.hide(); - }); - } - - return function (view, params) { - view.querySelector('.wizardUserForm').addEventListener('submit', onSubmit); - view.addEventListener('viewshow', function () { - document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); - }); - view.addEventListener('viewhide', function () { - document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); - }); - view.addEventListener('viewshow', onViewShow); - }; -}); +export default function (view, params) { + view.querySelector('.wizardUserForm').addEventListener('submit', onSubmit); + view.addEventListener('viewshow', function () { + document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); + }); + view.addEventListener('viewhide', function () { + document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); + }); + view.addEventListener('viewshow', onViewShow); +} diff --git a/src/elements/emby-button/emby-button.js b/src/elements/emby-button/emby-button.js index be52b1d512..683c59cca0 100644 --- a/src/elements/emby-button/emby-button.js +++ b/src/elements/emby-button/emby-button.js @@ -1,70 +1,75 @@ -define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css!./emby-button', 'registerElement'], function (browser, dom, layoutManager, shell, appRouter, appHost) { - 'use strict'; +import browser from 'browser'; +import dom from 'dom'; +import layoutManager from 'layoutManager'; +import shell from 'shell'; +import appRouter from 'appRouter'; +import appHost from 'apphost'; +import 'css!./emby-button'; +import 'registerElement'; - var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); - var EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype); +const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); +const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype); - function onAnchorClick(e) { - var href = this.getAttribute('href') || ''; - if (href !== '#') { - if (this.getAttribute('target')) { - if (!appHost.supports('targetblank')) { - e.preventDefault(); - shell.openUrl(href); - } - } else { - appRouter.handleAnchorClick(e); +function onAnchorClick(e) { + const href = this.getAttribute('href') || ''; + if (href !== '#') { + if (this.getAttribute('target')) { + if (!appHost.supports('targetblank')) { + e.preventDefault(); + shell.openUrl(href); } } else { - e.preventDefault(); + appRouter.handleAnchorClick(e); } + } else { + e.preventDefault(); + } +} + +EmbyButtonPrototype.createdCallback = function () { + if (this.classList.contains('emby-button')) { + return; } - EmbyButtonPrototype.createdCallback = function () { - if (this.classList.contains('emby-button')) { - return; - } + this.classList.add('emby-button'); + // TODO replace all instances of element-showfocus with this method + if (layoutManager.tv) { + // handles all special css for tv layout + // this method utilizes class chaining + this.classList.add('show-focus'); + } +}; - this.classList.add('emby-button'); - // TODO replace all instances of element-showfocus with this method - if (layoutManager.tv) { - // handles all special css for tv layout - // this method utilizes class chaining - this.classList.add('show-focus'); - } - }; +EmbyButtonPrototype.attachedCallback = function () { + if (this.tagName === 'A') { + dom.removeEventListener(this, 'click', onAnchorClick, {}); + dom.addEventListener(this, 'click', onAnchorClick, {}); - EmbyButtonPrototype.attachedCallback = function () { - if (this.tagName === 'A') { - dom.removeEventListener(this, 'click', onAnchorClick, {}); - dom.addEventListener(this, 'click', onAnchorClick, {}); - - if (this.getAttribute('data-autohide') === 'true') { - if (appHost.supports('externallinks')) { - this.classList.remove('hide'); - } else { - this.classList.add('hide'); - } + if (this.getAttribute('data-autohide') === 'true') { + if (appHost.supports('externallinks')) { + this.classList.remove('hide'); + } else { + this.classList.add('hide'); } } - }; + } +}; - EmbyButtonPrototype.detachedCallback = function () { - dom.removeEventListener(this, 'click', onAnchorClick, {}); - }; +EmbyButtonPrototype.detachedCallback = function () { + dom.removeEventListener(this, 'click', onAnchorClick, {}); +}; - EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback; - EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback; +EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback; +EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback; - document.registerElement('emby-button', { - prototype: EmbyButtonPrototype, - extends: 'button' - }); - - document.registerElement('emby-linkbutton', { - prototype: EmbyLinkButtonPrototype, - extends: 'a' - }); - - return EmbyButtonPrototype; +document.registerElement('emby-button', { + prototype: EmbyButtonPrototype, + extends: 'button' }); + +document.registerElement('emby-linkbutton', { + prototype: EmbyLinkButtonPrototype, + extends: 'a' +}); + +export default EmbyButtonPrototype; diff --git a/src/elements/emby-button/paper-icon-button-light.js b/src/elements/emby-button/paper-icon-button-light.js index 7eda76baec..609dec2967 100644 --- a/src/elements/emby-button/paper-icon-button-light.js +++ b/src/elements/emby-button/paper-icon-button-light.js @@ -1,18 +1,18 @@ -define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layoutManager) { - 'use strict'; +import layoutManager from 'layoutManager'; +import 'css!./emby-button'; +import 'registerElement'; - var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); +const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); - EmbyButtonPrototype.createdCallback = function () { - this.classList.add('paper-icon-button-light'); +EmbyButtonPrototype.createdCallback = function () { + this.classList.add('paper-icon-button-light'); - if (layoutManager.tv) { - this.classList.add('show-focus'); - } - }; + if (layoutManager.tv) { + this.classList.add('show-focus'); + } +}; - document.registerElement('paper-icon-button-light', { - prototype: EmbyButtonPrototype, - extends: 'button' - }); +document.registerElement('paper-icon-button-light', { + prototype: EmbyButtonPrototype, + extends: 'button' }); diff --git a/src/elements/emby-checkbox/emby-checkbox.js b/src/elements/emby-checkbox/emby-checkbox.js index 4d02d56163..b22ff151af 100644 --- a/src/elements/emby-checkbox/emby-checkbox.js +++ b/src/elements/emby-checkbox/emby-checkbox.js @@ -1,7 +1,11 @@ -define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (browser, dom) { - 'use strict'; +import browser from 'browser'; +import dom from 'dom'; +import 'css!./emby-checkbox'; +import 'registerElement'; - var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype); +/* eslint-disable indent */ + + let EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype); function onKeyDown(e) { // Don't submit form on enter @@ -19,10 +23,10 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b } } - var enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false; + const enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false; function forceRefresh(loading) { - var elem = this.parentNode; + let elem = this.parentNode; elem.style.webkitAnimationName = 'repaintChrome'; elem.style.webkitAnimationDelay = (loading === true ? '500ms' : ''); @@ -43,22 +47,22 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b this.classList.add('emby-checkbox'); - var labelElement = this.parentNode; + const labelElement = this.parentNode; labelElement.classList.add('emby-checkbox-label'); - var labelTextElement = labelElement.querySelector('span'); + const labelTextElement = labelElement.querySelector('span'); - var outlineClass = 'checkboxOutline'; + let outlineClass = 'checkboxOutline'; - var customClass = this.getAttribute('data-outlineclass'); + const customClass = this.getAttribute('data-outlineclass'); if (customClass) { outlineClass += ' ' + customClass; } - var checkedIcon = this.getAttribute('data-checkedicon') || 'check'; - var uncheckedIcon = this.getAttribute('data-uncheckedicon') || ''; - var checkHtml = ''; - var uncheckedHtml = ''; + const checkedIcon = this.getAttribute('data-checkedicon') || 'check'; + const uncheckedIcon = this.getAttribute('data-uncheckedicon') || ''; + const checkHtml = ''; + const uncheckedHtml = ''; labelElement.insertAdjacentHTML('beforeend', '' + checkHtml + uncheckedHtml + ''); labelTextElement.classList.add('checkboxLabel'); @@ -103,4 +107,5 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b prototype: EmbyCheckboxPrototype, extends: 'input' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-collapse/emby-collapse.js b/src/elements/emby-collapse/emby-collapse.js index 707e81a786..805e40afd9 100644 --- a/src/elements/emby-collapse/emby-collapse.js +++ b/src/elements/emby-collapse/emby-collapse.js @@ -1,18 +1,22 @@ -define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], function (browser) { - 'use strict'; +import browser from 'browser'; +import 'css!./emby-collapse'; +import 'registerElement'; +import 'emby-button'; - var EmbyButtonPrototype = Object.create(HTMLDivElement.prototype); +/* eslint-disable indent */ + + const EmbyButtonPrototype = Object.create(HTMLDivElement.prototype); function slideDownToShow(button, elem) { elem.classList.remove('hide'); elem.classList.add('expanded'); elem.style.height = 'auto'; - var height = elem.offsetHeight + 'px'; + const height = elem.offsetHeight + 'px'; elem.style.height = '0'; // trigger reflow - var newHeight = elem.offsetHeight; + const newHeight = elem.offsetHeight; elem.style.height = height; setTimeout(function () { @@ -24,7 +28,7 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun elem.style.height = 'auto'; }, 300); - var icon = button.querySelector('.material-icons'); + const icon = button.querySelector('.material-icons'); //icon.innerHTML = 'expand_less'; icon.classList.add('emby-collapse-expandIconExpanded'); } @@ -33,7 +37,7 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun elem.style.height = elem.offsetHeight + 'px'; // trigger reflow - var newHeight = elem.offsetHeight; + const newHeight = elem.offsetHeight; elem.classList.remove('expanded'); elem.style.height = '0'; @@ -46,15 +50,15 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun } }, 300); - var icon = button.querySelector('.material-icons'); + const icon = button.querySelector('.material-icons'); //icon.innerHTML = 'expand_more'; icon.classList.remove('emby-collapse-expandIconExpanded'); } function onButtonClick(e) { - var button = this; - var collapseContent = button.parentNode.querySelector('.collapseContent'); + const button = this; + const collapseContent = button.parentNode.querySelector('.collapseContent'); if (collapseContent.expanded) { collapseContent.expanded = false; @@ -73,18 +77,18 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun this.classList.add('emby-collapse'); - var collapseContent = this.querySelector('.collapseContent'); + const collapseContent = this.querySelector('.collapseContent'); if (collapseContent) { collapseContent.classList.add('hide'); } - var title = this.getAttribute('title'); + const title = this.getAttribute('title'); - var html = ''; + const html = ''; this.insertAdjacentHTML('afterbegin', html); - var button = this.querySelector('.emby-collapsible-button'); + const button = this.querySelector('.emby-collapsible-button'); button.addEventListener('click', onButtonClick); @@ -97,4 +101,5 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun prototype: EmbyButtonPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-input/emby-input.js b/src/elements/emby-input/emby-input.js index 03ba2b93aa..f5c60ca92f 100644 --- a/src/elements/emby-input/emby-input.js +++ b/src/elements/emby-input/emby-input.js @@ -1,18 +1,23 @@ -define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'], function (layoutManager, browser, dom) { - 'use strict'; +import layoutManager from 'layoutManager'; +import browser from 'browser'; +import dom from 'dom'; +import 'css!./emby-input'; +import 'registerElement'; - var EmbyInputPrototype = Object.create(HTMLInputElement.prototype); +/* eslint-disable indent */ - var inputId = 0; - var supportsFloatingLabel = false; + const EmbyInputPrototype = Object.create(HTMLInputElement.prototype); + + let inputId = 0; + let supportsFloatingLabel = false; if (Object.getOwnPropertyDescriptor && Object.defineProperty) { - var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value'); + const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value'); // descriptor returning null in webos if (descriptor && descriptor.configurable) { - var baseSetMethod = descriptor.set; + const baseSetMethod = descriptor.set; descriptor.set = function (value) { baseSetMethod.call(this, value); @@ -39,9 +44,9 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement' this.classList.add('emby-input'); - var parentNode = this.parentNode; - var document = this.ownerDocument; - var label = document.createElement('label'); + const parentNode = this.parentNode; + const document = this.ownerDocument; + const label = document.createElement('label'); label.innerHTML = this.getAttribute('label') || ''; label.classList.add('inputLabel'); label.classList.add('inputLabelUnfocused'); @@ -95,12 +100,12 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement' function onChange() { - var label = this.labelElement; + const label = this.labelElement; if (this.value) { label.classList.remove('inputLabel-float'); } else { - var instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time'; + const instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time'; if (instanceSupportsFloat) { label.classList.add('inputLabel-float'); @@ -109,9 +114,7 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement' } EmbyInputPrototype.attachedCallback = function () { - this.labelElement.htmlFor = this.id; - onChange.call(this); }; @@ -123,4 +126,5 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement' prototype: EmbyInputPrototype, extends: 'input' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js index 9864dbbb67..493d291ce0 100644 --- a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js +++ b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js @@ -1,16 +1,21 @@ -define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerElement'], function (EmbyProgressRing, dom, serverNotifications, events) { - 'use strict'; +import EmbyProgressRing from 'emby-progressring'; +import dom from 'dom'; +import serverNotifications from 'serverNotifications'; +import events from 'events'; +import 'registerElement'; + +/* eslint-disable indent */ function addNotificationEvent(instance, name, handler) { - var localHandler = handler.bind(instance); + const localHandler = handler.bind(instance); events.on(serverNotifications, name, localHandler); instance[name] = localHandler; } function removeNotificationEvent(instance, name) { - var handler = instance[name]; + const handler = instance[name]; if (handler) { events.off(serverNotifications, name, handler); instance[name] = null; @@ -19,7 +24,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl function onRefreshProgress(e, apiClient, info) { - var indicator = this; + const indicator = this; if (!indicator.itemId) { indicator.itemId = dom.parentWithAttribute(indicator, 'data-id').getAttribute('data-id'); @@ -27,7 +32,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl if (info.ItemId === indicator.itemId) { - var progress = parseFloat(info.Progress); + const progress = parseFloat(info.Progress); if (progress && progress < 100) { this.classList.remove('hide'); @@ -39,7 +44,7 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl } } - var EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing); + let EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing); EmbyItemRefreshIndicatorPrototype.createdCallback = function () { @@ -74,4 +79,5 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl prototype: EmbyItemRefreshIndicatorPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-itemscontainer/emby-itemscontainer.js b/src/elements/emby-itemscontainer/emby-itemscontainer.js index 5d3772ca93..58e8565289 100644 --- a/src/elements/emby-itemscontainer/emby-itemscontainer.js +++ b/src/elements/emby-itemscontainer/emby-itemscontainer.js @@ -1,12 +1,25 @@ -define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', 'imageLoader', 'layoutManager', 'browser', 'dom', 'loading', 'focusManager', 'serverNotifications', 'events', 'registerElement'], function (itemShortcuts, inputManager, connectionManager, playbackManager, imageLoader, layoutManager, browser, dom, loading, focusManager, serverNotifications, events) { - 'use strict'; +import itemShortcuts from 'itemShortcuts'; +import inputManager from 'inputManager'; +import connectionManager from 'connectionManager'; +import playbackManager from 'playbackManager'; +import imageLoader from 'imageLoader'; +import layoutManager from 'layoutManager'; +import browser from 'browser'; +import dom from 'dom'; +import loading from 'loading'; +import focusManager from 'focusManager'; +import serverNotifications from 'serverNotifications'; +import events from 'events'; +import 'registerElement'; - var ItemsContainerPrototype = Object.create(HTMLDivElement.prototype); +/* eslint-disable indent */ + + const ItemsContainerPrototype = Object.create(HTMLDivElement.prototype); function onClick(e) { - var itemsContainer = this; - var target = e.target; - var multiSelect = itemsContainer.multiSelect; + const itemsContainer = this; + const target = e.target; + let multiSelect = itemsContainer.multiSelect; if (multiSelect) { if (multiSelect.onContainerClick.call(itemsContainer, e) === false) { @@ -24,9 +37,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function onContextMenu(e) { - var itemsContainer = this; - var target = e.target; - var card = dom.parentWithAttribute(target, 'data-id'); + const target = e.target; + const card = dom.parentWithAttribute(target, 'data-id'); // check for serverId, it won't be present on selectserver if (card && card.getAttribute('data-serverid')) { @@ -47,7 +59,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } ItemsContainerPrototype.enableMultiSelect = function (enabled) { - var current = this.multiSelect; + const current = this.multiSelect; if (!enabled) { if (current) { @@ -61,8 +73,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return; } - var self = this; - require(['multiSelect'], function (MultiSelect) { + const self = this; + import('multiSelect').then(({default: MultiSelect}) => { self.multiSelect = new MultiSelect({ container: self, bindOnClick: false @@ -71,14 +83,14 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', }; function onDrop(evt, itemsContainer) { - var el = evt.item; + const el = evt.item; - var newIndex = evt.newIndex; - var itemId = el.getAttribute('data-playlistitemid'); - var playlistId = el.getAttribute('data-playlistid'); + const newIndex = evt.newIndex; + const itemId = el.getAttribute('data-playlistitemid'); + const playlistId = el.getAttribute('data-playlistid'); if (!playlistId) { - var oldIndex = evt.oldIndex; + const oldIndex = evt.oldIndex; el.dispatchEvent(new CustomEvent('itemdrop', { detail: { oldIndex: oldIndex, @@ -91,8 +103,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return; } - var serverId = el.getAttribute('data-serverid'); - var apiClient = connectionManager.getApiClient(serverId); + const serverId = el.getAttribute('data-serverid'); + const apiClient = connectionManager.getApiClient(serverId); loading.show(); @@ -108,7 +120,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } ItemsContainerPrototype.enableDragReordering = function (enabled) { - var current = this.sortable; + const current = this.sortable; if (!enabled) { if (current) { current.destroy(); @@ -121,8 +133,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return; } - var self = this; - require(['sortable'], function (Sortable) { + const self = this; + import('sortable').then(({default: Sortable}) => { self.sortable = new Sortable(self, { draggable: '.listItem', handle: '.listViewDragHandle', @@ -137,13 +149,13 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', function onUserDataChanged(e, apiClient, userData) { - var itemsContainer = this; + const itemsContainer = this; - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onUserDataChanged(userData, itemsContainer); }); - var eventsToMonitor = getEventsToMonitor(itemsContainer); + const eventsToMonitor = getEventsToMonitor(itemsContainer); // TODO: Check user data change reason? if (eventsToMonitor.indexOf('markfavorite') !== -1) { @@ -154,7 +166,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function getEventsToMonitor(itemsContainer) { - var monitor = itemsContainer.getAttribute('data-monitor'); + let monitor = itemsContainer.getAttribute('data-monitor'); if (monitor) { return monitor.split(','); } @@ -164,24 +176,24 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', function onTimerCreated(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; } - var programId = data.ProgramId; + const programId = data.ProgramId; // This could be null, not supported by all tv providers - var newTimerId = data.Id; + const newTimerId = data.Id; - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onTimerCreated(programId, newTimerId, itemsContainer); }); } function onSeriesTimerCreated(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; @@ -189,49 +201,49 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function onTimerCancelled(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; } - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onTimerCancelled(data.Id, itemsContainer); }); } function onSeriesTimerCancelled(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; } - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onSeriesTimerCancelled(data.Id, itemsContainer); }); } function onLibraryChanged(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; - var eventsToMonitor = getEventsToMonitor(itemsContainer); + const eventsToMonitor = getEventsToMonitor(itemsContainer); if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) { // yes this is an assumption return; } - var itemsAdded = data.ItemsAdded || []; - var itemsRemoved = data.ItemsRemoved || []; + const itemsAdded = data.ItemsAdded || []; + const itemsRemoved = data.ItemsRemoved || []; if (!itemsAdded.length && !itemsRemoved.length) { return; } - var parentId = itemsContainer.getAttribute('data-parentid'); + const parentId = itemsContainer.getAttribute('data-parentid'); if (parentId) { - var foldersAddedTo = data.FoldersAddedTo || []; - var foldersRemovedFrom = data.FoldersRemovedFrom || []; - var collectionFolders = data.CollectionFolders || []; + const foldersAddedTo = data.FoldersAddedTo || []; + const foldersRemovedFrom = data.FoldersRemovedFrom || []; + const collectionFolders = data.CollectionFolders || []; if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) { return; @@ -242,10 +254,10 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function onPlaybackStopped(e, stopInfo) { - var itemsContainer = this; - var state = stopInfo.state; + const itemsContainer = this; + const state = stopInfo.state; - var eventsToMonitor = getEventsToMonitor(itemsContainer); + const eventsToMonitor = getEventsToMonitor(itemsContainer); if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') { if (eventsToMonitor.indexOf('videoplayback') !== -1) { itemsContainer.notifyRefreshNeeded(true); @@ -260,14 +272,14 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function addNotificationEvent(instance, name, handler, owner) { - var localHandler = handler.bind(instance); + const localHandler = handler.bind(instance); owner = owner || serverNotifications; events.on(owner, name, localHandler); instance['event_' + name] = localHandler; } function removeNotificationEvent(instance, name, owner) { - var handler = instance['event_' + name]; + const handler = instance['event_' + name]; if (handler) { owner = owner || serverNotifications; events.off(owner, name, handler); @@ -347,10 +359,10 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', ItemsContainerPrototype.resume = function (options) { this.paused = false; - var refreshIntervalEndTime = this.refreshIntervalEndTime; + let refreshIntervalEndTime = this.refreshIntervalEndTime; if (refreshIntervalEndTime) { - var remainingMs = refreshIntervalEndTime - new Date().getTime(); + const remainingMs = refreshIntervalEndTime - new Date().getTime(); if (remainingMs > 0 && !this.needsRefresh) { resetRefreshInterval(this, remainingMs); } else { @@ -387,7 +399,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return; } - var timeout = this.refreshTimeout; + let timeout = this.refreshTimeout; if (timeout) { clearTimeout(timeout); } @@ -424,9 +436,9 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function onDataFetched(result) { - var items = result.Items || result; + const items = result.Items || result; - var parentContainer = this.parentContainer; + let parentContainer = this.parentContainer; if (parentContainer) { if (items.length) { parentContainer.classList.remove('hide'); @@ -435,9 +447,9 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } } - var activeElement = document.activeElement; - var focusId; - var hasActiveElement; + const activeElement = document.activeElement; + let focusId; + let hasActiveElement; if (this.contains(activeElement)) { hasActiveElement = true; @@ -461,7 +473,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', function setFocus(itemsContainer, focusId) { if (focusId) { - var newElement = itemsContainer.querySelector('[data-id="' + focusId + '"]'); + const newElement = itemsContainer.querySelector('[data-id="' + focusId + '"]'); if (newElement) { try { focusManager.focus(newElement); @@ -479,4 +491,5 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', prototype: ItemsContainerPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-playstatebutton/emby-playstatebutton.js b/src/elements/emby-playstatebutton/emby-playstatebutton.js index 57f7eb76eb..e1b34318b8 100644 --- a/src/elements/emby-playstatebutton/emby-playstatebutton.js +++ b/src/elements/emby-playstatebutton/emby-playstatebutton.js @@ -1,14 +1,19 @@ -define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby-button'], function (connectionManager, serverNotifications, events, globalize, EmbyButtonPrototype) { - 'use strict'; +import connectionManager from 'connectionManager'; +import serverNotifications from 'serverNotifications'; +import events from 'events'; +import globalize from 'globalize'; +import EmbyButtonPrototype from 'emby-button'; + +/* eslint-disable indent */ function addNotificationEvent(instance, name, handler) { - var localHandler = handler.bind(instance); + const localHandler = handler.bind(instance); events.on(serverNotifications, name, localHandler); instance[name] = localHandler; } function removeNotificationEvent(instance, name) { - var handler = instance[name]; + const handler = instance[name]; if (handler) { events.off(serverNotifications, name, handler); instance[name] = null; @@ -17,10 +22,10 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby function onClick(e) { - var button = this; - var id = button.getAttribute('data-id'); - var serverId = button.getAttribute('data-serverid'); - var apiClient = connectionManager.getApiClient(serverId); + const button = this; + const id = button.getAttribute('data-id'); + const serverId = button.getAttribute('data-serverid'); + const apiClient = connectionManager.getApiClient(serverId); if (!button.classList.contains('playstatebutton-played')) { apiClient.markPlayed(apiClient.getCurrentUserId(), id, new Date()); @@ -32,14 +37,14 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby } function onUserDataChanged(e, apiClient, userData) { - var button = this; + const button = this; if (userData.ItemId === button.getAttribute('data-id')) { setState(button, userData.Played); } } function setState(button, played, updateAttribute) { - var icon = button.iconElement; + let icon = button.iconElement; if (!icon) { button.iconElement = button.querySelector('.material-icons'); icon = button.iconElement; @@ -72,7 +77,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby button.title = globalize.translate('Played'); } - var text = button.querySelector('.button-text'); + let text = button.querySelector('.button-text'); if (text) { text.innerHTML = button.title; } @@ -92,7 +97,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby addNotificationEvent(button, 'UserDataChanged', onUserDataChanged); } - var EmbyPlaystateButtonPrototype = Object.create(EmbyButtonPrototype); + const EmbyPlaystateButtonPrototype = Object.create(EmbyButtonPrototype); EmbyPlaystateButtonPrototype.createdCallback = function () { @@ -109,8 +114,8 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby EmbyButtonPrototype.attachedCallback.call(this); } - var itemId = this.getAttribute('data-id'); - var serverId = this.getAttribute('data-serverid'); + const itemId = this.getAttribute('data-id'); + const serverId = this.getAttribute('data-serverid'); if (itemId && serverId) { setState(this, this.getAttribute('data-played') === 'true', false); @@ -137,7 +142,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby this.setAttribute('data-id', item.Id); this.setAttribute('data-serverid', item.ServerId); - var played = item.UserData && item.UserData.Played; + const played = item.UserData && item.UserData.Played; setState(this, played); bindEvents(this); @@ -156,4 +161,5 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby prototype: EmbyPlaystateButtonPrototype, extends: 'button' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-programcell/emby-programcell.js b/src/elements/emby-programcell/emby-programcell.js index a959033186..d1f1820e5e 100644 --- a/src/elements/emby-programcell/emby-programcell.js +++ b/src/elements/emby-programcell/emby-programcell.js @@ -1,16 +1,12 @@ -define([], function() { - 'use strict'; +const ProgramCellPrototype = Object.create(HTMLButtonElement.prototype); - var ProgramCellPrototype = Object.create(HTMLButtonElement.prototype); +ProgramCellPrototype.detachedCallback = function () { + this.posLeft = null; + this.posWidth = null; + this.guideProgramName = null; +}; - ProgramCellPrototype.detachedCallback = function () { - this.posLeft = null; - this.posWidth = null; - this.guideProgramName = null; - }; - - document.registerElement('emby-programcell', { - prototype: ProgramCellPrototype, - extends: 'button' - }); +document.registerElement('emby-programcell', { + prototype: ProgramCellPrototype, + extends: 'button' }); diff --git a/src/elements/emby-progressbar/emby-progressbar.js b/src/elements/emby-progressbar/emby-progressbar.js index a799f82bdd..54fcb1999e 100644 --- a/src/elements/emby-progressbar/emby-progressbar.js +++ b/src/elements/emby-progressbar/emby-progressbar.js @@ -1,20 +1,19 @@ -define([], function() { - 'use strict'; +/* eslint-disable indent */ - var ProgressBarPrototype = Object.create(HTMLDivElement.prototype); + let ProgressBarPrototype = Object.create(HTMLDivElement.prototype); function onAutoTimeProgress() { - var start = parseInt(this.getAttribute('data-starttime')); - var end = parseInt(this.getAttribute('data-endtime')); + const start = parseInt(this.getAttribute('data-starttime')); + const end = parseInt(this.getAttribute('data-endtime')); - var now = new Date().getTime(); - var total = end - start; - var pct = 100 * ((now - start) / total); + const now = new Date().getTime(); + const total = end - start; + let pct = 100 * ((now - start) / total); pct = Math.min(100, pct); pct = Math.max(0, pct); - var itemProgressBarForeground = this.querySelector('.itemProgressBarForeground'); + const itemProgressBarForeground = this.querySelector('.itemProgressBarForeground'); itemProgressBarForeground.style.width = pct + '%'; } @@ -39,4 +38,5 @@ define([], function() { prototype: ProgressBarPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-progressring/emby-progressring.js b/src/elements/emby-progressring/emby-progressring.js index edc635947c..d266d884a0 100644 --- a/src/elements/emby-progressring/emby-progressring.js +++ b/src/elements/emby-progressring/emby-progressring.js @@ -1,14 +1,17 @@ -define(['require', 'css!./emby-progressring', 'registerElement'], function (require) { - 'use strict'; +import require from 'require'; +import 'css!./emby-progressring'; +import 'webcomponents'; - var EmbyProgressRing = Object.create(HTMLDivElement.prototype); +/* eslint-disable indent */ + + let EmbyProgressRing = Object.create(HTMLDivElement.prototype); EmbyProgressRing.createdCallback = function () { this.classList.add('progressring'); - var instance = this; + const instance = this; - require(['text!./emby-progressring.template.html'], function (template) { + import('text!./emby-progressring.template.html').then(({default: template}) => { instance.innerHTML = template; //if (window.MutationObserver) { @@ -37,7 +40,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ progress = Math.floor(progress); - var angle; + let angle; if (progress < 25) { angle = -90 + (progress / 100) * 360; @@ -82,7 +85,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ EmbyProgressRing.detachedCallback = function () { - var observer = this.observer; + let observer = this.observer; if (observer) { // later, you can stop observing @@ -97,5 +100,6 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ extends: 'div' }); - return EmbyProgressRing; -}); + export default EmbyProgressRing; + +/* eslint-enable indent */ diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js index 46a3e3826c..d989326d25 100644 --- a/src/elements/emby-radio/emby-radio.js +++ b/src/elements/emby-radio/emby-radio.js @@ -1,7 +1,10 @@ -define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) { - 'use strict'; +import layoutManager from 'layoutManager'; +import 'css!./emby-radio'; +import 'registerElement'; - var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype); +/* eslint-disable indent */ + + let EmbyRadioPrototype = Object.create(HTMLInputElement.prototype); function onKeyDown(e) { @@ -23,7 +26,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou } EmbyRadioPrototype.attachedCallback = function () { - var showFocus = !layoutManager.mobile; + const showFocus = !layoutManager.mobile; if (this.getAttribute('data-radio') === 'true') { return; @@ -33,7 +36,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou this.classList.add('mdl-radio__button'); - var labelElement = this.parentNode; + let labelElement = this.parentNode; //labelElement.classList.add('"mdl-radio mdl-js-radio mdl-js-ripple-effect'); labelElement.classList.add('mdl-radio'); labelElement.classList.add('mdl-js-radio'); @@ -42,12 +45,12 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou labelElement.classList.add('show-focus'); } - var labelTextElement = labelElement.querySelector('span'); + let labelTextElement = labelElement.querySelector('span'); labelTextElement.classList.add('radioButtonLabel'); labelTextElement.classList.add('mdl-radio__label'); - var html = ''; + let html = ''; html += '
'; @@ -76,4 +79,5 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou prototype: EmbyRadioPrototype, extends: 'input' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-ratingbutton/emby-ratingbutton.js b/src/elements/emby-ratingbutton/emby-ratingbutton.js index 142920ca15..b455495a2e 100644 --- a/src/elements/emby-ratingbutton/emby-ratingbutton.js +++ b/src/elements/emby-ratingbutton/emby-ratingbutton.js @@ -1,16 +1,21 @@ -define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby-button'], function (connectionManager, serverNotifications, events, globalize, EmbyButtonPrototype) { - 'use strict'; +import connectionManager from 'connectionManager'; +import serverNotifications from 'serverNotifications'; +import events from 'events'; +import globalize from 'globalize'; +import EmbyButtonPrototype from 'emby-button'; + +/* eslint-disable indent */ function addNotificationEvent(instance, name, handler) { - var localHandler = handler.bind(instance); + const localHandler = handler.bind(instance); events.on(serverNotifications, name, localHandler); instance[name] = localHandler; } function removeNotificationEvent(instance, name) { - var handler = instance[name]; + const handler = instance[name]; if (handler) { events.off(serverNotifications, name, handler); instance[name] = null; @@ -24,13 +29,13 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby function onClick(e) { - var button = this; - var id = button.getAttribute('data-id'); - var serverId = button.getAttribute('data-serverid'); - var apiClient = connectionManager.getApiClient(serverId); + const button = this; + const id = button.getAttribute('data-id'); + const serverId = button.getAttribute('data-serverid'); + const apiClient = connectionManager.getApiClient(serverId); - var likes = this.getAttribute('data-likes'); - var isFavorite = this.getAttribute('data-isfavorite') === 'true'; + let likes = this.getAttribute('data-likes'); + const isFavorite = this.getAttribute('data-isfavorite') === 'true'; if (likes === 'true') { likes = true; } else if (likes === 'false') { @@ -47,7 +52,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby function onUserDataChanged(e, apiClient, userData) { - var button = this; + const button = this; if (userData.ItemId === button.getAttribute('data-id')) { @@ -57,7 +62,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby function setState(button, likes, isFavorite, updateAttribute) { - var icon = button.querySelector('.material-icons'); + const icon = button.querySelector('.material-icons'); if (isFavorite) { @@ -106,7 +111,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby function setTitle(button) { button.title = globalize.translate('Favorite'); - var text = button.querySelector('.button-text'); + const text = button.querySelector('.button-text'); if (text) { text.innerHTML = button.title; } @@ -126,7 +131,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby addNotificationEvent(button, 'UserDataChanged', onUserDataChanged); } - var EmbyRatingButtonPrototype = Object.create(EmbyButtonPrototype); + const EmbyRatingButtonPrototype = Object.create(EmbyButtonPrototype); EmbyRatingButtonPrototype.createdCallback = function () { @@ -143,12 +148,12 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby EmbyButtonPrototype.attachedCallback.call(this); } - var itemId = this.getAttribute('data-id'); - var serverId = this.getAttribute('data-serverid'); + const itemId = this.getAttribute('data-id'); + const serverId = this.getAttribute('data-serverid'); if (itemId && serverId) { - var likes = this.getAttribute('data-likes'); - var isFavorite = this.getAttribute('data-isfavorite') === 'true'; + let likes = this.getAttribute('data-likes'); + const isFavorite = this.getAttribute('data-isfavorite') === 'true'; if (likes === 'true') { likes = true; } else if (likes === 'false') { @@ -181,7 +186,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby this.setAttribute('data-id', item.Id); this.setAttribute('data-serverid', item.ServerId); - var userData = item.UserData || {}; + const userData = item.UserData || {}; setState(this, userData.Likes, userData.IsFavorite); bindEvents(this); @@ -199,4 +204,5 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby prototype: EmbyRatingButtonPrototype, extends: 'button' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js index a4c37384c8..b4b0ffb3b9 100644 --- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js +++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js @@ -1,13 +1,18 @@ -define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', 'paper-icon-button-light'], function (layoutManager, dom) { - 'use strict'; +import layoutManager from 'layoutManager'; +import dom from 'dom'; +import 'css!./emby-scrollbuttons'; +import 'registerElement'; +import 'paper-icon-button-light'; - var EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype); +/* eslint-disable indent */ + +const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype); EmbyScrollButtonsPrototype.createdCallback = function () {}; function getScrollButtonHtml(direction) { - var html = ''; - var icon = direction === 'left' ? 'chevron_left' : 'chevron_right'; + let html = ''; + const icon = direction === 'left' ? 'chevron_left' : 'chevron_right'; html += '