mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge branch 'master' into migrate-to-ES6-18

Browse source
This commit is contained in:
Cameron 2020-07-29 12:44:03 +01:00 • committed by GitHub
commit d1ccc6faea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
354 changed files with 8173 additions and 10219 deletions
Download patch file Download diff file Expand all files Collapse all files

10
.ci/azure-pipelines-package.yml
View file

@ -59,7 +59,15 @@ jobs:
pool: pool:
vmImage: 'ubuntu-latest' vmImage: 'ubuntu-latest'
variables:
- name: JellyfinVersion
value: 0.0.0
steps: steps:
- script: echo "##vso[task.setvariable variable=JellyfinVersion]$( awk -F '/' '{ print $NF }' <<<'$(Build.SourceBranch)' | sed 's/^v//' )"
displayName: Set release version (stable)
condition: startsWith(variables['Build.SourceBranch'], 'refs/tags')
- task: Docker@2 - task: Docker@2
displayName: 'Push Unstable Image' displayName: 'Push Unstable Image'
condition: startsWith(variables['Build.SourceBranch'], 'refs/heads/master') condition: startsWith(variables['Build.SourceBranch'], 'refs/heads/master')
@ -84,7 +92,7 @@ jobs:
containerRegistry: Docker Hub containerRegistry: Docker Hub
tags: | tags: |
stable-$(Build.BuildNumber) stable-$(Build.BuildNumber)
stable $(JellyfinVersion)
- job: CollectArtifacts - job: CollectArtifacts
displayName: 'Collect Artifacts' displayName: 'Collect Artifacts'

2
.dependabot/config.yml
View file

@ -2,4 +2,4 @@ version: 1
update_configs: update_configs:
- package_manager: "javascript" - package_manager: "javascript"
directory: "/" directory: "/"
update_schedule: "weekly" update_schedule: "live"

12
.eslintrc.js
View file

@ -28,7 +28,7 @@ module.exports = {
], ],
rules: { rules: {
'block-spacing': ['error'], 'block-spacing': ['error'],
'brace-style': ['error'], 'brace-style': ['error', "1tbs", { "allowSingleLine": true }],
'comma-dangle': ['error', 'never'], 'comma-dangle': ['error', 'never'],
'comma-spacing': ['error'], 'comma-spacing': ['error'],
'eol-last': ['error'], 'eol-last': ['error'],
@ -39,7 +39,10 @@ module.exports = {
'no-multi-spaces': ['error'], 'no-multi-spaces': ['error'],
'no-multiple-empty-lines': ['error', { 'max': 1 }], 'no-multiple-empty-lines': ['error', { 'max': 1 }],
'no-trailing-spaces': ['error'], 'no-trailing-spaces': ['error'],
'no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
"no-unused-vars": ["error", { "vars": "all", "args": "none", "ignoreRestSiblings": true }],
'one-var': ['error', 'never'], 'one-var': ['error', 'never'],
'padded-blocks': ['error', 'never'],
'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }], 'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }],
'semi': ['error'], 'semi': ['error'],
'space-before-blocks': ['error'], 'space-before-blocks': ['error'],
@ -98,9 +101,8 @@ module.exports = {
}, },
rules: { rules: {
// TODO: Fix warnings and remove these rules // TODO: Fix warnings and remove these rules
'no-redeclare': ['warn'], 'no-redeclare': ['off'],
'no-unused-vars': ['warn'], 'no-useless-escape': ['off'],
'no-useless-escape': ['warn'],
// TODO: Remove after ES6 migration is complete // TODO: Remove after ES6 migration is complete
'import/no-unresolved': ['off'] 'import/no-unresolved': ['off']
}, },
@ -193,4 +195,4 @@ module.exports = {
} }
} }
] ]
} };

4
.github/CODEOWNERS vendored
View file

@ -1,4 +1,6 @@
.ci @dkanada @EraYaN .ci @dkanada @EraYaN
.github @jellyfin/core .github @jellyfin/core
build.sh @joshuaboniface fedora @joshuaboniface
debian @joshuaboniface
.copr @joshuaboniface
deployment @joshuaboniface deployment @joshuaboniface

19
.github/ISSUE_TEMPLATE/bug_report.md → .github/ISSUE_TEMPLATE/1-bug-report.md vendored
View file

@ -1,23 +1,20 @@
--- ---
name: Bug report name: Bug Report
about: Create a bug report about: You have noticed a general issue or regression, and would like to report it
title: ''
labels: bug labels: bug
assignees: ''
--- ---
**Describe the bug** **Describe The Bug**
<!-- A clear and concise description of what the bug is. --> <!-- A clear and concise description of what the bug is. -->
**To Reproduce** **Steps To Reproduce**
<!-- Steps to reproduce the behavior: --> <!-- Steps to reproduce the behavior: -->
1. Go to '...' 1. Go to '...'
2. Click on '....' 2. Click on '....'
3. Scroll down to '....' 3. Scroll down to '....'
4. See error 4. See error
**Expected behavior** **Expected Behavior**
<!-- A clear and concise description of what you expected to happen. --> <!-- A clear and concise description of what you expected to happen. -->
**Logs** **Logs**
@ -27,9 +24,9 @@ assignees: ''
<!-- If applicable, add screenshots to help explain your problem. --> <!-- If applicable, add screenshots to help explain your problem. -->
**System (please complete the following information):** **System (please complete the following information):**
- OS: [e.g. Docker, Debian, Windows] - Platform: [e.g. Linux, Windows, iPhone, Tizen]
- Browser: [e.g. Firefox, Chrome, Safari] - Browser: [e.g. Firefox, Chrome, Safari]
- Jellyfin Version: [e.g. 10.0.1] - Jellyfin Version: [e.g. 10.6.0]
**Additional context** **Additional Context**
<!-- Add any other context about the problem here. --> <!-- Add any other context about the problem here. -->

22
.github/ISSUE_TEMPLATE/2-playback-issue.md vendored Normal file
View file

@ -0,0 +1,22 @@
---
name: Playback Issue
about: You have playback issues with some files
labels: playback
---
**Describe The Bug**
<!-- A clear and concise description of what the bug is. -->
**Media Information**
<!-- Please paste any ffprobe or MediaInfo logs. -->
**Screenshots**
<!-- Add screenshots from the Playback Data and Media Info. -->
**System (please complete the following information):**
- Platform: [e.g. Linux, Windows, iPhone, Tizen]
- Browser: [e.g. Firefox, Chrome, Safari]
- Jellyfin Version: [e.g. 10.6.0]
**Additional Context**
<!-- Add any other context about the problem here. -->

13
.github/ISSUE_TEMPLATE/3-technical-discussion.md vendored Normal file
View file

@ -0,0 +1,13 @@
---
name: Technical Discussion
about: You want to discuss technical aspects of changes you intend to make
labels: enhancement
---
<!-- Explain the change and the motivations behind it.
For example, if you plan to rely on a new dependency, explain why and what
it brings to the project.
If you plan to make significant changes, go roughly over the steps you intend
to take and how you would divide the change in PRs of a manageable size. -->

9
.github/ISSUE_TEMPLATE/4-meta-issue.md vendored Normal file
View file

@ -0,0 +1,9 @@
---
name: Meta Issue
about: You want to track a number of other issues as part of a larger project
labels: meta
---
* [ ] Issue 1 [#123]
* [ ] Issue 2 [#456]
* [ ] ...

8
.github/ISSUE_TEMPLATE/config.yml vendored Normal file
View file

@ -0,0 +1,8 @@
blank_issues_enabled: false
contact_links:
- name: Feature Request
url: https://features.jellyfin.org/
about: Please head over to our feature request hub to vote on or submit a feature.
- name: Help Or Question
url: https://matrix.to/#/#jellyfin-troubleshooting:matrix.org
about: Please join the troubleshooting Matrix channel to get some help.

24
.github/SUPPORT.md vendored Normal file
View file

@ -0,0 +1,24 @@
# Support
Jellyfin contributors have limited availability to address general support
questions. Please make sure you are using the latest version of Jellyfin.
When looking for support or information, please first search for your
question in these venues:
* [Jellyfin Forum](https://forum.jellyfin.org)
* [Jellyfin Documentation](https://docs.jellyfin.org)
* [Open or **closed** issues in the organization](https://github.com/issues?q=sort%3Aupdated-desc+org%3Ajellyfin+is%3Aissue+)
If you didn't find an answer in the resources above, contributors and other
users are reachable through the following channels:
* #jellyfin on [Matrix](https://matrix.to/#/#jellyfin:matrix.org%22) or [IRC](https://webchat.freenode.net/#jellyfin)
* #jellyfin-troubleshooting on [Matrix](https://matrix.to/#/#jellyfin-troubleshooting:matrix.org) or [IRC](https://webchat.freenode.net/#jellyfin-troubleshooting)
* [/r/jellyfin on Reddit](https://www.reddit.com/r/jellyfin)
GitHub issues are for tracking enhancements and bugs, not general support.
The open source license grants you the freedom to use Jellyfin.
It does not guarantee commitments of other people's time.
Please be respectful and manage your expectations.

1
README.md
View file

@ -44,6 +44,7 @@ Jellyfin Web is the frontend used for most of the clients available for end user
### Dependencies ### Dependencies
- [Node.js](https://nodejs.org/en/download/)
- [Yarn 1.22.4](https://classic.yarnpkg.com/en/docs/install) - [Yarn 1.22.4](https://classic.yarnpkg.com/en/docs/install)
- Gulp-cli - Gulp-cli

2
build.yaml
View file

@ -1,7 +1,7 @@
--- ---
# We just wrap `build` so this is really it # We just wrap `build` so this is really it
name: "jellyfin-web" name: "jellyfin-web"
version: "10.6.0" version: "10.7.0"
packages: packages:
- debian.all - debian.all
- fedora.all - fedora.all

23
bump_version
View file

@ -4,6 +4,7 @@
set -o errexit set -o errexit
set -o pipefail set -o pipefail
set -o xtrace
usage() { usage() {
echo -e "bump_version - increase the shared version and generate changelogs" echo -e "bump_version - increase the shared version and generate changelogs"
@ -23,10 +24,7 @@ build_file="./build.yaml"
new_version="$1" new_version="$1"
# Parse the version from shared version file # Parse the version from shared version file
old_version="$( old_version="$( grep "appVersion" ${shared_version_file} | head -1 | sed -E "s/var appVersion = '([0-9\.]+)';/\1/" | tr -d '[:space:]' )"
grep "appVersion" ${shared_version_file} | head -1 \
| sed -E 's/var appVersion = "([0-9\.]+)";/\1/'
)"
echo "Old version in appHost is: $old_version" echo "Old version in appHost is: $old_version"
# Set the shared version to the specified new_version # Set the shared version to the specified new_version
@ -34,11 +32,8 @@ old_version_sed="$( sed 's/\./\\./g' <<<"${old_version}" )" # Escape the '.' cha
new_version_sed="$( cut -f1 -d'-' <<<"${new_version}" )" new_version_sed="$( cut -f1 -d'-' <<<"${new_version}" )"
sed -i "s/${old_version_sed}/${new_version_sed}/g" ${shared_version_file} sed -i "s/${old_version_sed}/${new_version_sed}/g" ${shared_version_file}
old_version="$( old_version="$( grep "version:" ${build_file} | sed -E 's/version: "([0-9\.]+[-a-z0-9]*)"/\1/' )"
grep "version:" ${build_file} \ echo "Old version in ${build_file}: ${old_version}"
| sed -E 's/version: "([0-9\.]+[-a-z0-9]*)"/\1/'
)"
echo "Old version in ${build_file}: $old_version`"
# Set the build.yaml version to the specified new_version # Set the build.yaml version to the specified new_version
old_version_sed="$( sed 's/\./\\./g' <<<"${old_version}" )" # Escape the '.' chars old_version_sed="$( sed 's/\./\\./g' <<<"${old_version}" )" # Escape the '.' chars
@ -54,7 +49,7 @@ fi
debian_changelog_file="debian/changelog" debian_changelog_file="debian/changelog"
debian_changelog_temp="$( mktemp )" debian_changelog_temp="$( mktemp )"
# Create new temp file with our changelog # Create new temp file with our changelog
echo -e "jellyfin (${new_version_deb}) unstable; urgency=medium echo -e "jellyfin-web (${new_version_deb}) unstable; urgency=medium
* New upstream version ${new_version}; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v${new_version} * New upstream version ${new_version}; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v${new_version}
@ -65,15 +60,15 @@ cat ${debian_changelog_file} >> ${debian_changelog_temp}
mv ${debian_changelog_temp} ${debian_changelog_file} mv ${debian_changelog_temp} ${debian_changelog_file}
# Write out a temporary Yum changelog with our new stuff prepended and some templated formatting # Write out a temporary Yum changelog with our new stuff prepended and some templated formatting
fedora_spec_file="fedora/jellyfin.spec" fedora_spec_file="fedora/jellyfin-web.spec"
fedora_changelog_temp="$( mktemp )" fedora_changelog_temp="$( mktemp )"
fedora_spec_temp_dir="$( mktemp -d )" fedora_spec_temp_dir="$( mktemp -d )"
fedora_spec_temp="${fedora_spec_temp_dir}/jellyfin.spec.tmp" fedora_spec_temp="${fedora_spec_temp_dir}/jellyfin-web.spec.tmp"
# Make a copy of our spec file for hacking # Make a copy of our spec file for hacking
cp ${fedora_spec_file} ${fedora_spec_temp_dir}/ cp ${fedora_spec_file} ${fedora_spec_temp_dir}/
pushd ${fedora_spec_temp_dir} pushd ${fedora_spec_temp_dir}
# Split out the stuff before and after changelog # Split out the stuff before and after changelog
csplit jellyfin.spec "/^%changelog/" # produces xx00 xx01 csplit jellyfin-web.spec "/^%changelog/" # produces xx00 xx01
# Update the version in xx00 # Update the version in xx00
sed -i "s/${old_version_sed}/${new_version_sed}/g" xx00 sed -i "s/${old_version_sed}/${new_version_sed}/g" xx00
# Remove the header from xx01 # Remove the header from xx01
@ -92,5 +87,5 @@ mv ${fedora_spec_temp} ${fedora_spec_file}
rm -rf ${fedora_changelog_temp} ${fedora_spec_temp_dir} rm -rf ${fedora_changelog_temp} ${fedora_spec_temp_dir}
# Stage the changed files for commit # Stage the changed files for commit
git add ${shared_version_file} ${build_file} ${debian_changelog_file} ${fedora_spec_file} Dockerfile* git add ${shared_version_file} ${build_file} ${debian_changelog_file} ${fedora_spec_file}
git status git status

6
debian/changelog vendored
View file

@ -1,3 +1,9 @@
jellyfin-web (10.7.0-1) unstable; urgency=medium
* Forthcoming stable release
-- Jellyfin Packaging Team <packaging@jellyfin.org> Mon, 27 Jul 2020 19:13:31 -0400
jellyfin-web (10.6.0-1) unstable; urgency=medium jellyfin-web (10.6.0-1) unstable; urgency=medium
* New upstream version 10.6.0; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.6.0 * New upstream version 10.6.0; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.6.0

4
fedora/jellyfin-web.spec
View file

@ -1,7 +1,7 @@
%global debug_package %{nil} %global debug_package %{nil}
Name: jellyfin-web Name: jellyfin-web
Version: 10.6.0 Version: 10.7.0
Release: 1%{?dist} Release: 1%{?dist}
Summary: The Free Software Media System web client Summary: The Free Software Media System web client
License: GPLv3 License: GPLv3
@ -39,5 +39,7 @@ mv dist %{buildroot}%{_datadir}/jellyfin-web
%{_datadir}/licenses/jellyfin/LICENSE %{_datadir}/licenses/jellyfin/LICENSE
%changelog %changelog
* Mon Jul 27 2020 Jellyfin Packaging Team <packaging@jellyfin.org>
- Forthcoming stable release
* Mon Mar 23 2020 Jellyfin Packaging Team <packaging@jellyfin.org> * Mon Mar 23 2020 Jellyfin Packaging Team <packaging@jellyfin.org>
- Forthcoming stable release - Forthcoming stable release

158
package.json
View file

@ -5,18 +5,18 @@
"repository": "https://github.com/jellyfin/jellyfin-web", "repository": "https://github.com/jellyfin/jellyfin-web",
"license": "GPL-2.0-or-later", "license": "GPL-2.0-or-later",
"devDependencies": { "devDependencies": {
"@babel/core": "^7.10.3", "@babel/core": "^7.10.5",
"@babel/plugin-proposal-class-properties": "^7.10.1", "@babel/plugin-proposal-class-properties": "^7.10.1",
"@babel/plugin-proposal-private-methods": "^7.10.1", "@babel/plugin-proposal-private-methods": "^7.10.1",
"@babel/plugin-transform-modules-amd": "^7.9.6", "@babel/plugin-transform-modules-amd": "^7.10.5",
"@babel/polyfill": "^7.8.7", "@babel/polyfill": "^7.8.7",
"@babel/preset-env": "^7.10.3", "@babel/preset-env": "^7.10.3",
"autoprefixer": "^9.8.5", "autoprefixer": "^9.8.5",
"babel-eslint": "^11.0.0-beta.2", "babel-eslint": "^11.0.0-beta.2",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"browser-sync": "^2.26.7", "browser-sync": "^2.26.12",
"copy-webpack-plugin": "^5.1.1", "copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.6.0", "css-loader": "^4.0.0",
"cssnano": "^4.1.10", "cssnano": "^4.1.10",
"del": "^5.1.0", "del": "^5.1.0",
"eslint": "^6.8.0", "eslint": "^6.8.0",
@ -37,7 +37,7 @@
"gulp-postcss": "^8.0.0", "gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.2", "gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5", "gulp-sourcemaps": "^2.6.5",
"gulp-terser": "^1.2.0", "gulp-terser": "^1.2.1",
"html-webpack-plugin": "^4.3.0", "html-webpack-plugin": "^4.3.0",
"lazypipe": "^1.0.2", "lazypipe": "^1.0.2",
"node-sass": "^4.13.1", "node-sass": "^4.13.1",
@ -48,7 +48,7 @@
"stylelint-config-rational-order": "^0.1.2", "stylelint-config-rational-order": "^0.1.2",
"stylelint-no-browser-hacks": "^1.2.1", "stylelint-no-browser-hacks": "^1.2.1",
"stylelint-order": "^4.1.0", "stylelint-order": "^4.1.0",
"webpack": "^4.41.5", "webpack": "^4.44.0",
"webpack-merge": "^4.2.2", "webpack-merge": "^4.2.2",
"webpack-stream": "^5.2.1" "webpack-stream": "^5.2.1"
}, },
@ -57,15 +57,15 @@
"blurhash": "^1.1.3", "blurhash": "^1.1.3",
"classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz", "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"date-fns": "^2.14.0", "date-fns": "^2.15.0",
"epubjs": "^0.3.85", "epubjs": "^0.3.85",
"fast-text-encoding": "^1.0.3", "fast-text-encoding": "^1.0.3",
"flv.js": "^1.5.0", "flv.js": "^1.5.0",
"headroom.js": "^0.11.0", "headroom.js": "^0.11.0",
"hls.js": "^0.14.0", "hls.js": "^0.14.6",
"howler": "^2.2.0", "howler": "^2.2.0",
"intersection-observer": "^0.11.0", "intersection-observer": "^0.11.0",
"jellyfin-apiclient": "^1.3.0", "jellyfin-apiclient": "^1.4.1",
"jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto", "jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto",
"jquery": "^3.5.1", "jquery": "^3.5.1",
"jstree": "^3.3.10", "jstree": "^3.3.10",
@ -76,7 +76,6 @@
"query-string": "^6.13.1", "query-string": "^6.13.1",
"resize-observer-polyfill": "^1.5.1", "resize-observer-polyfill": "^1.5.1",
"screenfull": "^5.0.2", "screenfull": "^5.0.2",
"shaka-player": "^2.5.13",
"sortablejs": "^1.10.2", "sortablejs": "^1.10.2",
"swiper": "^5.4.5", "swiper": "^5.4.5",
"webcomponents.js": "^0.7.24", "webcomponents.js": "^0.7.24",
@ -91,13 +90,48 @@
"test": [ "test": [
"src/components/accessSchedule/accessSchedule.js", "src/components/accessSchedule/accessSchedule.js",
"src/components/actionSheet/actionSheet.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/autoFocuser.js",
"src/components/backdrop/backdrop.js",
"src/components/cardbuilder/cardBuilder.js", "src/components/cardbuilder/cardBuilder.js",
"src/components/cardbuilder/chaptercardbuilder.js", "src/components/cardbuilder/chaptercardbuilder.js",
"src/components/cardbuilder/peoplecardbuilder.js", "src/components/cardbuilder/peoplecardbuilder.js",
"src/components/channelMapper/channelMapper.js",
"src/components/collectionEditor/collectionEditor.js",
"src/components/confirm/confirm.js",
"src/components/dialog/dialog.js",
"src/components/dialogHelper/dialogHelper.js",
"src/components/directorybrowser/directorybrowser.js",
"src/components/displaySettings/displaySettings.js",
"src/components/fetchhelper.js",
"src/components/filterdialog/filterdialog.js",
"src/components/groupedcards.js",
"src/components/homeScreenSettings/homeScreenSettings.js",
"src/components/homesections/homesections.js",
"src/components/htmlMediaHelper.js",
"src/components/imageOptionsEditor/imageOptionsEditor.js",
"src/components/images/imageLoader.js", "src/components/images/imageLoader.js",
"src/components/imageDownloader/imageDownloader.js",
"src/components/imageeditor/imageeditor.js",
"src/components/imageUploader/imageUploader.js",
"src/components/indicators/indicators.js", "src/components/indicators/indicators.js",
"src/components/itemContextMenu.js",
"src/components/itemidentifier/itemidentifier.js",
"src/components/itemMediaInfo/itemMediaInfo.js",
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
"src/components/libraryoptionseditor/libraryoptionseditor.js",
"src/components/listview/listview.js",
"src/components/maintabsmanager.js",
"src/components/mediainfo/mediainfo.js",
"src/components/mediaLibraryCreator/mediaLibraryCreator.js",
"src/components/mediaLibraryEditor/mediaLibraryEditor.js",
"src/components/metadataEditor/metadataEditor.js",
"src/components/metadataEditor/personEditor.js",
"src/components/multiSelect/multiSelect.js",
"src/components/nowPlayingBar/nowPlayingBar.js",
"src/components/playback/brightnessosd.js", "src/components/playback/brightnessosd.js",
"src/components/playback/mediasession.js", "src/components/playback/mediasession.js",
"src/components/playback/nowplayinghelper.js", "src/components/playback/nowplayinghelper.js",
@ -107,13 +141,38 @@
"src/components/playback/playmethodhelper.js", "src/components/playback/playmethodhelper.js",
"src/components/playback/remotecontrolautoplay.js", "src/components/playback/remotecontrolautoplay.js",
"src/components/playback/volumeosd.js", "src/components/playback/volumeosd.js",
"src/components/playbackSettings/playbackSettings.js",
"src/components/playerstats/playerstats.js",
"src/components/playlisteditor/playlisteditor.js",
"src/components/playmenu.js", "src/components/playmenu.js",
"src/components/prompt/prompt.js",
"src/components/sanatizefilename.js", "src/components/sanatizefilename.js",
"src/components/scrollManager.js", "src/components/scrollManager.js",
"src/components/search/searchfields.js",
"src/components/search/searchresults.js",
"src/components/settingshelper.js",
"src/components/shortcuts.js",
"src/components/subtitlesettings/subtitleappearancehelper.js",
"src/components/subtitlesettings/subtitlesettings.js",
"src/components/syncPlay/groupSelectionMenu.js", "src/components/syncPlay/groupSelectionMenu.js",
"src/components/syncPlay/playbackPermissionManager.js", "src/components/syncPlay/playbackPermissionManager.js",
"src/components/syncPlay/syncPlayManager.js", "src/components/syncPlay/syncPlayManager.js",
"src/components/syncPlay/timeSyncManager.js", "src/components/syncPlay/timeSyncManager.js",
"src/controllers/session/addServer/index.js",
"src/controllers/session/forgotPassword/index.js",
"src/controllers/session/redeemPassword/index.js",
"src/controllers/session/login/index.js",
"src/controllers/session/selectServer/index.js",
"src/controllers/dashboard/apikeys.js",
"src/controllers/dashboard/dashboard.js",
"src/controllers/dashboard/devices/device.js",
"src/controllers/dashboard/devices/devices.js",
"src/controllers/dashboard/dlna/profile.js",
"src/controllers/dashboard/dlna/profiles.js",
"src/controllers/dashboard/dlna/settings.js",
"src/controllers/dashboard/encodingsettings.js",
"src/controllers/dashboard/general.js",
"src/controllers/dashboard/librarydisplay.js",
"src/controllers/dashboard/logs.js", "src/controllers/dashboard/logs.js",
"src/controllers/dashboard/plugins/repositories.js", "src/controllers/dashboard/plugins/repositories.js",
"src/controllers/music/musicalbums.js", "src/controllers/music/musicalbums.js",
@ -126,23 +185,91 @@
"src/controllers/user/home.js", "src/controllers/user/home.js",
"src/controllers/user/playback.js", "src/controllers/user/playback.js",
"src/controllers/user/subtitles.js", "src/controllers/user/subtitles.js",
"src/controllers/dashboard/mediaLibrary.js",
"src/controllers/dashboard/metadataImages.js",
"src/controllers/dashboard/metadatanfo.js",
"src/controllers/dashboard/networking.js",
"src/controllers/dashboard/playback.js",
"src/controllers/dashboard/plugins/repositories/index.js",
"src/controllers/dashboard/scheduledtasks/scheduledtask.js",
"src/controllers/dashboard/scheduledtasks/scheduledtasks.js",
"src/controllers/dashboard/serveractivity.js",
"src/controllers/dashboard/streaming.js",
"src/controllers/dashboard/users/useredit.js",
"src/controllers/dashboard/users/userlibraryaccess.js",
"src/controllers/dashboard/users/usernew.js",
"src/controllers/dashboard/users/userparentalcontrol.js",
"src/controllers/dashboard/users/userpasswordpage.js",
"src/controllers/dashboard/users/userprofilespage.js",
"src/controllers/playback/queue/index.js",
"src/controllers/playback/video/index.js",
"src/controllers/searchpage.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/user/display/index.js",
"src/controllers/user/home/index.js",
"src/controllers/user/menu/index.js",
"src/controllers/user/playback/index.js",
"src/controllers/user/profile/index.js",
"src/controllers/user/subtitles/index.js",
"src/controllers/user/subtitles/index.js",
"src/controllers/wizard/finish/index.js",
"src/controllers/wizard/remote/index.js",
"src/controllers/wizard/settings/index.js",
"src/controllers/wizard/start/index.js",
"src/controllers/wizard/user/index.js",
"src/elements/emby-button/emby-button.js",
"src/elements/emby-button/paper-icon-button-light.js",
"src/elements/emby-checkbox/emby-checkbox.js",
"src/elements/emby-collapse/emby-collapse.js",
"src/elements/emby-input/emby-input.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-progressbar/emby-progressbar.js",
"src/elements/emby-progressring/emby-progressring.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/plugins/backdropScreensaver/plugin.js",
"src/plugins/bookPlayer/plugin.js", "src/plugins/bookPlayer/plugin.js",
"src/plugins/bookPlayer/tableOfContents.js", "src/plugins/bookPlayer/tableOfContents.js",
"src/plugins/photoPlayer/plugin.js", "src/plugins/photoPlayer/plugin.js",
"src/plugins/youtubePlayer/plugin.js",
"src/scripts/alphanumericshortcuts.js",
"src/scripts/autoBackdrops.js",
"src/scripts/datetime.js",
"src/scripts/deleteHelper.js", "src/scripts/deleteHelper.js",
"src/scripts/dfnshelper.js", "src/scripts/dfnshelper.js",
"src/scripts/dom.js", "src/scripts/dom.js",
"src/scripts/editorsidebar.js",
"src/scripts/fileDownloader.js", "src/scripts/fileDownloader.js",
"src/scripts/filesystem.js", "src/scripts/filesystem.js",
"src/scripts/globalize.js",
"src/scripts/imagehelper.js", "src/scripts/imagehelper.js",
"src/scripts/inputManager.js", "src/scripts/inputManager.js",
"src/plugins/backdropScreensaver/plugin.js",
"src/components/filterdialog/filterdialog.js",
"src/components/fetchhelper.js",
"src/scripts/keyboardNavigation.js", "src/scripts/keyboardNavigation.js",
"src/scripts/libraryBrowser.js",
"src/scripts/multiDownload.js",
"src/scripts/playlists.js",
"src/scripts/settings/appSettings.js", "src/scripts/settings/appSettings.js",
"src/scripts/settings/userSettings.js", "src/scripts/settings/userSettings.js",
"src/scripts/settings/webSettings.js" "src/scripts/settings/webSettings.js",
"src/scripts/taskbutton.js",
"src/scripts/themeLoader.js",
"src/scripts/touchHelper.js"
], ],
"plugins": [ "plugins": [
"@babel/plugin-transform-modules-amd", "@babel/plugin-transform-modules-amd",
@ -157,7 +284,7 @@
"last 2 Chrome versions", "last 2 Chrome versions",
"last 2 ChromeAndroid versions", "last 2 ChromeAndroid versions",
"last 2 Safari versions", "last 2 Safari versions",
"last 2 iOS versions", "iOS > 10",
"last 2 Edge versions", "last 2 Edge versions",
"Chrome 27", "Chrome 27",
"Chrome 38", "Chrome 38",
@ -165,6 +292,7 @@
"Chrome 53", "Chrome 53",
"Chrome 56", "Chrome 56",
"Chrome 63", "Chrome 63",
"Edge 18",
"Firefox ESR" "Firefox ESR"
], ],
"scripts": { "scripts": {

14
src/assets/css/site.css
View file

@ -129,3 +129,17 @@ div[data-role=page] {
.hide-scroll { .hide-scroll {
overflow-y: hidden; overflow-y: hidden;
} }
.w-100 {
width: 100%;
}
.margin-auto-x {
margin-left: auto;
margin-right: auto;
}
.margin-auto-y {
margin-top: auto;
margin-bottom: auto;
}

1
src/assets/img/devices/edgechromium.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Microsoft Edge icon</title><path d="M21.86 17.86q.14 0 .25.12.1.13.1.25t-.11.33l-.32.46-.43.53-.44.5q-.21.25-.38.42l-.22.23q-.58.53-1.34 1.04-.76.51-1.6.91-.86.4-1.74.64t-1.67.24q-.9 0-1.69-.28-.8-.28-1.48-.78-.68-.5-1.22-1.17-.53-.66-.92-1.44-.38-.77-.58-1.6-.2-.83-.2-1.67 0-1 .32-1.96.33-.97.87-1.8.14.95.55 1.77.41.82 1.02 1.5.6.68 1.38 1.21.78.54 1.64.9.86.36 1.77.56.92.2 1.8.2 1.12 0 2.18-.24 1.06-.23 2.06-.72l.2-.1.2-.05zm-15.5-1.27q0 1.1.27 2.15.27 1.06.78 2.03.51.96 1.24 1.77.74.82 1.66 1.4-1.47-.2-2.8-.74-1.33-.55-2.48-1.37-1.15-.83-2.08-1.9-.92-1.07-1.58-2.33T.36 14.94Q0 13.54 0 12.06q0-.81.32-1.49.31-.68.83-1.23.53-.55 1.2-.96.66-.4 1.35-.66.74-.27 1.5-.39.78-.12 1.55-.12.7 0 1.42.1.72.12 1.4.35.68.23 1.32.57.63.35 1.16.83-.35 0-.7.07-.33.07-.65.23v-.02q-.63.28-1.2.74-.57.46-1.05 1.04-.48.58-.87 1.26-.38.67-.65 1.39-.27.71-.42 1.44-.15.72-.15 1.38zM11.96.06q1.7 0 3.33.39 1.63.38 3.07 1.15 1.43.77 2.62 1.93 1.18 1.16 1.98 2.7.49.94.76 1.96.28 1 .28 2.08 0 .89-.23 1.7-.24.8-.69 1.48-.45.68-1.1 1.22-.64.53-1.45.88-.54.24-1.11.36-.58.13-1.16.13-.42 0-.97-.03-.54-.03-1.1-.12-.55-.1-1.05-.28-.5-.19-.84-.5-.12-.09-.23-.24-.1-.16-.1-.33 0-.15.16-.35.16-.2.35-.5.2-.28.36-.68.16-.4.16-.95 0-1.06-.4-1.96-.4-.91-1.06-1.64-.66-.74-1.52-1.28-.86-.55-1.79-.89-.84-.3-1.72-.44-.87-.14-1.76-.14-1.55 0-3.06.45T.94 7.55q.71-1.74 1.81-3.13 1.1-1.38 2.52-2.35Q6.68 1.1 8.37.58q1.7-.52 3.58-.52Z" fill="#fff"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

6
src/bundle.js
View file

@ -78,12 +78,6 @@ _define('webcomponents', function() {
return webcomponents; return webcomponents;
}); });
// shaka
var shaka = require('shaka-player');
_define('shaka', function() {
return shaka;
});
// libass-wasm // libass-wasm
var libassWasm = require('libass-wasm'); var libassWasm = require('libass-wasm');
_define('JavascriptSubtitlesOctopus', function() { _define('JavascriptSubtitlesOctopus', function() {

5
src/components/accessSchedule/accessSchedule.js
View file

@ -59,15 +59,14 @@ import 'formDialogStyle';
export function show(options) { export function show(options) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// TODO: remove require import('text!./accessSchedule.template.html').then(({default: template}) => {
require(['text!./components/accessSchedule/accessSchedule.template.html'], template => {
const dlg = dialogHelper.createDialog({ const dlg = dialogHelper.createDialog({
removeOnClose: true, removeOnClose: true,
size: 'small' size: 'small'
}); });
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
let html = ''; let html = '';
html += globalize.translateDocument(template); html += globalize.translateHtml(template);
dlg.innerHTML = html; dlg.innerHTML = html;
populateHours(dlg); populateHours(dlg);
loadSchedule(dlg, options.schedule); loadSchedule(dlg, options.schedule);

19
src/components/actionSheet/actionSheet.js
View file

@ -9,7 +9,6 @@ import 'scrollStyles';
import 'listViewStyle'; import 'listViewStyle';
function getOffsets(elems) { function getOffsets(elems) {
let results = []; let results = [];
if (!document) { if (!document) {
@ -31,7 +30,6 @@ function getOffsets(elems) {
} }
function getPosition(options, dlg) { function getPosition(options, dlg) {
const windowSize = dom.getWindowSize(); const windowSize = dom.getWindowSize();
const windowHeight = windowSize.innerHeight; const windowHeight = windowSize.innerHeight;
const windowWidth = windowSize.innerWidth; const windowWidth = windowSize.innerWidth;
@ -73,14 +71,13 @@ function getPosition(options, dlg) {
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(({default: scrollHelper}) => {
const fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
export function show(options) { export function show(options) {
// items // items
// positionTo // positionTo
// showCancel // showCancel
@ -98,7 +95,6 @@ export function show(options) {
isFullscreen = true; isFullscreen = true;
dialogOptions.autoFocus = true; dialogOptions.autoFocus = true;
} else { } else {
dialogOptions.modal = false; dialogOptions.modal = false;
dialogOptions.entryAnimation = options.entryAnimation; dialogOptions.entryAnimation = options.entryAnimation;
dialogOptions.exitAnimation = options.exitAnimation; dialogOptions.exitAnimation = options.exitAnimation;
@ -136,7 +132,6 @@ export function show(options) {
let icons = []; let icons = [];
let itemIcon; let itemIcon;
for (const item of options.items) { for (const item of options.items) {
itemIcon = item.icon || (item.selected ? 'check' : null); itemIcon = item.icon || (item.selected ? 'check' : null);
if (itemIcon) { if (itemIcon) {
@ -161,7 +156,6 @@ export function show(options) {
} }
if (options.title) { if (options.title) {
html += '<h1 class="actionSheetTitle">' + options.title + '</h1>'; html += '<h1 class="actionSheetTitle">' + options.title + '</h1>';
} }
if (options.text) { if (options.text) {
@ -197,7 +191,6 @@ export function show(options) {
const item = options.items[i]; const item = options.items[i];
if (item.divider) { if (item.divider) {
html += '<div class="actionsheetDivider"></div>'; html += '<div class="actionsheetDivider"></div>';
continue; continue;
} }
@ -255,8 +248,6 @@ export function show(options) {
}); });
} }
// Seeing an issue in some non-chrome browsers where this is requiring a double click
//var eventName = browser.firefox ? 'mousedown' : 'click';
let selectedId; let selectedId;
let timeout; let timeout;
@ -267,26 +258,20 @@ export function show(options) {
} }
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
let isResolved; let isResolved;
dlg.addEventListener('click', function (e) { dlg.addEventListener('click', function (e) {
const actionSheetMenuItem = dom.parentWithClass(e.target, 'actionSheetMenuItem'); const actionSheetMenuItem = dom.parentWithClass(e.target, 'actionSheetMenuItem');
if (actionSheetMenuItem) { if (actionSheetMenuItem) {
selectedId = actionSheetMenuItem.getAttribute('data-id'); selectedId = actionSheetMenuItem.getAttribute('data-id');
if (options.resolveOnClick) { if (options.resolveOnClick) {
if (options.resolveOnClick.indexOf) { if (options.resolveOnClick.indexOf) {
if (options.resolveOnClick.indexOf(selectedId) !== -1) { if (options.resolveOnClick.indexOf(selectedId) !== -1) {
resolve(selectedId); resolve(selectedId);
isResolved = true; isResolved = true;
} }
} else { } else {
resolve(selectedId); resolve(selectedId);
isResolved = true; isResolved = true;
@ -295,11 +280,9 @@ export function show(options) {
dialogHelper.close(dlg); dialogHelper.close(dlg);
} }
}); });
dlg.addEventListener('close', function () { dlg.addEventListener('close', function () {
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.actionSheetScroller'), false, false); centerFocus(dlg.querySelector('.actionSheetScroller'), false, false);
} }

62
src/components/activitylog.js
View file

@ -1,11 +1,20 @@
define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings', 'serverNotifications', 'connectionManager', 'emby-button', 'listViewStyle'], function (events, globalize, dom, datefns, dfnshelper, userSettings, serverNotifications, connectionManager) { import events from 'events';
'use strict'; import globalize from 'globalize';
import dom from 'dom';
import * as datefns from 'date-fns';
import dfnshelper from 'dfnshelper';
import serverNotifications from 'serverNotifications';
import connectionManager from 'connectionManager';
import 'emby-button';
import 'listViewStyle';
/* eslint-disable indent */
function getEntryHtml(entry, apiClient) { function getEntryHtml(entry, apiClient) {
var html = ''; let html = '';
html += '<div class="listItem listItem-border">'; html += '<div class="listItem listItem-border">';
var color = '#00a4dc'; let color = '#00a4dc';
var icon = 'notifications'; let icon = 'notifications';
if ('Error' == entry.Severity || 'Fatal' == entry.Severity || 'Warn' == entry.Severity) { if ('Error' == entry.Severity || 'Fatal' == entry.Severity || 'Warn' == entry.Severity) {
color = '#cc0000'; color = '#cc0000';
@ -56,9 +65,10 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings',
} }
limit = limit || parseInt(elem.getAttribute('data-activitylimit') || '7'); limit = limit || parseInt(elem.getAttribute('data-activitylimit') || '7');
var minDate = new Date(); const minDate = new Date();
var hasUserId = 'false' !== elem.getAttribute('data-useractivity'); const hasUserId = 'false' !== elem.getAttribute('data-useractivity');
// TODO: Use date-fns
if (hasUserId) { if (hasUserId) {
minDate.setTime(minDate.getTime() - 24 * 60 * 60 * 1000); // one day back minDate.setTime(minDate.getTime() - 24 * 60 * 60 * 1000); // one day back
} else { } else {
@ -74,7 +84,7 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings',
elem.setAttribute('data-activitystartindex', startIndex); elem.setAttribute('data-activitystartindex', startIndex);
elem.setAttribute('data-activitylimit', limit); elem.setAttribute('data-activitylimit', limit);
if (!startIndex) { if (!startIndex) {
var activityContainer = dom.parentWithClass(elem, 'activityContainer'); const activityContainer = dom.parentWithClass(elem, 'activityContainer');
if (activityContainer) { if (activityContainer) {
if (result.Items.length) { if (result.Items.length) {
@ -91,7 +101,7 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings',
} }
function onActivityLogUpdate(e, apiClient, data) { function onActivityLogUpdate(e, apiClient, data) {
var options = this.options; const options = this.options;
if (options && options.serverId === apiClient.serverId()) { if (options && options.serverId === apiClient.serverId()) {
reloadData(this, options.element, apiClient); reloadData(this, options.element, apiClient);
@ -99,14 +109,14 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings',
} }
function onListClick(e) { function onListClick(e) {
var btnEntryInfo = dom.parentWithClass(e.target, 'btnEntryInfo'); const btnEntryInfo = dom.parentWithClass(e.target, 'btnEntryInfo');
if (btnEntryInfo) { if (btnEntryInfo) {
var id = btnEntryInfo.getAttribute('data-id'); const id = btnEntryInfo.getAttribute('data-id');
var items = this.items; const items = this.items;
if (items) { if (items) {
var item = items.filter(function (i) { const item = items.filter(function (i) {
return i.Id.toString() === id; return i.Id.toString() === id;
})[0]; })[0];
@ -118,35 +128,35 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings',
} }
function showItemOverview(item) { function showItemOverview(item) {
require(['alert'], function (alert) { import('alert').then(({default: alert}) => {
alert({ alert({
text: item.Overview text: item.Overview
}); });
}); });
} }
function ActivityLog(options) { class ActivityLog {
constructor(options) {
this.options = options; this.options = options;
var element = options.element; const element = options.element;
element.classList.add('activityLogListWidget'); element.classList.add('activityLogListWidget');
element.addEventListener('click', onListClick.bind(this)); element.addEventListener('click', onListClick.bind(this));
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(options.serverId);
reloadData(this, element, apiClient); reloadData(this, element, apiClient);
var onUpdate = onActivityLogUpdate.bind(this); const onUpdate = onActivityLogUpdate.bind(this);
this.updateFn = onUpdate; this.updateFn = onUpdate;
events.on(serverNotifications, 'ActivityLogEntry', onUpdate); events.on(serverNotifications, 'ActivityLogEntry', onUpdate);
apiClient.sendMessage('ActivityLogEntryStart', '0,1500'); apiClient.sendMessage('ActivityLogEntryStart', '0,1500');
} }
destroy() {
ActivityLog.prototype.destroy = function () { const options = this.options;
var options = this.options;
if (options) { if (options) {
options.element.classList.remove('activityLogListWidget'); options.element.classList.remove('activityLogListWidget');
connectionManager.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500'); connectionManager.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500');
} }
var onUpdate = this.updateFn; const onUpdate = this.updateFn;
if (onUpdate) { if (onUpdate) {
events.off(serverNotifications, 'ActivityLogEntry', onUpdate); events.off(serverNotifications, 'ActivityLogEntry', onUpdate);
@ -154,7 +164,9 @@ define(['events', 'globalize', 'dom', 'date-fns', 'dfnshelper', 'userSettings',
this.items = null; this.items = null;
this.options = null; this.options = null;
}; }
}
return ActivityLog; export default ActivityLog;
});
/* eslint-enable indent */

23
src/components/alert.js
View file

@ -1,14 +1,16 @@
define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize) { import browser from 'browser';
'use strict'; import dialog from 'dialog';
import globalize from 'globalize';
/* eslint-disable indent */
function replaceAll(originalString, strReplace, strWith) { function replaceAll(originalString, strReplace, strWith) {
var reg = new RegExp(strReplace, 'ig'); const reg = new RegExp(strReplace, 'ig');
return originalString.replace(reg, strWith); return originalString.replace(reg, strWith);
} }
return function (text, title) { export default function (text, title) {
let options;
var options;
if (typeof text === 'string') { if (typeof text === 'string') {
options = { options = {
title: title, title: title,
@ -21,7 +23,7 @@ define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize)
if (browser.tv && window.alert) { if (browser.tv && window.alert) {
alert(replaceAll(options.text || '', '<br/>', '\n')); alert(replaceAll(options.text || '', '<br/>', '\n'));
} else { } else {
var items = []; const items = [];
items.push({ items.push({
name: globalize.translate('ButtonGotIt'), name: globalize.translate('ButtonGotIt'),
@ -31,7 +33,7 @@ define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize)
options.buttons = items; options.buttons = items;
return dialog(options).then(function (result) { return dialog.show(options).then(function (result) {
if (result === 'ok') { if (result === 'ok') {
return Promise.resolve(); return Promise.resolve();
} }
@ -41,5 +43,6 @@ define(['browser', 'dialog', 'globalize'], function (browser, dialog, globalize)
} }
return Promise.resolve(); return Promise.resolve();
}; }
});
/* eslint-enable indent */

176
src/components/alphaPicker/alphaPicker.js
View file

@ -1,11 +1,22 @@
define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-button-light', 'material-icons'], function (focusManager, layoutManager, dom) { /* eslint-disable indent */
'use strict';
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() { function focus() {
var scope = this; const scope = this;
var selected = scope.querySelector('.' + selectedButtonClass); const selected = scope.querySelector(`.${selectedButtonClass}`);
if (selected) { if (selected) {
focusManager.focus(selected); focusManager.focus(selected);
@ -15,8 +26,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
} }
function getAlphaPickerButtonClassName(vertical) { function getAlphaPickerButtonClassName(vertical) {
let alphaPickerButtonClassName = 'alphaPickerButton';
var alphaPickerButtonClassName = 'alphaPickerButton';
if (layoutManager.tv) { if (layoutManager.tv) {
alphaPickerButtonClassName += ' alphaPickerButton-tv'; alphaPickerButtonClassName += ' alphaPickerButton-tv';
@ -30,44 +40,42 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
} }
function getLetterButton(l, vertical) { function getLetterButton(l, vertical) {
return '<button data-value="' + l + '" class="' + getAlphaPickerButtonClassName(vertical) + '">' + l + '</button>'; return `<button data-value="${l}" class="${getAlphaPickerButtonClassName(vertical)}">${l}</button>`;
} }
function mapLetters(letters, vertical) { function mapLetters(letters, vertical) {
return letters.map(l => {
return letters.map(function (l) {
return getLetterButton(l, vertical); return getLetterButton(l, vertical);
}); });
} }
function render(element, options) { function render(element, options) {
element.classList.add('alphaPicker'); element.classList.add('alphaPicker');
if (layoutManager.tv) { if (layoutManager.tv) {
element.classList.add('alphaPicker-tv'); element.classList.add('alphaPicker-tv');
} }
var vertical = element.classList.contains('alphaPicker-vertical'); const vertical = element.classList.contains('alphaPicker-vertical');
if (!vertical) { if (!vertical) {
element.classList.add('focuscontainer-x'); element.classList.add('focuscontainer-x');
} }
var html = ''; let html = '';
var letters; let letters;
var alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical); const alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical);
var rowClassName = 'alphaPickerRow'; let rowClassName = 'alphaPickerRow';
if (vertical) { if (vertical) {
rowClassName += ' alphaPickerRow-vertical'; rowClassName += ' alphaPickerRow-vertical';
} }
html += '<div class="' + rowClassName + '">'; html += `<div class="${rowClassName}">`;
if (options.mode === 'keyboard') { if (options.mode === 'keyboard') {
html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><span class="material-icons alphaPickerButtonIcon space_bar"></span></button>'; html += `<button data-value=" " is="paper-icon-button-light" class="${alphaPickerButtonClassName}"><span class="material-icons alphaPickerButtonIcon space_bar"></span></button>`;
} else { } else {
letters = ['#']; letters = ['#'];
html += mapLetters(letters, vertical).join(''); html += mapLetters(letters, vertical).join('');
@ -77,11 +85,11 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
html += mapLetters(letters, vertical).join(''); html += mapLetters(letters, vertical).join('');
if (options.mode === 'keyboard') { if (options.mode === 'keyboard') {
html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><span class="material-icons alphaPickerButtonIcon backspace"></span></button>'; html += `<button data-value="backspace" is="paper-icon-button-light" class="${alphaPickerButtonClassName}"><span class="material-icons alphaPickerButtonIcon backspace"></span></button>`;
html += '</div>'; html += '</div>';
letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
html += '<div class="' + rowClassName + '">'; html += `<div class="${rowClassName}">`;
html += '<br/>'; html += '<br/>';
html += mapLetters(letters, vertical).join(''); html += mapLetters(letters, vertical).join('');
html += '</div>'; html += '</div>';
@ -95,74 +103,71 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
element.focus = focus; element.focus = focus;
} }
function AlphaPicker(options) { export class AlphaPicker {
constructor(options) {
const self = this;
var self = this;
this.options = options; this.options = options;
var element = options.element; const element = options.element;
var itemsContainer = options.itemsContainer; const itemsContainer = options.itemsContainer;
var itemClass = options.itemClass; const itemClass = options.itemClass;
var itemFocusValue; let itemFocusValue;
var itemFocusTimeout; let itemFocusTimeout;
function onItemFocusTimeout() { function onItemFocusTimeout() {
itemFocusTimeout = null; itemFocusTimeout = null;
self.value(itemFocusValue); self.value(itemFocusValue);
} }
var alphaFocusedElement; let alphaFocusedElement;
var alphaFocusTimeout; let alphaFocusTimeout;
function onAlphaFocusTimeout() { function onAlphaFocusTimeout() {
alphaFocusTimeout = null; alphaFocusTimeout = null;
if (document.activeElement === alphaFocusedElement) { if (document.activeElement === alphaFocusedElement) {
var value = alphaFocusedElement.getAttribute('data-value'); const value = alphaFocusedElement.getAttribute('data-value');
self.value(value, true); self.value(value, true);
} }
} }
function onAlphaPickerInKeyboardModeClick(e) { function onAlphaPickerInKeyboardModeClick(e) {
const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
if (alphaPickerButton) { if (alphaPickerButton) {
var value = alphaPickerButton.getAttribute('data-value'); const value = alphaPickerButton.getAttribute('data-value');
element.dispatchEvent(new CustomEvent('alphavalueclicked', { element.dispatchEvent(new CustomEvent('alphavalueclicked', {
cancelable: false, cancelable: false,
detail: { detail: {
value: value value
} }
})); }));
} }
} }
function onAlphaPickerClick(e) { function onAlphaPickerClick(e) {
const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
if (alphaPickerButton) { if (alphaPickerButton) {
var value = alphaPickerButton.getAttribute('data-value'); const value = alphaPickerButton.getAttribute('data-value');
if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) { if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) {
self.value(null, true); this.value(null, true);
} else { } else {
self.value(value, true); this.value(value, true);
} }
} }
} }
function onAlphaPickerFocusIn(e) { function onAlphaPickerFocusIn(e) {
if (alphaFocusTimeout) { if (alphaFocusTimeout) {
clearTimeout(alphaFocusTimeout); clearTimeout(alphaFocusTimeout);
alphaFocusTimeout = null; alphaFocusTimeout = null;
} }
var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
if (alphaPickerButton) { if (alphaPickerButton) {
alphaFocusedElement = alphaPickerButton; alphaFocusedElement = alphaPickerButton;
@ -171,13 +176,11 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
} }
function onItemsFocusIn(e) { function onItemsFocusIn(e) {
const item = dom.parentWithClass(e.target, itemClass);
var item = dom.parentWithClass(e.target, itemClass);
if (item) { if (item) {
var prefix = item.getAttribute('data-prefix'); const prefix = item.getAttribute('data-prefix');
if (prefix && prefix.length) { if (prefix && prefix.length) {
itemFocusValue = prefix[0]; itemFocusValue = prefix[0];
if (itemFocusTimeout) { if (itemFocusTimeout) {
clearTimeout(itemFocusTimeout); clearTimeout(itemFocusTimeout);
@ -187,10 +190,8 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
} }
} }
self.enabled = function (enabled) { this.enabled = function (enabled) {
if (enabled) { if (enabled) {
if (itemsContainer) { if (itemsContainer) {
itemsContainer.addEventListener('focus', onItemsFocusIn, true); itemsContainer.addEventListener('focus', onItemsFocusIn, true);
} }
@ -204,9 +205,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
} else { } else {
element.addEventListener('click', onAlphaPickerClick.bind(this)); element.addEventListener('click', onAlphaPickerClick.bind(this));
} }
} else { } else {
if (itemsContainer) { if (itemsContainer) {
itemsContainer.removeEventListener('focus', onItemsFocusIn, true); itemsContainer.removeEventListener('focus', onItemsFocusIn, true);
} }
@ -223,25 +222,23 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
this.visible(true); this.visible(true);
} }
AlphaPicker.prototype.value = function (value, applyValue) { value(value, applyValue) {
const element = this.options.element;
var element = this.options.element; let btn;
var btn; let selected;
var selected;
if (value !== undefined) { if (value !== undefined) {
if (value != null) { if (value != null) {
value = value.toUpperCase(); value = value.toUpperCase();
this._currentValue = value; this._currentValue = value;
if (this.options.mode !== 'keyboard') { if (this.options.mode !== 'keyboard') {
selected = element.querySelector('.' + selectedButtonClass); selected = element.querySelector(`.${selectedButtonClass}`);
try { try {
btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']'); btn = element.querySelector(`.alphaPickerButton[data-value='${value}']`);
} catch (err) { } catch (err) {
console.error('error in querySelector: ' + err); console.error('error in querySelector:', err);
} }
if (btn && btn !== selected) { if (btn && btn !== selected) {
@ -254,7 +251,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
} else { } else {
this._currentValue = value; this._currentValue = value;
selected = element.querySelector('.' + selectedButtonClass); selected = element.querySelector(`.${selectedButtonClass}`);
if (selected) { if (selected) {
selected.classList.remove(selectedButtonClass); selected.classList.remove(selectedButtonClass);
} }
@ -265,57 +262,52 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
element.dispatchEvent(new CustomEvent('alphavaluechanged', { element.dispatchEvent(new CustomEvent('alphavaluechanged', {
cancelable: false, cancelable: false,
detail: { detail: {
value: value value
} }
})); }));
} }
return this._currentValue; return this._currentValue;
}; }
AlphaPicker.prototype.on = function (name, fn) { on(name, fn) {
var element = this.options.element; const element = this.options.element;
element.addEventListener(name, fn); element.addEventListener(name, fn);
}; }
AlphaPicker.prototype.off = function (name, fn) { off(name, fn) {
var element = this.options.element; const element = this.options.element;
element.removeEventListener(name, fn); element.removeEventListener(name, fn);
}; }
AlphaPicker.prototype.visible = function (visible) { visible(visible) {
const element = this.options.element;
var element = this.options.element;
element.style.visibility = visible ? 'visible' : 'hidden'; 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() {
const element = this.options.element;
const elems = element.querySelectorAll('.alphaPickerButton');
const values = [];
for (let i = 0, length = elems.length; i < length; i++) {
values.push(elems[i].getAttribute('data-value')); values.push(elems[i].getAttribute('data-value'));
} }
return values; return values;
}; }
AlphaPicker.prototype.focus = function () { focus() {
const element = this.options.element;
var element = this.options.element;
focusManager.autoFocus(element, true); focusManager.autoFocus(element, true);
}; }
AlphaPicker.prototype.destroy = function () { destroy() {
const element = this.options.element;
var element = this.options.element;
this.enabled(false); this.enabled(false);
element.classList.remove('focuscontainer-x'); element.classList.remove('focuscontainer-x');
this.options = null; this.options = null;
}; }
}
return AlphaPicker; /* eslint-enable indent */
}); export default AlphaPicker;

23
src/components/appFooter/appFooter.js
View file

@ -1,17 +1,17 @@
define(['browser', 'css!./appFooter'], function (browser) { import 'css!./appFooter';
'use strict';
function render(options) { function render(options) {
var elem = document.createElement('div'); const elem = document.createElement('div');
elem.classList.add('appfooter'); elem.classList.add('appfooter');
document.body.appendChild(elem); document.body.appendChild(elem);
return elem; return elem;
} }
function appFooter(options) { class appFooter {
var self = this; constructor(options) {
const self = this;
self.element = render(options); self.element = render(options);
self.add = function (elem) { self.add = function (elem) {
@ -26,12 +26,11 @@ define(['browser', 'css!./appFooter'], function (browser) {
} }
}; };
} }
destroy() {
appFooter.prototype.destroy = function () {
var self = this; var self = this;
self.element = null; self.element = null;
}; }
}
return appFooter; export default appFooter;
});

61
src/components/appRouter.js
View file

@ -16,12 +16,12 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
show('/settings/settings.html'); show('/settings/settings.html');
}, },
showNowPlaying: function () { showNowPlaying: function () {
show('/nowplaying.html'); show('queue');
} }
}; };
function beginConnectionWizard() { function beginConnectionWizard() {
backdrop.clear(); backdrop.clearBackdrop();
loading.show(); loading.show();
connectionManager.connect({ connectionManager.connect({
enableAutoLogin: appSettings.enableAutoLogin() enableAutoLogin: appSettings.enableAutoLogin()
@ -53,7 +53,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
break; break;
case 'ServerUpdateNeeded': case 'ServerUpdateNeeded':
require(['alert'], function (alert) { require(['alert'], function (alert) {
alert({ alert.default({
text: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin'), text: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin'),
html: globalize.translate('ServerUpdateNeeded', '<a href="https://github.com/jellyfin/jellyfin">https://github.com/jellyfin/jellyfin</a>') html: globalize.translate('ServerUpdateNeeded', '<a href="https://github.com/jellyfin/jellyfin">https://github.com/jellyfin/jellyfin</a>')
}).then(function () { }).then(function () {
@ -153,20 +153,14 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
}; };
if (!isBackNav) { if (!isBackNav) {
// Don't force a new view for home due to the back menu
//if (route.type !== 'home') {
onNewViewNeeded(); onNewViewNeeded();
return; return;
//}
} }
viewManager.tryRestoreView(currentRequest, function () { viewManager.tryRestoreView(currentRequest, function () {
// done
currentRouteInfo = { currentRouteInfo = {
route: route, route: route,
path: ctx.path path: ctx.path
}; };
}).catch(function (result) { }).catch(function (result) {
if (!result || !result.cancelled) { if (!result || !result.cancelled) {
onNewViewNeeded(); onNewViewNeeded();
@ -197,12 +191,10 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
} }
function onRequestFail(e, data) { function onRequestFail(e, data) {
var apiClient = this; var apiClient = this;
if (data.status === 403) { if (data.status === 403) {
if (data.errorCode === 'ParentalControl') { if (data.errorCode === 'ParentalControl') {
var isCurrentAllowed = currentRouteInfo ? (currentRouteInfo.route.anonymous || currentRouteInfo.route.startup) : true; var isCurrentAllowed = currentRouteInfo ? (currentRouteInfo.route.anonymous || currentRouteInfo.route.startup) : true;
// Bounce to the login screen, but not if a password entry fails, obviously // Bounce to the login screen, but not if a password entry fails, obviously
@ -210,7 +202,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
showForcedLogoutMessage(globalize.translate('AccessRestrictedTryAgainLater')); showForcedLogoutMessage(globalize.translate('AccessRestrictedTryAgainLater'));
appRouter.showLocalLogin(apiClient.serverId()); appRouter.showLocalLogin(apiClient.serverId());
} }
} }
} }
} }
@ -237,7 +228,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
if (navigator.connection) { if (navigator.connection) {
var max = navigator.connection.downlinkMax; var max = navigator.connection.downlinkMax;
if (max && max > 0 && max < Number.POSITIVE_INFINITY) { if (max && max > 0 && max < Number.POSITIVE_INFINITY) {
max /= 8; max /= 8;
max *= 1000000; max *= 1000000;
max *= 0.7; max *= 0.7;
@ -255,7 +245,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
} }
function onApiClientCreated(e, newApiClient) { function onApiClientCreated(e, newApiClient) {
newApiClient.normalizeImageOptions = normalizeImageOptions; newApiClient.normalizeImageOptions = normalizeImageOptions;
if (browser.iOS) { if (browser.iOS) {
@ -269,12 +258,10 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
} }
function initApiClient(apiClient) { function initApiClient(apiClient) {
onApiClientCreated({}, apiClient); onApiClientCreated({}, apiClient);
} }
function initApiClients() { function initApiClients() {
connectionManager.getApiClients().forEach(initApiClient); connectionManager.getApiClients().forEach(initApiClient);
events.on(connectionManager, 'apiclientcreated', onApiClientCreated); events.on(connectionManager, 'apiclientcreated', onApiClientCreated);
@ -290,7 +277,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
var firstConnectionResult; var firstConnectionResult;
function start(options) { function start(options) {
loading.show(); loading.show();
initApiClients(); initApiClients();
@ -302,53 +288,29 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
enableAutoLogin: appSettings.enableAutoLogin() enableAutoLogin: appSettings.enableAutoLogin()
}).then(function (result) { }).then(function (result) {
firstConnectionResult = result; firstConnectionResult = result;
options = options || {}; options = options || {};
page({ page({
click: options.click !== false, click: options.click !== false,
hashbang: options.hashbang !== false, hashbang: options.hashbang !== false
enableHistory: enableHistory()
}); });
}).catch().then(function() { }).catch().then(function() {
loading.hide(); loading.hide();
}); });
} }
function enableHistory() {
//if (browser.edgeUwp) {
// return false;
//}
// shows status bar on navigation
if (browser.xboxOne) {
return false;
}
// Does not support history
if (browser.orsay) {
return false;
}
return true;
}
function enableNativeHistory() { function enableNativeHistory() {
return false; return false;
} }
function authenticate(ctx, route, callback) { function authenticate(ctx, route, callback) {
var firstResult = firstConnectionResult; var firstResult = firstConnectionResult;
if (firstResult) { if (firstResult) {
firstConnectionResult = null; firstConnectionResult = null;
if (firstResult.State !== 'SignedIn' && !route.anonymous) { if (firstResult.State !== 'SignedIn' && !route.anonymous) {
handleConnectionResult(firstResult); handleConnectionResult(firstResult);
return; return;
} }
@ -377,7 +339,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
} }
if (apiClient && apiClient.isLoggedIn()) { if (apiClient && apiClient.isLoggedIn()) {
console.debug('appRouter - user is authenticated'); console.debug('appRouter - user is authenticated');
if (route.isDefaultRoute) { if (route.isDefaultRoute) {
@ -385,11 +346,8 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
loadUserSkinWithOptions(ctx); loadUserSkinWithOptions(ctx);
return; return;
} else if (route.roles) { } else if (route.roles) {
validateRoles(apiClient, route.roles).then(function () { validateRoles(apiClient, route.roles).then(function () {
callback(); callback();
}, beginConnectionWizard); }, beginConnectionWizard);
return; return;
} }
@ -431,8 +389,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
var isDummyBackToHome; var isDummyBackToHome;
function loadContent(ctx, route, html, request) { function loadContent(ctx, route, html, request) {
html = globalize.translateHtml(html, route.dictionary);
html = globalize.translateDocument(html, route.dictionary);
request.view = html; request.view = html;
viewManager.loadView(request); viewManager.loadView(request);
@ -491,7 +448,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
} }
function getWindowLocationSearch(win) { function getWindowLocationSearch(win) {
var currentPath = currentRouteInfo ? (currentRouteInfo.path || '') : ''; var currentPath = currentRouteInfo ? (currentRouteInfo.path || '') : '';
var index = currentPath.indexOf('?'); var index = currentPath.indexOf('?');
@ -535,9 +491,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
if (!document.querySelector('.dialogContainer') && startPages.indexOf(curr.type) !== -1) { if (!document.querySelector('.dialogContainer') && startPages.indexOf(curr.type) !== -1) {
return false; return false;
} }
if (enableHistory()) {
return history.length > 1;
}
return (page.len || 0) > 0; return (page.len || 0) > 0;
} }
@ -624,7 +578,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
} }
if (level === 'full' || level === 2) { if (level === 'full' || level === 2) {
backdrop.clear(true); backdrop.clearBackdrop(true);
document.documentElement.classList.add('transparentDocument'); document.documentElement.classList.add('transparentDocument');
backgroundContainer.classList.add('backgroundContainer-transparent'); backgroundContainer.classList.add('backgroundContainer-transparent');
backdropContainer.classList.add('hide'); backdropContainer.classList.add('hide');
@ -644,7 +598,6 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
function pushState(state, title, url) { function pushState(state, title, url) {
state.navigate = false; state.navigate = false;
history.pushState(state, title, url); history.pushState(state, title, url);
} }
function setBaseRoute() { function setBaseRoute() {

12
src/components/apphost.js
View file

@ -105,6 +105,8 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
deviceName = 'Sony PS4'; deviceName = 'Sony PS4';
} else if (browser.chrome) { } else if (browser.chrome) {
deviceName = 'Chrome'; deviceName = 'Chrome';
} else if (browser.edgeChromium) {
deviceName = 'Edge Chromium';
} else if (browser.edge) { } else if (browser.edge) {
deviceName = 'Edge'; deviceName = 'Edge';
} else if (browser.firefox) { } else if (browser.firefox) {
@ -257,12 +259,6 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
features.push('fullscreenchange'); features.push('fullscreenchange');
} }
if (browser.chrome || browser.edge && !browser.slow) {
if (!browser.noAnimation && !browser.edgeUwp && !browser.xboxOne) {
features.push('imageanalysis');
}
}
if (browser.tv || browser.xboxOne || browser.ps4 || browser.mobile) { if (browser.tv || browser.xboxOne || browser.ps4 || browser.mobile) {
features.push('physicalvolumecontrol'); features.push('physicalvolumecontrol');
} }
@ -297,7 +293,7 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
features.push('fileinput'); features.push('fileinput');
} }
if (browser.chrome) { if (browser.chrome || browser.edgeChromium) {
features.push('chromecast'); features.push('chromecast');
} }
@ -353,7 +349,7 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
var deviceId; var deviceId;
var deviceName; var deviceName;
var appName = 'Jellyfin Web'; var appName = 'Jellyfin Web';
var appVersion = '10.6.0'; var appVersion = '10.7.0';
var appHost = { var appHost = {
getWindowState: function () { getWindowState: function () {

108
src/components/backdrop/backdrop.js
View file

@ -1,5 +1,11 @@
define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings', 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom, userSettings) { import browser from 'browser';
'use strict'; 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) { function enableAnimation(elem) {
if (browser.slow) { if (browser.slow) {
@ -22,22 +28,20 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
return true; return true;
} }
function Backdrop() { class Backdrop {
} load(url, parent, existingBackdropImage) {
const img = new Image();
const self = this;
Backdrop.prototype.load = function (url, parent, existingBackdropImage) { img.onload = () => {
var img = new Image();
var self = this;
img.onload = function () {
if (self.isDestroyed) { if (self.isDestroyed) {
return; return;
} }
var backdropImage = document.createElement('div'); const backdropImage = document.createElement('div');
backdropImage.classList.add('backdropImage'); backdropImage.classList.add('backdropImage');
backdropImage.classList.add('displayingBackdropImage'); backdropImage.classList.add('displayingBackdropImage');
backdropImage.style.backgroundImage = "url('" + url + "')"; backdropImage.style.backgroundImage = `url('${url}')`;
backdropImage.setAttribute('data-url', url); backdropImage.setAttribute('data-url', url);
backdropImage.classList.add('backdropImageFadeIn'); backdropImage.classList.add('backdropImageFadeIn');
@ -51,7 +55,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
return; return;
} }
var onAnimationComplete = function () { const onAnimationComplete = () => {
dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, { dom.removeEventListener(backdropImage, dom.whichAnimationEvent(), onAnimationComplete, {
once: true once: true
}); });
@ -71,22 +75,23 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
}; };
img.src = url; img.src = url;
}; }
Backdrop.prototype.cancelAnimation = function () { cancelAnimation() {
var elem = this.currentAnimatingElement; const elem = this.currentAnimatingElement;
if (elem) { if (elem) {
elem.classList.remove('backdropImageFadeIn'); elem.classList.remove('backdropImageFadeIn');
this.currentAnimatingElement = null; this.currentAnimatingElement = null;
} }
}; }
Backdrop.prototype.destroy = function () { destroy() {
this.isDestroyed = true; this.isDestroyed = true;
this.cancelAnimation(); this.cancelAnimation();
}; }
}
var backdropContainer; let backdropContainer;
function getBackdropContainer() { function getBackdropContainer() {
if (!backdropContainer) { if (!backdropContainer) {
backdropContainer = document.querySelector('.backdropContainer'); backdropContainer = document.querySelector('.backdropContainer');
@ -101,7 +106,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
return backdropContainer; return backdropContainer;
} }
function clearBackdrop(clearAll) { export function clearBackdrop(clearAll) {
clearRotation(); clearRotation();
if (currentLoadingBackdrop) { if (currentLoadingBackdrop) {
@ -109,7 +114,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
currentLoadingBackdrop = null; currentLoadingBackdrop = null;
} }
var elem = getBackdropContainer(); const elem = getBackdropContainer();
elem.innerHTML = ''; elem.innerHTML = '';
if (clearAll) { if (clearAll) {
@ -119,7 +124,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
internalBackdrop(false); internalBackdrop(false);
} }
var backgroundContainer; let backgroundContainer;
function getBackgroundContainer() { function getBackgroundContainer() {
if (!backgroundContainer) { if (!backgroundContainer) {
backgroundContainer = document.querySelector('.backgroundContainer'); backgroundContainer = document.querySelector('.backgroundContainer');
@ -135,31 +140,27 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
} }
} }
var hasInternalBackdrop; let hasInternalBackdrop;
function internalBackdrop(enabled) { function internalBackdrop(enabled) {
hasInternalBackdrop = enabled; hasInternalBackdrop = enabled;
setBackgroundContainerBackgroundEnabled(); setBackgroundContainerBackgroundEnabled();
} }
var hasExternalBackdrop; let hasExternalBackdrop;
function externalBackdrop(enabled) { export function externalBackdrop(enabled) {
hasExternalBackdrop = enabled; hasExternalBackdrop = enabled;
setBackgroundContainerBackgroundEnabled(); setBackgroundContainerBackgroundEnabled();
} }
function getRandom(min, max) { let currentLoadingBackdrop;
return Math.floor(Math.random() * (max - min) + min);
}
var currentLoadingBackdrop;
function setBackdropImage(url) { function setBackdropImage(url) {
if (currentLoadingBackdrop) { if (currentLoadingBackdrop) {
currentLoadingBackdrop.destroy(); currentLoadingBackdrop.destroy();
currentLoadingBackdrop = null; currentLoadingBackdrop = null;
} }
var elem = getBackdropContainer(); const elem = getBackdropContainer();
var existingBackdropImage = elem.querySelector('.displayingBackdropImage'); const existingBackdropImage = elem.querySelector('.displayingBackdropImage');
if (existingBackdropImage && existingBackdropImage.getAttribute('data-url') === url) { if (existingBackdropImage && existingBackdropImage.getAttribute('data-url') === url) {
if (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'); existingBackdropImage.classList.remove('displayingBackdropImage');
} }
var instance = new Backdrop(); const instance = new Backdrop();
instance.load(url, elem, existingBackdropImage); instance.load(url, elem, existingBackdropImage);
currentLoadingBackdrop = instance; currentLoadingBackdrop = instance;
} }
@ -176,9 +177,9 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
function getItemImageUrls(item, imageOptions) { function getItemImageUrls(item, imageOptions) {
imageOptions = imageOptions || {}; imageOptions = imageOptions || {};
var apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
if (item.BackdropImageTags && item.BackdropImageTags.length > 0) { 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, { return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, {
type: 'Backdrop', type: 'Backdrop',
tag: imgTag, tag: imgTag,
@ -189,7 +190,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
} }
if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) { 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, { return apiClient.getScaledImageUrl(item.ParentBackdropItemId, Object.assign(imageOptions, {
type: 'Backdrop', type: 'Backdrop',
tag: imgTag, tag: imgTag,
@ -203,13 +204,13 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
} }
function getImageUrls(items, imageOptions) { function getImageUrls(items, imageOptions) {
var list = []; const list = [];
var onImg = function (img) { const onImg = img => {
list.push(img); list.push(img);
}; };
for (var i = 0, length = items.length; i < length; i++) { for (let i = 0, length = items.length; i < length; i++) {
var itemImages = getItemImageUrls(items[i], imageOptions); const itemImages = getItemImageUrls(items[i], imageOptions);
itemImages.forEach(onImg); 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 // If you don't care about the order of the elements inside
// the array, you should sort both arrays here. // 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]) { if (a[i] !== b[i]) {
return false; return false;
} }
@ -242,12 +243,12 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
return userSettings.enableBackdrops(); return userSettings.enableBackdrops();
} }
var rotationInterval; let rotationInterval;
var currentRotatingImages = []; let currentRotatingImages = [];
var currentRotationIndex = -1; let currentRotationIndex = -1;
function setBackdrops(items, imageOptions, enableImageRotation) { export function setBackdrops(items, imageOptions, enableImageRotation) {
if (enabled()) { if (enabled()) {
var images = getImageUrls(items, imageOptions); const images = getImageUrls(items, imageOptions);
if (images.length) { if (images.length) {
startRotation(images, enableImageRotation); startRotation(images, enableImageRotation);
@ -279,7 +280,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
return; return;
} }
var newIndex = currentRotationIndex + 1; let newIndex = currentRotationIndex + 1;
if (newIndex >= currentRotatingImages.length) { if (newIndex >= currentRotatingImages.length) {
newIndex = 0; newIndex = 0;
} }
@ -289,7 +290,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
} }
function clearRotation() { function clearRotation() {
var interval = rotationInterval; const interval = rotationInterval;
if (interval) { if (interval) {
clearInterval(interval); clearInterval(interval);
} }
@ -299,7 +300,7 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
currentRotationIndex = -1; currentRotationIndex = -1;
} }
function setBackdrop(url, imageOptions) { export function setBackdrop(url, imageOptions) {
if (url && typeof url !== 'string') { if (url && typeof url !== 'string') {
url = getImageUrls([url], imageOptions)[0]; url = getImageUrls([url], imageOptions)[0];
} }
@ -312,10 +313,11 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'userSettings'
} }
} }
return { /* eslint-enable indent */
export default {
setBackdrops: setBackdrops, setBackdrops: setBackdrops,
setBackdrop: setBackdrop, setBackdrop: setBackdrop,
clear: clearBackdrop, clearBackdrop: clearBackdrop,
externalBackdrop: externalBackdrop externalBackdrop: externalBackdrop
}; };
});

76
src/components/cardbuilder/cardBuilder.js
View file

@ -291,12 +291,10 @@ import 'programStyles';
const primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items); const primaryImageAspectRatio = imageLoader.getPrimaryImageAspectRatio(items);
if (['auto', 'autohome', 'autooverflow', 'autoVertical'].includes(options.shape)) { if (['auto', 'autohome', 'autooverflow', 'autoVertical'].includes(options.shape)) {
const requestedShape = options.shape; const requestedShape = options.shape;
options.shape = null; options.shape = null;
if (primaryImageAspectRatio) { if (primaryImageAspectRatio) {
if (primaryImageAspectRatio >= 3) { if (primaryImageAspectRatio >= 3) {
options.shape = 'banner'; options.shape = 'banner';
options.coverImage = true; options.coverImage = true;
@ -394,7 +392,6 @@ import 'programStyles';
} }
if (newIndexValue !== currentIndexValue) { if (newIndexValue !== currentIndexValue) {
if (hasOpenRow) { if (hasOpenRow) {
html += '</div>'; html += '</div>';
hasOpenRow = false; hasOpenRow = false;
@ -402,7 +399,6 @@ import 'programStyles';
} }
if (hasOpenSection) { if (hasOpenSection) {
html += '</div>'; html += '</div>';
if (isVertical) { if (isVertical) {
@ -426,7 +422,6 @@ import 'programStyles';
} }
if (options.rows && itemsInRow === 0) { if (options.rows && itemsInRow === 0) {
if (hasOpenRow) { if (hasOpenRow) {
html += '</div>'; html += '</div>';
hasOpenRow = false; hasOpenRow = false;
@ -686,7 +681,6 @@ import 'programStyles';
let valid = 0; let valid = 0;
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
let currentCssClass = cssClass; let currentCssClass = cssClass;
let text = lines[i]; let text = lines[i];
@ -713,7 +707,6 @@ import 'programStyles';
} }
if (forceLines) { if (forceLines) {
let linesLength = maxLines || Math.min(lines.length, maxLines || lines.length); let linesLength = maxLines || Math.min(lines.length, maxLines || lines.length);
while (valid < linesLength) { while (valid < linesLength) {
@ -745,7 +738,6 @@ import 'programStyles';
let airTimeText = ''; let airTimeText = '';
if (item.StartDate) { if (item.StartDate) {
try { try {
let date = datetime.parseISO8601Date(item.StartDate); let date = datetime.parseISO8601Date(item.StartDate);
@ -792,7 +784,6 @@ import 'programStyles';
const showOtherText = isOuterFooter ? !overlayText : overlayText; const showOtherText = isOuterFooter ? !overlayText : overlayText;
if (isOuterFooter && options.cardLayout && layoutManager.mobile) { if (isOuterFooter && options.cardLayout && layoutManager.mobile) {
if (options.cardFooterAside !== 'none') { if (options.cardFooterAside !== 'none') {
html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><span class="material-icons more_vert"></span></button>'; html += '<button is="paper-icon-button-light" class="itemAction btnCardOptions cardText-secondary" data-action="menu"><span class="material-icons more_vert"></span></button>';
} }
@ -807,9 +798,7 @@ import 'programStyles';
if (showOtherText) { if (showOtherText) {
if ((options.showParentTitle || options.showParentTitleOrTitle) && !parentTitleUnderneath) { if ((options.showParentTitle || options.showParentTitleOrTitle) && !parentTitleUnderneath) {
if (isOuterFooter && item.Type === 'Episode' && item.SeriesName) { if (isOuterFooter && item.Type === 'Episode' && item.SeriesName) {
if (item.SeriesId) { if (item.SeriesId) {
lines.push(getTextActionButton({ lines.push(getTextActionButton({
Id: item.SeriesId, Id: item.SeriesId,
@ -822,15 +811,12 @@ import 'programStyles';
lines.push(item.SeriesName); lines.push(item.SeriesName);
} }
} else { } else {
if (isUsingLiveTvNaming(item)) { if (isUsingLiveTvNaming(item)) {
lines.push(item.Name); lines.push(item.Name);
if (!item.EpisodeTitle) { if (!item.EpisodeTitle) {
titleAdded = true; titleAdded = true;
} }
} else { } else {
const parentTitle = item.SeriesName || item.Series || item.Album || item.AlbumArtist || ''; const parentTitle = item.SeriesName || item.Series || item.Album || item.AlbumArtist || '';
@ -848,7 +834,6 @@ import 'programStyles';
} }
if (showMediaTitle) { if (showMediaTitle) {
const name = options.showTitle === 'auto' && !item.IsFolder && item.MediaType === 'Photo' ? '' : itemHelper.getDisplayName(item, { const name = options.showTitle === 'auto' && !item.IsFolder && item.MediaType === 'Photo' ? '' : itemHelper.getDisplayName(item, {
includeParentInfo: options.includeParentInfoInTitle includeParentInfo: options.includeParentInfoInTitle
}); });
@ -865,7 +850,6 @@ import 'programStyles';
if (showOtherText) { if (showOtherText) {
if (options.showParentTitle && parentTitleUnderneath) { if (options.showParentTitle && parentTitleUnderneath) {
if (isOuterFooter && item.AlbumArtists && item.AlbumArtists.length) { if (isOuterFooter && item.AlbumArtists && item.AlbumArtists.length) {
item.AlbumArtists[0].Type = 'MusicArtist'; item.AlbumArtists[0].Type = 'MusicArtist';
item.AlbumArtists[0].IsFolder = true; item.AlbumArtists[0].IsFolder = true;
@ -899,7 +883,6 @@ import 'programStyles';
} }
if (options.showPremiereDate) { if (options.showPremiereDate) {
if (item.PremiereDate) { if (item.PremiereDate) {
try { try {
lines.push(datetime.toLocaleDateString( lines.push(datetime.toLocaleDateString(
@ -908,7 +891,6 @@ import 'programStyles';
)); ));
} catch (err) { } catch (err) {
lines.push(''); lines.push('');
} }
} else { } else {
lines.push(''); lines.push('');
@ -916,14 +898,10 @@ import 'programStyles';
} }
if (options.showYear || options.showSeriesYear) { if (options.showYear || options.showSeriesYear) {
if (item.Type === 'Series') { if (item.Type === 'Series') {
if (item.Status === 'Continuing') { if (item.Status === 'Continuing') {
lines.push(globalize.translate('SeriesYearToPresent', item.ProductionYear || '')); lines.push(globalize.translate('SeriesYearToPresent', item.ProductionYear || ''));
} else { } else {
if (item.EndDate && item.ProductionYear) { if (item.EndDate && item.ProductionYear) {
const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear(); const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
lines.push(item.ProductionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear))); lines.push(item.ProductionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear)));
@ -937,9 +915,7 @@ import 'programStyles';
} }
if (options.showRuntime) { if (options.showRuntime) {
if (item.RunTimeTicks) { if (item.RunTimeTicks) {
lines.push(datetime.getDisplayRunningTime(item.RunTimeTicks)); lines.push(datetime.getDisplayRunningTime(item.RunTimeTicks));
} else { } else {
lines.push(''); lines.push('');
@ -947,14 +923,11 @@ import 'programStyles';
} }
if (options.showAirTime) { if (options.showAirTime) {
lines.push(getAirTimeText(item, options.showAirDateTime, options.showAirEndTime) || ''); lines.push(getAirTimeText(item, options.showAirDateTime, options.showAirEndTime) || '');
} }
if (options.showChannelName) { if (options.showChannelName) {
if (item.ChannelId) { if (item.ChannelId) {
lines.push(getTextActionButton({ lines.push(getTextActionButton({
Id: item.ChannelId, Id: item.ChannelId,
@ -971,7 +944,6 @@ import 'programStyles';
} }
if (options.showCurrentProgram && item.Type === 'TvChannel') { if (options.showCurrentProgram && item.Type === 'TvChannel') {
if (item.CurrentProgram) { if (item.CurrentProgram) {
lines.push(item.CurrentProgram.Name); lines.push(item.CurrentProgram.Name);
} else { } else {
@ -980,7 +952,6 @@ import 'programStyles';
} }
if (options.showCurrentProgramTime && item.Type === 'TvChannel') { if (options.showCurrentProgramTime && item.Type === 'TvChannel') {
if (item.CurrentProgram) { if (item.CurrentProgram) {
lines.push(getAirTimeText(item.CurrentProgram, false, true) || ''); lines.push(getAirTimeText(item.CurrentProgram, false, true) || '');
} else { } else {
@ -990,7 +961,6 @@ import 'programStyles';
if (options.showSeriesTimerTime) { if (options.showSeriesTimerTime) {
if (item.RecordAnyTime) { if (item.RecordAnyTime) {
lines.push(globalize.translate('Anytime')); lines.push(globalize.translate('Anytime'));
} else { } else {
lines.push(datetime.getDisplayTime(item.StartDate)); lines.push(datetime.getDisplayTime(item.StartDate));
@ -1025,7 +995,6 @@ import 'programStyles';
} }
if (html) { if (html) {
if (!isOuterFooter || logoUrl || options.cardLayout) { if (!isOuterFooter || logoUrl || options.cardLayout) {
html = '<div class="' + footerClass + '">' + html; html = '<div class="' + footerClass + '">' + html;
@ -1071,27 +1040,21 @@ import 'programStyles';
let childText; let childText;
if (item.Type === 'Playlist') { if (item.Type === 'Playlist') {
childText = ''; childText = '';
if (item.RunTimeTicks) { if (item.RunTimeTicks) {
let minutes = item.RunTimeTicks / 600000000; let minutes = item.RunTimeTicks / 600000000;
minutes = minutes || 1; minutes = minutes || 1;
childText += globalize.translate('ValueMinutes', Math.round(minutes)); childText += globalize.translate('ValueMinutes', Math.round(minutes));
} else { } else {
childText += globalize.translate('ValueMinutes', 0); childText += globalize.translate('ValueMinutes', 0);
} }
counts.push(childText); counts.push(childText);
} else if (item.Type === 'Genre' || item.Type === 'Studio') { } else if (item.Type === 'Genre' || item.Type === 'Studio') {
if (item.MovieCount) { if (item.MovieCount) {
childText = item.MovieCount === 1 ? childText = item.MovieCount === 1 ?
globalize.translate('ValueOneMovie') : globalize.translate('ValueOneMovie') :
globalize.translate('ValueMovieCount', item.MovieCount); globalize.translate('ValueMovieCount', item.MovieCount);
@ -1100,7 +1063,6 @@ import 'programStyles';
} }
if (item.SeriesCount) { if (item.SeriesCount) {
childText = item.SeriesCount === 1 ? childText = item.SeriesCount === 1 ?
globalize.translate('ValueOneSeries') : globalize.translate('ValueOneSeries') :
globalize.translate('ValueSeriesCount', item.SeriesCount); globalize.translate('ValueSeriesCount', item.SeriesCount);
@ -1108,18 +1070,14 @@ import 'programStyles';
counts.push(childText); counts.push(childText);
} }
if (item.EpisodeCount) { if (item.EpisodeCount) {
childText = item.EpisodeCount === 1 ? childText = item.EpisodeCount === 1 ?
globalize.translate('ValueOneEpisode') : globalize.translate('ValueOneEpisode') :
globalize.translate('ValueEpisodeCount', item.EpisodeCount); globalize.translate('ValueEpisodeCount', item.EpisodeCount);
counts.push(childText); counts.push(childText);
} }
} else if (item.Type === 'MusicGenre' || options.context === 'MusicArtist') { } else if (item.Type === 'MusicGenre' || options.context === 'MusicArtist') {
if (item.AlbumCount) { if (item.AlbumCount) {
childText = item.AlbumCount === 1 ? childText = item.AlbumCount === 1 ?
globalize.translate('ValueOneAlbum') : globalize.translate('ValueOneAlbum') :
globalize.translate('ValueAlbumCount', item.AlbumCount); globalize.translate('ValueAlbumCount', item.AlbumCount);
@ -1127,7 +1085,6 @@ import 'programStyles';
counts.push(childText); counts.push(childText);
} }
if (item.SongCount) { if (item.SongCount) {
childText = item.SongCount === 1 ? childText = item.SongCount === 1 ?
globalize.translate('ValueOneSong') : globalize.translate('ValueOneSong') :
globalize.translate('ValueSongCount', item.SongCount); globalize.translate('ValueSongCount', item.SongCount);
@ -1135,16 +1092,13 @@ import 'programStyles';
counts.push(childText); counts.push(childText);
} }
if (item.MusicVideoCount) { if (item.MusicVideoCount) {
childText = item.MusicVideoCount === 1 ? childText = item.MusicVideoCount === 1 ?
globalize.translate('ValueOneMusicVideo') : globalize.translate('ValueOneMusicVideo') :
globalize.translate('ValueMusicVideoCount', item.MusicVideoCount); globalize.translate('ValueMusicVideoCount', item.MusicVideoCount);
counts.push(childText); counts.push(childText);
} }
} else if (item.Type === 'Series') { } else if (item.Type === 'Series') {
childText = item.RecursiveItemCount === 1 ? childText = item.RecursiveItemCount === 1 ?
globalize.translate('ValueOneEpisode') : globalize.translate('ValueOneEpisode') :
globalize.translate('ValueEpisodeCount', item.RecursiveItemCount); globalize.translate('ValueEpisodeCount', item.RecursiveItemCount);
@ -1160,10 +1114,11 @@ import 'programStyles';
/** /**
* Imports the refresh indicator element. * Imports the refresh indicator element.
*/ */
function requireRefreshIndicator() { function importRefreshIndicator() {
if (!refreshIndicatorLoaded) { if (!refreshIndicatorLoaded) {
refreshIndicatorLoaded = true; refreshIndicatorLoaded = true;
require(['emby-itemrefreshindicator']); /* eslint-disable-next-line no-unused-expressions */
import('emby-itemrefreshindicator');
} }
} }
@ -1197,13 +1152,11 @@ import 'programStyles';
let shape = options.shape; let shape = options.shape;
if (shape === 'mixed') { if (shape === 'mixed') {
shape = null; shape = null;
const primaryImageAspectRatio = item.PrimaryImageAspectRatio; const primaryImageAspectRatio = item.PrimaryImageAspectRatio;
if (primaryImageAspectRatio) { if (primaryImageAspectRatio) {
if (primaryImageAspectRatio >= 1.33) { if (primaryImageAspectRatio >= 1.33) {
shape = 'mixedBackdrop'; shape = 'mixedBackdrop';
} else if (primaryImageAspectRatio > 0.71) { } else if (primaryImageAspectRatio > 0.71) {
@ -1295,7 +1248,6 @@ import 'programStyles';
} }
if (overlayText) { if (overlayText) {
logoUrl = null; logoUrl = null;
footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter'; footerCssClass = progressHtml ? 'innerCardFooter fullInnerCardFooter' : 'innerCardFooter';
@ -1404,7 +1356,6 @@ import 'programStyles';
indicatorsHtml += indicators.getTypeIndicator(item); indicatorsHtml += indicators.getTypeIndicator(item);
if (options.showGroupCount) { if (options.showGroupCount) {
indicatorsHtml += indicators.getChildCountIndicatorHtml(item, { indicatorsHtml += indicators.getChildCountIndicatorHtml(item, {
minCount: 1 minCount: 1
}); });
@ -1415,7 +1366,7 @@ import 'programStyles';
if (item.Type === 'CollectionFolder' || item.CollectionType) { if (item.Type === 'CollectionFolder' || item.CollectionType) {
const refreshClass = item.RefreshProgress ? '' : ' class="hide"'; const refreshClass = item.RefreshProgress ? '' : ' class="hide"';
indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>'; indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>';
requireRefreshIndicator(); importRefreshIndicator();
} }
if (indicatorsHtml) { if (indicatorsHtml) {
@ -1498,15 +1449,16 @@ import 'programStyles';
const userData = item.UserData || {}; const userData = item.UserData || {};
if (itemHelper.canMarkPlayed(item)) { if (itemHelper.canMarkPlayed(item)) {
require(['emby-playstatebutton']); /* eslint-disable-next-line no-unused-expressions */
import('emby-playstatebutton');
html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check"></span></button>'; html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check"></span></button>';
} }
if (itemHelper.canRate(item)) { if (itemHelper.canRate(item)) {
const likes = userData.Likes == null ? '' : userData.Likes; const likes = userData.Likes == null ? '' : userData.Likes;
require(['emby-ratingbutton']); /* eslint-disable-next-line no-unused-expressions */
import('emby-ratingbutton');
html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite"></span></button>'; html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite"></span></button>';
} }
@ -1583,7 +1535,6 @@ import 'programStyles';
const html = buildCardsHtmlInternal(items, options); const html = buildCardsHtmlInternal(items, options);
if (html) { if (html) {
if (options.itemsContainer.cardBuilderHtml !== html) { if (options.itemsContainer.cardBuilderHtml !== html) {
options.itemsContainer.innerHTML = html; options.itemsContainer.innerHTML = html;
@ -1596,7 +1547,6 @@ import 'programStyles';
imageLoader.lazyChildren(options.itemsContainer); imageLoader.lazyChildren(options.itemsContainer);
} else { } else {
options.itemsContainer.innerHTML = html; options.itemsContainer.innerHTML = html;
options.itemsContainer.cardBuilderHtml = null; options.itemsContainer.cardBuilderHtml = null;
} }
@ -1620,7 +1570,6 @@ import 'programStyles';
indicatorsElem = card.querySelector('.cardIndicators'); indicatorsElem = card.querySelector('.cardIndicators');
if (!indicatorsElem) { if (!indicatorsElem) {
const cardImageContainer = card.querySelector('.cardImageContainer'); const cardImageContainer = card.querySelector('.cardImageContainer');
indicatorsElem = document.createElement('div'); indicatorsElem = document.createElement('div');
indicatorsElem.classList.add('cardIndicators'); indicatorsElem.classList.add('cardIndicators');
@ -1644,11 +1593,9 @@ import 'programStyles';
let itemProgressBar = null; let itemProgressBar = null;
if (userData.Played) { if (userData.Played) {
playedIndicator = card.querySelector('.playedIndicator'); playedIndicator = card.querySelector('.playedIndicator');
if (!playedIndicator) { if (!playedIndicator) {
playedIndicator = document.createElement('div'); playedIndicator = document.createElement('div');
playedIndicator.classList.add('playedIndicator'); playedIndicator.classList.add('playedIndicator');
playedIndicator.classList.add('indicator'); playedIndicator.classList.add('indicator');
@ -1657,10 +1604,8 @@ import 'programStyles';
} }
playedIndicator.innerHTML = '<span class="material-icons indicatorIcon check"></span>'; playedIndicator.innerHTML = '<span class="material-icons indicatorIcon check"></span>';
} else { } else {
playedIndicator = card.querySelector('.playedIndicator'); playedIndicator = card.querySelector('.playedIndicator');
if (playedIndicator) { if (playedIndicator) {
playedIndicator.parentNode.removeChild(playedIndicator); playedIndicator.parentNode.removeChild(playedIndicator);
} }
} }
@ -1668,7 +1613,6 @@ import 'programStyles';
countIndicator = card.querySelector('.countIndicator'); countIndicator = card.querySelector('.countIndicator');
if (!countIndicator) { if (!countIndicator) {
countIndicator = document.createElement('div'); countIndicator = document.createElement('div');
countIndicator.classList.add('countIndicator'); countIndicator.classList.add('countIndicator');
indicatorsElem = ensureIndicators(card, indicatorsElem); indicatorsElem = ensureIndicators(card, indicatorsElem);
@ -1676,10 +1620,8 @@ import 'programStyles';
} }
countIndicator.innerHTML = userData.UnplayedItemCount; countIndicator.innerHTML = userData.UnplayedItemCount;
} else if (enableCountIndicator) { } else if (enableCountIndicator) {
countIndicator = card.querySelector('.countIndicator'); countIndicator = card.querySelector('.countIndicator');
if (countIndicator) { if (countIndicator) {
countIndicator.parentNode.removeChild(countIndicator); countIndicator.parentNode.removeChild(countIndicator);
} }
} }
@ -1691,7 +1633,6 @@ import 'programStyles';
}); });
if (progressHtml) { if (progressHtml) {
itemProgressBar = card.querySelector('.itemProgressBar'); itemProgressBar = card.querySelector('.itemProgressBar');
if (!itemProgressBar) { if (!itemProgressBar) {
@ -1710,7 +1651,6 @@ import 'programStyles';
itemProgressBar.innerHTML = progressHtml; itemProgressBar.innerHTML = progressHtml;
} else { } else {
itemProgressBar = card.querySelector('.itemProgressBar'); itemProgressBar = card.querySelector('.itemProgressBar');
if (itemProgressBar) { if (itemProgressBar) {
itemProgressBar.parentNode.removeChild(itemProgressBar); itemProgressBar.parentNode.removeChild(itemProgressBar);

7
src/components/cardbuilder/chaptercardbuilder.js
View file

@ -14,7 +14,6 @@ import browser from 'browser';
const enableFocusTransform = !browser.slow && !browser.edge; const enableFocusTransform = !browser.slow && !browser.edge;
function buildChapterCardsHtml(item, chapters, options) { function buildChapterCardsHtml(item, chapters, options) {
// TODO move card creation code to Card component // TODO move card creation code to Card component
let className = 'card itemAction chapterCard'; let className = 'card itemAction chapterCard';
@ -35,7 +34,6 @@ import browser from 'browser';
let shape = (options.backdropShape || 'backdrop'); let shape = (options.backdropShape || 'backdrop');
if (videoStream.Width && videoStream.Height) { if (videoStream.Width && videoStream.Height) {
if ((videoStream.Width / videoStream.Height) <= 1.2) { if ((videoStream.Width / videoStream.Height) <= 1.2) {
shape = (options.squareShape || 'square'); shape = (options.squareShape || 'square');
} }
@ -53,7 +51,6 @@ import browser from 'browser';
const apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
for (let i = 0, length = chapters.length; i < length; i++) { for (let i = 0, length = chapters.length; i < length; i++) {
if (options.rows && itemsInRow === 0) { if (options.rows && itemsInRow === 0) {
html += '<div class="cardColumn">'; html += '<div class="cardColumn">';
} }
@ -73,9 +70,7 @@ import browser from 'browser';
} }
function getImgUrl({Id}, {ImageTag}, index, maxWidth, apiClient) { function getImgUrl({Id}, {ImageTag}, index, maxWidth, apiClient) {
if (ImageTag) { if (ImageTag) {
return apiClient.getScaledImageUrl(Id, { return apiClient.getScaledImageUrl(Id, {
maxWidth: maxWidth * 2, maxWidth: maxWidth * 2,
@ -89,7 +84,6 @@ import browser from 'browser';
} }
function buildChapterCard(item, apiClient, chapter, index, {width, coverImage}, className, shape) { function buildChapterCard(item, apiClient, chapter, index, {width, coverImage}, className, shape) {
const imgUrl = getImgUrl(item, chapter, index, width || 400, apiClient); const imgUrl = getImgUrl(item, chapter, index, width || 400, apiClient);
let cardImageContainerClass = 'cardContent cardContent-shadow cardImageContainer chapterCardImageContainer'; let cardImageContainerClass = 'cardContent cardContent-shadow cardImageContainer chapterCardImageContainer';
@ -116,7 +110,6 @@ import browser from 'browser';
} }
export function buildChapterCards(item, chapters, options) { export function buildChapterCards(item, chapters, options) {
if (options.parentContainer) { if (options.parentContainer) {
// Abort if the container has been disposed // Abort if the container has been disposed
if (!document.body.contains(options.parentContainer)) { if (!document.body.contains(options.parentContainer)) {

1
src/components/cardbuilder/peoplecardbuilder.js
View file

@ -8,7 +8,6 @@
import cardBuilder from 'cardBuilder'; import cardBuilder from 'cardBuilder';
export function buildPeopleCards(items, options) { export function buildPeopleCards(items, options) {
options = Object.assign(options || {}, { options = Object.assign(options || {}, {
cardLayout: false, cardLayout: false,
centerText: true, centerText: true,

74
src/components/channelMapper/channelMapper.js
View file

@ -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) { import dom from 'dom';
'use strict'; 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) { function mapChannel(button, channelId, providerChannelId) {
loading.show(); loading.show();
var providerId = options.providerId; const providerId = options.providerId;
connectionManager.getApiClient(options.serverId).ajax({ connectionManager.getApiClient(options.serverId).ajax({
type: 'POST', type: 'POST',
url: ApiClient.getUrl('LiveTv/ChannelMappings'), url: ApiClient.getUrl('LiveTv/ChannelMappings'),
@ -14,8 +25,8 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act
providerChannelId: providerChannelId providerChannelId: providerChannelId
}, },
dataType: 'json' dataType: 'json'
}).then(function (mapping) { }).then(mapping => {
var listItem = dom.parentWithClass(button, 'listItem'); const listItem = dom.parentWithClass(button, 'listItem');
button.setAttribute('data-providerid', mapping.ProviderChannelId); button.setAttribute('data-providerid', mapping.ProviderChannelId);
listItem.querySelector('.secondary').innerHTML = getMappingSecondaryName(mapping, currentMappingOptions.ProviderName); listItem.querySelector('.secondary').innerHTML = getMappingSecondaryName(mapping, currentMappingOptions.ProviderName);
loading.hide(); loading.hide();
@ -23,42 +34,42 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act
} }
function onChannelsElementClick(e) { function onChannelsElementClick(e) {
var btnMap = dom.parentWithClass(e.target, 'btnMap'); const btnMap = dom.parentWithClass(e.target, 'btnMap');
if (btnMap) { if (btnMap) {
var channelId = btnMap.getAttribute('data-id'); const channelId = btnMap.getAttribute('data-id');
var providerChannelId = btnMap.getAttribute('data-providerid'); const providerChannelId = btnMap.getAttribute('data-providerid');
var menuItems = currentMappingOptions.ProviderChannels.map(function (m) { const menuItems = currentMappingOptions.ProviderChannels.map(m => {
return { return {
name: m.Name, name: m.Name,
id: m.Id, id: m.Id,
selected: m.Id.toLowerCase() === providerChannelId.toLowerCase() selected: m.Id.toLowerCase() === providerChannelId.toLowerCase()
}; };
}).sort(function (a, b) { }).sort((a, b) => {
return a.name.localeCompare(b.name); return a.name.localeCompare(b.name);
}); });
actionsheet.show({ actionsheet.show({
positionTo: btnMap, positionTo: btnMap,
items: menuItems items: menuItems
}).then(function (newChannelId) { }).then(newChannelId => {
mapChannel(btnMap, channelId, newChannelId); mapChannel(btnMap, channelId, newChannelId);
}); });
} }
} }
function getChannelMappingOptions(serverId, providerId) { function getChannelMappingOptions(serverId, providerId) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return apiClient.getJSON(apiClient.getUrl('LiveTv/ChannelMappingOptions', { return apiClient.getJSON(apiClient.getUrl('LiveTv/ChannelMappingOptions', {
providerId: providerId providerId: providerId
})); }));
} }
function getMappingSecondaryName(mapping, providerName) { function getMappingSecondaryName(mapping, providerName) {
return (mapping.ProviderChannelName || '') + ' - ' + providerName; return `${mapping.ProviderChannelName || ''} - ${providerName}`;
} }
function getTunerChannelHtml(channel, providerName) { function getTunerChannelHtml(channel, providerName) {
var html = ''; let html = '';
html += '<div class="listItem">'; html += '<div class="listItem">';
html += '<span class="material-icons listItemIcon dvr"></span>'; html += '<span class="material-icons listItemIcon dvr"></span>';
html += '<div class="listItemBody two-line">'; html += '<div class="listItemBody two-line">';
@ -73,16 +84,16 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
html += '<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="' + channel.Id + '" data-providerid="' + channel.ProviderChannelId + '"><span class="material-icons mode_edit"></span></button>'; html += `<button class="btnMap autoSize" is="paper-icon-button-light" type="button" data-id="${channel.Id}" data-providerid="${channel.ProviderChannelId}"><span class="material-icons mode_edit"></span></button>`;
return html += '</div>'; return html += '</div>';
} }
function getEditorHtml() { function getEditorHtml() {
var html = ''; let html = '';
html += '<div class="formDialogContent smoothScrollY">'; html += '<div class="formDialogContent smoothScrollY">';
html += '<div class="dialogContentInner dialog-content-centered">'; html += '<div class="dialogContentInner dialog-content-centered">';
html += '<form style="margin:auto;">'; html += '<form style="margin:auto;">';
html += '<h1>' + globalize.translate('HeaderChannels') + '</h1>'; html += `<h1>${globalize.translate('HeaderChannels')}</h1>`;
html += '<div class="channels paperList">'; html += '<div class="channels paperList">';
html += '</div>'; html += '</div>';
html += '</form>'; html += '</form>';
@ -91,30 +102,29 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act
} }
function initEditor(dlg, options) { function initEditor(dlg, options) {
getChannelMappingOptions(options.serverId, options.providerId).then(function (result) { getChannelMappingOptions(options.serverId, options.providerId).then(result => {
currentMappingOptions = result; currentMappingOptions = result;
var channelsElement = dlg.querySelector('.channels'); const channelsElement = dlg.querySelector('.channels');
channelsElement.innerHTML = result.TunerChannels.map(function (channel) { channelsElement.innerHTML = result.TunerChannels.map(channel => {
return getTunerChannelHtml(channel, result.ProviderName); return getTunerChannelHtml(channel, result.ProviderName);
}).join(''); }).join('');
channelsElement.addEventListener('click', onChannelsElementClick); channelsElement.addEventListener('click', onChannelsElementClick);
}); });
} }
var currentMappingOptions; let currentMappingOptions;
var self = this;
self.show = function () { this.show = () => {
var dialogOptions = { const dialogOptions = {
removeOnClose: true removeOnClose: true
}; };
dialogOptions.size = 'small'; dialogOptions.size = 'small';
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('ui-body-a'); dlg.classList.add('ui-body-a');
dlg.classList.add('background-theme-a'); dlg.classList.add('background-theme-a');
var html = ''; let html = '';
var title = globalize.translate('MapChannels'); const title = globalize.translate('MapChannels');
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>'; html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">'; html += '<h3 class="formDialogHeaderTitle">';
@ -124,13 +134,13 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act
html += getEditorHtml(); html += getEditorHtml();
dlg.innerHTML = html; dlg.innerHTML = html;
initEditor(dlg, options); initEditor(dlg, options);
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
return new Promise(function (resolve, reject) { return new Promise(resolve => {
dlg.addEventListener('close', resolve); dlg.addEventListener('close', resolve);
dialogHelper.open(dlg); dialogHelper.open(dlg);
}); });
}; };
}; }
}); }

119
src/components/collectionEditor/collectionEditor.js
View file

@ -1,16 +1,31 @@
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) { import dom from 'dom';
'use strict'; import dialogHelper from 'dialogHelper';
import loading from 'loading';
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) { function onSubmit(e) {
loading.show(); 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) { if (collectionId) {
addToCollection(apiClient, panel, collectionId); addToCollection(apiClient, panel, collectionId);
@ -23,8 +38,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
} }
function createCollection(apiClient, dlg) { function createCollection(apiClient, dlg) {
const url = apiClient.getUrl('Collections', {
var url = apiClient.getUrl('Collections', {
Name: dlg.querySelector('#txtNewCollectionName').value, Name: dlg.querySelector('#txtNewCollectionName').value,
IsLocked: !dlg.querySelector('#chkEnableInternetMetadata').checked, IsLocked: !dlg.querySelector('#chkEnableInternetMetadata').checked,
@ -36,27 +50,23 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
url: url, url: url,
dataType: 'json' dataType: 'json'
}).then(function (result) { }).then(result => {
loading.hide(); loading.hide();
var id = result.Id; const id = result.Id;
dlg.submitted = true; dlg.submitted = true;
dialogHelper.close(dlg); dialogHelper.close(dlg);
redirectToCollection(apiClient, id); redirectToCollection(apiClient, id);
}); });
} }
function redirectToCollection(apiClient, id) { function redirectToCollection(apiClient, id) {
appRouter.showItem(id, apiClient.serverId()); appRouter.showItem(id, apiClient.serverId());
} }
function addToCollection(apiClient, dlg, id) { function addToCollection(apiClient, dlg, id) {
const url = apiClient.getUrl(`Collections/${id}/Items`, {
var url = apiClient.getUrl('Collections/' + id + '/Items', {
Ids: dlg.querySelector('.fldSelectedItemIds').value || '' Ids: dlg.querySelector('.fldSelectedItemIds').value || ''
}); });
@ -65,14 +75,13 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
type: 'POST', type: 'POST',
url: url url: url
}).then(function () { }).then(() => {
loading.hide(); loading.hide();
dlg.submitted = true; dlg.submitted = true;
dialogHelper.close(dlg); dialogHelper.close(dlg);
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageItemsAdded')); toast(globalize.translate('MessageItemsAdded'));
}); });
}); });
@ -83,14 +92,13 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
} }
function populateCollections(panel) { function populateCollections(panel) {
loading.show(); loading.show();
var select = panel.querySelector('#selectCollectionToAddTo'); const select = panel.querySelector('#selectCollectionToAddTo');
panel.querySelector('.newCollectionInfo').classList.add('hide'); panel.querySelector('.newCollectionInfo').classList.add('hide');
var options = { const options = {
Recursive: true, Recursive: true,
IncludeItemTypes: 'BoxSet', IncludeItemTypes: 'BoxSet',
@ -98,16 +106,14 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
EnableTotalRecordCount: false EnableTotalRecordCount: false
}; };
var apiClient = connectionManager.getApiClient(currentServerId); const apiClient = connectionManager.getApiClient(currentServerId);
apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) { apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => {
let html = '';
var html = ''; html += `<option value="">${globalize.translate('OptionNew')}</option>`;
html += '<option value="">' + globalize.translate('OptionNew') + '</option>'; html += result.Items.map(i => {
return `<option value="${i.Id}">${i.Name}</option>`;
html += result.Items.map(function (i) {
return '<option value="' + i.Id + '">' + i.Name + '</option>';
}); });
select.innerHTML = html; select.innerHTML = html;
@ -119,8 +125,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
} }
function getEditorHtml() { function getEditorHtml() {
let html = '';
var html = '';
html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">'; html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">';
html += '<div class="dialogContentInner dialog-content-centered">'; html += '<div class="dialogContentInner dialog-content-centered">';
@ -134,27 +139,27 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
html += '<br/>'; html += '<br/>';
html += '<br/>'; html += '<br/>';
html += '<div class="selectContainer">'; html += '<div class="selectContainer">';
html += '<select is="emby-select" label="' + globalize.translate('LabelCollection') + '" id="selectCollectionToAddTo" autofocus></select>'; html += `<select is="emby-select" label="${globalize.translate('LabelCollection')}" id="selectCollectionToAddTo" autofocus></select>`;
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
html += '<div class="newCollectionInfo">'; html += '<div class="newCollectionInfo">';
html += '<div class="inputContainer">'; html += '<div class="inputContainer">';
html += '<input is="emby-input" type="text" id="txtNewCollectionName" required="required" label="' + globalize.translate('LabelName') + '" />'; html += `<input is="emby-input" type="text" id="txtNewCollectionName" required="required" label="${globalize.translate('LabelName')}" />`;
html += '<div class="fieldDescription">' + globalize.translate('NewCollectionNameExample') + '</div>'; html += `<div class="fieldDescription">${globalize.translate('NewCollectionNameExample')}</div>`;
html += '</div>'; html += '</div>';
html += '<label class="checkboxContainer">'; html += '<label class="checkboxContainer">';
html += '<input is="emby-checkbox" type="checkbox" id="chkEnableInternetMetadata" />'; html += '<input is="emby-checkbox" type="checkbox" id="chkEnableInternetMetadata" />';
html += '<span>' + globalize.translate('SearchForCollectionInternetMetadata') + '</span>'; html += `<span>${globalize.translate('SearchForCollectionInternetMetadata')}</span>`;
html += '</label>'; html += '</label>';
// newCollectionInfo // newCollectionInfo
html += '</div>'; html += '</div>';
html += '<div class="formDialogFooter">'; html += '<div class="formDialogFooter">';
html += '<button is="emby-button" type="submit" class="raised btnSubmit block formDialogFooterItem button-submit">' + globalize.translate('ButtonOk') + '</button>'; html += `<button is="emby-button" type="submit" class="raised btnSubmit block formDialogFooterItem button-submit">${globalize.translate('ButtonOk')}</button>`;
html += '</div>'; html += '</div>';
html += '<input type="hidden" class="fldSelectedItemIds" />'; html += '<input type="hidden" class="fldSelectedItemIds" />';
@ -167,7 +172,6 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
} }
function initEditor(content, items) { function initEditor(content, items) {
content.querySelector('#selectCollectionToAddTo').addEventListener('change', function () { content.querySelector('#selectCollectionToAddTo').addEventListener('change', function () {
if (this.value) { if (this.value) {
content.querySelector('.newCollectionInfo').classList.add('hide'); content.querySelector('.newCollectionInfo').classList.add('hide');
@ -188,7 +192,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
} else { } else {
content.querySelector('.fldSelectCollection').classList.add('hide'); content.querySelector('.fldSelectCollection').classList.add('hide');
var selectCollectionToAddTo = content.querySelector('#selectCollectionToAddTo'); const selectCollectionToAddTo = content.querySelector('#selectCollectionToAddTo');
selectCollectionToAddTo.innerHTML = ''; selectCollectionToAddTo.innerHTML = '';
selectCollectionToAddTo.value = ''; selectCollectionToAddTo.value = '';
triggerChange(selectCollectionToAddTo); triggerChange(selectCollectionToAddTo);
@ -196,22 +200,18 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(scrollHelper => {
var fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
function CollectionEditor() { export class showEditor {
constructor(options) {
} const items = options.items || {};
CollectionEditor.prototype.show = function (options) {
var items = options.items || {};
currentServerId = options.serverId; currentServerId = options.serverId;
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -222,12 +222,12 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
var html = ''; let html = '';
var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection'); const title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>'; html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
@ -235,10 +235,6 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
html += title; html += title;
html += '</h3>'; html += '</h3>';
if (appHost.supports('externallinks')) {
html += '<a is="emby-linkbutton" class="button-link btnHelp flex align-items-center" href="https://web.archive.org/web/20181216120305/https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;padding:.25em;" title="' + globalize.translate('Help') + '"><span class="material-icons info"></span><span style="margin-left:.25em;">' + globalize.translate('Help') + '</span></a>';
}
html += '</div>'; html += '</div>';
html += getEditorHtml(); html += getEditorHtml();
@ -247,8 +243,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
initEditor(dlg, items); initEditor(dlg, items);
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
@ -256,8 +251,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
centerFocus(dlg.querySelector('.formDialogContent'), false, true); centerFocus(dlg.querySelector('.formDialogContent'), false, true);
} }
return dialogHelper.open(dlg).then(function () { return dialogHelper.open(dlg).then(() => {
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.formDialogContent'), false, false); centerFocus(dlg.querySelector('.formDialogContent'), false, false);
} }
@ -268,7 +262,8 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
return Promise.reject(); return Promise.reject();
}); });
}; }
}
return CollectionEditor; /* eslint-enable indent */
}); export default showEditor;

24
src/components/confirm/confirm.js
View file

@ -1,13 +1,16 @@
define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) { import browser from 'browser';
'use strict'; import dialog from 'dialog';
import globalize from 'globalize';
/* eslint-disable indent */
export default (() => {
function replaceAll(str, find, replace) { function replaceAll(str, find, replace) {
return str.split(find).join(replace); return str.split(find).join(replace);
} }
if (browser.tv && window.confirm) { if (browser.tv && window.confirm) {
// Use the native confirm dialog // Use the native confirm dialog
return function (options) { return options => {
if (typeof options === 'string') { if (typeof options === 'string') {
options = { options = {
title: '', title: '',
@ -15,8 +18,8 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize)
}; };
} }
var text = replaceAll(options.text || '', '<br/>', '\n'); const text = replaceAll(options.text || '', '<br/>', '\n');
var result = confirm(text); const result = confirm(text);
if (result) { if (result) {
return Promise.resolve(); return Promise.resolve();
@ -26,8 +29,8 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize)
}; };
} else { } else {
// Use our own dialog // Use our own dialog
return function (text, title) { return (text, title) => {
var options; let options;
if (typeof text === 'string') { if (typeof text === 'string') {
options = { options = {
title: title, title: title,
@ -37,7 +40,7 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize)
options = text; options = text;
} }
var items = []; const items = [];
items.push({ items.push({
name: options.cancelText || globalize.translate('ButtonCancel'), name: options.cancelText || globalize.translate('ButtonCancel'),
@ -53,7 +56,7 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize)
options.buttons = items; options.buttons = items;
return dialog(options).then(function (result) { return dialog.show(options).then(result => {
if (result === 'ok') { if (result === 'ok') {
return Promise.resolve(); return Promise.resolve();
} }
@ -62,4 +65,5 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize)
}); });
}; };
} }
}); })();
/* eslint-enable indent */

78
src/components/dialog/dialog.js
View file

@ -1,20 +1,30 @@
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) { import dialogHelper from 'dialogHelper';
'use strict'; 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) { function showDialog(options, template) {
const dialogOptions = {
var dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
var enableTvLayout = layoutManager.tv; const enableTvLayout = layoutManager.tv;
if (enableTvLayout) { if (enableTvLayout) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
@ -22,7 +32,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
dlg.classList.add('align-items-center'); dlg.classList.add('align-items-center');
dlg.classList.add('justify-content-center'); dlg.classList.add('justify-content-center');
var formDialogContent = dlg.querySelector('.formDialogContent'); const formDialogContent = dlg.querySelector('.formDialogContent');
formDialogContent.classList.add('no-grow'); formDialogContent.classList.add('no-grow');
if (enableTvLayout) { if (enableTvLayout) {
@ -30,41 +40,36 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
formDialogContent.style['max-height'] = '60%'; formDialogContent.style['max-height'] = '60%';
scrollHelper.centerFocus.on(formDialogContent, false); scrollHelper.centerFocus.on(formDialogContent, false);
} else { } 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'); dlg.classList.add('dialog-fullscreen-lowres');
} }
//dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
// dialogHelper.close(dlg);
//});
if (options.title) { if (options.title) {
dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.title || ''; dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.title || '';
} else { } else {
dlg.querySelector('.formDialogHeaderTitle').classList.add('hide'); dlg.querySelector('.formDialogHeaderTitle').classList.add('hide');
} }
var displayText = options.html || options.text || ''; const displayText = options.html || options.text || '';
dlg.querySelector('.text').innerHTML = displayText; dlg.querySelector('.text').innerHTML = displayText;
if (!displayText) { if (!displayText) {
dlg.querySelector('.dialogContentInner').classList.add('hide'); dlg.querySelector('.dialogContentInner').classList.add('hide');
} }
var i; let i;
var length; let length;
var html = ''; let html = '';
var hasDescriptions = false; let hasDescriptions = false;
for (i = 0, length = options.buttons.length; i < length; i++) { for (i = 0, length = options.buttons.length; i < length; i++) {
const item = options.buttons[i];
const autoFocus = i === 0 ? ' autofocus' : '';
var item = options.buttons[i]; let buttonClass = 'btnOption raised formDialogFooterItem formDialogFooterItem-autosize';
var autoFocus = i === 0 ? ' autofocus' : '';
var buttonClass = 'btnOption raised formDialogFooterItem formDialogFooterItem-autosize';
if (item.type) { if (item.type) {
buttonClass += ' button-' + item.type; buttonClass += ` button-${item.type}`;
} }
if (item.description) { if (item.description) {
@ -75,10 +80,10 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
buttonClass += ' formDialogFooterItem-vertical formDialogFooterItem-nomarginbottom'; buttonClass += ' formDialogFooterItem-vertical formDialogFooterItem-nomarginbottom';
} }
html += '<button is="emby-button" type="button" class="' + buttonClass + '" data-id="' + item.id + '"' + autoFocus + '>' + item.name + '</button>'; html += `<button is="emby-button" type="button" class="${buttonClass}" data-id="${item.id}"${autoFocus}>${item.name}</button>`;
if (item.description) { if (item.description) {
html += '<div class="formDialogFooterItem formDialogFooterItem-autosize fieldDescription" style="margin-top:.25em!important;margin-bottom:1.25em!important;">' + item.description + '</div>'; html += `<div class="formDialogFooterItem formDialogFooterItem-autosize fieldDescription" style="margin-top:.25em!important;margin-bottom:1.25em!important;">${item.description}</div>`;
} }
} }
@ -88,19 +93,18 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
dlg.querySelector('.formDialogFooter').classList.add('formDialogFooter-vertical'); dlg.querySelector('.formDialogFooter').classList.add('formDialogFooter-vertical');
} }
var dialogResult; let dialogResult;
function onButtonClick() { function onButtonClick() {
dialogResult = this.getAttribute('data-id'); dialogResult = this.getAttribute('data-id');
dialogHelper.close(dlg); dialogHelper.close(dlg);
} }
var buttons = dlg.querySelectorAll('.btnOption'); const buttons = dlg.querySelectorAll('.btnOption');
for (i = 0, length = buttons.length; i < length; i++) { for (i = 0, length = buttons.length; i < length; i++) {
buttons[i].addEventListener('click', onButtonClick); buttons[i].addEventListener('click', onButtonClick);
} }
return dialogHelper.open(dlg).then(function () { return dialogHelper.open(dlg).then(() => {
if (enableTvLayout) { if (enableTvLayout) {
scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false); scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
} }
@ -113,9 +117,8 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
}); });
} }
return function (text, title) { export async function show(text, title) {
let options;
var options;
if (typeof text === 'string') { if (typeof text === 'string') {
options = { options = {
title: title, title: title,
@ -125,10 +128,13 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
options = text; options = text;
} }
return new Promise(function (resolve, reject) { const { default: template } = await import('text!./dialog.template.html');
require(['text!./dialog.template.html'], function (template) { return new Promise((resolve, reject) => {
showDialog(options, template).then(resolve, reject); showDialog(options, template).then(resolve, reject);
}); });
}); }
};
}); /* eslint-enable indent */
export default {
show: show
};

146
src/components/dialogHelper/dialogHelper.js
View file

@ -1,10 +1,17 @@
define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'dom', 'css!./dialoghelper.css', 'scrollStyles'], function (appRouter, focusManager, browser, layoutManager, inputManager, dom) { import appRouter from 'appRouter';
'use strict'; 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() { function enableAnimation() {
// too slow // too slow
if (browser.tv) { if (browser.tv) {
return false; return false;
@ -14,7 +21,6 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function removeCenterFocus(dlg) { function removeCenterFocus(dlg) {
if (layoutManager.tv) { if (layoutManager.tv) {
if (dlg.classList.contains('scrollX')) { if (dlg.classList.contains('scrollX')) {
centerFocus(dlg, true, false); centerFocus(dlg, true, false);
@ -25,9 +31,8 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function tryRemoveElement(elem) { function tryRemoveElement(elem) {
var parentNode = elem.parentNode; const parentNode = elem.parentNode;
if (parentNode) { if (parentNode) {
// Seeing crashes in edge webview // Seeing crashes in edge webview
try { try {
parentNode.removeChild(elem); parentNode.removeChild(elem);
@ -38,15 +43,13 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function DialogHashHandler(dlg, hash, resolve) { function DialogHashHandler(dlg, hash, resolve) {
const self = this;
var self = this;
self.originalUrl = window.location.href; self.originalUrl = window.location.href;
var activeElement = document.activeElement; const activeElement = document.activeElement;
var removeScrollLockOnClose = false; let removeScrollLockOnClose = false;
function onHashChange(e) { function onHashChange(e) {
const isBack = self.originalUrl === window.location.href;
var isBack = self.originalUrl === window.location.href;
if (isBack || !isOpened(dlg)) { if (isBack || !isOpened(dlg)) {
window.removeEventListener('popstate', onHashChange); window.removeEventListener('popstate', onHashChange);
@ -59,7 +62,6 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function onBackCommand(e) { function onBackCommand(e) {
if (e.detail.command === 'back') { if (e.detail.command === 'back') {
self.closedByBack = true; self.closedByBack = true;
e.preventDefault(); e.preventDefault();
@ -69,7 +71,6 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function onDialogClosed() { function onDialogClosed() {
if (!isHistoryEnabled(dlg)) { if (!isHistoryEnabled(dlg)) {
inputManager.off(dlg, onBackCommand); inputManager.off(dlg, onBackCommand);
} }
@ -84,7 +85,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
if (!self.closedByBack && isHistoryEnabled(dlg)) { if (!self.closedByBack && isHistoryEnabled(dlg)) {
var state = history.state || {}; const state = history.state || {};
if (state.dialogId === hash) { if (state.dialogId === hash) {
history.back(); history.back();
} }
@ -97,7 +98,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (dlg.getAttribute('data-removeonclose') !== 'false') { if (dlg.getAttribute('data-removeonclose') !== 'false') {
removeCenterFocus(dlg); removeCenterFocus(dlg);
var dialogContainer = dlg.dialogContainer; const dialogContainer = dlg.dialogContainer;
if (dialogContainer) { if (dialogContainer) {
tryRemoveElement(dialogContainer); tryRemoveElement(dialogContainer);
dlg.dialogContainer = null; dlg.dialogContainer = null;
@ -108,7 +109,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
//resolve(); //resolve();
// if we just called history.back(), then use a timeout to allow the history events to fire first // if we just called history.back(), then use a timeout to allow the history events to fire first
setTimeout(function () { setTimeout(() => {
resolve({ resolve({
element: dlg, element: dlg,
closedByBack: self.closedByBack closedByBack: self.closedByBack
@ -118,7 +119,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
dlg.addEventListener('close', onDialogClosed); dlg.addEventListener('close', onDialogClosed);
var center = !dlg.classList.contains('dialog-fixedSize'); const center = !dlg.classList.contains('dialog-fixedSize');
if (center) { if (center) {
dlg.classList.add('centeredDialog'); dlg.classList.add('centeredDialog');
} }
@ -141,7 +142,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
animateDialogOpen(dlg); animateDialogOpen(dlg);
if (isHistoryEnabled(dlg)) { if (isHistoryEnabled(dlg)) {
appRouter.pushState({ dialogId: hash }, 'Dialog', '#' + hash); appRouter.pushState({ dialogId: hash }, 'Dialog', `#${hash}`);
window.addEventListener('popstate', onHashChange); window.addEventListener('popstate', onHashChange);
} else { } else {
@ -150,11 +151,10 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function addBackdropOverlay(dlg) { function addBackdropOverlay(dlg) {
const backdrop = document.createElement('div');
var backdrop = document.createElement('div');
backdrop.classList.add('dialogBackdrop'); backdrop.classList.add('dialogBackdrop');
var backdropParent = dlg.dialogContainer || dlg; const backdropParent = dlg.dialogContainer || dlg;
backdropParent.parentNode.insertBefore(backdrop, backdropParent); backdropParent.parentNode.insertBefore(backdrop, backdropParent);
dlg.backdrop = backdrop; dlg.backdrop = backdrop;
@ -162,7 +162,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
void backdrop.offsetWidth; void backdrop.offsetWidth;
backdrop.classList.add('dialogBackdropOpened'); backdrop.classList.add('dialogBackdropOpened');
dom.addEventListener((dlg.dialogContainer || backdrop), 'click', function (e) { dom.addEventListener((dlg.dialogContainer || backdrop), 'click', e => {
if (e.target === dlg.dialogContainer) { if (e.target === dlg.dialogContainer) {
close(dlg); close(dlg);
} }
@ -170,7 +170,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
passive: true passive: true
}); });
dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', function (e) { dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', e => {
if (e.target === dlg.dialogContainer) { if (e.target === dlg.dialogContainer) {
// Close the application dialog menu // Close the application dialog menu
close(dlg); close(dlg);
@ -184,37 +184,33 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
return dlg.getAttribute('data-history') === 'true'; return dlg.getAttribute('data-history') === 'true';
} }
function open(dlg) { export function open(dlg) {
if (globalOnOpenCallback) { if (globalOnOpenCallback) {
globalOnOpenCallback(dlg); globalOnOpenCallback(dlg);
} }
var parent = dlg.parentNode; const parent = dlg.parentNode;
if (parent) { if (parent) {
parent.removeChild(dlg); parent.removeChild(dlg);
} }
var dialogContainer = document.createElement('div'); const dialogContainer = document.createElement('div');
dialogContainer.classList.add('dialogContainer'); dialogContainer.classList.add('dialogContainer');
dialogContainer.appendChild(dlg); dialogContainer.appendChild(dlg);
dlg.dialogContainer = dialogContainer; dlg.dialogContainer = dialogContainer;
document.body.appendChild(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);
}); });
} }
function isOpened(dlg) { function isOpened(dlg) {
//return dlg.opened; //return dlg.opened;
return !dlg.classList.contains('hide'); return !dlg.classList.contains('hide');
} }
function close(dlg) { export function close(dlg) {
if (isOpened(dlg)) { if (isOpened(dlg)) {
if (isHistoryEnabled(dlg)) { if (isHistoryEnabled(dlg)) {
history.back(); history.back();
@ -225,15 +221,13 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function closeDialog(dlg) { function closeDialog(dlg) {
if (!dlg.classList.contains('hide')) { if (!dlg.classList.contains('hide')) {
dlg.dispatchEvent(new CustomEvent('closing', { dlg.dispatchEvent(new CustomEvent('closing', {
bubbles: false, bubbles: false,
cancelable: false cancelable: false
})); }));
var onAnimationFinish = function () { const onAnimationFinish = () => {
focusManager.popScope(dlg); focusManager.popScope(dlg);
dlg.classList.add('hide'); dlg.classList.add('hide');
@ -248,8 +242,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function animateDialogOpen(dlg) { function animateDialogOpen(dlg) {
const onAnimationFinish = () => {
var onAnimationFinish = function () {
focusManager.pushScope(dlg); focusManager.pushScope(dlg);
if (dlg.getAttribute('data-autofocus') === 'true') { if (dlg.getAttribute('data-autofocus') === 'true') {
@ -263,8 +256,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
}; };
if (enableAnimation()) { if (enableAnimation()) {
const onFinish = () => {
var onFinish = function () {
dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, { dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, {
once: true once: true
}); });
@ -280,27 +272,24 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function animateDialogClose(dlg, onAnimationFinish) { function animateDialogClose(dlg, onAnimationFinish) {
if (enableAnimation()) { if (enableAnimation()) {
let animated = true;
var animated = true;
switch (dlg.animationConfig.exit.name) { switch (dlg.animationConfig.exit.name) {
case 'fadeout': 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; break;
case 'scaledown': 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; break;
case 'slidedown': 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; break;
default: default:
animated = false; animated = false;
break; break;
} }
var onFinish = function () { const onFinish = () => {
dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, { dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, {
once: true once: true
}); });
@ -318,10 +307,9 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
onAnimationFinish(); onAnimationFinish();
} }
var supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style; const supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style;
function shouldLockDocumentScroll(options) { function shouldLockDocumentScroll(options) {
if (supportsOverscrollBehavior && (options.size || !browser.touch)) { if (supportsOverscrollBehavior && (options.size || !browser.touch)) {
return false; return false;
} }
@ -342,8 +330,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function removeBackdrop(dlg) { function removeBackdrop(dlg) {
const backdrop = dlg.backdrop;
var backdrop = dlg.backdrop;
if (!backdrop) { if (!backdrop) {
return; return;
@ -351,12 +338,11 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
dlg.backdrop = null; dlg.backdrop = null;
var onAnimationFinish = function () { const onAnimationFinish = () => {
tryRemoveElement(backdrop); tryRemoveElement(backdrop);
}; };
if (enableAnimation()) { if (enableAnimation()) {
backdrop.classList.remove('dialogBackdropOpened'); backdrop.classList.remove('dialogBackdropOpened');
// this is not firing animatonend // this is not firing animatonend
@ -368,20 +354,19 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(scrollHelper => {
var fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
function createDialog(options) { export function createDialog(options) {
options = options || {}; options = options || {};
// If there's no native dialog support, use a plain div // If there's no native dialog support, use a plain div
// Also not working well in samsung tizen browser, content inside not clickable // 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 // 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('focuscontainer');
dlg.classList.add('hide'); dlg.classList.add('hide');
@ -406,17 +391,17 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
dlg.setAttribute('data-autofocus', 'true'); dlg.setAttribute('data-autofocus', 'true');
} }
var defaultEntryAnimation; let defaultEntryAnimation;
var defaultExitAnimation; let defaultExitAnimation;
defaultEntryAnimation = 'scaleup'; defaultEntryAnimation = 'scaleup';
defaultExitAnimation = 'scaledown'; defaultExitAnimation = 'scaledown';
var entryAnimation = options.entryAnimation || defaultEntryAnimation; const entryAnimation = options.entryAnimation || defaultEntryAnimation;
var exitAnimation = options.exitAnimation || defaultExitAnimation; const exitAnimation = options.exitAnimation || defaultExitAnimation;
// If it's not fullscreen then lower the default animation speed to make it open really fast // 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); const entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280);
var exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220); const exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220);
dlg.animationConfig = { dlg.animationConfig = {
// scale up // scale up
@ -461,24 +446,22 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (options.size) { if (options.size) {
dlg.classList.add('dialog-fixedSize'); dlg.classList.add('dialog-fixedSize');
dlg.classList.add('dialog-' + options.size); dlg.classList.add(`dialog-${options.size}`);
} }
if (enableAnimation()) { if (enableAnimation()) {
switch (dlg.animationConfig.entry.name) { switch (dlg.animationConfig.entry.name) {
case 'fadein': case 'fadein':
dlg.style.animation = 'fadein ' + entryAnimationDuration + 'ms ease-out normal'; dlg.style.animation = `fadein ${entryAnimationDuration}ms ease-out normal`;
break; break;
case 'scaleup': case 'scaleup':
dlg.style.animation = 'scaleup ' + entryAnimationDuration + 'ms ease-out normal both'; dlg.style.animation = `scaleup ${entryAnimationDuration}ms ease-out normal both`;
break; break;
case 'slideup': case 'slideup':
dlg.style.animation = 'slideup ' + entryAnimationDuration + 'ms ease-out normal'; dlg.style.animation = `slideup ${entryAnimationDuration}ms ease-out normal`;
break; break;
case 'slidedown': case 'slidedown':
dlg.style.animation = 'slidedown ' + entryAnimationDuration + 'ms ease-out normal'; dlg.style.animation = `slidedown ${entryAnimationDuration}ms ease-out normal`;
break; break;
default: default:
break; break;
@ -488,12 +471,15 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
return dlg; return dlg;
} }
return { export function setOnOpen(val) {
globalOnOpenCallback = val;
}
/* eslint-enable indent */
export default {
open: open, open: open,
close: close, close: close,
createDialog: createDialog, createDialog: createDialog,
setOnOpen: function (val) { setOnOpen: setOnOpen
globalOnOpenCallback = val; };
}
};
});

122
src/components/directorybrowser/directorybrowser.js
View file

@ -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) { import loading from 'loading';
'use strict'; 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() { function getSystemInfo() {
return systemInfo ? Promise.resolve(systemInfo) : ApiClient.getPublicSystemInfo().then( return systemInfo ? Promise.resolve(systemInfo) : ApiClient.getPublicSystemInfo().then(
function(info) { info => {
systemInfo = info; systemInfo = info;
return info; return info;
} }
@ -21,9 +31,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
loading.show(); loading.show();
var promises = []; const promises = [];
if ('Network' === path) { if (path === 'Network') {
promises.push(ApiClient.getNetworkDevices()); promises.push(ApiClient.getNetworkDevices());
} else { } else {
if (path) { if (path) {
@ -35,10 +45,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
Promise.all(promises).then( Promise.all(promises).then(
function(responses) { responses => {
var folders = responses[0]; const folders = responses[0];
var parentPath = responses[1] || ''; const parentPath = responses[1] || '';
var html = ''; let html = '';
page.querySelector('.results').scrollTop = 0; page.querySelector('.results').scrollTop = 0;
page.querySelector('#txtDirectoryPickerPath').value = path || ''; page.querySelector('#txtDirectoryPickerPath').value = path || '';
@ -46,9 +56,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
if (path) { if (path) {
html += getItem('lnkPath lnkDirectory', '', parentPath, '...'); html += getItem('lnkPath lnkDirectory', '', parentPath, '...');
} }
for (var i = 0, length = folders.length; i < length; i++) { for (let i = 0, length = folders.length; i < length; i++) {
var folder = folders[i]; const folder = folders[i];
var cssClass = 'File' === folder.Type ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory'; const cssClass = folder.Type === 'File' ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory';
html += getItem(cssClass, folder.Type, folder.Path, folder.Name); 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; page.querySelector('.results').innerHTML = html;
loading.hide(); loading.hide();
}, function() { }, () => {
if (updatePathOnError) { if (updatePathOnError) {
page.querySelector('#txtDirectoryPickerPath').value = ''; page.querySelector('#txtDirectoryPickerPath').value = '';
page.querySelector('.results').innerHTML = ''; page.querySelector('.results').innerHTML = '';
@ -69,8 +79,8 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
function getItem(cssClass, type, path, name) { function getItem(cssClass, type, path, name) {
var html = ''; let html = '';
html += '<div class="listItem listItem-border ' + cssClass + '" data-type="' + type + '" data-path="' + path + '">'; html += `<div class="listItem listItem-border ${cssClass}" data-type="${type}" data-path="${path}">`;
html += '<div class="listItemBody" style="padding-left:0;padding-top:.5em;padding-bottom:.5em;">'; html += '<div class="listItemBody" style="padding-left:0;padding-top:.5em;padding-bottom:.5em;">';
html += '<div class="listItemBodyText">'; html += '<div class="listItemBodyText">';
html += name; html += name;
@ -82,19 +92,19 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
function getEditorHtml(options, systemInfo) { function getEditorHtml(options, systemInfo) {
var html = ''; let html = '';
html += '<div class="formDialogContent scrollY">'; html += '<div class="formDialogContent scrollY">';
html += '<div class="dialogContentInner dialog-content-centered" style="padding-top:2em;">'; html += '<div class="dialogContentInner dialog-content-centered" style="padding-top:2em;">';
if (!options.pathReadOnly) { if (!options.pathReadOnly) {
var instruction = options.instruction ? options.instruction + '<br/><br/>' : ''; const instruction = options.instruction ? `${options.instruction}<br/><br/>` : '';
html += '<div class="infoBanner" style="margin-bottom:1.5em;">'; html += '<div class="infoBanner" style="margin-bottom:1.5em;">';
html += instruction; html += instruction;
if ('bsd' === systemInfo.OperatingSystem.toLowerCase()) { if (systemInfo.OperatingSystem.toLowerCase() === 'bsd') {
html += '<br/>'; html += '<br/>';
html += '<br/>'; html += '<br/>';
html += globalize.translate('MessageDirectoryPickerBSDInstruction'); html += globalize.translate('MessageDirectoryPickerBSDInstruction');
html += '<br/>'; html += '<br/>';
} else if ('linux' === systemInfo.OperatingSystem.toLowerCase()) { } else if (systemInfo.OperatingSystem.toLowerCase() === 'linux') {
html += '<br/>'; html += '<br/>';
html += '<br/>'; html += '<br/>';
html += globalize.translate('MessageDirectoryPickerLinuxInstruction'); html += globalize.translate('MessageDirectoryPickerLinuxInstruction');
@ -105,17 +115,17 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
html += '<form style="margin:auto;">'; html += '<form style="margin:auto;">';
html += '<div class="inputContainer" style="display: flex; align-items: center;">'; html += '<div class="inputContainer" style="display: flex; align-items: center;">';
html += '<div style="flex-grow:1;">'; html += '<div style="flex-grow:1;">';
var labelKey; let labelKey;
if (options.includeFiles !== true) { if (options.includeFiles !== true) {
labelKey = 'LabelFolder'; labelKey = 'LabelFolder';
} else { } else {
labelKey = 'LabelPath'; labelKey = 'LabelPath';
} }
var readOnlyAttribute = options.pathReadOnly ? ' readonly' : ''; const readOnlyAttribute = options.pathReadOnly ? ' readonly' : '';
html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + globalize.translate(labelKey) + '"/>'; html += `<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ${readOnlyAttribute} label="${globalize.translate(labelKey)}"/>`;
html += '</div>'; html += '</div>';
if (!readOnlyAttribute) { if (!readOnlyAttribute) {
html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="' + globalize.translate('ButtonRefresh') + '"><span class="material-icons search"></span></button>'; html += `<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="${globalize.translate('ButtonRefresh')}"><span class="material-icons search"></span></button>`;
} }
html += '</div>'; html += '</div>';
if (!readOnlyAttribute) { if (!readOnlyAttribute) {
@ -123,14 +133,14 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
if (options.enableNetworkSharePath) { if (options.enableNetworkSharePath) {
html += '<div class="inputContainer" style="margin-top:2em;">'; html += '<div class="inputContainer" style="margin-top:2em;">';
html += '<input is="emby-input" id="txtNetworkPath" type="text" label="' + globalize.translate('LabelOptionalNetworkPath') + '"/>'; html += `<input is="emby-input" id="txtNetworkPath" type="text" label="${globalize.translate('LabelOptionalNetworkPath')}"/>`;
html += '<div class="fieldDescription">'; html += '<div class="fieldDescription">';
html += globalize.translate('LabelOptionalNetworkPathHelp', '<b>\\\\server</b>', '<b>\\\\192.168.1.101</b>'); html += globalize.translate('LabelOptionalNetworkPathHelp', '<b>\\\\server</b>', '<b>\\\\192.168.1.101</b>');
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
} }
html += '<div class="formDialogFooter">'; html += '<div class="formDialogFooter">';
html += '<button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">' + globalize.translate('ButtonOk') + '</button>'; html += `<button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">${globalize.translate('ButtonOk')}</button>`;
html += '</div>'; html += '</div>';
html += '</form>'; html += '</form>';
html += '</div>'; html += '</div>';
@ -147,7 +157,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
function alertTextWithOptions(options) { function alertTextWithOptions(options) {
require(['alert'], function(alert) { import('alert').then(({default: alert}) => {
alert(options); alert(options);
}); });
} }
@ -160,7 +170,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
ValidateWriteable: validateWriteable, ValidateWriteable: validateWriteable,
Path: path Path: path
} }
}).catch(function(response) { }).catch(response => {
if (response) { if (response) {
if (response.status === 404) { if (response.status === 404) {
alertText(globalize.translate('PathNotFound')); alertText(globalize.translate('PathNotFound'));
@ -180,10 +190,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
function initEditor(content, options, fileOptions) { function initEditor(content, options, fileOptions) {
content.addEventListener('click', function(e) { content.addEventListener('click', e => {
var lnkPath = dom.parentWithClass(e.target, 'lnkPath'); const lnkPath = dom.parentWithClass(e.target, 'lnkPath');
if (lnkPath) { if (lnkPath) {
var path = lnkPath.getAttribute('data-path'); const path = lnkPath.getAttribute('data-path');
if (lnkPath.classList.contains('lnkFile')) { if (lnkPath.classList.contains('lnkFile')) {
content.querySelector('#txtDirectoryPickerPath').value = path; content.querySelector('#txtDirectoryPickerPath').value = path;
} else { } 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')) { if (dom.parentWithClass(e.target, 'btnRefreshDirectories')) {
var path = content.querySelector('#txtDirectoryPickerPath').value; const path = content.querySelector('#txtDirectoryPickerPath').value;
refreshDirectoryBrowser(content, path, fileOptions); refreshDirectoryBrowser(content, path, fileOptions);
} }
}); });
content.addEventListener('change', function(e) { content.addEventListener('change', e => {
var txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT'); const txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT');
if (txtDirectoryPickerPath && 'txtDirectoryPickerPath' === txtDirectoryPickerPath.id) { if (txtDirectoryPickerPath && txtDirectoryPickerPath.id === 'txtDirectoryPickerPath') {
refreshDirectoryBrowser(content, txtDirectoryPickerPath.value, fileOptions); refreshDirectoryBrowser(content, txtDirectoryPickerPath.value, fileOptions);
} }
}); });
content.querySelector('form').addEventListener('submit', function(e) { content.querySelector('form').addEventListener('submit', function(e) {
if (options.callback) { if (options.callback) {
var networkSharePath = this.querySelector('#txtNetworkPath'); let networkSharePath = this.querySelector('#txtNetworkPath');
networkSharePath = networkSharePath ? networkSharePath.value : null; 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)); validatePath(path, options.validateWriteable, ApiClient).then(options.callback(path, networkSharePath));
} }
e.preventDefault(); e.preventDefault();
@ -224,21 +234,21 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
return Promise.resolve(options.path); return Promise.resolve(options.path);
} else { } else {
return ApiClient.getJSON(ApiClient.getUrl('Environment/DefaultDirectoryBrowser')).then( return ApiClient.getJSON(ApiClient.getUrl('Environment/DefaultDirectoryBrowser')).then(
function(result) { result => {
return result.Path || ''; return result.Path || '';
}, function() { }, () => {
return ''; return '';
} }
); );
} }
} }
function directoryBrowser() { class directoryBrowser {
var currentDialog; constructor() {
var self = this; let currentDialog;
self.show = function(options) { this.show = options => {
options = options || {}; options = options || {};
var fileOptions = { const fileOptions = {
includeDirectories: true includeDirectories: true
}; };
if (options.includeDirectories != null) { if (options.includeDirectories != null) {
@ -248,10 +258,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
fileOptions.includeFiles = options.includeFiles; fileOptions.includeFiles = options.includeFiles;
} }
Promise.all([getSystemInfo(), getDefaultPath(options)]).then( Promise.all([getSystemInfo(), getDefaultPath(options)]).then(
function(responses) { responses => {
var systemInfo = responses[0]; const systemInfo = responses[0];
var initialPath = responses[1]; const initialPath = responses[1];
var dlg = dialogHelper.createDialog({ const dlg = dialogHelper.createDialog({
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -261,7 +271,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
dlg.classList.add('directoryPicker'); dlg.classList.add('directoryPicker');
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
var html = ''; let html = '';
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>'; html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
html += '<h3 class="formDialogHeaderTitle">'; html += '<h3 class="formDialogHeaderTitle">';
@ -273,12 +283,12 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
initEditor(dlg, options, fileOptions); initEditor(dlg, options, fileOptions);
dlg.addEventListener('close', onDialogClosed); dlg.addEventListener('close', onDialogClosed);
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.btnCloseDialog').addEventListener('click', function() { dlg.querySelector('.btnCloseDialog').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
currentDialog = dlg; currentDialog = dlg;
dlg.querySelector('#txtDirectoryPickerPath').value = initialPath; dlg.querySelector('#txtDirectoryPickerPath').value = initialPath;
var txtNetworkPath = dlg.querySelector('#txtNetworkPath'); const txtNetworkPath = dlg.querySelector('#txtNetworkPath');
if (txtNetworkPath) { if (txtNetworkPath) {
txtNetworkPath.value = options.networkSharePath || ''; txtNetworkPath.value = options.networkSharePath || '';
} }
@ -288,13 +298,15 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
} }
); );
}; };
self.close = function() { this.close = () => {
if (currentDialog) { if (currentDialog) {
dialogHelper.close(currentDialog); dialogHelper.close(currentDialog);
} }
}; };
} }
}
var systemInfo; let systemInfo;
return directoryBrowser;
}); /* eslint-enable indent */
export default directoryBrowser;

130
src/components/displaySettings/displaySettings.js
View file

@ -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) { import browser from 'browser';
'use strict'; 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) { function fillThemes(select, isDashboard) {
select.innerHTML = skinManager.getThemes().map(function (t) { select.innerHTML = skinManager.getThemes().map(t => {
var value = t.id; let value = t.id;
if (t.isDefault && !isDashboard) { if (t.isDefault && !isDashboard) {
value = ''; value = '';
} else if (t.isDefaultServerDashboard && isDashboard) { } else if (t.isDefaultServerDashboard && isDashboard) {
value = ''; value = '';
} }
return '<option value="' + value + '">' + t.name + '</option>'; return `<option value="${value}">${t.name}</option>`;
}).join(''); }).join('');
} }
function loadScreensavers(context, userSettings) { function loadScreensavers(context, userSettings) {
var selectScreensaver = context.querySelector('.selectScreensaver'); const selectScreensaver = context.querySelector('.selectScreensaver');
var options = pluginManager.ofType('screensaver').map(function (plugin) { const options = pluginManager.ofType('screensaver').map(plugin => {
return { return {
name: plugin.name, name: plugin.name,
value: plugin.id value: plugin.id
@ -28,8 +43,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
value: 'none' value: 'none'
}); });
selectScreensaver.innerHTML = options.map(function (o) { selectScreensaver.innerHTML = options.map(o => {
return '<option value="' + o.value + '">' + o.name + '</option>'; return `<option value="${o.value}">${o.name}</option>`;
}).join(''); }).join('');
selectScreensaver.value = userSettings.screensaver(); selectScreensaver.value = userSettings.screensaver();
@ -40,9 +55,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
} }
function loadSoundEffects(context, userSettings) { function loadSoundEffects(context, userSettings) {
const selectSoundEffects = context.querySelector('.selectSoundEffects');
var selectSoundEffects = context.querySelector('.selectSoundEffects'); const options = pluginManager.ofType('soundeffects').map(plugin => {
var options = pluginManager.ofType('soundeffects').map(function (plugin) {
return { return {
name: plugin.name, name: plugin.name,
value: plugin.id value: plugin.id
@ -54,8 +68,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
value: 'none' value: 'none'
}); });
selectSoundEffects.innerHTML = options.map(function (o) { selectSoundEffects.innerHTML = options.map(o => {
return '<option value="' + o.value + '">' + o.name + '</option>'; return `<option value="${o.value}">${o.name}</option>`;
}).join(''); }).join('');
selectSoundEffects.value = userSettings.soundEffects(); selectSoundEffects.value = userSettings.soundEffects();
@ -66,18 +80,17 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
} }
function loadSkins(context, userSettings) { function loadSkins(context, userSettings) {
const selectSkin = context.querySelector('.selectSkin');
var selectSkin = context.querySelector('.selectSkin'); const options = pluginManager.ofType('skin').map(plugin => {
var options = pluginManager.ofType('skin').map(function (plugin) {
return { return {
name: plugin.name, name: plugin.name,
value: plugin.id value: plugin.id
}; };
}); });
selectSkin.innerHTML = options.map(function (o) { selectSkin.innerHTML = options.map(o => {
return '<option value="' + o.value + '">' + o.name + '</option>'; return `<option value="${o.value}">${o.name}</option>`;
}).join(''); }).join('');
selectSkin.value = userSettings.skin(); selectSkin.value = userSettings.skin();
@ -92,8 +105,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
} }
} }
function showOrHideMissingEpisodesField(context, user, apiClient) { function showOrHideMissingEpisodesField(context) {
if (browser.tizen || browser.web0s) { if (browser.tizen || browser.web0s) {
context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide'); context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide');
return; return;
@ -102,11 +114,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide'); context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide');
} }
function loadForm(context, user, userSettings, apiClient) { function loadForm(context, user, userSettings) {
var loggedInUserId = apiClient.getCurrentUserId();
var userId = user.Id;
if (user.Policy.IsAdministrator) { if (user.Policy.IsAdministrator) {
context.querySelector('.selectDashboardThemeContainer').classList.remove('hide'); context.querySelector('.selectDashboardThemeContainer').classList.remove('hide');
} else { } else {
@ -167,8 +175,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup(); context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup();
var selectTheme = context.querySelector('#selectTheme'); const selectTheme = context.querySelector('#selectTheme');
var selectDashboardTheme = context.querySelector('#selectDashboardTheme'); const selectDashboardTheme = context.querySelector('#selectDashboardTheme');
fillThemes(selectTheme); fillThemes(selectTheme);
fillThemes(selectDashboardTheme, true); fillThemes(selectDashboardTheme, true);
@ -195,13 +203,12 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || ''; context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || '';
showOrHideMissingEpisodesField(context, user, apiClient); showOrHideMissingEpisodesField(context);
loading.hide(); loading.hide();
} }
function saveUser(context, user, userSettingsInstance, apiClient) { function saveUser(context, user, userSettingsInstance, apiClient) {
appSettings.runAtStartup(context.querySelector('.chkRunAtStartup').checked); appSettings.runAtStartup(context.querySelector('.chkRunAtStartup').checked);
user.Configuration.DisplayMissingEpisodes = context.querySelector('.chkDisplayMissingEpisodes').checked; user.Configuration.DisplayMissingEpisodes = context.querySelector('.chkDisplayMissingEpisodes').checked;
@ -239,29 +246,29 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
loading.show(); 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(); loading.hide();
if (enableSaveConfirmation) { if (enableSaveConfirmation) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('SettingsSaved')); toast(globalize.translate('SettingsSaved'));
}); });
} }
events.trigger(instance, 'saved'); events.trigger(instance, 'saved');
}, function () { }, () => {
loading.hide(); loading.hide();
}); });
}); });
} }
function onSubmit(e) { function onSubmit(e) {
var self = this; const self = this;
var apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
var userId = self.options.userId; const userId = self.options.userId;
var userSettings = self.options.userSettings; 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); save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
}); });
@ -272,50 +279,51 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
return false; return false;
} }
function embed(options, self) { async function embed(options, self) {
require(['text!./displaySettings.template.html'], function (template) { const { default: template } = await import('text!./displaySettings.template.html');
options.element.innerHTML = globalize.translateDocument(template, 'core'); options.element.innerHTML = globalize.translateHtml(template, 'core');
options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
if (options.enableSaveButton) { if (options.enableSaveButton) {
options.element.querySelector('.btnSave').classList.remove('hide'); options.element.querySelector('.btnSave').classList.remove('hide');
} }
self.loadData(options.autoFocus); self.loadData(options.autoFocus);
});
} }
function DisplaySettings(options) { class DisplaySettings {
constructor(options) {
this.options = options; this.options = options;
embed(options, this); embed(options, this);
} }
DisplaySettings.prototype.loadData = function (autoFocus) { loadData(autoFocus) {
var self = this; const self = this;
var context = self.options.element; const context = self.options.element;
loading.show(); loading.show();
var userId = self.options.userId; const userId = self.options.userId;
var apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
var userSettings = self.options.userSettings; const userSettings = self.options.userSettings;
return apiClient.getUser(userId).then(function (user) { return apiClient.getUser(userId).then(user => {
return userSettings.setUserInfo(userId, apiClient).then(function () { return userSettings.setUserInfo(userId, apiClient).then(() => {
self.dataLoaded = true; self.dataLoaded = true;
loadForm(context, user, userSettings, apiClient); loadForm(context, user, userSettings);
if (autoFocus) { if (autoFocus) {
focusManager.autoFocus(context); focusManager.autoFocus(context);
} }
}); });
}); });
}; }
DisplaySettings.prototype.submit = function () { submit() {
onSubmit.call(this); onSubmit.call(this);
}; }
DisplaySettings.prototype.destroy = function () { destroy() {
this.options = null; this.options = null;
}; }
}
return DisplaySettings; /* eslint-enable indent */
}); export default DisplaySettings;

3
src/components/favoriteitems.js
View file

@ -154,8 +154,7 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">';
} }
var supportsImageAnalysis = appHost.supports('imageanalysis'); var cardLayout = appHost.preferVisualCards && section.autoCardLayout && section.showTitle;
var cardLayout = (appHost.preferVisualCards || supportsImageAnalysis) && section.autoCardLayout && section.showTitle;
cardLayout = false; cardLayout = false;
html += cardBuilder.getCardsHtml(result.Items, { html += cardBuilder.getCardsHtml(result.Items, {
preferThumb: section.preferThumb, preferThumb: section.preferThumb,

6
src/components/fetchhelper.js
View file

@ -1,6 +1,5 @@
/* eslint-disable indent */ /* eslint-disable indent */
export function getFetchPromise(request) { export function getFetchPromise(request) {
const headers = request.headers || {}; const headers = request.headers || {};
if (request.dataType === 'json') { if (request.dataType === 'json') {
@ -16,7 +15,6 @@
let contentType = request.contentType; let contentType = request.contentType;
if (request.data) { if (request.data) {
if (typeof request.data === 'string') { if (typeof request.data === 'string') {
fetchRequest.body = request.data; fetchRequest.body = request.data;
} else { } else {
@ -27,7 +25,6 @@
} }
if (contentType) { if (contentType) {
headers['Content-Type'] = contentType; headers['Content-Type'] = contentType;
} }
@ -48,11 +45,9 @@
} }
function fetchWithTimeout(url, options, timeoutMs) { 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) { return new Promise(function (resolve, reject) {
const timeout = setTimeout(reject, timeoutMs); const timeout = setTimeout(reject, timeoutMs);
options = options || {}; options = options || {};
@ -65,7 +60,6 @@
resolve(response); resolve(response);
}, function (error) { }, function (error) {
clearTimeout(timeout); clearTimeout(timeout);
console.debug(`fetchWithTimeout: timed out connecting to url: ${url}`); console.debug(`fetchWithTimeout: timed out connecting to url: ${url}`);

2
src/components/filterdialog/filterdialog.js
View file

@ -412,7 +412,7 @@ import 'css!./style.css';
dlg.classList.add('background-theme-a'); dlg.classList.add('background-theme-a');
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('filterDialog'); dlg.classList.add('filterDialog');
dlg.innerHTML = globalize.translateDocument(template); dlg.innerHTML = globalize.translateHtml(template);
setVisibility(dlg, this.options); setVisibility(dlg, this.options);
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.addEventListener('close', resolve); dlg.addEventListener('close', resolve);

61
src/components/filtermenu/filtermenu.js
View file

@ -2,19 +2,15 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
'use strict'; 'use strict';
function onSubmit(e) { function onSubmit(e) {
e.preventDefault(); e.preventDefault();
return false; return false;
} }
function renderOptions(context, selector, cssClass, items, isCheckedFn) { function renderOptions(context, selector, cssClass, items, isCheckedFn) {
var elem = context.querySelector(selector); var elem = context.querySelector(selector);
if (items.length) { if (items.length) {
elem.classList.remove('hide'); elem.classList.remove('hide');
} else { } else {
elem.classList.add('hide'); elem.classList.add('hide');
} }
@ -22,7 +18,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
var html = ''; var html = '';
html += items.map(function (filter) { html += items.map(function (filter) {
var itemHtml = ''; var itemHtml = '';
var checkedHtml = isCheckedFn(filter) ? ' checked' : ''; var checkedHtml = isCheckedFn(filter) ? ' checked' : '';
@ -32,45 +27,20 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
itemHtml += '</label>'; itemHtml += '</label>';
return itemHtml; return itemHtml;
}).join(''); }).join('');
elem.querySelector('.filterOptions').innerHTML = html; elem.querySelector('.filterOptions').innerHTML = html;
} }
function renderDynamicFilters(context, result, options) { function renderDynamicFilters(context, result, options) {
// If there's a huge number of these they will be really show to render
//if (result.Tags) {
// result.Tags.length = Math.min(result.Tags.length, 50);
//}
renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) { renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
// Switching from | to , // Switching from | to ,
var delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|'; var delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|';
return (delimeter + (options.settings.GenreIds || '') + delimeter).indexOf(delimeter + i.Id + delimeter) !== -1; return (delimeter + (options.settings.GenreIds || '') + delimeter).indexOf(delimeter + i.Id + delimeter) !== -1;
}); });
//renderOptions(context, '.officialRatingFilters', 'chkOfficialRatingFilter', result.OfficialRatings, function (i) {
// var delimeter = '|';
// return (delimeter + (query.OfficialRatings || '') + delimeter).indexOf(delimeter + i + delimeter) != -1;
//});
//renderOptions(context, '.tagFilters', 'chkTagFilter', result.Tags, function (i) {
// var delimeter = '|';
// return (delimeter + (query.Tags || '') + delimeter).indexOf(delimeter + i + delimeter) != -1;
//});
//renderOptions(context, '.yearFilters', 'chkYearFilter', result.Years, function (i) {
// var delimeter = ',';
// return (delimeter + (query.Years || '') + delimeter).indexOf(delimeter + i + delimeter) != -1;
//});
} }
function loadDynamicFilters(context, options) { function loadDynamicFilters(context, options) {
var apiClient = connectionManager.getApiClient(options.serverId); var apiClient = connectionManager.getApiClient(options.serverId);
var filterMenuOptions = Object.assign(options.filterMenuOptions, { var filterMenuOptions = Object.assign(options.filterMenuOptions, {
@ -81,16 +51,11 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
}); });
apiClient.getFilters(filterMenuOptions).then(function (result) { apiClient.getFilters(filterMenuOptions).then(function (result) {
renderDynamicFilters(context, result, options); renderDynamicFilters(context, result, options);
}, function () {
// older server
}); });
} }
function initEditor(context, settings) { function initEditor(context, settings) {
context.querySelector('form').addEventListener('submit', onSubmit); context.querySelector('form').addEventListener('submit', onSubmit);
var elems = context.querySelectorAll('.simpleFilter'); var elems = context.querySelectorAll('.simpleFilter');
@ -98,7 +63,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
var length; var length;
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
if (elems[i].tagName === 'INPUT') { if (elems[i].tagName === 'INPUT') {
elems[i].checked = settings[elems[i].getAttribute('data-settingname')] || false; elems[i].checked = settings[elems[i].getAttribute('data-settingname')] || false;
} else { } else {
@ -110,7 +74,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
elems = context.querySelectorAll('.chkVideoTypeFilter'); elems = context.querySelectorAll('.chkVideoTypeFilter');
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].checked = videoTypes.indexOf(elems[i].getAttribute('data-filter')) !== -1; elems[i].checked = videoTypes.indexOf(elems[i].getAttribute('data-filter')) !== -1;
} }
@ -118,7 +81,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
elems = context.querySelectorAll('.chkSeriesStatus'); elems = context.querySelectorAll('.chkSeriesStatus');
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elems[i].checked = seriesStatuses.indexOf(elems[i].getAttribute('data-filter')) !== -1; elems[i].checked = seriesStatuses.indexOf(elems[i].getAttribute('data-filter')) !== -1;
} }
@ -136,12 +98,10 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
} }
function saveValues(context, settings, settingsKey) { function saveValues(context, settings, settingsKey) {
var elems = context.querySelectorAll('.simpleFilter'); var elems = context.querySelectorAll('.simpleFilter');
var i; var i;
var length; var length;
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
if (elems[i].tagName === 'INPUT') { if (elems[i].tagName === 'INPUT') {
setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]); setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
} else { } else {
@ -154,7 +114,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
elems = context.querySelectorAll('.chkVideoTypeFilter'); elems = context.querySelectorAll('.chkVideoTypeFilter');
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
if (elems[i].checked) { if (elems[i].checked) {
videoTypes.push(elems[i].getAttribute('data-filter')); videoTypes.push(elems[i].getAttribute('data-filter'));
} }
@ -166,7 +125,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
elems = context.querySelectorAll('.chkSeriesStatus'); elems = context.querySelectorAll('.chkSeriesStatus');
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
if (elems[i].checked) { if (elems[i].checked) {
seriesStatuses.push(elems[i].getAttribute('data-filter')); seriesStatuses.push(elems[i].getAttribute('data-filter'));
} }
@ -177,7 +135,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
elems = context.querySelectorAll('.chkGenreFilter'); elems = context.querySelectorAll('.chkGenreFilter');
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
if (elems[i].checked) { if (elems[i].checked) {
genres.push(elems[i].getAttribute('data-filter')); genres.push(elems[i].getAttribute('data-filter'));
} }
@ -186,7 +143,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
} }
function setBasicFilter(context, key, elem) { function setBasicFilter(context, key, elem) {
var value = elem.checked; var value = elem.checked;
value = value ? value : null; value = value ? value : null;
userSettings.setFilter(key, value); userSettings.setFilter(key, value);
@ -200,7 +156,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
} }
function moveCheckboxFocus(elem, offset) { function moveCheckboxFocus(elem, offset) {
var parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap'); var parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap');
var elems = focusManager.getFocusableElements(parent); var elems = focusManager.getFocusableElements(parent);
@ -225,7 +180,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
function onInputCommand(e) { function onInputCommand(e) {
switch (e.detail.command) { switch (e.detail.command) {
case 'left': case 'left':
moveCheckboxFocus(e.target, -1); moveCheckboxFocus(e.target, -1);
e.preventDefault(); e.preventDefault();
@ -244,7 +198,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
} }
function bindCheckboxInput(context, on) { function bindCheckboxInput(context, on) {
var elems = context.querySelectorAll('.checkboxList-verticalwrap'); var elems = context.querySelectorAll('.checkboxList-verticalwrap');
for (var i = 0, length = elems.length; i < length; i++) { for (var i = 0, length = elems.length; i < length; i++) {
if (on) { if (on) {
@ -256,11 +209,8 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
} }
FilterMenu.prototype.show = function (options) { FilterMenu.prototype.show = function (options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['text!./filtermenu.template.html'], function (template) { require(['text!./filtermenu.template.html'], function (template) {
var dialogOptions = { var dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -286,7 +236,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
html += template; html += template;
dlg.innerHTML = globalize.translateDocument(html, 'core'); dlg.innerHTML = globalize.translateHtml(html, 'core');
var settingElements = dlg.querySelectorAll('.viewSetting'); var settingElements = dlg.querySelectorAll('.viewSetting');
for (var i = 0, length = settingElements.length; i < length; i++) { for (var i = 0, length = settingElements.length; i < length; i++) {
@ -303,7 +253,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
bindCheckboxInput(dlg, true); bindCheckboxInput(dlg, true);
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
@ -314,17 +263,10 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
var submitted; var submitted;
dlg.querySelector('form').addEventListener('change', function () { dlg.querySelector('form').addEventListener('change', function () {
submitted = true; submitted = true;
//if (options.onChange) {
// saveValues(dlg, options.settings, options.settingsKey);
// options.onChange();
//}
}, true); }, true);
dialogHelper.open(dlg).then(function () { dialogHelper.open(dlg).then(function () {
bindCheckboxInput(dlg, false); bindCheckboxInput(dlg, false);
if (layoutManager.tv) { if (layoutManager.tv) {
@ -332,7 +274,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
} }
if (submitted) { if (submitted) {
//if (!options.onChange) { //if (!options.onChange) {
saveValues(dlg, options.settings, options.settingsKey); saveValues(dlg, options.settings, options.settingsKey);
resolve(); resolve();

34
src/components/focusManager.js
View file

@ -7,14 +7,12 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
function popScope(elem) { function popScope(elem) {
if (scopes.length) { if (scopes.length) {
scopes.length -= 1; scopes.length -= 1;
} }
} }
function autoFocus(view, defaultToFirst, findAutoFocusElement) { function autoFocus(view, defaultToFirst, findAutoFocusElement) {
var element; var element;
if (findAutoFocusElement !== false) { if (findAutoFocusElement !== false) {
element = view.querySelector('*[autofocus]'); element = view.querySelector('*[autofocus]');
@ -37,7 +35,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
function focus(element) { function focus(element) {
try { try {
element.focus({ element.focus({
preventScroll: scrollManager.isEnabled() preventScroll: scrollManager.isEnabled()
@ -50,16 +47,13 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A']; var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A'];
var focusableContainerTagNames = ['BODY', 'DIALOG']; var focusableContainerTagNames = ['BODY', 'DIALOG'];
var focusableQuery = focusableTagNames.map(function (t) { var focusableQuery = focusableTagNames.map(function (t) {
if (t === 'INPUT') { if (t === 'INPUT') {
t += ':not([type="range"]):not([type="file"])'; t += ':not([type="range"]):not([type="file"])';
} }
return t + ':not([tabindex="-1"]):not(:disabled)'; return t + ':not([tabindex="-1"]):not(:disabled)';
}).join(',') + ',.focusable'; }).join(',') + ',.focusable';
function isFocusable(elem) { function isFocusable(elem) {
if (focusableTagNames.indexOf(elem.tagName) !== -1) { if (focusableTagNames.indexOf(elem.tagName) !== -1) {
return true; return true;
} }
@ -83,7 +77,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
function focusableParent(elem) { function focusableParent(elem) {
var originalElement = elem; var originalElement = elem;
while (!isFocusable(elem)) { while (!isFocusable(elem)) {
@ -101,7 +94,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
// Determines if a focusable element can be focused at a given point in time // Determines if a focusable element can be focused at a given point in time
function isCurrentlyFocusableInternal(elem) { function isCurrentlyFocusableInternal(elem) {
// http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom // http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
if (elem.offsetParent === null) { if (elem.offsetParent === null) {
return false; return false;
@ -112,7 +104,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
// Determines if a focusable element can be focused at a given point in time // Determines if a focusable element can be focused at a given point in time
function isCurrentlyFocusable(elem) { function isCurrentlyFocusable(elem) {
if (elem.disabled) { if (elem.disabled) {
return false; return false;
} }
@ -143,7 +134,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
var focusableElements = []; var focusableElements = [];
for (var i = 0, length = elems.length; i < length; i++) { for (var i = 0, length = elems.length; i < length; i++) {
var elem = elems[i]; var elem = elems[i];
if (excludeClass && elem.classList.contains(excludeClass)) { if (excludeClass && elem.classList.contains(excludeClass)) {
@ -163,7 +153,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
function isFocusContainer(elem, direction) { function isFocusContainer(elem, direction) {
if (focusableContainerTagNames.indexOf(elem.tagName) !== -1) { if (focusableContainerTagNames.indexOf(elem.tagName) !== -1) {
return true; return true;
} }
@ -217,7 +206,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
function getOffset(elem) { function getOffset(elem) {
var box; var box;
// Support: BlackBerry 5, iOS 3 (original iPhone) // Support: BlackBerry 5, iOS 3 (original iPhone)
@ -234,7 +222,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
if (box.right === null) { if (box.right === null) {
// Create a new object because some browsers will throw an error when trying to set data onto the Rect object // Create a new object because some browsers will throw an error when trying to set data onto the Rect object
var newBox = { var newBox = {
top: box.top, top: box.top,
@ -253,7 +240,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
function nav(activeElement, direction, container, focusableElements) { function nav(activeElement, direction, container, focusableElements) {
activeElement = activeElement || document.activeElement; activeElement = activeElement || document.activeElement;
if (activeElement) { if (activeElement) {
@ -272,14 +258,10 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
var rect = getOffset(activeElement); var rect = getOffset(activeElement);
// Get elements and work out x/y points // Get elements and work out x/y points
var cache = [];
var point1x = parseFloat(rect.left) || 0; var point1x = parseFloat(rect.left) || 0;
var point1y = parseFloat(rect.top) || 0; var point1y = parseFloat(rect.top) || 0;
var point2x = parseFloat(point1x + rect.width - 1) || point1x; var point2x = parseFloat(point1x + rect.width - 1) || point1x;
var point2y = parseFloat(point1y + rect.height - 1) || point1y; var point2y = parseFloat(point1y + rect.height - 1) || point1y;
// Shortcuts to help with compression
var min = Math.min;
var max = Math.max;
var sourceMidX = rect.left + (rect.width / 2); var sourceMidX = rect.left + (rect.width / 2);
var sourceMidY = rect.top + (rect.height / 2); var sourceMidY = rect.top + (rect.height / 2);
@ -301,10 +283,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
continue; continue;
} }
//if (!isCurrentlyFocusableInternal(curr)) {
// continue;
//}
var elementRect = getOffset(curr); var elementRect = getOffset(curr);
// not currently visible // not currently visible
@ -313,7 +291,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
switch (direction) { switch (direction) {
case 0: case 0:
// left // left
if (elementRect.left >= rect.left) { if (elementRect.left >= rect.left) {
@ -369,7 +346,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
var distY; var distY;
switch (direction) { switch (direction) {
case 0: case 0:
// left // left
distX = Math.abs(point1x - Math.min(point1x, x2)); distX = Math.abs(point1x - Math.min(point1x, x2));
@ -403,7 +379,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
if (nearestElement) { if (nearestElement) {
// See if there's a focusable container, and if so, send the focus command to that // See if there's a focusable container, and if so, send the focus command to that
if (activeElement) { if (activeElement) {
var nearestElementFocusableParent = dom.parentWithClass(nearestElement, 'focusable'); var nearestElementFocusableParent = dom.parentWithClass(nearestElement, 'focusable');
@ -418,12 +393,10 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
function intersectsInternal(a1, a2, b1, b2) { function intersectsInternal(a1, a2, b1, b2) {
return (b1 >= a1 && b1 <= a2) || (b2 >= a1 && b2 <= a2); return (b1 >= a1 && b1 <= a2) || (b2 >= a1 && b2 <= a2);
} }
function intersects(a1, a2, b1, b2) { function intersects(a1, a2, b1, b2) {
return intersectsInternal(a1, a2, b1, b2) || intersectsInternal(b1, b2, a1, a2); return intersectsInternal(a1, a2, b1, b2) || intersectsInternal(b1, b2, a1, a2);
} }
@ -434,11 +407,9 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
function focusFirst(container, focusableSelector) { function focusFirst(container, focusableSelector) {
var elems = container.querySelectorAll(focusableSelector); var elems = container.querySelectorAll(focusableSelector);
for (var i = 0, length = elems.length; i < length; i++) { for (var i = 0, length = elems.length; i < length; i++) {
var elem = elems[i]; var elem = elems[i];
if (isCurrentlyFocusableInternal(elem)) { if (isCurrentlyFocusableInternal(elem)) {
@ -449,11 +420,9 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
function focusLast(container, focusableSelector) { function focusLast(container, focusableSelector) {
var elems = [].slice.call(container.querySelectorAll(focusableSelector), 0).reverse(); var elems = [].slice.call(container.querySelectorAll(focusableSelector), 0).reverse();
for (var i = 0, length = elems.length; i < length; i++) { for (var i = 0, length = elems.length; i < length; i++) {
var elem = elems[i]; var elem = elems[i];
if (isCurrentlyFocusableInternal(elem)) { if (isCurrentlyFocusableInternal(elem)) {
@ -464,7 +433,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
function moveFocus(sourceElement, container, focusableSelector, offset) { function moveFocus(sourceElement, container, focusableSelector, offset) {
var elems = container.querySelectorAll(focusableSelector); var elems = container.querySelectorAll(focusableSelector);
var list = []; var list = [];
var i; var i;
@ -472,7 +440,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
var elem; var elem;
for (i = 0, length = elems.length; i < length; i++) { for (i = 0, length = elems.length; i < length; i++) {
elem = elems[i]; elem = elems[i];
if (isCurrentlyFocusableInternal(elem)) { if (isCurrentlyFocusableInternal(elem)) {
@ -483,7 +450,6 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
var currentIndex = -1; var currentIndex = -1;
for (i = 0, length = list.length; i < length; i++) { for (i = 0, length = list.length; i < length; i++) {
elem = list[i]; elem = list[i];
if (sourceElement === elem || elem.contains(sourceElement)) { if (sourceElement === elem || elem.contains(sourceElement)) {

14
src/components/groupedcards.js
View file

@ -1,5 +1,8 @@
define(['dom', 'appRouter', 'connectionManager'], function (dom, appRouter, connectionManager) { /* eslint-disable indent */
'use strict';
import dom from 'dom';
import appRouter from 'appRouter';
import connectionManager from 'connectionManager';
function onGroupedCardClick(e, card) { function onGroupedCardClick(e, card) {
var itemId = card.getAttribute('data-id'); var itemId = card.getAttribute('data-id');
@ -31,7 +34,7 @@ define(['dom', 'appRouter', 'connectionManager'], function (dom, appRouter, conn
} }
} }
function onItemsContainerClick(e) { export default function onItemsContainerClick(e) {
var groupedCard = dom.parentWithClass(e.target, 'groupedCard'); var groupedCard = dom.parentWithClass(e.target, 'groupedCard');
if (groupedCard) { if (groupedCard) {
@ -39,7 +42,4 @@ define(['dom', 'appRouter', 'connectionManager'], function (dom, appRouter, conn
} }
} }
return { /* eslint-enable indent */
onItemsContainerClick: onItemsContainerClick
};
});

15
src/components/guide/guide-settings.js
View file

@ -2,12 +2,10 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
'use strict'; 'use strict';
function saveCategories(context, options) { function saveCategories(context, options) {
var categories = []; var categories = [];
var chkCategorys = context.querySelectorAll('.chkCategory'); var chkCategorys = context.querySelectorAll('.chkCategory');
for (var i = 0, length = chkCategorys.length; i < length; i++) { for (var i = 0, length = chkCategorys.length; i < length; i++) {
var type = chkCategorys[i].getAttribute('data-type'); var type = chkCategorys[i].getAttribute('data-type');
if (chkCategorys[i].checked) { if (chkCategorys[i].checked) {
@ -25,12 +23,10 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
} }
function loadCategories(context, options) { function loadCategories(context, options) {
var selectedCategories = options.categories || []; var selectedCategories = options.categories || [];
var chkCategorys = context.querySelectorAll('.chkCategory'); var chkCategorys = context.querySelectorAll('.chkCategory');
for (var i = 0, length = chkCategorys.length; i < length; i++) { for (var i = 0, length = chkCategorys.length; i < length; i++) {
var type = chkCategorys[i].getAttribute('data-type'); var type = chkCategorys[i].getAttribute('data-type');
chkCategorys[i].checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1; chkCategorys[i].checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
@ -38,13 +34,11 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
} }
function save(context) { function save(context) {
var i; var i;
var length; var length;
var chkIndicators = context.querySelectorAll('.chkIndicator'); var chkIndicators = context.querySelectorAll('.chkIndicator');
for (i = 0, length = chkIndicators.length; i < length; i++) { for (i = 0, length = chkIndicators.length; i < length; i++) {
var type = chkIndicators[i].getAttribute('data-type'); var type = chkIndicators[i].getAttribute('data-type');
userSettings.set('guide-indicator-' + type, chkIndicators[i].checked); userSettings.set('guide-indicator-' + type, chkIndicators[i].checked);
} }
@ -62,13 +56,11 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
} }
function load(context) { function load(context) {
var i; var i;
var length; var length;
var chkIndicators = context.querySelectorAll('.chkIndicator'); var chkIndicators = context.querySelectorAll('.chkIndicator');
for (i = 0, length = chkIndicators.length; i < length; i++) { for (i = 0, length = chkIndicators.length; i < length; i++) {
var type = chkIndicators[i].getAttribute('data-type'); var type = chkIndicators[i].getAttribute('data-type');
if (chkIndicators[i].getAttribute('data-default') === 'true') { if (chkIndicators[i].getAttribute('data-default') === 'true') {
@ -90,13 +82,10 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
} }
function showEditor(options) { function showEditor(options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
var settingsChanged = false; var settingsChanged = false;
require(['text!./guide-settings.template.html'], function (template) { require(['text!./guide-settings.template.html'], function (template) {
var dialogOptions = { var dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -114,17 +103,15 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
var html = ''; var html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
dlg.addEventListener('change', function () { dlg.addEventListener('change', function () {
settingsChanged = true; settingsChanged = true;
}); });
dlg.addEventListener('close', function () { dlg.addEventListener('close', function () {
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false); scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
} }

86
src/components/guide/guide.js
View file

@ -2,7 +2,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
'use strict'; 'use strict';
function showViewSettings(instance) { function showViewSettings(instance) {
require(['guide-settings-dialog'], function (guideSettingsDialog) { require(['guide-settings-dialog'], function (guideSettingsDialog) {
guideSettingsDialog.show(instance.categoryOptions).then(function () { guideSettingsDialog.show(instance.categoryOptions).then(function () {
instance.refresh(); instance.refresh();
@ -11,7 +10,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function updateProgramCellOnScroll(cell, scrollPct) { function updateProgramCellOnScroll(cell, scrollPct) {
var left = cell.posLeft; var left = cell.posLeft;
if (!left) { if (!left) {
left = parseFloat(cell.style.left.replace('%', '')); left = parseFloat(cell.style.left.replace('%', ''));
@ -43,11 +41,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
if (guideProgramName) { if (guideProgramName) {
if (pctOfWidth > 0 && pctOfWidth <= 100) { if (pctOfWidth > 0 && pctOfWidth <= 100) {
//guideProgramName.style.marginLeft = pctOfWidth + '%';
guideProgramName.style.transform = 'translateX(' + pctOfWidth + '%)'; guideProgramName.style.transform = 'translateX(' + pctOfWidth + '%)';
caret.classList.remove('hide'); caret.classList.remove('hide');
} else { } else {
//guideProgramName.style.marginLeft = '0';
guideProgramName.style.transform = 'none'; guideProgramName.style.transform = 'none';
caret.classList.add('hide'); caret.classList.add('hide');
} }
@ -56,7 +52,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var isUpdatingProgramCellScroll = false; var isUpdatingProgramCellScroll = false;
function updateProgramCellsOnScroll(programGrid, programCells) { function updateProgramCellsOnScroll(programGrid, programCells) {
if (isUpdatingProgramCellScroll) { if (isUpdatingProgramCellScroll) {
return; return;
} }
@ -64,13 +59,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
isUpdatingProgramCellScroll = true; isUpdatingProgramCellScroll = true;
requestAnimationFrame(function () { requestAnimationFrame(function () {
var scrollLeft = programGrid.scrollLeft; var scrollLeft = programGrid.scrollLeft;
var scrollPct = scrollLeft ? (scrollLeft / programGrid.scrollWidth) * 100 : 0; var scrollPct = scrollLeft ? (scrollLeft / programGrid.scrollWidth) * 100 : 0;
for (var i = 0, length = programCells.length; i < length; i++) { for (var i = 0, length = programCells.length; i < length; i++) {
updateProgramCellOnScroll(programCells[i], scrollPct); updateProgramCellOnScroll(programCells[i], scrollPct);
} }
@ -79,14 +72,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onProgramGridClick(e) { function onProgramGridClick(e) {
if (!layoutManager.tv) { if (!layoutManager.tv) {
return; return;
} }
var programCell = dom.parentWithClass(e.target, 'programCell'); var programCell = dom.parentWithClass(e.target, 'programCell');
if (programCell) { if (programCell) {
var startDate = programCell.getAttribute('data-startdate'); var startDate = programCell.getAttribute('data-startdate');
var endDate = programCell.getAttribute('data-enddate'); var endDate = programCell.getAttribute('data-enddate');
startDate = datetime.parseISO8601Date(startDate, { toLocal: true }).getTime(); startDate = datetime.parseISO8601Date(startDate, { toLocal: true }).getTime();
@ -94,7 +85,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var now = new Date().getTime(); var now = new Date().getTime();
if (now >= startDate && now < endDate) { if (now >= startDate && now < endDate) {
var channelId = programCell.getAttribute('data-channelid'); var channelId = programCell.getAttribute('data-channelid');
var serverId = programCell.getAttribute('data-serverid'); var serverId = programCell.getAttribute('data-serverid');
@ -110,7 +100,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function Guide(options) { function Guide(options) {
var self = this; var self = this;
var items = {}; var items = {};
@ -121,7 +110,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var cellCurationMinutes = 30; var cellCurationMinutes = 30;
var cellDurationMs = cellCurationMinutes * 60 * 1000; var cellDurationMs = cellCurationMinutes * 60 * 1000;
var msPerDay = 86400000; var msPerDay = 86400000;
var totalRendererdMs = msPerDay;
var currentDate; var currentDate;
var currentStartIndex = 0; var currentStartIndex = 0;
@ -132,7 +120,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var programGrid; var programGrid;
self.refresh = function () { self.refresh = function () {
currentDate = null; currentDate = null;
reloadPage(options.element); reloadPage(options.element);
restartAutoRefresh(); restartAutoRefresh();
@ -151,7 +138,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
}; };
self.destroy = function () { self.destroy = function () {
stopAutoRefresh(); stopAutoRefresh();
events.off(serverNotifications, 'TimerCreated', onTimerCreated); events.off(serverNotifications, 'TimerCreated', onTimerCreated);
@ -165,7 +151,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
}; };
function restartAutoRefresh() { function restartAutoRefresh() {
stopAutoRefresh(); stopAutoRefresh();
var intervalMs = 60000 * 15; // (minutes) var intervalMs = 60000 * 15; // (minutes)
@ -183,15 +168,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function normalizeDateToTimeslot(date) { function normalizeDateToTimeslot(date) {
var minutesOffset = date.getMinutes() - cellCurationMinutes; var minutesOffset = date.getMinutes() - cellCurationMinutes;
if (minutesOffset >= 0) { if (minutesOffset >= 0) {
date.setHours(date.getHours(), cellCurationMinutes, 0, 0); date.setHours(date.getHours(), cellCurationMinutes, 0, 0);
} else { } else {
date.setHours(date.getHours(), 0, 0, 0); date.setHours(date.getHours(), 0, 0, 0);
} }
@ -207,7 +188,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function reloadGuide(context, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) { function reloadGuide(context, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
var apiClient = connectionManager.getApiClient(options.serverId); var apiClient = connectionManager.getApiClient(options.serverId);
var channelQuery = { var channelQuery = {
@ -290,12 +270,10 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
}; };
apiClient.getLiveTvChannels(channelQuery).then(function (channelsResult) { apiClient.getLiveTvChannels(channelQuery).then(function (channelsResult) {
var btnPreviousPage = context.querySelector('.btnPreviousPage'); var btnPreviousPage = context.querySelector('.btnPreviousPage');
var btnNextPage = context.querySelector('.btnNextPage'); var btnNextPage = context.querySelector('.btnNextPage');
if (channelsResult.TotalRecordCount > channelLimit) { if (channelsResult.TotalRecordCount > channelLimit) {
context.querySelector('.guideOptions').classList.remove('hide'); context.querySelector('.guideOptions').classList.remove('hide');
btnPreviousPage.classList.remove('hide'); btnPreviousPage.classList.remove('hide');
@ -312,7 +290,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} else { } else {
btnNextPage.disabled = true; btnNextPage.disabled = true;
} }
} else { } else {
context.querySelector('.guideOptions').classList.add('hide'); context.querySelector('.guideOptions').classList.add('hide');
} }
@ -343,22 +320,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
apiClient.getLiveTvPrograms(programQuery).then(function (programsResult) { apiClient.getLiveTvPrograms(programQuery).then(function (programsResult) {
renderGuide(context, date, channelsResult.Items, programsResult.Items, renderOptions, apiClient, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender); renderGuide(context, date, channelsResult.Items, programsResult.Items, renderOptions, apiClient, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender);
hideLoading(); hideLoading();
}); });
}); });
} }
function getDisplayTime(date) { function getDisplayTime(date) {
if ((typeof date).toString().toLowerCase() === 'string') { if ((typeof date).toString().toLowerCase() === 'string') {
try { try {
date = datetime.parseISO8601Date(date, { toLocal: true }); date = datetime.parseISO8601Date(date, { toLocal: true });
} catch (err) { } catch (err) {
return date; return date;
} }
@ -368,7 +340,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getTimeslotHeadersHtml(startDate, endDateTime) { function getTimeslotHeadersHtml(startDate, endDateTime) {
var html = ''; var html = '';
// clone // clone
@ -377,7 +348,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
html += '<div class="timeslotHeadersInner">'; html += '<div class="timeslotHeadersInner">';
while (startDate.getTime() < endDateTime) { while (startDate.getTime() < endDateTime) {
html += '<div class="timeslotHeader">'; html += '<div class="timeslotHeader">';
html += getDisplayTime(startDate); html += getDisplayTime(startDate);
@ -411,23 +381,19 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getTimerIndicator(item) { function getTimerIndicator(item) {
var status; var status;
if (item.Type === 'SeriesTimer') { if (item.Type === 'SeriesTimer') {
return '<span class="material-icons programIcon seriesTimerIcon fiber_smart_record"></span>'; return '<span class="material-icons programIcon seriesTimerIcon fiber_smart_record"></span>';
} else if (item.TimerId || item.SeriesTimerId) { } else if (item.TimerId || item.SeriesTimerId) {
status = item.Status || 'Cancelled'; status = item.Status || 'Cancelled';
} else if (item.Type === 'Timer') { } else if (item.Type === 'Timer') {
status = item.Status; status = item.Status;
} else { } else {
return ''; return '';
} }
if (item.SeriesTimerId) { if (item.SeriesTimerId) {
if (status !== 'Cancelled') { if (status !== 'Cancelled') {
return '<span class="material-icons programIcon seriesTimerIcon fiber_smart_record"></span>'; return '<span class="material-icons programIcon seriesTimerIcon fiber_smart_record"></span>';
} }
@ -439,7 +405,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) { function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
var html = ''; var html = '';
var startMs = date.getTime(); var startMs = date.getTime();
@ -463,11 +428,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var now = new Date().getTime(); var now = new Date().getTime();
for (var i = listInfo.startIndex, length = programs.length; i < length; i++) { for (var i = listInfo.startIndex, length = programs.length; i < length; i++) {
var program = programs[i]; var program = programs[i];
if (program.ChannelId !== channel.Id) { if (program.ChannelId !== channel.Id) {
if (programsFound) { if (programsFound) {
break; break;
} }
@ -577,7 +540,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
html += '</div>'; html += '</div>';
if (program.IsHD && options.showHdIcon) { if (program.IsHD && options.showHdIcon) {
//html += '<span class="guideHdIcon material-icons programIcon hd"></span>';
if (layoutManager.tv) { if (layoutManager.tv) {
html += '<div class="programIcon guide-programTextIcon guide-programTextIcon-tv">HD</div>'; html += '<div class="programIcon guide-programTextIcon guide-programTextIcon-tv">HD</div>';
} else { } else {
@ -599,11 +561,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function renderChannelHeaders(context, channels, apiClient) { function renderChannelHeaders(context, channels, apiClient) {
var html = ''; var html = '';
for (var i = 0, length = channels.length; i < length; i++) { for (var i = 0, length = channels.length; i < length; i++) {
var channel = channels[i]; var channel = channels[i];
var hasChannelImage = channel.ImageTags.Primary; var hasChannelImage = channel.ImageTags.Primary;
@ -615,18 +575,15 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var title = []; var title = [];
if (channel.ChannelNumber) { if (channel.ChannelNumber) {
title.push(channel.ChannelNumber); title.push(channel.ChannelNumber);
} }
if (channel.Name) { if (channel.Name) {
title.push(channel.Name); title.push(channel.Name);
} }
html += '<button title="' + title.join(' ') + '" type="button" class="' + cssClass + '"' + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">'; html += '<button title="' + title.join(' ') + '" type="button" class="' + cssClass + '"' + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">';
if (hasChannelImage) { if (hasChannelImage) {
var url = apiClient.getScaledImageUrl(channel.Id, { var url = apiClient.getScaledImageUrl(channel.Id, {
maxHeight: 220, maxHeight: 220,
tag: channel.ImageTags.Primary, tag: channel.ImageTags.Primary,
@ -637,7 +594,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
if (channel.ChannelNumber) { if (channel.ChannelNumber) {
html += '<h3 class="guideChannelNumber">' + channel.ChannelNumber + '</h3>'; html += '<h3 class="guideChannelNumber">' + channel.ChannelNumber + '</h3>';
} }
@ -654,7 +610,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function renderPrograms(context, date, channels, programs, options) { function renderPrograms(context, date, channels, programs, options) {
var listInfo = { var listInfo = {
startIndex: 0 startIndex: 0
}; };
@ -662,7 +617,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var html = []; var html = [];
for (var i = 0, length = channels.length; i < length; i++) { for (var i = 0, length = channels.length; i < length; i++) {
html.push(getChannelProgramsHtml(context, date, channels[i], programs, options, listInfo)); html.push(getChannelProgramsHtml(context, date, channels[i], programs, options, listInfo));
} }
@ -674,7 +628,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getProgramSortOrder(program, channels) { function getProgramSortOrder(program, channels) {
var channelId = program.ChannelId; var channelId = program.ChannelId;
var channelIndex = -1; var channelIndex = -1;
@ -691,7 +644,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function renderGuide(context, date, channels, programs, renderOptions, apiClient, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) { function renderGuide(context, date, channels, programs, renderOptions, apiClient, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
programs.sort(function (a, b) { programs.sort(function (a, b) {
return getProgramSortOrder(a, channels) - getProgramSortOrder(b, channels); return getProgramSortOrder(a, channels) - getProgramSortOrder(b, channels);
}); });
@ -721,7 +673,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function scrollProgramGridToTimeMs(context, scrollToTimeMs, startTimeOfDayMs) { function scrollProgramGridToTimeMs(context, scrollToTimeMs, startTimeOfDayMs) {
scrollToTimeMs -= startTimeOfDayMs; scrollToTimeMs -= startTimeOfDayMs;
var pct = scrollToTimeMs / msPerDay; var pct = scrollToTimeMs / msPerDay;
@ -734,7 +685,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function focusProgram(context, itemId, channelRowId, focusToTimeMs, startTimeOfDayMs) { function focusProgram(context, itemId, channelRowId, focusToTimeMs, startTimeOfDayMs) {
var focusElem; var focusElem;
if (itemId) { if (itemId) {
focusElem = context.querySelector('[data-id="' + itemId + '"]'); focusElem = context.querySelector('[data-id="' + itemId + '"]');
@ -743,7 +693,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
if (focusElem) { if (focusElem) {
focusManager.focus(focusElem); focusManager.focus(focusElem);
} else { } else {
var autoFocusParent; var autoFocusParent;
if (channelRowId) { if (channelRowId) {
@ -761,7 +710,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var programCell = autoFocusParent.querySelector('.programCell'); var programCell = autoFocusParent.querySelector('.programCell');
while (programCell) { while (programCell) {
var left = (programCell.style.left || '').replace('%', ''); var left = (programCell.style.left || '').replace('%', '');
left = left ? parseFloat(left) : 0; left = left ? parseFloat(left) : 0;
var width = (programCell.style.width || '').replace('%', ''); var width = (programCell.style.width || '').replace('%', '');
@ -782,7 +730,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function nativeScrollTo(container, pos, horizontal) { function nativeScrollTo(container, pos, horizontal) {
if (container.scrollTo) { if (container.scrollTo) {
if (horizontal) { if (horizontal) {
container.scrollTo(pos, 0); container.scrollTo(pos, 0);
@ -802,7 +749,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var lastHeaderScroll = 0; var lastHeaderScroll = 0;
var scrollXPct = 0; var scrollXPct = 0;
function onProgramGridScroll(context, elem, timeslotHeaders) { function onProgramGridScroll(context, elem, timeslotHeaders) {
if ((new Date().getTime() - lastHeaderScroll) >= 1000) { if ((new Date().getTime() - lastHeaderScroll) >= 1000) {
lastGridScroll = new Date().getTime(); lastGridScroll = new Date().getTime();
@ -815,7 +761,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onTimeslotHeadersScroll(context, elem) { function onTimeslotHeadersScroll(context, elem) {
if ((new Date().getTime() - lastGridScroll) >= 1000) { if ((new Date().getTime() - lastGridScroll) >= 1000) {
lastHeaderScroll = new Date().getTime(); lastHeaderScroll = new Date().getTime();
nativeScrollTo(programGrid, elem.scrollLeft, true); nativeScrollTo(programGrid, elem.scrollLeft, true);
@ -823,7 +768,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) { function changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
var newStartDate = normalizeDateToTimeslot(date); var newStartDate = normalizeDateToTimeslot(date);
currentDate = newStartDate; currentDate = newStartDate;
@ -831,7 +775,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getDateTabText(date, isActive, tabIndex) { function getDateTabText(date, isActive, tabIndex) {
var cssClass = isActive ? 'emby-tab-button guide-date-tab-button emby-tab-button-active' : 'emby-tab-button guide-date-tab-button'; var cssClass = isActive ? 'emby-tab-button guide-date-tab-button emby-tab-button-active' : 'emby-tab-button guide-date-tab-button';
var html = '<button is="emby-button" class="' + cssClass + '" data-index="' + tabIndex + '" data-date="' + date.getTime() + '">'; var html = '<button is="emby-button" class="' + cssClass + '" data-index="' + tabIndex + '" data-date="' + date.getTime() + '">';
@ -846,7 +789,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function setDateRange(page, guideInfo) { function setDateRange(page, guideInfo) {
var today = new Date(); var today = new Date();
var nowHours = today.getHours(); var nowHours = today.getHours();
today.setHours(nowHours, 0, 0, 0); today.setHours(nowHours, 0, 0, 0);
@ -866,6 +808,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var dateTabsHtml = ''; var dateTabsHtml = '';
var tabIndex = 0; var tabIndex = 0;
// TODO: Use date-fns
var date = new Date(); var date = new Date();
if (currentDate) { if (currentDate) {
@ -873,13 +816,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
date.setHours(nowHours, 0, 0, 0); date.setHours(nowHours, 0, 0, 0);
//start.setHours(0, 0, 0, 0);
var startTimeOfDayMs = (start.getHours() * 60 * 60 * 1000); var startTimeOfDayMs = (start.getHours() * 60 * 60 * 1000);
startTimeOfDayMs += start.getMinutes() * 60 * 1000; startTimeOfDayMs += start.getMinutes() * 60 * 1000;
while (start <= end) { while (start <= end) {
var isActive = date.getDate() === start.getDate() && date.getMonth() === start.getMonth() && date.getFullYear() === start.getFullYear(); var isActive = date.getDate() === start.getDate() && date.getMonth() === start.getMonth() && date.getFullYear() === start.getFullYear();
dateTabsHtml += getDateTabText(start, isActive, tabIndex); dateTabsHtml += getDateTabText(start, isActive, tabIndex);
@ -906,19 +847,16 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function reloadPage(page) { function reloadPage(page) {
showLoading(); showLoading();
var apiClient = connectionManager.getApiClient(options.serverId); var apiClient = connectionManager.getApiClient(options.serverId);
apiClient.getLiveTvGuideInfo().then(function (guideInfo) { apiClient.getLiveTvGuideInfo().then(function (guideInfo) {
setDateRange(page, guideInfo); setDateRange(page, guideInfo);
}); });
} }
function getChannelProgramsFocusableElements(container) { function getChannelProgramsFocusableElements(container) {
var elements = container.querySelectorAll('.programCell'); var elements = container.querySelectorAll('.programCell');
var list = []; var list = [];
@ -926,7 +864,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var currentScrollXPct = scrollXPct + 1; var currentScrollXPct = scrollXPct + 1;
for (var i = 0, length = elements.length; i < length; i++) { for (var i = 0, length = elements.length; i < length; i++) {
var elem = elements[i]; var elem = elements[i];
var left = (elem.style.left || '').replace('%', ''); var left = (elem.style.left || '').replace('%', '');
@ -943,7 +880,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onInputCommand(e) { function onInputCommand(e) {
var target = e.target; var target = e.target;
var programCell = dom.parentWithClass(target, 'programCell'); var programCell = dom.parentWithClass(target, 'programCell');
var container; var container;
@ -951,10 +887,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
var focusableElements; var focusableElements;
var newRow; var newRow;
var scrollX = false;
switch (e.detail.command) { switch (e.detail.command) {
case 'up': case 'up':
if (programCell) { if (programCell) {
container = programGrid; container = programGrid;
@ -1018,7 +951,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
focusManager.moveLeft(target, { focusManager.moveLeft(target, {
container: container container: container
}); });
scrollX = true;
break; break;
case 'right': case 'right':
container = programCell ? dom.parentWithClass(programCell, 'channelPrograms') : null; container = programCell ? dom.parentWithClass(programCell, 'channelPrograms') : null;
@ -1027,7 +959,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
focusManager.moveRight(target, { focusManager.moveRight(target, {
container: container container: container
}); });
scrollX = true;
break; break;
default: default:
return; return;
@ -1038,7 +969,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onScrollerFocus(e) { function onScrollerFocus(e) {
var target = e.target; var target = e.target;
var programCell = dom.parentWithClass(target, 'programCell'); var programCell = dom.parentWithClass(target, 'programCell');
@ -1057,22 +987,16 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
if (lastFocusDirection === 'left') { if (lastFocusDirection === 'left') {
if (programCell) { if (programCell) {
scrollHelper.toStart(programGrid, programCell, true, true); scrollHelper.toStart(programGrid, programCell, true, true);
} }
} else if (lastFocusDirection === 'right') { } else if (lastFocusDirection === 'right') {
if (programCell) { if (programCell) {
scrollHelper.toCenter(programGrid, programCell, true, true); scrollHelper.toCenter(programGrid, programCell, true, true);
} }
} else if (lastFocusDirection === 'up' || lastFocusDirection === 'down') { } else if (lastFocusDirection === 'up' || lastFocusDirection === 'down') {
var verticalScroller = dom.parentWithClass(target, 'guideVerticalScroller'); var verticalScroller = dom.parentWithClass(target, 'guideVerticalScroller');
if (verticalScroller) { if (verticalScroller) {
var focusedElement = programCell || dom.parentWithTag(target, 'BUTTON'); var focusedElement = programCell || dom.parentWithTag(target, 'BUTTON');
verticalScroller.toCenter(focusedElement, true); verticalScroller.toCenter(focusedElement, true);
} }
@ -1080,7 +1004,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function setScrollEvents(view, enabled) { function setScrollEvents(view, enabled) {
if (layoutManager.tv) { if (layoutManager.tv) {
var guideVerticalScroller = view.querySelector('.guideVerticalScroller'); var guideVerticalScroller = view.querySelector('.guideVerticalScroller');
@ -1093,7 +1016,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onTimerCreated(e, apiClient, data) { function onTimerCreated(e, apiClient, data) {
var programId = data.ProgramId; var programId = data.ProgramId;
// This could be null, not supported by all tv providers // This could be null, not supported by all tv providers
var newTimerId = data.Id; var newTimerId = data.Id;
@ -1146,12 +1068,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
require(['text!./tvguide.template.html'], function (template) { require(['text!./tvguide.template.html'], function (template) {
var context = options.element; var context = options.element;
context.classList.add('tvguide'); context.classList.add('tvguide');
context.innerHTML = globalize.translateDocument(template, 'core'); context.innerHTML = globalize.translateHtml(template, 'core');
programGrid = context.querySelector('.programGrid'); programGrid = context.querySelector('.programGrid');
var timeslotHeaders = context.querySelector('.timeslotHeaders'); var timeslotHeaders = context.querySelector('.timeslotHeaders');
@ -1203,12 +1124,10 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
}); });
context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) { context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) {
var allTabButtons = e.target.querySelectorAll('.guide-date-tab-button'); var allTabButtons = e.target.querySelectorAll('.guide-date-tab-button');
var tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)]; var tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)];
if (tabButton) { if (tabButton) {
var previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)]; var previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)];
var date = new Date(); var date = new Date();
@ -1223,7 +1142,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
if (previousButton) { if (previousButton) {
var previousDate = new Date(); var previousDate = new Date();
previousDate.setTime(parseInt(previousButton.getAttribute('data-date'))); previousDate.setTime(parseInt(previousButton.getAttribute('data-date')));

282
src/components/homeScreenSettings/homeScreenSettings.js
View file

@ -1,30 +1,38 @@
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) { import layoutManager from 'layoutManager';
'use strict'; 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) { function renderViews(page, user, result) {
let folderHtml = '';
var folderHtml = '';
folderHtml += '<div class="checkboxList">'; folderHtml += '<div class="checkboxList">';
folderHtml += result.map(function (i) { folderHtml += result.map(i => {
let currentHtml = '';
var currentHtml = ''; const id = `chkGroupFolder${i.Id}`;
var id = 'chkGroupFolder' + i.Id; const isChecked = user.Configuration.GroupedFolders.includes(i.Id);
var isChecked = user.Configuration.GroupedFolders.indexOf(i.Id) !== -1; const checkedHtml = isChecked ? ' checked="checked"' : '';
var checkedHtml = isChecked ? ' checked="checked"' : '';
currentHtml += '<label>'; currentHtml += '<label>';
currentHtml += '<input type="checkbox" is="emby-checkbox" class="chkGroupFolder" data-folderid="' + i.Id + '" id="' + id + '"' + checkedHtml + '/>'; currentHtml += `<input type="checkbox" is="emby-checkbox" class="chkGroupFolder" data-folderid="${i.Id}" id="${id}"${checkedHtml}/>`;
currentHtml += '<span>' + i.Name + '</span>'; currentHtml += `<span>${i.Name}</span>`;
currentHtml += '</label>'; currentHtml += '</label>';
return currentHtml; return currentHtml;
}).join(''); }).join('');
folderHtml += '</div>'; folderHtml += '</div>';
@ -33,8 +41,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} }
function getLandingScreenOptions(type) { function getLandingScreenOptions(type) {
const list = [];
var list = [];
if (type === 'movies') { if (type === 'movies') {
list.push({ list.push({
@ -122,28 +129,22 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} }
function getLandingScreenOptionsHtml(type, userValue) { function getLandingScreenOptionsHtml(type, userValue) {
return getLandingScreenOptions(type).map(o => {
const selected = userValue === o.value || (o.isDefault && !userValue);
const selectedHtml = selected ? ' selected' : '';
const optionValue = o.isDefault ? '' : o.value;
return getLandingScreenOptions(type).map(function (o) { return `<option value="${optionValue}"${selectedHtml}>${o.name}</option>`;
var selected = userValue === o.value || (o.isDefault && !userValue);
var selectedHtml = selected ? ' selected' : '';
var optionValue = o.isDefault ? '' : o.value;
return '<option value="' + optionValue + '"' + selectedHtml + '>' + o.name + '</option>';
}).join(''); }).join('');
} }
function renderViewOrder(context, user, result) { function renderViewOrder(context, user, result) {
let html = '';
var html = ''; html += result.Items.map((view) => {
let currentHtml = '';
var index = 0; currentHtml += `<div class="listItem viewItem" data-viewid="${view.Id}">`;
html += result.Items.map(function (view) {
var currentHtml = '';
currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">';
currentHtml += '<span class="material-icons listItemIcon folder_open"></span>'; currentHtml += '<span class="material-icons listItemIcon folder_open"></span>';
@ -155,29 +156,25 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
currentHtml += '</div>'; currentHtml += '</div>';
currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><span class="material-icons keyboard_arrow_up"></span></button>'; currentHtml += `<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="${globalize.translate('Up')}"><span class="material-icons keyboard_arrow_up"></span></button>`;
currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><span class="material-icons keyboard_arrow_down"></span></button>'; currentHtml += `<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="${globalize.translate('Down')}"><span class="material-icons keyboard_arrow_down"></span></button>`;
currentHtml += '</div>'; currentHtml += '</div>';
index++;
return currentHtml; return currentHtml;
}).join(''); }).join('');
context.querySelector('.viewOrderList').innerHTML = html; context.querySelector('.viewOrderList').innerHTML = html;
} }
function updateHomeSectionValues(context, userSettings) { function updateHomeSectionValues(context, userSettings) {
for (let i = 1; i <= 7; i++) {
const select = context.querySelector(`#selectHomeSection${i}`);
const defaultValue = homeSections.getDefaultSection(i - 1);
for (var i = 1; i <= 7; i++) { const option = select.querySelector(`option[value=${defaultValue}]`) || select.querySelector('option[value=""]');
var select = context.querySelector('#selectHomeSection' + i); const userValue = userSettings.get(`homesection${i - 1}`);
var defaultValue = homeSections.getDefaultSection(i - 1);
var option = select.querySelector('option[value=' + defaultValue + ']') || select.querySelector('option[value=""]');
var userValue = userSettings.get('homesection' + (i - 1));
option.value = ''; option.value = '';
@ -192,43 +189,39 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} }
function getPerLibrarySettingsHtml(item, user, userSettings, apiClient) { function getPerLibrarySettingsHtml(item, user, userSettings, apiClient) {
let html = '';
var html = ''; let isChecked;
var isChecked;
if (item.Type === 'Channel' || item.CollectionType === 'boxsets' || item.CollectionType === 'playlists') { 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 += '<div>'; html += '<div>';
html += '<label>'; html += '<label>';
html += '<input type="checkbox" is="emby-checkbox" class="chkIncludeInMyMedia" data-folderid="' + item.Id + '"' + (isChecked ? ' checked="checked"' : '') + '/>'; html += `<input type="checkbox" is="emby-checkbox" class="chkIncludeInMyMedia" data-folderid="${item.Id}"${isChecked ? ' checked="checked"' : ''}/>`;
html += '<span>' + globalize.translate('DisplayInMyMedia') + '</span>'; html += `<span>${globalize.translate('DisplayInMyMedia')}</span>`;
html += '</label>'; html += '</label>';
html += '</div>'; html += '</div>';
} }
var excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels']; const excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels'];
if (excludeFromLatest.indexOf(item.CollectionType || '') === -1) { if (!excludeFromLatest.includes(item.CollectionType || '')) {
isChecked = !user.Configuration.LatestItemsExcludes.includes(item.Id);
isChecked = user.Configuration.LatestItemsExcludes.indexOf(item.Id) === -1;
html += '<label class="fldIncludeInLatest">'; html += '<label class="fldIncludeInLatest">';
html += '<input type="checkbox" is="emby-checkbox" class="chkIncludeInLatest" data-folderid="' + item.Id + '"' + (isChecked ? ' checked="checked"' : '') + '/>'; html += `<input type="checkbox" is="emby-checkbox" class="chkIncludeInLatest" data-folderid="${item.Id}"${isChecked ? ' checked="checked"' : ''}/>`;
html += '<span>' + globalize.translate('DisplayInOtherHomeScreenSections') + '</span>'; html += `<span>${globalize.translate('DisplayInOtherHomeScreenSections')}</span>`;
html += '</label>'; html += '</label>';
} }
if (html) { if (html) {
html = `<div class="checkboxListContainer">${html}</div>`;
html = '<div class="checkboxListContainer">' + html + '</div>';
} }
if (item.CollectionType === 'movies' || item.CollectionType === 'tvshows' || item.CollectionType === 'music' || item.CollectionType === 'livetv') { if (item.CollectionType === 'movies' || item.CollectionType === 'tvshows' || item.CollectionType === 'music' || item.CollectionType === 'livetv') {
const idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id;
var idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id;
html += '<div class="selectContainer">'; html += '<div class="selectContainer">';
html += '<select is="emby-select" class="selectLanding" data-folderid="' + idForLanding + '" label="' + globalize.translate('LabelDefaultScreen') + '">'; html += `<select is="emby-select" class="selectLanding" data-folderid="${idForLanding}" label="${globalize.translate('LabelDefaultScreen')}">`;
var userValue = userSettings.get('landing-' + idForLanding); const userValue = userSettings.get(`landing-${idForLanding}`);
html += getLandingScreenOptionsHtml(item.CollectionType, userValue); html += getLandingScreenOptionsHtml(item.CollectionType, userValue);
@ -237,8 +230,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} }
if (html) { if (html) {
let prefix = '';
var prefix = '';
prefix += '<div class="verticalSection">'; prefix += '<div class="verticalSection">';
prefix += '<h2 class="sectionTitle">'; prefix += '<h2 class="sectionTitle">';
@ -253,12 +245,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} }
function renderPerLibrarySettings(context, user, userViews, userSettings, apiClient) { function renderPerLibrarySettings(context, user, userViews, userSettings, apiClient) {
const elem = context.querySelector('.perLibrarySettings');
let html = '';
var elem = context.querySelector('.perLibrarySettings'); for (let i = 0, length = userViews.length; i < length; i++) {
var html = '';
for (var i = 0, length = userViews.length; i < length; i++) {
html += getPerLibrarySettingsHtml(userViews[i], user, userSettings, apiClient); html += getPerLibrarySettingsHtml(userViews[i], user, userSettings, apiClient);
} }
@ -266,16 +256,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} }
function loadForm(context, user, userSettings, apiClient) { function loadForm(context, user, userSettings, apiClient) {
context.querySelector('.chkHidePlayedFromLatest').checked = user.Configuration.HidePlayedInLatest || false; context.querySelector('.chkHidePlayedFromLatest').checked = user.Configuration.HidePlayedInLatest || false;
updateHomeSectionValues(context, userSettings); updateHomeSectionValues(context, userSettings);
var promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id); const promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id);
var promise2 = apiClient.getJSON(apiClient.getUrl('Users/' + user.Id + '/GroupingOptions')); 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]); renderViewOrder(context, user, responses[0]);
renderPerLibrarySettings(context, user, responses[0].Items, userSettings, apiClient); renderPerLibrarySettings(context, user, responses[0].Items, userSettings, apiClient);
@ -286,48 +274,23 @@ 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) { function onSectionOrderListClick(e) {
const target = dom.parentWithClass(e.target, 'btnViewItemMove');
var target = dom.parentWithClass(e.target, 'btnViewItemMove');
if (target) { if (target) {
var viewItem = dom.parentWithClass(target, 'viewItem'); const viewItem = dom.parentWithClass(target, 'viewItem');
if (viewItem) { if (viewItem) {
var ul = dom.parentWithClass(viewItem, 'paperList');
if (target.classList.contains('btnViewItemDown')) { if (target.classList.contains('btnViewItemDown')) {
const next = viewItem.nextSibling;
var next = viewItem.nextSibling;
if (next) { if (next) {
viewItem.parentNode.removeChild(viewItem); viewItem.parentNode.removeChild(viewItem);
next.parentNode.insertBefore(viewItem, next.nextSibling); next.parentNode.insertBefore(viewItem, next.nextSibling);
focusManager.focus(e.target); focusManager.focus(e.target);
} }
} else { } else {
const prev = viewItem.previousSibling;
var prev = viewItem.previousSibling;
if (prev) { if (prev) {
viewItem.parentNode.removeChild(viewItem); viewItem.parentNode.removeChild(viewItem);
@ -340,44 +303,37 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} }
function getCheckboxItems(selector, context, isChecked) { function getCheckboxItems(selector, context, isChecked) {
const inputs = context.querySelectorAll(selector);
const list = [];
var inputs = context.querySelectorAll(selector); for (let i = 0, length = inputs.length; i < length; i++) {
var list = [];
for (var i = 0, length = inputs.length; i < length; i++) {
if (inputs[i].checked === isChecked) { if (inputs[i].checked === isChecked) {
list.push(inputs[i]); list.push(inputs[i]);
} }
} }
return list; return list;
} }
function saveUser(context, user, userSettingsInstance, apiClient) { function saveUser(context, user, userSettingsInstance, apiClient) {
user.Configuration.HidePlayedInLatest = context.querySelector('.chkHidePlayedFromLatest').checked; 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'); 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'); 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'); return i.getAttribute('data-folderid');
}); });
var viewItems = context.querySelectorAll('.viewItem'); const viewItems = context.querySelectorAll('.viewItem');
var orderedViews = []; const orderedViews = [];
var i; let i;
var length; let length;
for (i = 0, length = viewItems.length; i < length; i++) { for (i = 0, length = viewItems.length; i < length; i++) {
orderedViews.push(viewItems[i].getAttribute('data-viewid')); orderedViews.push(viewItems[i].getAttribute('data-viewid'));
} }
@ -394,48 +350,42 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
userSettingsInstance.set('homesection5', context.querySelector('#selectHomeSection6').value); userSettingsInstance.set('homesection5', context.querySelector('#selectHomeSection6').value);
userSettingsInstance.set('homesection6', context.querySelector('#selectHomeSection7').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++) { for (i = 0, length = selectLandings.length; i < length; i++) {
var selectLanding = selectLandings[i]; const selectLanding = selectLandings[i];
userSettingsInstance.set('landing-' + selectLanding.getAttribute('data-folderid'), selectLanding.value); userSettingsInstance.set(`landing-${selectLanding.getAttribute('data-folderid')}`, selectLanding.value);
} }
return apiClient.updateUserConfiguration(user.Id, user.Configuration); return apiClient.updateUserConfiguration(user.Id, user.Configuration);
} }
function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
loading.show(); loading.show();
apiClient.getUser(userId).then(function (user) { apiClient.getUser(userId).then(user => {
saveUser(context, user, userSettings, apiClient).then(() => {
saveUser(context, user, userSettings, apiClient).then(function () {
loading.hide(); loading.hide();
if (enableSaveConfirmation) { if (enableSaveConfirmation) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('SettingsSaved')); toast(globalize.translate('SettingsSaved'));
}); });
} }
events.trigger(instance, 'saved'); events.trigger(instance, 'saved');
}, () => {
}, function () {
loading.hide(); loading.hide();
}); });
}); });
} }
function onSubmit(e) { function onSubmit(e) {
const self = this;
const apiClient = connectionManager.getApiClient(self.options.serverId);
const userId = self.options.userId;
const userSettings = self.options.userSettings;
var self = this; userSettings.setUserInfo(userId, apiClient).then(() => {
var apiClient = connectionManager.getApiClient(self.options.serverId); const enableSaveConfirmation = self.options.enableSaveConfirmation;
var userId = self.options.userId;
var userSettings = self.options.userSettings;
userSettings.setUserInfo(userId, apiClient).then(function () {
var enableSaveConfirmation = self.options.enableSaveConfirmation;
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
}); });
@ -447,14 +397,13 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} }
function onChange(e) { function onChange(e) {
const chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia');
var chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia');
if (!chkIncludeInMyMedia) { if (!chkIncludeInMyMedia) {
return; return;
} }
var section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection'); const section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection');
var fldIncludeInLatest = section.querySelector('.fldIncludeInLatest'); const fldIncludeInLatest = section.querySelector('.fldIncludeInLatest');
if (fldIncludeInLatest) { if (fldIncludeInLatest) {
if (chkIncludeInMyMedia.checked) { if (chkIncludeInMyMedia.checked) {
fldIncludeInLatest.classList.remove('hide'); fldIncludeInLatest.classList.remove('hide');
@ -465,14 +414,12 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} }
function embed(options, self) { function embed(options, self) {
return import('text!./homeScreenSettings.template.html').then(({default: template}) => {
require(['text!./homeScreenSettings.template.html'], function (template) { for (let i = 1; i <= numConfigurableSections; i++) {
template = template.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i));
for (var 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('.viewOrderList').addEventListener('click', onSectionOrderListClick);
options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
@ -492,28 +439,24 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
}); });
} }
function HomeScreenSettings(options) { class HomeScreenSettings {
constructor(options) {
this.options = options; this.options = options;
embed(options, this); embed(options, this);
} }
HomeScreenSettings.prototype.loadData = function (autoFocus) { loadData(autoFocus) {
const self = this;
var self = this; const context = self.options.element;
var context = self.options.element;
loading.show(); loading.show();
var userId = self.options.userId; const userId = self.options.userId;
var apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
var userSettings = self.options.userSettings; const userSettings = self.options.userSettings;
apiClient.getUser(userId).then(function (user) {
userSettings.setUserInfo(userId, apiClient).then(function () {
apiClient.getUser(userId).then(user => {
userSettings.setUserInfo(userId, apiClient).then(() => {
self.dataLoaded = true; self.dataLoaded = true;
loadForm(context, user, userSettings, apiClient); loadForm(context, user, userSettings, apiClient);
@ -523,16 +466,17 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} }
}); });
}); });
}; }
HomeScreenSettings.prototype.submit = function () { submit() {
onSubmit.call(this); onSubmit.call(this);
}; }
HomeScreenSettings.prototype.destroy = function () {
destroy() {
this.options = null; this.options = null;
}; }
}
return HomeScreenSettings; /* eslint-enable indent */
});
export default HomeScreenSettings;

185
src/components/homesections/homesections.js
View file

@ -1,7 +1,20 @@
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) { import connectionManager from 'connectionManager';
'use strict'; import cardBuilder from 'cardBuilder';
import dom from 'dom';
import layoutManager from 'layoutManager';
import imageLoader from 'imageLoader';
import globalize from 'globalize';
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) { switch (index) {
case 0: case 0:
return 'smalllibrarytiles'; return 'smalllibrarytiles';
@ -23,9 +36,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function getAllSectionsToShow(userSettings, sectionCount) { function getAllSectionsToShow(userSettings, sectionCount) {
var sections = []; const sections = [];
for (var i = 0, length = sectionCount; i < length; i++) { for (let i = 0, length = sectionCount; i < length; i++) {
var section = userSettings.get('homesection' + i) || getDefaultSection(i); let section = userSettings.get('homesection' + i) || getDefaultSection(i);
if (section === 'folders') { if (section === 'folders') {
section = getDefaultSection(0); section = getDefaultSection(0);
} }
@ -36,22 +49,22 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
return sections; return sections;
} }
function loadSections(elem, apiClient, user, userSettings) { export function loadSections(elem, apiClient, user, userSettings) {
return getUserViews(apiClient, user.Id).then(function (userViews) { return getUserViews(apiClient, user.Id).then(function (userViews) {
var html = ''; let html = '';
if (userViews.length) { if (userViews.length) {
var sectionCount = 7; const sectionCount = 7;
for (var i = 0; i < sectionCount; i++) { for (let i = 0; i < sectionCount; i++) {
html += '<div class="verticalSection section' + i + '"></div>'; html += '<div class="verticalSection section' + i + '"></div>';
} }
elem.innerHTML = html; elem.innerHTML = html;
elem.classList.add('homeSectionsContainer'); elem.classList.add('homeSectionsContainer');
var promises = []; const promises = [];
var sections = getAllSectionsToShow(userSettings, sectionCount); const sections = getAllSectionsToShow(userSettings, sectionCount);
for (var i = 0; i < sections.length; i++) { for (let i = 0; i < sections.length; i++) {
promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i)); promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i));
} }
@ -62,7 +75,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
}); });
}); });
} else { } else {
var noLibDescription; let noLibDescription;
if (user['Policy'] && user['Policy']['IsAdministrator']) { if (user['Policy'] && user['Policy']['IsAdministrator']) {
noLibDescription = globalize.translate('NoCreatedLibraries', '<br><a id="button-createLibrary" class="button-link">', '</a>'); noLibDescription = globalize.translate('NoCreatedLibraries', '<br><a id="button-createLibrary" class="button-link">', '</a>');
} else { } else {
@ -75,7 +88,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
html += '</div>'; html += '</div>';
elem.innerHTML = html; elem.innerHTML = html;
var createNowLink = elem.querySelector('#button-createLibrary'); const createNowLink = elem.querySelector('#button-createLibrary');
if (createNowLink) { if (createNowLink) {
createNowLink.addEventListener('click', function () { createNowLink.addEventListener('click', function () {
Dashboard.navigate('library.html'); Dashboard.navigate('library.html');
@ -85,9 +98,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
}); });
} }
function destroySections(elem) { export function destroySections(elem) {
var elems = elem.querySelectorAll('.itemsContainer'); const elems = elem.querySelectorAll('.itemsContainer');
for (var i = 0; i < elems.length; i++) { for (let i = 0; i < elems.length; i++) {
elems[i].fetchData = null; elems[i].fetchData = null;
elems[i].parentContainer = null; elems[i].parentContainer = null;
elems[i].getItemsHtml = null; elems[i].getItemsHtml = null;
@ -96,35 +109,32 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.innerHTML = ''; elem.innerHTML = '';
} }
function pause(elem) { export function pause(elem) {
var elems = elem.querySelectorAll('.itemsContainer'); const elems = elem.querySelectorAll('.itemsContainer');
for (var i = 0; i < elems.length; i++) { for (let i = 0; i < elems.length; i++) {
elems[i].pause(); elems[i].pause();
} }
} }
function resume(elem, options) { export function resume(elem, options) {
var elems = elem.querySelectorAll('.itemsContainer'); const elems = elem.querySelectorAll('.itemsContainer');
var i; const promises = [];
var length;
var 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)); promises.push(elems[i].resume(options));
} }
var promise = Promise.all(promises); const promise = Promise.all(promises);
if (!options || options.returnPromise !== false) { if (!options || options.returnPromise !== false) {
return promise; return promise;
} }
} }
function loadSection(page, apiClient, user, userSettings, userViews, allSections, index) { function loadSection(page, apiClient, user, userSettings, userViews, allSections, index) {
const section = allSections[index];
const userId = user.Id;
var section = allSections[index]; const elem = page.querySelector('.section' + index);
var userId = user.Id;
var elem = page.querySelector('.section' + index);
if (section === 'latestmedia') { if (section === 'latestmedia') {
loadRecentlyAdded(elem, apiClient, user, userViews); loadRecentlyAdded(elem, apiClient, user, userViews);
@ -172,7 +182,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function getLibraryButtonsHtml(items) { function getLibraryButtonsHtml(items) {
var html = ''; let html = '';
html += '<div class="verticalSection verticalSection-extrabottompadding">'; html += '<div class="verticalSection verticalSection-extrabottompadding">';
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
@ -180,9 +190,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-multiselect="false">'; html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-multiselect="false">';
// library card background images // library card background images
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 icon = imageHelper.getLibraryIcon(item.CollectionType); const icon = imageHelper.getLibraryIcon(item.CollectionType);
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><span class="material-icons homeLibraryIcon ' + icon + '"></span><span class="homeLibraryText">' + item.Name + '</span></a>'; html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><span class="material-icons homeLibraryIcon ' + icon + '"></span><span class="homeLibraryText">' + item.Name + '</span></a>';
} }
@ -194,24 +204,16 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function loadlibraryButtons(elem, apiClient, user, userSettings, userViews) { function loadlibraryButtons(elem, apiClient, user, userSettings, userViews) {
elem.classList.remove('verticalSection'); elem.classList.remove('verticalSection');
var html = getLibraryButtonsHtml(userViews); const html = getLibraryButtonsHtml(userViews);
elem.innerHTML = html; elem.innerHTML = html;
imageLoader.lazyChildren(elem); imageLoader.lazyChildren(elem);
} }
/**
* Returns a random integer between min (inclusive) and max (inclusive)
* Using Math.round() will give you a non-uniform distribution!
*/
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getFetchLatestItemsFn(serverId, parentId, collectionType) { function getFetchLatestItemsFn(serverId, parentId, collectionType) {
return function () { return function () {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
var limit = 16; let limit = 16;
if (enableScrollX()) { if (enableScrollX()) {
if (collectionType === 'music') { if (collectionType === 'music') {
@ -227,7 +229,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
} }
var options = { const options = {
Limit: limit, Limit: limit,
Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,Path', Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,Path',
ImageTypeLimit: 1, ImageTypeLimit: 1,
@ -241,8 +243,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getLatestItemsHtmlFn(itemType, viewType) { function getLatestItemsHtmlFn(itemType, viewType) {
return function (items) { return function (items) {
var cardLayout = false; const cardLayout = false;
var shape; let shape;
if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') { if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') {
shape = getPortraitShape(); shape = getPortraitShape();
} else if (viewType === 'music' || viewType === 'homevideos') { } else if (viewType === 'music' || viewType === 'homevideos') {
@ -272,7 +274,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function renderLatestSection(elem, apiClient, user, parent) { function renderLatestSection(elem, apiClient, user, parent) {
var html = ''; let html = '';
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">'; html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
if (!layoutManager.tv) { if (!layoutManager.tv) {
@ -303,7 +305,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.innerHTML = html; elem.innerHTML = html;
var itemsContainer = elem.querySelector('.itemsContainer'); const itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType); itemsContainer.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType);
itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType); itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType);
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
@ -311,10 +313,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function loadRecentlyAdded(elem, apiClient, user, userViews) { function loadRecentlyAdded(elem, apiClient, user, userViews) {
elem.classList.remove('verticalSection'); 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++) { for (let i = 0, length = userViews.length; i < length; i++) {
var item = userViews[i]; const item = userViews[i];
if (user.Configuration.LatestItemsExcludes.indexOf(item.Id) !== -1) { if (user.Configuration.LatestItemsExcludes.indexOf(item.Id) !== -1) {
continue; continue;
} }
@ -323,7 +325,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
continue; continue;
} }
var frag = document.createElement('div'); const frag = document.createElement('div');
frag.classList.add('verticalSection'); frag.classList.add('verticalSection');
frag.classList.add('hide'); frag.classList.add('hide');
elem.appendChild(frag); elem.appendChild(frag);
@ -332,14 +334,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
} }
function getRequirePromise(deps) { export function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) {
return new Promise(function (resolve, reject) { let html = '';
require(deps, resolve);
});
}
function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) {
var html = '';
if (userViews.length) { if (userViews.length) {
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
if (enableScrollX()) { if (enableScrollX()) {
@ -372,10 +368,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getContinueWatchingFetchFn(serverId) { function getContinueWatchingFetchFn(serverId) {
return function () { return function () {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
var screenWidth = dom.getWindowSize().innerWidth; const screenWidth = dom.getWindowSize().innerWidth;
var limit; let limit;
if (enableScrollX()) { if (enableScrollX()) {
limit = 12; limit = 12;
} else { } else {
@ -383,7 +379,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
limit = Math.min(limit, 5); limit = Math.min(limit, 5);
} }
var options = { const options = {
Limit: limit, Limit: limit,
Recursive: true, Recursive: true,
Fields: 'PrimaryImageAspectRatio,BasicSyncInfo', Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
@ -398,7 +394,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function getContinueWatchingItemsHtml(items) { function getContinueWatchingItemsHtml(items) {
var cardLayout = false; const cardLayout = false;
return cardBuilder.getCardsHtml({ return cardBuilder.getCardsHtml({
items: items, items: items,
preferThumb: true, preferThumb: true,
@ -419,7 +415,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function loadResumeVideo(elem, apiClient, userId) { function loadResumeVideo(elem, apiClient, userId) {
var html = ''; let html = '';
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
if (enableScrollX()) { if (enableScrollX()) {
@ -437,7 +433,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.classList.add('hide'); elem.classList.add('hide');
elem.innerHTML = html; elem.innerHTML = html;
var itemsContainer = elem.querySelector('.itemsContainer'); const itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.fetchData = getContinueWatchingFetchFn(apiClient.serverId()); itemsContainer.fetchData = getContinueWatchingFetchFn(apiClient.serverId());
itemsContainer.getItemsHtml = getContinueWatchingItemsHtml; itemsContainer.getItemsHtml = getContinueWatchingItemsHtml;
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
@ -445,10 +441,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getContinueListeningFetchFn(serverId) { function getContinueListeningFetchFn(serverId) {
return function () { return function () {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
var screenWidth = dom.getWindowSize().innerWidth; const screenWidth = dom.getWindowSize().innerWidth;
var limit; let limit;
if (enableScrollX()) { if (enableScrollX()) {
limit = 12; limit = 12;
} else { } else {
@ -456,7 +452,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
limit = Math.min(limit, 5); limit = Math.min(limit, 5);
} }
var options = { const options = {
Limit: limit, Limit: limit,
Recursive: true, Recursive: true,
Fields: 'PrimaryImageAspectRatio,BasicSyncInfo', Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
@ -471,7 +467,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function getContinueListeningItemsHtml(items) { function getContinueListeningItemsHtml(items) {
var cardLayout = false; const cardLayout = false;
return cardBuilder.getCardsHtml({ return cardBuilder.getCardsHtml({
items: items, items: items,
preferThumb: true, preferThumb: true,
@ -492,7 +488,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function loadResumeAudio(elem, apiClient, userId) { function loadResumeAudio(elem, apiClient, userId) {
var html = ''; let html = '';
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
if (enableScrollX()) { if (enableScrollX()) {
@ -510,7 +506,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.classList.add('hide'); elem.classList.add('hide');
elem.innerHTML = html; elem.innerHTML = html;
var itemsContainer = elem.querySelector('.itemsContainer'); const itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.fetchData = getContinueListeningFetchFn(apiClient.serverId()); itemsContainer.fetchData = getContinueListeningFetchFn(apiClient.serverId());
itemsContainer.getItemsHtml = getContinueListeningItemsHtml; itemsContainer.getItemsHtml = getContinueListeningItemsHtml;
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
@ -518,7 +514,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getOnNowFetchFn(serverId) { function getOnNowFetchFn(serverId) {
return function () { return function () {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return apiClient.getLiveTvRecommendedPrograms({ return apiClient.getLiveTvRecommendedPrograms({
userId: apiClient.getCurrentUserId(), userId: apiClient.getCurrentUserId(),
IsAiring: true, IsAiring: true,
@ -532,7 +528,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function getOnNowItemsHtml(items) { function getOnNowItemsHtml(items) {
var cardLayout = false;
return cardBuilder.getCardsHtml({ return cardBuilder.getCardsHtml({
items: items, items: items,
preferThumb: 'auto', preferThumb: 'auto',
@ -559,7 +554,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
return Promise.resolve(); return Promise.resolve();
} }
var userId = user.Id;
return apiClient.getLiveTvRecommendedPrograms({ return apiClient.getLiveTvRecommendedPrograms({
userId: apiClient.getCurrentUserId(), userId: apiClient.getCurrentUserId(),
IsAiring: true, IsAiring: true,
@ -569,7 +563,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
EnableTotalRecordCount: false, EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio' Fields: 'ChannelInfo,PrimaryImageAspectRatio'
}).then(function (result) { }).then(function (result) {
var html = ''; let html = '';
if (result.Items.length) { if (result.Items.length) {
elem.classList.remove('padded-left'); elem.classList.remove('padded-left');
elem.classList.remove('padded-right'); elem.classList.remove('padded-right');
@ -632,7 +626,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
html += '</h2>'; html += '</h2>';
html += '<span class="material-icons chevron_right"></span>'; html += '<span class="material-icons chevron_right"></span>';
html += '</a>'; html += '</a>';
} else { } else {
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderOnNow') + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderOnNow') + '</h2>';
} }
@ -654,7 +647,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.innerHTML = html; elem.innerHTML = html;
var itemsContainer = elem.querySelector('.itemsContainer'); const itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId()); itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId());
itemsContainer.getItemsHtml = getOnNowItemsHtml; itemsContainer.getItemsHtml = getOnNowItemsHtml;
@ -664,7 +657,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getNextUpFetchFn(serverId) { function getNextUpFetchFn(serverId) {
return function () { return function () {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return apiClient.getNextUpEpisodes({ return apiClient.getNextUpEpisodes({
Limit: enableScrollX() ? 24 : 15, Limit: enableScrollX() ? 24 : 15,
Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo,Path', Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo,Path',
@ -677,7 +670,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function getNextUpItemsHtml(items) { function getNextUpItemsHtml(items) {
var cardLayout = false; const cardLayout = false;
return cardBuilder.getCardsHtml({ return cardBuilder.getCardsHtml({
items: items, items: items,
preferThumb: true, preferThumb: true,
@ -695,7 +688,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function loadNextUp(elem, apiClient, userId) { function loadNextUp(elem, apiClient, userId) {
var html = ''; let html = '';
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">'; html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
if (!layoutManager.tv) { if (!layoutManager.tv) {
@ -727,7 +720,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.classList.add('hide'); elem.classList.add('hide');
elem.innerHTML = html; elem.innerHTML = html;
var itemsContainer = elem.querySelector('.itemsContainer'); const itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.fetchData = getNextUpFetchFn(apiClient.serverId()); itemsContainer.fetchData = getNextUpFetchFn(apiClient.serverId());
itemsContainer.getItemsHtml = getNextUpItemsHtml; itemsContainer.getItemsHtml = getNextUpItemsHtml;
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
@ -735,7 +728,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) { function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) {
return function () { return function () {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return apiClient.getLiveTvRecordings({ return apiClient.getLiveTvRecordings({
userId: apiClient.getCurrentUserId(), userId: apiClient.getCurrentUserId(),
Limit: enableScrollX() ? 12 : 5, Limit: enableScrollX() ? 12 : 5,
@ -749,7 +742,6 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getLatestRecordingItemsHtml(activeRecordingsOnly) { function getLatestRecordingItemsHtml(activeRecordingsOnly) {
return function (items) { return function (items) {
var cardLayout = false;
return cardBuilder.getCardsHtml({ return cardBuilder.getCardsHtml({
items: items, items: items,
shape: enableScrollX() ? 'autooverflow' : 'auto', shape: enableScrollX() ? 'autooverflow' : 'auto',
@ -774,11 +766,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function loadLatestLiveTvRecordings(elem, activeRecordingsOnly, apiClient, userId) { function loadLatestLiveTvRecordings(elem, activeRecordingsOnly, apiClient, userId) {
var title = activeRecordingsOnly ? const title = activeRecordingsOnly ?
globalize.translate('HeaderActiveRecordings') : globalize.translate('HeaderActiveRecordings') :
globalize.translate('HeaderLatestRecordings'); globalize.translate('HeaderLatestRecordings');
var html = ''; let html = '';
html += '<div class="sectionTitleContainer sectionTitleContainer-cards">'; html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
@ -799,18 +791,19 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.classList.add('hide'); elem.classList.add('hide');
elem.innerHTML = html; elem.innerHTML = html;
var itemsContainer = elem.querySelector('.itemsContainer'); const itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly); itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly);
itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly); itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly);
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
} }
return { export default {
loadLibraryTiles: loadLibraryTiles, loadLibraryTiles: loadLibraryTiles,
getDefaultSection: getDefaultSection, getDefaultSection: getDefaultSection,
loadSections: loadSections, loadSections: loadSections,
destroySections: destroySections, destroySections: destroySections,
pause: pause, pause: pause,
resume: resume resume: resume
}; };
});
/* eslint-enable indent */

125
src/components/htmlMediaHelper.js
View file

@ -1,17 +1,20 @@
define(['appSettings', 'browser', 'events'], function (appSettings, browser, events) { /* eslint-disable indent */
'use strict';
function getSavedVolume() { import appSettings from 'appSettings' ;
import browser from 'browser';
import events from 'events';
export function getSavedVolume() {
return appSettings.get('volume') || 1; return appSettings.get('volume') || 1;
} }
function saveVolume(value) { export function saveVolume(value) {
if (value) { if (value) {
appSettings.set('volume', value); appSettings.set('volume', value);
} }
} }
function getCrossOriginValue(mediaSource) { export function getCrossOriginValue(mediaSource) {
if (mediaSource.IsRemote) { if (mediaSource.IsRemote) {
return null; return null;
} }
@ -30,34 +33,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
return false; return false;
} }
function enableHlsShakaPlayer(item, mediaSource, mediaType) { export function enableHlsJsPlayer(runTimeTicks, mediaType) {
/* eslint-disable-next-line compat/compat */
if (!!window.MediaSource && !!MediaSource.isTypeSupported) {
if (canPlayNativeHls()) {
if (browser.edge && mediaType === 'Video') {
return true;
}
// simple playback should use the native support
if (mediaSource.RunTimeTicks) {
//if (!browser.edge) {
//return false;
//}
}
//return false;
}
return true;
}
return false;
}
function enableHlsJsPlayer(runTimeTicks, mediaType) {
if (window.MediaSource == null) { if (window.MediaSource == null) {
return false; return false;
} }
@ -73,7 +49,6 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
if (canPlayNativeHls()) { if (canPlayNativeHls()) {
// Having trouble with chrome's native support and transcoded music // Having trouble with chrome's native support and transcoded music
if (browser.android && mediaType === 'Audio') { if (browser.android && mediaType === 'Audio') {
return true; return true;
@ -98,8 +73,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
var recoverDecodingErrorDate; var recoverDecodingErrorDate;
var recoverSwapAudioCodecDate; var recoverSwapAudioCodecDate;
function handleHlsJsMediaError(instance, reject) { export function handleHlsJsMediaError(instance, reject) {
var hlsPlayer = instance._hlsPlayer; var hlsPlayer = instance._hlsPlayer;
if (!hlsPlayer) { if (!hlsPlayer) {
@ -134,8 +108,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
} }
function onErrorInternal(instance, type) { export function onErrorInternal(instance, type) {
// Needed for video // Needed for video
if (instance.destroyCustomTrack) { if (instance.destroyCustomTrack) {
instance.destroyCustomTrack(instance._mediaElement); instance.destroyCustomTrack(instance._mediaElement);
@ -148,7 +121,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) { if (duration && !isNaN(duration) && duration !== Number.POSITIVE_INFINITY && duration !== Number.NEGATIVE_INFINITY) {
return true; return true;
} }
@ -162,13 +135,10 @@ 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; var seconds = (ticks || 0) / 10000000;
if (seconds) { if (seconds) {
var src = (instance.currentSrc() || '').toLowerCase();
// Appending #t=xxx to the query string doesn't seem to work with HLS // Appending #t=xxx to the query string doesn't seem to work with HLS
// For plain video files, not all browsers support it either // For plain video files, not all browsers support it either
@ -200,12 +170,9 @@ 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) { if (window.Windows && options.mediaSource && options.mediaSource.IsLocal) {
return Windows.Storage.StorageFile.getFileFromPathAsync(options.url).then(function (file) { return Windows.Storage.StorageFile.getFileFromPathAsync(options.url).then(function (file) {
var playlist = new Windows.Media.Playback.MediaPlaybackList(); var playlist = new Windows.Media.Playback.MediaPlaybackList();
var source1 = Windows.Media.Core.MediaSource.createFromStorageFile(file); var source1 = Windows.Media.Core.MediaSource.createFromStorageFile(file);
@ -214,9 +181,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
elem.src = URL.createObjectURL(playlist, { oneTimeOnly: true }); elem.src = URL.createObjectURL(playlist, { oneTimeOnly: true });
return Promise.resolve(); return Promise.resolve();
}); });
} else { } else {
elem.src = src; elem.src = src;
} }
@ -224,18 +189,15 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
function onSuccessfulPlay(elem, onErrorFn) { function onSuccessfulPlay(elem, onErrorFn) {
elem.addEventListener('error', onErrorFn); elem.addEventListener('error', onErrorFn);
} }
function playWithPromise(elem, onErrorFn) { export function playWithPromise(elem, onErrorFn) {
try { try {
var promise = elem.play(); var promise = elem.play();
if (promise && promise.then) { if (promise && promise.then) {
// Chrome now returns a promise // Chrome now returns a promise
return promise.catch(function (e) { return promise.catch(function (e) {
var errorName = (e.name || '').toLowerCase(); var errorName = (e.name || '').toLowerCase();
// safari uses aborterror // safari uses aborterror
if (errorName === 'notallowederror' || if (errorName === 'notallowederror' ||
@ -256,8 +218,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
} }
function destroyCastPlayer(instance) { export function destroyCastPlayer(instance) {
var player = instance._castPlayer; var player = instance._castPlayer;
if (player) { if (player) {
try { try {
@ -270,20 +231,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
} }
function destroyShakaPlayer(instance) { export function destroyHlsPlayer(instance) {
var player = instance._shakaPlayer;
if (player) {
try {
player.destroy();
} catch (err) {
console.error(err);
}
instance._shakaPlayer = null;
}
}
function destroyHlsPlayer(instance) {
var player = instance._hlsPlayer; var player = instance._hlsPlayer;
if (player) { if (player) {
try { try {
@ -296,7 +244,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
} }
function destroyFlvPlayer(instance) { export function destroyFlvPlayer(instance) {
var player = instance._flvPlayer; var player = instance._flvPlayer;
if (player) { if (player) {
try { try {
@ -311,11 +259,9 @@ 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 () { hls.on(Hls.Events.MANIFEST_PARSED, function () {
playWithPromise(elem, onErrorFn).then(resolve, function () { playWithPromise(elem, onErrorFn).then(resolve, function () {
if (reject) { if (reject) {
reject(); reject();
reject = null; reject = null;
@ -324,14 +270,12 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
}); });
hls.on(Hls.Events.ERROR, function (event, data) { hls.on(Hls.Events.ERROR, function (event, data) {
console.error('HLS Error: Type: ' + data.type + ' Details: ' + (data.details || '') + ' Fatal: ' + (data.fatal || false)); console.error('HLS Error: Type: ' + data.type + ' Details: ' + (data.details || '') + ' Fatal: ' + (data.fatal || false));
switch (data.type) { switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR: case Hls.ErrorTypes.NETWORK_ERROR:
// try to recover network error // try to recover network error
if (data.response && data.response.code && data.response.code >= 400) { if (data.response && data.response.code && data.response.code >= 400) {
console.debug('hls.js response error code: ' + data.response.code); console.debug('hls.js response error code: ' + data.response.code);
// Trigger failure differently depending on whether this is prior to start of playback, or after // Trigger failure differently depending on whether this is prior to start of playback, or after
@ -345,7 +289,6 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
return; return;
} }
break; break;
@ -358,7 +301,6 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
case Hls.ErrorTypes.NETWORK_ERROR: case Hls.ErrorTypes.NETWORK_ERROR:
if (data.response && data.response.code === 0) { if (data.response && data.response.code === 0) {
// This could be a CORS error related to access control response headers // This could be a CORS error related to access control response headers
console.debug('hls.js response error code: ' + data.response.code); console.debug('hls.js response error code: ' + data.response.code);
@ -403,8 +345,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
}); });
} }
function onEndedInternal(instance, elem, onErrorFn) { export function onEndedInternal(instance, elem, onErrorFn) {
elem.removeEventListener('error', onErrorFn); elem.removeEventListener('error', onErrorFn);
elem.src = ''; elem.src = '';
@ -413,7 +354,6 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
destroyHlsPlayer(instance); destroyHlsPlayer(instance);
destroyFlvPlayer(instance); destroyFlvPlayer(instance);
destroyShakaPlayer(instance);
destroyCastPlayer(instance); destroyCastPlayer(instance);
var stopInfo = { var stopInfo = {
@ -427,8 +367,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
instance._currentPlayOptions = null; instance._currentPlayOptions = null;
} }
function getBufferedRanges(instance, elem) { export function getBufferedRanges(instance, elem) {
var ranges = []; var ranges = [];
var seekable = elem.buffered || []; var seekable = elem.buffered || [];
@ -441,7 +380,6 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
offset = offset || 0; offset = offset || 0;
for (var i = 0, length = seekable.length; i < length; i++) { for (var i = 0, length = seekable.length; i < length; i++) {
var start = seekable.start(i); var start = seekable.start(i);
var end = seekable.end(i); var end = seekable.end(i);
@ -462,23 +400,4 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
return ranges; return ranges;
} }
return { /* eslint-enable indent */
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
};
});

137
src/components/imageDownloader/imageDownloader.js
View file

@ -1,24 +1,39 @@
define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader', 'browser', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'emby-checkbox', 'paper-icon-button-light', 'emby-button', 'formDialogStyle', 'cardStyle'], function (dom, loading, appHost, dialogHelper, connectionManager, imageLoader, browser, layoutManager, scrollHelper, globalize, require) { import dom from 'dom';
'use strict'; import loading from 'loading';
import appHost from 'apphost';
import dialogHelper from 'dialogHelper';
import connectionManager from 'connectionManager';
import imageLoader from 'imageLoader';
import browser from 'browser';
import layoutManager from 'layoutManager';
import scrollHelper from 'scrollHelper';
import globalize from 'globalize';
import require from 'require';
import 'emby-checkbox';
import 'paper-icon-button-light';
import 'emby-button';
import 'formDialogStyle';
import 'cardStyle';
var enableFocusTransform = !browser.slow && !browser.edge; /* eslint-disable indent */
var currentItemId; const enableFocusTransform = !browser.slow && !browser.edge;
var currentItemType;
var currentResolve; let currentItemId;
var currentReject; let currentItemType;
var hasChanges = false; let currentResolve;
let currentReject;
let hasChanges = false;
// These images can be large and we're seeing memory problems in safari // These images can be large and we're seeing memory problems in safari
var browsableImagePageSize = browser.slow ? 6 : 30; const browsableImagePageSize = browser.slow ? 6 : 30;
var browsableImageStartIndex = 0; let browsableImageStartIndex = 0;
var browsableImageType = 'Primary'; let browsableImageType = 'Primary';
var selectedProvider; let selectedProvider;
function getBaseRemoteOptions() { function getBaseRemoteOptions() {
const options = {};
var options = {};
options.itemId = currentItemId; options.itemId = currentItemId;
@ -26,58 +41,53 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
} }
function reloadBrowsableImages(page, apiClient) { function reloadBrowsableImages(page, apiClient) {
loading.show(); loading.show();
var options = getBaseRemoteOptions(); const options = getBaseRemoteOptions();
options.type = browsableImageType; options.type = browsableImageType;
options.startIndex = browsableImageStartIndex; options.startIndex = browsableImageStartIndex;
options.limit = browsableImagePageSize; options.limit = browsableImagePageSize;
options.IncludeAllLanguages = page.querySelector('#chkAllLanguages').checked; options.IncludeAllLanguages = page.querySelector('#chkAllLanguages').checked;
var provider = selectedProvider || ''; const provider = selectedProvider || '';
if (provider) { if (provider) {
options.ProviderName = provider; options.ProviderName = provider;
} }
apiClient.getAvailableRemoteImages(options).then(function (result) { apiClient.getAvailableRemoteImages(options).then(function (result) {
renderRemoteImages(page, apiClient, result, browsableImageType, options.startIndex, options.limit); renderRemoteImages(page, apiClient, result, browsableImageType, options.startIndex, options.limit);
page.querySelector('#selectBrowsableImageType').value = browsableImageType; page.querySelector('#selectBrowsableImageType').value = browsableImageType;
var providersHtml = result.Providers.map(function (p) { const providersHtml = result.Providers.map(function (p) {
return '<option value="' + p + '">' + p + '</option>'; return '<option value="' + p + '">' + p + '</option>';
}); });
var selectImageProvider = page.querySelector('#selectImageProvider'); const selectImageProvider = page.querySelector('#selectImageProvider');
selectImageProvider.innerHTML = '<option value="">' + globalize.translate('All') + '</option>' + providersHtml; selectImageProvider.innerHTML = '<option value="">' + globalize.translate('All') + '</option>' + providersHtml;
selectImageProvider.value = provider; selectImageProvider.value = provider;
loading.hide(); loading.hide();
}); });
} }
function renderRemoteImages(page, apiClient, imagesResult, imageType, startIndex, limit) { function renderRemoteImages(page, apiClient, imagesResult, imageType, startIndex, limit) {
page.querySelector('.availableImagesPaging').innerHTML = getPagingHtml(startIndex, limit, imagesResult.TotalRecordCount); page.querySelector('.availableImagesPaging').innerHTML = getPagingHtml(startIndex, limit, imagesResult.TotalRecordCount);
var html = ''; let html = '';
for (var i = 0, length = imagesResult.Images.length; i < length; i++) {
for (let i = 0, length = imagesResult.Images.length; i < length; i++) {
html += getRemoteImageHtml(imagesResult.Images[i], imageType, apiClient); html += getRemoteImageHtml(imagesResult.Images[i], imageType, apiClient);
} }
var availableImagesList = page.querySelector('.availableImagesList'); const availableImagesList = page.querySelector('.availableImagesList');
availableImagesList.innerHTML = html; availableImagesList.innerHTML = html;
imageLoader.lazyChildren(availableImagesList); imageLoader.lazyChildren(availableImagesList);
var btnNextPage = page.querySelector('.btnNextPage'); const btnNextPage = page.querySelector('.btnNextPage');
var btnPreviousPage = page.querySelector('.btnPreviousPage'); const btnPreviousPage = page.querySelector('.btnPreviousPage');
if (btnNextPage) { if (btnNextPage) {
btnNextPage.addEventListener('click', function () { btnNextPage.addEventListener('click', function () {
@ -92,23 +102,21 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
reloadBrowsableImages(page, apiClient); reloadBrowsableImages(page, apiClient);
}); });
} }
} }
function getPagingHtml(startIndex, limit, totalRecordCount) { function getPagingHtml(startIndex, limit, totalRecordCount) {
let html = '';
var html = ''; const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
var recordsEnd = Math.min(startIndex + limit, totalRecordCount);
// 20 is the minimum page size // 20 is the minimum page size
var showControls = totalRecordCount > limit; const showControls = totalRecordCount > limit;
html += '<div class="listPaging">'; html += '<div class="listPaging">';
html += '<span style="margin-right: 10px;">'; html += '<span style="margin-right: 10px;">';
var startAtDisplay = totalRecordCount ? startIndex + 1 : 0; const startAtDisplay = totalRecordCount ? startIndex + 1 : 0;
html += globalize.translate('ListPaging', startAtDisplay, recordsEnd, totalRecordCount); html += globalize.translate('ListPaging', startAtDisplay, recordsEnd, totalRecordCount);
html += '</span>'; html += '</span>';
@ -127,7 +135,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
} }
function downloadRemoteImage(page, apiClient, url, type, provider) { function downloadRemoteImage(page, apiClient, url, type, provider) {
var options = getBaseRemoteOptions(); const options = getBaseRemoteOptions();
options.Type = type; options.Type = type;
options.ImageUrl = url; options.ImageUrl = url;
@ -136,9 +144,8 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
loading.show(); loading.show();
apiClient.downloadRemoteImage(options).then(function () { apiClient.downloadRemoteImage(options).then(function () {
hasChanges = true; hasChanges = true;
var dlg = dom.parentWithClass(page, 'dialog'); const dlg = dom.parentWithClass(page, 'dialog');
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
} }
@ -148,17 +155,17 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
} }
function getRemoteImageHtml(image, imageType, apiClient) { function getRemoteImageHtml(image, imageType, apiClient) {
var tagName = layoutManager.tv ? 'button' : 'div'; const tagName = layoutManager.tv ? 'button' : 'div';
var enableFooterButtons = !layoutManager.tv; const enableFooterButtons = !layoutManager.tv;
// TODO move card creation code to Card component // TODO move card creation code to Card component
var html = ''; let html = '';
var cssClass = 'card scalableCard imageEditorCard'; let cssClass = 'card scalableCard imageEditorCard';
var cardBoxCssClass = 'cardBox visualCardBox'; const cardBoxCssClass = 'cardBox visualCardBox';
var shape = 'backdrop'; let shape;
if (imageType === 'Backdrop' || imageType === 'Art' || imageType === 'Thumb' || imageType === 'Logo') { if (imageType === 'Backdrop' || imageType === 'Art' || imageType === 'Thumb' || imageType === 'Logo') {
shape = 'backdrop'; shape = 'backdrop';
} else if (imageType === 'Banner') { } else if (imageType === 'Banner') {
@ -166,7 +173,6 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
} else if (imageType === 'Disc') { } else if (imageType === 'Disc') {
shape = 'square'; shape = 'square';
} else { } else {
if (currentItemType === 'Episode') { if (currentItemType === 'Episode') {
shape = 'backdrop'; shape = 'backdrop';
} else if (currentItemType === 'MusicAlbum' || currentItemType === 'MusicArtist') { } else if (currentItemType === 'MusicAlbum' || currentItemType === 'MusicArtist') {
@ -217,19 +223,16 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
html += '<div class="cardText cardTextCentered">' + image.ProviderName + '</div>'; html += '<div class="cardText cardTextCentered">' + image.ProviderName + '</div>';
if (image.Width || image.Height || image.Language) { if (image.Width || image.Height || image.Language) {
html += '<div class="cardText cardText-secondary cardTextCentered">'; html += '<div class="cardText cardText-secondary cardTextCentered">';
if (image.Width && image.Height) { if (image.Width && image.Height) {
html += image.Width + ' x ' + image.Height; html += image.Width + ' x ' + image.Height;
if (image.Language) { if (image.Language) {
html += ' • ' + image.Language; html += ' • ' + image.Language;
} }
} else { } else {
if (image.Language) { if (image.Language) {
html += image.Language; html += image.Language;
} }
} }
@ -238,13 +241,11 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
} }
if (image.CommunityRating != null) { if (image.CommunityRating != null) {
html += '<div class="cardText cardText-secondary cardTextCentered">'; html += '<div class="cardText cardText-secondary cardTextCentered">';
if (image.RatingType === 'Likes') { if (image.RatingType === 'Likes') {
html += image.CommunityRating + (image.CommunityRating === 1 ? ' like' : ' likes'); html += image.CommunityRating + (image.CommunityRating === 1 ? ' like' : ' likes');
} else { } else {
if (image.CommunityRating) { if (image.CommunityRating) {
html += image.CommunityRating.toFixed(1); html += image.CommunityRating.toFixed(1);
@ -270,7 +271,6 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
// end footer // end footer
html += '</div>'; html += '</div>';
//html += '</div>';
html += '</' + tagName + '>'; html += '</' + tagName + '>';
@ -287,7 +287,6 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
}); });
page.querySelector('#selectImageProvider').addEventListener('change', function () { page.querySelector('#selectImageProvider').addEventListener('change', function () {
browsableImageStartIndex = 0; browsableImageStartIndex = 0;
selectedProvider = this.value; selectedProvider = this.value;
@ -295,22 +294,20 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
}); });
page.querySelector('#chkAllLanguages').addEventListener('change', function () { page.querySelector('#chkAllLanguages').addEventListener('change', function () {
browsableImageStartIndex = 0; browsableImageStartIndex = 0;
reloadBrowsableImages(page, apiClient); reloadBrowsableImages(page, apiClient);
}); });
page.addEventListener('click', function (e) { page.addEventListener('click', function (e) {
const btnDownloadRemoteImage = dom.parentWithClass(e.target, 'btnDownloadRemoteImage');
var btnDownloadRemoteImage = dom.parentWithClass(e.target, 'btnDownloadRemoteImage');
if (btnDownloadRemoteImage) { if (btnDownloadRemoteImage) {
var card = dom.parentWithClass(btnDownloadRemoteImage, 'card'); const card = dom.parentWithClass(btnDownloadRemoteImage, 'card');
downloadRemoteImage(page, apiClient, card.getAttribute('data-imageurl'), card.getAttribute('data-imagetype'), card.getAttribute('data-imageprovider')); downloadRemoteImage(page, apiClient, card.getAttribute('data-imageurl'), card.getAttribute('data-imagetype'), card.getAttribute('data-imageprovider'));
return; return;
} }
var btnImageCard = dom.parentWithClass(e.target, 'btnImageCard'); const btnImageCard = dom.parentWithClass(e.target, 'btnImageCard');
if (btnImageCard) { if (btnImageCard) {
downloadRemoteImage(page, apiClient, btnImageCard.getAttribute('data-imageurl'), btnImageCard.getAttribute('data-imagetype'), btnImageCard.getAttribute('data-imageprovider')); downloadRemoteImage(page, apiClient, btnImageCard.getAttribute('data-imageurl'), btnImageCard.getAttribute('data-imagetype'), btnImageCard.getAttribute('data-imageprovider'));
} }
@ -321,13 +318,12 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
loading.show(); loading.show();
require(['text!./imageDownloader.template.html'], function (template) { require(['text!./imageDownloader.template.html'], function (template) {
const apiClient = connectionManager.getApiClient(serverId);
var apiClient = connectionManager.getApiClient(serverId);
currentItemId = itemId; currentItemId = itemId;
currentItemType = itemType; currentItemType = itemType;
var dialogOptions = { const dialogOptions = {
removeOnClose: true removeOnClose: true
}; };
@ -337,9 +333,9 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.innerHTML = globalize.translateDocument(template, 'core'); dlg.innerHTML = globalize.translateHtml(template, 'core');
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg, false); scrollHelper.centerFocus.on(dlg, false);
@ -350,11 +346,10 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
dialogHelper.open(dlg); dialogHelper.open(dlg);
var editorContent = dlg.querySelector('.formDialogContent'); const editorContent = dlg.querySelector('.formDialogContent');
initEditor(editorContent, apiClient); initEditor(editorContent, apiClient);
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
@ -363,7 +358,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
} }
function onDialogClosed() { function onDialogClosed() {
var dlg = this; const dlg = this;
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.off(dlg, false); scrollHelper.centerFocus.off(dlg, false);
@ -377,8 +372,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
} }
} }
return { export function show(itemId, serverId, itemType, imageType) {
show: function (itemId, serverId, itemType, imageType) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
currentResolve = resolve; currentResolve = resolve;
currentReject = reject; currentReject = reject;
@ -386,9 +380,12 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
browsableImageStartIndex = 0; browsableImageStartIndex = 0;
browsableImageType = imageType || 'Primary'; browsableImageType = imageType || 'Primary';
selectedProvider = null; selectedProvider = null;
showEditor(itemId, serverId, itemType); showEditor(itemId, serverId, itemType);
}); });
} }
};
}); export default {
show: show
};
/* eslint-enable indent */

70
src/components/imageOptionsEditor/imageOptionsEditor.js
View file

@ -1,5 +1,16 @@
define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emby-input'], function (globalize, dom, dialogHelper) { /* eslint-disable indent */
'use strict';
/**
* Module for image Options Editor.
* @module components/imageOptionsEditor/imageOptionsEditor
*/
import globalize from 'globalize';
import dom from 'dom';
import dialogHelper from 'dialogHelper';
import 'emby-checkbox';
import 'emby-select';
import 'emby-input';
function getDefaultImageConfig(itemType, type) { function getDefaultImageConfig(itemType, type) {
return { return {
@ -10,7 +21,7 @@ define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emb
} }
function findImageOptions(imageOptions, type) { function findImageOptions(imageOptions, type) {
return imageOptions.filter(function (i) { return imageOptions.filter(i => {
return i.Type == type; return i.Type == type;
})[0]; })[0];
} }
@ -31,14 +42,14 @@ define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emb
} }
function loadValues(context, itemType, options, availableOptions) { function loadValues(context, itemType, options, availableOptions) {
var supportedImageTypes = availableOptions.SupportedImageTypes || []; const supportedImageTypes = availableOptions.SupportedImageTypes || [];
setVisibilityOfBackdrops(context.querySelector('.backdropFields'), -1 != supportedImageTypes.indexOf('Backdrop')); setVisibilityOfBackdrops(context.querySelector('.backdropFields'), supportedImageTypes.includes('Backdrop'));
setVisibilityOfBackdrops(context.querySelector('.screenshotFields'), -1 != supportedImageTypes.indexOf('Screenshot')); setVisibilityOfBackdrops(context.querySelector('.screenshotFields'), supportedImageTypes.includes('Screenshot'));
Array.prototype.forEach.call(context.querySelectorAll('.imageType'), function (i) { Array.prototype.forEach.call(context.querySelectorAll('.imageType'), i => {
var imageType = i.getAttribute('data-imagetype'); const imageType = i.getAttribute('data-imagetype');
var container = dom.parentWithTag(i, 'LABEL'); const container = dom.parentWithTag(i, 'LABEL');
if (-1 == supportedImageTypes.indexOf(imageType)) { if (!supportedImageTypes.includes(imageType)) {
container.classList.add('hide'); container.classList.add('hide');
} else { } else {
container.classList.remove('hide'); container.classList.remove('hide');
@ -50,16 +61,16 @@ define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emb
i.checked = false; i.checked = false;
} }
}); });
var backdropConfig = getImageConfig(options, availableOptions, 'Backdrop', itemType); const backdropConfig = getImageConfig(options, availableOptions, 'Backdrop', itemType);
context.querySelector('#txtMaxBackdrops').value = backdropConfig.Limit; context.querySelector('#txtMaxBackdrops').value = backdropConfig.Limit;
context.querySelector('#txtMinBackdropDownloadWidth').value = backdropConfig.MinWidth; context.querySelector('#txtMinBackdropDownloadWidth').value = backdropConfig.MinWidth;
var screenshotConfig = getImageConfig(options, availableOptions, 'Screenshot', itemType); const screenshotConfig = getImageConfig(options, availableOptions, 'Screenshot', itemType);
context.querySelector('#txtMaxScreenshots').value = screenshotConfig.Limit; context.querySelector('#txtMaxScreenshots').value = screenshotConfig.Limit;
context.querySelector('#txtMinScreenshotDownloadWidth').value = screenshotConfig.MinWidth; context.querySelector('#txtMinScreenshotDownloadWidth').value = screenshotConfig.MinWidth;
} }
function saveValues(context, options) { function saveValues(context, options) {
options.ImageOptions = Array.prototype.map.call(context.querySelectorAll('.imageType:not(.hide)'), function (c) { options.ImageOptions = Array.prototype.map.call(context.querySelectorAll('.imageType:not(.hide)'), c => {
return { return {
Type: c.getAttribute('data-imagetype'), Type: c.getAttribute('data-imagetype'),
Limit: c.checked ? 1 : 0, Limit: c.checked ? 1 : 0,
@ -78,35 +89,36 @@ define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emb
}); });
} }
function editor() { async function showEditor(itemType, options, availableOptions) {
this.show = function (itemType, options, availableOptions) { const response = await fetch('components/imageOptionsEditor/imageOptionsEditor.template.html');
return new Promise(function (resolve, reject) { const template = await response.text();
var xhr = new XMLHttpRequest();
xhr.open('GET', 'components/imageOptionsEditor/imageOptionsEditor.template.html', true);
xhr.onload = function (e) {
var template = this.response;
var dlg = dialogHelper.createDialog({ var dlg = dialogHelper.createDialog({
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}); });
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.innerHTML = globalize.translateDocument(template); dlg.innerHTML = globalize.translateHtml(template);
dlg.addEventListener('close', function () { dlg.addEventListener('close', function () {
saveValues(dlg, options); saveValues(dlg, options);
}); });
loadValues(dlg, itemType, options, availableOptions); loadValues(dlg, itemType, options, availableOptions);
dialogHelper.open(dlg).then(resolve, resolve); dialogHelper.open(dlg).then(() => {
return;
}).catch(() => {
return;
});
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
};
xhr.send();
});
};
} }
return editor; export class editor {
}); constructor() {
this.show = showEditor;
}
}
/* eslint-enable indent */
export default editor;

100
src/components/imageUploader/imageUploader.js
View file

@ -1,25 +1,40 @@
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) { /* eslint-disable indent */
'use strict';
var currentItemId; /**
var currentServerId; * Module for imageUploader.
var currentFile; * @module components/imageUploader/imageUploader
var hasChanges = false; */
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) { function onFileReaderError(evt) {
loading.hide(); loading.hide();
switch (evt.target.error.code) { switch (evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR: case evt.target.error.NOT_FOUND_ERR:
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageFileReadError')); toast(globalize.translate('MessageFileReadError'));
}); });
break; break;
case evt.target.error.ABORT_ERR: case evt.target.error.ABORT_ERR:
break; // noop break; // noop
default: default:
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageFileReadError')); toast(globalize.translate('MessageFileReadError'));
}); });
break; break;
@ -27,8 +42,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
} }
function setFiles(page, files) { function setFiles(page, files) {
const file = files[0];
var file = files[0];
if (!file || !file.type.match('image.*')) { if (!file || !file.type.match('image.*')) {
page.querySelector('#imageOutput').innerHTML = ''; page.querySelector('#imageOutput').innerHTML = '';
@ -39,23 +53,22 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
currentFile = file; currentFile = file;
var reader = new FileReader(); const reader = new FileReader();
reader.onerror = onFileReaderError; reader.onerror = onFileReaderError;
reader.onloadstart = function () { reader.onloadstart = () => {
page.querySelector('#fldUpload').classList.add('hide'); page.querySelector('#fldUpload').classList.add('hide');
}; };
reader.onabort = function () { reader.onabort = () => {
loading.hide(); loading.hide();
console.debug('File read cancelled'); console.debug('File read cancelled');
}; };
// Closure to capture the file information. // Closure to capture the file information.
reader.onload = (function (theFile) { reader.onload = (theFile => {
return function (e) { return e => {
// Render thumbnail. // Render thumbnail.
var html = ['<img style="max-width:100%;max-height:100%;" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join(''); const html = ['<img style="max-width:100%;max-height:100%;" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
page.querySelector('#imageOutput').innerHTML = html; page.querySelector('#imageOutput').innerHTML = html;
page.querySelector('#dropImageText').classList.add('hide'); page.querySelector('#dropImageText').classList.add('hide');
@ -68,15 +81,14 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
} }
function onSubmit(e) { function onSubmit(e) {
const file = currentFile;
var file = currentFile;
if (!file) { if (!file) {
return false; return false;
} }
if (!file.type.startsWith('image/')) { if (!file.type.startsWith('image/')) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageImageFileTypeAllowed')); toast(globalize.translate('MessageImageFileTypeAllowed'));
}); });
e.preventDefault(); e.preventDefault();
@ -85,19 +97,18 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
loading.show(); 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') { if (imageType === 'None') {
require(['toast'], function(toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageImageTypeNotSelected')); toast(globalize.translate('MessageImageTypeNotSelected'));
}); });
e.preventDefault(); e.preventDefault();
return false; return false;
} }
connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(function () { connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
dlg.querySelector('#uploadImage').value = ''; dlg.querySelector('#uploadImage').value = '';
loading.hide(); loading.hide();
@ -110,28 +121,25 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
} }
function initEditor(page) { function initEditor(page) {
page.querySelector('form').addEventListener('submit', onSubmit); page.querySelector('form').addEventListener('submit', onSubmit);
page.querySelector('#uploadImage').addEventListener('change', function () { page.querySelector('#uploadImage').addEventListener('change', function () {
setFiles(page, this.files); setFiles(page, this.files);
}); });
page.querySelector('.btnBrowse').addEventListener('click', function () { page.querySelector('.btnBrowse').addEventListener('click', () => {
page.querySelector('#uploadImage').click(); page.querySelector('#uploadImage').click();
}); });
} }
function showEditor(options, resolve, reject) { function showEditor(options, resolve) {
options = options || {}; options = options || {};
require(['text!./imageUploader.template.html'], function (template) { return import('text!./imageUploader.template.html').then(({default: template}) => {
currentItemId = options.itemId; currentItemId = options.itemId;
currentServerId = options.serverId; currentServerId = options.serverId;
var dialogOptions = { const dialogOptions = {
removeOnClose: true removeOnClose: true
}; };
@ -141,19 +149,18 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.innerHTML = globalize.translateDocument(template, 'core'); dlg.innerHTML = globalize.translateHtml(template, 'core');
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg, false); scrollHelper.centerFocus.on(dlg, false);
} }
// Has to be assigned a z-index after the call to .open() // Has to be assigned a z-index after the call to .open()
dlg.addEventListener('close', function () { dlg.addEventListener('close', () => {
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.off(dlg, false); scrollHelper.centerFocus.off(dlg, false);
} }
@ -168,22 +175,21 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
dlg.querySelector('#selectImageType').value = options.imageType || 'Primary'; dlg.querySelector('#selectImageType').value = options.imageType || 'Primary';
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
}); });
} }
return { export function show(options) {
show: function (options) { return new Promise(resolve => {
return new Promise(function (resolve, reject) {
hasChanges = false; hasChanges = false;
showEditor(options, resolve, reject); showEditor(options, resolve);
}); });
} }
};
}); /* eslint-enable indent */
export default {
show: show
};

186
src/components/imageeditor/imageeditor.js
View file

@ -1,14 +1,29 @@
define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', 'focusManager', 'globalize', 'scrollHelper', 'imageLoader', 'require', 'browser', 'apphost', 'cardStyle', 'formDialogStyle', 'emby-button', 'paper-icon-button-light', 'css!./imageeditor'], function (dialogHelper, connectionManager, loading, dom, layoutManager, focusManager, globalize, scrollHelper, imageLoader, require, browser, appHost) { import dialogHelper from 'dialogHelper';
'use strict'; import connectionManager from 'connectionManager';
import loading from 'loading';
import dom from 'dom';
import layoutManager from 'layoutManager';
import focusManager from 'focusManager';
import globalize from 'globalize';
import scrollHelper from 'scrollHelper';
import imageLoader from 'imageLoader';
import browser from 'browser';
import appHost from 'apphost';
import 'cardStyle';
import 'formDialogStyle';
import 'emby-button';
import 'paper-icon-button-light';
import 'css!./imageeditor';
var enableFocusTransform = !browser.slow && !browser.edge; /* eslint-disable indent */
var currentItem; const enableFocusTransform = !browser.slow && !browser.edge;
var hasChanges = false;
let currentItem;
let hasChanges = false;
function getBaseRemoteOptions() { function getBaseRemoteOptions() {
const options = {};
var options = {};
options.itemId = currentItem.Id; options.itemId = currentItem.Id;
@ -16,16 +31,14 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function reload(page, item, focusContext) { function reload(page, item, focusContext) {
loading.show(); loading.show();
var apiClient; let apiClient;
if (item) { if (item) {
apiClient = connectionManager.getApiClient(item.ServerId); apiClient = connectionManager.getApiClient(item.ServerId);
reloadItem(page, item, apiClient, focusContext); reloadItem(page, item, apiClient, focusContext);
} else { } else {
apiClient = connectionManager.getApiClient(currentItem.ServerId); apiClient = connectionManager.getApiClient(currentItem.ServerId);
apiClient.getItem(apiClient.getCurrentUserId(), currentItem.Id).then(function (item) { apiClient.getItem(apiClient.getCurrentUserId(), currentItem.Id).then(function (item) {
reloadItem(page, item, apiClient, focusContext); reloadItem(page, item, apiClient, focusContext);
@ -34,9 +47,8 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function addListeners(container, className, eventName, fn) { function addListeners(container, className, eventName, fn) {
container.addEventListener(eventName, function (e) { container.addEventListener(eventName, function (e) {
var elem = dom.parentWithClass(e.target, className); const elem = dom.parentWithClass(e.target, className);
if (elem) { if (elem) {
fn.call(elem, e); fn.call(elem, e);
} }
@ -44,14 +56,11 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function reloadItem(page, item, apiClient, focusContext) { function reloadItem(page, item, apiClient, focusContext) {
currentItem = item; currentItem = item;
apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) { apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) {
const btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
var btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages'); for (let i = 0, length = btnBrowseAllImages.length; i < length; i++) {
for (var i = 0, length = btnBrowseAllImages.length; i < length; i++) {
if (providers.length) { if (providers.length) {
btnBrowseAllImages[i].classList.remove('hide'); btnBrowseAllImages[i].classList.remove('hide');
} else { } else {
@ -60,7 +69,6 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
apiClient.getItemImageInfos(currentItem.Id).then(function (imageInfos) { apiClient.getItemImageInfos(currentItem.Id).then(function (imageInfos) {
renderStandardImages(page, apiClient, item, imageInfos, providers); renderStandardImages(page, apiClient, item, imageInfos, providers);
renderBackdrops(page, apiClient, item, imageInfos, providers); renderBackdrops(page, apiClient, item, imageInfos, providers);
renderScreenshots(page, apiClient, item, imageInfos, providers); renderScreenshots(page, apiClient, item, imageInfos, providers);
@ -74,7 +82,6 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function getImageUrl(item, apiClient, type, index, options) { function getImageUrl(item, apiClient, type, index, options) {
options = options || {}; options = options || {};
options.type = type; options.type = type;
options.index = index; options.index = index;
@ -94,13 +101,12 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function getCardHtml(image, index, numImages, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) { function getCardHtml(image, index, numImages, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) {
// TODO move card creation code to Card component // TODO move card creation code to Card component
var html = ''; let html = '';
var cssClass = 'card scalableCard imageEditorCard'; let cssClass = 'card scalableCard imageEditorCard';
var cardBoxCssClass = 'cardBox visualCardBox'; const cardBoxCssClass = 'cardBox visualCardBox';
cssClass += ' backdropCard backdropCard-scalable'; cssClass += ' backdropCard backdropCard-scalable';
@ -130,7 +136,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
html += '<div class="cardContent">'; html += '<div class="cardContent">';
var imageUrl = getImageUrl(currentItem, apiClient, image.ImageType, image.ImageIndex, { maxWidth: imageSize }); const imageUrl = getImageUrl(currentItem, apiClient, image.ImageType, image.ImageIndex, { maxWidth: imageSize });
html += '<div class="cardImageContainer" style="background-image:url(\'' + imageUrl + '\');background-position:center center;background-size:contain;"></div>'; html += '<div class="cardImageContainer" style="background-image:url(\'' + imageUrl + '\');background-position:center center;background-size:contain;"></div>';
@ -153,7 +159,6 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
html += '<div class="cardText cardTextCentered">'; html += '<div class="cardText cardTextCentered">';
if (image.ImageType === 'Backdrop' || image.ImageType === 'Screenshot') { if (image.ImageType === 'Backdrop' || image.ImageType === 'Screenshot') {
if (index > 0) { if (index > 0) {
html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><span class="material-icons chevron_left"></span></button>'; html += '<button type="button" is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex - 1) + '" title="' + globalize.translate('MoveLeft') + '"><span class="material-icons chevron_left"></span></button>';
} else { } else {
@ -183,13 +188,10 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function deleteImage(context, itemId, type, index, apiClient, enableConfirmation) { function deleteImage(context, itemId, type, index, apiClient, enableConfirmation) {
const afterConfirm = function () {
var afterConfirm = function () {
apiClient.deleteItemImage(itemId, type, index).then(function () { apiClient.deleteItemImage(itemId, type, index).then(function () {
hasChanges = true; hasChanges = true;
reload(context); reload(context);
}); });
}; };
@ -198,8 +200,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
return; return;
} }
require(['confirm'], function (confirm) { import('confirm').then(({default: confirm}) => {
confirm({ confirm({
text: globalize.translate('ConfirmDeleteImage'), text: globalize.translate('ConfirmDeleteImage'),
@ -211,36 +212,30 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function moveImage(context, apiClient, itemId, type, index, newIndex, focusContext) { function moveImage(context, apiClient, itemId, type, index, newIndex, focusContext) {
apiClient.updateItemImageIndex(itemId, type, index, newIndex).then(function () { apiClient.updateItemImageIndex(itemId, type, index, newIndex).then(function () {
hasChanges = true; hasChanges = true;
reload(context, null, focusContext); reload(context, null, focusContext);
}, function () { }, function () {
import('alert').then(({default: alert}) => {
require(['alert'], function (alert) {
alert(globalize.translate('DefaultErrorMessage')); alert(globalize.translate('DefaultErrorMessage'));
}); });
}); });
} }
function renderImages(page, item, apiClient, images, imageProviders, elem) { function renderImages(page, item, apiClient, images, imageProviders, elem) {
let html = '';
var html = ''; let imageSize = 300;
const windowSize = dom.getWindowSize();
var imageSize = 300;
var windowSize = dom.getWindowSize();
if (windowSize.innerWidth >= 1280) { if (windowSize.innerWidth >= 1280) {
imageSize = Math.round(windowSize.innerWidth / 4); imageSize = Math.round(windowSize.innerWidth / 4);
} }
var tagName = layoutManager.tv ? 'button' : 'div'; const tagName = layoutManager.tv ? 'button' : 'div';
var enableFooterButtons = !layoutManager.tv; const enableFooterButtons = !layoutManager.tv;
for (var i = 0, length = images.length; i < length; i++) {
var image = images[i];
for (let i = 0, length = images.length; i < length; i++) {
const image = images[i];
html += getCardHtml(image, i, length, apiClient, imageProviders, imageSize, tagName, enableFooterButtons); html += getCardHtml(image, i, length, apiClient, imageProviders, imageSize, tagName, enableFooterButtons);
} }
@ -249,8 +244,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function renderStandardImages(page, apiClient, item, imageInfos, imageProviders) { function renderStandardImages(page, apiClient, item, imageInfos, imageProviders) {
const images = imageInfos.filter(function (i) {
var images = imageInfos.filter(function (i) {
return i.ImageType !== 'Screenshot' && i.ImageType !== 'Backdrop' && i.ImageType !== 'Chapter'; return i.ImageType !== 'Screenshot' && i.ImageType !== 'Backdrop' && i.ImageType !== 'Chapter';
}); });
@ -258,10 +252,8 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function renderBackdrops(page, apiClient, item, imageInfos, imageProviders) { function renderBackdrops(page, apiClient, item, imageInfos, imageProviders) {
const images = imageInfos.filter(function (i) {
var images = imageInfos.filter(function (i) {
return i.ImageType === 'Backdrop'; return i.ImageType === 'Backdrop';
}).sort(function (a, b) { }).sort(function (a, b) {
return a.ImageIndex - b.ImageIndex; return a.ImageIndex - b.ImageIndex;
}); });
@ -275,10 +267,8 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function renderScreenshots(page, apiClient, item, imageInfos, imageProviders) { function renderScreenshots(page, apiClient, item, imageInfos, imageProviders) {
const images = imageInfos.filter(function (i) {
var images = imageInfos.filter(function (i) {
return i.ImageType === 'Screenshot'; return i.ImageType === 'Screenshot';
}).sort(function (a, b) { }).sort(function (a, b) {
return a.ImageIndex - b.ImageIndex; return a.ImageIndex - b.ImageIndex;
}); });
@ -292,32 +282,26 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
function showImageDownloader(page, imageType) { function showImageDownloader(page, imageType) {
import('imageDownloader').then(({default: ImageDownloader}) => {
require(['imageDownloader'], function (ImageDownloader) {
ImageDownloader.show(currentItem.Id, currentItem.ServerId, currentItem.Type, imageType).then(function () { ImageDownloader.show(currentItem.Id, currentItem.ServerId, currentItem.Type, imageType).then(function () {
hasChanges = true; hasChanges = true;
reload(page); reload(page);
}); });
}); });
} }
function showActionSheet(context, imageCard) { function showActionSheet(context, imageCard) {
const itemId = imageCard.getAttribute('data-id');
const serverId = imageCard.getAttribute('data-serverid');
const apiClient = connectionManager.getApiClient(serverId);
var itemId = imageCard.getAttribute('data-id'); const type = imageCard.getAttribute('data-imagetype');
var serverId = imageCard.getAttribute('data-serverid'); const index = parseInt(imageCard.getAttribute('data-index'));
var apiClient = connectionManager.getApiClient(serverId); const providerCount = parseInt(imageCard.getAttribute('data-providers'));
const numImages = parseInt(imageCard.getAttribute('data-numimages'));
var type = imageCard.getAttribute('data-imagetype'); import('actionsheet').then(({default: actionSheet}) => {
var index = parseInt(imageCard.getAttribute('data-index')); const commands = [];
var providerCount = parseInt(imageCard.getAttribute('data-providers'));
var numImages = parseInt(imageCard.getAttribute('data-numimages'));
require(['actionsheet'], function (actionSheet) {
var commands = [];
commands.push({ commands.push({
name: globalize.translate('Delete'), name: globalize.translate('Delete'),
@ -353,9 +337,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
positionTo: imageCard positionTo: imageCard
}).then(function (id) { }).then(function (id) {
switch (id) { switch (id) {
case 'delete': case 'delete':
deleteImage(context, itemId, type, index, apiClient, false); deleteImage(context, itemId, type, index, apiClient, false);
break; break;
@ -371,16 +353,14 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
default: default:
break; break;
} }
}); });
}); });
} }
function initEditor(context, options) { function initEditor(context, options) {
const uploadButtons = context.querySelectorAll('.btnOpenUploadMenu');
var uploadButtons = context.querySelectorAll('.btnOpenUploadMenu'); const isFileInputSupported = appHost.supports('fileinput');
var isFileInputSupported = appHost.supports('fileinput'); for (let i = 0, length = uploadButtons.length; i < length; i++) {
for (var i = 0, length = uploadButtons.length; i < length; i++) {
if (isFileInputSupported) { if (isFileInputSupported) {
uploadButtons[i].classList.remove('hide'); uploadButtons[i].classList.remove('hide');
} else { } else {
@ -389,10 +369,9 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
} }
addListeners(context, 'btnOpenUploadMenu', 'click', function () { addListeners(context, 'btnOpenUploadMenu', 'click', function () {
var imageType = this.getAttribute('data-imagetype'); const imageType = this.getAttribute('data-imagetype');
require(['imageUploader'], function (imageUploader) {
import('imageUploader').then(({default: imageUploader}) => {
imageUploader.show({ imageUploader.show({
theme: options.theme, theme: options.theme,
@ -401,7 +380,6 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
serverId: currentItem.ServerId serverId: currentItem.ServerId
}).then(function (hasChanged) { }).then(function (hasChanged) {
if (hasChanged) { if (hasChanged) {
hasChanges = true; hasChanges = true;
reload(context); reload(context);
@ -423,34 +401,32 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
}); });
addListeners(context, 'btnDeleteImage', 'click', function () { addListeners(context, 'btnDeleteImage', 'click', function () {
var type = this.getAttribute('data-imagetype'); const type = this.getAttribute('data-imagetype');
var index = this.getAttribute('data-index'); let index = this.getAttribute('data-index');
index = index === 'null' ? null : parseInt(index); index = index === 'null' ? null : parseInt(index);
var apiClient = connectionManager.getApiClient(currentItem.ServerId); const apiClient = connectionManager.getApiClient(currentItem.ServerId);
deleteImage(context, currentItem.Id, type, index, apiClient, true); deleteImage(context, currentItem.Id, type, index, apiClient, true);
}); });
addListeners(context, 'btnMoveImage', 'click', function () { addListeners(context, 'btnMoveImage', 'click', function () {
var type = this.getAttribute('data-imagetype'); const type = this.getAttribute('data-imagetype');
var index = this.getAttribute('data-index'); const index = this.getAttribute('data-index');
var newIndex = this.getAttribute('data-newindex'); const newIndex = this.getAttribute('data-newindex');
var apiClient = connectionManager.getApiClient(currentItem.ServerId); const apiClient = connectionManager.getApiClient(currentItem.ServerId);
moveImage(context, apiClient, currentItem.Id, type, index, newIndex, dom.parentWithClass(this, 'itemsContainer')); moveImage(context, apiClient, currentItem.Id, type, index, newIndex, dom.parentWithClass(this, 'itemsContainer'));
}); });
} }
function showEditor(options, resolve, reject) { function showEditor(options, resolve, reject) {
const itemId = options.itemId;
var itemId = options.itemId; const serverId = options.serverId;
var serverId = options.serverId;
loading.show(); loading.show();
require(['text!./imageeditor.template.html'], function (template) { import('text!./imageeditor.template.html').then(({default: template}) => {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
const dialogOptions = {
var dialogOptions = {
removeOnClose: true removeOnClose: true
}; };
@ -460,11 +436,11 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.innerHTML = globalize.translateDocument(template, 'core'); dlg.innerHTML = globalize.translateHtml(template, 'core');
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg, false); scrollHelper.centerFocus.on(dlg, false);
@ -474,7 +450,6 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
// Has to be assigned a z-index after the call to .open() // Has to be assigned a z-index after the call to .open()
dlg.addEventListener('close', function () { dlg.addEventListener('close', function () {
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.off(dlg, false); scrollHelper.centerFocus.off(dlg, false);
} }
@ -493,22 +468,21 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
reload(dlg, item); reload(dlg, item);
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
}); });
}); });
} }
return { export function show (options) {
show: function (options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
hasChanges = false; hasChanges = false;
showEditor(options, resolve, reject); showEditor(options, resolve, reject);
}); });
} }
};
}); export default {
show
};
/* eslint-enable indent */

5
src/components/images/imageLoader.js
View file

@ -120,7 +120,7 @@ import 'css!./style';
export function lazyChildren(elem) { export function lazyChildren(elem) {
if (userSettings.enableBlurhash()) { if (userSettings.enableBlurhash()) {
for (const lazyElem of elem.getElementsByClassName('lazy')) { for (const lazyElem of elem.querySelectorAll('.lazy')) {
const blurhashstr = lazyElem.getAttribute('data-blurhash'); const blurhashstr = lazyElem.getAttribute('data-blurhash');
if (!lazyElem.classList.contains('blurhashed', 'non-blurhashable') && blurhashstr) { if (!lazyElem.classList.contains('blurhashed', 'non-blurhashable') && blurhashstr) {
itemBlurhashing(lazyElem, blurhashstr); itemBlurhashing(lazyElem, blurhashstr);
@ -133,11 +133,9 @@ import 'css!./style';
} }
export function getPrimaryImageAspectRatio(items) { export function getPrimaryImageAspectRatio(items) {
var values = []; var values = [];
for (var i = 0, length = items.length; i < length; i++) { for (var i = 0, length = items.length; i < length; i++) {
var ratio = items[i].PrimaryImageAspectRatio || 0; var ratio = items[i].PrimaryImageAspectRatio || 0;
if (!ratio) { if (!ratio) {
@ -193,7 +191,6 @@ import 'css!./style';
} }
export function fillImages(elems) { export function fillImages(elems) {
for (var i = 0, length = elems.length; i < length; i++) { for (var i = 0, length = elems.length; i < length; i++) {
var elem = elems[0]; var elem = elems[0];
fillImage(elem); fillImage(elem);

103
src/components/itemContextMenu.js
View file

@ -1,14 +1,22 @@
define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', 'playbackManager', 'loading', 'appSettings', 'browser', 'actionsheet'], function (appHost, globalize, connectionManager, itemHelper, appRouter, playbackManager, loading, appSettings, browser, actionsheet) { import appHost from 'apphost';
'use strict'; import globalize from 'globalize';
import connectionManager from 'connectionManager';
import itemHelper from 'itemHelper';
import appRouter from 'appRouter';
import playbackManager from 'playbackManager';
import browser from 'browser';
import actionsheet from 'actionsheet';
function getCommands(options) { /* eslint-disable indent */
var item = options.item;
var user = options.user;
var canPlay = playbackManager.canPlay(item); export function getCommands(options) {
var restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator; 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 (canPlay && item.MediaType !== 'Photo') {
if (options.play !== false) { if (options.play !== false) {
@ -134,7 +142,6 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
if (item.CanDelete && options.deleteItem !== false) { if (item.CanDelete && options.deleteItem !== false) {
if (item.Type === 'Playlist' || item.Type === 'BoxSet') { if (item.Type === 'Playlist' || item.Type === 'BoxSet') {
commands.push({ commands.push({
name: globalize.translate('Delete'), name: globalize.translate('Delete'),
@ -171,10 +178,10 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
}); });
} }
var canEdit = itemHelper.canEdit(user, item); const canEdit = itemHelper.canEdit(user, item);
if (canEdit) { if (canEdit) {
if (options.edit !== false && item.Type !== 'SeriesTimer') { 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({ commands.push({
name: text, name: text,
id: 'edit', id: 'edit',
@ -322,31 +329,31 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function executeCommand(item, id, options) { function executeCommand(item, id, options) {
var itemId = item.Id; const itemId = item.Id;
var serverId = item.ServerId; const serverId = item.ServerId;
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
switch (id) { switch (id) {
case 'addtocollection': case 'addtocollection':
require(['collectionEditor'], function (collectionEditor) { import('collectionEditor').then(({default: collectionEditor}) => {
new collectionEditor().show({ new collectionEditor({
items: [itemId], items: [itemId],
serverId: serverId serverId: serverId
}).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
case 'addtoplaylist': case 'addtoplaylist':
require(['playlistEditor'], function (playlistEditor) { import('playlistEditor').then(({default: playlistEditor}) => {
new playlistEditor().show({ new playlistEditor({
items: [itemId], items: [itemId],
serverId: serverId serverId: serverId
}).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
case 'download': case 'download':
require(['fileDownloader'], function (fileDownloader) { import('fileDownloader').then((fileDownloader) => {
var downloadHref = apiClient.getItemDownloadUrl(itemId); const downloadHref = apiClient.getItemDownloadUrl(itemId);
fileDownloader.download([{ fileDownloader.download([{
url: downloadHref, url: downloadHref,
itemId: itemId, itemId: itemId,
@ -357,17 +364,17 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
getResolveFunction(getResolveFunction(resolve, id), id)(); getResolveFunction(getResolveFunction(resolve, id), id)();
}); });
break; break;
case 'copy-stream': case 'copy-stream': {
var downloadHref = apiClient.getItemDownloadUrl(itemId); const downloadHref = apiClient.getItemDownloadUrl(itemId);
var textAreaCopy = function () { const textAreaCopy = function () {
var textArea = document.createElement('textarea'); let textArea = document.createElement('textarea');
textArea.value = downloadHref; textArea.value = downloadHref;
document.body.appendChild(textArea); document.body.appendChild(textArea);
textArea.focus(); textArea.focus();
textArea.select(); textArea.select();
if (document.execCommand('copy')) { if (document.execCommand('copy')) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('CopyStreamURLSuccess')); toast(globalize.translate('CopyStreamURLSuccess'));
}); });
} else { } else {
@ -382,7 +389,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} else { } else {
/* eslint-disable-next-line compat/compat */ /* eslint-disable-next-line compat/compat */
navigator.clipboard.writeText(downloadHref).then(function () { navigator.clipboard.writeText(downloadHref).then(function () {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('CopyStreamURLSuccess')); toast(globalize.translate('CopyStreamURLSuccess'));
}); });
}).catch(function () { }).catch(function () {
@ -391,8 +398,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
getResolveFunction(resolve, id)(); getResolveFunction(resolve, id)();
break; break;
}
case 'editsubtitles': case 'editsubtitles':
require(['subtitleEditor'], function (subtitleEditor) { import('subtitleEditor').then(({default: subtitleEditor}) => {
subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
@ -400,7 +408,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
break; break;
case 'editimages': case 'editimages':
require(['imageEditor'], function (imageEditor) { import('imageEditor').then(({default: imageEditor}) => {
imageEditor.show({ imageEditor.show({
itemId: itemId, itemId: itemId,
serverId: serverId serverId: serverId
@ -408,12 +416,12 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
}); });
break; break;
case 'identify': case 'identify':
require(['itemIdentifier'], function (itemIdentifier) { import('itemIdentifier').then(({default: itemIdentifier}) => {
itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
case 'moremediainfo': case 'moremediainfo':
require(['itemMediaInfo'], function (itemMediaInfo) { import('itemMediaInfo').then(({default: itemMediaInfo}) => {
itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id)); itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id));
}); });
break; break;
@ -448,7 +456,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
playbackManager.clearQueue(); playbackManager.clearQueue();
break; break;
case 'record': case 'record':
require(['recordingCreator'], function (recordingCreator) { import('recordingCreator').then(({default: recordingCreator}) => {
recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
@ -519,8 +527,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function deleteTimer(apiClient, item, resolve, command) { function deleteTimer(apiClient, item, resolve, command) {
require(['recordingHelper'], function (recordingHelper) { import('recordingHelper').then(({default: recordingHelper}) => {
var timerId = item.TimerId || item.Id; const timerId = item.TimerId || item.Id;
recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () { recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () {
getResolveFunction(resolve, command, true)(); getResolveFunction(resolve, command, true)();
}); });
@ -528,7 +536,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function deleteSeriesTimer(apiClient, item, resolve, command) { function deleteSeriesTimer(apiClient, item, resolve, command) {
require(['recordingHelper'], function (recordingHelper) { import('recordingHelper').then(({default: recordingHelper}) => {
recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () { recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () {
getResolveFunction(resolve, command, true)(); getResolveFunction(resolve, command, true)();
}); });
@ -536,9 +544,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function play(item, resume, queue, queueNext) { 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) { if (resume && item.UserData && item.UserData.PlaybackPositionTicks) {
startPosition = item.UserData.PlaybackPositionTicks; startPosition = item.UserData.PlaybackPositionTicks;
} }
@ -559,18 +567,18 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
function editItem(apiClient, item) { function editItem(apiClient, item) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
var serverId = apiClient.serverInfo().Id; const serverId = apiClient.serverInfo().Id;
if (item.Type === 'Timer') { if (item.Type === 'Timer') {
require(['recordingEditor'], function (recordingEditor) { import('recordingEditor').then(({default: recordingEditor}) => {
recordingEditor.show(item.Id, serverId).then(resolve, reject); recordingEditor.show(item.Id, serverId).then(resolve, reject);
}); });
} else if (item.Type === 'SeriesTimer') { } else if (item.Type === 'SeriesTimer') {
require(['seriesRecordingEditor'], function (recordingEditor) { import('seriesRecordingEditor').then(({default: recordingEditor}) => {
recordingEditor.show(item.Id, serverId).then(resolve, reject); recordingEditor.show(item.Id, serverId).then(resolve, reject);
}); });
} else { } else {
require(['metadataEditor'], function (metadataEditor) { import('metadataEditor').then(({default: metadataEditor}) => {
metadataEditor.show(item.Id, serverId).then(resolve, reject); metadataEditor.show(item.Id, serverId).then(resolve, reject);
}); });
} }
@ -579,7 +587,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
function deleteItem(apiClient, item) { function deleteItem(apiClient, item) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['deleteHelper'], function (deleteHelper) { import('deleteHelper').then(({default: deleteHelper}) => {
deleteHelper.deleteItem({ deleteHelper.deleteItem({
item: item, item: item,
navigate: false navigate: false
@ -591,7 +599,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function refresh(apiClient, item) { function refresh(apiClient, item) {
require(['refreshDialog'], function (refreshDialog) { import('refreshDialog').then(({default: refreshDialog}) => {
new refreshDialog({ new refreshDialog({
itemIds: [item.Id], itemIds: [item.Id],
serverId: apiClient.serverInfo().Id, serverId: apiClient.serverInfo().Id,
@ -600,8 +608,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
}); });
} }
function show(options) { export function show(options) {
var commands = getCommands(options); const commands = getCommands(options);
if (!commands.length) { if (!commands.length) {
return Promise.reject(); return Promise.reject();
} }
@ -615,8 +623,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
}); });
} }
return { /* eslint-enable indent */
export default {
getCommands: getCommands, getCommands: getCommands,
show: show show: show
}; };
});

21
src/components/itemHelper.js
View file

@ -2,7 +2,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
'use strict'; 'use strict';
function getDisplayName(item, options = {}) { function getDisplayName(item, options = {}) {
if (!item) { if (!item) {
throw new Error('null item passed into getDisplayName'); throw new Error('null item passed into getDisplayName');
} }
@ -22,7 +21,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
if (item.Type === 'Episode' && item.ParentIndexNumber === 0) { if (item.Type === 'Episode' && item.ParentIndexNumber === 0) {
name = globalize.translate('ValueSpecialEpisodeName', name); name = globalize.translate('ValueSpecialEpisodeName', name);
} else if ((item.Type === 'Episode' || item.Type === 'Program') && item.IndexNumber != null && item.ParentIndexNumber != null && options.includeIndexNumber !== false) { } else if ((item.Type === 'Episode' || item.Type === 'Program') && item.IndexNumber != null && item.ParentIndexNumber != null && options.includeIndexNumber !== false) {
var displayIndexNumber = item.IndexNumber; var displayIndexNumber = item.IndexNumber;
var number = displayIndexNumber; var number = displayIndexNumber;
@ -35,7 +33,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
if (item.IndexNumberEnd) { if (item.IndexNumberEnd) {
displayIndexNumber = item.IndexNumberEnd; displayIndexNumber = item.IndexNumberEnd;
number += '-' + displayIndexNumber; number += '-' + displayIndexNumber;
} }
@ -49,7 +46,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
function supportsAddingToCollection(item) { function supportsAddingToCollection(item) {
var invalidTypes = ['Genre', 'MusicGenre', 'Studio', 'UserView', 'CollectionFolder', 'Audio', 'Program', 'Timer', 'SeriesTimer']; var invalidTypes = ['Genre', 'MusicGenre', 'Studio', 'UserView', 'CollectionFolder', 'Audio', 'Program', 'Timer', 'SeriesTimer'];
if (item.Type === 'Recording') { if (item.Type === 'Recording') {
@ -62,7 +58,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
function supportsAddingToPlaylist(item) { function supportsAddingToPlaylist(item) {
if (item.Type === 'Program') { if (item.Type === 'Program') {
return false; return false;
} }
@ -96,7 +91,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
function canEdit(user, item) { function canEdit(user, item) {
var itemType = item.Type; var itemType = item.Type;
if (itemType === 'UserRootFolder' || itemType === 'UserView') { if (itemType === 'UserRootFolder' || itemType === 'UserView') {
@ -129,7 +123,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
function isLocalItem(item) { function isLocalItem(item) {
if (item && item.Id && item.Id.indexOf('local') === 0) { if (item && item.Id && item.Id.indexOf('local') === 0) {
return true; return true;
} }
@ -144,7 +137,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
isLocalItem: isLocalItem, isLocalItem: isLocalItem,
canIdentify: function (user, item) { canIdentify: function (user, item) {
var itemType = item.Type; var itemType = item.Type;
if (itemType === 'Movie' || if (itemType === 'Movie' ||
@ -156,9 +148,7 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
itemType === 'MusicAlbum' || itemType === 'MusicAlbum' ||
itemType === 'MusicArtist' || itemType === 'MusicArtist' ||
itemType === 'MusicVideo') { itemType === 'MusicVideo') {
if (user.Policy.IsAdministrator) { if (user.Policy.IsAdministrator) {
if (!isLocalItem(item)) { if (!isLocalItem(item)) {
return true; return true;
} }
@ -171,7 +161,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
canEdit: canEdit, canEdit: canEdit,
canEditImages: function (user, item) { canEditImages: function (user, item) {
var itemType = item.Type; var itemType = item.Type;
if (item.MediaType === 'Photo') { if (item.MediaType === 'Photo') {
@ -180,7 +169,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
if (itemType === 'UserView') { if (itemType === 'UserView') {
if (user.Policy.IsAdministrator) { if (user.Policy.IsAdministrator) {
return true; return true;
} }
@ -197,7 +185,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
}, },
canSync: function (user, item) { canSync: function (user, item) {
if (user && !user.Policy.EnableContentDownloading) { if (user && !user.Policy.EnableContentDownloading) {
return false; return false;
} }
@ -210,7 +197,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
}, },
canShare: function (item, user) { canShare: function (item, user) {
if (item.Type === 'Program') { if (item.Type === 'Program') {
return false; return false;
} }
@ -239,7 +225,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
}, },
canMarkPlayed: function (item) { canMarkPlayed: function (item) {
if (item.Type === 'Program') { if (item.Type === 'Program') {
return false; return false;
} }
@ -269,7 +254,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
}, },
canRate: function (item) { canRate: function (item) {
if (item.Type === 'Program' if (item.Type === 'Program'
|| item.Type === 'Timer' || item.Type === 'Timer'
|| item.Type === 'SeriesTimer' || item.Type === 'SeriesTimer'
@ -284,7 +268,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
}, },
canConvert: function (item, user) { canConvert: function (item, user) {
if (!user.Policy.EnableMediaConversion) { if (!user.Policy.EnableMediaConversion) {
return false; return false;
} }
@ -320,16 +303,13 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
}, },
canRefreshMetadata: function (item, user) { canRefreshMetadata: function (item, user) {
if (user.Policy.IsAdministrator) { if (user.Policy.IsAdministrator) {
var collectionType = item.CollectionType; var collectionType = item.CollectionType;
if (collectionType === 'livetv') { if (collectionType === 'livetv') {
return false; return false;
} }
if (item.Type !== 'Timer' && item.Type !== 'SeriesTimer' && item.Type !== 'Program' && item.Type !== 'TvChannel' && !(item.Type === 'Recording' && item.Status !== 'Completed')) { if (item.Type !== 'Timer' && item.Type !== 'SeriesTimer' && item.Type !== 'Program' && item.Type !== 'TvChannel' && !(item.Type === 'Recording' && item.Status !== 'Completed')) {
if (!isLocalItem(item)) { if (!isLocalItem(item)) {
return true; return true;
} }
@ -340,7 +320,6 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
}, },
supportsMediaSourceSelection: function (item) { supportsMediaSourceSelection: function (item) {
if (item.MediaType !== 'Video') { if (item.MediaType !== 'Video') {
return false; return false;
} }

97
src/components/itemMediaInfo/itemMediaInfo.js
View file

@ -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) { /* eslint-disable indent */
'use strict';
/**
* 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) { function setMediaInfo(user, page, item) {
var html = item.MediaSources.map(function (version) { let html = item.MediaSources.map(version => {
return getMediaSourceHtml(user, item, version); return getMediaSourceHtml(user, item, version);
}).join('<div style="border-top:1px solid #444;margin: 1em 0;"></div>'); }).join('<div style="border-top:1px solid #444;margin: 1em 0;"></div>');
if (item.MediaSources.length > 1) { if (item.MediaSources.length > 1) {
html = '<br/>' + html; html = `<br/>${html}`;
} }
var mediaInfoContent = page.querySelector('#mediaInfoContent'); const mediaInfoContent = page.querySelector('#mediaInfoContent');
mediaInfoContent.innerHTML = html; mediaInfoContent.innerHTML = html;
} }
function getMediaSourceHtml(user, item, version) { function getMediaSourceHtml(user, item, version) {
var html = ''; let html = '';
if (version.Name) { if (version.Name) {
html += '<div><h2 class="mediaInfoStreamType">' + version.Name + '</h2></div>'; html += `<div><h2 class="mediaInfoStreamType">${version.Name}</h2></div>`;
} }
if (version.Container) { if (version.Container) {
html += createAttribute(globalize.translate('MediaInfoContainer'), version.Container) + '<br/>'; html += `${createAttribute(globalize.translate('MediaInfoContainer'), version.Container)}<br/>`;
} }
if (version.Formats && version.Formats.length) { if (version.Formats && version.Formats.length) {
html += createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(',')) + '<br/>'; html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}<br/>`;
} }
if (version.Path && user && user.Policy.IsAdministrator) { if (version.Path && user && user.Policy.IsAdministrator) {
html += createAttribute(globalize.translate('MediaInfoPath'), version.Path) + '<br/>'; html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path)}<br/>`;
} }
if (version.Size) { if (version.Size) {
var size = (version.Size / (1024 * 1024)).toFixed(0) + ' MB'; const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`;
html += createAttribute(globalize.translate('MediaInfoSize'), size) + '<br/>'; html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}<br/>`;
} }
for (var i = 0, length = version.MediaStreams.length; i < length; i++) { for (let i = 0, length = version.MediaStreams.length; i < length; i++) {
var stream = version.MediaStreams[i]; const stream = version.MediaStreams[i];
if (stream.Type === 'Data') { if (stream.Type === 'Data') {
continue; continue;
} }
html += '<div class="mediaInfoStream">'; html += '<div class="mediaInfoStream">';
var displayType = globalize.translate('MediaInfoStreamType' + stream.Type); const displayType = globalize.translate(`MediaInfoStreamType${stream.Type}`);
html += '<h2 class="mediaInfoStreamType">' + displayType + '</h2>'; html += `<h2 class="mediaInfoStreamType">${displayType}</h2>`;
var attributes = []; const attributes = [];
if (stream.DisplayTitle) { if (stream.DisplayTitle) {
attributes.push(createAttribute('Title', 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)); attributes.push(createAttribute(globalize.translate('MediaInfoLevel'), stream.Level));
} }
if (stream.Width || stream.Height) { 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') { if (stream.AspectRatio && stream.Codec !== 'mjpeg') {
attributes.push(createAttribute(globalize.translate('MediaInfoAspectRatio'), stream.AspectRatio)); 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)); attributes.push(createAttribute(globalize.translate('MediaInfoLayout'), stream.ChannelLayout));
} }
if (stream.Channels) { 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') { 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) { if (stream.SampleRate) {
attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), stream.SampleRate + ' Hz')); attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), `${stream.SampleRate} Hz`));
} }
if (stream.BitDepth) { if (stream.BitDepth) {
attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), stream.BitDepth + ' bit')); attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), `${stream.BitDepth} bit`));
} }
if (stream.PixelFormat) { if (stream.PixelFormat) {
attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat)); attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat));
@ -116,13 +133,13 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
} }
function createAttribute(label, value) { function createAttribute(label, value) {
return '<span class="mediaInfoLabel">' + label + '</span><span class="mediaInfoAttribute">' + value + '</span>'; return `<span class="mediaInfoLabel">${label}</span><span class="mediaInfoAttribute">${value}</span>`;
} }
function showMediaInfoMore(itemId, serverId, template) { function loadMediaInfo(itemId, serverId, template) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
var dialogOptions = { const dialogOptions = {
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -130,35 +147,35 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
var html = ''; let html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
if (layoutManager.tv) { if (layoutManager.tv) {
dlg.querySelector('.formDialogContent'); dlg.querySelector('.formDialogContent');
} }
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.btnCancel').addEventListener('click', function (e) { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
apiClient.getCurrentUser().then(function (user) { apiClient.getCurrentUser().then(user => {
setMediaInfo(user, dlg, item); setMediaInfo(user, dlg, item);
}); });
loading.hide(); loading.hide();
}); });
} }
function showMediaInfo(itemId, serverId) { export function show(itemId, serverId) {
loading.show(); loading.show();
return new Promise(function (resolve, reject) { return import('text!./itemMediaInfo.template.html').then(({default: template}) => {
require(['text!./itemMediaInfo.template.html'], function (template) { return new Promise((resolve, reject) => {
showMediaInfoMore(itemId, serverId, template).then(resolve, reject); loadMediaInfo(itemId, serverId, template).then(resolve, reject);
}); });
}); });
} }
return { /* eslint-enable indent */
show: showMediaInfo export default {
}; show: show
}); };

248
src/components/itemidentifier/itemidentifier.js
View file

@ -1,36 +1,52 @@
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) { /* eslint-disable indent */
'use strict';
var enableFocusTransform = !browser.slow && !browser.edge; /**
* Module for itemidentifier media item.
* @module components/itemidentifier/itemidentifier
*/
var currentItem; import dialogHelper from 'dialogHelper';
var currentItemType; import loading from 'loading';
var currentServerId; import connectionManager from 'connectionManager';
var currentResolve; import globalize from 'globalize';
var currentReject; import scrollHelper from 'scrollHelper';
var hasChanges = false; import layoutManager from 'layoutManager';
var currentSearchResult; 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() { function getApiClient() {
return connectionManager.getApiClient(currentServerId); return connectionManager.getApiClient(currentServerId);
} }
function searchForIdentificationResults(page) { function searchForIdentificationResults(page) {
let lookupInfo = {
var lookupInfo = {
ProviderIds: {} ProviderIds: {}
}; };
var i; let i;
var length; let length;
var identifyField = page.querySelectorAll('.identifyField'); const identifyField = page.querySelectorAll('.identifyField');
var value; let value;
for (i = 0, length = identifyField.length; i < length; i++) { for (i = 0, length = identifyField.length; i < length; i++) {
value = identifyField[i].value; value = identifyField[i].value;
if (value) { if (value) {
if (identifyField[i].type === 'number') { if (identifyField[i].type === 'number') {
value = parseInt(value); value = parseInt(value);
} }
@ -39,11 +55,10 @@ 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++) { for (i = 0, length = txtLookupId.length; i < length; i++) {
value = txtLookupId[i].value; value = txtLookupId[i].value;
if (value) { if (value) {
@ -53,7 +68,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
if (!hasId && !lookupInfo.Name) { if (!hasId && !lookupInfo.Name) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('PleaseEnterNameOrId')); toast(globalize.translate('PleaseEnterNameOrId'));
}); });
return; return;
@ -71,60 +86,54 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
loading.show(); loading.show();
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.ajax({ apiClient.ajax({
type: 'POST', type: 'POST',
url: apiClient.getUrl('Items/RemoteSearch/' + currentItemType), url: apiClient.getUrl(`Items/RemoteSearch/${currentItemType}`),
data: JSON.stringify(lookupInfo), data: JSON.stringify(lookupInfo),
contentType: 'application/json', contentType: 'application/json',
dataType: 'json' dataType: 'json'
}).then(function (results) { }).then(results => {
loading.hide(); loading.hide();
showIdentificationSearchResults(page, results); showIdentificationSearchResults(page, results);
}); });
} }
function showIdentificationSearchResults(page, results) { function showIdentificationSearchResults(page, results) {
const identificationSearchResults = page.querySelector('.identificationSearchResults');
var identificationSearchResults = page.querySelector('.identificationSearchResults');
page.querySelector('.popupIdentifyForm').classList.add('hide'); page.querySelector('.popupIdentifyForm').classList.add('hide');
identificationSearchResults.classList.remove('hide'); identificationSearchResults.classList.remove('hide');
page.querySelector('.identifyOptionsForm').classList.add('hide'); page.querySelector('.identifyOptionsForm').classList.add('hide');
page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered'); page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered');
var html = ''; let html = '';
var i; let i;
var length; let length;
for (i = 0, length = results.length; i < length; i++) { for (i = 0, length = results.length; i < length; i++) {
const result = results[i];
var result = results[i];
html += getSearchResultHtml(result, i); html += getSearchResultHtml(result, i);
} }
var elem = page.querySelector('.identificationSearchResultList'); const elem = page.querySelector('.identificationSearchResultList');
elem.innerHTML = html; elem.innerHTML = html;
function onSearchImageClick() { 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) { if (currentItem != null) {
showIdentifyOptions(page, currentResult); showIdentifyOptions(page, currentResult);
} else { } else {
finishFindNewDialog(page, currentResult); finishFindNewDialog(page, currentResult);
} }
} }
var searchImages = elem.querySelectorAll('.card'); const searchImages = elem.querySelectorAll('.card');
for (i = 0, length = searchImages.length; i < length; i++) { for (i = 0, length = searchImages.length; i < length; i++) {
searchImages[i].addEventListener('click', onSearchImageClick); searchImages[i].addEventListener('click', onSearchImageClick);
} }
@ -142,8 +151,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
function showIdentifyOptions(page, identifyResult) { function showIdentifyOptions(page, identifyResult) {
const identifyOptionsForm = page.querySelector('.identifyOptionsForm');
var identifyOptionsForm = page.querySelector('.identifyOptionsForm');
page.querySelector('.popupIdentifyForm').classList.add('hide'); page.querySelector('.popupIdentifyForm').classList.add('hide');
page.querySelector('.identificationSearchResults').classList.add('hide'); page.querySelector('.identificationSearchResults').classList.add('hide');
@ -153,19 +161,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
currentSearchResult = identifyResult; currentSearchResult = identifyResult;
var lines = []; const lines = [];
lines.push(identifyResult.Name); lines.push(identifyResult.Name);
if (identifyResult.ProductionYear) { if (identifyResult.ProductionYear) {
lines.push(identifyResult.ProductionYear); lines.push(identifyResult.ProductionYear);
} }
var resultHtml = lines.join('<br/>'); let resultHtml = lines.join('<br/>');
if (identifyResult.ImageUrl) { if (identifyResult.ImageUrl) {
var displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName); const displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName);
resultHtml = '<div style="display:flex;align-items:center;"><img src="' + displayUrl + '" style="max-height:240px;" /><div style="margin-left:1em;">' + resultHtml + '</div>'; resultHtml = `<div style="display:flex;align-items:center;"><img src="${displayUrl}" style="max-height:240px;" /><div style="margin-left:1em;">${resultHtml}</div>`;
} }
page.querySelector('.selectedSearchResult').innerHTML = resultHtml; page.querySelector('.selectedSearchResult').innerHTML = resultHtml;
@ -174,13 +182,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
function getSearchResultHtml(result, index) { function getSearchResultHtml(result, index) {
// TODO move card creation code to Card component // TODO move card creation code to Card component
var html = ''; let html = '';
var cssClass = 'card scalableCard'; let cssClass = 'card scalableCard';
var cardBoxCssClass = 'cardBox'; let cardBoxCssClass = 'cardBox';
var padderClass; let padderClass;
if (currentItemType === 'Episode') { if (currentItemType === 'Episode') {
cssClass += ' backdropCard backdropCard-scalable'; cssClass += ' backdropCard backdropCard-scalable';
@ -203,30 +210,29 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
cardBoxCssClass += ' cardBox-bottompadded'; cardBoxCssClass += ' cardBox-bottompadded';
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">'; html += `<button type="button" class="${cssClass}" data-index="${index}">`;
html += '<div class="' + cardBoxCssClass + '">'; html += `<div class="${cardBoxCssClass}">`;
html += '<div class="cardScalable">'; html += '<div class="cardScalable">';
html += '<div class="' + padderClass + '"></div>'; html += `<div class="${padderClass}"></div>`;
html += '<div class="cardContent searchImage">'; html += '<div class="cardContent searchImage">';
if (result.ImageUrl) { if (result.ImageUrl) {
var displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName); const displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName);
html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + displayUrl + '\');"></div>'; html += `<div class="cardImageContainer coveredImage" style="background-image:url('${displayUrl}');"></div>`;
} else { } else {
html += `<div class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">${result.Name}</div></div>`;
html += '<div class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">' + result.Name + '</div></div>';
} }
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
var numLines = 3; let numLines = 3;
if (currentItemType === 'MusicAlbum') { if (currentItemType === 'MusicAlbum') {
numLines++; numLines++;
} }
var lines = [result.Name]; const lines = [result.Name];
lines.push(result.SearchProviderName); lines.push(result.SearchProviderName);
@ -237,8 +243,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
lines.push(result.ProductionYear); lines.push(result.ProductionYear);
} }
for (var i = 0; i < numLines; i++) { for (let i = 0; i < numLines; i++) {
if (i === 0) { if (i === 0) {
html += '<div class="cardText cardText-first cardTextCentered">'; html += '<div class="cardText cardText-first cardTextCentered">';
} else { } else {
@ -254,36 +259,32 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
function getSearchImageDisplayUrl(url, provider) { function getSearchImageDisplayUrl(url, provider) {
var apiClient = getApiClient(); const apiClient = getApiClient();
return apiClient.getUrl('Items/RemoteSearch/Image', { imageUrl: url, ProviderName: provider }); return apiClient.getUrl('Items/RemoteSearch/Image', { imageUrl: url, ProviderName: provider });
} }
function submitIdentficationResult(page) { function submitIdentficationResult(page) {
loading.show(); loading.show();
var options = { const options = {
ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked
}; };
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.ajax({ apiClient.ajax({
type: 'POST', type: 'POST',
url: apiClient.getUrl('Items/RemoteSearch/Apply/' + currentItem.Id, options), url: apiClient.getUrl(`Items/RemoteSearch/Apply/${currentItem.Id}`, options),
data: JSON.stringify(currentSearchResult), data: JSON.stringify(currentSearchResult),
contentType: 'application/json' contentType: 'application/json'
}).then(function () { }).then(() => {
hasChanges = true; hasChanges = true;
loading.hide(); loading.hide();
dialogHelper.close(page); dialogHelper.close(page);
}, () => {
}, function () {
loading.hide(); loading.hide();
dialogHelper.close(page); dialogHelper.close(page);
@ -291,29 +292,26 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
function showIdentificationForm(page, item) { function showIdentificationForm(page, item) {
const apiClient = getApiClient();
var apiClient = getApiClient(); apiClient.getJSON(apiClient.getUrl(`Items/${item.Id}/ExternalIdInfos`)).then(idList => {
let html = '';
apiClient.getJSON(apiClient.getUrl('Items/' + item.Id + '/ExternalIdInfos')).then(function (idList) { for (let i = 0, length = idList.length; i < length; i++) {
const idInfo = idList[i];
var html = ''; const id = `txtLookup${idInfo.Key}`;
for (var i = 0, length = idList.length; i < length; i++) {
var idInfo = idList[i];
var id = 'txtLookup' + idInfo.Key;
html += '<div class="inputContainer">'; html += '<div class="inputContainer">';
var fullName = idInfo.Name; let fullName = idInfo.Name;
if (idInfo.Type) { if (idInfo.Type) {
fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type); fullName = `${idInfo.Name} ${globalize.translate(idInfo.Type)}`;
} }
var idLabel = globalize.translate('LabelDynamicExternalId', fullName); const idLabel = globalize.translate('LabelDynamicExternalId', fullName);
html += '<input is="emby-input" class="txtLookupId" data-providerkey="' + idInfo.Key + '" id="' + id + '" label="' + idLabel + '"/>'; html += `<input is="emby-input" class="txtLookupId" data-providerkey="${idInfo.Key}" id="${id}" label="${idLabel}"/>`;
html += '</div>'; html += '</div>';
} }
@ -321,11 +319,9 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
page.querySelector('#txtLookupName').value = ''; page.querySelector('#txtLookupName').value = '';
if (item.Type === 'Person' || item.Type === 'BoxSet') { if (item.Type === 'Person' || item.Type === 'BoxSet') {
page.querySelector('.fldLookupYear').classList.add('hide'); page.querySelector('.fldLookupYear').classList.add('hide');
page.querySelector('#txtLookupYear').value = ''; page.querySelector('#txtLookupYear').value = '';
} else { } else {
page.querySelector('.fldLookupYear').classList.remove('hide'); page.querySelector('.fldLookupYear').classList.remove('hide');
page.querySelector('#txtLookupYear').value = ''; page.querySelector('#txtLookupYear').value = '';
} }
@ -337,19 +333,16 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
function showEditor(itemId) { function showEditor(itemId) {
loading.show(); loading.show();
require(['text!./itemidentifier.template.html'], function (template) { return import('text!./itemidentifier.template.html').then(({default: template}) => {
const apiClient = getApiClient();
var apiClient = getApiClient();
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
currentItem = item; currentItem = item;
currentItemType = currentItem.Type; currentItemType = currentItem.Type;
var dialogOptions = { const dialogOptions = {
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -359,13 +352,13 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('recordingDialog'); dlg.classList.add('recordingDialog');
var html = ''; let html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -386,22 +379,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) { dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
searchForIdentificationResults(dlg); searchForIdentificationResults(dlg);
return false; return false;
}); });
dlg.querySelector('.identifyOptionsForm').addEventListener('submit', function (e) { dlg.querySelector('.identifyOptionsForm').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
submitIdentficationResult(dlg); submitIdentficationResult(dlg);
return false; return false;
}); });
dlg.querySelector('.btnCancel').addEventListener('click', function (e) { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
@ -414,7 +404,6 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
function onDialogClosed() { function onDialogClosed() {
loading.hide(); loading.hide();
if (hasChanges) { if (hasChanges) {
currentResolve(); currentResolve();
@ -423,14 +412,13 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
} }
// TODO investigate where this was used
function showEditorFindNew(itemName, itemYear, itemType, resolveFunc) { function showEditorFindNew(itemName, itemYear, itemType, resolveFunc) {
currentItem = null; currentItem = null;
currentItemType = itemType; currentItemType = itemType;
require(['text!./itemidentifier.template.html'], function (template) { return import('text!./itemidentifier.template.html').then(({default: template}) => {
const dialogOptions = {
var dialogOptions = {
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -440,13 +428,13 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('recordingDialog'); dlg.classList.add('recordingDialog');
var html = ''; let html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -456,22 +444,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.btnCancel').addEventListener('click', function (e) { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) { dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
searchForIdentificationResults(dlg); searchForIdentificationResults(dlg);
return false; return false;
}); });
dlg.addEventListener('close', function () { dlg.addEventListener('close', () => {
loading.hide(); loading.hide();
var foundItem = hasChanges ? currentSearchResult : null; const foundItem = hasChanges ? currentSearchResult : null;
resolveFunc(foundItem); resolveFunc(foundItem);
}); });
@ -483,16 +468,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
function showIdentificationFormFindNew(dlg, itemName, itemYear, itemType) { function showIdentificationFormFindNew(dlg, itemName, itemYear, itemType) {
dlg.querySelector('#txtLookupName').value = itemName; dlg.querySelector('#txtLookupName').value = itemName;
if (itemType === 'Person' || itemType === 'BoxSet') { if (itemType === 'Person' || itemType === 'BoxSet') {
dlg.querySelector('.fldLookupYear').classList.add('hide'); dlg.querySelector('.fldLookupYear').classList.add('hide');
dlg.querySelector('#txtLookupYear').value = ''; dlg.querySelector('#txtLookupYear').value = '';
} else { } else {
dlg.querySelector('.fldLookupYear').classList.remove('hide'); dlg.querySelector('.fldLookupYear').classList.remove('hide');
dlg.querySelector('#txtLookupYear').value = itemYear; dlg.querySelector('#txtLookupYear').value = itemYear;
} }
@ -500,11 +481,8 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Search'); dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Search');
} }
return { export function show(itemId, serverId) {
show: function (itemId, serverId) { return new Promise((resolve, reject) => {
return new Promise(function (resolve, reject) {
currentResolve = resolve; currentResolve = resolve;
currentReject = reject; currentReject = reject;
currentServerId = serverId; currentServerId = serverId;
@ -512,17 +490,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
showEditor(itemId); showEditor(itemId);
}); });
}, }
showFindNew: function (itemName, itemYear, itemType, serverId) {
return new Promise(function (resolve, reject) {
export function showFindNew(itemName, itemYear, itemType, serverId) {
return new Promise((resolve) => {
currentServerId = serverId; currentServerId = serverId;
hasChanges = false; hasChanges = false;
showEditorFindNew(itemName, itemYear, itemType, resolve); showEditorFindNew(itemName, itemYear, itemType, resolve);
}); });
} }
};
}); /* eslint-enable indent */
export default {
show: show,
showFindNew: showFindNew
};

33
src/components/itemsrefresher.js
View file

@ -2,23 +2,19 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
'use strict'; 'use strict';
function onUserDataChanged(e, apiClient, userData) { function onUserDataChanged(e, apiClient, userData) {
var instance = this; var instance = this;
var eventsToMonitor = getEventsToMonitor(instance); var eventsToMonitor = getEventsToMonitor(instance);
// TODO: Check user data change reason? // TODO: Check user data change reason?
if (eventsToMonitor.indexOf('markfavorite') !== -1) { if (eventsToMonitor.indexOf('markfavorite') !== -1) {
instance.notifyRefreshNeeded(); instance.notifyRefreshNeeded();
} else if (eventsToMonitor.indexOf('markplayed') !== -1) { } else if (eventsToMonitor.indexOf('markplayed') !== -1) {
instance.notifyRefreshNeeded(); instance.notifyRefreshNeeded();
} }
} }
function getEventsToMonitor(instance) { function getEventsToMonitor(instance) {
var options = instance.options; var options = instance.options;
var monitor = options ? options.monitorEvents : null; var monitor = options ? options.monitorEvents : null;
if (monitor) { if (monitor) {
@ -29,21 +25,17 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} }
function onTimerCreated(e, apiClient, data) { function onTimerCreated(e, apiClient, data) {
var instance = this; var instance = this;
if (getEventsToMonitor(instance).indexOf('timers') !== -1) { if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
instance.notifyRefreshNeeded(); instance.notifyRefreshNeeded();
return; return;
} }
} }
function onSeriesTimerCreated(e, apiClient, data) { function onSeriesTimerCreated(e, apiClient, data) {
var instance = this; var instance = this;
if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) { if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
instance.notifyRefreshNeeded(); instance.notifyRefreshNeeded();
return; return;
} }
@ -53,28 +45,23 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
var instance = this; var instance = this;
if (getEventsToMonitor(instance).indexOf('timers') !== -1) { if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
instance.notifyRefreshNeeded(); instance.notifyRefreshNeeded();
return; return;
} }
} }
function onSeriesTimerCancelled(e, apiClient, data) { function onSeriesTimerCancelled(e, apiClient, data) {
var instance = this; var instance = this;
if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) { if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
instance.notifyRefreshNeeded(); instance.notifyRefreshNeeded();
return; return;
} }
} }
function onLibraryChanged(e, apiClient, data) { function onLibraryChanged(e, apiClient, data) {
var instance = this; var instance = this;
var eventsToMonitor = getEventsToMonitor(instance); var eventsToMonitor = getEventsToMonitor(instance);
if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) { if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
// yes this is an assumption // yes this is an assumption
return; return;
} }
@ -101,23 +88,18 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} }
function onPlaybackStopped(e, stopInfo) { function onPlaybackStopped(e, stopInfo) {
var instance = this; var instance = this;
var state = stopInfo.state; var state = stopInfo.state;
var eventsToMonitor = getEventsToMonitor(instance); var eventsToMonitor = getEventsToMonitor(instance);
if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') { if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
if (eventsToMonitor.indexOf('videoplayback') !== -1) { if (eventsToMonitor.indexOf('videoplayback') !== -1) {
instance.notifyRefreshNeeded(true); instance.notifyRefreshNeeded(true);
return; return;
} }
} else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') { } else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
if (eventsToMonitor.indexOf('audioplayback') !== -1) { if (eventsToMonitor.indexOf('audioplayback') !== -1) {
instance.notifyRefreshNeeded(true); instance.notifyRefreshNeeded(true);
return; return;
} }
@ -125,7 +107,6 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} }
function addNotificationEvent(instance, name, handler, owner) { function addNotificationEvent(instance, name, handler, owner) {
var localHandler = handler.bind(instance); var localHandler = handler.bind(instance);
owner = owner || serverNotifications; owner = owner || serverNotifications;
events.on(owner, name, localHandler); events.on(owner, name, localHandler);
@ -133,7 +114,6 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} }
function removeNotificationEvent(instance, name, owner) { function removeNotificationEvent(instance, name, owner) {
var handler = instance['event_' + name]; var handler = instance['event_' + name];
if (handler) { if (handler) {
owner = owner || serverNotifications; owner = owner || serverNotifications;
@ -143,7 +123,6 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} }
function ItemsRefresher(options) { function ItemsRefresher(options) {
this.options = options || {}; this.options = options || {};
addNotificationEvent(this, 'UserDataChanged', onUserDataChanged); addNotificationEvent(this, 'UserDataChanged', onUserDataChanged);
@ -156,24 +135,19 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} }
ItemsRefresher.prototype.pause = function () { ItemsRefresher.prototype.pause = function () {
clearRefreshInterval(this, true); clearRefreshInterval(this, true);
this.paused = true; this.paused = true;
}; };
ItemsRefresher.prototype.resume = function (options) { ItemsRefresher.prototype.resume = function (options) {
this.paused = false; this.paused = false;
var refreshIntervalEndTime = this.refreshIntervalEndTime; var refreshIntervalEndTime = this.refreshIntervalEndTime;
if (refreshIntervalEndTime) { if (refreshIntervalEndTime) {
var remainingMs = refreshIntervalEndTime - new Date().getTime(); var remainingMs = refreshIntervalEndTime - new Date().getTime();
if (remainingMs > 0 && !this.needsRefresh) { if (remainingMs > 0 && !this.needsRefresh) {
resetRefreshInterval(this, remainingMs); resetRefreshInterval(this, remainingMs);
} else { } else {
this.needsRefresh = true; this.needsRefresh = true;
this.refreshIntervalEndTime = null; this.refreshIntervalEndTime = null;
@ -188,7 +162,6 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
}; };
ItemsRefresher.prototype.refreshItems = function () { ItemsRefresher.prototype.refreshItems = function () {
if (!this.fetchData) { if (!this.fetchData) {
return Promise.resolve(); return Promise.resolve();
} }
@ -204,7 +177,6 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
}; };
ItemsRefresher.prototype.notifyRefreshNeeded = function (isInForeground) { ItemsRefresher.prototype.notifyRefreshNeeded = function (isInForeground) {
if (this.paused) { if (this.paused) {
this.needsRefresh = true; this.needsRefresh = true;
return; return;
@ -223,9 +195,7 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
}; };
function clearRefreshInterval(instance, isPausing) { function clearRefreshInterval(instance, isPausing) {
if (instance.refreshInterval) { if (instance.refreshInterval) {
clearInterval(instance.refreshInterval); clearInterval(instance.refreshInterval);
instance.refreshInterval = null; instance.refreshInterval = null;
@ -236,7 +206,6 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} }
function resetRefreshInterval(instance, intervalMs) { function resetRefreshInterval(instance, intervalMs) {
clearRefreshInterval(instance); clearRefreshInterval(instance);
if (!intervalMs) { if (!intervalMs) {
@ -253,7 +222,6 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} }
function onDataFetched(result) { function onDataFetched(result) {
resetRefreshInterval(this); resetRefreshInterval(this);
if (this.afterRefresh) { if (this.afterRefresh) {
@ -262,7 +230,6 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} }
ItemsRefresher.prototype.destroy = function () { ItemsRefresher.prototype.destroy = function () {
clearRefreshInterval(this); clearRefreshInterval(this);
removeNotificationEvent(this, 'UserDataChanged'); removeNotificationEvent(this, 'UserDataChanged');

2
src/components/layoutManager.js
View file

@ -16,7 +16,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
} }
LayoutManager.prototype.setLayout = function (layout, save) { LayoutManager.prototype.setLayout = function (layout, save) {
if (!layout || layout === 'auto') { if (!layout || layout === 'auto') {
this.autoLayout(); this.autoLayout();
@ -41,7 +40,6 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
}; };
LayoutManager.prototype.autoLayout = function () { LayoutManager.prototype.autoLayout = function () {
// Take a guess at initial layout. The consuming app can override // Take a guess at initial layout. The consuming app can override
if (browser.mobile) { if (browser.mobile) {
this.setLayout('mobile', false); this.setLayout('mobile', false);

298
src/components/libraryoptionseditor/libraryoptionseditor.js
View file

@ -1,63 +1,73 @@
define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], function(globalize, dom) { /* eslint-disable indent */
'use strict';
/**
* Module for library options editor.
* @module components/libraryoptionseditor/libraryoptionseditor
*/
import globalize from 'globalize';
import dom from 'dom';
import 'emby-checkbox';
import 'emby-select';
import 'emby-input';
function populateLanguages(parent) { function populateLanguages(parent) {
return ApiClient.getCultures().then(function(languages) { return ApiClient.getCultures().then(languages => {
populateLanguagesIntoSelect(parent.querySelector('#selectLanguage'), languages); populateLanguagesIntoSelect(parent.querySelector('#selectLanguage'), languages);
populateLanguagesIntoList(parent.querySelector('.subtitleDownloadLanguages'), languages); populateLanguagesIntoList(parent.querySelector('.subtitleDownloadLanguages'), languages);
}); });
} }
function populateLanguagesIntoSelect(select, languages) { function populateLanguagesIntoSelect(select, languages) {
var html = ''; let html = '';
html += "<option value=''></option>"; html += "<option value=''></option>";
for (var i = 0; i < languages.length; i++) { for (let i = 0; i < languages.length; i++) {
var culture = languages[i]; const culture = languages[i];
html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + '</option>'; html += `<option value='${culture.TwoLetterISOLanguageName}'>${culture.DisplayName}</option>`;
} }
select.innerHTML = html; select.innerHTML = html;
} }
function populateLanguagesIntoList(element, languages) { function populateLanguagesIntoList(element, languages) {
var html = ''; let html = '';
for (var i = 0; i < languages.length; i++) { for (let i = 0; i < languages.length; i++) {
var culture = languages[i]; const culture = languages[i];
html += '<label><input type="checkbox" is="emby-checkbox" class="chkSubtitleLanguage" data-lang="' + culture.ThreeLetterISOLanguageName.toLowerCase() + '" /><span>' + culture.DisplayName + '</span></label>'; html += `<label><input type="checkbox" is="emby-checkbox" class="chkSubtitleLanguage" data-lang="${culture.ThreeLetterISOLanguageName.toLowerCase()}" /><span>${culture.DisplayName}</span></label>`;
} }
element.innerHTML = html; element.innerHTML = html;
} }
function populateCountries(select) { function populateCountries(select) {
return ApiClient.getCountries().then(function(allCountries) { return ApiClient.getCountries().then(allCountries => {
var html = ''; let html = '';
html += "<option value=''></option>"; html += "<option value=''></option>";
for (var i = 0; i < allCountries.length; i++) { for (let i = 0; i < allCountries.length; i++) {
var culture = allCountries[i]; const culture = allCountries[i];
html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + '</option>'; html += `<option value='${culture.TwoLetterISORegionName}'>${culture.DisplayName}</option>`;
} }
select.innerHTML = html; select.innerHTML = html;
}); });
} }
function populateRefreshInterval(select) { function populateRefreshInterval(select) {
var html = ''; let html = '';
html += "<option value='0'>" + globalize.translate('Never') + '</option>'; html += `<option value='0'>${globalize.translate('Never')}</option>`;
html += [30, 60, 90].map(function(val) { html += [30, 60, 90].map(val => {
return "<option value='" + val + "'>" + globalize.translate('EveryNDays', val) + '</option>'; return `<option value='${val}'>${globalize.translate('EveryNDays', val)}</option>`;
}).join(''); }).join('');
select.innerHTML = html; select.innerHTML = html;
} }
function renderMetadataReaders(page, plugins) { function renderMetadataReaders(page, plugins) {
var html = ''; let html = '';
var elem = page.querySelector('.metadataReaders'); const elem = page.querySelector('.metadataReaders');
if (plugins.length < 1) return elem.innerHTML = '', elem.classList.add('hide'), !1; if (plugins.length < 1) return elem.innerHTML = '', elem.classList.add('hide'), !1;
html += '<h3 class="checkboxListLabel">' + globalize.translate('LabelMetadataReaders') + '</h3>'; html += `<h3 class="checkboxListLabel">${globalize.translate('LabelMetadataReaders')}</h3>`;
html += '<div class="checkboxList paperList checkboxList-paperList">'; html += '<div class="checkboxList paperList checkboxList-paperList">';
for (var i = 0; i < plugins.length; i++) { for (let i = 0; i < plugins.length; i++) {
var plugin = plugins[i]; const plugin = plugins[i];
html += '<div class="listItem localReaderOption sortableOption" data-pluginname="' + plugin.Name + '">'; html += `<div class="listItem localReaderOption sortableOption" data-pluginname="${plugin.Name}">`;
html += '<span class="listItemIcon material-icons live_tv"></span>'; html += '<span class="listItemIcon material-icons live_tv"></span>';
html += '<div class="listItemBody">'; html += '<div class="listItemBody">';
html += '<h3 class="listItemBodyText">'; html += '<h3 class="listItemBodyText">';
@ -65,14 +75,14 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
html += '</h3>'; html += '</h3>';
html += '</div>'; html += '</div>';
if (i > 0) { if (i > 0) {
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonUp') + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_up"></span></button>'; html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('ButtonUp')}" class="btnSortableMoveUp btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_up"></span></button>`;
} else if (plugins.length > 1) { } else if (plugins.length > 1) {
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonDown') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_down"></span></button>'; html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('ButtonDown')}" class="btnSortableMoveDown btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_down"></span></button>`;
} }
html += '</div>'; html += '</div>';
} }
html += '</div>'; html += '</div>';
html += '<div class="fieldDescription">' + globalize.translate('LabelMetadataReadersHelp') + '</div>'; html += `<div class="fieldDescription">${globalize.translate('LabelMetadataReadersHelp')}</div>`;
if (plugins.length < 2) { if (plugins.length < 2) {
elem.classList.add('hide'); elem.classList.add('hide');
} else { } else {
@ -83,25 +93,25 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
} }
function renderMetadataSavers(page, metadataSavers) { function renderMetadataSavers(page, metadataSavers) {
var html = ''; let html = '';
var elem = page.querySelector('.metadataSavers'); const elem = page.querySelector('.metadataSavers');
if (!metadataSavers.length) return elem.innerHTML = '', elem.classList.add('hide'), false; if (!metadataSavers.length) return elem.innerHTML = '', elem.classList.add('hide'), false;
html += '<h3 class="checkboxListLabel">' + globalize.translate('LabelMetadataSavers') + '</h3>'; html += `<h3 class="checkboxListLabel">${globalize.translate('LabelMetadataSavers')}</h3>`;
html += '<div class="checkboxList paperList checkboxList-paperList">'; html += '<div class="checkboxList paperList checkboxList-paperList">';
for (var i = 0; i < metadataSavers.length; i++) { for (let i = 0; i < metadataSavers.length; i++) {
var plugin = metadataSavers[i]; const plugin = metadataSavers[i];
html += '<label><input type="checkbox" data-defaultenabled="' + plugin.DefaultEnabled + '" is="emby-checkbox" class="chkMetadataSaver" data-pluginname="' + plugin.Name + '" ' + false + '><span>' + plugin.Name + '</span></label>'; html += `<label><input type="checkbox" data-defaultenabled="${plugin.DefaultEnabled}" is="emby-checkbox" class="chkMetadataSaver" data-pluginname="${plugin.Name}" ${false}><span>${plugin.Name}</span></label>`;
} }
html += '</div>'; html += '</div>';
html += '<div class="fieldDescription" style="margin-top:.25em;">' + globalize.translate('LabelMetadataSaversHelp') + '</div>'; html += `<div class="fieldDescription" style="margin-top:.25em;">${globalize.translate('LabelMetadataSaversHelp')}</div>`;
elem.innerHTML = html; elem.innerHTML = html;
elem.classList.remove('hide'); elem.classList.remove('hide');
return true; return true;
} }
function getMetadataFetchersForTypeHtml(availableTypeOptions, libraryOptionsForType) { function getMetadataFetchersForTypeHtml(availableTypeOptions, libraryOptionsForType) {
var html = ''; let html = '';
var plugins = availableTypeOptions.MetadataFetchers; let plugins = availableTypeOptions.MetadataFetchers;
plugins = getOrderedPlugins(plugins, libraryOptionsForType.MetadataFetcherOrder || []); plugins = getOrderedPlugins(plugins, libraryOptionsForType.MetadataFetcherOrder || []);
if (!plugins.length) return html; if (!plugins.length) return html;
@ -112,8 +122,8 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
plugins.forEach((plugin, index) => { plugins.forEach((plugin, index) => {
html += '<div class="listItem metadataFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">'; html += '<div class="listItem metadataFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">';
var isChecked = libraryOptionsForType.MetadataFetchers ? -1 !== libraryOptionsForType.MetadataFetchers.indexOf(plugin.Name) : plugin.DefaultEnabled; const isChecked = libraryOptionsForType.MetadataFetchers ? libraryOptionsForType.MetadataFetchers.includes(plugin.Name) : plugin.DefaultEnabled;
var checkedHtml = isChecked ? ' checked="checked"' : ''; const checkedHtml = isChecked ? ' checked="checked"' : '';
html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkMetadataFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + '><span></span></label>'; html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkMetadataFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + '><span></span></label>';
html += '<div class="listItemBody">'; html += '<div class="listItemBody">';
html += '<h3 class="listItemBodyText">'; html += '<h3 class="listItemBodyText">';
@ -135,19 +145,19 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
} }
function getTypeOptions(allOptions, type) { function getTypeOptions(allOptions, type) {
var allTypeOptions = allOptions.TypeOptions || []; const allTypeOptions = allOptions.TypeOptions || [];
for (var i = 0; i < allTypeOptions.length; i++) { for (let i = 0; i < allTypeOptions.length; i++) {
var typeOptions = allTypeOptions[i]; const typeOptions = allTypeOptions[i];
if (typeOptions.Type === type) return typeOptions; if (typeOptions.Type === type) return typeOptions;
} }
return null; return null;
} }
function renderMetadataFetchers(page, availableOptions, libraryOptions) { function renderMetadataFetchers(page, availableOptions, libraryOptions) {
var html = ''; let html = '';
var elem = page.querySelector('.metadataFetchers'); const elem = page.querySelector('.metadataFetchers');
for (var i = 0; i < availableOptions.TypeOptions.length; i++) { for (let i = 0; i < availableOptions.TypeOptions.length; i++) {
var availableTypeOptions = availableOptions.TypeOptions[i]; const availableTypeOptions = availableOptions.TypeOptions[i];
html += getMetadataFetchersForTypeHtml(availableTypeOptions, getTypeOptions(libraryOptions, availableTypeOptions.Type) || {}); html += getMetadataFetchersForTypeHtml(availableTypeOptions, getTypeOptions(libraryOptions, availableTypeOptions.Type) || {});
} }
elem.innerHTML = html; elem.innerHTML = html;
@ -166,41 +176,41 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
} }
function renderSubtitleFetchers(page, availableOptions, libraryOptions) { function renderSubtitleFetchers(page, availableOptions, libraryOptions) {
var html = ''; let html = '';
var elem = page.querySelector('.subtitleFetchers'); const elem = page.querySelector('.subtitleFetchers');
var plugins = availableOptions.SubtitleFetchers; let plugins = availableOptions.SubtitleFetchers;
plugins = getOrderedPlugins(plugins, libraryOptions.SubtitleFetcherOrder || []); plugins = getOrderedPlugins(plugins, libraryOptions.SubtitleFetcherOrder || []);
if (!plugins.length) return html; if (!plugins.length) return html;
html += '<h3 class="checkboxListLabel">' + globalize.translate('LabelSubtitleDownloaders') + '</h3>'; html += `<h3 class="checkboxListLabel">${globalize.translate('LabelSubtitleDownloaders')}</h3>`;
html += '<div class="checkboxList paperList checkboxList-paperList">'; html += '<div class="checkboxList paperList checkboxList-paperList">';
for (var i = 0; i < plugins.length; i++) { for (let i = 0; i < plugins.length; i++) {
var plugin = plugins[i]; const plugin = plugins[i];
html += '<div class="listItem subtitleFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">'; html += `<div class="listItem subtitleFetcherItem sortableOption" data-pluginname="${plugin.Name}">`;
var isChecked = libraryOptions.DisabledSubtitleFetchers ? -1 === libraryOptions.DisabledSubtitleFetchers.indexOf(plugin.Name) : plugin.DefaultEnabled; const isChecked = libraryOptions.DisabledSubtitleFetchers ? !libraryOptions.DisabledSubtitleFetchers.includes(plugin.Name) : plugin.DefaultEnabled;
var checkedHtml = isChecked ? ' checked="checked"' : ''; const checkedHtml = isChecked ? ' checked="checked"' : '';
html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkSubtitleFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + '><span></span></label>'; html += `<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkSubtitleFetcher" data-pluginname="${plugin.Name}" ${checkedHtml}><span></span></label>`;
html += '<div class="listItemBody">'; html += '<div class="listItemBody">';
html += '<h3 class="listItemBodyText">'; html += '<h3 class="listItemBodyText">';
html += plugin.Name; html += plugin.Name;
html += '</h3>'; html += '</h3>';
html += '</div>'; html += '</div>';
if (i > 0) { if (i > 0) {
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonUp') + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_up"></span></button>'; html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('ButtonUp')}" class="btnSortableMoveUp btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_up"></span></button>`;
} else if (plugins.length > 1) { } else if (plugins.length > 1) {
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonDown') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_down"></span></button>'; html += `<button type="button" is="paper-icon-button-light" title="${globalize.translate('ButtonDown')}" class="btnSortableMoveDown btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_down"></span></button>`;
} }
html += '</div>'; html += '</div>';
} }
html += '</div>'; html += '</div>';
html += '<div class="fieldDescription">' + globalize.translate('SubtitleDownloadersHelp') + '</div>'; html += `<div class="fieldDescription">${globalize.translate('SubtitleDownloadersHelp')}</div>`;
elem.innerHTML = html; elem.innerHTML = html;
} }
function getImageFetchersForTypeHtml(availableTypeOptions, libraryOptionsForType) { function getImageFetchersForTypeHtml(availableTypeOptions, libraryOptionsForType) {
var html = ''; let html = '';
var plugins = availableTypeOptions.ImageFetchers; let plugins = availableTypeOptions.ImageFetchers;
plugins = getOrderedPlugins(plugins, libraryOptionsForType.ImageFetcherOrder || []); plugins = getOrderedPlugins(plugins, libraryOptionsForType.ImageFetcherOrder || []);
if (!plugins.length) return html; if (!plugins.length) return html;
@ -208,17 +218,17 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
html += '<div class="imageFetcher" data-type="' + availableTypeOptions.Type + '">'; html += '<div class="imageFetcher" data-type="' + availableTypeOptions.Type + '">';
html += '<div class="flex align-items-center" style="margin:1.5em 0 .5em;">'; html += '<div class="flex align-items-center" style="margin:1.5em 0 .5em;">';
html += '<h3 class="checkboxListLabel" style="margin:0;">' + globalize.translate('HeaderTypeImageFetchers', availableTypeOptions.Type) + '</h3>'; html += '<h3 class="checkboxListLabel" style="margin:0;">' + globalize.translate('HeaderTypeImageFetchers', availableTypeOptions.Type) + '</h3>';
var supportedImageTypes = availableTypeOptions.SupportedImageTypes || []; const supportedImageTypes = availableTypeOptions.SupportedImageTypes || [];
if (supportedImageTypes.length > 1 || 1 === supportedImageTypes.length && 'Primary' !== supportedImageTypes[0]) { if (supportedImageTypes.length > 1 || 1 === supportedImageTypes.length && 'Primary' !== supportedImageTypes[0]) {
html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="margin-left:1.5em;font-size:90%;"><span>' + globalize.translate('HeaderFetcherSettings') + '</span></button>'; html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="margin-left:1.5em;font-size:90%;"><span>' + globalize.translate('HeaderFetcherSettings') + '</span></button>';
} }
html += '</div>'; html += '</div>';
html += '<div class="checkboxList paperList checkboxList-paperList">'; html += '<div class="checkboxList paperList checkboxList-paperList">';
for (var i = 0; i < plugins.length; i++) { for (let i = 0; i < plugins.length; i++) {
var plugin = plugins[i]; const plugin = plugins[i];
html += '<div class="listItem imageFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">'; html += '<div class="listItem imageFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">';
var isChecked = libraryOptionsForType.ImageFetchers ? -1 !== libraryOptionsForType.ImageFetchers.indexOf(plugin.Name) : plugin.DefaultEnabled; const isChecked = libraryOptionsForType.ImageFetchers ? libraryOptionsForType.ImageFetchers.includes(plugin.Name) : plugin.DefaultEnabled;
var checkedHtml = isChecked ? ' checked="checked"' : ''; const checkedHtml = isChecked ? ' checked="checked"' : '';
html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkImageFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + '><span></span></label>'; html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkImageFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + '><span></span></label>';
html += '<div class="listItemBody">'; html += '<div class="listItemBody">';
html += '<h3 class="listItemBodyText">'; html += '<h3 class="listItemBodyText">';
@ -239,10 +249,10 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
} }
function renderImageFetchers(page, availableOptions, libraryOptions) { function renderImageFetchers(page, availableOptions, libraryOptions) {
var html = ''; let html = '';
var elem = page.querySelector('.imageFetchers'); const elem = page.querySelector('.imageFetchers');
for (var i = 0; i < availableOptions.TypeOptions.length; i++) { for (let i = 0; i < availableOptions.TypeOptions.length; i++) {
var availableTypeOptions = availableOptions.TypeOptions[i]; const availableTypeOptions = availableOptions.TypeOptions[i];
html += getImageFetchersForTypeHtml(availableTypeOptions, getTypeOptions(libraryOptions, availableTypeOptions.Type) || {}); html += getImageFetchersForTypeHtml(availableTypeOptions, getTypeOptions(libraryOptions, availableTypeOptions.Type) || {});
} }
elem.innerHTML = html; elem.innerHTML = html;
@ -258,12 +268,12 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
return true; return true;
} }
function populateMetadataSettings(parent, contentType, isNewLibrary) { function populateMetadataSettings(parent, contentType) {
var isNewLibrary = parent.classList.contains('newlibrary'); const isNewLibrary = parent.classList.contains('newlibrary');
return ApiClient.getJSON(ApiClient.getUrl('Libraries/AvailableOptions', { return ApiClient.getJSON(ApiClient.getUrl('Libraries/AvailableOptions', {
LibraryContentType: contentType, LibraryContentType: contentType,
IsNewLibrary: isNewLibrary IsNewLibrary: isNewLibrary
})).then(function(availableOptions) { })).then(availableOptions => {
currentAvailableOptions = availableOptions; currentAvailableOptions = availableOptions;
parent.availableOptions = availableOptions; parent.availableOptions = availableOptions;
renderMetadataSavers(parent, availableOptions.MetadataSavers); renderMetadataSavers(parent, availableOptions.MetadataSavers);
@ -272,14 +282,14 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
renderSubtitleFetchers(parent, availableOptions, {}); renderSubtitleFetchers(parent, availableOptions, {});
renderImageFetchers(parent, availableOptions, {}); renderImageFetchers(parent, availableOptions, {});
availableOptions.SubtitleFetchers.length ? parent.querySelector('.subtitleDownloadSettings').classList.remove('hide') : parent.querySelector('.subtitleDownloadSettings').classList.add('hide'); availableOptions.SubtitleFetchers.length ? parent.querySelector('.subtitleDownloadSettings').classList.remove('hide') : parent.querySelector('.subtitleDownloadSettings').classList.add('hide');
}).catch(function() { }).catch(() => {
return Promise.resolve(); return Promise.resolve();
}); });
} }
function adjustSortableListElement(elem) { function adjustSortableListElement(elem) {
var btnSortable = elem.querySelector('.btnSortable'); const btnSortable = elem.querySelector('.btnSortable');
var inner = btnSortable.querySelector('.material-icons'); const inner = btnSortable.querySelector('.material-icons');
if (elem.previousSibling) { if (elem.previousSibling) {
btnSortable.title = globalize.translate('ButtonUp'); btnSortable.title = globalize.translate('ButtonUp');
btnSortable.classList.add('btnSortableMoveUp'); btnSortable.classList.add('btnSortableMoveUp');
@ -296,22 +306,22 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
} }
function showImageOptionsForType(type) { function showImageOptionsForType(type) {
require(['imageoptionseditor'], function(ImageOptionsEditor) { import('imageoptionseditor').then(({default: ImageOptionsEditor}) => {
var typeOptions = getTypeOptions(currentLibraryOptions, type); let typeOptions = getTypeOptions(currentLibraryOptions, type);
if (!typeOptions) { if (!typeOptions) {
typeOptions = { typeOptions = {
Type: type Type: type
}; };
currentLibraryOptions.TypeOptions.push(typeOptions); currentLibraryOptions.TypeOptions.push(typeOptions);
} }
var availableOptions = getTypeOptions(currentAvailableOptions || {}, type); const availableOptions = getTypeOptions(currentAvailableOptions || {}, type);
var imageOptionsEditor = new ImageOptionsEditor(); const imageOptionsEditor = new ImageOptionsEditor();
imageOptionsEditor.show(type, typeOptions, availableOptions); imageOptionsEditor.show(type, typeOptions, availableOptions);
}); });
} }
function onImageFetchersContainerClick(e) { function onImageFetchersContainerClick(e) {
var btnImageOptionsForType = dom.parentWithClass(e.target, 'btnImageOptionsForType'); const btnImageOptionsForType = dom.parentWithClass(e.target, 'btnImageOptionsForType');
if (btnImageOptionsForType) { if (btnImageOptionsForType) {
return void showImageOptionsForType(dom.parentWithClass(btnImageOptionsForType, 'imageFetcher').getAttribute('data-type')); return void showImageOptionsForType(dom.parentWithClass(btnImageOptionsForType, 'imageFetcher').getAttribute('data-type'));
} }
@ -319,18 +329,18 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
} }
function onSortableContainerClick(e) { function onSortableContainerClick(e) {
var btnSortable = dom.parentWithClass(e.target, 'btnSortable'); const btnSortable = dom.parentWithClass(e.target, 'btnSortable');
if (btnSortable) { if (btnSortable) {
var li = dom.parentWithClass(btnSortable, 'sortableOption'); const li = dom.parentWithClass(btnSortable, 'sortableOption');
var list = dom.parentWithClass(li, 'paperList'); const list = dom.parentWithClass(li, 'paperList');
if (btnSortable.classList.contains('btnSortableMoveDown')) { if (btnSortable.classList.contains('btnSortableMoveDown')) {
var next = li.nextSibling; const next = li.nextSibling;
if (next) { if (next) {
li.parentNode.removeChild(li); li.parentNode.removeChild(li);
next.parentNode.insertBefore(li, next.nextSibling); next.parentNode.insertBefore(li, next.nextSibling);
} }
} else { } else {
var prev = li.previousSibling; const prev = li.previousSibling;
if (prev) { if (prev) {
li.parentNode.removeChild(li); li.parentNode.removeChild(li);
prev.parentNode.insertBefore(li, prev); prev.parentNode.insertBefore(li, prev);
@ -347,41 +357,35 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
parent.querySelector('.imageFetchers').addEventListener('click', onImageFetchersContainerClick); parent.querySelector('.imageFetchers').addEventListener('click', onImageFetchersContainerClick);
} }
function embed(parent, contentType, libraryOptions) { export async function embed(parent, contentType, libraryOptions) {
currentLibraryOptions = { currentLibraryOptions = {
TypeOptions: [] TypeOptions: []
}; };
currentAvailableOptions = null; currentAvailableOptions = null;
var isNewLibrary = null === libraryOptions; const isNewLibrary = null === libraryOptions;
isNewLibrary && parent.classList.add('newlibrary'); isNewLibrary && parent.classList.add('newlibrary');
return new Promise(function(resolve, reject) { const response = await fetch('components/libraryoptionseditor/libraryoptionseditor.template.html');
var xhr = new XMLHttpRequest; const template = await response.text();
xhr.open('GET', 'components/libraryoptionseditor/libraryoptionseditor.template.html', true); parent.innerHTML = globalize.translateHtml(template);
xhr.onload = function(e) {
var template = this.response;
parent.innerHTML = globalize.translateDocument(template);
populateRefreshInterval(parent.querySelector('#selectAutoRefreshInterval')); populateRefreshInterval(parent.querySelector('#selectAutoRefreshInterval'));
var promises = [populateLanguages(parent), populateCountries(parent.querySelector('#selectCountry'))]; const promises = [populateLanguages(parent), populateCountries(parent.querySelector('#selectCountry'))];
Promise.all(promises).then(function() { Promise.all(promises).then(function() {
return setContentType(parent, contentType).then(function() { return setContentType(parent, contentType).then(function() {
libraryOptions && setLibraryOptions(parent, libraryOptions); libraryOptions && setLibraryOptions(parent, libraryOptions);
bindEvents(parent); bindEvents(parent);
resolve(); return;
}); });
}); });
};
xhr.send();
});
} }
function setAdvancedVisible(parent, visible) { export function setAdvancedVisible(parent, visible) {
var elems = parent.querySelectorAll('.advanced'); const elems = parent.querySelectorAll('.advanced');
for (var i = 0; i < elems.length; i++) { for (let i = 0; i < elems.length; i++) {
visible ? elems[i].classList.remove('advancedHide') : elems[i].classList.add('advancedHide'); visible ? elems[i].classList.remove('advancedHide') : elems[i].classList.add('advancedHide');
} }
} }
function setContentType(parent, contentType) { export function setContentType(parent, contentType) {
if (contentType === 'homevideos' || contentType === 'photos') { if (contentType === 'homevideos' || contentType === 'photos') {
parent.querySelector('.chkEnablePhotosContainer').classList.remove('hide'); parent.querySelector('.chkEnablePhotosContainer').classList.remove('hide');
} else { } else {
@ -422,47 +426,47 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
} }
function setSubtitleFetchersIntoOptions(parent, options) { function setSubtitleFetchersIntoOptions(parent, options) {
options.DisabledSubtitleFetchers = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll('.chkSubtitleFetcher'), function(elem) { options.DisabledSubtitleFetchers = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll('.chkSubtitleFetcher'), elem => {
return !elem.checked; return !elem.checked;
}), function(elem) { }), elem => {
return elem.getAttribute('data-pluginname'); return elem.getAttribute('data-pluginname');
}); });
options.SubtitleFetcherOrder = Array.prototype.map.call(parent.querySelectorAll('.subtitleFetcherItem'), function(elem) { options.SubtitleFetcherOrder = Array.prototype.map.call(parent.querySelectorAll('.subtitleFetcherItem'), elem => {
return elem.getAttribute('data-pluginname'); return elem.getAttribute('data-pluginname');
}); });
} }
function setMetadataFetchersIntoOptions(parent, options) { function setMetadataFetchersIntoOptions(parent, options) {
var sections = parent.querySelectorAll('.metadataFetcher'); const sections = parent.querySelectorAll('.metadataFetcher');
for (var i = 0; i < sections.length; i++) { for (let i = 0; i < sections.length; i++) {
var section = sections[i]; const section = sections[i];
var type = section.getAttribute('data-type'); const type = section.getAttribute('data-type');
var typeOptions = getTypeOptions(options, type); let typeOptions = getTypeOptions(options, type);
if (!typeOptions) { if (!typeOptions) {
typeOptions = { typeOptions = {
Type: type Type: type
}; };
options.TypeOptions.push(typeOptions); options.TypeOptions.push(typeOptions);
} }
typeOptions.MetadataFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll('.chkMetadataFetcher'), function(elem) { typeOptions.MetadataFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll('.chkMetadataFetcher'), elem => {
return elem.checked; return elem.checked;
}), function(elem) { }), elem => {
return elem.getAttribute('data-pluginname'); return elem.getAttribute('data-pluginname');
}); });
typeOptions.MetadataFetcherOrder = Array.prototype.map.call(section.querySelectorAll('.metadataFetcherItem'), function(elem) { typeOptions.MetadataFetcherOrder = Array.prototype.map.call(section.querySelectorAll('.metadataFetcherItem'), elem => {
return elem.getAttribute('data-pluginname'); return elem.getAttribute('data-pluginname');
}); });
} }
} }
function setImageFetchersIntoOptions(parent, options) { function setImageFetchersIntoOptions(parent, options) {
var sections = parent.querySelectorAll('.imageFetcher'); const sections = parent.querySelectorAll('.imageFetcher');
for (var i = 0; i < sections.length; i++) { for (let i = 0; i < sections.length; i++) {
var section = sections[i]; const section = sections[i];
var type = section.getAttribute('data-type'); const type = section.getAttribute('data-type');
var typeOptions = getTypeOptions(options, type); let typeOptions = getTypeOptions(options, type);
if (!typeOptions) { if (!typeOptions) {
typeOptions = { typeOptions = {
Type: type Type: type
@ -470,23 +474,23 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
options.TypeOptions.push(typeOptions); options.TypeOptions.push(typeOptions);
} }
typeOptions.ImageFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll('.chkImageFetcher'), function(elem) { typeOptions.ImageFetchers = Array.prototype.map.call(Array.prototype.filter.call(section.querySelectorAll('.chkImageFetcher'), elem => {
return elem.checked; return elem.checked;
}), function(elem) { }), elem => {
return elem.getAttribute('data-pluginname'); return elem.getAttribute('data-pluginname');
}); });
typeOptions.ImageFetcherOrder = Array.prototype.map.call(section.querySelectorAll('.imageFetcherItem'), function(elem) { typeOptions.ImageFetcherOrder = Array.prototype.map.call(section.querySelectorAll('.imageFetcherItem'), elem => {
return elem.getAttribute('data-pluginname'); return elem.getAttribute('data-pluginname');
}); });
} }
} }
function setImageOptionsIntoOptions(parent, options) { function setImageOptionsIntoOptions(options) {
var originalTypeOptions = (currentLibraryOptions || {}).TypeOptions || []; const originalTypeOptions = (currentLibraryOptions || {}).TypeOptions || [];
for (var i = 0; i < originalTypeOptions.length; i++) { for (let i = 0; i < originalTypeOptions.length; i++) {
var originalTypeOption = originalTypeOptions[i]; const originalTypeOption = originalTypeOptions[i];
var typeOptions = getTypeOptions(options, originalTypeOption.Type); let typeOptions = getTypeOptions(options, originalTypeOption.Type);
if (!typeOptions) { if (!typeOptions) {
typeOptions = { typeOptions = {
@ -498,8 +502,8 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
} }
} }
function getLibraryOptions(parent) { export function getLibraryOptions(parent) {
var options = { const options = {
EnableArchiveMediaFiles: false, EnableArchiveMediaFiles: false,
EnablePhotos: parent.querySelector('.chkEnablePhotos').checked, EnablePhotos: parent.querySelector('.chkEnablePhotos').checked,
EnableRealtimeMonitor: parent.querySelector('.chkEnableRealtimeMonitor').checked, EnableRealtimeMonitor: parent.querySelector('.chkEnableRealtimeMonitor').checked,
@ -520,39 +524,39 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
SkipSubtitlesIfAudioTrackMatches: parent.querySelector('#chkSkipIfAudioTrackPresent').checked, SkipSubtitlesIfAudioTrackMatches: parent.querySelector('#chkSkipIfAudioTrackPresent').checked,
SaveSubtitlesWithMedia: parent.querySelector('#chkSaveSubtitlesLocally').checked, SaveSubtitlesWithMedia: parent.querySelector('#chkSaveSubtitlesLocally').checked,
RequirePerfectSubtitleMatch: parent.querySelector('#chkRequirePerfectMatch').checked, RequirePerfectSubtitleMatch: parent.querySelector('#chkRequirePerfectMatch').checked,
MetadataSavers: Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll('.chkMetadataSaver'), function(elem) { MetadataSavers: Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll('.chkMetadataSaver'), elem => {
return elem.checked; return elem.checked;
}), function(elem) { }), elem => {
return elem.getAttribute('data-pluginname'); return elem.getAttribute('data-pluginname');
}), }),
TypeOptions: [] TypeOptions: []
}; };
options.LocalMetadataReaderOrder = Array.prototype.map.call(parent.querySelectorAll('.localReaderOption'), function(elem) { options.LocalMetadataReaderOrder = Array.prototype.map.call(parent.querySelectorAll('.localReaderOption'), elem => {
return elem.getAttribute('data-pluginname'); return elem.getAttribute('data-pluginname');
}); });
options.SubtitleDownloadLanguages = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll('.chkSubtitleLanguage'), function(elem) { options.SubtitleDownloadLanguages = Array.prototype.map.call(Array.prototype.filter.call(parent.querySelectorAll('.chkSubtitleLanguage'), elem => {
return elem.checked; return elem.checked;
}), function(elem) { }), elem => {
return elem.getAttribute('data-lang'); return elem.getAttribute('data-lang');
}); });
setSubtitleFetchersIntoOptions(parent, options); setSubtitleFetchersIntoOptions(parent, options);
setMetadataFetchersIntoOptions(parent, options); setMetadataFetchersIntoOptions(parent, options);
setImageFetchersIntoOptions(parent, options); setImageFetchersIntoOptions(parent, options);
setImageOptionsIntoOptions(parent, options); setImageOptionsIntoOptions(options);
return options; return options;
} }
function getOrderedPlugins(plugins, configuredOrder) { function getOrderedPlugins(plugins, configuredOrder) {
plugins = plugins.slice(0); plugins = plugins.slice(0);
plugins.sort(function(a, b) { plugins.sort((a, b) => {
return a = configuredOrder.indexOf(a.Name), b = configuredOrder.indexOf(b.Name), a < b ? -1 : a > b ? 1 : 0; return a = configuredOrder.indexOf(a.Name), b = configuredOrder.indexOf(b.Name), a < b ? -1 : a > b ? 1 : 0;
}); });
return plugins; return plugins;
} }
function setLibraryOptions(parent, options) { export function setLibraryOptions(parent, options) {
currentLibraryOptions = options; currentLibraryOptions = options;
currentAvailableOptions = parent.availableOptions; currentAvailableOptions = parent.availableOptions;
parent.querySelector('#selectLanguage').value = options.PreferredMetadataLanguage || ''; parent.querySelector('#selectLanguage').value = options.PreferredMetadataLanguage || '';
@ -573,11 +577,11 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
parent.querySelector('#chkSaveSubtitlesLocally').checked = options.SaveSubtitlesWithMedia; parent.querySelector('#chkSaveSubtitlesLocally').checked = options.SaveSubtitlesWithMedia;
parent.querySelector('#chkSkipIfAudioTrackPresent').checked = options.SkipSubtitlesIfAudioTrackMatches; parent.querySelector('#chkSkipIfAudioTrackPresent').checked = options.SkipSubtitlesIfAudioTrackMatches;
parent.querySelector('#chkRequirePerfectMatch').checked = options.RequirePerfectSubtitleMatch; parent.querySelector('#chkRequirePerfectMatch').checked = options.RequirePerfectSubtitleMatch;
Array.prototype.forEach.call(parent.querySelectorAll('.chkMetadataSaver'), function(elem) { Array.prototype.forEach.call(parent.querySelectorAll('.chkMetadataSaver'), elem => {
elem.checked = options.MetadataSavers ? -1 !== options.MetadataSavers.indexOf(elem.getAttribute('data-pluginname')) : 'true' === elem.getAttribute('data-defaultenabled'); elem.checked = options.MetadataSavers ? options.MetadataSavers.includes(elem.getAttribute('data-pluginname')) : 'true' === elem.getAttribute('data-defaultenabled');
}); });
Array.prototype.forEach.call(parent.querySelectorAll('.chkSubtitleLanguage'), function(elem) { Array.prototype.forEach.call(parent.querySelectorAll('.chkSubtitleLanguage'), elem => {
elem.checked = !!options.SubtitleDownloadLanguages && -1 !== options.SubtitleDownloadLanguages.indexOf(elem.getAttribute('data-lang')); elem.checked = !!options.SubtitleDownloadLanguages && options.SubtitleDownloadLanguages.includes(elem.getAttribute('data-lang'));
}); });
renderMetadataReaders(parent, getOrderedPlugins(parent.availableOptions.MetadataReaders, options.LocalMetadataReaderOrder || [])); renderMetadataReaders(parent, getOrderedPlugins(parent.availableOptions.MetadataReaders, options.LocalMetadataReaderOrder || []));
renderMetadataFetchers(parent, parent.availableOptions, options); renderMetadataFetchers(parent, parent.availableOptions, options);
@ -585,14 +589,14 @@ define(['globalize', 'dom', 'emby-checkbox', 'emby-select', 'emby-input'], funct
renderSubtitleFetchers(parent, parent.availableOptions, options); renderSubtitleFetchers(parent, parent.availableOptions, options);
} }
var currentLibraryOptions; let currentLibraryOptions;
var currentAvailableOptions; let currentAvailableOptions;
return { /* eslint-enable indent */
export default {
embed: embed, embed: embed,
setContentType: setContentType, setContentType: setContentType,
getLibraryOptions: getLibraryOptions, getLibraryOptions: getLibraryOptions,
setLibraryOptions: setLibraryOptions, setLibraryOptions: setLibraryOptions,
setAdvancedVisible: setAdvancedVisible setAdvancedVisible: setAdvancedVisible
}; };
});

186
src/components/listview/listview.js
View file

@ -1,19 +1,32 @@
define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutManager', 'globalize', 'datetime', 'cardBuilder', 'css!./listview', 'emby-ratingbutton', 'emby-playstatebutton'], function (itemHelper, mediaInfo, indicators, connectionManager, layoutManager, globalize, datetime, cardBuilder) { /* eslint-disable indent */
'use strict';
/**
* Module for display list view.
* @module components/listview/listview
*/
import itemHelper from 'itemHelper';
import mediaInfo from 'mediaInfo';
import indicators from 'indicators';
import connectionManager from 'connectionManager';
import layoutManager from 'layoutManager';
import globalize from 'globalize';
import datetime from 'datetime';
import cardBuilder from 'cardBuilder';
import 'css!./listview';
import 'emby-ratingbutton';
import 'emby-playstatebutton';
function getIndex(item, options) { function getIndex(item, options) {
if (options.index === 'disc') { if (options.index === 'disc') {
return item.ParentIndexNumber == null ? '' : globalize.translate('ValueDiscNumber', item.ParentIndexNumber); return item.ParentIndexNumber == null ? '' : globalize.translate('ValueDiscNumber', item.ParentIndexNumber);
} }
var sortBy = (options.sortBy || '').toLowerCase(); const sortBy = (options.sortBy || '').toLowerCase();
var code; let code;
var name; let name;
if (sortBy.indexOf('sortname') === 0) { if (sortBy.indexOf('sortname') === 0) {
if (item.Type === 'Episode') { if (item.Type === 'Episode') {
return ''; return '';
} }
@ -29,11 +42,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
return name.toUpperCase(); return name.toUpperCase();
} }
if (sortBy.indexOf('officialrating') === 0) { if (sortBy.indexOf('officialrating') === 0) {
return item.OfficialRating || globalize.translate('Unrated'); return item.OfficialRating || globalize.translate('Unrated');
} }
if (sortBy.indexOf('communityrating') === 0) { if (sortBy.indexOf('communityrating') === 0) {
if (item.CommunityRating == null) { if (item.CommunityRating == null) {
return globalize.translate('Unrated'); return globalize.translate('Unrated');
} }
@ -41,7 +52,6 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
return Math.floor(item.CommunityRating); return Math.floor(item.CommunityRating);
} }
if (sortBy.indexOf('criticrating') === 0) { if (sortBy.indexOf('criticrating') === 0) {
if (item.CriticRating == null) { if (item.CriticRating == null) {
return globalize.translate('Unrated'); return globalize.translate('Unrated');
} }
@ -49,7 +59,6 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
return Math.floor(item.CriticRating); return Math.floor(item.CriticRating);
} }
if (sortBy.indexOf('albumartist') === 0) { if (sortBy.indexOf('albumartist') === 0) {
// SortName // SortName
if (!item.AlbumArtist) { if (!item.AlbumArtist) {
return ''; return '';
@ -68,11 +77,10 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
function getImageUrl(item, width) { function getImageUrl(item, width) {
const apiClient = connectionManager.getApiClient(item.ServerId);
var apiClient = connectionManager.getApiClient(item.ServerId);
let itemId; let itemId;
var options = { const options = {
maxWidth: width * 2, maxWidth: width * 2,
type: 'Primary' type: 'Primary'
}; };
@ -98,9 +106,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
function getChannelImageUrl(item, width) { function getChannelImageUrl(item, width) {
const apiClient = connectionManager.getApiClient(item.ServerId);
var apiClient = connectionManager.getApiClient(item.ServerId); const options = {
var options = {
maxWidth: width * 2, maxWidth: width * 2,
type: 'Primary' type: 'Primary'
}; };
@ -115,9 +122,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
function getTextLinesHtml(textlines, isLargeStyle) { function getTextLinesHtml(textlines, isLargeStyle) {
var html = ''; let html = '';
var largeTitleTagName = layoutManager.tv ? 'h2' : 'div'; const largeTitleTagName = layoutManager.tv ? 'h2' : 'div';
for (const [i, text] of textlines.entries()) { for (const [i, text] of textlines.entries()) {
if (!text) { if (!text) {
@ -126,7 +133,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (i === 0) { if (i === 0) {
if (isLargeStyle) { if (isLargeStyle) {
html += '<' + largeTitleTagName + ' class="listItemBodyText">'; html += `<${largeTitleTagName} class="listItemBodyText">`;
} else { } else {
html += '<div class="listItemBodyText">'; html += '<div class="listItemBodyText">';
} }
@ -135,7 +142,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
html += (textlines[i] || '&nbsp;'); html += (textlines[i] || '&nbsp;');
if (i === 0 && isLargeStyle) { if (i === 0 && isLargeStyle) {
html += '</' + largeTitleTagName + '>'; html += `</${largeTitleTagName}>`;
} else { } else {
html += '</div>'; html += '</div>';
} }
@ -145,14 +152,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
function getRightButtonsHtml(options) { function getRightButtonsHtml(options) {
let html = '';
var html = ''; for (let i = 0, length = options.rightButtons.length; i < length; i++) {
const button = options.rightButtons[i];
for (var i = 0, length = options.rightButtons.length; i < length; i++) { html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="${button.id}" title="${button.title}"><span class="material-icons ${button.icon}"></span></button>`;
var button = options.rightButtons[i];
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="' + button.id + '" title="' + button.title + '"><span class="material-icons ' + button.icon + '"></span></button>';
} }
return html; return html;
@ -162,37 +167,33 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
return item.Id; return item.Id;
} }
function getListViewHtml(options) { export function getListViewHtml(options) {
const items = options.items;
var items = options.items; let groupTitle = '';
const action = options.action || 'link';
var groupTitle = ''; const isLargeStyle = options.imageSize === 'large';
var action = options.action || 'link'; const enableOverview = options.enableOverview;
var isLargeStyle = options.imageSize === 'large'; const clickEntireItem = layoutManager.tv ? true : false;
var enableOverview = options.enableOverview; const outerTagName = clickEntireItem ? 'button' : 'div';
const enableSideMediaInfo = options.enableSideMediaInfo != null ? options.enableSideMediaInfo : true;
var clickEntireItem = layoutManager.tv ? true : false; let outerHtml = '';
var outerTagName = clickEntireItem ? 'button' : 'div';
var enableSideMediaInfo = options.enableSideMediaInfo != null ? options.enableSideMediaInfo : true;
var outerHtml = ''; const enableContentWrapper = options.enableOverview && !layoutManager.tv;
const containerAlbumArtistIds = (options.containerAlbumArtists || []).map(getId);
var enableContentWrapper = options.enableOverview && !layoutManager.tv; for (let i = 0, length = items.length; i < length; i++) {
var containerAlbumArtistIds = (options.containerAlbumArtists || []).map(getId); const item = items[i];
for (var i = 0, length = items.length; i < length; i++) { let html = '';
var item = items[i];
var html = '';
if (options.showIndex) { if (options.showIndex) {
const itemGroupTitle = getIndex(item, options);
var itemGroupTitle = getIndex(item, options);
if (itemGroupTitle !== groupTitle) { if (itemGroupTitle !== groupTitle) {
if (html) { if (html) {
html += '</div>'; html += '</div>';
} }
@ -211,7 +212,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
var cssClass = 'listItem'; let cssClass = 'listItem';
if (options.border || (options.highlight !== false && !layoutManager.tv)) { if (options.border || (options.highlight !== false && !layoutManager.tv)) {
cssClass += ' listItem-border'; cssClass += ' listItem-border';
@ -225,37 +226,33 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
cssClass += ' listItem-focusscale'; cssClass += ' listItem-focusscale';
} }
var downloadWidth = 80; let downloadWidth = 80;
if (isLargeStyle) { if (isLargeStyle) {
cssClass += ' listItem-largeImage'; cssClass += ' listItem-largeImage';
downloadWidth = 500; 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 + '"') : ''; const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (` data-positionticks="${item.UserData.PlaybackPositionTicks}"`) : '';
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : ''; const collectionIdData = options.collectionId ? (` data-collectionid="${options.collectionId}"`) : '';
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : ''; const playlistIdData = options.playlistId ? (` data-playlistid="${options.playlistId}"`) : '';
var mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : ''; const mediaTypeData = item.MediaType ? (` data-mediatype="${item.MediaType}"`) : '';
var collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : ''; const collectionTypeData = item.CollectionType ? (` data-collectiontype="${item.CollectionType}"`) : '';
var channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : ''; const channelIdData = item.ChannelId ? (` data-channelid="${item.ChannelId}"`) : '';
if (enableContentWrapper) { if (enableContentWrapper) {
cssClass += ' listItem-withContentWrapper'; 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) { if (enableContentWrapper) {
html += '<div class="listItem-content">'; html += '<div class="listItem-content">';
} }
if (!clickEntireItem && options.dragHandle) { if (!clickEntireItem && options.dragHandle) {
//html += '<button is="paper-icon-button-light" class="listViewDragHandle listItemButton"><span class="material-icons drag_handle"></span></button>';
// Firefox and Edge are not allowing the button to be draggable
html += '<span class="listViewDragHandle material-icons listItemIcon listItemIcon-transparent drag_handle"></span>'; html += '<span class="listViewDragHandle material-icons listItemIcon listItemIcon-transparent drag_handle"></span>';
} }
@ -267,13 +264,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
imageClass += ' listItemImage-large-tv'; imageClass += ' listItemImage-large-tv';
} }
var playOnImageClick = options.imagePlayButton && !layoutManager.tv; const playOnImageClick = options.imagePlayButton && !layoutManager.tv;
if (!clickEntireItem) { if (!clickEntireItem) {
imageClass += ' itemAction'; imageClass += ' itemAction';
} }
var imageAction = playOnImageClick ? 'link' : action; const imageAction = playOnImageClick ? 'link' : action;
if (imgUrl) { if (imgUrl) {
html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" item-icon>'; html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" item-icon>';
@ -281,18 +278,18 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
html += '<div class="' + imageClass + ' cardImageContainer ' + cardBuilder.getDefaultBackgroundClass(item.Name) + '">' + cardBuilder.getDefaultText(item, options); html += '<div class="' + imageClass + ' cardImageContainer ' + cardBuilder.getDefaultBackgroundClass(item.Name) + '">' + cardBuilder.getDefaultText(item, options);
} }
var indicatorsHtml = ''; let indicatorsHtml = '';
indicatorsHtml += indicators.getPlayedIndicatorHtml(item); indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
if (indicatorsHtml) { if (indicatorsHtml) {
html += '<div class="indicators listItemIndicators">' + indicatorsHtml + '</div>'; html += `<div class="indicators listItemIndicators">${indicatorsHtml}</div>`;
} }
if (playOnImageClick) { if (playOnImageClick) {
html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow"></span></button>'; html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow"></span></button>';
} }
var progressHtml = indicators.getProgressBarHtml(item, { const progressHtml = indicators.getProgressBarHtml(item, {
containerClass: 'listItemProgressBar' containerClass: 'listItemProgressBar'
}); });
@ -303,13 +300,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
if (options.showIndexNumberLeft) { if (options.showIndexNumberLeft) {
html += '<div class="listItem-indexnumberleft">'; html += '<div class="listItem-indexnumberleft">';
html += (item.IndexNumber || '&nbsp;'); html += (item.IndexNumber || '&nbsp;');
html += '</div>'; html += '</div>';
} }
var textlines = []; const textlines = [];
if (options.showProgramDateTime) { if (options.showProgramDateTime) {
textlines.push(datetime.toLocaleString(datetime.parseISO8601Date(item.StartDate), { textlines.push(datetime.toLocaleString(datetime.parseISO8601Date(item.StartDate), {
@ -332,7 +328,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
var parentTitle = null; let parentTitle = null;
if (options.showParentTitle) { if (options.showParentTitle) {
if (item.Type === 'Episode') { if (item.Type === 'Episode') {
@ -342,18 +338,16 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
var displayName = itemHelper.getDisplayName(item, { let displayName = itemHelper.getDisplayName(item, {
includeParentInfo: options.includeParentInfoInTitle includeParentInfo: options.includeParentInfoInTitle
}); });
if (options.showIndexNumber && item.IndexNumber != null) { if (options.showIndexNumber && item.IndexNumber != null) {
displayName = item.IndexNumber + '. ' + displayName; displayName = `${item.IndexNumber}. ${displayName}`;
} }
if (options.showParentTitle && options.parentTitleWithTitle) { if (options.showParentTitle && options.parentTitleWithTitle) {
if (displayName) { if (displayName) {
if (parentTitle) { if (parentTitle) {
parentTitle += ' - '; parentTitle += ' - ';
} }
@ -371,29 +365,25 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (item.IsFolder) { if (item.IsFolder) {
if (options.artist !== false) { if (options.artist !== false) {
if (item.AlbumArtist && item.Type === 'MusicAlbum') { if (item.AlbumArtist && item.Type === 'MusicAlbum') {
textlines.push(item.AlbumArtist); textlines.push(item.AlbumArtist);
} }
} }
} else { } else {
let showArtist = options.artist === true;
var showArtist = options.artist === true; const artistItems = item.ArtistItems;
var artistItems = item.ArtistItems;
if (!showArtist && options.artist !== false) { if (!showArtist && options.artist !== false) {
if (!artistItems || !artistItems.length) { if (!artistItems || !artistItems.length) {
showArtist = true; 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; showArtist = true;
} }
} }
if (showArtist) { if (showArtist) {
if (artistItems && item.Type !== 'MusicAlbum') { if (artistItems && item.Type !== 'MusicAlbum') {
textlines.push(artistItems.map(function (a) { textlines.push(artistItems.map(a => {
return a.Name; return a.Name;
}).join(', ')); }).join(', '));
} }
@ -401,7 +391,6 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
if (item.Type === 'TvChannel') { if (item.Type === 'TvChannel') {
if (item.CurrentProgram) { if (item.CurrentProgram) {
textlines.push(itemHelper.getDisplayName(item.CurrentProgram)); textlines.push(itemHelper.getDisplayName(item.CurrentProgram));
} }
@ -416,21 +405,22 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
cssClass += ' listItemBody-noleftpadding'; cssClass += ' listItemBody-noleftpadding';
} }
html += '<div class="' + cssClass + '">'; html += `<div class="${cssClass}">`;
html += getTextLinesHtml(textlines, isLargeStyle); html += getTextLinesHtml(textlines, isLargeStyle);
if (options.mediaInfo !== false) { if (options.mediaInfo !== false) {
if (!enableSideMediaInfo) { if (!enableSideMediaInfo) {
const mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText';
var mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText'; html += `<div class="${mediaInfoClass}">`;
html += mediaInfo.getPrimaryMediaInfoHtml(item, {
html += '<div class="' + mediaInfoClass + '">' + mediaInfo.getPrimaryMediaInfoHtml(item, {
episodeTitle: false, episodeTitle: false,
originalAirDate: false, originalAirDate: false,
subtitles: false subtitles: false
}) + '</div>'; });
html += '</div>';
} }
} }
@ -444,7 +434,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (options.mediaInfo !== false) { if (options.mediaInfo !== false) {
if (enableSideMediaInfo) { if (enableSideMediaInfo) {
html += '<div class="secondary listItemMediaInfo">' + mediaInfo.getPrimaryMediaInfoHtml(item, { html += '<div class="secondary listItemMediaInfo">';
html += mediaInfo.getPrimaryMediaInfoHtml(item, {
year: false, year: false,
container: false, container: false,
@ -452,7 +443,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
criticRating: false, criticRating: false,
endsAt: false endsAt: false
}) + '</div>'; });
html += '</div>';
} }
} }
@ -463,7 +455,6 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
html += '<div class="listViewUserDataButtons">'; html += '<div class="listViewUserDataButtons">';
if (!clickEntireItem) { if (!clickEntireItem) {
if (options.addToListButton) { if (options.addToListButton) {
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><span class="material-icons playlist_add"></span></button>'; html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="addtoplaylist"><span class="material-icons playlist_add"></span></button>';
} }
@ -477,9 +468,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
if (options.enableUserDataButtons !== false) { if (options.enableUserDataButtons !== false) {
const userData = item.UserData || {};
var userData = item.UserData || {}; const likes = userData.Likes == null ? '' : userData.Likes;
var likes = userData.Likes == null ? '' : userData.Likes;
if (itemHelper.canMarkPlayed(item) && options.enablePlayedButton !== false) { if (itemHelper.canMarkPlayed(item) && options.enablePlayedButton !== false) {
html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons check"></span></button>'; html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons check"></span></button>';
@ -506,7 +496,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
html += '</' + outerTagName + '>'; html += `</${outerTagName}>`;
outerHtml += html; outerHtml += html;
} }
@ -514,7 +504,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
return outerHtml; return outerHtml;
} }
return { /* eslint-enable indent */
export default {
getListViewHtml: getListViewHtml getListViewHtml: getListViewHtml
}; };
});

BIN
src/components/loading/loader.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

8
src/components/loading/loading.js
View file

@ -1,10 +1,6 @@
define(['components/loading/loadingLegacy', 'browser', 'css!./loading'], function (loadingLegacy, browser) { define(['css!./loading'], function () {
'use strict'; 'use strict';
if (browser.tizen || browser.operaTv || browser.chromecast || browser.orsay || browser.web0s || browser.ps4) {
return loadingLegacy;
}
var loadingElem; var loadingElem;
var layer1; var layer1;
var layer2; var layer2;
@ -18,7 +14,6 @@ define(['components/loading/loadingLegacy', 'browser', 'css!./loading'], functio
var elem = loadingElem; var elem = loadingElem;
if (!elem) { if (!elem) {
elem = document.createElement('div'); elem = document.createElement('div');
loadingElem = elem; loadingElem = elem;
@ -60,7 +55,6 @@ define(['components/loading/loadingLegacy', 'browser', 'css!./loading'], functio
var elem = loadingElem; var elem = loadingElem;
if (elem) { if (elem) {
elem.classList.remove('mdlSpinnerActive'); elem.classList.remove('mdlSpinnerActive');
elem.classList.remove('mdl-spinner__layer-1-active'); elem.classList.remove('mdl-spinner__layer-1-active');

10
src/components/loading/loadingLegacy.css
View file

@ -1,10 +0,0 @@
.loading-spinner {
margin-top: -3em;
margin-left: -3em;
width: 6em;
height: 6em;
position: fixed;
top: 50%;
left: 50%;
z-index: 9999999;
}

28
src/components/loading/loadingLegacy.js
View file

@ -1,28 +0,0 @@
define(['require', 'css!./loadingLegacy'], function (require) {
'use strict';
var loadingElem;
return {
show: function () {
var elem = loadingElem;
if (!elem) {
elem = document.createElement('img');
elem.src = require.toUrl('.').split('?')[0] + '/loader.gif';
loadingElem = elem;
elem.classList.add('loading-spinner');
document.body.appendChild(elem);
}
elem.classList.remove('hide');
},
hide: function () {
var elem = loadingElem;
if (elem) {
elem.classList.add('hide');
}
}
};
});

116
src/components/maintabsmanager.js
View file

@ -1,31 +1,17 @@
define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, browser, events) { import dom from 'dom';
'use strict'; import browser from 'browser';
import events from 'events';
import 'emby-tabs';
import 'emby-button';
var tabOwnerView; /* eslint-disable indent */
var queryScope = document.querySelector('.skinHeader');
var footerTabsContainer;
var headerTabsContainer;
var tabsElem;
function enableTabsInFooter() { let tabOwnerView;
return false; const queryScope = document.querySelector('.skinHeader');
} let headerTabsContainer;
let tabsElem;
function getTabsContainerElem() {
}
function ensureElements(enableInFooter) {
if (enableInFooter) {
if (!footerTabsContainer) {
footerTabsContainer = document.createElement('div');
footerTabsContainer.classList.add('footerTabs');
footerTabsContainer.classList.add('sectionTabs');
footerTabsContainer.classList.add('hide');
//appFooter.add(footerTabsContainer);
}
}
function ensureElements() {
if (!headerTabsContainer) { if (!headerTabsContainer) {
headerTabsContainer = queryScope.querySelector('.headerTabs'); headerTabsContainer = queryScope.querySelector('.headerTabs');
} }
@ -37,14 +23,12 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
} }
function allowSwipe(target) { function allowSwipe(target) {
function allowSwipeOn(elem) { function allowSwipeOn(elem) {
if (dom.parentWithTag(elem, 'input')) { if (dom.parentWithTag(elem, 'input')) {
return false; return false;
} }
var classList = elem.classList; const classList = elem.classList;
if (classList) { if (classList) {
return !classList.contains('scrollX') && !classList.contains('animatedScrollX'); return !classList.contains('scrollX') && !classList.contains('animatedScrollX');
} }
@ -52,7 +36,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
return true; return true;
} }
var parent = target; let parent = target;
while (parent != null) { while (parent != null) {
if (!allowSwipeOn(parent)) { if (!allowSwipeOn(parent)) {
return false; return false;
@ -64,28 +48,25 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
} }
function configureSwipeTabs(view, tabsElem, getTabContainersFn) { function configureSwipeTabs(view, tabsElem, getTabContainersFn) {
if (!browser.touch) { if (!browser.touch) {
return; return;
} }
// implement without hammer // implement without hammer
var pageCount = getTabContainersFn().length; const onSwipeLeft = function (e, target) {
var onSwipeLeft = function (e, target) {
if (allowSwipe(target) && view.contains(target)) { if (allowSwipe(target) && view.contains(target)) {
tabsElem.selectNext(); tabsElem.selectNext();
} }
}; };
var onSwipeRight = function (e, target) { const onSwipeRight = function (e, target) {
if (allowSwipe(target) && view.contains(target)) { if (allowSwipe(target) && view.contains(target)) {
tabsElem.selectPrevious(); tabsElem.selectPrevious();
} }
}; };
require(['touchHelper'], function (TouchHelper) { import('touchHelper').then(({default: TouchHelper}) => {
const touchHelper = new TouchHelper(view.parentNode.parentNode);
var touchHelper = new TouchHelper(view.parentNode.parentNode);
events.on(touchHelper, 'swipeleft', onSwipeLeft); events.on(touchHelper, 'swipeleft', onSwipeLeft);
events.on(touchHelper, 'swiperight', onSwipeRight); events.on(touchHelper, 'swiperight', onSwipeRight);
@ -96,29 +77,20 @@ 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();
if (!view) { if (!view) {
if (tabOwnerView) { if (tabOwnerView) {
if (!headerTabsContainer) { if (!headerTabsContainer) {
headerTabsContainer = queryScope.querySelector('.headerTabs'); headerTabsContainer = queryScope.querySelector('.headerTabs');
} }
ensureElements(enableInFooter); ensureElements();
document.body.classList.remove('withSectionTabs'); document.body.classList.remove('withSectionTabs');
headerTabsContainer.innerHTML = ''; headerTabsContainer.innerHTML = '';
headerTabsContainer.classList.add('hide'); headerTabsContainer.classList.add('hide');
if (footerTabsContainer) {
footerTabsContainer.innerHTML = '';
footerTabsContainer.classList.add('hide');
}
tabOwnerView = null; tabOwnerView = null;
} }
return { return {
@ -127,28 +99,26 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
}; };
} }
ensureElements(enableInFooter); ensureElements();
var tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer; const tabsContainerElem = headerTabsContainer;
if (!tabOwnerView) { if (!tabOwnerView) {
tabsContainerElem.classList.remove('hide'); tabsContainerElem.classList.remove('hide');
} }
if (tabOwnerView !== view) { if (tabOwnerView !== view) {
let index = 0;
var index = 0; const indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"');
const tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) {
var indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"'); let tabClass = 'emby-tab-button';
var tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) {
var tabClass = 'emby-tab-button';
if (t.enabled === false) { if (t.enabled === false) {
tabClass += ' hide'; tabClass += ' hide';
} }
var tabHtml; let tabHtml;
if (t.cssClass) { if (t.cssClass) {
tabClass += ' ' + t.cssClass; tabClass += ' ' + t.cssClass;
@ -162,7 +132,6 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
index++; index++;
return tabHtml; return tabHtml;
}).join('') + '</div></div>'; }).join('') + '</div></div>';
tabsContainerElem.innerHTML = tabsHtml; tabsContainerElem.innerHTML = tabsHtml;
@ -176,23 +145,15 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
configureSwipeTabs(view, tabsElem, getTabContainersFn); configureSwipeTabs(view, tabsElem, getTabContainersFn);
tabsElem.addEventListener('beforetabchange', function (e) { tabsElem.addEventListener('beforetabchange', function (e) {
const tabContainers = getTabContainersFn();
var tabContainers = getTabContainersFn();
if (e.detail.previousIndex != null) { if (e.detail.previousIndex != null) {
const previousPanel = tabContainers[e.detail.previousIndex];
var previousPanel = tabContainers[e.detail.previousIndex];
if (previousPanel) { if (previousPanel) {
previousPanel.classList.remove('is-active'); 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) {
// fadeInRight(newPanel);
// }
//}
if (newPanel) { if (newPanel) {
newPanel.classList.add('is-active'); newPanel.classList.add('is-active');
@ -210,16 +171,11 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
if (tabsElem.selectedIndex) { if (tabsElem.selectedIndex) {
tabsElem.selectedIndex(selectedIndex); tabsElem.selectedIndex(selectedIndex);
} else { } else {
tabsElem.readySelectedIndex = selectedIndex; tabsElem.readySelectedIndex = selectedIndex;
tabsElem.addEventListener('ready', onViewTabsReady); tabsElem.addEventListener('ready', onViewTabsReady);
} }
} }
//if (enableSwipe !== false) {
// libraryBrowser.configureSwipeTabs(ownerpage, tabs);
//}
return { return {
tabsContainer: tabsContainerElem, tabsContainer: tabsContainerElem,
tabs: tabsContainerElem.querySelector('[is="emby-tabs"]'), tabs: tabsContainerElem.querySelector('[is="emby-tabs"]'),
@ -241,9 +197,8 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
}; };
} }
function selectedTabIndex(index) { export function selectedTabIndex(index) {
const tabsContainerElem = headerTabsContainer;
var tabsContainerElem = headerTabsContainer;
if (!tabsElem) { if (!tabsElem) {
tabsElem = tabsContainerElem.querySelector('[is="emby-tabs"]'); tabsElem = tabsContainerElem.querySelector('[is="emby-tabs"]');
@ -256,13 +211,8 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
} }
} }
function getTabsElement() { export function getTabsElement() {
return document.querySelector('.tabs-viewmenubar'); return document.querySelector('.tabs-viewmenubar');
} }
return { /* eslint-enable indent */
setTabs: setTabs,
getTabsElement: getTabsElement,
selectedTabIndex: selectedTabIndex
};
});

132
src/components/mediaLibraryCreator/mediaLibraryCreator.js
View file

@ -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) { /* eslint-disable indent */
'use strict';
/**
* 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() { function onAddLibrary() {
if (isCreating) { if (isCreating) {
@ -7,7 +26,7 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
} }
if (pathInfos.length == 0) { if (pathInfos.length == 0) {
require(['alert'], function (alert) { import('alert').then(({default: alert}) => {
alert({ alert({
text: globalize.translate('PleaseAddAtLeastOneFolder'), text: globalize.translate('PleaseAddAtLeastOneFolder'),
type: 'error' type: 'error'
@ -19,23 +38,23 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
isCreating = true; isCreating = true;
loading.show(); loading.show();
var dlg = dom.parentWithClass(this, 'dlg-librarycreator'); const dlg = dom.parentWithClass(this, 'dlg-librarycreator');
var name = $('#txtValue', dlg).val(); const name = $('#txtValue', dlg).val();
var type = $('#selectCollectionType', dlg).val(); let type = $('#selectCollectionType', dlg).val();
if (type == 'mixed') { if (type == 'mixed') {
type = null; type = null;
} }
var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions')); const libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions'));
libraryOptions.PathInfos = pathInfos; libraryOptions.PathInfos = pathInfos;
ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function () { ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(() => {
hasChanges = true; hasChanges = true;
isCreating = false; isCreating = false;
loading.hide(); loading.hide();
dialogHelper.close(dlg); dialogHelper.close(dlg);
}, function () { }, () => {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder')); toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
}); });
@ -46,15 +65,15 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
} }
function getCollectionTypeOptionsHtml(collectionTypeOptions) { function getCollectionTypeOptionsHtml(collectionTypeOptions) {
return collectionTypeOptions.map(function (i) { return collectionTypeOptions.map(i => {
return '<option value="' + i.value + '">' + i.name + '</option>'; return `<option value="${i.value}">${i.name}</option>`;
}).join(''); }).join('');
} }
function initEditor(page, collectionTypeOptions) { function initEditor(page, collectionTypeOptions) {
$('#selectCollectionType', page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val('').on('change', function () { $('#selectCollectionType', page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val('').on('change', function () {
var value = this.value; const value = this.value;
var dlg = $(this).parents('.dialog')[0]; const dlg = $(this).parents('.dialog')[0];
libraryoptionseditor.setContentType(dlg.querySelector('.libraryOptions'), value == 'mixed' ? '' : value); libraryoptionseditor.setContentType(dlg.querySelector('.libraryOptions'), value == 'mixed' ? '' : value);
if (value) { if (value) {
@ -64,12 +83,12 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
} }
if (value != 'mixed') { if (value != 'mixed') {
var index = this.selectedIndex; const index = this.selectedIndex;
if (index != -1) { if (index != -1) {
var name = this.options[index].innerHTML.replace('*', '').replace('&amp;', '&'); const name = this.options[index].innerHTML.replace('*', '').replace('&amp;', '&');
$('#txtValue', dlg).val(name); $('#txtValue', dlg).val(name);
var folderOption = collectionTypeOptions.filter(function (i) { const folderOption = collectionTypeOptions.filter(i => {
return i.value == value; return i.value == value;
})[0]; })[0];
$('.collectionTypeFieldDescription', dlg).html(folderOption.message || ''); $('.collectionTypeFieldDescription', dlg).html(folderOption.message || '');
@ -83,15 +102,15 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
} }
function onToggleAdvancedChange() { function onToggleAdvancedChange() {
var dlg = dom.parentWithClass(this, 'dlg-librarycreator'); const dlg = dom.parentWithClass(this, 'dlg-librarycreator');
libraryoptionseditor.setAdvancedVisible(dlg.querySelector('.libraryOptions'), this.checked); libraryoptionseditor.setAdvancedVisible(dlg.querySelector('.libraryOptions'), this.checked);
} }
function onAddButtonClick() { function onAddButtonClick() {
var page = dom.parentWithClass(this, 'dlg-librarycreator'); const page = dom.parentWithClass(this, 'dlg-librarycreator');
require(['directorybrowser'], function (directoryBrowser) { import('directorybrowser').then(({default: directoryBrowser}) => {
var picker = new directoryBrowser(); const picker = new directoryBrowser();
picker.show({ picker.show({
enableNetworkSharePath: true, enableNetworkSharePath: true,
callback: function (path, networkSharePath) { callback: function (path, networkSharePath) {
@ -106,24 +125,24 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
} }
function getFolderHtml(pathInfo, index) { function getFolderHtml(pathInfo, index) {
var html = ''; let html = '';
html += '<div class="listItem listItem-border lnkPath" style="padding-left:.5em;">'; html += '<div class="listItem listItem-border lnkPath" style="padding-left:.5em;">';
html += '<div class="' + (pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody') + '">'; html += `<div class="${pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody'}">`;
html += '<div class="listItemBodyText">' + pathInfo.Path + '</div>'; html += `<div class="listItemBodyText">${pathInfo.Path}</div>`;
if (pathInfo.NetworkPath) { if (pathInfo.NetworkPath) {
html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + '</div>'; html += `<div class="listItemBodyText secondary">${pathInfo.NetworkPath}</div>`;
} }
html += '</div>'; html += '</div>';
html += '<button type="button" is="paper-icon-button-light"" class="listItemButton btnRemovePath" data-index="' + index + '"><span class="material-icons remove_circle"></span></button>'; html += `<button type="button" is="paper-icon-button-light"" class="listItemButton btnRemovePath" data-index="${index}"><span class="material-icons remove_circle"></span></button>`;
html += '</div>'; html += '</div>';
return html; return html;
} }
function renderPaths(page) { function renderPaths(page) {
var foldersHtml = pathInfos.map(getFolderHtml).join(''); const foldersHtml = pathInfos.map(getFolderHtml).join('');
var folderList = page.querySelector('.folderList'); const folderList = page.querySelector('.folderList');
folderList.innerHTML = foldersHtml; folderList.innerHTML = foldersHtml;
if (foldersHtml) { if (foldersHtml) {
@ -134,13 +153,13 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
} }
function addMediaLocation(page, path, networkSharePath) { function addMediaLocation(page, path, networkSharePath) {
var pathLower = path.toLowerCase(); const pathLower = path.toLowerCase();
var pathFilter = pathInfos.filter(function (p) { const pathFilter = pathInfos.filter(p => {
return p.Path.toLowerCase() == pathLower; return p.Path.toLowerCase() == pathLower;
}); });
if (!pathFilter.length) { if (!pathFilter.length) {
var pathInfo = { const pathInfo = {
Path: path Path: path
}; };
@ -154,11 +173,11 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
} }
function onRemoveClick(e) { function onRemoveClick(e) {
var button = dom.parentWithClass(e.target, 'btnRemovePath'); const button = dom.parentWithClass(e.target, 'btnRemovePath');
var index = parseInt(button.getAttribute('data-index')); const index = parseInt(button.getAttribute('data-index'));
var location = pathInfos[index].Path; const location = pathInfos[index].Path;
var locationLower = location.toLowerCase(); const locationLower = location.toLowerCase();
pathInfos = pathInfos.filter(function (p) { pathInfos = pathInfos.filter(p => {
return p.Path.toLowerCase() != locationLower; return p.Path.toLowerCase() != locationLower;
}); });
renderPaths(dom.parentWithClass(button, 'dlg-librarycreator')); renderPaths(dom.parentWithClass(button, 'dlg-librarycreator'));
@ -169,24 +188,20 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
} }
function initLibraryOptions(dlg) { function initLibraryOptions(dlg) {
libraryoptionseditor.embed(dlg.querySelector('.libraryOptions')).then(function () { libraryoptionseditor.embed(dlg.querySelector('.libraryOptions')).then(() => {
$('#selectCollectionType', dlg).trigger('change'); $('#selectCollectionType', dlg).trigger('change');
onToggleAdvancedChange.call(dlg.querySelector('.chkAdvanced')); onToggleAdvancedChange.call(dlg.querySelector('.chkAdvanced'));
}); });
} }
function editor() { export class showEditor {
this.show = function (options) { constructor(options) {
return new Promise(function (resolve, reject) { return new Promise((resolve) => {
currentOptions = options; currentOptions = options;
currentResolve = resolve; currentResolve = resolve;
hasChanges = false; hasChanges = false;
var xhr = new XMLHttpRequest(); import('text!./components/mediaLibraryCreator/mediaLibraryCreator.template.html').then(({default: template}) => {
xhr.open('GET', 'components/mediaLibraryCreator/mediaLibraryCreator.template.html', true); const dlg = dialogHelper.createDialog({
xhr.onload = function (e) {
var template = this.response;
var dlg = dialogHelper.createDialog({
size: 'small', size: 'small',
modal: false, modal: false,
removeOnClose: true, removeOnClose: true,
@ -196,27 +211,26 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
dlg.classList.add('background-theme-a'); dlg.classList.add('background-theme-a');
dlg.classList.add('dlg-librarycreator'); dlg.classList.add('dlg-librarycreator');
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.innerHTML = globalize.translateDocument(template); dlg.innerHTML = globalize.translateHtml(template);
initEditor(dlg, options.collectionTypeOptions); initEditor(dlg, options.collectionTypeOptions);
dlg.addEventListener('close', onDialogClosed); dlg.addEventListener('close', onDialogClosed);
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
pathInfos = []; pathInfos = [];
renderPaths(dlg); renderPaths(dlg);
initLibraryOptions(dlg); initLibraryOptions(dlg);
};
xhr.send();
}); });
}; });
} }
}
var pathInfos = []; let pathInfos = [];
var currentResolve; let currentResolve;
var currentOptions; let currentOptions;
var hasChanges = false; let hasChanges = false;
var isCreating = false; let isCreating = false;
return editor;
}); /* eslint-enable indent */
export default showEditor;

138
src/components/mediaLibraryEditor/mediaLibraryEditor.js
View file

@ -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) { /* eslint-disable indent */
'use strict';
/**
* 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() { function onEditLibrary() {
if (isCreating) { if (isCreating) {
@ -8,15 +25,15 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
isCreating = true; isCreating = true;
loading.show(); loading.show();
var dlg = dom.parentWithClass(this, 'dlg-libraryeditor'); const dlg = dom.parentWithClass(this, 'dlg-libraryeditor');
var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions')); let libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions'));
libraryOptions = Object.assign(currentOptions.library.LibraryOptions || {}, 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; hasChanges = true;
isCreating = false; isCreating = false;
loading.hide(); loading.hide();
dialogHelper.close(dlg); dialogHelper.close(dlg);
}, function () { }, () => {
isCreating = false; isCreating = false;
loading.hide(); loading.hide();
}); });
@ -24,50 +41,50 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
} }
function addMediaLocation(page, path, networkSharePath) { function addMediaLocation(page, path, networkSharePath) {
var virtualFolder = currentOptions.library; const virtualFolder = currentOptions.library;
var refreshAfterChange = currentOptions.refresh; const refreshAfterChange = currentOptions.refresh;
ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(function () { ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(() => {
hasChanges = true; hasChanges = true;
refreshLibraryFromServer(page); refreshLibraryFromServer(page);
}, function () { }, () => {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder')); toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
}); });
}); });
} }
function updateMediaLocation(page, path, networkSharePath) { function updateMediaLocation(page, path, networkSharePath) {
var virtualFolder = currentOptions.library; const virtualFolder = currentOptions.library;
ApiClient.updateMediaPath(virtualFolder.Name, { ApiClient.updateMediaPath(virtualFolder.Name, {
Path: path, Path: path,
NetworkPath: networkSharePath NetworkPath: networkSharePath
}).then(function () { }).then(() => {
hasChanges = true; hasChanges = true;
refreshLibraryFromServer(page); refreshLibraryFromServer(page);
}, function () { }, () => {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder')); toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
}); });
}); });
} }
function onRemoveClick(btnRemovePath, location) { function onRemoveClick(btnRemovePath, location) {
var button = btnRemovePath; const button = btnRemovePath;
var virtualFolder = currentOptions.library; const virtualFolder = currentOptions.library;
require(['confirm'], function (confirm) { import('confirm').then(({default: confirm}) => {
confirm({ confirm({
title: globalize.translate('HeaderRemoveMediaLocation'), title: globalize.translate('HeaderRemoveMediaLocation'),
text: globalize.translate('MessageConfirmRemoveMediaLocation'), text: globalize.translate('MessageConfirmRemoveMediaLocation'),
confirmText: globalize.translate('ButtonDelete'), confirmText: globalize.translate('ButtonDelete'),
primary: 'delete' primary: 'delete'
}).then(function () { }).then(() => {
var refreshAfterChange = currentOptions.refresh; const refreshAfterChange = currentOptions.refresh;
ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function () { ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(() => {
hasChanges = true; hasChanges = true;
refreshLibraryFromServer(dom.parentWithClass(button, 'dlg-libraryeditor')); refreshLibraryFromServer(dom.parentWithClass(button, 'dlg-libraryeditor'));
}, function () { }, () => {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('DefaultErrorMessage')); toast(globalize.translate('DefaultErrorMessage'));
}); });
}); });
@ -76,14 +93,14 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
} }
function onListItemClick(e) { function onListItemClick(e) {
var listItem = dom.parentWithClass(e.target, 'listItem'); const listItem = dom.parentWithClass(e.target, 'listItem');
if (listItem) { if (listItem) {
var index = parseInt(listItem.getAttribute('data-index')); const index = parseInt(listItem.getAttribute('data-index'));
var pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || []; const pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
var pathInfo = null == index ? {} : pathInfos[index] || {}; const pathInfo = null == index ? {} : pathInfos[index] || {};
var originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]); const originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]);
var btnRemovePath = dom.parentWithClass(e.target, 'btnRemovePath'); const btnRemovePath = dom.parentWithClass(e.target, 'btnRemovePath');
if (btnRemovePath) { if (btnRemovePath) {
onRemoveClick(btnRemovePath, originalPath); onRemoveClick(btnRemovePath, originalPath);
@ -95,26 +112,26 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
} }
function getFolderHtml(pathInfo, index) { function getFolderHtml(pathInfo, index) {
var html = ''; let html = '';
html += '<div class="listItem listItem-border lnkPath" data-index="' + index + '" style="padding-left:.5em;">'; html += `<div class="listItem listItem-border lnkPath" data-index="${index}" style="padding-left:.5em;">`;
html += '<div class="' + (pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody') + '">'; html += `<div class="${pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody'}">`;
html += '<h3 class="listItemBodyText">'; html += '<h3 class="listItemBodyText">';
html += pathInfo.Path; html += pathInfo.Path;
html += '</h3>'; html += '</h3>';
if (pathInfo.NetworkPath) { if (pathInfo.NetworkPath) {
html += '<div class="listItemBodyText secondary">' + pathInfo.NetworkPath + '</div>'; html += `<div class="listItemBodyText secondary">${pathInfo.NetworkPath}</div>`;
} }
html += '</div>'; html += '</div>';
html += '<button type="button" is="paper-icon-button-light" class="listItemButton btnRemovePath" data-index="' + index + '"><span class="material-icons remove_circle"></span></button>'; html += `<button type="button" is="paper-icon-button-light" class="listItemButton btnRemovePath" data-index="${index}"><span class="material-icons remove_circle"></span></button>`;
html += '</div>'; html += '</div>';
return html; return html;
} }
function refreshLibraryFromServer(page) { function refreshLibraryFromServer(page) {
ApiClient.getVirtualFolders().then(function (result) { ApiClient.getVirtualFolders().then(result => {
var library = result.filter(function (f) { const library = result.filter(f => {
return f.Name === currentOptions.library.Name; return f.Name === currentOptions.library.Name;
})[0]; })[0];
@ -126,10 +143,10 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
} }
function renderLibrary(page, options) { function renderLibrary(page, options) {
var pathInfos = (options.library.LibraryOptions || {}).PathInfos || []; let pathInfos = (options.library.LibraryOptions || {}).PathInfos || [];
if (!pathInfos.length) { if (!pathInfos.length) {
pathInfos = options.library.Locations.map(function (p) { pathInfos = options.library.Locations.map(p => {
return { return {
Path: p Path: p
}; };
@ -150,8 +167,8 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
} }
function showDirectoryBrowser(context, originalPath, networkPath) { function showDirectoryBrowser(context, originalPath, networkPath) {
require(['directorybrowser'], function (directoryBrowser) { import('directorybrowser').then(({default: directoryBrowser}) => {
var picker = new directoryBrowser(); const picker = new directoryBrowser();
picker.show({ picker.show({
enableNetworkSharePath: true, enableNetworkSharePath: true,
pathReadOnly: null != originalPath, pathReadOnly: null != originalPath,
@ -173,7 +190,7 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
} }
function onToggleAdvancedChange() { function onToggleAdvancedChange() {
var dlg = dom.parentWithClass(this, 'dlg-libraryeditor'); const dlg = dom.parentWithClass(this, 'dlg-libraryeditor');
libraryoptionseditor.setAdvancedVisible(dlg.querySelector('.libraryOptions'), this.checked); 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('.folderList').addEventListener('click', onListItemClick);
dlg.querySelector('.chkAdvanced').addEventListener('change', onToggleAdvancedChange); dlg.querySelector('.chkAdvanced').addEventListener('change', onToggleAdvancedChange);
dlg.querySelector('.btnSubmit').addEventListener('click', onEditLibrary); 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')); onToggleAdvancedChange.call(dlg.querySelector('.chkAdvanced'));
}); });
} }
@ -192,18 +209,14 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
currentDeferred.resolveWith(null, [hasChanges]); currentDeferred.resolveWith(null, [hasChanges]);
} }
function editor() { export class showEditor {
this.show = function (options) { constructor(options) {
var deferred = jQuery.Deferred(); const deferred = jQuery.Deferred();
currentOptions = options; currentOptions = options;
currentDeferred = deferred; currentDeferred = deferred;
hasChanges = false; hasChanges = false;
var xhr = new XMLHttpRequest(); import('text!./components/mediaLibraryEditor/mediaLibraryEditor.template.html').then(({default: template}) => {
xhr.open('GET', 'components/mediaLibraryEditor/mediaLibraryEditor.template.html', true); const dlg = dialogHelper.createDialog({
xhr.onload = function (e) {
var template = this.response;
var dlg = dialogHelper.createDialog({
size: 'small', size: 'small',
modal: false, modal: false,
removeOnClose: true, removeOnClose: true,
@ -213,25 +226,24 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
dlg.classList.add('ui-body-a'); dlg.classList.add('ui-body-a');
dlg.classList.add('background-theme-a'); dlg.classList.add('background-theme-a');
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.innerHTML = globalize.translateDocument(template); dlg.innerHTML = globalize.translateHtml(template);
dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.library.Name; dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.library.Name;
initEditor(dlg, options); initEditor(dlg, options);
dlg.addEventListener('close', onDialogClosed); dlg.addEventListener('close', onDialogClosed);
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
refreshLibraryFromServer(dlg); refreshLibraryFromServer(dlg);
}; });
xhr.send();
return deferred.promise(); return deferred.promise();
};
} }
}
var currentDeferred; let currentDeferred;
var currentOptions; let currentOptions;
var hasChanges = false; let hasChanges = false;
var isCreating = false; let isCreating = false;
return editor;
}); /* eslint-enable indent */
export default showEditor;

236
src/components/mediainfo/mediainfo.js
View file

@ -1,24 +1,29 @@
define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'material-icons', 'css!./mediainfo.css', 'programStyles', 'emby-button'], function (datetime, globalize, appRouter, itemHelper, indicators) { import datetime from 'datetime';
'use strict'; 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) { function getTimerIndicator(item) {
let status;
var status;
if (item.Type === 'SeriesTimer') { if (item.Type === 'SeriesTimer') {
return '<span class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></span>'; return '<span class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></span>';
} else if (item.TimerId || item.SeriesTimerId) { } else if (item.TimerId || item.SeriesTimerId) {
status = item.Status || 'Cancelled'; status = item.Status || 'Cancelled';
} else if (item.Type === 'Timer') { } else if (item.Type === 'Timer') {
status = item.Status; status = item.Status;
} else { } else {
return ''; return '';
} }
if (item.SeriesTimerId) { if (item.SeriesTimerId) {
if (status !== 'Cancelled') { if (status !== 'Cancelled') {
return '<span class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></span>'; return '<span class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></span>';
} }
@ -30,16 +35,14 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
function getProgramInfoHtml(item, options) { function getProgramInfoHtml(item, options) {
var html = ''; let html = '';
var miscInfo = []; const miscInfo = [];
var text; let text;
var date; let date;
if (item.StartDate && options.programTime !== false) { if (item.StartDate && options.programTime !== false) {
try { try {
text = ''; text = '';
date = datetime.parseISO8601Date(item.StartDate); date = datetime.parseISO8601Date(item.StartDate);
@ -48,35 +51,34 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
text += datetime.toLocaleDateString(date, { weekday: 'short', month: 'short', day: 'numeric' }); text += datetime.toLocaleDateString(date, { weekday: 'short', month: 'short', day: 'numeric' });
} }
text += ' ' + datetime.getDisplayTime(date); text += ` ${datetime.getDisplayTime(date)}`;
if (item.EndDate) { if (item.EndDate) {
date = datetime.parseISO8601Date(item.EndDate); date = datetime.parseISO8601Date(item.EndDate);
text += ' - ' + datetime.getDisplayTime(date); text += ` - ${datetime.getDisplayTime(date)}`;
} }
miscInfo.push(text); miscInfo.push(text);
} catch (e) { } catch (e) {
console.error('error parsing date: ' + item.StartDate); console.error('error parsing date:', item.StartDate);
} }
} }
if (item.ChannelNumber) { if (item.ChannelNumber) {
miscInfo.push('CH ' + item.ChannelNumber); miscInfo.push(`CH ${item.ChannelNumber}`);
} }
if (item.ChannelName) { if (item.ChannelName) {
if (options.interactive && item.ChannelId) { if (options.interactive && item.ChannelId) {
miscInfo.push({ miscInfo.push({
html: '<a is="emby-linkbutton" class="button-flat mediaInfoItem" href="' + appRouter.getRouteUrl({ html: `<a is="emby-linkbutton" class="button-flat mediaInfoItem" href="${appRouter.getRouteUrl({
ServerId: item.ServerId, ServerId: item.ServerId,
Type: 'TvChannel', Type: 'TvChannel',
Name: item.ChannelName, Name: item.ChannelName,
Id: item.ChannelId Id: item.ChannelId
}) + '">' + item.ChannelName + '</a>' })}">${item.ChannelName}</a>`
}); });
} else { } else {
miscInfo.push(item.ChannelName); miscInfo.push(item.ChannelName);
@ -84,7 +86,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
if (options.timerIndicator !== false) { if (options.timerIndicator !== false) {
var timerHtml = getTimerIndicator(item); const timerHtml = getTimerIndicator(item);
if (timerHtml) { if (timerHtml) {
miscInfo.push({ miscInfo.push({
html: timerHtml html: timerHtml
@ -92,31 +94,29 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
} }
html += miscInfo.map(function (m) { html += miscInfo.map(m => {
return getMediaInfoItem(m); return getMediaInfoItem(m);
}).join(''); }).join('');
return html; return html;
} }
function getMediaInfoHtml(item, options) { export function getMediaInfoHtml(item, options) {
var html = ''; let html = '';
var miscInfo = []; const miscInfo = [];
options = options || {}; options = options || {};
var text; let text;
var date; let date;
var minutes; let minutes;
var count; 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) { if (showFolderRuntime) {
count = item.SongCount || item.ChildCount; count = item.SongCount || item.ChildCount;
if (count) { if (count) {
miscInfo.push(globalize.translate('TrackCount', count)); miscInfo.push(globalize.translate('TrackCount', count));
} }
@ -124,33 +124,28 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
miscInfo.push(datetime.getDisplayRunningTime(item.RunTimeTicks)); miscInfo.push(datetime.getDisplayRunningTime(item.RunTimeTicks));
} }
} else if (item.Type === 'PhotoAlbum' || item.Type === 'BoxSet') { } else if (item.Type === 'PhotoAlbum' || item.Type === 'BoxSet') {
count = item.ChildCount; count = item.ChildCount;
if (count) { if (count) {
miscInfo.push(globalize.translate('ItemCount', count)); miscInfo.push(globalize.translate('ItemCount', count));
} }
} }
if ((item.Type === 'Episode' || item.MediaType === 'Photo') && options.originalAirDate !== false) { if ((item.Type === 'Episode' || item.MediaType === 'Photo') && options.originalAirDate !== false) {
if (item.PremiereDate) { if (item.PremiereDate) {
try { try {
date = datetime.parseISO8601Date(item.PremiereDate); date = datetime.parseISO8601Date(item.PremiereDate);
text = datetime.toLocaleDateString(date); text = datetime.toLocaleDateString(date);
miscInfo.push(text); miscInfo.push(text);
} catch (e) { } catch (e) {
console.error('error parsing date: ' + item.PremiereDate); console.error('error parsing date:', item.PremiereDate);
} }
} }
} }
if (item.Type === 'SeriesTimer') { if (item.Type === 'SeriesTimer') {
if (item.RecordAnyTime) { if (item.RecordAnyTime) {
miscInfo.push(globalize.translate('Anytime')); miscInfo.push(globalize.translate('Anytime'));
} else { } else {
miscInfo.push(datetime.getDisplayTime(item.StartDate)); miscInfo.push(datetime.getDisplayTime(item.StartDate));
@ -164,7 +159,6 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
if (item.StartDate && item.Type !== 'Program' && item.Type !== 'SeriesTimer') { if (item.StartDate && item.Type !== 'Program' && item.Type !== 'SeriesTimer') {
try { try {
date = datetime.parseISO8601Date(item.StartDate); date = datetime.parseISO8601Date(item.StartDate);
@ -176,31 +170,25 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
miscInfo.push(text); miscInfo.push(text);
} }
} catch (e) { } catch (e) {
console.error('error parsing date: ' + item.StartDate); console.error('error parsing date:', item.StartDate);
} }
} }
if (options.year !== false && item.ProductionYear && item.Type === 'Series') { if (options.year !== false && item.ProductionYear && item.Type === 'Series') {
if (item.Status === 'Continuing') { if (item.Status === 'Continuing') {
miscInfo.push(globalize.translate('SeriesYearToPresent', item.ProductionYear)); miscInfo.push(globalize.translate('SeriesYearToPresent', item.ProductionYear));
} else if (item.ProductionYear) { } else if (item.ProductionYear) {
text = item.ProductionYear; text = item.ProductionYear;
if (item.EndDate) { if (item.EndDate) {
try { try {
const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
var endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
if (endYear !== item.ProductionYear) { if (endYear !== item.ProductionYear) {
text += '-' + datetime.parseISO8601Date(item.EndDate).getFullYear(); text += `-${datetime.parseISO8601Date(item.EndDate).getFullYear()}`;
} }
} catch (e) { } catch (e) {
console.error('error parsing date: ' + item.EndDate); console.error('error parsing date:', item.EndDate);
} }
} }
@ -209,29 +197,27 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
if (item.Type === 'Program') { if (item.Type === 'Program') {
if (options.programIndicator !== false) { if (options.programIndicator !== false) {
if (item.IsLive) { if (item.IsLive) {
miscInfo.push({ miscInfo.push({
html: '<div class="mediaInfoProgramAttribute mediaInfoItem liveTvProgram">' + globalize.translate('Live') + '</div>' html: `<div class="mediaInfoProgramAttribute mediaInfoItem liveTvProgram">${globalize.translate('Live')}</div>`
}); });
} else if (item.IsPremiere) { } else if (item.IsPremiere) {
miscInfo.push({ miscInfo.push({
html: '<div class="mediaInfoProgramAttribute mediaInfoItem premiereTvProgram">' + globalize.translate('Premiere') + '</div>' html: `<div class="mediaInfoProgramAttribute mediaInfoItem premiereTvProgram">${globalize.translate('Premiere')}</div>`
}); });
} else if (item.IsSeries && !item.IsRepeat) { } else if (item.IsSeries && !item.IsRepeat) {
miscInfo.push({ miscInfo.push({
html: '<div class="mediaInfoProgramAttribute mediaInfoItem newTvProgram">' + globalize.translate('AttributeNew') + '</div>' html: `<div class="mediaInfoProgramAttribute mediaInfoItem newTvProgram">${globalize.translate('AttributeNew')}</div>`
}); });
} else if (item.IsSeries && item.IsRepeat) { } else if (item.IsSeries && item.IsRepeat) {
miscInfo.push({ miscInfo.push({
html: '<div class="mediaInfoProgramAttribute mediaInfoItem repeatTvProgram">' + globalize.translate('Repeat') + '</div>' html: `<div class="mediaInfoProgramAttribute mediaInfoItem repeatTvProgram">${globalize.translate('Repeat')}</div>`
}); });
} }
} }
if ((item.IsSeries || item.EpisodeTitle) && options.episodeTitle !== false) { if ((item.IsSeries || item.EpisodeTitle) && options.episodeTitle !== false) {
text = itemHelper.getDisplayName(item, { text = itemHelper.getDisplayName(item, {
includeIndexNumber: options.episodeTitleIndexNumber includeIndexNumber: options.episodeTitleIndexNumber
}); });
@ -242,13 +228,12 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} else if (item.IsMovie && item.ProductionYear && options.originalAirDate !== false) { } else if (item.IsMovie && item.ProductionYear && options.originalAirDate !== false) {
miscInfo.push(item.ProductionYear); miscInfo.push(item.ProductionYear);
} else if (item.PremiereDate && options.originalAirDate !== false) { } else if (item.PremiereDate && options.originalAirDate !== false) {
try { try {
date = datetime.parseISO8601Date(item.PremiereDate); date = datetime.parseISO8601Date(item.PremiereDate);
text = globalize.translate('OriginalAirDateValue', datetime.toLocaleDateString(date)); text = globalize.translate('OriginalAirDateValue', datetime.toLocaleDateString(date));
miscInfo.push(text); miscInfo.push(text);
} catch (e) { } catch (e) {
console.error('error parsing date: ' + item.PremiereDate); console.error('error parsing date:', item.PremiereDate);
} }
} else if (item.ProductionYear) { } else if (item.ProductionYear) {
miscInfo.push(item.ProductionYear); miscInfo.push(item.ProductionYear);
@ -257,34 +242,28 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
if (options.year !== false) { if (options.year !== false) {
if (item.Type !== 'Series' && item.Type !== 'Episode' && item.Type !== 'Person' && item.MediaType !== 'Photo' && item.Type !== 'Program' && item.Type !== 'Season') { if (item.Type !== 'Series' && item.Type !== 'Episode' && item.Type !== 'Person' && item.MediaType !== 'Photo' && item.Type !== 'Program' && item.Type !== 'Season') {
if (item.ProductionYear) { if (item.ProductionYear) {
miscInfo.push(item.ProductionYear); miscInfo.push(item.ProductionYear);
} else if (item.PremiereDate) { } else if (item.PremiereDate) {
try { try {
text = datetime.parseISO8601Date(item.PremiereDate).getFullYear(); text = datetime.parseISO8601Date(item.PremiereDate).getFullYear();
miscInfo.push(text); miscInfo.push(text);
} catch (e) { } 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' && item.Type !== 'Book' && !showFolderRuntime && options.runtime !== false) { if (item.RunTimeTicks && item.Type !== 'Series' && item.Type !== 'Program' && item.Type !== 'Book' && !showFolderRuntime && options.runtime !== false) {
if (item.Type === 'Audio') { if (item.Type === 'Audio') {
miscInfo.push(datetime.getDisplayRunningTime(item.RunTimeTicks)); miscInfo.push(datetime.getDisplayRunningTime(item.RunTimeTicks));
} else { } else {
minutes = item.RunTimeTicks / 600000000; minutes = item.RunTimeTicks / 600000000;
minutes = minutes || 1; minutes = minutes || 1;
miscInfo.push(Math.round(minutes) + ' mins'); miscInfo.push(`${Math.round(minutes)} mins`);
} }
} }
@ -300,14 +279,14 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
if (item.MediaType === 'Photo' && item.Width && item.Height) { 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) { if (options.container !== false && item.Type === 'Audio' && item.Container) {
miscInfo.push(item.Container); miscInfo.push(item.Container);
} }
html += miscInfo.map(function (m) { html += miscInfo.map(m => {
return getMediaInfoItem(m); return getMediaInfoItem(m);
}).join(''); }).join('');
@ -318,17 +297,15 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
if (item.CriticRating && options.criticRating !== false) { if (item.CriticRating && options.criticRating !== false) {
if (item.CriticRating >= 60) { if (item.CriticRating >= 60) {
html += '<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingFresh">' + item.CriticRating + '</div>'; html += `<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingFresh">${item.CriticRating}</div>`;
} else { } else {
html += '<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingRotten">' + item.CriticRating + '</div>'; html += `<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingRotten">${item.CriticRating}</div>`;
} }
} }
if (options.endsAt !== false) { if (options.endsAt !== false) {
const endsAt = getEndsAt(item);
var endsAt = getEndsAt(item);
if (endsAt) { if (endsAt) {
html += getMediaInfoItem(endsAt, 'endsAt'); html += getMediaInfoItem(endsAt, 'endsAt');
} }
@ -339,15 +316,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
return html; return html;
} }
function getEndsAt(item) { export function getEndsAt(item) {
if (item.MediaType === 'Video' && item.RunTimeTicks) { if (item.MediaType === 'Video' && item.RunTimeTicks) {
if (!item.StartDate) { if (!item.StartDate) {
var endDate = new Date().getTime() + (item.RunTimeTicks / 10000); let endDate = new Date().getTime() + (item.RunTimeTicks / 10000);
endDate = new Date(endDate); endDate = new Date(endDate);
var displayTime = datetime.getDisplayTime(endDate); const displayTime = datetime.getDisplayTime(endDate);
return globalize.translate('EndsAtValue', displayTime); return globalize.translate('EndsAtValue', displayTime);
} }
} }
@ -355,12 +330,11 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
return null; return null;
} }
function getEndsAtFromPosition(runtimeTicks, positionTicks, includeText) { export function getEndsAtFromPosition(runtimeTicks, positionTicks, includeText) {
let endDate = new Date().getTime() + ((runtimeTicks - (positionTicks || 0)) / 10000);
var endDate = new Date().getTime() + ((runtimeTicks - (positionTicks || 0)) / 10000);
endDate = new Date(endDate); endDate = new Date(endDate);
var displayTime = datetime.getDisplayTime(endDate); const displayTime = datetime.getDisplayTime(endDate);
if (includeText === false) { if (includeText === false) {
return displayTime; return displayTime;
@ -369,23 +343,21 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
function getMediaInfoItem(m, cssClass) { function getMediaInfoItem(m, cssClass) {
cssClass = cssClass ? (`${cssClass} mediaInfoItem`) : 'mediaInfoItem';
cssClass = cssClass ? (cssClass + ' mediaInfoItem') : 'mediaInfoItem'; let mediaInfoText = m;
var mediaInfoText = m;
if (typeof (m) !== 'string' && typeof (m) !== 'number') { if (typeof (m) !== 'string' && typeof (m) !== 'number') {
if (m.html) { if (m.html) {
return m.html; return m.html;
} }
mediaInfoText = m.text; mediaInfoText = m.text;
cssClass += ' ' + m.cssClass; cssClass += ` ${m.cssClass}`;
} }
return '<div class="' + cssClass + '">' + mediaInfoText + '</div>'; return `<div class="${cssClass}">${mediaInfoText}</div>`;
} }
function getStarIconsHtml(item) { function getStarIconsHtml(item) {
var html = ''; let html = '';
if (item.CommunityRating) { if (item.CommunityRating) {
html += '<div class="starRatingContainer mediaInfoItem">'; html += '<div class="starRatingContainer mediaInfoItem">';
@ -399,53 +371,47 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
function dynamicEndTime(elem, item) { function dynamicEndTime(elem, item) {
const interval = setInterval(() => {
var interval = setInterval(function () {
if (!document.body.contains(elem)) { if (!document.body.contains(elem)) {
clearInterval(interval); clearInterval(interval);
return; return;
} }
elem.innerHTML = getEndsAt(item); elem.innerHTML = getEndsAt(item);
}, 60000); }, 60000);
} }
function fillPrimaryMediaInfo(elem, item, options) { export function fillPrimaryMediaInfo(elem, item, options) {
var html = getPrimaryMediaInfoHtml(item, options); const html = getPrimaryMediaInfoHtml(item, options);
elem.innerHTML = html; elem.innerHTML = html;
afterFill(elem, item, options); afterFill(elem, item, options);
} }
function fillSecondaryMediaInfo(elem, item, options) { export function fillSecondaryMediaInfo(elem, item, options) {
var html = getSecondaryMediaInfoHtml(item, options); const html = getSecondaryMediaInfoHtml(item, options);
elem.innerHTML = html; elem.innerHTML = html;
afterFill(elem, item, options); afterFill(elem, item, options);
} }
function afterFill(elem, item, options) { function afterFill(elem, item, options) {
if (options.endsAt !== false) { if (options.endsAt !== false) {
var endsAtElem = elem.querySelector('.endsAt'); const endsAtElem = elem.querySelector('.endsAt');
if (endsAtElem) { if (endsAtElem) {
dynamicEndTime(endsAtElem, item); dynamicEndTime(endsAtElem, item);
} }
} }
var lnkChannel = elem.querySelector('.lnkChannel'); const lnkChannel = elem.querySelector('.lnkChannel');
if (lnkChannel) { if (lnkChannel) {
lnkChannel.addEventListener('click', onChannelLinkClick); lnkChannel.addEventListener('click', onChannelLinkClick);
} }
} }
function onChannelLinkClick(e) { function onChannelLinkClick(e) {
const channelId = this.getAttribute('data-id');
var channelId = this.getAttribute('data-id'); const serverId = this.getAttribute('data-serverid');
var serverId = this.getAttribute('data-serverid');
appRouter.showItem(channelId, serverId); appRouter.showItem(channelId, serverId);
@ -453,8 +419,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
return false; return false;
} }
function getPrimaryMediaInfoHtml(item, options) { export function getPrimaryMediaInfoHtml(item, options) {
options = options || {}; options = options || {};
if (options.interactive == null) { if (options.interactive == null) {
options.interactive = false; options.interactive = false;
@ -463,8 +428,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
return getMediaInfoHtml(item, options); return getMediaInfoHtml(item, options);
} }
function getSecondaryMediaInfoHtml(item, options) { export function getSecondaryMediaInfoHtml(item, options) {
options = options || {}; options = options || {};
if (options.interactive == null) { if (options.interactive == null) {
options.interactive = false; options.interactive = false;
@ -476,13 +440,11 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
return ''; return '';
} }
function getResolutionText(i) { export function getResolutionText(i) {
const width = i.Width;
var width = i.Width; const height = i.Height;
var height = i.Height;
if (width && height) { if (width && height) {
if (width >= 3800 || height >= 2000) { if (width >= 3800 || height >= 2000) {
return '4K'; return '4K';
} }
@ -505,45 +467,41 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
return '720p'; return '720p';
} }
if (width >= 700 || height >= 400) { if (width >= 700 || height >= 400) {
if (i.IsInterlaced) { if (i.IsInterlaced) {
return '480i'; return '480i';
} }
return '480p'; return '480p';
} }
} }
return null; return null;
} }
function getAudioStreamForDisplay(item) { function getAudioStreamForDisplay(item) {
if (!item.MediaSources) { if (!item.MediaSources) {
return null; return null;
} }
var mediaSource = item.MediaSources[0]; const mediaSource = item.MediaSources[0];
if (!mediaSource) { if (!mediaSource) {
return null; return null;
} }
return (mediaSource.MediaStreams || []).filter(function (i) { return (mediaSource.MediaStreams || []).filter(i => {
return i.Type === 'Audio' && (i.Index === mediaSource.DefaultAudioStreamIndex || mediaSource.DefaultAudioStreamIndex == null); return i.Type === 'Audio' && (i.Index === mediaSource.DefaultAudioStreamIndex || mediaSource.DefaultAudioStreamIndex == null);
})[0]; })[0];
} }
function getMediaInfoStats(item, options) { export function getMediaInfoStats(item, options) {
options = 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'; return i.Type === 'Video';
})[0] || {}; })[0] || {};
var audioStream = getAudioStreamForDisplay(item) || {}; const audioStream = getAudioStreamForDisplay(item) || {};
if (item.VideoType === 'Dvd') { if (item.VideoType === 'Dvd') {
list.push({ list.push({
@ -559,11 +517,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
}); });
} }
//if (mediaSource.Container) { const resolutionText = getResolutionText(videoStream);
// html += '<div class="mediaInfoIcon mediaInfoText">' + mediaSource.Container + '</div>';
//}
var resolutionText = getResolutionText(videoStream);
if (resolutionText) { if (resolutionText) {
list.push({ list.push({
type: 'mediainfo', type: 'mediainfo',
@ -578,23 +532,16 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
}); });
} }
var channels = audioStream.Channels; const channels = audioStream.Channels;
var channelText; let channelText;
if (channels === 8) { if (channels === 8) {
channelText = '7.1'; channelText = '7.1';
} else if (channels === 7) { } else if (channels === 7) {
channelText = '6.1'; channelText = '6.1';
} else if (channels === 6) { } else if (channels === 6) {
channelText = '5.1'; channelText = '5.1';
} else if (channels === 2) { } else if (channels === 2) {
channelText = '2.0'; channelText = '2.0';
} }
@ -605,7 +552,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) { if ((audioCodec === 'dca' || audioCodec === 'dts') && audioStream.Profile) {
list.push({ list.push({
@ -620,21 +567,21 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
if (item.DateCreated && itemHelper.enableDateAddedDisplay(item)) { if (item.DateCreated && itemHelper.enableDateAddedDisplay(item)) {
const dateCreated = datetime.parseISO8601Date(item.DateCreated);
var dateCreated = datetime.parseISO8601Date(item.DateCreated);
list.push({ list.push({
type: 'added', 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 list;
} }
return { /* eslint-enable indent */
export default {
getMediaInfoHtml: getPrimaryMediaInfoHtml, getMediaInfoHtml: getPrimaryMediaInfoHtml,
fill: fillPrimaryMediaInfo,
getEndsAt: getEndsAt, getEndsAt: getEndsAt,
getEndsAtFromPosition: getEndsAtFromPosition, getEndsAtFromPosition: getEndsAtFromPosition,
getPrimaryMediaInfoHtml: getPrimaryMediaInfoHtml, getPrimaryMediaInfoHtml: getPrimaryMediaInfoHtml,
@ -643,5 +590,4 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
fillSecondaryMediaInfo: fillSecondaryMediaInfo, fillSecondaryMediaInfo: fillSecondaryMediaInfo,
getMediaInfoStats: getMediaInfoStats, getMediaInfoStats: getMediaInfoStats,
getResolutionText: getResolutionText getResolutionText: getResolutionText
}; };
});

326
src/components/metadataEditor/metadataEditor.js
View file

@ -1,25 +1,42 @@
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) { import dom from 'dom';
'use strict'; 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; /* eslint-disable indent */
var metadataEditorInfo;
var currentItem; let currentContext;
let metadataEditorInfo;
let currentItem;
function isDialog() { function isDialog() {
return currentContext.classList.contains('dialog'); return currentContext.classList.contains('dialog');
} }
function closeDialog(isSubmitted) { function closeDialog(isSubmitted) {
if (isDialog()) { if (isDialog()) {
dialogHelper.close(currentContext); dialogHelper.close(currentContext);
} }
} }
function submitUpdatedItem(form, item) { function submitUpdatedItem(form, item) {
function afterContentTypeUpdated() { function afterContentTypeUpdated() {
require(['toast'], function (toast) { require(['toast'], function (toast) {
toast(globalize.translate('MessageItemSaved')); toast(globalize.translate('MessageItemSaved'));
}); });
@ -28,14 +45,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
closeDialog(true); closeDialog(true);
} }
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.updateItem(item).then(function () { apiClient.updateItem(item).then(function () {
const newContentType = form.querySelector('#selectContentType').value || '';
var newContentType = form.querySelector('#selectContentType').value || '';
if ((metadataEditorInfo.ContentType || '') !== newContentType) { if ((metadataEditorInfo.ContentType || '') !== newContentType) {
apiClient.ajax({ apiClient.ajax({
url: apiClient.getUrl('Items/' + item.Id + '/ContentType', { url: apiClient.getUrl('Items/' + item.Id + '/ContentType', {
@ -47,29 +62,23 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
}).then(function () { }).then(function () {
afterContentTypeUpdated(); afterContentTypeUpdated();
}); });
} else { } else {
afterContentTypeUpdated(); afterContentTypeUpdated();
} }
}); });
} }
function getSelectedAirDays(form) { function getSelectedAirDays(form) {
var checkedItems = form.querySelectorAll('.chkAirDay:checked') || []; const checkedItems = form.querySelectorAll('.chkAirDay:checked') || [];
return Array.prototype.map.call(checkedItems, function (c) { return Array.prototype.map.call(checkedItems, function (c) {
return c.getAttribute('data-day'); return c.getAttribute('data-day');
}); });
} }
function getAlbumArtists(form) { function getAlbumArtists(form) {
return form.querySelector('#txtAlbumArtist').value.trim().split(';').filter(function (s) { return form.querySelector('#txtAlbumArtist').value.trim().split(';').filter(function (s) {
return s.length > 0; return s.length > 0;
}).map(function (a) { }).map(function (a) {
return { return {
Name: a Name: a
}; };
@ -77,13 +86,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function getArtists(form) { function getArtists(form) {
return form.querySelector('#txtArtist').value.trim().split(';').filter(function (s) { return form.querySelector('#txtArtist').value.trim().split(';').filter(function (s) {
return s.length > 0; return s.length > 0;
}).map(function (a) { }).map(function (a) {
return { return {
Name: a Name: a
}; };
@ -91,23 +96,20 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function getDateValue(form, element, property) { function getDateValue(form, element, property) {
let val = form.querySelector(element).value;
var val = form.querySelector(element).value;
if (!val) { if (!val) {
return null; return null;
} }
if (currentItem[property]) { if (currentItem[property]) {
const date = datetime.parseISO8601Date(currentItem[property], true);
var date = datetime.parseISO8601Date(currentItem[property], true); const parts = date.toISOString().split('T');
var parts = date.toISOString().split('T');
// If the date is the same, preserve the time // If the date is the same, preserve the time
if (parts[0].indexOf(val) === 0) { if (parts[0].indexOf(val) === 0) {
const iso = parts[1];
var iso = parts[1];
val += 'T' + iso; val += 'T' + iso;
} }
@ -117,12 +119,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function onSubmit(e) { function onSubmit(e) {
loading.show(); loading.show();
var form = this; const form = this;
var item = { const item = {
Id: currentItem.Id, Id: currentItem.Id,
Name: form.querySelector('#txtName').value, Name: form.querySelector('#txtName').value,
OriginalTitle: form.querySelector('#txtOriginalName').value, OriginalTitle: form.querySelector('#txtOriginalName').value,
@ -168,9 +169,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
item.ProviderIds = Object.assign({}, currentItem.ProviderIds); item.ProviderIds = Object.assign({}, currentItem.ProviderIds);
var idElements = form.querySelectorAll('.txtExternalId'); const idElements = form.querySelectorAll('.txtExternalId');
Array.prototype.map.call(idElements, function (idElem) { Array.prototype.map.call(idElements, function (idElem) {
var providerKey = idElem.getAttribute('data-providerkey'); const providerKey = idElem.getAttribute('data-providerkey');
item.ProviderIds[providerKey] = idElem.value; item.ProviderIds[providerKey] = idElem.value;
}); });
@ -178,20 +179,18 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
item.PreferredMetadataCountryCode = form.querySelector('#selectCountry').value; item.PreferredMetadataCountryCode = form.querySelector('#selectCountry').value;
if (currentItem.Type === 'Person') { if (currentItem.Type === 'Person') {
const placeOfBirth = form.querySelector('#txtPlaceOfBirth').value;
var placeOfBirth = form.querySelector('#txtPlaceOfBirth').value;
item.ProductionLocations = placeOfBirth ? [placeOfBirth] : []; item.ProductionLocations = placeOfBirth ? [placeOfBirth] : [];
} }
if (currentItem.Type === 'Series') { if (currentItem.Type === 'Series') {
// 600000000 // 600000000
var seriesRuntime = form.querySelector('#txtSeriesRuntime').value; const seriesRuntime = form.querySelector('#txtSeriesRuntime').value;
item.RunTimeTicks = seriesRuntime ? (seriesRuntime * 600000000) : null; item.RunTimeTicks = seriesRuntime ? (seriesRuntime * 600000000) : null;
} }
var tagline = form.querySelector('#txtTagline').value; const tagline = form.querySelector('#txtTagline').value;
item.Taglines = tagline ? [tagline] : []; item.Taglines = tagline ? [tagline] : [];
submitUpdatedItem(form, item); submitUpdatedItem(form, item);
@ -210,13 +209,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function addElementToList(source, sortCallback) { function addElementToList(source, sortCallback) {
require(['prompt'], function (prompt) { import('prompt').then(({default: prompt}) => {
prompt({ prompt({
label: 'Value:' label: 'Value:'
}).then(function (text) { }).then(function (text) {
var list = dom.parentWithClass(source, 'editableListviewContainer').querySelector('.paperList'); const list = dom.parentWithClass(source, 'editableListviewContainer').querySelector('.paperList');
var items = getListValues(list); const items = getListValues(list);
items.push(text); items.push(text);
populateListView(list, items, sortCallback); populateListView(list, items, sortCallback);
}); });
@ -224,17 +222,14 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function removeElementFromList(source) { function removeElementFromList(source) {
var el = dom.parentWithClass(source, 'listItem'); const el = dom.parentWithClass(source, 'listItem');
el.parentNode.removeChild(el); el.parentNode.removeChild(el);
} }
function editPerson(context, person, index) { function editPerson(context, person, index) {
require(['personEditor'], function (personEditor) { require(['personEditor'], function (personEditor) {
personEditor.show(person).then(function (updatedPerson) { personEditor.show(person).then(function (updatedPerson) {
const isNew = index === -1;
var isNew = index === -1;
if (isNew) { if (isNew) {
currentItem.People.push(updatedPerson); currentItem.People.push(updatedPerson);
@ -245,15 +240,51 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
}); });
} }
function onEditorClick(e) { function afterDeleted(context, item) {
var parentId = item.ParentId || item.SeasonId || item.SeriesId;
var btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList'); if (parentId) {
reload(context, parentId, item.ServerId);
} else {
require(['appRouter'], function (appRouter) {
appRouter.goHome();
});
}
}
function showMoreMenu(context, button, user) {
require(['itemContextMenu'], function (itemContextMenu) {
var item = currentItem;
itemContextMenu.show({
item: item,
positionTo: button,
edit: false,
editImages: true,
editSubtitles: true,
sync: false,
share: false,
play: false,
queue: false,
user: user
}).then(function (result) {
if (result.deleted) {
afterDeleted(context, item);
} else if (result.updated) {
reload(context, item.Id, item.ServerId);
}
});
});
}
function onEditorClick(e) {
const btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList');
if (btnRemoveFromEditorList) { if (btnRemoveFromEditorList) {
removeElementFromList(btnRemoveFromEditorList); removeElementFromList(btnRemoveFromEditorList);
return; return;
} }
var btnAddTextItem = dom.parentWithClass(e.target, 'btnAddTextItem'); const btnAddTextItem = dom.parentWithClass(e.target, 'btnAddTextItem');
if (btnAddTextItem) { if (btnAddTextItem) {
addElementToList(btnAddTextItem); addElementToList(btnAddTextItem);
} }
@ -264,19 +295,18 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function bindAll(elems, eventName, fn) { 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); elems[i].addEventListener(eventName, fn);
} }
} }
function init(context, apiClient) { function init(context, apiClient) {
context.querySelector('.externalIds').addEventListener('click', function (e) { context.querySelector('.externalIds').addEventListener('click', function (e) {
var btnOpenExternalId = dom.parentWithClass(e.target, 'btnOpenExternalId'); const btnOpenExternalId = dom.parentWithClass(e.target, 'btnOpenExternalId');
if (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) { if (field.value) {
shell.openUrl(formatString.replace('{0}', field.value)); shell.openUrl(formatString.replace('{0}', field.value));
@ -294,13 +324,17 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
closeDialog(false); closeDialog(false);
}); });
context.querySelector('.btnHeaderSave').addEventListener('click', function (e) { context.querySelector('.btnMore').addEventListener('click', function (e) {
getApiClient().getCurrentUser().then(function (user) {
showMoreMenu(context, e.target, user);
});
});
context.querySelector('.btnHeaderSave').addEventListener('click', function (e) {
context.querySelector('.btnSave').click(); context.querySelector('.btnSave').click();
}); });
context.querySelector('#chkLockData').addEventListener('click', function (e) { context.querySelector('#chkLockData').addEventListener('click', function (e) {
if (!e.target.checked) { if (!e.target.checked) {
showElement('.providerSettingsContainer'); showElement('.providerSettingsContainer');
} else { } else {
@ -311,26 +345,24 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
context.removeEventListener('click', onEditorClick); context.removeEventListener('click', onEditorClick);
context.addEventListener('click', onEditorClick); context.addEventListener('click', onEditorClick);
var form = context.querySelector('form'); const form = context.querySelector('form');
form.removeEventListener('submit', onSubmit); form.removeEventListener('submit', onSubmit);
form.addEventListener('submit', onSubmit); form.addEventListener('submit', onSubmit);
context.querySelector('#btnAddPerson').addEventListener('click', function (event, data) { context.querySelector('#btnAddPerson').addEventListener('click', function (event, data) {
editPerson(context, {}, -1); editPerson(context, {}, -1);
}); });
context.querySelector('#peopleList').addEventListener('click', function (e) { context.querySelector('#peopleList').addEventListener('click', function (e) {
let index;
var index; const btnDeletePerson = dom.parentWithClass(e.target, 'btnDeletePerson');
var btnDeletePerson = dom.parentWithClass(e.target, 'btnDeletePerson');
if (btnDeletePerson) { if (btnDeletePerson) {
index = parseInt(btnDeletePerson.getAttribute('data-index')); index = parseInt(btnDeletePerson.getAttribute('data-index'));
currentItem.People.splice(index, 1); currentItem.People.splice(index, 1);
populatePeople(context, currentItem.People); populatePeople(context, currentItem.People);
} }
var btnEditPerson = dom.parentWithClass(e.target, 'btnEditPerson'); const btnEditPerson = dom.parentWithClass(e.target, 'btnEditPerson');
if (btnEditPerson) { if (btnEditPerson) {
index = parseInt(btnEditPerson.getAttribute('data-index')); index = parseInt(btnEditPerson.getAttribute('data-index'));
editPerson(context, currentItem.People[index], index); editPerson(context, currentItem.People[index], index);
@ -339,8 +371,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function getItem(itemId, serverId) { function getItem(itemId, serverId) {
const apiClient = connectionManager.getApiClient(serverId);
var apiClient = connectionManager.getApiClient(serverId);
if (itemId) { if (itemId) {
return apiClient.getItem(apiClient.getCurrentUserId(), itemId); return apiClient.getItem(apiClient.getCurrentUserId(), itemId);
@ -350,8 +381,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function getEditorConfig(itemId, serverId) { function getEditorConfig(itemId, serverId) {
const apiClient = connectionManager.getApiClient(serverId);
var apiClient = connectionManager.getApiClient(serverId);
if (itemId) { if (itemId) {
return apiClient.getJSON(apiClient.getUrl('Items/' + itemId + '/MetadataEditor')); return apiClient.getJSON(apiClient.getUrl('Items/' + itemId + '/MetadataEditor'));
@ -361,14 +391,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function populateCountries(select, allCountries) { function populateCountries(select, allCountries) {
let html = '';
var html = '';
html += "<option value=''></option>"; html += "<option value=''></option>";
for (var i = 0, length = allCountries.length; i < length; i++) { for (let i = 0, length = allCountries.length; i < length; i++) {
const culture = allCountries[i];
var culture = allCountries[i];
html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + '</option>'; html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + '</option>';
} }
@ -377,14 +405,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function populateLanguages(select, languages) { function populateLanguages(select, languages) {
let html = '';
var html = '';
html += "<option value=''></option>"; html += "<option value=''></option>";
for (var i = 0, length = languages.length; i < length; i++) { for (let i = 0, length = languages.length; i < length; i++) {
const culture = languages[i];
var culture = languages[i];
html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + '</option>'; html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
} }
@ -393,48 +419,43 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function renderContentTypeOptions(context, metadataInfo) { function renderContentTypeOptions(context, metadataInfo) {
if (!metadataInfo.ContentTypeOptions.length) { if (!metadataInfo.ContentTypeOptions.length) {
hideElement('#fldContentType', context); hideElement('#fldContentType', context);
} else { } else {
showElement('#fldContentType', context); showElement('#fldContentType', context);
} }
var html = metadataInfo.ContentTypeOptions.map(function (i) { const html = metadataInfo.ContentTypeOptions.map(function (i) {
return '<option value="' + i.Value + '">' + i.Name + '</option>'; return '<option value="' + i.Value + '">' + i.Name + '</option>';
}).join(''); }).join('');
var selectEl = context.querySelector('#selectContentType'); const selectEl = context.querySelector('#selectContentType');
selectEl.innerHTML = html; selectEl.innerHTML = html;
selectEl.value = metadataInfo.ContentType || ''; selectEl.value = metadataInfo.ContentType || '';
} }
function loadExternalIds(context, item, externalIds) { function loadExternalIds(context, item, externalIds) {
let html = '';
var html = ''; const providerIds = item.ProviderIds || {};
var providerIds = item.ProviderIds || {}; for (let i = 0, length = externalIds.length; i < length; i++) {
const idInfo = externalIds[i];
for (var i = 0, length = externalIds.length; i < length; i++) { const id = 'txt1' + idInfo.Key;
const formatString = idInfo.UrlFormatString || '';
var idInfo = externalIds[i]; let fullName = idInfo.Name;
var id = 'txt1' + idInfo.Key;
var formatString = idInfo.UrlFormatString || '';
var fullName = idInfo.Name;
if (idInfo.Type) { if (idInfo.Type) {
fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type); fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type);
} }
var labelText = globalize.translate('LabelDynamicExternalId', fullName); const labelText = globalize.translate('LabelDynamicExternalId', fullName);
html += '<div class="inputContainer">'; html += '<div class="inputContainer">';
html += '<div class="flex align-items-center">'; html += '<div class="flex align-items-center">';
var value = providerIds[idInfo.Key] || ''; const value = providerIds[idInfo.Key] || '';
html += '<div class="flex-grow">'; html += '<div class="flex-grow">';
html += '<input is="emby-input" class="txtExternalId" value="' + value + '" data-providerkey="' + idInfo.Key + '" data-formatstring="' + formatString + '" id="' + id + '" label="' + labelText + '"/>'; html += '<input is="emby-input" class="txtExternalId" value="' + value + '" data-providerkey="' + idInfo.Key + '" data-formatstring="' + formatString + '" id="' + id + '" label="' + labelText + '"/>';
@ -448,7 +469,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
html += '</div>'; html += '</div>';
} }
var elem = context.querySelector('.externalIds', context); const elem = context.querySelector('.externalIds', context);
elem.innerHTML = html; elem.innerHTML = html;
if (externalIds.length) { if (externalIds.length) {
@ -464,8 +485,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
function hideElement(selector, context, multiple) { function hideElement(selector, context, multiple) {
context = context || document; context = context || document;
if (typeof selector === 'string') { if (typeof selector === 'string') {
const elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
var elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
Array.prototype.forEach.call(elements, function (el) { Array.prototype.forEach.call(elements, function (el) {
if (el) { if (el) {
@ -483,8 +503,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
function showElement(selector, context, multiple) { function showElement(selector, context, multiple) {
context = context || document; context = context || document;
if (typeof selector === 'string') { if (typeof selector === 'string') {
const elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
var elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
Array.prototype.forEach.call(elements, function (el) { Array.prototype.forEach.call(elements, function (el) {
if (el) { if (el) {
@ -685,8 +704,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function fillItemInfo(context, item, parentalRatingOptions) { function fillItemInfo(context, item, parentalRatingOptions) {
let select = context.querySelector('#selectOfficialRating');
var select = context.querySelector('#selectOfficialRating');
populateRatings(parentalRatingOptions, select, item.OfficialRating); populateRatings(parentalRatingOptions, select, item.OfficialRating);
@ -698,7 +716,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
select.value = item.CustomRating || ''; select.value = item.CustomRating || '';
var selectStatus = context.querySelector('#selectStatus'); const selectStatus = context.querySelector('#selectStatus');
populateStatus(selectStatus); populateStatus(selectStatus);
selectStatus.value = item.Status || ''; selectStatus.value = item.Status || '';
@ -717,8 +735,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
populateListView(context.querySelector('#listTags'), item.Tags); populateListView(context.querySelector('#listTags'), item.Tags);
var lockData = (item.LockData || false); const lockData = (item.LockData || false);
var chkLockData = context.querySelector('#chkLockData'); const chkLockData = context.querySelector('#chkLockData');
chkLockData.checked = lockData; chkLockData.checked = lockData;
if (chkLockData.checked) { if (chkLockData.checked) {
hideElement('.providerSettingsContainer', context); hideElement('.providerSettingsContainer', context);
@ -756,7 +774,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
return a.Name; return a.Name;
}).join(';'); }).join(';');
var date; let date;
if (item.DateCreated) { if (item.DateCreated) {
try { try {
@ -798,7 +816,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
context.querySelector('#txtAirTime').value = item.AirTime || ''; 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('#txtPlaceOfBirth').value = placeofBirth;
context.querySelector('#txtOriginalAspectRatio').value = item.AspectRatio || ''; context.querySelector('#txtOriginalAspectRatio').value = item.AspectRatio || '';
@ -807,8 +825,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
context.querySelector('#selectCountry').value = item.PreferredMetadataCountryCode || ''; context.querySelector('#selectCountry').value = item.PreferredMetadataCountryCode || '';
if (item.RunTimeTicks) { if (item.RunTimeTicks) {
const minutes = item.RunTimeTicks / 600000000;
var minutes = item.RunTimeTicks / 600000000;
context.querySelector('#txtSeriesRuntime').value = Math.round(minutes); context.querySelector('#txtSeriesRuntime').value = Math.round(minutes);
} else { } else {
@ -817,20 +834,16 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function populateRatings(allParentalRatings, select, currentValue) { function populateRatings(allParentalRatings, select, currentValue) {
let html = '';
var html = '';
html += "<option value=''></option>"; html += "<option value=''></option>";
var ratings = []; const ratings = [];
var i; let rating;
var length;
var 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]; rating = allParentalRatings[i];
ratings.push({ Name: rating.Name, Value: rating.Name }); ratings.push({ Name: rating.Name, Value: rating.Name });
@ -844,8 +857,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
ratings.push({ Name: currentValue, Value: currentValue }); 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]; rating = ratings[i];
html += "<option value='" + rating.Value + "'>" + rating.Name + '</option>'; html += "<option value='" + rating.Value + "'>" + rating.Name + '</option>';
@ -855,7 +867,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function populateStatus(select) { function populateStatus(select) {
var html = ''; let html = '';
html += "<option value=''></option>"; html += "<option value=''></option>";
html += "<option value='Continuing'>" + globalize.translate('Continuing') + '</option>'; html += "<option value='Continuing'>" + globalize.translate('Continuing') + '</option>';
@ -864,7 +876,6 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function populateListView(list, items, sortCallback) { function populateListView(list, items, sortCallback) {
items = items || []; items = items || [];
if (typeof (sortCallback) === 'undefined') { if (typeof (sortCallback) === 'undefined') {
items.sort(function (a, b) { items.sort(function (a, b) {
@ -873,8 +884,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} else { } else {
items = sortCallback(items); items = sortCallback(items);
} }
var html = ''; let html = '';
for (var i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
html += '<div class="listItem">'; html += '<div class="listItem">';
html += '<span class="material-icons listItemIcon live_tv" style="background-color:#333;"></span>'; html += '<span class="material-icons listItemIcon live_tv" style="background-color:#333;"></span>';
@ -896,15 +907,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function populatePeople(context, people) { function populatePeople(context, people) {
let lastType = '';
let html = '';
var lastType = ''; const elem = context.querySelector('#peopleList');
var html = '';
var elem = context.querySelector('#peopleList'); for (let i = 0, length = people.length; i < length; i++) {
const person = people[i];
for (var i = 0, length = people.length; i < length; i++) {
var person = people[i];
html += '<div class="listItem">'; html += '<div class="listItem">';
@ -933,14 +942,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function getLockedFieldsHtml(fields, currentFields) { function getLockedFieldsHtml(fields, currentFields) {
let html = '';
var html = ''; for (let i = 0; i < fields.length; i++) {
for (var i = 0; i < fields.length; i++) { const field = fields[i];
const name = field.name;
var field = fields[i]; const value = field.value || field.name;
var name = field.name; const checkedHtml = currentFields.indexOf(value) === -1 ? ' checked' : '';
var value = field.value || field.name;
var checkedHtml = currentFields.indexOf(value) === -1 ? ' checked' : '';
html += '<label>'; html += '<label>';
html += '<input type="checkbox" is="emby-checkbox" class="selectLockedField" data-value="' + value + '"' + checkedHtml + '/>'; html += '<input type="checkbox" is="emby-checkbox" class="selectLockedField" data-value="' + value + '"' + checkedHtml + '/>';
html += '<span>' + name + '</span>'; html += '<span>' + name + '</span>';
@ -950,10 +957,10 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function fillMetadataSettings(context, item, lockedFields) { function fillMetadataSettings(context, item, lockedFields) {
var container = context.querySelector('.providerSettingsContainer'); const container = context.querySelector('.providerSettingsContainer');
lockedFields = lockedFields || []; lockedFields = lockedFields || [];
var lockedFieldsList = [ const lockedFieldsList = [
{ name: globalize.translate('Name'), value: 'Name' }, { name: globalize.translate('Name'), value: 'Name' },
{ name: globalize.translate('Overview'), value: 'Overview' }, { name: globalize.translate('Overview'), value: 'Overview' },
{ name: globalize.translate('Genres'), value: 'Genres' }, { name: globalize.translate('Genres'), value: 'Genres' },
@ -974,7 +981,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
lockedFieldsList.push({ name: globalize.translate('Studios'), value: 'Studios' }); lockedFieldsList.push({ name: globalize.translate('Studios'), value: 'Studios' });
lockedFieldsList.push({ name: globalize.translate('Tags'), value: 'Tags' }); lockedFieldsList.push({ name: globalize.translate('Tags'), value: 'Tags' });
var html = ''; let html = '';
html += '<h2>' + globalize.translate('HeaderEnabledFields') + '</h2>'; html += '<h2>' + globalize.translate('HeaderEnabledFields') + '</h2>';
html += '<p>' + globalize.translate('HeaderEnabledFieldsHelp') + '</p>'; html += '<p>' + globalize.translate('HeaderEnabledFieldsHelp') + '</p>';
@ -983,18 +990,16 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function reload(context, itemId, serverId) { function reload(context, itemId, serverId) {
loading.show(); loading.show();
Promise.all([getItem(itemId, serverId), getEditorConfig(itemId, serverId)]).then(function (responses) { Promise.all([getItem(itemId, serverId), getEditorConfig(itemId, serverId)]).then(function (responses) {
const item = responses[0];
var item = responses[0];
metadataEditorInfo = responses[1]; metadataEditorInfo = responses[1];
currentItem = item; currentItem = item;
var languages = metadataEditorInfo.Cultures; const languages = metadataEditorInfo.Cultures;
var countries = metadataEditorInfo.Countries; const countries = metadataEditorInfo.Countries;
renderContentTypeOptions(context, metadataEditorInfo); renderContentTypeOptions(context, metadataEditorInfo);
@ -1017,8 +1022,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(({default: scrollHelper}) => {
var fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
@ -1026,9 +1031,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
function show(itemId, serverId, resolve, reject) { function show(itemId, serverId, resolve, reject) {
loading.show(); loading.show();
require(['text!./metadataEditor.template.html'], function (template) { import('text!./metadataEditor.template.html').then(({default: template}) => {
const dialogOptions = {
var dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -1039,13 +1043,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
var html = ''; let html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -1071,7 +1075,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
}); });
} }
return { export default {
show: function (itemId, serverId) { show: function (itemId, serverId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
return show(itemId, serverId, resolve, reject); return show(itemId, serverId, resolve, reject);
@ -1080,14 +1084,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
embed: function (elem, itemId, serverId) { embed: function (elem, itemId, serverId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
loading.show(); loading.show();
require(['text!./metadataEditor.template.html'], function (template) { import('text!./metadataEditor.template.html').then(({default: template}) => {
elem.innerHTML = globalize.translateHtml(template, 'core');
elem.innerHTML = globalize.translateDocument(template, 'core');
elem.querySelector('.formDialogFooter').classList.remove('formDialogFooter'); elem.querySelector('.formDialogFooter').classList.remove('formDialogFooter');
elem.querySelector('.btnClose').classList.add('hide');
elem.querySelector('.btnHeaderSave').classList.remove('hide'); elem.querySelector('.btnHeaderSave').classList.remove('hide');
elem.querySelector('.btnCancel').classList.add('hide'); elem.querySelector('.btnCancel').classList.add('hide');
@ -1101,4 +1104,5 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
}); });
} }
}; };
});
/* eslint-enable indent */

3
src/components/metadataEditor/metadataEditor.template.html
View file

@ -8,6 +8,9 @@
<span class="material-icons check"></span> <span class="material-icons check"></span>
<span>${Save}</span> <span>${Save}</span>
</button> </button>
<button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1">
<span class="material-icons more_vert"></span>
</button>
<button is="paper-icon-button-light" class="btnCancel btnClose autoSize" tabindex="-1"> <button is="paper-icon-button-light" class="btnCancel btnClose autoSize" tabindex="-1">
<span class="material-icons close"></span> <span class="material-icons close"></span>
</button> </button>

40
src/components/metadataEditor/personEditor.js
View file

@ -1,19 +1,24 @@
define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-button-light', 'emby-input', 'emby-select', 'css!./../formdialog'], function (dialogHelper, layoutManager, globalize, require) { import dialogHelper from 'dialogHelper';
'use strict'; import layoutManager from 'layoutManager';
import globalize from 'globalize';
import 'paper-icon-button-light';
import 'emby-input';
import 'emby-select';
import 'css!./../formdialog';
/* eslint-disable indent */
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(({default: scrollHelper}) => {
var fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
function show(person) { function show(person) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
import('text!./personEditor.template.html').then(({default: template}) => {
require(['text!./personEditor.template.html'], function (template) { const dialogOptions = {
var dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -24,14 +29,14 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
var html = ''; let html = '';
var submitted = false; let submitted = false;
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -46,7 +51,6 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.addEventListener('close', function () { dlg.addEventListener('close', function () {
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.formDialogContent'), false, false); centerFocus(dlg.querySelector('.formDialogContent'), false, false);
} }
@ -59,7 +63,6 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
}); });
dlg.querySelector('.selectPersonType').addEventListener('change', function (e) { dlg.querySelector('.selectPersonType').addEventListener('change', function (e) {
if (this.value === 'Actor') { if (this.value === 'Actor') {
dlg.querySelector('.fldRole').classList.remove('hide'); dlg.querySelector('.fldRole').classList.remove('hide');
} else { } else {
@ -68,12 +71,10 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
}); });
dlg.querySelector('.btnCancel').addEventListener('click', function (e) { dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
dlg.querySelector('form').addEventListener('submit', function (e) { dlg.querySelector('form').addEventListener('submit', function (e) {
submitted = true; submitted = true;
person.Name = dlg.querySelector('.txtPersonName', dlg).value; person.Name = dlg.querySelector('.txtPersonName', dlg).value;
@ -93,7 +94,8 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
}); });
} }
return { export default {
show: show show: show
}; };
});
/* eslint-enable indent */

221
src/components/multiSelect/multiSelect.js
View file

@ -1,24 +1,28 @@
define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'globalize', 'appRouter', 'dom', 'css!./multiSelect'], function (browser, appStorage, appHost, loading, connectionManager, globalize, appRouter, dom) { import browser from 'browser';
'use strict'; 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 = []; /* eslint-disable indent */
var selectedElements = [];
var currentSelectionCommandsPanel; let selectedItems = [];
let selectedElements = [];
let currentSelectionCommandsPanel;
function hideSelections() { function hideSelections() {
const selectionCommandsPanel = currentSelectionCommandsPanel;
var selectionCommandsPanel = currentSelectionCommandsPanel;
if (selectionCommandsPanel) { if (selectionCommandsPanel) {
selectionCommandsPanel.parentNode.removeChild(selectionCommandsPanel); selectionCommandsPanel.parentNode.removeChild(selectionCommandsPanel);
currentSelectionCommandsPanel = null; currentSelectionCommandsPanel = null;
selectedItems = []; selectedItems = [];
selectedElements = []; selectedElements = [];
var elems = document.querySelectorAll('.itemSelectionPanel'); const elems = document.querySelectorAll('.itemSelectionPanel');
for (var i = 0, length = elems.length; i < length; i++) { for (let i = 0, length = elems.length; i < length; i++) {
const parent = elems[i].parentNode;
var parent = elems[i].parentNode;
parent.removeChild(elems[i]); parent.removeChild(elems[i]);
parent.classList.remove('withMultiSelect'); parent.classList.remove('withMultiSelect');
} }
@ -26,17 +30,15 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
} }
function onItemSelectionPanelClick(e, itemSelectionPanel) { function onItemSelectionPanelClick(e, itemSelectionPanel) {
// toggle the checkbox, if it wasn't clicked on // toggle the checkbox, if it wasn't clicked on
if (!dom.parentWithClass(e.target, 'chkItemSelect')) { if (!dom.parentWithClass(e.target, 'chkItemSelect')) {
var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); const chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
if (chkItemSelect) { if (chkItemSelect) {
if (chkItemSelect.classList.contains('checkedInitial')) { if (chkItemSelect.classList.contains('checkedInitial')) {
chkItemSelect.classList.remove('checkedInitial'); chkItemSelect.classList.remove('checkedInitial');
} else { } else {
var newValue = !chkItemSelect.checked; const newValue = !chkItemSelect.checked;
chkItemSelect.checked = newValue; chkItemSelect.checked = newValue;
updateItemSelection(chkItemSelect, newValue); updateItemSelection(chkItemSelect, newValue);
} }
@ -49,12 +51,10 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
} }
function updateItemSelection(chkItemSelect, selected) { function updateItemSelection(chkItemSelect, selected) {
const id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id');
var id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id');
if (selected) { if (selected) {
const current = selectedItems.filter(i => {
var current = selectedItems.filter(function (i) {
return i === id; return i === id;
}); });
@ -62,18 +62,17 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
selectedItems.push(id); selectedItems.push(id);
selectedElements.push(chkItemSelect); selectedElements.push(chkItemSelect);
} }
} else { } else {
selectedItems = selectedItems.filter(function (i) { selectedItems = selectedItems.filter(i => {
return i !== id; return i !== id;
}); });
selectedElements = selectedElements.filter(function (i) { selectedElements = selectedElements.filter(i => {
return i !== chkItemSelect; return i !== chkItemSelect;
}); });
} }
if (selectedItems.length) { if (selectedItems.length) {
var itemSelectionCount = document.querySelector('.itemSelectionCount'); const itemSelectionCount = document.querySelector('.itemSelectionCount');
if (itemSelectionCount) { if (itemSelectionCount) {
itemSelectionCount.innerHTML = selectedItems.length; itemSelectionCount.innerHTML = selectedItems.length;
} }
@ -87,107 +86,94 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
} }
function showSelection(item, isChecked) { function showSelection(item, isChecked) {
let itemSelectionPanel = item.querySelector('.itemSelectionPanel');
var itemSelectionPanel = item.querySelector('.itemSelectionPanel');
if (!itemSelectionPanel) { if (!itemSelectionPanel) {
itemSelectionPanel = document.createElement('div'); itemSelectionPanel = document.createElement('div');
itemSelectionPanel.classList.add('itemSelectionPanel'); 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.classList.add('withMultiSelect');
parent.appendChild(itemSelectionPanel); parent.appendChild(itemSelectionPanel);
var cssClass = 'chkItemSelect'; let cssClass = 'chkItemSelect';
if (isChecked && !browser.firefox) { if (isChecked && !browser.firefox) {
// In firefox, the initial tap hold doesnt' get treated as a click // 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 // In other browsers it does, so we need to make sure that initial click is ignored
cssClass += ' checkedInitial'; cssClass += ' checkedInitial';
} }
var checkedAttribute = isChecked ? ' checked' : ''; const checkedAttribute = isChecked ? ' checked' : '';
itemSelectionPanel.innerHTML = '<label class="checkboxContainer"><input type="checkbox" is="emby-checkbox" data-outlineclass="multiSelectCheckboxOutline" class="' + cssClass + '"' + checkedAttribute + '/><span></span></label>'; itemSelectionPanel.innerHTML = `<label class="checkboxContainer"><input type="checkbox" is="emby-checkbox" data-outlineclass="multiSelectCheckboxOutline" class="${cssClass}"${checkedAttribute}/><span></span></label>`;
var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); const chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
chkItemSelect.addEventListener('change', onSelectionChange); chkItemSelect.addEventListener('change', onSelectionChange);
} }
} }
function showSelectionCommands() { function showSelectionCommands() {
let selectionCommandsPanel = currentSelectionCommandsPanel;
var selectionCommandsPanel = currentSelectionCommandsPanel;
if (!selectionCommandsPanel) { if (!selectionCommandsPanel) {
selectionCommandsPanel = document.createElement('div'); selectionCommandsPanel = document.createElement('div');
selectionCommandsPanel.classList.add('selectionCommandsPanel'); selectionCommandsPanel.classList.add('selectionCommandsPanel');
document.body.appendChild(selectionCommandsPanel); document.body.appendChild(selectionCommandsPanel);
currentSelectionCommandsPanel = selectionCommandsPanel; currentSelectionCommandsPanel = selectionCommandsPanel;
var html = ''; let html = '';
html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><span class="material-icons close"></span></button>'; html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><span class="material-icons close"></span></button>';
html += '<h1 class="itemSelectionCount"></h1>'; html += '<h1 class="itemSelectionCount"></h1>';
const moreIcon = 'more_vert'; const moreIcon = 'more_vert';
html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><span class="material-icons ' + moreIcon + '"></span></button>'; html += `<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><span class="material-icons ${moreIcon}"></span></button>`;
selectionCommandsPanel.innerHTML = html; selectionCommandsPanel.innerHTML = html;
selectionCommandsPanel.querySelector('.btnCloseSelectionPanel').addEventListener('click', hideSelections); selectionCommandsPanel.querySelector('.btnCloseSelectionPanel').addEventListener('click', hideSelections);
var btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions'); const btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions');
dom.addEventListener(btnSelectionPanelOptions, 'click', showMenuForSelectedItems, { passive: true }); dom.addEventListener(btnSelectionPanelOptions, 'click', showMenuForSelectedItems, { passive: true });
} }
} }
function alertText(options) { function alertText(options) {
return new Promise((resolve, reject) => {
return new Promise(function (resolve, reject) { import('alert').then(({default: alert}) => {
require(['alert'], function (alert) {
alert(options).then(resolve, resolve); alert(options).then(resolve, resolve);
}); });
}); });
} }
function deleteItems(apiClient, itemIds) { function deleteItems(apiClient, itemIds) {
return new Promise((resolve, reject) => {
return new Promise(function (resolve, reject) { let msg = globalize.translate('ConfirmDeleteItem');
let title = globalize.translate('HeaderDeleteItem');
var msg = globalize.translate('ConfirmDeleteItem');
var title = globalize.translate('HeaderDeleteItem');
if (itemIds.length > 1) { if (itemIds.length > 1) {
msg = globalize.translate('ConfirmDeleteItems'); msg = globalize.translate('ConfirmDeleteItems');
title = globalize.translate('HeaderDeleteItems'); title = globalize.translate('HeaderDeleteItems');
} }
require(['confirm'], function (confirm) { import('confirm').then(({default: confirm}) => {
confirm(msg, title).then(() => {
confirm(msg, title).then(function () { const promises = itemIds.map(itemId => {
var promises = itemIds.map(function (itemId) {
apiClient.deleteItem(itemId); apiClient.deleteItem(itemId);
}); });
Promise.all(promises).then(resolve, function () { Promise.all(promises).then(resolve, () => {
alertText(globalize.translate('ErrorDeletingItem')).then(reject, reject); alertText(globalize.translate('ErrorDeletingItem')).then(reject, reject);
}); });
}, reject); }, reject);
}); });
}); });
} }
function showMenuForSelectedItems(e) { function showMenuForSelectedItems(e) {
const apiClient = connectionManager.currentApiClient();
var apiClient = connectionManager.currentApiClient(); apiClient.getCurrentUser().then(user => {
const menuItems = [];
apiClient.getCurrentUser().then(function (user) {
var menuItems = [];
menuItems.push({ menuItems.push({
name: globalize.translate('AddToCollection'), name: globalize.translate('AddToCollection'),
@ -244,18 +230,18 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
icon: 'refresh' icon: 'refresh'
}); });
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({ actionsheet.show({
items: menuItems, items: menuItems,
positionTo: e.target, positionTo: e.target,
callback: function (id) { callback: function (id) {
var items = selectedItems.slice(0); const items = selectedItems.slice(0);
var serverId = apiClient.serverInfo().Id; const serverId = apiClient.serverInfo().Id;
switch (id) { switch (id) {
case 'addtocollection': case 'addtocollection':
require(['collectionEditor'], function (collectionEditor) { import('collectionEditor').then(({default: collectionEditor}) => {
new collectionEditor().show({ new collectionEditor({
items: items, items: items,
serverId: serverId serverId: serverId
}); });
@ -264,8 +250,8 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
dispatchNeedsRefresh(); dispatchNeedsRefresh();
break; break;
case 'playlist': case 'playlist':
require(['playlistEditor'], function (playlistEditor) { import('playlistEditor').then(({default: playlistEditor}) => {
new playlistEditor().show({ new playlistEditor({
items: items, items: items,
serverId: serverId serverId: serverId
}); });
@ -282,21 +268,21 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
combineVersions(apiClient, items); combineVersions(apiClient, items);
break; break;
case 'markplayed': case 'markplayed':
items.forEach(function (itemId) { items.forEach(itemId => {
apiClient.markPlayed(apiClient.getCurrentUserId(), itemId); apiClient.markPlayed(apiClient.getCurrentUserId(), itemId);
}); });
hideSelections(); hideSelections();
dispatchNeedsRefresh(); dispatchNeedsRefresh();
break; break;
case 'markunplayed': case 'markunplayed':
items.forEach(function (itemId) { items.forEach(itemId => {
apiClient.markUnplayed(apiClient.getCurrentUserId(), itemId); apiClient.markUnplayed(apiClient.getCurrentUserId(), itemId);
}); });
hideSelections(); hideSelections();
dispatchNeedsRefresh(); dispatchNeedsRefresh();
break; break;
case 'refresh': case 'refresh':
require(['refreshDialog'], function (refreshDialog) { import('refreshDialog').then(({default: refreshDialog}) => {
new refreshDialog({ new refreshDialog({
itemIds: items, itemIds: items,
serverId: serverId serverId: serverId
@ -310,35 +296,31 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
} }
} }
}); });
}); });
}); });
} }
function dispatchNeedsRefresh() { function dispatchNeedsRefresh() {
const elems = [];
var elems = []; [].forEach.call(selectedElements, i => {
const container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer');
[].forEach.call(selectedElements, function (i) { if (container && !elems.includes(container)) {
var container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer');
if (container && elems.indexOf(container) === -1) {
elems.push(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); elems[i].notifyRefreshNeeded(true);
} }
} }
function combineVersions(apiClient, selection) { function combineVersions(apiClient, selection) {
if (selection.length < 2) { if (selection.length < 2) {
import('alert').then(({default: alert}) => {
require(['alert'], function (alert) {
alert({ alert({
text: globalize.translate('PleaseSelectTwoItems') text: globalize.translate('PleaseSelectTwoItems')
}); });
}); });
@ -352,8 +334,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
type: 'POST', type: 'POST',
url: apiClient.getUrl('Videos/MergeVersions', { Ids: selection.join(',') }) url: apiClient.getUrl('Videos/MergeVersions', { Ids: selection.join(',') })
}).then(function () { }).then(() => {
loading.hide(); loading.hide();
hideSelections(); hideSelections();
dispatchNeedsRefresh(); dispatchNeedsRefresh();
@ -361,10 +342,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
} }
function showSelections(initialCard) { function showSelections(initialCard) {
import('emby-checkbox').then(() => {
require(['emby-checkbox'], function () { const cards = document.querySelectorAll('.card');
var cards = document.querySelectorAll('.card'); for (let i = 0, length = cards.length; i < length; i++) {
for (var i = 0, length = cards.length; i < length; i++) {
showSelection(cards[i], initialCard === cards[i]); showSelection(cards[i], initialCard === cards[i]);
} }
@ -374,14 +354,12 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
} }
function onContainerClick(e) { function onContainerClick(e) {
const target = e.target;
var target = e.target;
if (selectedItems.length) { if (selectedItems.length) {
const card = dom.parentWithClass(target, 'card');
var card = dom.parentWithClass(target, 'card');
if (card) { if (card) {
var itemSelectionPanel = card.querySelector('.itemSelectionPanel'); const itemSelectionPanel = card.querySelector('.itemSelectionPanel');
if (itemSelectionPanel) { if (itemSelectionPanel) {
return onItemSelectionPanelClick(e, itemSelectionPanel); return onItemSelectionPanelClick(e, itemSelectionPanel);
} }
@ -395,18 +373,15 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
document.addEventListener('viewbeforehide', hideSelections); document.addEventListener('viewbeforehide', hideSelections);
return function (options) { export default function (options) {
const self = this;
var self = this; const container = options.container;
var container = options.container;
function onTapHold(e) { function onTapHold(e) {
const card = dom.parentWithClass(e.target, 'card');
var card = dom.parentWithClass(e.target, 'card');
if (card) { if (card) {
showSelections(card); showSelections(card);
} }
@ -419,17 +394,15 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
} }
function getTouches(e) { function getTouches(e) {
return e.changedTouches || e.targetTouches || e.touches; return e.changedTouches || e.targetTouches || e.touches;
} }
var touchTarget; let touchTarget;
var touchStartTimeout; let touchStartTimeout;
var touchStartX; let touchStartX;
var touchStartY; let touchStartY;
function onTouchStart(e) { function onTouchStart(e) {
const touch = getTouches(e)[0];
var touch = getTouches(e)[0];
touchTarget = null; touchTarget = null;
touchStartX = 0; touchStartX = 0;
touchStartY = 0; touchStartY = 0;
@ -437,13 +410,12 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
if (touch) { if (touch) {
touchStartX = touch.clientX; touchStartX = touch.clientX;
touchStartY = touch.clientY; touchStartY = touch.clientY;
var element = touch.target; const element = touch.target;
if (element) { if (element) {
var card = dom.parentWithClass(element, 'card'); const card = dom.parentWithClass(element, 'card');
if (card) { if (card) {
if (touchStartTimeout) { if (touchStartTimeout) {
clearTimeout(touchStartTimeout); clearTimeout(touchStartTimeout);
touchStartTimeout = null; touchStartTimeout = null;
@ -457,15 +429,14 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
} }
function onTouchMove(e) { function onTouchMove(e) {
if (touchTarget) { if (touchTarget) {
var touch = getTouches(e)[0]; const touch = getTouches(e)[0];
var deltaX; let deltaX;
var deltaY; let deltaY;
if (touch) { if (touch) {
var touchEndX = touch.clientX || 0; const touchEndX = touch.clientX || 0;
var touchEndY = touch.clientY || 0; const touchEndY = touch.clientY || 0;
deltaX = Math.abs(touchEndX - (touchStartX || 0)); deltaX = Math.abs(touchEndX - (touchStartX || 0));
deltaY = Math.abs(touchEndY - (touchStartY || 0)); deltaY = Math.abs(touchEndY - (touchStartY || 0));
} else { } else {
@ -479,12 +450,10 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
} }
function onTouchEnd(e) { function onTouchEnd(e) {
onMouseOut(e); onMouseOut(e);
} }
function onMouseDown(e) { function onMouseDown(e) {
if (touchStartTimeout) { if (touchStartTimeout) {
clearTimeout(touchStartTimeout); clearTimeout(touchStartTimeout);
touchStartTimeout = null; touchStartTimeout = null;
@ -495,7 +464,6 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
} }
function onMouseOut(e) { function onMouseOut(e) {
if (touchStartTimeout) { if (touchStartTimeout) {
clearTimeout(touchStartTimeout); clearTimeout(touchStartTimeout);
touchStartTimeout = null; touchStartTimeout = null;
@ -504,22 +472,19 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
} }
function onTouchStartTimerFired() { function onTouchStartTimerFired() {
if (!touchTarget) { if (!touchTarget) {
return; return;
} }
var card = dom.parentWithClass(touchTarget, 'card'); const card = dom.parentWithClass(touchTarget, 'card');
touchTarget = null; touchTarget = null;
if (card) { if (card) {
showSelections(card); showSelections(card);
} }
} }
function initTapHold(element) { function initTapHold(element) {
// mobile safari doesn't allow contextmenu override // mobile safari doesn't allow contextmenu override
if (browser.touch && !browser.safari) { if (browser.touch && !browser.safari) {
element.addEventListener('contextmenu', onTapHold); element.addEventListener('contextmenu', onTapHold);
@ -556,12 +521,11 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
self.onContainerClick = onContainerClick; self.onContainerClick = onContainerClick;
self.destroy = function () { self.destroy = () => {
container.removeEventListener('click', onContainerClick); container.removeEventListener('click', onContainerClick);
container.removeEventListener('contextmenu', onTapHold); container.removeEventListener('contextmenu', onTapHold);
var element = container; const element = container;
dom.removeEventListener(element, 'touchstart', onTouchStart, { dom.removeEventListener(element, 'touchstart', onTouchStart, {
passive: true passive: true
@ -572,10 +536,6 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
dom.removeEventListener(element, 'touchend', onTouchEnd, { dom.removeEventListener(element, 'touchend', onTouchEnd, {
passive: true passive: true
}); });
// this fires in safari due to magnifying class
//dom.removeEventListener(element, "touchcancel", onTouchEnd, {
// passive: true
//});
dom.removeEventListener(element, 'mousedown', onMouseDown, { dom.removeEventListener(element, 'mousedown', onMouseDown, {
passive: true passive: true
}); });
@ -586,5 +546,6 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
passive: true passive: true
}); });
}; };
}; }
});
/* eslint-enable indent */

17
src/components/notifications/notifications.js
View file

@ -44,7 +44,6 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
} }
function showNonPersistentNotification(title, options, timeoutMs) { function showNonPersistentNotification(title, options, timeoutMs) {
try { try {
var notif = new Notification(title, options); /* eslint-disable-line compat/compat */ var notif = new Notification(title, options); /* eslint-disable-line compat/compat */
@ -66,7 +65,6 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
} }
function showNotification(options, timeoutMs, apiClient) { function showNotification(options, timeoutMs, apiClient) {
var title = options.title; var title = options.title;
options.data = options.data || {}; options.data = options.data || {};
@ -85,7 +83,6 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
} }
function showNewItemNotification(item, apiClient) { function showNewItemNotification(item, apiClient) {
if (playbackManager.isPlayingLocally(['Video'])) { if (playbackManager.isPlayingLocally(['Video'])) {
return; return;
} }
@ -101,17 +98,12 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
body: body, body: body,
vibrate: true, vibrate: true,
tag: 'newItem' + item.Id, tag: 'newItem' + item.Id,
data: { data: {}
//options: {
// url: LibraryBrowser.getHref(item)
//}
}
}; };
var imageTags = item.ImageTags || {}; var imageTags = item.ImageTags || {};
if (imageTags.Primary) { if (imageTags.Primary) {
notification.icon = apiClient.getScaledImageUrl(item.Id, { notification.icon = apiClient.getScaledImageUrl(item.Id, {
width: 80, width: 80,
tag: imageTags.Primary, tag: imageTags.Primary,
@ -123,7 +115,6 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
} }
function onLibraryChanged(data, apiClient) { function onLibraryChanged(data, apiClient) {
var newItems = data.ItemsAdded; var newItems = data.ItemsAdded;
if (!newItems.length) { if (!newItems.length) {
@ -147,11 +138,9 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
EnableTotalRecordCount: false EnableTotalRecordCount: false
}).then(function (result) { }).then(function (result) {
var items = result.Items; var items = result.Items;
for (var i = 0, length = items.length ; i < length; i++) { for (var i = 0, length = items.length ; i < length; i++) {
showNewItemNotification(items[i], apiClient); showNewItemNotification(items[i], apiClient);
} }
}); });
@ -163,9 +152,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
} }
function showPackageInstallNotification(apiClient, installation, status) { function showPackageInstallNotification(apiClient, installation, status) {
apiClient.getCurrentUser().then(function (user) { apiClient.getCurrentUser().then(function (user) {
if (!user.Policy.IsAdministrator) { if (!user.Policy.IsAdministrator) {
return; return;
} }
@ -199,7 +186,6 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
} }
if (status === 'progress') { if (status === 'progress') {
var percentComplete = Math.round(installation.PercentComplete || 0); var percentComplete = Math.round(installation.PercentComplete || 0);
notification.body = percentComplete + '% complete.'; notification.body = percentComplete + '% complete.';
@ -250,7 +236,6 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
}); });
events.on(serverNotifications, 'RestartRequired', function (e, apiClient) { events.on(serverNotifications, 'RestartRequired', function (e, apiClient) {
var serverId = apiClient.serverInfo().Id; var serverId = apiClient.serverInfo().Id;
var notification = { var notification = {
tag: 'restart' + serverId, tag: 'restart' + serverId,

181
src/components/nowPlayingBar/nowPlayingBar.js
View file

@ -1,31 +1,43 @@
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) { import datetime from 'datetime';
'use strict'; 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; /* eslint-disable indent */
var currentPlayerSupportedCommands = [];
var currentTimeElement; let currentPlayer;
var nowPlayingImageElement; let currentPlayerSupportedCommands = [];
var nowPlayingTextElement;
var nowPlayingUserData;
var muteButton;
var volumeSlider;
var volumeSliderContainer;
var playPauseButtons;
var positionSlider;
var toggleRepeatButton;
var toggleRepeatButtonIcon;
var lastUpdateTime = 0; let currentTimeElement;
var lastPlayerState = {}; let nowPlayingImageElement;
var isEnabled; let nowPlayingTextElement;
var currentRuntimeTicks = 0; 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() { function getNowPlayingBarHtml() {
let html = '';
var html = '';
html += '<div class="nowPlayingBar hide nowPlayingBar-hidden">'; html += '<div class="nowPlayingBar hide nowPlayingBar-hidden">';
@ -84,12 +96,10 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function onSlideDownComplete() { function onSlideDownComplete() {
this.classList.add('hide'); this.classList.add('hide');
} }
function slideDown(elem) { function slideDown(elem) {
// trigger reflow // trigger reflow
void elem.offsetWidth; void elem.offsetWidth;
@ -101,7 +111,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function slideUp(elem) { function slideUp(elem) {
dom.removeEventListener(elem, dom.whichTransitionEvent(), onSlideDownComplete, { dom.removeEventListener(elem, dom.whichTransitionEvent(), onSlideDownComplete, {
once: true once: true
}); });
@ -119,7 +128,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function bindEvents(elem) { function bindEvents(elem) {
currentTimeElement = elem.querySelector('.nowPlayingBarCurrentTime'); currentTimeElement = elem.querySelector('.nowPlayingBarCurrentTime');
nowPlayingImageElement = elem.querySelector('.nowPlayingImage'); nowPlayingImageElement = elem.querySelector('.nowPlayingImage');
nowPlayingTextElement = elem.querySelector('.nowPlayingBarText'); nowPlayingTextElement = elem.querySelector('.nowPlayingBarText');
@ -132,15 +140,12 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
volumeSliderContainer = elem.querySelector('.nowPlayingBarVolumeSliderContainer'); volumeSliderContainer = elem.querySelector('.nowPlayingBarVolumeSliderContainer');
muteButton.addEventListener('click', function () { muteButton.addEventListener('click', function () {
if (currentPlayer) { if (currentPlayer) {
playbackManager.toggleMute(currentPlayer); playbackManager.toggleMute(currentPlayer);
} }
}); });
elem.querySelector('.stopButton').addEventListener('click', function () { elem.querySelector('.stopButton').addEventListener('click', function () {
if (currentPlayer) { if (currentPlayer) {
playbackManager.stop(currentPlayer); playbackManager.stop(currentPlayer);
} }
@ -151,7 +156,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
}); });
elem.querySelector('.nextTrackButton').addEventListener('click', function () { elem.querySelector('.nextTrackButton').addEventListener('click', function () {
if (currentPlayer) { if (currentPlayer) {
playbackManager.nextTrack(currentPlayer); playbackManager.nextTrack(currentPlayer);
} }
@ -211,25 +215,21 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
}); });
positionSlider.addEventListener('change', function () { positionSlider.addEventListener('change', function () {
if (currentPlayer) { if (currentPlayer) {
const newPercent = parseFloat(this.value);
var newPercent = parseFloat(this.value);
playbackManager.seekPercent(newPercent, currentPlayer); playbackManager.seekPercent(newPercent, currentPlayer);
} }
}); });
positionSlider.getBubbleText = function (value) { positionSlider.getBubbleText = function (value) {
const state = lastPlayerState;
var state = lastPlayerState;
if (!state || !state.NowPlayingItem || !currentRuntimeTicks) { if (!state || !state.NowPlayingItem || !currentRuntimeTicks) {
return '--:--'; return '--:--';
} }
var ticks = currentRuntimeTicks; let ticks = currentRuntimeTicks;
ticks /= 100; ticks /= 100;
ticks *= value; ticks *= value;
@ -237,7 +237,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
}; };
elem.addEventListener('click', function (e) { elem.addEventListener('click', function (e) {
if (!dom.parentWithTag(e.target, ['BUTTON', 'INPUT'])) { if (!dom.parentWithTag(e.target, ['BUTTON', 'INPUT'])) {
showRemoteControl(); showRemoteControl();
} }
@ -245,24 +244,26 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function showRemoteControl() { function showRemoteControl() {
import('appRouter').then(({default: appRouter}) => {
require(['appRouter'], function (appRouter) {
appRouter.showNowPlaying(); appRouter.showNowPlaying();
}); });
} }
var nowPlayingBarElement; let nowPlayingBarElement;
function getNowPlayingBar() { function getNowPlayingBar() {
if (nowPlayingBarElement) { if (nowPlayingBarElement) {
return Promise.resolve(nowPlayingBarElement); return Promise.resolve(nowPlayingBarElement);
} }
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
Promise.all([
require(['appFooter-shared', 'itemShortcuts', 'css!./nowPlayingBar.css', 'emby-slider'], function (appfooter, itemShortcuts) { import('appFooter-shared'),
import('itemShortcuts'),
var parentContainer = appfooter.element; import('css!./nowPlayingBar.css'),
import('emby-slider')
])
.then(([appfooter, itemShortcuts]) => {
const parentContainer = appfooter.element;
nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar'); nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');
if (nowPlayingBarElement) { if (nowPlayingBarElement) {
@ -310,18 +311,17 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function updatePlayerStateInternal(event, state, player) { function updatePlayerStateInternal(event, state, player) {
showNowPlayingBar(); showNowPlayingBar();
lastPlayerState = state; lastPlayerState = state;
var playerInfo = playbackManager.getPlayerInfo(); const playerInfo = playbackManager.getPlayerInfo();
var playState = state.PlayState || {}; const playState = state.PlayState || {};
updatePlayPauseState(playState.IsPaused); updatePlayPauseState(playState.IsPaused);
var supportedCommands = playerInfo.supportedCommands; const supportedCommands = playerInfo.supportedCommands;
currentPlayerSupportedCommands = supportedCommands; currentPlayerSupportedCommands = supportedCommands;
if (supportedCommands.indexOf('SetRepeatMode') === -1) { if (supportedCommands.indexOf('SetRepeatMode') === -1) {
@ -339,11 +339,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
positionSlider.disabled = !playState.CanSeek; positionSlider.disabled = !playState.CanSeek;
// determines if both forward and backward buffer progress will be visible // 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); positionSlider.setIsClear(isProgressClear);
} }
var nowPlayingItem = state.NowPlayingItem || {}; const nowPlayingItem = state.NowPlayingItem || {};
updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playbackManager.getBufferedRanges(player)); updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playbackManager.getBufferedRanges(player));
updateNowPlayingInfo(state); updateNowPlayingInfo(state);
@ -374,7 +374,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
// See bindEvents for why this is necessary // See bindEvents for why this is necessary
if (positionSlider && !positionSlider.dragging) { if (positionSlider && !positionSlider.dragging) {
if (runtimeTicks) { if (runtimeTicks) {
var pct = positionTicks / runtimeTicks; let pct = positionTicks / runtimeTicks;
pct *= 100; pct *= 100;
positionSlider.value = pct; positionSlider.value = pct;
@ -388,7 +388,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
if (currentTimeElement) { if (currentTimeElement) {
var timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks); let timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
if (runtimeTicks) { if (runtimeTicks) {
timeText += ' / ' + datetime.getDisplayRunningTime(runtimeTicks); timeText += ' / ' + datetime.getDisplayRunningTime(runtimeTicks);
} }
@ -398,11 +398,10 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function updatePlayerVolumeState(isMuted, volumeLevel) { function updatePlayerVolumeState(isMuted, volumeLevel) {
const supportedCommands = currentPlayerSupportedCommands;
var supportedCommands = currentPlayerSupportedCommands; let showMuteButton = true;
let showVolumeSlider = true;
var showMuteButton = true;
var showVolumeSlider = true;
if (supportedCommands.indexOf('ToggleMute') === -1) { if (supportedCommands.indexOf('ToggleMute') === -1) {
showMuteButton = false; showMuteButton = false;
@ -429,7 +428,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
// See bindEvents for why this is necessary // See bindEvents for why this is necessary
if (volumeSlider) { if (volumeSlider) {
volumeSliderContainer.classList.toggle('hide', !showVolumeSlider); volumeSliderContainer.classList.toggle('hide', !showVolumeSlider);
if (!volumeSlider.dragging) { if (!volumeSlider.dragging) {
@ -439,7 +437,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function seriesImageUrl(item, options) { function seriesImageUrl(item, options) {
if (!item) { if (!item) {
throw new Error('item cannot be null!'); throw new Error('item cannot be null!');
} }
@ -452,9 +449,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
options.type = options.type || 'Primary'; options.type = options.type || 'Primary';
if (options.type === 'Primary') { if (options.type === 'Primary') {
if (item.SeriesPrimaryImageTag) { if (item.SeriesPrimaryImageTag) {
options.tag = item.SeriesPrimaryImageTag; options.tag = item.SeriesPrimaryImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
@ -462,15 +457,12 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
if (options.type === 'Thumb') { if (options.type === 'Thumb') {
if (item.SeriesThumbImageTag) { if (item.SeriesThumbImageTag) {
options.tag = item.SeriesThumbImageTag; options.tag = item.SeriesThumbImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
} }
if (item.ParentThumbImageTag) { if (item.ParentThumbImageTag) {
options.tag = item.ParentThumbImageTag; options.tag = item.ParentThumbImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
@ -481,7 +473,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function imageUrl(item, options) { function imageUrl(item, options) {
if (!item) { if (!item) {
throw new Error('item cannot be null!'); throw new Error('item cannot be null!');
} }
@ -490,13 +481,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
options.type = options.type || 'Primary'; options.type = options.type || 'Primary';
if (item.ImageTags && item.ImageTags[options.type]) { if (item.ImageTags && item.ImageTags[options.type]) {
options.tag = item.ImageTags[options.type]; options.tag = item.ImageTags[options.type];
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
} }
if (item.AlbumId && item.AlbumPrimaryImageTag) { if (item.AlbumId && item.AlbumPrimaryImageTag) {
options.tag = item.AlbumPrimaryImageTag; options.tag = item.AlbumPrimaryImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
} }
@ -504,12 +493,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
return null; return null;
} }
var currentImgUrl; let currentImgUrl;
function updateNowPlayingInfo(state) { function updateNowPlayingInfo(state) {
const nowPlayingItem = state.NowPlayingItem;
var nowPlayingItem = state.NowPlayingItem; const textLines = nowPlayingItem ? nowPlayingHelper.getNowPlayingNames(nowPlayingItem) : [];
var textLines = nowPlayingItem ? nowPlayingHelper.getNowPlayingNames(nowPlayingItem) : [];
nowPlayingTextElement.innerHTML = ''; nowPlayingTextElement.innerHTML = '';
if (textLines) { if (textLines) {
let itemText = document.createElement('div'); let itemText = document.createElement('div');
@ -533,15 +521,15 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
nowPlayingTextElement.appendChild(secondaryText); nowPlayingTextElement.appendChild(secondaryText);
} }
var imgHeight = 70; const imgHeight = 70;
var url = nowPlayingItem ? (seriesImageUrl(nowPlayingItem, { const url = nowPlayingItem ? (seriesImageUrl(nowPlayingItem, {
height: imgHeight height: imgHeight
}) || imageUrl(nowPlayingItem, { }) || imageUrl(nowPlayingItem, {
height: imgHeight height: imgHeight
})) : null; })) : null;
var isRefreshing = false; let isRefreshing = false;
if (url !== currentImgUrl) { if (url !== currentImgUrl) {
currentImgUrl = url; currentImgUrl = url;
@ -560,11 +548,10 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
if (nowPlayingItem.Id) { if (nowPlayingItem.Id) {
if (isRefreshing) { if (isRefreshing) {
const apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId);
var apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId);
apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) { apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
var userData = item.UserData || {}; const userData = item.UserData || {};
var likes = userData.Likes == null ? '' : userData.Likes; const likes = userData.Likes == null ? '' : userData.Likes;
if (!layoutManager.mobile) { if (!layoutManager.mobile) {
let contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu'); let contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu');
// We remove the previous event listener by replacing the item in each update event // We remove the previous event listener by replacing the item in each update event
@ -638,24 +625,21 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function hideNowPlayingBar() { function hideNowPlayingBar() {
isEnabled = false; isEnabled = false;
// Use a timeout to prevent the bar from hiding and showing quickly // Use a timeout to prevent the bar from hiding and showing quickly
// in the event of a stop->play command // 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 // 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) { if (elem) {
slideDown(elem); slideDown(elem);
} }
} }
function onPlaybackStopped(e, state) { function onPlaybackStopped(e, state) {
console.debug('nowplaying event: ' + e.type); console.debug('nowplaying event: ' + e.type);
var player = this; const player = this;
if (player.isLocalPlayer) { if (player.isLocalPlayer) {
if (state.NextMediaType !== 'Audio') { if (state.NextMediaType !== 'Audio') {
@ -669,19 +653,17 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function onPlayPauseStateChanged(e) { function onPlayPauseStateChanged(e) {
if (!isEnabled) { if (!isEnabled) {
return; return;
} }
var player = this; const player = this;
updatePlayPauseState(player.paused()); updatePlayPauseState(player.paused());
} }
function onStateChanged(event, state) { function onStateChanged(event, state) {
console.debug('nowplaying event: ' + event.type); console.debug('nowplaying event: ' + event.type);
var player = this; const player = this;
if (!state.NowPlayingItem || layoutManager.tv) { if (!state.NowPlayingItem || layoutManager.tv) {
hideNowPlayingBar(); hideNowPlayingBar();
@ -706,27 +688,24 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function onTimeUpdate(e) { function onTimeUpdate(e) {
if (!isEnabled) { if (!isEnabled) {
return; return;
} }
// Try to avoid hammering the document with changes // Try to avoid hammering the document with changes
var now = new Date().getTime(); const now = new Date().getTime();
if ((now - lastUpdateTime) < 700) { if ((now - lastUpdateTime) < 700) {
return; return;
} }
lastUpdateTime = now; lastUpdateTime = now;
var player = this; const player = this;
currentRuntimeTicks = playbackManager.duration(player); currentRuntimeTicks = playbackManager.duration(player);
updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks, playbackManager.getBufferedRanges(player)); updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks, playbackManager.getBufferedRanges(player));
} }
function releaseCurrentPlayer() { function releaseCurrentPlayer() {
const player = currentPlayer;
var player = currentPlayer;
if (player) { if (player) {
events.off(player, 'playbackstart', onPlaybackStart); events.off(player, 'playbackstart', onPlaybackStart);
@ -745,25 +724,22 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function onVolumeChanged(e) { function onVolumeChanged(e) {
if (!isEnabled) { if (!isEnabled) {
return; return;
} }
var player = this; const player = this;
updatePlayerVolumeState(player.isMuted(), player.getVolume()); updatePlayerVolumeState(player.isMuted(), player.getVolume());
} }
function refreshFromPlayer(player) { function refreshFromPlayer(player) {
const state = playbackManager.getPlayerState(player);
var state = playbackManager.getPlayerState(player);
onStateChanged.call(player, { type: 'init' }, state); onStateChanged.call(player, { type: 'init' }, state);
} }
function bindToPlayer(player) { function bindToPlayer(player) {
if (player === currentPlayer) { if (player === currentPlayer) {
return; return;
} }
@ -796,16 +772,12 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
bindToPlayer(playbackManager.getCurrentPlayer()); bindToPlayer(playbackManager.getCurrentPlayer());
document.addEventListener('viewbeforeshow', function (e) { document.addEventListener('viewbeforeshow', function (e) {
if (!e.detail.options.enableMediaControl) { if (!e.detail.options.enableMediaControl) {
if (isVisibilityAllowed) { if (isVisibilityAllowed) {
isVisibilityAllowed = false; isVisibilityAllowed = false;
hideNowPlayingBar(); hideNowPlayingBar();
} }
} else if (!isVisibilityAllowed) { } else if (!isVisibilityAllowed) {
isVisibilityAllowed = true; isVisibilityAllowed = true;
if (currentPlayer) { if (currentPlayer) {
refreshFromPlayer(currentPlayer); refreshFromPlayer(currentPlayer);
@ -814,4 +786,5 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
} }
}); });
});
/* eslint-enable indent */

18
src/components/packageManager.js
View file

@ -4,9 +4,7 @@ define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) {
var settingsKey = 'installedpackages1'; var settingsKey = 'installedpackages1';
function addPackage(packageManager, pkg) { function addPackage(packageManager, pkg) {
packageManager.packagesList = packageManager.packagesList.filter(function (p) { packageManager.packagesList = packageManager.packagesList.filter(function (p) {
return p.name !== pkg.name; return p.name !== pkg.name;
}); });
@ -14,7 +12,6 @@ define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) {
} }
function removeUrl(url) { function removeUrl(url) {
var manifestUrls = JSON.parse(appSettings.get(settingsKey) || '[]'); var manifestUrls = JSON.parse(appSettings.get(settingsKey) || '[]');
manifestUrls = manifestUrls.filter(function (i) { manifestUrls = manifestUrls.filter(function (i) {
@ -25,9 +22,7 @@ define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) {
} }
function loadPackage(packageManager, url, throwError) { function loadPackage(packageManager, url, throwError) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
var originalUrl = url; var originalUrl = url;
url += url.indexOf('?') === -1 ? '?' : '&'; url += url.indexOf('?') === -1 ? '?' : '&';
@ -36,7 +31,6 @@ define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) {
xhr.open('GET', url, true); xhr.open('GET', url, true);
var onError = function () { var onError = function () {
if (throwError === true) { if (throwError === true) {
reject(); reject();
} else { } else {
@ -47,7 +41,6 @@ define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) {
xhr.onload = function (e) { xhr.onload = function (e) {
if (this.status < 400) { if (this.status < 400) {
var pkg = JSON.parse(this.response); var pkg = JSON.parse(this.response);
pkg.url = originalUrl; pkg.url = originalUrl;
@ -61,7 +54,6 @@ define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) {
return pluginManager.loadPlugin(packageManager.mapPath(pkg, pluginUrl)); return pluginManager.loadPlugin(packageManager.mapPath(pkg, pluginUrl));
}); });
Promise.all(promises).then(resolve, resolve); Promise.all(promises).then(resolve, resolve);
} else { } else {
onError(); onError();
} }
@ -74,7 +66,6 @@ define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) {
} }
function PackageManager() { function PackageManager() {
this.packagesList = []; this.packagesList = [];
} }
@ -83,9 +74,7 @@ define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) {
var instance = this; var instance = this;
return Promise.all(manifestUrls.map(function (u) { return Promise.all(manifestUrls.map(function (u) {
return loadPackage(instance, u); return loadPackage(instance, u);
})).then(function () { })).then(function () {
return Promise.resolve(); return Promise.resolve();
}, function () { }, function () {
@ -98,9 +87,7 @@ define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) {
}; };
PackageManager.prototype.install = function (url) { PackageManager.prototype.install = function (url) {
return loadPackage(this, url, true).then(function (pkg) { return loadPackage(this, url, true).then(function (pkg) {
var manifestUrls = JSON.parse(appSettings.get(settingsKey) || '[]'); var manifestUrls = JSON.parse(appSettings.get(settingsKey) || '[]');
if (manifestUrls.indexOf(url) === -1) { if (manifestUrls.indexOf(url) === -1) {
@ -113,16 +100,12 @@ define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) {
}; };
PackageManager.prototype.uninstall = function (name) { PackageManager.prototype.uninstall = function (name) {
var pkg = this.packagesList.filter(function (p) { var pkg = this.packagesList.filter(function (p) {
return p.name === name; return p.name === name;
})[0]; })[0];
if (pkg) { if (pkg) {
this.packagesList = this.packagesList.filter(function (p) { this.packagesList = this.packagesList.filter(function (p) {
return p.name !== name; return p.name !== name;
}); });
@ -133,7 +116,6 @@ define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) {
}; };
PackageManager.prototype.mapPath = function (pkg, pluginUrl) { PackageManager.prototype.mapPath = function (pkg, pluginUrl) {
var urlLower = pluginUrl.toLowerCase(); var urlLower = pluginUrl.toLowerCase();
if (urlLower.indexOf('http:') === 0 || urlLower.indexOf('https:') === 0 || urlLower.indexOf('file:') === 0) { if (urlLower.indexOf('http:') === 0 || urlLower.indexOf('https:') === 0 || urlLower.indexOf('file:') === 0) {
return pluginUrl; return pluginUrl;

9
src/components/playback/brightnessosd.js
View file

@ -23,10 +23,8 @@ function getOsdElementHtml() {
} }
function ensureOsdElement() { function ensureOsdElement() {
var elem = osdElement; var elem = osdElement;
if (!elem) { if (!elem) {
enableAnimation = browser.supportsCssAnimation(); enableAnimation = browser.supportsCssAnimation();
elem = document.createElement('div'); elem = document.createElement('div');
@ -50,7 +48,6 @@ function onHideComplete() {
var hideTimeout; var hideTimeout;
function showOsd() { function showOsd() {
clearHideTimeout(); clearHideTimeout();
var elem = osdElement; var elem = osdElement;
@ -79,12 +76,10 @@ function clearHideTimeout() {
} }
function hideOsd() { function hideOsd() {
clearHideTimeout(); clearHideTimeout();
var elem = osdElement; var elem = osdElement;
if (elem) { if (elem) {
if (enableAnimation) { if (enableAnimation) {
// trigger reflow // trigger reflow
void elem.offsetWidth; void elem.offsetWidth;
@ -108,7 +103,6 @@ function setIcon(iconElement, icon) {
} }
function updateElementsFromPlayer(brightness) { function updateElementsFromPlayer(brightness) {
if (iconElement) { if (iconElement) {
if (brightness >= 80) { if (brightness >= 80) {
setIcon(iconElement, 'brightness_high'); setIcon(iconElement, 'brightness_high');
@ -124,7 +118,6 @@ function updateElementsFromPlayer(brightness) {
} }
function releaseCurrentPlayer() { function releaseCurrentPlayer() {
var player = currentPlayer; var player = currentPlayer;
if (player) { if (player) {
@ -135,7 +128,6 @@ function releaseCurrentPlayer() {
} }
function onBrightnessChanged(e) { function onBrightnessChanged(e) {
var player = this; var player = this;
ensureOsdElement(); ensureOsdElement();
@ -146,7 +138,6 @@ function onBrightnessChanged(e) {
} }
function bindToPlayer(player) { function bindToPlayer(player) {
if (player === currentPlayer) { if (player === currentPlayer) {
return; return;
} }

4
src/components/playback/nowplayinghelper.js
View file

@ -1,5 +1,4 @@
export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) { export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
var topItem = nowPlayingItem; var topItem = nowPlayingItem;
var bottomItem = null; var bottomItem = null;
var topText = nowPlayingItem.Name; var topText = nowPlayingItem.Name;
@ -25,7 +24,6 @@ export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
var bottomText = ''; var bottomText = '';
if (nowPlayingItem.ArtistItems && nowPlayingItem.ArtistItems.length) { if (nowPlayingItem.ArtistItems && nowPlayingItem.ArtistItems.length) {
bottomItem = { bottomItem = {
Id: nowPlayingItem.ArtistItems[0].Id, Id: nowPlayingItem.ArtistItems[0].Id,
Name: nowPlayingItem.ArtistItems[0].Name, Name: nowPlayingItem.ArtistItems[0].Name,
@ -36,9 +34,7 @@ export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
bottomText = nowPlayingItem.ArtistItems.map(function (a) { bottomText = nowPlayingItem.ArtistItems.map(function (a) {
return a.Name; return a.Name;
}).join(', '); }).join(', ');
} else if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) { } else if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
bottomText = nowPlayingItem.Artists.join(', '); bottomText = nowPlayingItem.Artists.join(', ');
} else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) { } else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
bottomText = topText; bottomText = topText;

372
src/components/playback/playbackmanager.js
View file

File diff suppressed because it is too large Load diff

4
src/components/playback/playbackorientation.js
View file

@ -14,7 +14,6 @@ function onOrientationChangeError(err) {
} }
events.on(playbackManager, 'playbackstart', function (e, player, state) { events.on(playbackManager, 'playbackstart', function (e, player, state) {
var isLocalVideo = player.isLocalPlayer && !player.isExternalPlayer && playbackManager.isPlayingVideo(player); var isLocalVideo = player.isLocalPlayer && !player.isExternalPlayer && playbackManager.isPlayingVideo(player);
if (isLocalVideo && layoutManager.mobile) { if (isLocalVideo && layoutManager.mobile) {
@ -22,7 +21,6 @@ events.on(playbackManager, 'playbackstart', function (e, player, state) {
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation || (screen.orientation && screen.orientation.lock); var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation || (screen.orientation && screen.orientation.lock);
if (lockOrientation) { if (lockOrientation) {
try { try {
var promise = lockOrientation('landscape'); var promise = lockOrientation('landscape');
if (promise.then) { if (promise.then) {
@ -39,9 +37,7 @@ events.on(playbackManager, 'playbackstart', function (e, player, state) {
}); });
events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) { events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) {
if (orientationLocked && !playbackStopInfo.nextMediaType) { if (orientationLocked && !playbackStopInfo.nextMediaType) {
/* eslint-disable-next-line compat/compat */ /* eslint-disable-next-line compat/compat */
var unlockOrientation = screen.unlockOrientation || screen.mozUnlockOrientation || screen.msUnlockOrientation || (screen.orientation && screen.orientation.unlock); var unlockOrientation = screen.unlockOrientation || screen.mozUnlockOrientation || screen.msUnlockOrientation || (screen.orientation && screen.orientation.unlock);

39
src/components/playback/playerSelectionMenu.js
View file

@ -8,7 +8,6 @@ import globalize from 'globalize';
import appHost from 'apphost'; import appHost from 'apphost';
function mirrorItem(info, player) { function mirrorItem(info, player) {
var item = info.item; var item = info.item;
playbackManager.displayContent({ playbackManager.displayContent({
@ -21,9 +20,7 @@ function mirrorItem(info, player) {
} }
function mirrorIfEnabled(info) { function mirrorIfEnabled(info) {
if (info && playbackManager.enableDisplayMirroring()) { if (info && playbackManager.enableDisplayMirroring()) {
var getPlayerInfo = playbackManager.getPlayerInfo(); var getPlayerInfo = playbackManager.getPlayerInfo();
if (getPlayerInfo) { if (getPlayerInfo) {
@ -39,9 +36,7 @@ function emptyCallback() {
} }
function getTargetSecondaryText(target) { function getTargetSecondaryText(target) {
if (target.user) { if (target.user) {
return target.user.Name; return target.user.Name;
} }
@ -49,7 +44,6 @@ function getTargetSecondaryText(target) {
} }
function getIcon(target) { function getIcon(target) {
var deviceType = target.deviceType; var deviceType = target.deviceType;
if (!deviceType && target.isLocalPlayer) { if (!deviceType && target.isLocalPlayer) {
@ -67,7 +61,6 @@ function getIcon(target) {
} }
switch (deviceType) { switch (deviceType) {
case 'smartphone': case 'smartphone':
return 'smartphone'; return 'smartphone';
case 'tablet': case 'tablet':
@ -84,7 +77,6 @@ function getIcon(target) {
} }
export function show(button) { export function show(button) {
var currentPlayerInfo = playbackManager.getPlayerInfo(); var currentPlayerInfo = playbackManager.getPlayerInfo();
if (currentPlayerInfo) { if (currentPlayerInfo) {
@ -99,9 +91,7 @@ export function show(button) {
loading.show(); loading.show();
playbackManager.getTargets().then(function (targets) { playbackManager.getTargets().then(function (targets) {
var menuItems = targets.map(function (t) { var menuItems = targets.map(function (t) {
var name = t.name; var name = t.name;
if (t.appName && t.appName !== t.name) { if (t.appName && t.appName !== t.name) {
@ -115,11 +105,9 @@ export function show(button) {
secondaryText: getTargetSecondaryText(t), secondaryText: getTargetSecondaryText(t),
icon: getIcon(t) icon: getIcon(t)
}; };
}); });
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({default: actionsheet}) => {
loading.hide(); loading.hide();
var menuOptions = { var menuOptions = {
@ -133,12 +121,11 @@ export function show(button) {
// Unfortunately we can't allow the url to change or chromecast will throw a security error // Unfortunately we can't allow the url to change or chromecast will throw a security error
// Might be able to solve this in the future by moving the dialogs to hashbangs // Might be able to solve this in the future by moving the dialogs to hashbangs
if (!(!browser.chrome || appHost.supports('castmenuhashchange'))) { if (!(!browser.chrome && !browser.edgeChromium || appHost.supports('castmenuhashchange'))) {
menuOptions.enableHistory = false; menuOptions.enableHistory = false;
} }
actionsheet.show(menuOptions).then(function (id) { actionsheet.show(menuOptions).then(function (id) {
var target = targets.filter(function (t) { var target = targets.filter(function (t) {
return t.id === id; return t.id === id;
})[0]; })[0];
@ -146,25 +133,25 @@ export function show(button) {
playbackManager.trySetActivePlayer(target.playerName, target); playbackManager.trySetActivePlayer(target.playerName, target);
mirrorIfEnabled(); mirrorIfEnabled();
}, emptyCallback); }, emptyCallback);
}); });
}); });
} }
function showActivePlayerMenu(playerInfo) { function showActivePlayerMenu(playerInfo) {
Promise.all([
require(['dialogHelper', 'dialog', 'emby-checkbox', 'emby-button'], function (dialogHelper) { import('dialogHelper'),
import('dialog'),
import('emby-checkbox'),
import('emby-button')
]).then(([dialogHelper]) => {
showActivePlayerMenuInternal(dialogHelper, playerInfo); showActivePlayerMenuInternal(dialogHelper, playerInfo);
}); });
} }
function disconnectFromPlayer(currentDeviceName) { function disconnectFromPlayer(currentDeviceName) {
if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) { if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
import('dialog').then(({default: dialog}) => {
require(['dialog'], function (dialog) {
var menuItems = []; var menuItems = [];
menuItems.push({ menuItems.push({
@ -178,12 +165,10 @@ function disconnectFromPlayer(currentDeviceName) {
dialog({ dialog({
buttons: menuItems, buttons: menuItems,
//positionTo: positionTo,
text: globalize.translate('ConfirmEndPlayerSession', currentDeviceName) text: globalize.translate('ConfirmEndPlayerSession', currentDeviceName)
}).then(function (id) { }).then(function (id) {
switch (id) { switch (id) {
case 'yes': case 'yes':
playbackManager.getCurrentPlayer().endSession(); playbackManager.getCurrentPlayer().endSession();
playbackManager.setDefaultPlayerActive(); playbackManager.setDefaultPlayerActive();
@ -195,17 +180,13 @@ function disconnectFromPlayer(currentDeviceName) {
break; break;
} }
}); });
}); });
} else { } else {
playbackManager.setDefaultPlayerActive(); playbackManager.setDefaultPlayerActive();
} }
} }
function showActivePlayerMenuInternal(dialogHelper, playerInfo) { function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
var html = ''; var html = '';
var dialogOptions = { var dialogOptions = {
@ -231,7 +212,6 @@ function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
html += '<div>'; html += '<div>';
if (playerInfo.supportedCommands.indexOf('DisplayContent') !== -1) { if (playerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
html += '<label class="checkboxContainer">'; html += '<label class="checkboxContainer">';
var checkedHtml = playbackManager.enableDisplayMirroring() ? ' checked' : ''; var checkedHtml = playbackManager.enableDisplayMirroring() ? ' checked' : '';
html += '<input type="checkbox" is="emby-checkbox" class="chkMirror"' + checkedHtml + '/>'; html += '<input type="checkbox" is="emby-checkbox" class="chkMirror"' + checkedHtml + '/>';
@ -290,7 +270,6 @@ function onMirrorChange() {
} }
document.addEventListener('viewshow', function (e) { document.addEventListener('viewshow', function (e) {
var state = e.detail.state || {}; var state = e.detail.state || {};
var item = state.item; var item = state.item;

18
src/components/playback/playersettingsmenu.js
View file

@ -5,7 +5,6 @@ import globalize from 'globalize';
import qualityoptions from 'qualityoptions'; import qualityoptions from 'qualityoptions';
function showQualityMenu(player, btn) { function showQualityMenu(player, btn) {
var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) { var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
return stream.Type === 'Video'; return stream.Type === 'Video';
})[0]; })[0];
@ -88,8 +87,6 @@ function showRepeatModeMenu(player, btn) {
function getQualitySecondaryText(player) { function getQualitySecondaryText(player) {
var state = playbackManager.getPlayerState(player); var state = playbackManager.getPlayerState(player);
var isAutoEnabled = playbackManager.enableAutomaticBitrateDetection(player);
var currentMaxBitrate = playbackManager.getMaxStreamingBitrate(player);
var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) { var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
return stream.Type === 'Video'; return stream.Type === 'Video';
@ -106,20 +103,6 @@ function getQualitySecondaryText(player) {
enableAuto: true enableAuto: true
}); });
var menuItems = options.map(function (o) {
var opt = {
name: o.name,
id: o.bitrate,
asideText: o.secondaryText
};
if (o.selected) {
opt.selected = true;
}
return opt;
});
var selectedOption = options.filter(function (o) { var selectedOption = options.filter(function (o) {
return o.selected; return o.selected;
}); });
@ -168,7 +151,6 @@ function showAspectRatioMenu(player, btn) {
function showWithUser(options, player, user) { function showWithUser(options, player, user) {
var supportedCommands = playbackManager.getSupportedCommands(player); var supportedCommands = playbackManager.getSupportedCommands(player);
var mediaType = options.mediaType;
var menuItems = []; var menuItems = [];
if (supportedCommands.indexOf('SetAspectRatio') !== -1) { if (supportedCommands.indexOf('SetAspectRatio') !== -1) {

1
src/components/playback/playmethodhelper.js
View file

@ -1,5 +1,4 @@
export function getDisplayPlayMethod(session) { export function getDisplayPlayMethod(session) {
if (!session.NowPlayingItem) { if (!session.NowPlayingItem) {
return null; return null;
} }

18
src/components/playback/playqueuemanager.js
View file

@ -3,16 +3,13 @@ define([], function () {
var currentId = 0; var currentId = 0;
function addUniquePlaylistItemId(item) { function addUniquePlaylistItemId(item) {
if (!item.PlaylistItemId) { if (!item.PlaylistItemId) {
item.PlaylistItemId = 'playlistItem' + currentId; item.PlaylistItemId = 'playlistItem' + currentId;
currentId++; currentId++;
} }
} }
function findPlaylistIndex(playlistItemId, list) { function findPlaylistIndex(playlistItemId, list) {
for (var i = 0, length = list.length; i < length; i++) { for (var i = 0, length = list.length; i < length; i++) {
if (list[i].PlaylistItemId === playlistItemId) { if (list[i].PlaylistItemId === playlistItemId) {
return i; return i;
@ -23,7 +20,6 @@ define([], function () {
} }
function PlayQueueManager() { function PlayQueueManager() {
this._sortedPlaylist = []; this._sortedPlaylist = [];
this._playlist = []; this._playlist = [];
this._repeatMode = 'RepeatNone'; this._repeatMode = 'RepeatNone';
@ -35,11 +31,9 @@ define([], function () {
}; };
PlayQueueManager.prototype.setPlaylist = function (items) { PlayQueueManager.prototype.setPlaylist = function (items) {
items = items.slice(0); items = items.slice(0);
for (var i = 0, length = items.length; i < length; i++) { for (var i = 0, length = items.length; i < length; i++) {
addUniquePlaylistItemId(items[i]); addUniquePlaylistItemId(items[i]);
} }
@ -49,9 +43,7 @@ define([], function () {
}; };
PlayQueueManager.prototype.queue = function (items) { PlayQueueManager.prototype.queue = function (items) {
for (var i = 0, length = items.length; i < length; i++) { for (var i = 0, length = items.length; i < length; i++) {
addUniquePlaylistItemId(items[i]); addUniquePlaylistItemId(items[i]);
this._playlist.push(items[i]); this._playlist.push(items[i]);
@ -105,7 +97,6 @@ define([], function () {
var length; var length;
for (i = 0, length = items.length; i < length; i++) { for (i = 0, length = items.length; i < length; i++) {
addUniquePlaylistItemId(items[i]); addUniquePlaylistItemId(items[i]);
} }
@ -121,12 +112,10 @@ define([], function () {
}; };
PlayQueueManager.prototype.getCurrentPlaylistIndex = function () { PlayQueueManager.prototype.getCurrentPlaylistIndex = function () {
return findPlaylistIndex(this.getCurrentPlaylistItemId(), this._playlist); return findPlaylistIndex(this.getCurrentPlaylistItemId(), this._playlist);
}; };
PlayQueueManager.prototype.getCurrentItem = function () { PlayQueueManager.prototype.getCurrentItem = function () {
var index = findPlaylistIndex(this.getCurrentPlaylistItemId(), this._playlist); var index = findPlaylistIndex(this.getCurrentPlaylistItemId(), this._playlist);
return index === -1 ? null : this._playlist[index]; return index === -1 ? null : this._playlist[index];
@ -137,12 +126,10 @@ define([], function () {
}; };
PlayQueueManager.prototype.setPlaylistState = function (playlistItemId, playlistIndex) { PlayQueueManager.prototype.setPlaylistState = function (playlistItemId, playlistIndex) {
this._currentPlaylistItemId = playlistItemId; this._currentPlaylistItemId = playlistItemId;
}; };
PlayQueueManager.prototype.setPlaylistIndex = function (playlistIndex) { PlayQueueManager.prototype.setPlaylistIndex = function (playlistIndex) {
if (playlistIndex < 0) { if (playlistIndex < 0) {
this.setPlaylistState(null); this.setPlaylistState(null);
} else { } else {
@ -151,7 +138,6 @@ define([], function () {
}; };
PlayQueueManager.prototype.removeFromPlaylist = function (playlistItemIds) { PlayQueueManager.prototype.removeFromPlaylist = function (playlistItemIds) {
if (this._playlist.length <= playlistItemIds.length) { if (this._playlist.length <= playlistItemIds.length) {
return { return {
result: 'empty' result: 'empty'
@ -180,7 +166,6 @@ define([], function () {
} }
PlayQueueManager.prototype.movePlaylistItem = function (playlistItemId, newIndex) { PlayQueueManager.prototype.movePlaylistItem = function (playlistItemId, newIndex) {
var playlist = this.getPlaylist(); var playlist = this.getPlaylist();
var oldIndex; var oldIndex;
@ -213,7 +198,6 @@ define([], function () {
}; };
PlayQueueManager.prototype.reset = function () { PlayQueueManager.prototype.reset = function () {
this._sortedPlaylist = []; this._sortedPlaylist = [];
this._playlist = []; this._playlist = [];
this._currentPlaylistItemId = null; this._currentPlaylistItemId = null;
@ -265,13 +249,11 @@ define([], function () {
}; };
PlayQueueManager.prototype.getNextItemInfo = function () { PlayQueueManager.prototype.getNextItemInfo = function () {
var newIndex; var newIndex;
var playlist = this.getPlaylist(); var playlist = this.getPlaylist();
var playlistLength = playlist.length; var playlistLength = playlist.length;
switch (this.getRepeatMode()) { switch (this.getRepeatMode()) {
case 'RepeatOne': case 'RepeatOne':
newIndex = this.getCurrentPlaylistIndex(); newIndex = this.getCurrentPlaylistIndex();
break; break;

9
src/components/playback/volumeosd.js
View file

@ -23,10 +23,8 @@ function getOsdElementHtml() {
} }
function ensureOsdElement() { function ensureOsdElement() {
var elem = osdElement; var elem = osdElement;
if (!elem) { if (!elem) {
enableAnimation = browser.supportsCssAnimation(); enableAnimation = browser.supportsCssAnimation();
elem = document.createElement('div'); elem = document.createElement('div');
@ -50,7 +48,6 @@ function onHideComplete() {
var hideTimeout; var hideTimeout;
function showOsd() { function showOsd() {
clearHideTimeout(); clearHideTimeout();
var elem = osdElement; var elem = osdElement;
@ -79,12 +76,10 @@ function clearHideTimeout() {
} }
function hideOsd() { function hideOsd() {
clearHideTimeout(); clearHideTimeout();
var elem = osdElement; var elem = osdElement;
if (elem) { if (elem) {
if (enableAnimation) { if (enableAnimation) {
// trigger reflow // trigger reflow
void elem.offsetWidth; void elem.offsetWidth;
@ -103,7 +98,6 @@ function hideOsd() {
} }
function updatePlayerVolumeState(isMuted, volume) { function updatePlayerVolumeState(isMuted, volume) {
if (iconElement) { if (iconElement) {
iconElement.classList.remove('volume_off', 'volume_up'); iconElement.classList.remove('volume_off', 'volume_up');
iconElement.classList.add(isMuted ? 'volume_off' : 'volume_up'); iconElement.classList.add(isMuted ? 'volume_off' : 'volume_up');
@ -114,7 +108,6 @@ function updatePlayerVolumeState(isMuted, volume) {
} }
function releaseCurrentPlayer() { function releaseCurrentPlayer() {
var player = currentPlayer; var player = currentPlayer;
if (player) { if (player) {
@ -125,7 +118,6 @@ function releaseCurrentPlayer() {
} }
function onVolumeChanged(e) { function onVolumeChanged(e) {
var player = this; var player = this;
ensureOsdElement(); ensureOsdElement();
@ -136,7 +128,6 @@ function onVolumeChanged(e) {
} }
function bindToPlayer(player) { function bindToPlayer(player) {
if (player === currentPlayer) { if (player === currentPlayer) {
return; return;
} }

157
src/components/playbackSettings/playbackSettings.js
View file

@ -1,39 +1,46 @@
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) { import browser from 'browser';
'use strict'; 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) { function fillSkipLengths(select) {
const options = [5, 10, 15, 20, 25, 30];
var options = [5, 10, 15, 20, 25, 30]; select.innerHTML = options.map(option => {
select.innerHTML = options.map(function (option) {
return { return {
name: globalize.translate('ValueSeconds', option), name: globalize.translate('ValueSeconds', option),
value: option * 1000 value: option * 1000
}; };
}).map(function (o) { }).map(o => {
return '<option value="' + o.value + '">' + o.name + '</option>'; return `<option value="${o.value}">${o.name}</option>`;
}).join(''); }).join('');
} }
function populateLanguages(select, languages) { function populateLanguages(select, languages) {
let html = '';
var html = ''; html += `<option value=''>${globalize.translate('AnyLanguage')}</option>`;
html += "<option value=''>" + globalize.translate('AnyLanguage') + '</option>'; for (let i = 0, length = languages.length; i < length; i++) {
const culture = languages[i];
for (var i = 0, length = languages.length; i < length; i++) { html += `<option value='${culture.ThreeLetterISOLanguageName}'>${culture.DisplayName}</option>`;
var culture = languages[i];
html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
} }
select.innerHTML = html; select.innerHTML = html;
} }
function setMaxBitrateIntoField(select, isInNetwork, mediatype) { function setMaxBitrateIntoField(select, isInNetwork, mediatype) {
const options = mediatype === 'Audio' ? qualityoptions.getAudioQualityOptions({
var options = mediatype === 'Audio' ? qualityoptions.getAudioQualityOptions({
currentMaxBitrate: appSettings.maxStreamingBitrate(isInNetwork, mediatype), currentMaxBitrate: appSettings.maxStreamingBitrate(isInNetwork, mediatype),
isAutomaticBitrateEnabled: appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype), isAutomaticBitrateEnabled: appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype),
@ -47,10 +54,9 @@ 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 // render empty string instead of 0 for the auto option
return '<option value="' + (i.bitrate || '') + '">' + i.name + '</option>'; return `<option value="${i.bitrate || ''}">${i.name}</option>`;
}).join(''); }).join('');
if (appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype)) { if (appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype)) {
@ -61,25 +67,22 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
} }
function fillChromecastQuality(select) { function fillChromecastQuality(select) {
const options = qualityoptions.getVideoQualityOptions({
var options = qualityoptions.getVideoQualityOptions({
currentMaxBitrate: appSettings.maxChromecastBitrate(), currentMaxBitrate: appSettings.maxChromecastBitrate(),
isAutomaticBitrateEnabled: !appSettings.maxChromecastBitrate(), isAutomaticBitrateEnabled: !appSettings.maxChromecastBitrate(),
enableAuto: true enableAuto: true
}); });
select.innerHTML = options.map(function (i) { select.innerHTML = options.map(i => {
// render empty string instead of 0 for the auto option // render empty string instead of 0 for the auto option
return '<option value="' + (i.bitrate || '') + '">' + i.name + '</option>'; return `<option value="${i.bitrate || ''}">${i.name}</option>`;
}).join(''); }).join('');
select.value = appSettings.maxChromecastBitrate() || ''; select.value = appSettings.maxChromecastBitrate() || '';
} }
function setMaxBitrateFromField(select, isInNetwork, mediatype, value) { function setMaxBitrateFromField(select, isInNetwork, mediatype) {
if (select.value) { if (select.value) {
appSettings.maxStreamingBitrate(isInNetwork, mediatype, select.value); appSettings.maxStreamingBitrate(isInNetwork, mediatype, select.value);
appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype, false); appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype, false);
@ -89,7 +92,6 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
} }
function showHideQualityFields(context, user, apiClient) { function showHideQualityFields(context, user, apiClient) {
if (user.Policy.EnableVideoPlaybackTranscoding) { if (user.Policy.EnableVideoPlaybackTranscoding) {
context.querySelector('.videoQualitySection').classList.remove('hide'); context.querySelector('.videoQualitySection').classList.remove('hide');
} else { } else {
@ -97,7 +99,6 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
} }
if (appHost.supports('multiserver')) { if (appHost.supports('multiserver')) {
context.querySelector('.fldVideoInNetworkQuality').classList.remove('hide'); context.querySelector('.fldVideoInNetworkQuality').classList.remove('hide');
context.querySelector('.fldVideoInternetQuality').classList.remove('hide'); context.querySelector('.fldVideoInternetQuality').classList.remove('hide');
@ -110,16 +111,13 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
return; return;
} }
apiClient.getEndpointInfo().then(function (endpointInfo) { apiClient.getEndpointInfo().then(endpointInfo => {
if (endpointInfo.IsInNetwork) { if (endpointInfo.IsInNetwork) {
context.querySelector('.fldVideoInNetworkQuality').classList.remove('hide'); context.querySelector('.fldVideoInNetworkQuality').classList.remove('hide');
context.querySelector('.fldVideoInternetQuality').classList.add('hide'); context.querySelector('.fldVideoInternetQuality').classList.add('hide');
context.querySelector('.musicQualitySection').classList.add('hide'); context.querySelector('.musicQualitySection').classList.add('hide');
} else { } else {
context.querySelector('.fldVideoInNetworkQuality').classList.add('hide'); context.querySelector('.fldVideoInNetworkQuality').classList.add('hide');
context.querySelector('.fldVideoInternetQuality').classList.remove('hide'); context.querySelector('.fldVideoInternetQuality').classList.remove('hide');
@ -133,8 +131,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
}); });
} }
function showOrHideEpisodesField(context, user, apiClient) { function showOrHideEpisodesField(context) {
if (browser.tizen || browser.web0s) { if (browser.tizen || browser.web0s) {
context.querySelector('.fldEpisodeAutoPlay').classList.add('hide'); context.querySelector('.fldEpisodeAutoPlay').classList.add('hide');
return; return;
@ -144,14 +141,12 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
} }
function loadForm(context, user, userSettings, apiClient) { function loadForm(context, user, userSettings, apiClient) {
const loggedInUserId = apiClient.getCurrentUserId();
var loggedInUserId = apiClient.getCurrentUserId(); const userId = user.Id;
var userId = user.Id;
showHideQualityFields(context, user, apiClient); showHideQualityFields(context, user, apiClient);
apiClient.getCultures().then(function (allCultures) { apiClient.getCultures().then(allCultures => {
populateLanguages(context.querySelector('#selectAudioLanguage'), allCultures); populateLanguages(context.querySelector('#selectAudioLanguage'), allCultures);
context.querySelector('#selectAudioLanguage', context).value = user.Configuration.AudioLanguagePreference || ''; context.querySelector('#selectAudioLanguage', context).value = user.Configuration.AudioLanguagePreference || '';
@ -159,8 +154,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
}); });
// hide cinema mode options if disabled at server level // 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) { if (cinemaConfig.EnableIntrosForMovies || cinemaConfig.EnableIntrosForEpisodes) {
context.querySelector('.cinemaModeOptions').classList.remove('hide'); context.querySelector('.cinemaModeOptions').classList.remove('hide');
} else { } else {
@ -204,24 +198,23 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
fillChromecastQuality(context.querySelector('.selectChromecastVideoQuality')); fillChromecastQuality(context.querySelector('.selectChromecastVideoQuality'));
var selectChromecastVersion = context.querySelector('.selectChromecastVersion'); const selectChromecastVersion = context.querySelector('.selectChromecastVersion');
selectChromecastVersion.value = userSettings.chromecastVersion(); selectChromecastVersion.value = userSettings.chromecastVersion();
var selectSkipForwardLength = context.querySelector('.selectSkipForwardLength'); const selectSkipForwardLength = context.querySelector('.selectSkipForwardLength');
fillSkipLengths(selectSkipForwardLength); fillSkipLengths(selectSkipForwardLength);
selectSkipForwardLength.value = userSettings.skipForwardLength(); selectSkipForwardLength.value = userSettings.skipForwardLength();
var selectSkipBackLength = context.querySelector('.selectSkipBackLength'); const selectSkipBackLength = context.querySelector('.selectSkipBackLength');
fillSkipLengths(selectSkipBackLength); fillSkipLengths(selectSkipBackLength);
selectSkipBackLength.value = userSettings.skipBackLength(); selectSkipBackLength.value = userSettings.skipBackLength();
showOrHideEpisodesField(context, user, apiClient); showOrHideEpisodesField(context);
loading.hide(); loading.hide();
} }
function saveUser(context, user, userSettingsInstance, apiClient) { function saveUser(context, user, userSettingsInstance, apiClient) {
appSettings.enableSystemExternalPlayers(context.querySelector('.chkExternalVideoPlayer').checked); appSettings.enableSystemExternalPlayers(context.querySelector('.chkExternalVideoPlayer').checked);
appSettings.maxChromecastBitrate(context.querySelector('.selectChromecastVideoQuality').value); appSettings.maxChromecastBitrate(context.querySelector('.selectChromecastVideoQuality').value);
@ -245,38 +238,32 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
} }
function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
loading.show(); loading.show();
apiClient.getUser(userId).then(function (user) { apiClient.getUser(userId).then(user => {
saveUser(context, user, userSettings, apiClient).then(() => {
saveUser(context, user, userSettings, apiClient).then(function () {
loading.hide(); loading.hide();
if (enableSaveConfirmation) { if (enableSaveConfirmation) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('SettingsSaved')); toast(globalize.translate('SettingsSaved'));
}); });
} }
events.trigger(instance, 'saved'); events.trigger(instance, 'saved');
}, () => {
}, function () {
loading.hide(); loading.hide();
}); });
}); });
} }
function onSubmit(e) { function onSubmit(e) {
const self = this;
const apiClient = connectionManager.getApiClient(self.options.serverId);
const userId = self.options.userId;
const userSettings = self.options.userSettings;
var self = this; userSettings.setUserInfo(userId, apiClient).then(() => {
var apiClient = connectionManager.getApiClient(self.options.serverId); const enableSaveConfirmation = self.options.enableSaveConfirmation;
var userId = self.options.userId;
var userSettings = self.options.userSettings;
userSettings.setUserInfo(userId, apiClient).then(function () {
var enableSaveConfirmation = self.options.enableSaveConfirmation;
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
}); });
@ -288,10 +275,8 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
} }
function embed(options, self) { function embed(options, self) {
return import('text!./playbackSettings.template.html').then(({default: template}) => {
require(['text!./playbackSettings.template.html'], function (template) { options.element.innerHTML = globalize.translateHtml(template, 'core');
options.element.innerHTML = globalize.translateDocument(template, 'core');
options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
@ -307,43 +292,39 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
}); });
} }
function PlaybackSettings(options) { class PlaybackSettings {
constructor(options) {
this.options = options; this.options = options;
embed(options, this); embed(options, this);
} }
PlaybackSettings.prototype.loadData = function () { loadData() {
const self = this;
var self = this; const context = self.options.element;
var context = self.options.element;
loading.show(); loading.show();
var userId = self.options.userId; const userId = self.options.userId;
var apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
var userSettings = self.options.userSettings; const userSettings = self.options.userSettings;
apiClient.getUser(userId).then(function (user) {
userSettings.setUserInfo(userId, apiClient).then(function () {
apiClient.getUser(userId).then(user => {
userSettings.setUserInfo(userId, apiClient).then(() => {
self.dataLoaded = true; self.dataLoaded = true;
loadForm(context, user, userSettings, apiClient); loadForm(context, user, userSettings, apiClient);
}); });
}); });
}; }
PlaybackSettings.prototype.submit = function () { submit() {
onSubmit.call(this); onSubmit.call(this);
}; }
PlaybackSettings.prototype.destroy = function () {
destroy() {
this.options = null; this.options = null;
}; }
}
return PlaybackSettings; /* eslint-enable indent */
}); export default PlaybackSettings;

177
src/components/playerstats/playerstats.js
View file

@ -1,9 +1,17 @@
define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlayManager', 'playMethodHelper', 'layoutManager', 'serverNotifications', 'paper-icon-button-light', 'css!./playerstats'], function (events, globalize, playbackManager, connectionManager, syncPlayManager, playMethodHelper, layoutManager, serverNotifications) { import events from 'events';
'use strict'; 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 'paper-icon-button-light';
import 'css!./playerstats';
/* eslint-disable indent */
function init(instance) { function init(instance) {
const parent = document.createElement('div');
var parent = document.createElement('div');
parent.classList.add('playerStats'); parent.classList.add('playerStats');
@ -13,7 +21,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
parent.classList.add('hide'); parent.classList.add('hide');
var button; let button;
if (layoutManager.tv) { if (layoutManager.tv) {
button = ''; button = '';
@ -21,7 +29,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
button = '<button type="button" is="paper-icon-button-light" class="playerStats-closeButton"><span class="material-icons close"></span></button>'; button = '<button type="button" is="paper-icon-button-light" class="playerStats-closeButton"><span class="material-icons close"></span></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 = '<div class="' + contentClass + '">' + button + '<div class="playerStats-stats"></div></div>'; parent.innerHTML = '<div class="' + contentClass + '">' + button + '<div class="playerStats-stats"></div></div>';
@ -41,12 +49,10 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
function renderStats(elem, categories) { function renderStats(elem, categories) {
elem.querySelector('.playerStats-stats').innerHTML = categories.map(function (category) { elem.querySelector('.playerStats-stats').innerHTML = categories.map(function (category) {
let categoryHtml = '';
var categoryHtml = ''; const stats = category.stats;
var stats = category.stats;
if (stats.length && category.name) { if (stats.length && category.name) {
categoryHtml += '<div class="playerStats-stat playerStats-stat-header">'; categoryHtml += '<div class="playerStats-stat playerStats-stat-header">';
@ -62,11 +68,10 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
categoryHtml += '</div>'; categoryHtml += '</div>';
} }
for (var i = 0, length = stats.length; i < length; i++) { for (let i = 0, length = stats.length; i < length; i++) {
categoryHtml += '<div class="playerStats-stat">'; categoryHtml += '<div class="playerStats-stat">';
var stat = stats[i]; const stat = stats[i];
categoryHtml += '<div class="playerStats-stat-label">'; categoryHtml += '<div class="playerStats-stat-label">';
categoryHtml += stat.label; categoryHtml += stat.label;
@ -80,49 +85,43 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
return categoryHtml; return categoryHtml;
}).join(''); }).join('');
} }
function getSession(instance, player) { function getSession(instance, player) {
const now = new Date().getTime();
var now = new Date().getTime();
if ((now - (instance.lastSessionTime || 0)) < 10000) { if ((now - (instance.lastSessionTime || 0)) < 10000) {
return Promise.resolve(instance.lastSession); return Promise.resolve(instance.lastSession);
} }
var apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId); const apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
return apiClient.getSessions({ return apiClient.getSessions({
deviceId: apiClient.deviceId() deviceId: apiClient.deviceId()
}).then(function (sessions) { }).then(function (sessions) {
instance.lastSession = sessions[0] || {}; instance.lastSession = sessions[0] || {};
instance.lastSessionTime = new Date().getTime(); instance.lastSessionTime = new Date().getTime();
return Promise.resolve(instance.lastSession); return Promise.resolve(instance.lastSession);
}, function () { }, function () {
return Promise.resolve({}); return Promise.resolve({});
}); });
} }
function translateReason(reason) { function translateReason(reason) {
return globalize.translate('' + reason); return globalize.translate('' + reason);
} }
function getTranscodingStats(session, player, displayPlayMethod) { function getTranscodingStats(session, player, displayPlayMethod) {
var sessionStats = []; const sessionStats = [];
var videoCodec; let videoCodec;
var audioCodec; let audioCodec;
var totalBitrate; let totalBitrate;
var audioChannels; let audioChannels;
if (session.TranscodingInfo) { if (session.TranscodingInfo) {
videoCodec = session.TranscodingInfo.VideoCodec; videoCodec = session.TranscodingInfo.VideoCodec;
audioCodec = session.TranscodingInfo.AudioCodec; audioCodec = session.TranscodingInfo.AudioCodec;
totalBitrate = session.TranscodingInfo.Bitrate; totalBitrate = session.TranscodingInfo.Bitrate;
@ -130,7 +129,6 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
if (videoCodec) { if (videoCodec) {
sessionStats.push({ sessionStats.push({
label: globalize.translate('LabelVideoCodec'), label: globalize.translate('LabelVideoCodec'),
value: session.TranscodingInfo.IsVideoDirect ? (videoCodec.toUpperCase() + ' (direct)') : videoCodec.toUpperCase() value: session.TranscodingInfo.IsVideoDirect ? (videoCodec.toUpperCase() + ' (direct)') : videoCodec.toUpperCase()
@ -138,45 +136,39 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
if (audioCodec) { if (audioCodec) {
sessionStats.push({ sessionStats.push({
label: globalize.translate('LabelAudioCodec'), label: globalize.translate('LabelAudioCodec'),
value: session.TranscodingInfo.IsAudioDirect ? (audioCodec.toUpperCase() + ' (direct)') : audioCodec.toUpperCase() value: session.TranscodingInfo.IsAudioDirect ? (audioCodec.toUpperCase() + ' (direct)') : audioCodec.toUpperCase()
}); });
} }
//if (audioChannels) { if (audioChannels) {
sessionStats.push({
// sessionStats.push({ label: globalize.translate('LabelAudioChannels'),
// label: 'Audio channels:', value: audioChannels
// value: audioChannels });
// }); }
//}
if (displayPlayMethod === 'Transcode') { if (displayPlayMethod === 'Transcode') {
if (totalBitrate) { if (totalBitrate) {
sessionStats.push({ sessionStats.push({
label: globalize.translate('LabelBitrate'), label: globalize.translate('LabelBitrate'),
value: getDisplayBitrate(totalBitrate) value: getDisplayBitrate(totalBitrate)
}); });
} }
if (session.TranscodingInfo.CompletionPercentage) { if (session.TranscodingInfo.CompletionPercentage) {
sessionStats.push({ sessionStats.push({
label: globalize.translate('LabelTranscodingProgress'), label: globalize.translate('LabelTranscodingProgress'),
value: session.TranscodingInfo.CompletionPercentage.toFixed(1) + '%' value: session.TranscodingInfo.CompletionPercentage.toFixed(1) + '%'
}); });
} }
if (session.TranscodingInfo.Framerate) { if (session.TranscodingInfo.Framerate) {
sessionStats.push({ sessionStats.push({
label: globalize.translate('LabelTranscodingFramerate'), label: globalize.translate('LabelTranscodingFramerate'),
value: session.TranscodingInfo.Framerate + ' fps' value: session.TranscodingInfo.Framerate + ' fps'
}); });
} }
if (session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length) { if (session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length) {
sessionStats.push({ sessionStats.push({
label: globalize.translate('LabelReasonForTranscoding'), label: globalize.translate('LabelReasonForTranscoding'),
value: session.TranscodingInfo.TranscodeReasons.map(translateReason).join('<br/>') value: session.TranscodingInfo.TranscodeReasons.map(translateReason).join('<br/>')
@ -188,7 +180,6 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
function getDisplayBitrate(bitrate) { function getDisplayBitrate(bitrate) {
if (bitrate > 1000000) { if (bitrate > 1000000) {
return (bitrate / 1000000).toFixed(1) + ' Mbps'; return (bitrate / 1000000).toFixed(1) + ' Mbps';
} else { } else {
@ -207,12 +198,11 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
function getMediaSourceStats(session, player, displayPlayMethod) { function getMediaSourceStats(session, player, displayPlayMethod) {
const sessionStats = [];
var sessionStats = []; const mediaSource = playbackManager.currentMediaSource(player) || {};
const totalBitrate = mediaSource.Bitrate;
var mediaSource = playbackManager.currentMediaSource(player) || {}; const mediaFileSize = mediaSource.Size;
var totalBitrate = mediaSource.Bitrate;
var mediaFileSize = mediaSource.Size;
if (mediaSource.Container) { if (mediaSource.Container) {
sessionStats.push({ sessionStats.push({
@ -229,33 +219,28 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
if (totalBitrate) { if (totalBitrate) {
sessionStats.push({ sessionStats.push({
label: globalize.translate('LabelBitrate'), label: globalize.translate('LabelBitrate'),
value: getDisplayBitrate(totalBitrate) value: getDisplayBitrate(totalBitrate)
}); });
} }
var mediaStreams = mediaSource.MediaStreams || []; const mediaStreams = mediaSource.MediaStreams || [];
var videoStream = mediaStreams.filter(function (s) { const videoStream = mediaStreams.filter(function (s) {
return s.Type === 'Video'; return s.Type === 'Video';
})[0] || {}; })[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; return s.Type === 'Audio' && s.Index === audioStreamIndex;
})[0] || {}; })[0] || {};
var audioCodec = audioStream.Codec; const audioCodec = audioStream.Codec;
var audioChannels = audioStream.Channels; const audioChannels = audioStream.Channels;
var videoInfos = []; const videoInfos = [];
if (videoCodec) { if (videoCodec) {
videoInfos.push(videoCodec.toUpperCase()); videoInfos.push(videoCodec.toUpperCase());
@ -279,7 +264,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
}); });
} }
var audioInfos = []; const audioInfos = [];
if (audioCodec) { if (audioCodec) {
audioInfos.push(audioCodec.toUpperCase()); audioInfos.push(audioCodec.toUpperCase());
@ -328,8 +313,8 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
function getSyncPlayStats() { function getSyncPlayStats() {
var syncStats = []; const syncStats = [];
var stats = syncPlayManager.getStats(); const stats = syncPlayManager.getStats();
syncStats.push({ syncStats.push({
label: globalize.translate('LabelSyncPlayTimeOffset'), label: globalize.translate('LabelSyncPlayTimeOffset'),
@ -350,19 +335,17 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
function getStats(instance, player) { function getStats(instance, player) {
const statsPromise = player.getStats ? player.getStats() : Promise.resolve({});
var statsPromise = player.getStats ? player.getStats() : Promise.resolve({}); const sessionPromise = getSession(instance, player);
var sessionPromise = getSession(instance, player);
return Promise.all([statsPromise, sessionPromise]).then(function (responses) { return Promise.all([statsPromise, sessionPromise]).then(function (responses) {
const playerStatsResult = responses[0];
const playerStats = playerStatsResult.categories || [];
const session = responses[1];
var playerStatsResult = responses[0]; const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
var playerStats = playerStatsResult.categories || [];
var session = responses[1];
var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); const baseCategory = {
var baseCategory = {
stats: [], stats: [],
name: 'Playback Info' name: 'Playback Info'
}; };
@ -377,13 +360,12 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
value: player.name value: player.name
}); });
var categories = []; const categories = [];
categories.push(baseCategory); categories.push(baseCategory);
for (var i = 0, length = playerStats.length; i < length; i++) { for (let i = 0, length = playerStats.length; i < length; i++) {
const category = playerStats[i];
var category = playerStats[i];
if (category.type === 'audio') { if (category.type === 'audio') {
category.name = 'Audio Info'; category.name = 'Audio Info';
} else if (category.type === 'video') { } else if (category.type === 'video') {
@ -393,7 +375,6 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
if (session.TranscodingInfo) { if (session.TranscodingInfo) {
categories.push({ categories.push({
stats: getTranscodingStats(session, player, displayPlayMethod), stats: getTranscodingStats(session, player, displayPlayMethod),
name: displayPlayMethod === 'Transcode' ? 'Transcoding Info' : 'Direct Stream Info' name: displayPlayMethod === 'Transcode' ? 'Transcoding Info' : 'Direct Stream Info'
@ -405,7 +386,8 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
name: 'Original Media Info' name: 'Original Media Info'
}); });
if (syncPlayManager.isSyncPlayEnabled()) { var apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
if (syncPlayManager.isSyncPlayEnabled() && apiClient.isMinServerVersion('10.6.0')) {
categories.push({ categories.push({
stats: getSyncPlayStats(), stats: getSyncPlayStats(),
name: 'SyncPlay Info' name: 'SyncPlay Info'
@ -417,8 +399,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
function renderPlayerStats(instance, player) { function renderPlayerStats(instance, player) {
const now = new Date().getTime();
var now = new Date().getTime();
if ((now - (instance.lastRender || 0)) < 700) { if ((now - (instance.lastRender || 0)) < 700) {
return; return;
@ -427,8 +408,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
instance.lastRender = now; instance.lastRender = now;
getStats(instance, player).then(function (stats) { getStats(instance, player).then(function (stats) {
const elem = instance.element;
var elem = instance.element;
if (!elem) { if (!elem) {
return; return;
} }
@ -438,8 +418,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
function bindEvents(instance, player) { function bindEvents(instance, player) {
const localOnTimeUpdate = function () {
var localOnTimeUpdate = function () {
renderPlayerStats(instance, player); renderPlayerStats(instance, player);
}; };
@ -448,16 +427,15 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
function unbindEvents(instance, player) { function unbindEvents(instance, player) {
const localOnTimeUpdate = instance.onTimeUpdate;
var localOnTimeUpdate = instance.onTimeUpdate;
if (localOnTimeUpdate) { if (localOnTimeUpdate) {
events.off(player, 'timeupdate', localOnTimeUpdate); events.off(player, 'timeupdate', localOnTimeUpdate);
} }
} }
function PlayerStats(options) { class PlayerStats {
constructor(options) {
this.options = options; this.options = options;
init(this); init(this);
@ -465,13 +443,12 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
this.enabled(true); this.enabled(true);
} }
PlayerStats.prototype.enabled = function (enabled) { enabled(enabled) {
if (enabled == null) { if (enabled == null) {
return this._enabled; return this._enabled;
} }
var options = this.options; const options = this.options;
if (!options) { if (!options) {
return; return;
@ -485,28 +462,28 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
this.element.classList.add('hide'); this.element.classList.add('hide');
unbindEvents(this, options.player); unbindEvents(this, options.player);
} }
}; }
PlayerStats.prototype.toggle = function () { toggle() {
this.enabled(!this.enabled()); this.enabled(!this.enabled());
}; }
PlayerStats.prototype.destroy = function () { destroy() {
const options = this.options;
var options = this.options;
if (options) { if (options) {
this.options = null; this.options = null;
unbindEvents(this, options.player); unbindEvents(this, options.player);
} }
var elem = this.element; const elem = this.element;
if (elem) { if (elem) {
elem.parentNode.removeChild(elem); elem.parentNode.removeChild(elem);
this.element = null; this.element = null;
} }
}; }
}
return PlayerStats; /* eslint-enable indent */
});
export default PlayerStats;

103
src/components/playlisteditor/playlisteditor.js
View file

@ -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) { import dom from 'dom';
'use strict'; 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) { function onSubmit(e) {
var panel = dom.parentWithClass(this, 'dialog'); const panel = dom.parentWithClass(this, 'dialog');
var playlistId = panel.querySelector('#selectPlaylistToAddTo').value; const playlistId = panel.querySelector('#selectPlaylistToAddTo').value;
var apiClient = connectionManager.getApiClient(currentServerId); const apiClient = connectionManager.getApiClient(currentServerId);
if (playlistId) { if (playlistId) {
userSettings.set('playlisteditor-lastplaylistid', playlistId); userSettings.set('playlisteditor-lastplaylistid', playlistId);
@ -23,7 +38,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
function createPlaylist(apiClient, dlg) { function createPlaylist(apiClient, dlg) {
loading.show(); loading.show();
var url = apiClient.getUrl('Playlists', { const url = apiClient.getUrl('Playlists', {
Name: dlg.querySelector('#txtNewPlaylistName').value, Name: dlg.querySelector('#txtNewPlaylistName').value,
Ids: dlg.querySelector('.fldSelectedItemIds').value || '', Ids: dlg.querySelector('.fldSelectedItemIds').value || '',
userId: apiClient.getCurrentUserId() userId: apiClient.getCurrentUserId()
@ -34,10 +49,10 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
type: 'POST', type: 'POST',
url: url, url: url,
dataType: 'json' dataType: 'json'
}).then(function (result) { }).then(result => {
loading.hide(); loading.hide();
var id = result.Id; const id = result.Id;
dlg.submitted = true; dlg.submitted = true;
dialogHelper.close(dlg); dialogHelper.close(dlg);
redirectToPlaylist(apiClient, id); redirectToPlaylist(apiClient, id);
@ -49,7 +64,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
} }
function addToPlaylist(apiClient, dlg, id) { function addToPlaylist(apiClient, dlg, id) {
var itemIds = dlg.querySelector('.fldSelectedItemIds').value || ''; const itemIds = dlg.querySelector('.fldSelectedItemIds').value || '';
if (id === 'queue') { if (id === 'queue') {
playbackManager.queue({ playbackManager.queue({
@ -63,7 +78,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
loading.show(); loading.show();
var url = apiClient.getUrl('Playlists/' + id + '/Items', { const url = apiClient.getUrl(`Playlists/${id}/Items`, {
Ids: itemIds, Ids: itemIds,
userId: apiClient.getCurrentUserId() userId: apiClient.getCurrentUserId()
}); });
@ -72,7 +87,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
type: 'POST', type: 'POST',
url: url url: url
}).then(function () { }).then(() => {
loading.hide(); loading.hide();
dlg.submitted = true; dlg.submitted = true;
@ -85,36 +100,36 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
} }
function populatePlaylists(editorOptions, panel) { function populatePlaylists(editorOptions, panel) {
var select = panel.querySelector('#selectPlaylistToAddTo'); const select = panel.querySelector('#selectPlaylistToAddTo');
loading.hide(); loading.hide();
panel.querySelector('.newPlaylistInfo').classList.add('hide'); panel.querySelector('.newPlaylistInfo').classList.add('hide');
var options = { const options = {
Recursive: true, Recursive: true,
IncludeItemTypes: 'Playlist', IncludeItemTypes: 'Playlist',
SortBy: 'SortName', SortBy: 'SortName',
EnableTotalRecordCount: false EnableTotalRecordCount: false
}; };
var apiClient = connectionManager.getApiClient(currentServerId); const apiClient = connectionManager.getApiClient(currentServerId);
apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) { apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => {
var html = ''; let html = '';
if (editorOptions.enableAddToPlayQueue !== false && playbackManager.isPlaying()) { if (editorOptions.enableAddToPlayQueue !== false && playbackManager.isPlaying()) {
html += '<option value="queue">' + globalize.translate('AddToPlayQueue') + '</option>'; html += `<option value="queue">${globalize.translate('AddToPlayQueue')}</option>`;
} }
html += '<option value="">' + globalize.translate('OptionNew') + '</option>'; html += `<option value="">${globalize.translate('OptionNew')}</option>`;
html += result.Items.map(function (i) { html += result.Items.map(i => {
return '<option value="' + i.Id + '">' + i.Name + '</option>'; return `<option value="${i.Id}">${i.Name}</option>`;
}); });
select.innerHTML = html; select.innerHTML = html;
var defaultValue = editorOptions.defaultValue; let defaultValue = editorOptions.defaultValue;
if (!defaultValue) { if (!defaultValue) {
defaultValue = userSettings.get('playlisteditor-lastplaylistid') || ''; defaultValue = userSettings.get('playlisteditor-lastplaylistid') || '';
} }
@ -132,29 +147,29 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
} }
function getEditorHtml(items) { function getEditorHtml(items) {
var html = ''; let html = '';
html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">'; html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">';
html += '<div class="dialogContentInner dialog-content-centered">'; html += '<div class="dialogContentInner dialog-content-centered">';
html += '<form style="margin:auto;">'; html += '<form style="margin:auto;">';
html += '<div class="fldSelectPlaylist selectContainer">'; html += '<div class="fldSelectPlaylist selectContainer">';
var autoFocus = items.length ? ' autofocus' : ''; let autoFocus = items.length ? ' autofocus' : '';
html += '<select is="emby-select" id="selectPlaylistToAddTo" label="' + globalize.translate('LabelPlaylist') + '"' + autoFocus + '></select>'; html += `<select is="emby-select" id="selectPlaylistToAddTo" label="${globalize.translate('LabelPlaylist')}"${autoFocus}></select>`;
html += '</div>'; html += '</div>';
html += '<div class="newPlaylistInfo">'; html += '<div class="newPlaylistInfo">';
html += '<div class="inputContainer">'; html += '<div class="inputContainer">';
autoFocus = items.length ? '' : ' autofocus'; autoFocus = items.length ? '' : ' autofocus';
html += '<input is="emby-input" type="text" id="txtNewPlaylistName" required="required" label="' + globalize.translate('LabelName') + '"' + autoFocus + ' />'; html += `<input is="emby-input" type="text" id="txtNewPlaylistName" required="required" label="${globalize.translate('LabelName')}"${autoFocus} />`;
html += '</div>'; html += '</div>';
// newPlaylistInfo // newPlaylistInfo
html += '</div>'; html += '</div>';
html += '<div class="formDialogFooter">'; html += '<div class="formDialogFooter">';
html += '<button is="emby-button" type="submit" class="raised btnSubmit block formDialogFooterItem button-submit">' + globalize.translate('Add') + '</button>'; html += `<button is="emby-button" type="submit" class="raised btnSubmit block formDialogFooterItem button-submit">${globalize.translate('Add')}</button>`;
html += '</div>'; html += '</div>';
html += '<input type="hidden" class="fldSelectedItemIds" />'; html += '<input type="hidden" class="fldSelectedItemIds" />';
@ -187,7 +202,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
} else { } else {
content.querySelector('.fldSelectPlaylist').classList.add('hide'); content.querySelector('.fldSelectPlaylist').classList.add('hide');
var selectPlaylistToAddTo = content.querySelector('#selectPlaylistToAddTo'); const selectPlaylistToAddTo = content.querySelector('#selectPlaylistToAddTo');
selectPlaylistToAddTo.innerHTML = ''; selectPlaylistToAddTo.innerHTML = '';
selectPlaylistToAddTo.value = ''; selectPlaylistToAddTo.value = '';
triggerChange(selectPlaylistToAddTo); triggerChange(selectPlaylistToAddTo);
@ -195,21 +210,18 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(scrollHelper => {
var fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
function PlaylistEditor() { export class showEditor {
constructor(options) {
} const items = options.items || {};
PlaylistEditor.prototype.show = function (options) {
var items = options.items || {};
currentServerId = options.serverId; currentServerId = options.serverId;
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -220,12 +232,12 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
var html = ''; let html = '';
var title = globalize.translate('HeaderAddToPlaylist'); const title = globalize.translate('HeaderAddToPlaylist');
html += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>'; html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
@ -241,7 +253,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
initEditor(dlg, options, items); initEditor(dlg, options, items);
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
@ -249,7 +261,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
centerFocus(dlg.querySelector('.formDialogContent'), false, true); centerFocus(dlg.querySelector('.formDialogContent'), false, true);
} }
return dialogHelper.open(dlg).then(function () { return dialogHelper.open(dlg).then(() => {
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.formDialogContent'), false, false); centerFocus(dlg.querySelector('.formDialogContent'), false, false);
} }
@ -260,7 +272,8 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
return Promise.reject(); return Promise.reject();
}); });
}; }
}
return PlaylistEditor; /* eslint-enable indent */
}); export default showEditor;

2
src/components/playmenu.js
View file

@ -4,7 +4,6 @@ import playbackManager from 'playbackManager';
import globalize from 'globalize'; import globalize from 'globalize';
export function show(options) { export function show(options) {
var item = options.item; var item = options.item;
var resumePositionTicks = item.UserData ? item.UserData.PlaybackPositionTicks : null; var resumePositionTicks = item.UserData ? item.UserData.PlaybackPositionTicks : null;
@ -38,7 +37,6 @@ export function show(options) {
}).then(function (id) { }).then(function (id) {
switch (id) { switch (id) {
case 'play': case 'play':
playbackManager.play({ playbackManager.play({
ids: [playableItemId], ids: [playableItemId],

8
src/components/pluginManager.js
View file

@ -13,7 +13,6 @@ define(['events', 'globalize'], function (events, globalize) {
} }
function definePluginRoute(pluginManager, route, plugin) { function definePluginRoute(pluginManager, route, plugin) {
route.contentPath = pluginManager.mapPath(plugin, route.path); route.contentPath = pluginManager.mapPath(plugin, route.path);
route.path = pluginManager.mapRoute(plugin, route); route.path = pluginManager.mapRoute(plugin, route);
@ -21,12 +20,10 @@ define(['events', 'globalize'], function (events, globalize) {
} }
function PluginManager() { function PluginManager() {
this.pluginsList = []; this.pluginsList = [];
} }
PluginManager.prototype.loadPlugin = function(pluginSpec) { PluginManager.prototype.loadPlugin = function(pluginSpec) {
var instance = this; var instance = this;
function registerPlugin(plugin) { function registerPlugin(plugin) {
@ -39,7 +36,6 @@ define(['events', 'globalize'], function (events, globalize) {
} }
if (plugin.type === 'skin') { if (plugin.type === 'skin') {
// translations won't be loaded for skins until needed // translations won't be loaded for skins until needed
return Promise.resolve(plugin); return Promise.resolve(plugin);
} else { } else {
@ -104,13 +100,11 @@ define(['events', 'globalize'], function (events, globalize) {
// name // name
// type (skin, screensaver, etc) // type (skin, screensaver, etc)
PluginManager.prototype.register = function (obj) { PluginManager.prototype.register = function (obj) {
this.pluginsList.push(obj); this.pluginsList.push(obj);
events.trigger(this, 'registered', [obj]); events.trigger(this, 'registered', [obj]);
}; };
PluginManager.prototype.ofType = function (type) { PluginManager.prototype.ofType = function (type) {
return this.pluginsList.filter(function (o) { return this.pluginsList.filter(function (o) {
return o.type === type; return o.type === type;
}); });
@ -121,7 +115,6 @@ define(['events', 'globalize'], function (events, globalize) {
}; };
PluginManager.prototype.mapRoute = function (plugin, route) { PluginManager.prototype.mapRoute = function (plugin, route) {
if (typeof plugin === 'string') { if (typeof plugin === 'string') {
plugin = this.pluginsList.filter(function (p) { plugin = this.pluginsList.filter(function (p) {
return (p.id || p.packageName) === plugin; return (p.id || p.packageName) === plugin;
@ -138,7 +131,6 @@ define(['events', 'globalize'], function (events, globalize) {
}; };
PluginManager.prototype.mapPath = function (plugin, path, addCacheParam) { PluginManager.prototype.mapPath = function (plugin, path, addCacheParam) {
if (typeof plugin === 'string') { if (typeof plugin === 'string') {
plugin = this.pluginsList.filter(function (p) { plugin = this.pluginsList.filter(function (p) {
return (p.id || p.packageName) === plugin; return (p.id || p.packageName) === plugin;

49
src/components/prompt/prompt.js
View file

@ -1,12 +1,23 @@
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) { import browser from 'browser';
'use strict'; 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) { function replaceAll(str, find, replace) {
return str.split(find).join(replace); return str.split(find).join(replace);
} }
function setInputProperties(dlg, options) { function setInputProperties(dlg, options) {
var txtInput = dlg.querySelector('#txtInput'); const txtInput = dlg.querySelector('#txtInput');
if (txtInput.label) { if (txtInput.label) {
txtInput.label(options.label || ''); txtInput.label(options.label || '');
@ -17,7 +28,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
} }
function showDialog(options, template) { function showDialog(options, template) {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -26,7 +37,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
@ -39,7 +50,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
dlg.classList.add('dialog-fullscreen-lowres'); dlg.classList.add('dialog-fullscreen-lowres');
} }
dlg.querySelector('.btnCancel').addEventListener('click', function (e) { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
@ -53,16 +64,15 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
setInputProperties(dlg, options); 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; submitValue = dlg.querySelector('#txtInput').value;
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
// Important, don't close the dialog until after the form has completed submitting, or it will cause an error in Chrome // 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); dialogHelper.close(dlg);
}, 300); }, 300);
@ -71,9 +81,9 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
dlg.querySelector('.submitText').innerHTML = options.confirmText || globalize.translate('ButtonOk'); 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) { if (layoutManager.tv) {
scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false); scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
} }
@ -87,7 +97,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
} }
if ((browser.tv || browser.xboxOne) && window.confirm) { if ((browser.tv || browser.xboxOne) && window.confirm) {
return function (options) { return options => {
if (typeof options === 'string') { if (typeof options === 'string') {
options = { options = {
label: '', label: '',
@ -95,8 +105,8 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
}; };
} }
var label = replaceAll(options.label || '', '<br/>', '\n'); const label = replaceAll(options.label || '', '<br/>', '\n');
var result = prompt(label, options.text || ''); const result = prompt(label, options.text || '');
if (result) { if (result) {
return Promise.resolve(result); return Promise.resolve(result);
@ -105,9 +115,9 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
} }
}; };
} else { } else {
return function (options) { return options => {
return new Promise(function (resolve, reject) { return new Promise((resolve, reject) => {
require(['text!./prompt.template.html'], function (template) { import('text!./prompt.template.html').then(({default: template}) => {
if (typeof options === 'string') { if (typeof options === 'string') {
options = { options = {
title: '', title: '',
@ -119,4 +129,5 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize',
}); });
}; };
} }
}); })();
/* eslint-enable indent */

10
src/components/qualityOptions.js
View file

@ -2,7 +2,6 @@ define(['globalize'], function (globalize) {
'use strict'; 'use strict';
function getVideoQualityOptions(options) { function getVideoQualityOptions(options) {
var maxStreamingBitrate = options.currentMaxBitrate; var maxStreamingBitrate = options.currentMaxBitrate;
var videoWidth = options.videoWidth; var videoWidth = options.videoWidth;
var videoHeight = options.videoHeight; var videoHeight = options.videoHeight;
@ -14,7 +13,6 @@ define(['globalize'], function (globalize) {
} }
var maxAllowedWidth = videoWidth || 4096; var maxAllowedWidth = videoWidth || 4096;
//var maxAllowedHeight = videoHeight || 2304;
var qualityOptions = []; var qualityOptions = [];
@ -26,7 +24,6 @@ define(['globalize'], function (globalize) {
// Some 1080- videos are reported as 1912? // Some 1080- videos are reported as 1912?
if (maxAllowedWidth >= 1900) { if (maxAllowedWidth >= 1900) {
qualityOptions.push({ name: '1080p - 60 Mbps', maxHeight: 1080, bitrate: 60000000 }); qualityOptions.push({ name: '1080p - 60 Mbps', maxHeight: 1080, bitrate: 60000000 });
qualityOptions.push({ name: '1080p - 50 Mbps', maxHeight: 1080, bitrate: 50000000 }); qualityOptions.push({ name: '1080p - 50 Mbps', maxHeight: 1080, bitrate: 50000000 });
qualityOptions.push({ name: '1080p - 40 Mbps', maxHeight: 1080, bitrate: 40000000 }); qualityOptions.push({ name: '1080p - 40 Mbps', maxHeight: 1080, bitrate: 40000000 });
@ -39,13 +36,11 @@ define(['globalize'], function (globalize) {
qualityOptions.push({ name: '1080p - 6 Mbps', maxHeight: 1080, bitrate: 6000001 }); qualityOptions.push({ name: '1080p - 6 Mbps', maxHeight: 1080, bitrate: 6000001 });
qualityOptions.push({ name: '1080p - 5 Mbps', maxHeight: 1080, bitrate: 5000001 }); qualityOptions.push({ name: '1080p - 5 Mbps', maxHeight: 1080, bitrate: 5000001 });
qualityOptions.push({ name: '1080p - 4 Mbps', maxHeight: 1080, bitrate: 4000002 }); qualityOptions.push({ name: '1080p - 4 Mbps', maxHeight: 1080, bitrate: 4000002 });
} else if (maxAllowedWidth >= 1260) { } else if (maxAllowedWidth >= 1260) {
qualityOptions.push({ name: '720p - 10 Mbps', maxHeight: 720, bitrate: 10000000 }); qualityOptions.push({ name: '720p - 10 Mbps', maxHeight: 720, bitrate: 10000000 });
qualityOptions.push({ name: '720p - 8 Mbps', maxHeight: 720, bitrate: 8000000 }); qualityOptions.push({ name: '720p - 8 Mbps', maxHeight: 720, bitrate: 8000000 });
qualityOptions.push({ name: '720p - 6 Mbps', maxHeight: 720, bitrate: 6000000 }); qualityOptions.push({ name: '720p - 6 Mbps', maxHeight: 720, bitrate: 6000000 });
qualityOptions.push({ name: '720p - 5 Mbps', maxHeight: 720, bitrate: 5000000 }); qualityOptions.push({ name: '720p - 5 Mbps', maxHeight: 720, bitrate: 5000000 });
} else if (maxAllowedWidth >= 620) { } else if (maxAllowedWidth >= 620) {
qualityOptions.push({ name: '480p - 4 Mbps', maxHeight: 480, bitrate: 4000001 }); qualityOptions.push({ name: '480p - 4 Mbps', maxHeight: 480, bitrate: 4000001 });
qualityOptions.push({ name: '480p - 3 Mbps', maxHeight: 480, bitrate: 3000001 }); qualityOptions.push({ name: '480p - 3 Mbps', maxHeight: 480, bitrate: 3000001 });
@ -84,7 +79,6 @@ define(['globalize'], function (globalize) {
if (maxStreamingBitrate) { if (maxStreamingBitrate) {
var selectedIndex = -1; var selectedIndex = -1;
for (var i = 0, length = qualityOptions.length; i < length; i++) { for (var i = 0, length = qualityOptions.length; i < length; i++) {
var option = qualityOptions[i]; var option = qualityOptions[i];
if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) { if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) {
@ -93,7 +87,6 @@ define(['globalize'], function (globalize) {
} }
if (selectedIndex === -1) { if (selectedIndex === -1) {
selectedIndex = qualityOptions.length - 1; selectedIndex = qualityOptions.length - 1;
} }
@ -110,7 +103,6 @@ define(['globalize'], function (globalize) {
} }
function getAudioQualityOptions(options) { function getAudioQualityOptions(options) {
var maxStreamingBitrate = options.currentMaxBitrate; var maxStreamingBitrate = options.currentMaxBitrate;
var qualityOptions = []; var qualityOptions = [];
@ -138,7 +130,6 @@ define(['globalize'], function (globalize) {
if (maxStreamingBitrate) { if (maxStreamingBitrate) {
var selectedIndex = -1; var selectedIndex = -1;
for (var i = 0, length = qualityOptions.length; i < length; i++) { for (var i = 0, length = qualityOptions.length; i < length; i++) {
var option = qualityOptions[i]; var option = qualityOptions[i];
if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) { if (selectedIndex === -1 && option.bitrate <= maxStreamingBitrate) {
@ -147,7 +138,6 @@ define(['globalize'], function (globalize) {
} }
if (selectedIndex === -1) { if (selectedIndex === -1) {
selectedIndex = qualityOptions.length - 1; selectedIndex = qualityOptions.length - 1;
} }

9
src/components/recordingcreator/recordingbutton.js
View file

@ -2,11 +2,9 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
'use strict'; 'use strict';
function onRecordingButtonClick(e) { function onRecordingButtonClick(e) {
var item = this.item; var item = this.item;
if (item) { if (item) {
var serverId = item.ServerId; var serverId = item.ServerId;
var programId = item.Id; var programId = item.Id;
var timerId = item.TimerId; var timerId = item.TimerId;
@ -50,23 +48,19 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
} }
function getIndicatorIcon(item) { function getIndicatorIcon(item) {
var status; var status;
if (item.Type === 'SeriesTimer') { if (item.Type === 'SeriesTimer') {
return 'fiber_smart_record'; return 'fiber_smart_record';
} else if (item.TimerId || item.SeriesTimerId) { } else if (item.TimerId || item.SeriesTimerId) {
status = item.Status || 'Cancelled'; status = item.Status || 'Cancelled';
} else if (item.Type === 'Timer') { } else if (item.Type === 'Timer') {
status = item.Status; status = item.Status;
} else { } else {
return 'fiber_manual_record'; return 'fiber_manual_record';
} }
if (item.SeriesTimerId) { if (item.SeriesTimerId) {
if (status !== 'Cancelled') { if (status !== 'Cancelled') {
return 'fiber_smart_record'; return 'fiber_smart_record';
} }
@ -76,7 +70,6 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
} }
RecordingButton.prototype.refresh = function (serverId, itemId) { RecordingButton.prototype.refresh = function (serverId, itemId) {
var apiClient = connectionManager.getApiClient(serverId); var apiClient = connectionManager.getApiClient(serverId);
var self = this; var self = this;
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
@ -85,7 +78,6 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
}; };
RecordingButton.prototype.refreshItem = function (item) { RecordingButton.prototype.refreshItem = function (item) {
var options = this.options; var options = this.options;
var button = options.button; var button = options.button;
this.item = item; this.item = item;
@ -99,7 +91,6 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
}; };
RecordingButton.prototype.destroy = function () { RecordingButton.prototype.destroy = function () {
var options = this.options; var options = this.options;
if (options) { if (options) {

20
src/components/recordingcreator/recordingcreator.js
View file

@ -6,27 +6,22 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
var currentRecordingFields; var currentRecordingFields;
function closeDialog() { function closeDialog() {
dialogHelper.close(currentDialog); dialogHelper.close(currentDialog);
} }
function init(context) { function init(context) {
context.querySelector('.btnPlay').addEventListener('click', function () { context.querySelector('.btnPlay').addEventListener('click', function () {
closeAction = 'play'; closeAction = 'play';
closeDialog(); closeDialog();
}); });
context.querySelector('.btnCancel').addEventListener('click', function () { context.querySelector('.btnCancel').addEventListener('click', function () {
closeAction = null; closeAction = null;
closeDialog(); closeDialog();
}); });
} }
function getImageUrl(item, apiClient, imageHeight) { function getImageUrl(item, apiClient, imageHeight) {
var imageTags = item.ImageTags || {}; var imageTags = item.ImageTags || {};
if (item.PrimaryImageTag) { if (item.PrimaryImageTag) {
@ -34,14 +29,12 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
if (imageTags.Primary) { if (imageTags.Primary) {
return apiClient.getScaledImageUrl(item.Id, { return apiClient.getScaledImageUrl(item.Id, {
type: 'Primary', type: 'Primary',
maxHeight: imageHeight, maxHeight: imageHeight,
tag: item.ImageTags.Primary tag: item.ImageTags.Primary
}); });
} else if (imageTags.Thumb) { } else if (imageTags.Thumb) {
return apiClient.getScaledImageUrl(item.Id, { return apiClient.getScaledImageUrl(item.Id, {
type: 'Thumb', type: 'Thumb',
maxHeight: imageHeight, maxHeight: imageHeight,
@ -53,7 +46,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) { function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
if (!refreshRecordingStateOnly) { if (!refreshRecordingStateOnly) {
var imgUrl = getImageUrl(program, apiClient, 200); var imgUrl = getImageUrl(program, apiClient, 200);
var imageContainer = context.querySelector('.recordingDialog-imageContainer'); var imageContainer = context.querySelector('.recordingDialog-imageContainer');
@ -91,7 +83,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function reload(context, programId, serverId, refreshRecordingStateOnly) { function reload(context, programId, serverId, refreshRecordingStateOnly) {
loading.show(); loading.show();
var apiClient = connectionManager.getApiClient(serverId); var apiClient = connectionManager.getApiClient(serverId);
@ -100,7 +91,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
var promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()); var promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
Promise.all([promise1, promise2]).then(function (responses) { Promise.all([promise1, promise2]).then(function (responses) {
var defaults = responses[0]; var defaults = responses[0];
var program = responses[1]; var program = responses[1];
@ -109,15 +99,11 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function executeCloseAction(action, programId, serverId) { function executeCloseAction(action, programId, serverId) {
if (action === 'play') { if (action === 'play') {
require(['playbackManager'], function (playbackManager) { require(['playbackManager'], function (playbackManager) {
var apiClient = connectionManager.getApiClient(serverId); var apiClient = connectionManager.getApiClient(serverId);
apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) { apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
playbackManager.play({ playbackManager.play({
ids: [item.ChannelId], ids: [item.ChannelId],
serverId: serverId serverId: serverId
@ -129,15 +115,12 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function showEditor(itemId, serverId) { function showEditor(itemId, serverId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
closeAction = null; closeAction = null;
loading.show(); loading.show();
require(['text!./recordingcreator.template.html'], function (template) { require(['text!./recordingcreator.template.html'], function (template) {
var dialogOptions = { var dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -156,7 +139,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
var html = ''; var html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -167,7 +150,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
dlg.addEventListener('close', function () { dlg.addEventListener('close', function () {
events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged); events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged);
executeCloseAction(closeAction, itemId, serverId); executeCloseAction(closeAction, itemId, serverId);

19
src/components/recordingcreator/recordingeditor.js
View file

@ -8,20 +8,14 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
var currentResolve; var currentResolve;
function deleteTimer(apiClient, timerId) { function deleteTimer(apiClient, timerId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['recordingHelper'], function (recordingHelper) { require(['recordingHelper'], function (recordingHelper) {
recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject); recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
}); });
}); });
} }
function renderTimer(context, item, apiClient) { function renderTimer(context, item, apiClient) {
var program = item.ProgramInfo || {};
context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60; context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60; context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
@ -29,14 +23,12 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function closeDialog(isDeleted) { function closeDialog(isDeleted) {
recordingDeleted = isDeleted; recordingDeleted = isDeleted;
dialogHelper.close(currentDialog); dialogHelper.close(currentDialog);
} }
function onSubmit(e) { function onSubmit(e) {
var form = this; var form = this;
var apiClient = connectionManager.getApiClient(currentServerId); var apiClient = connectionManager.getApiClient(currentServerId);
@ -54,14 +46,11 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function init(context) { function init(context) {
context.querySelector('.btnCancel').addEventListener('click', function () { context.querySelector('.btnCancel').addEventListener('click', function () {
closeDialog(false); closeDialog(false);
}); });
context.querySelector('.btnCancelRecording').addEventListener('click', function () { context.querySelector('.btnCancelRecording').addEventListener('click', function () {
var apiClient = connectionManager.getApiClient(currentServerId); var apiClient = connectionManager.getApiClient(currentServerId);
deleteTimer(apiClient, currentItemId).then(function () { deleteTimer(apiClient, currentItemId).then(function () {
closeDialog(true); closeDialog(true);
@ -72,22 +61,18 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function reload(context, id) { function reload(context, id) {
loading.show(); loading.show();
currentItemId = id; currentItemId = id;
var apiClient = connectionManager.getApiClient(currentServerId); var apiClient = connectionManager.getApiClient(currentServerId);
apiClient.getLiveTvTimer(id).then(function (result) { apiClient.getLiveTvTimer(id).then(function (result) {
renderTimer(context, result, apiClient); renderTimer(context, result, apiClient);
loading.hide(); loading.hide();
}); });
} }
function showEditor(itemId, serverId, options) { function showEditor(itemId, serverId, options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
recordingDeleted = false; recordingDeleted = false;
currentServerId = serverId; currentServerId = serverId;
loading.show(); loading.show();
@ -116,7 +101,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
var html = ''; var html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -127,14 +112,12 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
currentDialog = dlg; currentDialog = dlg;
dlg.addEventListener('closing', function () { dlg.addEventListener('closing', function () {
if (!recordingDeleted) { if (!recordingDeleted) {
dlg.querySelector('.btnSubmit').click(); dlg.querySelector('.btnSubmit').click();
} }
}); });
dlg.addEventListener('close', function () { dlg.addEventListener('close', function () {
if (recordingDeleted) { if (recordingDeleted) {
resolve({ resolve({
updated: true, updated: true,

7
src/components/recordingcreator/recordingfields.js
View file

@ -34,7 +34,6 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
} }
function fetchData(instance) { function fetchData(instance) {
var options = instance.options; var options = instance.options;
var apiClient = connectionManager.getApiClient(options.serverId); var apiClient = connectionManager.getApiClient(options.serverId);
@ -121,7 +120,6 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
} }
function onManageSeriesRecordingClick(e) { function onManageSeriesRecordingClick(e) {
var options = this.options; var options = this.options;
if (!this.SeriesTimerId) { if (!this.SeriesTimerId) {
@ -131,7 +129,6 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
var self = this; var self = this;
require(['seriesRecordingEditor'], function (seriesRecordingEditor) { require(['seriesRecordingEditor'], function (seriesRecordingEditor) {
seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, { seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
enableCancel: false enableCancel: false
@ -143,7 +140,6 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
} }
function onRecordChange(e) { function onRecordChange(e) {
this.changed = true; this.changed = true;
var self = this; var self = this;
@ -183,7 +179,6 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
} }
function onRecordSeriesChange(e) { function onRecordSeriesChange(e) {
this.changed = true; this.changed = true;
var self = this; var self = this;
@ -219,7 +214,7 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
require(['text!./recordingfields.template.html'], function (template) { require(['text!./recordingfields.template.html'], function (template) {
var options = self.options; var options = self.options;
var context = options.parent; 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('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self));
context.querySelector('.seriesRecordingButton').addEventListener('click', onRecordSeriesChange.bind(self)); context.querySelector('.seriesRecordingButton').addEventListener('click', onRecordSeriesChange.bind(self));

29
src/components/recordingcreator/recordinghelper.js
View file

@ -2,17 +2,13 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
'use strict'; 'use strict';
function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCancellation) { function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCancellation) {
loading.show(); loading.show();
return apiClient.getItem(apiClient.getCurrentUserId(), programId).then(function (item) { return apiClient.getItem(apiClient.getCurrentUserId(), programId).then(function (item) {
if (item.IsSeries) { if (item.IsSeries) {
// create series // create series
return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (timerDefaults) { return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (timerDefaults) {
return apiClient.createLiveTvSeriesTimer(timerDefaults).then(function () { return apiClient.createLiveTvSeriesTimer(timerDefaults).then(function () {
loading.hide(); loading.hide();
sendToast(globalize.translate('SeriesRecordingScheduled')); sendToast(globalize.translate('SeriesRecordingScheduled'));
}); });
@ -29,12 +25,9 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
} }
function cancelTimerWithConfirmation(timerId, serverId) { function cancelTimerWithConfirmation(timerId, serverId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['confirm'], function (confirm) { require(['confirm'], function (confirm) {
confirm.default({
confirm({
text: globalize.translate('MessageConfirmRecordingCancellation'), text: globalize.translate('MessageConfirmRecordingCancellation'),
primary: 'delete', primary: 'delete',
@ -42,24 +35,19 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
cancelText: globalize.translate('HeaderKeepRecording') cancelText: globalize.translate('HeaderKeepRecording')
}).then(function () { }).then(function () {
loading.show(); loading.show();
var apiClient = connectionManager.getApiClient(serverId); var apiClient = connectionManager.getApiClient(serverId);
cancelTimer(apiClient, timerId, true).then(resolve, reject); cancelTimer(apiClient, timerId, true).then(resolve, reject);
}, reject); }, reject);
}); });
}); });
} }
function cancelSeriesTimerWithConfirmation(timerId, serverId) { function cancelSeriesTimerWithConfirmation(timerId, serverId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['confirm'], function (confirm) { require(['confirm'], function (confirm) {
confirm.default({
confirm({
text: globalize.translate('MessageConfirmRecordingCancellation'), text: globalize.translate('MessageConfirmRecordingCancellation'),
primary: 'delete', primary: 'delete',
@ -67,12 +55,10 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
cancelText: globalize.translate('HeaderKeepSeries') cancelText: globalize.translate('HeaderKeepSeries')
}).then(function () { }).then(function () {
loading.show(); loading.show();
var apiClient = connectionManager.getApiClient(serverId); var apiClient = connectionManager.getApiClient(serverId);
apiClient.cancelLiveTvSeriesTimer(timerId).then(function () { apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
require(['toast'], function (toast) { require(['toast'], function (toast) {
toast(globalize.translate('SeriesCancelled')); toast(globalize.translate('SeriesCancelled'));
}); });
@ -80,7 +66,6 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
loading.hide(); loading.hide();
resolve(); resolve();
}, reject); }, reject);
}, reject); }, reject);
}); });
}); });
@ -89,7 +74,6 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
function cancelTimer(apiClient, timerId, hideLoading) { function cancelTimer(apiClient, timerId, hideLoading) {
loading.show(); loading.show();
return apiClient.cancelLiveTvTimer(timerId).then(function () { return apiClient.cancelLiveTvTimer(timerId).then(function () {
if (hideLoading !== false) { if (hideLoading !== false) {
loading.hide(); loading.hide();
sendToast(globalize.translate('RecordingCancelled')); sendToast(globalize.translate('RecordingCancelled'));
@ -98,16 +82,13 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
} }
function createRecording(apiClient, programId, isSeries) { function createRecording(apiClient, programId, isSeries) {
loading.show(); loading.show();
return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) { return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) {
var promise = isSeries ? var promise = isSeries ?
apiClient.createLiveTvSeriesTimer(item) : apiClient.createLiveTvSeriesTimer(item) :
apiClient.createLiveTvTimer(item); apiClient.createLiveTvTimer(item);
return promise.then(function () { return promise.then(function () {
loading.hide(); loading.hide();
sendToast(globalize.translate('RecordingScheduled')); sendToast(globalize.translate('RecordingScheduled'));
}); });
@ -122,9 +103,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) { function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['dialog'], function (dialog) { require(['dialog'], function (dialog) {
var items = []; var items = [];
items.push({ items.push({
@ -159,7 +138,6 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
buttons: items buttons: items
}).then(function (result) { }).then(function (result) {
var apiClient = connectionManager.getApiClient(serverId); var apiClient = connectionManager.getApiClient(serverId);
if (result === 'canceltimer') { if (result === 'canceltimer') {
@ -167,11 +145,9 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
cancelTimer(apiClient, timerId, true).then(resolve, reject); cancelTimer(apiClient, timerId, true).then(resolve, reject);
} else if (result === 'cancelseriestimer') { } else if (result === 'cancelseriestimer') {
loading.show(); loading.show();
apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () { apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () {
require(['toast'], function (toast) { require(['toast'], function (toast) {
toast(globalize.translate('SeriesCancelled')); toast(globalize.translate('SeriesCancelled'));
}); });
@ -182,7 +158,6 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
} else { } else {
resolve(); resolve();
} }
}, reject); }, reject);
}); });
}); });

28
src/components/recordingcreator/seriesrecordingeditor.js
View file

@ -8,20 +8,14 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
var currentServerId; var currentServerId;
function deleteTimer(apiClient, timerId) { function deleteTimer(apiClient, timerId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['recordingHelper'], function (recordingHelper) { require(['recordingHelper'], function (recordingHelper) {
recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject); recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
}); });
}); });
} }
function renderTimer(context, item, apiClient) { function renderTimer(context, item, apiClient) {
var program = item.ProgramInfo || {};
context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60; context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60; context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
@ -44,7 +38,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function closeDialog(isDeleted) { function closeDialog(isDeleted) {
recordingUpdated = true; recordingUpdated = true;
recordingDeleted = isDeleted; recordingDeleted = isDeleted;
@ -52,13 +45,11 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function onSubmit(e) { function onSubmit(e) {
var form = this; var form = this;
var apiClient = connectionManager.getApiClient(currentServerId); var apiClient = connectionManager.getApiClient(currentServerId);
apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) { apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) {
item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60; item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60; item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60;
item.RecordAnyChannel = form.querySelector('.selectChannels').value === 'all'; item.RecordAnyChannel = form.querySelector('.selectChannels').value === 'all';
@ -77,16 +68,13 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function init(context) { function init(context) {
fillKeepUpTo(context); fillKeepUpTo(context);
context.querySelector('.btnCancel').addEventListener('click', function () { context.querySelector('.btnCancel').addEventListener('click', function () {
closeDialog(false); closeDialog(false);
}); });
context.querySelector('.btnCancelRecording').addEventListener('click', function () { context.querySelector('.btnCancelRecording').addEventListener('click', function () {
var apiClient = connectionManager.getApiClient(currentServerId); var apiClient = connectionManager.getApiClient(currentServerId);
deleteTimer(apiClient, currentItemId).then(function () { deleteTimer(apiClient, currentItemId).then(function () {
closeDialog(true); closeDialog(true);
@ -97,7 +85,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function reload(context, id) { function reload(context, id) {
var apiClient = connectionManager.getApiClient(currentServerId); var apiClient = connectionManager.getApiClient(currentServerId);
loading.show(); loading.show();
@ -105,12 +92,10 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
currentItemId = id; currentItemId = id;
apiClient.getLiveTvSeriesTimer(id).then(function (result) { apiClient.getLiveTvSeriesTimer(id).then(function (result) {
renderTimer(context, result, apiClient); renderTimer(context, result, apiClient);
loading.hide(); loading.hide();
}); });
} else if (id) { } else if (id) {
currentItemId = id.Id; currentItemId = id.Id;
renderTimer(context, id, apiClient); renderTimer(context, id, apiClient);
@ -119,11 +104,9 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function fillKeepUpTo(context) { function fillKeepUpTo(context) {
var html = ''; var html = '';
for (var i = 0; i <= 50; i++) { for (var i = 0; i <= 50; i++) {
var text; var text;
if (i === 0) { if (i === 0) {
@ -145,7 +128,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function embed(itemId, serverId, options) { function embed(itemId, serverId, options) {
recordingUpdated = false; recordingUpdated = false;
recordingDeleted = false; recordingDeleted = false;
currentServerId = serverId; currentServerId = serverId;
@ -153,7 +135,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
options = options || {}; options = options || {};
require(['text!./seriesrecordingeditor.template.html'], function (template) { require(['text!./seriesrecordingeditor.template.html'], function (template) {
var dialogOptions = { var dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -168,7 +149,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
var dlg = options.context; var dlg = options.context;
dlg.classList.add('hide'); dlg.classList.add('hide');
dlg.innerHTML = globalize.translateDocument(template, 'core'); dlg.innerHTML = globalize.translateHtml(template, 'core');
dlg.querySelector('.formDialogHeader').classList.add('hide'); dlg.querySelector('.formDialogHeader').classList.add('hide');
dlg.querySelector('.formDialogFooter').classList.add('hide'); dlg.querySelector('.formDialogFooter').classList.add('hide');
@ -188,9 +169,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
function showEditor(itemId, serverId, options) { function showEditor(itemId, serverId, options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
recordingUpdated = false; recordingUpdated = false;
recordingDeleted = false; recordingDeleted = false;
currentServerId = serverId; currentServerId = serverId;
@ -198,7 +177,6 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
options = options || {}; options = options || {};
require(['text!./seriesrecordingeditor.template.html'], function (template) { require(['text!./seriesrecordingeditor.template.html'], function (template) {
var dialogOptions = { var dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -221,7 +199,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
var html = ''; var html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -232,14 +210,12 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
currentDialog = dlg; currentDialog = dlg;
dlg.addEventListener('closing', function () { dlg.addEventListener('closing', function () {
if (!recordingDeleted) { if (!recordingDeleted) {
this.querySelector('.btnSubmit').click(); this.querySelector('.btnSubmit').click();
} }
}); });
dlg.addEventListener('close', function () { dlg.addEventListener('close', function () {
if (recordingUpdated) { if (recordingUpdated) {
resolve({ resolve({
updated: true, updated: true,

6
src/components/refreshdialog/refreshdialog.js
View file

@ -2,7 +2,6 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
'use strict'; 'use strict';
function getEditorHtml() { function getEditorHtml() {
var html = ''; var html = '';
html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">'; html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">';
@ -48,7 +47,6 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
} }
function onSubmit(e) { function onSubmit(e) {
loading.show(); loading.show();
var instance = this; var instance = this;
@ -90,7 +88,6 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
} }
RefreshDialog.prototype.show = function () { RefreshDialog.prototype.show = function () {
var dialogOptions = { var dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -124,7 +121,6 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
dlg.querySelector('form').addEventListener('submit', onSubmit.bind(this)); dlg.querySelector('form').addEventListener('submit', onSubmit.bind(this));
dlg.querySelector('#selectMetadataRefreshMode').addEventListener('change', function () { dlg.querySelector('#selectMetadataRefreshMode').addEventListener('change', function () {
if (this.value === 'scan') { if (this.value === 'scan') {
dlg.querySelector('.fldReplaceExistingImages').classList.add('hide'); dlg.querySelector('.fldReplaceExistingImages').classList.add('hide');
} else { } else {
@ -139,7 +135,6 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
dlg.querySelector('#selectMetadataRefreshMode').dispatchEvent(new CustomEvent('change')); dlg.querySelector('#selectMetadataRefreshMode').dispatchEvent(new CustomEvent('change'));
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
@ -148,7 +143,6 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
} }
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.formDialogContent'), false, false); centerFocus(dlg.querySelector('.formDialogContent'), false, false);
} }

Some files were not shown because too many files have changed in this diff Show more