diff --git a/.ci/azure-pipelines-package.yml b/.ci/azure-pipelines-package.yml index 2249bd20eb..bb2a09f176 100644 --- a/.ci/azure-pipelines-package.yml +++ b/.ci/azure-pipelines-package.yml @@ -36,6 +36,14 @@ jobs: targetPath: '$(Build.SourcesDirectory)/deployment/dist' artifactName: 'jellyfin-web-$(BuildConfiguration)' + - task: SSH@0 + displayName: 'Create target directory on repository server' + condition: or(startsWith(variables['Build.SourceBranch'], 'refs/tags'), startsWith(variables['Build.SourceBranch'], 'refs/heads/master')) + inputs: + sshEndpoint: repository + runOptions: 'inline' + inline: 'mkdir -p /srv/repository/incoming/azure/$(Build.BuildNumber)/$(BuildConfiguration)' + - task: CopyFilesOverSSH@0 displayName: 'Upload artifacts to repository server' condition: or(startsWith(variables['Build.SourceBranch'], 'refs/tags'), startsWith(variables['Build.SourceBranch'], 'refs/heads/master')) @@ -51,7 +59,15 @@ jobs: pool: vmImage: 'ubuntu-latest' + variables: + - name: JellyfinVersion + value: 0.0.0 + steps: + - script: echo "##vso[task.setvariable variable=JellyfinVersion]$( awk -F '/' '{ print $NF }' <<<'$(Build.SourceBranch)' | sed 's/^v//' )" + displayName: Set release version (stable) + condition: startsWith(variables['Build.SourceBranch'], 'refs/tags') + - task: Docker@2 displayName: 'Push Unstable Image' condition: startsWith(variables['Build.SourceBranch'], 'refs/heads/master') @@ -76,7 +92,7 @@ jobs: containerRegistry: Docker Hub tags: | stable-$(Build.BuildNumber) - stable + $(JellyfinVersion) - job: CollectArtifacts displayName: 'Collect Artifacts' diff --git a/.editorconfig b/.editorconfig index 92cf9dc590..84ba694073 100644 --- a/.editorconfig +++ b/.editorconfig @@ -8,5 +8,5 @@ trim_trailing_whitespace = true insert_final_newline = true end_of_line = lf -[json] +[*.json] indent_size = 2 diff --git a/.eslintignore b/.eslintignore index 8e3aee83fb..74b18ddcf6 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,4 +2,3 @@ node_modules dist .idea .vscode -src/libraries diff --git a/.eslintrc.js b/.eslintrc.js index ab53f0f03d..dc8729fb2a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,6 +1,9 @@ +const restrictedGlobals = require('confusing-browser-globals'); + module.exports = { root: true, plugins: [ + '@babel', 'promise', 'import', 'eslint-comments' @@ -28,7 +31,7 @@ module.exports = { ], rules: { 'block-spacing': ['error'], - 'brace-style': ['error'], + 'brace-style': ['error', '1tbs', { 'allowSingleLine': true }], 'comma-dangle': ['error', 'never'], 'comma-spacing': ['error'], 'eol-last': ['error'], @@ -38,19 +41,24 @@ module.exports = { 'no-floating-decimal': ['error'], 'no-multi-spaces': ['error'], 'no-multiple-empty-lines': ['error', { 'max': 1 }], + 'no-restricted-globals': ['error'].concat(restrictedGlobals), 'no-trailing-spaces': ['error'], + '@babel/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }], 'one-var': ['error', 'never'], + 'padded-blocks': ['error', 'never'], + 'prefer-const': ['error', {'destructuring': 'all'}], 'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }], - 'semi': ['error'], + '@babel/semi': ['error'], 'space-before-blocks': ['error'], - 'space-infix-ops': 'error' + 'space-infix-ops': 'error', + 'yoda': 'error' }, overrides: [ { files: [ './src/**/*.js' ], - parser: 'babel-eslint', + parser: '@babel/eslint-parser', env: { node: false, amd: true, @@ -75,7 +83,6 @@ module.exports = { 'ApiClient': 'writable', 'AppInfo': 'writable', 'chrome': 'writable', - 'ConnectionManager': 'writable', 'DlnaProfilePage': 'writable', 'Dashboard': 'writable', 'DashboardPage': 'writable', @@ -98,9 +105,9 @@ module.exports = { }, rules: { // TODO: Fix warnings and remove these rules - 'no-redeclare': ['warn'], - 'no-unused-vars': ['warn'], - 'no-useless-escape': ['warn'], + 'no-redeclare': ['off'], + 'no-useless-escape': ['off'], + 'no-unused-vars': ['off'], // TODO: Remove after ES6 migration is complete 'import/no-unresolved': ['off'] }, @@ -193,4 +200,4 @@ module.exports = { } } ] -} +}; diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index a35eb9981f..186dbcd12c 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,4 +1,6 @@ .ci @dkanada @EraYaN .github @jellyfin/core -build.sh @joshuaboniface +fedora @joshuaboniface +debian @joshuaboniface +.copr @joshuaboniface deployment @joshuaboniface diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/1-bug-report.md similarity index 67% rename from .github/ISSUE_TEMPLATE/bug_report.md rename to .github/ISSUE_TEMPLATE/1-bug-report.md index 137a689e8b..15efff9954 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/1-bug-report.md @@ -1,23 +1,20 @@ --- -name: Bug report -about: Create a bug report -title: '' +name: Bug Report +about: You have noticed a general issue or regression, and would like to report it labels: bug -assignees: '' - --- -**Describe the bug** +**Describe The Bug** -**To Reproduce** +**Steps To Reproduce** 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error -**Expected behavior** +**Expected Behavior** **Logs** @@ -27,9 +24,9 @@ assignees: '' **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] - - Jellyfin Version: [e.g. 10.0.1] + - Jellyfin Version: [e.g. 10.6.0] -**Additional context** +**Additional Context** diff --git a/.github/ISSUE_TEMPLATE/2-playback-issue.md b/.github/ISSUE_TEMPLATE/2-playback-issue.md new file mode 100644 index 0000000000..bed7315abb --- /dev/null +++ b/.github/ISSUE_TEMPLATE/2-playback-issue.md @@ -0,0 +1,22 @@ +--- +name: Playback Issue +about: You have playback issues with some files +labels: playback +--- + +**Describe The Bug** + + +**Media Information** + + +**Screenshots** + + +**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** + diff --git a/.github/ISSUE_TEMPLATE/3-technical-discussion.md b/.github/ISSUE_TEMPLATE/3-technical-discussion.md new file mode 100644 index 0000000000..d8140fce75 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/3-technical-discussion.md @@ -0,0 +1,13 @@ +--- +name: Technical Discussion +about: You want to discuss technical aspects of changes you intend to make +labels: enhancement +--- + + diff --git a/.github/ISSUE_TEMPLATE/4-meta-issue.md b/.github/ISSUE_TEMPLATE/4-meta-issue.md new file mode 100644 index 0000000000..e034302e45 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/4-meta-issue.md @@ -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] +* [ ] ... diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000000..2ed06fae39 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -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. diff --git a/.github/SUPPORT.md b/.github/SUPPORT.md new file mode 100644 index 0000000000..a62bc7522a --- /dev/null +++ b/.github/SUPPORT.md @@ -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. diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 73f40aaca1..778d899ef7 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -35,7 +35,10 @@ - [Thibault Nocchi](https://github.com/ThibaultNocchi) - [MrTimscampi](https://github.com/MrTimscampi) - [Sarab Singh](https://github.com/sarab97) + - [GuilhermeHideki](https://github.com/GuilhermeHideki) - [Andrei Oanca](https://github.com/OancaAndrei) + - [Cromefire_](https://github.com/cromefire) + - [Orry Verducci](https://github.com/orryverducci) # Emby Contributors diff --git a/README.md b/README.md index f06e461320..ca42965dd9 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,7 @@ Jellyfin Web is the frontend used for most of the clients available for end user ### Dependencies +- [Node.js](https://nodejs.org/en/download/) - [Yarn 1.22.4](https://classic.yarnpkg.com/en/docs/install) - Gulp-cli diff --git a/build.yaml b/build.yaml index fe1633faec..a73be8ec43 100644 --- a/build.yaml +++ b/build.yaml @@ -1,7 +1,7 @@ --- # We just wrap `build` so this is really it name: "jellyfin-web" -version: "10.6.0" +version: "10.7.0" packages: - debian.all - fedora.all diff --git a/bump_version b/bump_version index bc8288b829..4e6aa6f792 100755 --- a/bump_version +++ b/bump_version @@ -4,6 +4,7 @@ set -o errexit set -o pipefail +set -o xtrace usage() { echo -e "bump_version - increase the shared version and generate changelogs" @@ -23,10 +24,7 @@ build_file="./build.yaml" new_version="$1" # Parse the version from shared version file -old_version="$( - grep "appVersion" ${shared_version_file} | head -1 \ - | sed -E 's/var appVersion = "([0-9\.]+)";/\1/' -)" +old_version="$( grep "appVersion" ${shared_version_file} | head -1 | sed -E "s/var appVersion = '([0-9\.]+)';/\1/" | tr -d '[:space:]' )" echo "Old version in appHost is: $old_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}" )" sed -i "s/${old_version_sed}/${new_version_sed}/g" ${shared_version_file} -old_version="$( - grep "version:" ${build_file} \ - | sed -E 's/version: "([0-9\.]+[-a-z0-9]*)"/\1/' -)" -echo "Old version in ${build_file}: $old_version`" +old_version="$( grep "version:" ${build_file} | 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 old_version_sed="$( sed 's/\./\\./g' <<<"${old_version}" )" # Escape the '.' chars @@ -54,7 +49,7 @@ fi debian_changelog_file="debian/changelog" debian_changelog_temp="$( mktemp )" # 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} @@ -65,15 +60,15 @@ cat ${debian_changelog_file} >> ${debian_changelog_temp} mv ${debian_changelog_temp} ${debian_changelog_file} # Write out a temporary Yum changelog with our new stuff prepended and some templated formatting -fedora_spec_file="fedora/jellyfin.spec" +fedora_spec_file="fedora/jellyfin-web.spec" fedora_changelog_temp="$( mktemp )" fedora_spec_temp_dir="$( mktemp -d )" -fedora_spec_temp="${fedora_spec_temp_dir}/jellyfin.spec.tmp" +fedora_spec_temp="${fedora_spec_temp_dir}/jellyfin-web.spec.tmp" # Make a copy of our spec file for hacking cp ${fedora_spec_file} ${fedora_spec_temp_dir}/ pushd ${fedora_spec_temp_dir} # Split out the stuff before and after changelog -csplit jellyfin.spec "/^%changelog/" # produces xx00 xx01 +csplit jellyfin-web.spec "/^%changelog/" # produces xx00 xx01 # Update the version in xx00 sed -i "s/${old_version_sed}/${new_version_sed}/g" xx00 # 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} # 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 diff --git a/debian/changelog b/debian/changelog index 50966c3a01..ab5e13196d 100644 --- a/debian/changelog +++ b/debian/changelog @@ -1,3 +1,9 @@ +jellyfin-web (10.7.0-1) unstable; urgency=medium + + * Forthcoming stable release + + -- Jellyfin Packaging Team Mon, 27 Jul 2020 19:13:31 -0400 + jellyfin-web (10.6.0-1) unstable; urgency=medium * New upstream version 10.6.0; release changelog at https://github.com/jellyfin/jellyfin-web/releases/tag/v10.6.0 diff --git a/fedora/jellyfin-web.spec b/fedora/jellyfin-web.spec index dcc9d9d2ab..1d85e5ae6b 100644 --- a/fedora/jellyfin-web.spec +++ b/fedora/jellyfin-web.spec @@ -1,7 +1,7 @@ %global debug_package %{nil} Name: jellyfin-web -Version: 10.6.0 +Version: 10.7.0 Release: 1%{?dist} Summary: The Free Software Media System web client License: GPLv3 @@ -11,6 +11,8 @@ Source0: jellyfin-web-%{version}.tar.gz %if 0%{?centos} BuildRequires: yarn +# sadly the yarn RPM at https://dl.yarnpkg.com/rpm/ uses git but doesn't Requires: it +BuildRequires: git %else BuildRequires: nodejs-yarn %endif @@ -39,5 +41,7 @@ mv dist %{buildroot}%{_datadir}/jellyfin-web %{_datadir}/licenses/jellyfin/LICENSE %changelog +* Mon Jul 27 2020 Jellyfin Packaging Team +- Forthcoming stable release * Mon Mar 23 2020 Jellyfin Packaging Team - Forthcoming stable release diff --git a/gulpfile.js b/gulpfile.js index 84f4558e6a..8b407ec2aa 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -184,7 +184,12 @@ function copy(query) { function injectBundle() { return src(options.injectBundle.query, { base: './src/' }) .pipe(inject( - src(['src/scripts/apploader.js'], { read: false }, { base: './src/' }), { relative: true } + src(['src/scripts/apploader.js'], { read: false }, { base: './src/' }), { + relative: true, + transform: function (filepath) { + return ``; + } + } )) .pipe(dest('dist/')) .pipe(browserSync.stream()); diff --git a/package.json b/package.json index abfb8b7912..3a74cd9d67 100644 --- a/package.json +++ b/package.json @@ -5,26 +5,28 @@ "repository": "https://github.com/jellyfin/jellyfin-web", "license": "GPL-2.0-or-later", "devDependencies": { - "@babel/core": "^7.10.3", + "@babel/core": "^7.11.6", + "@babel/eslint-parser": "^7.11.5", + "@babel/eslint-plugin": "^7.11.5", "@babel/plugin-proposal-class-properties": "^7.10.1", "@babel/plugin-proposal-private-methods": "^7.10.1", - "@babel/plugin-transform-modules-amd": "^7.9.6", - "@babel/polyfill": "^7.8.7", - "@babel/preset-env": "^7.10.3", - "autoprefixer": "^9.8.2", - "babel-eslint": "^11.0.0-beta.2", + "@babel/plugin-transform-modules-amd": "^7.10.5", + "@babel/polyfill": "^7.11.5", + "@babel/preset-env": "^7.11.5", + "autoprefixer": "^9.8.6", "babel-loader": "^8.0.6", - "browser-sync": "^2.26.7", + "browser-sync": "^2.26.12", + "confusing-browser-globals": "^1.0.9", "copy-webpack-plugin": "^5.1.1", - "css-loader": "^3.6.0", + "css-loader": "^4.2.2", "cssnano": "^4.1.10", "del": "^5.1.0", - "eslint": "^6.8.0", + "eslint": "^7.8.1", "eslint-plugin-compat": "^3.5.1", "eslint-plugin-eslint-comments": "^3.2.0", "eslint-plugin-import": "^2.21.2", "eslint-plugin-promise": "^4.2.1", - "file-loader": "^6.0.0", + "file-loader": "^6.1.0", "gulp": "^4.0.2", "gulp-babel": "^8.0.0", "gulp-cli": "^2.3.0", @@ -37,51 +39,51 @@ "gulp-postcss": "^8.0.0", "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", - "gulp-terser": "^1.2.0", - "html-webpack-plugin": "^4.3.0", + "gulp-terser": "^1.4.0", + "html-webpack-plugin": "^4.4.1", "lazypipe": "^1.0.2", "node-sass": "^4.13.1", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", "style-loader": "^1.1.3", - "stylelint": "^13.6.1", + "stylelint": "^13.7.0", "stylelint-config-rational-order": "^0.1.2", "stylelint-no-browser-hacks": "^1.2.1", "stylelint-order": "^4.1.0", - "webpack": "^4.41.5", + "webpack": "^4.44.1", "webpack-merge": "^4.2.2", - "webpack-stream": "^5.2.1" + "webpack-stream": "^6.1.0", + "worker-plugin": "^5.0.0" }, "dependencies": { "alameda": "^1.4.0", "blurhash": "^1.1.3", "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz", "core-js": "^3.6.5", - "date-fns": "^2.14.0", - "document-register-element": "^1.14.3", + "date-fns": "^2.16.1", "epubjs": "^0.3.85", "fast-text-encoding": "^1.0.3", "flv.js": "^1.5.0", "headroom.js": "^0.11.0", - "hls.js": "^0.13.1", + "hls.js": "^0.14.11", "howler": "^2.2.0", - "intersection-observer": "^0.10.0", - "jellyfin-apiclient": "^1.3.0", + "intersection-observer": "^0.11.0", + "jellyfin-apiclient": "^1.4.1", "jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto", "jquery": "^3.5.1", "jstree": "^3.3.10", + "libarchive.js": "^1.3.0", "libass-wasm": "https://github.com/jellyfin/JavascriptSubtitlesOctopus#4.0.0-jf-smarttv", - "material-design-icons-iconfont": "^5.0.1", + "material-design-icons-iconfont": "^6.1.0", "native-promise-only": "^0.8.0-a", "page": "^1.11.6", "query-string": "^6.13.1", "resize-observer-polyfill": "^1.5.1", "screenfull": "^5.0.2", - "shaka-player": "^3.0.1", "sortablejs": "^1.10.2", - "swiper": "^5.4.5", + "swiper": "^6.2.0", "webcomponents.js": "^0.7.24", - "whatwg-fetch": "^3.0.0" + "whatwg-fetch": "^3.4.1" }, "babel": { "presets": [ @@ -92,48 +94,273 @@ "test": [ "src/components/accessSchedule/accessSchedule.js", "src/components/actionSheet/actionSheet.js", + "src/components/activitylog.js", + "src/components/alert.js", + "src/components/alphaPicker/alphaPicker.js", + "src/components/appFooter/appFooter.js", + "src/components/apphost.js", + "src/components/appRouter.js", "src/components/autoFocuser.js", + "src/components/backdrop/backdrop.js", "src/components/cardbuilder/cardBuilder.js", "src/components/cardbuilder/chaptercardbuilder.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/favoriteitems.js", + "src/components/fetchhelper.js", + "src/components/filterdialog/filterdialog.js", + "src/components/filtermenu/filtermenu.js", + "src/components/focusManager.js", + "src/components/groupedcards.js", + "src/components/guide/guide.js", + "src/components/guide/guide-settings.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/imageDownloader/imageDownloader.js", + "src/components/imageeditor/imageeditor.js", + "src/components/imageUploader/imageUploader.js", "src/components/indicators/indicators.js", + "src/components/itemContextMenu.js", + "src/components/itemHelper.js", + "src/components/itemidentifier/itemidentifier.js", + "src/components/itemMediaInfo/itemMediaInfo.js", + "src/components/itemsrefresher.js", + "src/components/layoutManager.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js", + "src/components/libraryoptionseditor/libraryoptionseditor.js", + "src/components/listview/listview.js", + "src/components/loading/loading.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/notifications/notifications.js", + "src/components/nowPlayingBar/nowPlayingBar.js", + "src/components/packageManager.js", "src/components/playback/brightnessosd.js", "src/components/playback/mediasession.js", "src/components/playback/nowplayinghelper.js", "src/components/playback/playbackorientation.js", + "src/components/playback/playbackmanager.js", "src/components/playback/playerSelectionMenu.js", "src/components/playback/playersettingsmenu.js", "src/components/playback/playmethodhelper.js", + "src/components/playback/playqueuemanager.js", "src/components/playback/remotecontrolautoplay.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/pluginManager.js", + "src/components/prompt/prompt.js", + "src/components/recordingcreator/recordingbutton.js", + "src/components/recordingcreator/recordingcreator.js", + "src/components/recordingcreator/seriesrecordingeditor.js", + "src/components/recordingcreator/recordinghelper.js", + "src/components/refreshdialog/refreshdialog.js", + "src/components/recordingcreator/recordingeditor.js", + "src/components/recordingcreator/recordingfields.js", + "src/components/qualityOptions.js", + "src/components/remotecontrol/remotecontrol.js", "src/components/sanatizefilename.js", "src/components/scrollManager.js", + "src/plugins/experimentalWarnings/plugin.js", + "src/plugins/sessionPlayer/plugin.js", + "src/plugins/htmlAudioPlayer/plugin.js", + "src/plugins/comicsPlayer/plugin.js", + "src/plugins/chromecastPlayer/plugin.js", + "src/components/slideshow/slideshow.js", + "src/components/sortmenu/sortmenu.js", + "src/plugins/htmlVideoPlayer/plugin.js", + "src/plugins/logoScreensaver/plugin.js", + "src/plugins/playAccessValidation/plugin.js", + "src/components/search/searchfields.js", + "src/components/search/searchresults.js", + "src/components/settingshelper.js", + "src/components/shortcuts.js", + "src/components/subtitleeditor/subtitleeditor.js", + "src/components/subtitlesync/subtitlesync.js", + "src/components/subtitlesettings/subtitleappearancehelper.js", + "src/components/subtitlesettings/subtitlesettings.js", "src/components/syncPlay/groupSelectionMenu.js", "src/components/syncPlay/playbackPermissionManager.js", "src/components/syncPlay/syncPlayManager.js", "src/components/syncPlay/timeSyncManager.js", + "src/components/themeMediaPlayer.js", + "src/components/tabbedview/tabbedview.js", + "src/components/viewManager/viewManager.js", + "src/components/tvproviders/schedulesdirect.js", + "src/components/tvproviders/xmltv.js", + "src/components/toast/toast.js", + "src/components/tunerPicker.js", + "src/components/upnextdialog/upnextdialog.js", + "src/components/userdatabuttons/userdatabuttons.js", + "src/components/viewContainer.js", + "src/components/viewSettings/viewSettings.js", + "src/components/castSenderApi.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/plugins/repositories.js", + "src/controllers/music/musicalbums.js", + "src/controllers/music/musicartists.js", + "src/controllers/music/musicgenres.js", + "src/controllers/music/musicplaylists.js", + "src/controllers/music/musicrecommended.js", + "src/controllers/music/songs.js", + "src/controllers/dashboard/library.js", + "src/controllers/dashboard/metadataImages.js", + "src/controllers/dashboard/metadatanfo.js", + "src/controllers/dashboard/networking.js", + "src/controllers/dashboard/notifications/notification/index.js", + "src/controllers/dashboard/notifications/notifications/index.js", + "src/controllers/dashboard/playback.js", + "src/controllers/dashboard/plugins/add/index.js", + "src/controllers/dashboard/plugins/installed/index.js", + "src/controllers/dashboard/plugins/available/index.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/home.js", + "src/controllers/list.js", + "src/controllers/edititemmetadata.js", + "src/controllers/favorites.js", + "src/controllers/hometab.js", + "src/controllers/movies/moviecollections.js", + "src/controllers/movies/moviegenres.js", + "src/controllers/movies/movies.js", + "src/controllers/movies/moviesrecommended.js", + "src/controllers/movies/movietrailers.js", + "src/controllers/playback/nowplaying.js", + "src/controllers/playback/videoosd.js", + "src/controllers/itemDetails/index.js", + "src/controllers/playback/queue/index.js", + "src/controllers/playback/video/index.js", + "src/controllers/searchpage.js", + "src/controllers/livetv/livetvguide.js", + "src/controllers/livetvtuner.js", + "src/controllers/livetv/livetvsuggested.js", + "src/controllers/livetvstatus.js", + "src/controllers/livetvguideprovider.js", + "src/controllers/livetvsettings.js", + "src/controllers/livetv/livetvrecordings.js", + "src/controllers/livetv/livetvschedule.js", + "src/controllers/livetv/livetvseriestimers.js", + "src/controllers/livetv/livetvchannels.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/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/libraries/screensavermanager.js", + "src/libraries/navdrawer/navdrawer.js", + "src/libraries/scroller.js", + "src/plugins/backdropScreensaver/plugin.js", "src/plugins/bookPlayer/plugin.js", "src/plugins/bookPlayer/tableOfContents.js", + "src/plugins/chromecastPlayer/chromecastHelper.js", "src/plugins/photoPlayer/plugin.js", + "src/plugins/youtubePlayer/plugin.js", + "src/scripts/alphanumericshortcuts.js", + "src/scripts/autoBackdrops.js", + "src/scripts/browser.js", + "src/scripts/clientUtils.js", + "src/scripts/datetime.js", "src/scripts/deleteHelper.js", "src/scripts/dfnshelper.js", "src/scripts/dom.js", + "src/scripts/editorsidebar.js", "src/scripts/fileDownloader.js", "src/scripts/filesystem.js", + "src/scripts/globalize.js", "src/scripts/imagehelper.js", + "src/scripts/itembynamedetailpage.js", "src/scripts/inputManager.js", - "src/plugins/backdropScreensaver/plugin.js", - "src/components/filterdialog/filterdialog.js", - "src/components/fetchhelper.js", + "src/scripts/autoThemes.js", + "src/scripts/themeManager.js", "src/scripts/keyboardNavigation.js", + "src/scripts/libraryMenu.js", + "src/scripts/libraryBrowser.js", + "src/scripts/livetvcomponents.js", + "src/scripts/mouseManager.js", + "src/scripts/multiDownload.js", + "src/scripts/playlists.js", + "src/scripts/scrollHelper.js", + "src/scripts/serverNotifications.js", + "src/scripts/routes.js", "src/scripts/settings/appSettings.js", "src/scripts/settings/userSettings.js", - "src/scripts/settings/webSettings.js" + "src/scripts/settings/webSettings.js", + "src/scripts/shell.js", + "src/scripts/taskbutton.js", + "src/scripts/themeLoader.js", + "src/scripts/touchHelper.js" ], "plugins": [ "@babel/plugin-transform-modules-amd", @@ -148,7 +375,7 @@ "last 2 Chrome versions", "last 2 ChromeAndroid versions", "last 2 Safari versions", - "last 2 iOS versions", + "iOS > 10", "last 2 Edge versions", "Chrome 27", "Chrome 38", @@ -156,9 +383,11 @@ "Chrome 53", "Chrome 56", "Chrome 63", + "Edge 18", "Firefox ESR" ], "scripts": { + "start": "yarn serve", "serve": "gulp serve --development", "prepare": "gulp --production", "build:development": "gulp --development", diff --git a/scripts/duplicates.py b/scripts/duplicates.py new file mode 100644 index 0000000000..2daad94682 --- /dev/null +++ b/scripts/duplicates.py @@ -0,0 +1,33 @@ +import sys +import os +import json + +# load every string in the source language +# print all duplicate values to a file + +cwd = os.getcwd() +source = cwd + '/../src/strings/en-us.json' + +reverse = {} +duplicates = {} + +with open(source) as en: + strings = json.load(en) + for key, value in strings.items(): + if value not in reverse: + reverse[value] = [key] + else: + reverse[value].append(key) + +for key, value in reverse.items(): + if len(value) > 1: + duplicates[key] = value + +print('LENGTH: ' + str(len(duplicates))) +with open('duplicates.txt', 'w') as out: + for item in duplicates: + out.write(json.dumps(item) + ': ') + out.write(json.dumps(duplicates[item]) + '\n') + out.close() + +print('DONE') diff --git a/scripts/scrm.py b/scripts/remove.py similarity index 95% rename from scripts/scrm.py rename to scripts/remove.py index 9bd5bc2a48..dba48537aa 100644 --- a/scripts/scrm.py +++ b/scripts/remove.py @@ -11,7 +11,7 @@ langlst = os.listdir(langdir) keys = [] -with open('scout.txt', 'r') as f: +with open('unused.txt', 'r') as f: for line in f: keys.append(line.strip('\n')) diff --git a/scripts/scdup.py b/scripts/source.py similarity index 100% rename from scripts/scdup.py rename to scripts/source.py diff --git a/scripts/scgen.py b/scripts/unused.py similarity index 87% rename from scripts/scgen.py rename to scripts/unused.py index 12af27320a..abbc399cf6 100644 --- a/scripts/scgen.py +++ b/scripts/unused.py @@ -16,7 +16,7 @@ langlst.append('en-us.json') dep = [] def grep(key): - command = 'grep -r -E "(\(\\\"|\(\'|\{)%s(\\\"|\'|\})" --include=\*.{js,html} --exclude-dir=../src/strings ../src' % key + command = 'grep -r -E "(\\\"|\'|\{)%s(\\\"|\'|\})" --include=\*.{js,html} --exclude-dir=../src/strings ../src' % key p = subprocess.Popen(command, shell=True, stdout=subprocess.PIPE, stderr=subprocess.STDOUT) output = p.stdout.readlines() if output: diff --git a/src/assets/css/dashboard.css b/src/assets/css/dashboard.css index 894d7332f4..48e6fe807e 100644 --- a/src/assets/css/dashboard.css +++ b/src/assets/css/dashboard.css @@ -235,6 +235,15 @@ div[data-role=controlgroup] a.ui-btn-active { width: 50%; } +.localUsers .cardText-secondary { + white-space: pre-wrap; + height: 3em; +} + +.customCssContainer textarea { + resize: none; +} + @media all and (min-width: 70em) { .dashboardSections { -webkit-flex-wrap: wrap; diff --git a/src/assets/css/flexstyles.css b/src/assets/css/flexstyles.css index a5a479f2f5..429ed7a650 100644 --- a/src/assets/css/flexstyles.css +++ b/src/assets/css/flexstyles.css @@ -30,6 +30,10 @@ align-items: flex-start; } +.align-items-flex-end { + align-items: flex-end; +} + .justify-content-center { justify-content: center; } @@ -38,6 +42,10 @@ justify-content: flex-end; } +.justify-content-space-between { + justify-content: space-between; +} + .flex-wrap-wrap { flex-wrap: wrap; } diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.css index cb0da0f80f..6e87f11d9d 100644 --- a/src/assets/css/fonts.css +++ b/src/assets/css/fonts.css @@ -1,7 +1,5 @@ html { font-family: "Noto Sans", sans-serif; - font-size: 93%; - -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; @@ -29,7 +27,9 @@ h3 { } .layout-tv { - font-size: 130%; + /* Per WebOS and Tizen guidelines, fonts must be 20px minimum. + This takes the 16px baseline and multiplies it by 1.25 to get 20px. */ + font-size: 125%; } .layout-mobile { diff --git a/src/assets/css/ios.css b/src/assets/css/ios.css index 57de0c5fdd..2b61f49a4e 100644 --- a/src/assets/css/ios.css +++ b/src/assets/css/ios.css @@ -1,8 +1,3 @@ html { font-size: 82% !important; } - -.formDialogFooter { - position: static !important; - margin: 0 -1em !important; -} diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 460585ae61..c9ee82c8a0 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -28,6 +28,10 @@ padding-top: 0 !important; } +.layout-tv .itemDetailPage { + padding-top: 4.2em !important; +} + .standalonePage { padding-top: 4.5em !important; } @@ -163,6 +167,12 @@ transition: background ease-in-out 0.5s; } +.layout-tv .skinHeader { + /* In TV layout, it makes more sense to keep the top bar at the top of the page + Having it follow the view only makes us lose vertical space, while not being focusable */ + position: relative; +} + .hiddenViewMenuBar .skinHeader { display: none; } @@ -175,6 +185,10 @@ width: 100%; } +.layout-tv .sectionTabs { + width: 55%; +} + .selectedMediaFolder { background-color: #f2f2f2 !important; } @@ -232,12 +246,6 @@ text-align: center; } -.layout-desktop .searchTabButton, -.layout-mobile .searchTabButton, -.layout-tv .headerSearchButton { - display: none !important; -} - .mainDrawer-scrollContainer { padding-bottom: 10vh; } @@ -269,7 +277,7 @@ } } -@media all and (max-width: 84em) { +@media all and (max-width: 100em) { .withSectionTabs .headerTop { padding-bottom: 0.55em; } @@ -277,9 +285,13 @@ .sectionTabs { font-size: 83.5%; } + + .layout-tv .sectionTabs { + width: 100%; + } } -@media all and (min-width: 84em) { +@media all and (min-width: 100em) { .headerTop { padding: 0.8em 0.8em; } @@ -445,8 +457,7 @@ height: 26.5vh; } -.layout-desktop .itemBackdrop::after, -.layout-tv .itemBackdrop::after { +.layout-desktop .itemBackdrop::after { content: ""; width: 100%; height: 100%; @@ -454,8 +465,8 @@ display: block; } -.layout-desktop .noBackdrop .itemBackdrop, -.layout-tv .noBackdrop .itemBackdrop { +.layout-tv .itemBackdrop, +.layout-desktop .noBackdrop .itemBackdrop { display: none; } @@ -622,6 +633,10 @@ z-index: 2; } +.layout-tv .detailPagePrimaryContainer { + display: block; +} + .layout-mobile .detailPagePrimaryContainer { display: block; position: relative; @@ -635,10 +650,14 @@ padding-left: 32.45vw; } -.layout-desktop .detailRibbon, -.layout-tv .detailRibbon { +.layout-desktop .detailRibbon { margin-top: -7.2em; - height: 7.18em; + height: 7.2em; +} + +.layout-tv .detailRibbon { + margin-top: 0; + height: inherit; } .layout-desktop .noBackdrop .detailRibbon, @@ -746,8 +765,7 @@ div.itemDetailGalleryLink.defaultCardBackground { position: relative; } - .layout-desktop .itemBackdrop, - .layout-tv .itemBackdrop { + .layout-desktop .itemBackdrop { height: 40vh; } @@ -773,13 +791,8 @@ div.itemDetailGalleryLink.defaultCardBackground { } .emby-button.detailFloatingButton { - position: absolute; - background-color: rgba(0, 0, 0, 0.5); - z-index: 3; - top: 100%; - left: 90%; - margin: -2.2em 0 0 -2.2em; - padding: 0.4em; + font-size: 1.4em; + margin-right: 0.5em !important; color: rgba(255, 255, 255, 0.76); } @@ -842,7 +855,7 @@ div.itemDetailGalleryLink.defaultCardBackground { -webkit-align-items: center; align-items: center; margin: 0 !important; - padding: 0.5em 0.7em !important; + padding: 0.7em 0.7em !important; } @media all and (min-width: 29em) { @@ -910,25 +923,7 @@ div.itemDetailGalleryLink.defaultCardBackground { } } -@media all and (min-width: 62.5em) { - .headerTop { - padding-left: 0.8em; - padding-right: 0.8em; - } - - .headerTabs { - align-self: center; - width: auto; - align-items: center; - justify-content: center; - margin-top: -4.2em; - position: relative; - } - - .detailFloatingButton { - display: none !important; - } - +@media all and (min-width: 100em) { .personBackdrop { display: none !important; } @@ -937,6 +932,11 @@ div.itemDetailGalleryLink.defaultCardBackground { font-size: 108%; margin: 1.25em 0; } + + .layout-tv .mainDetailButtons { + font-size: 108%; + margin: 1em 0 1.25em; + } } @media all and (max-width: 50em) { @@ -1152,13 +1152,13 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { } .layout-tv .padded-top-focusscale { - padding-top: 1em; - margin-top: -1em; + padding-top: 1.5em; + margin-top: -1.5em; } .layout-tv .padded-bottom-focusscale { - padding-bottom: 1em; - margin-bottom: -1em; + padding-bottom: 1.5em; + margin-bottom: -1.5em; } @media all and (min-height: 31.25em) { diff --git a/src/assets/css/scrollstyles.css b/src/assets/css/scrollstyles.css index 1cb3207e06..67c6202252 100644 --- a/src/assets/css/scrollstyles.css +++ b/src/assets/css/scrollstyles.css @@ -12,6 +12,7 @@ .hiddenScrollX, .layout-tv .scrollX { -ms-overflow-style: none; + scrollbar-width: none; } .hiddenScrollX-forced { @@ -40,6 +41,7 @@ .hiddenScrollY, .layout-tv .smoothScrollY { -ms-overflow-style: none; + scrollbar-width: none; /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */ diff --git a/src/assets/css/site.css b/src/assets/css/site.css index 9fbd8a4fca..38e056df89 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.css @@ -5,6 +5,12 @@ html { height: 100%; } +.layout-mobile, +.layout-tv { + -webkit-touch-callout: none; + user-select: none; +} + .clipForScreenReader { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); @@ -18,7 +24,7 @@ html { .material-icons { /* Fix font ligatures on older WebOS versions */ - -webkit-font-feature-settings: "liga"; + font-feature-settings: "liga"; } .backgroundContainer { @@ -34,16 +40,6 @@ html { line-height: 1.35; } -.layout-mobile, -.layout-tv { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - body { overflow-x: hidden; background-color: transparent !important; @@ -133,3 +129,17 @@ div[data-role=page] { .hide-scroll { 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; +} diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css index 50cb41021b..808915e58b 100644 --- a/src/assets/css/videoosd.css +++ b/src/assets/css/videoosd.css @@ -7,7 +7,6 @@ } .osdPoster img, -.pageContainer, .videoOsdBottom { bottom: 0; left: 0; @@ -248,14 +247,7 @@ animation: spin 4s linear infinite; } -.pageContainer { - top: 0; - position: fixed; -} - @media all and (max-width: 30em) { - .btnFastForward, - .btnRewind, .osdMediaInfo, .osdPoster { display: none !important; diff --git a/src/assets/img/devices/edgechromium.svg b/src/assets/img/devices/edgechromium.svg new file mode 100644 index 0000000000..14d68a5d48 --- /dev/null +++ b/src/assets/img/devices/edgechromium.svg @@ -0,0 +1 @@ +Microsoft Edge icon diff --git a/src/bundle.js b/src/bundle.js index 41648f7c4f..25810f58ee 100644 --- a/src/bundle.js +++ b/src/bundle.js @@ -2,171 +2,159 @@ * require.js module definitions bundled by webpack */ // Use define from require.js not webpack's define -var _define = window.define; - -// document-register-element -var docRegister = require('document-register-element'); -_define('document-register-element', function() { - return docRegister; -}); +const _define = window.define; // fetch -var fetch = require('whatwg-fetch'); +const fetch = require('whatwg-fetch'); _define('fetch', function() { return fetch; }); // Blurhash -var blurhash = require('blurhash'); +const blurhash = require('blurhash'); _define('blurhash', function() { return blurhash; }); // query-string -var query = require('query-string'); +const query = require('query-string'); _define('queryString', function() { return query; }); // flvjs -var flvjs = require('flv.js/dist/flv').default; +const flvjs = require('flv.js/dist/flv').default; _define('flvjs', function() { return flvjs; }); // jstree -var jstree = require('jstree'); +const jstree = require('jstree'); require('jstree/dist/themes/default/style.css'); _define('jstree', function() { return jstree; }); // jquery -var jquery = require('jquery'); +const jquery = require('jquery'); _define('jQuery', function() { return jquery; }); // hlsjs -var hlsjs = require('hls.js'); +const hlsjs = require('hls.js'); _define('hlsjs', function() { return hlsjs; }); // howler -var howler = require('howler'); +const howler = require('howler'); _define('howler', function() { return howler; }); // resize-observer-polyfill -var resize = require('resize-observer-polyfill').default; +const resize = require('resize-observer-polyfill').default; _define('resize-observer-polyfill', function() { return resize; }); -// shaka -var shaka = require('shaka-player'); -_define('shaka', function() { - return shaka; -}); - // swiper -var swiper = require('swiper/js/swiper'); -require('swiper/css/swiper.min.css'); +const swiper = require('swiper/swiper-bundle'); +require('swiper/swiper-bundle.css'); _define('swiper', function() { return swiper; }); // sortable -var sortable = require('sortablejs').default; +const sortable = require('sortablejs').default; _define('sortable', function() { return sortable; }); // webcomponents -var webcomponents = require('webcomponents.js/webcomponents-lite'); +const webcomponents = require('webcomponents.js/webcomponents-lite'); _define('webcomponents', function() { return webcomponents; }); // libass-wasm -var libassWasm = require('libass-wasm'); +const libassWasm = require('libass-wasm'); _define('JavascriptSubtitlesOctopus', function() { return libassWasm; }); // material-icons -var materialIcons = require('material-design-icons-iconfont/dist/material-design-icons.css'); +const materialIcons = require('material-design-icons-iconfont/dist/material-design-icons.css'); _define('material-icons', function() { return materialIcons; }); // noto font -var noto = require('jellyfin-noto'); +const noto = require('jellyfin-noto'); _define('jellyfin-noto', function () { return noto; }); -var epubjs = require('epubjs'); +const epubjs = require('epubjs'); _define('epubjs', function () { return epubjs; }); // page.js -var page = require('page'); +const page = require('page'); _define('page', function() { return page; }); // core-js -var polyfill = require('@babel/polyfill/dist/polyfill'); +const polyfill = require('@babel/polyfill/dist/polyfill'); _define('polyfill', function () { return polyfill; }); // domtokenlist-shim -var classlist = require('classlist.js'); +const classlist = require('classlist.js'); _define('classlist-polyfill', function () { return classlist; }); // Date-FNS -var dateFns = require('date-fns'); +const dateFns = require('date-fns'); _define('date-fns', function () { return dateFns; }); -var dateFnsLocale = require('date-fns/locale'); +const dateFnsLocale = require('date-fns/locale'); _define('date-fns/locale', function () { return dateFnsLocale; }); -var fast_text_encoding = require('fast-text-encoding'); +const fast_text_encoding = require('fast-text-encoding'); _define('fast-text-encoding', function () { return fast_text_encoding; }); // intersection-observer -var intersection_observer = require('intersection-observer'); +const intersection_observer = require('intersection-observer'); _define('intersection-observer', function () { return intersection_observer; }); // screenfull -var screenfull = require('screenfull'); +const screenfull = require('screenfull'); _define('screenfull', function () { return screenfull; }); // headroom.js -var headroom = require('headroom.js/dist/headroom'); +const headroom = require('headroom.js/dist/headroom'); _define('headroom', function () { return headroom; }); // apiclient -var apiclient = require('jellyfin-apiclient'); +const apiclient = require('jellyfin-apiclient'); _define('apiclient', function () { return apiclient.ApiClient; @@ -187,3 +175,9 @@ _define('connectionManagerFactory', function () { _define('appStorage', function () { return apiclient.AppStorage; }); + +// libarchive.js +var libarchive = require('libarchive.js'); +_define('libarchive', function () { + return libarchive; +}); diff --git a/src/components/accessSchedule/accessSchedule.js b/src/components/accessSchedule/accessSchedule.js index 166460a025..b513766d0b 100644 --- a/src/components/accessSchedule/accessSchedule.js +++ b/src/components/accessSchedule/accessSchedule.js @@ -49,7 +49,7 @@ import 'formDialogStyle'; }; if (parseFloat(updatedSchedule.StartHour) >= parseFloat(updatedSchedule.EndHour)) { - return void alert(globalize.translate('ErrorMessageStartHourGreaterThanEnd')); + return void alert(globalize.translate('ErrorStartHourGreaterThanEnd')); } context.submitted = true; @@ -59,15 +59,14 @@ import 'formDialogStyle'; export function show(options) { return new Promise((resolve, reject) => { - // TODO: remove require - require(['text!./components/accessSchedule/accessSchedule.template.html'], template => { + import('text!./accessSchedule.template.html').then(({default: template}) => { const dlg = dialogHelper.createDialog({ removeOnClose: true, size: 'small' }); dlg.classList.add('formDialog'); let html = ''; - html += globalize.translateDocument(template); + html += globalize.translateHtml(template); dlg.innerHTML = html; populateHours(dlg); loadSchedule(dlg, options.schedule); diff --git a/src/components/accessSchedule/accessSchedule.template.html b/src/components/accessSchedule/accessSchedule.template.html index 493150ae5e..c0f83ccec6 100644 --- a/src/components/accessSchedule/accessSchedule.template.html +++ b/src/components/accessSchedule/accessSchedule.template.html @@ -1,5 +1,5 @@
-

@@ -12,13 +12,13 @@
'; + html += ``; html += '
'; html += '

'; html += '
'; html += '
'; - html += ''; - html += '
' + globalize.translate('NewCollectionNameExample') + '
'; + html += ``; + html += `
${globalize.translate('NewCollectionNameExample')}
`; html += '
'; html += ''; // newCollectionInfo html += '
'; html += '
'; - html += ''; + html += ``; html += '
'; html += ''; @@ -167,7 +171,6 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio } function initEditor(content, items) { - content.querySelector('#selectCollectionToAddTo').addEventListener('change', function () { if (this.value) { content.querySelector('.newCollectionInfo').classList.add('hide'); @@ -188,7 +191,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio } else { content.querySelector('.fldSelectCollection').classList.add('hide'); - var selectCollectionToAddTo = content.querySelector('#selectCollectionToAddTo'); + const selectCollectionToAddTo = content.querySelector('#selectCollectionToAddTo'); selectCollectionToAddTo.innerHTML = ''; selectCollectionToAddTo.value = ''; triggerChange(selectCollectionToAddTo); @@ -196,79 +199,70 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio } function centerFocus(elem, horiz, on) { - require(['scrollHelper'], function (scrollHelper) { - var fn = on ? 'on' : 'off'; + import('scrollHelper').then((scrollHelper) => { + const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); } - function CollectionEditor() { + export class showEditor { + constructor(options) { + const items = options.items || {}; + currentServerId = options.serverId; - } - - CollectionEditor.prototype.show = function (options) { - - var items = options.items || {}; - currentServerId = options.serverId; - - var dialogOptions = { - removeOnClose: true, - scrollY: false - }; - - if (layoutManager.tv) { - dialogOptions.size = 'fullscreen'; - } else { - dialogOptions.size = 'small'; - } - - var dlg = dialogHelper.createDialog(dialogOptions); - - dlg.classList.add('formDialog'); - - var html = ''; - var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection'); - - html += '
'; - html += ''; - html += '

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

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

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

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

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

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

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

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

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

'; + html += '
'; + html += getEditorHtml(options, systemInfo); + dlg.innerHTML = html; + initEditor(dlg, options, fileOptions); + dlg.addEventListener('close', onDialogClosed); + dialogHelper.open(dlg); + dlg.querySelector('.btnCloseDialog').addEventListener('click', () => { + dialogHelper.close(dlg); + }); + currentDialog = dlg; + dlg.querySelector('#txtDirectoryPickerPath').value = initialPath; + const txtNetworkPath = dlg.querySelector('#txtNetworkPath'); + if (txtNetworkPath) { + txtNetworkPath.value = options.networkSharePath || ''; + } + if (!options.pathReadOnly) { + refreshDirectoryBrowser(dlg, initialPath, fileOptions, true); + } + } + ); + }; + this.close = () => { + if (currentDialog) { + dialogHelper.close(currentDialog); + } + }; + } } - var systemInfo; - return directoryBrowser; -}); + let systemInfo; + +/* eslint-enable indent */ +export default directoryBrowser; diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js index c4eb35f49f..9def27dc8a 100644 --- a/src/components/displaySettings/displaySettings.js +++ b/src/components/displaySettings/displaySettings.js @@ -1,22 +1,40 @@ -define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', 'apphost', 'focusManager', 'datetime', 'globalize', 'loading', 'connectionManager', 'skinManager', 'dom', 'events', 'emby-select', 'emby-checkbox', 'emby-button'], function (require, browser, layoutManager, appSettings, pluginManager, appHost, focusManager, datetime, globalize, loading, connectionManager, skinManager, dom, events) { - 'use strict'; +import browser from 'browser'; +import layoutManager from 'layoutManager'; +import pluginManager from 'pluginManager'; +import appHost from 'apphost'; +import focusManager from 'focusManager'; +import datetime from 'datetime'; +import globalize from 'globalize'; +import loading from 'loading'; +import skinManager from 'skinManager'; +import events from 'events'; +import 'emby-select'; +import 'emby-checkbox'; +import 'emby-button'; - function fillThemes(select, isDashboard) { - select.innerHTML = skinManager.getThemes().map(function (t) { - var value = t.id; - if (t.isDefault && !isDashboard) { - value = ''; - } else if (t.isDefaultServerDashboard && isDashboard) { - value = ''; - } +/* eslint-disable indent */ - return ''; - }).join(''); + function fillThemes(context, userSettings) { + const select = context.querySelector('#selectTheme'); + + skinManager.getThemes().then(themes => { + select.innerHTML = themes.map(t => { + return ``; + }).join(''); + + // get default theme + var defaultTheme = themes.find(theme => { + return theme.default; + }); + + // set the current theme + select.value = userSettings.theme() || defaultTheme.id; + }); } function loadScreensavers(context, userSettings) { - var selectScreensaver = context.querySelector('.selectScreensaver'); - var options = pluginManager.ofType('screensaver').map(function (plugin) { + const selectScreensaver = context.querySelector('.selectScreensaver'); + const options = pluginManager.ofType('screensaver').map(plugin => { return { name: plugin.name, value: plugin.id @@ -28,9 +46,10 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' value: 'none' }); - selectScreensaver.innerHTML = options.map(function (o) { - return ''; + selectScreensaver.innerHTML = options.map(o => { + return ``; }).join(''); + selectScreensaver.value = userSettings.screensaver(); if (!selectScreensaver.value) { @@ -39,61 +58,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' } } - function loadSoundEffects(context, userSettings) { - - var selectSoundEffects = context.querySelector('.selectSoundEffects'); - var options = pluginManager.ofType('soundeffects').map(function (plugin) { - return { - name: plugin.name, - value: plugin.id - }; - }); - - options.unshift({ - name: globalize.translate('None'), - value: 'none' - }); - - selectSoundEffects.innerHTML = options.map(function (o) { - return ''; - }).join(''); - selectSoundEffects.value = userSettings.soundEffects(); - - if (!selectSoundEffects.value) { - // TODO: set the default instead of none - selectSoundEffects.value = 'none'; - } - } - - function loadSkins(context, userSettings) { - - var selectSkin = context.querySelector('.selectSkin'); - - var options = pluginManager.ofType('skin').map(function (plugin) { - return { - name: plugin.name, - value: plugin.id - }; - }); - - selectSkin.innerHTML = options.map(function (o) { - return ''; - }).join(''); - selectSkin.value = userSettings.skin(); - - if (!selectSkin.value && options.length) { - selectSkin.value = options[0].value; - } - - if (options.length > 1 && appHost.supports('skins')) { - context.querySelector('.selectSkinContainer').classList.remove('hide'); - } else { - context.querySelector('.selectSkinContainer').classList.add('hide'); - } - } - - function showOrHideMissingEpisodesField(context, user, apiClient) { - + function showOrHideMissingEpisodesField(context) { if (browser.tizen || browser.web0s) { context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide'); return; @@ -102,17 +67,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide'); } - function loadForm(context, user, userSettings, apiClient) { - - var loggedInUserId = apiClient.getCurrentUserId(); - var userId = user.Id; - - if (user.Policy.IsAdministrator) { - context.querySelector('.selectDashboardThemeContainer').classList.remove('hide'); - } else { - context.querySelector('.selectDashboardThemeContainer').classList.add('hide'); - } - + function loadForm(context, user, userSettings) { if (appHost.supports('displaylanguage')) { context.querySelector('.languageSection').classList.remove('hide'); } else { @@ -131,18 +86,6 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' context.querySelector('.learnHowToContributeContainer').classList.add('hide'); } - if (appHost.supports('runatstartup')) { - context.querySelector('.fldAutorun').classList.remove('hide'); - } else { - context.querySelector('.fldAutorun').classList.add('hide'); - } - - if (appHost.supports('soundeffects')) { - context.querySelector('.fldSoundEffects').classList.remove('hide'); - } else { - context.querySelector('.fldSoundEffects').classList.add('hide'); - } - if (appHost.supports('screensaver')) { context.querySelector('.selectScreensaverContainer').classList.remove('hide'); } else { @@ -165,16 +108,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' context.querySelector('.fldThemeVideo').classList.add('hide'); } - context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup(); - - var selectTheme = context.querySelector('#selectTheme'); - var selectDashboardTheme = context.querySelector('#selectDashboardTheme'); - - fillThemes(selectTheme); - fillThemes(selectDashboardTheme, true); + fillThemes(context, userSettings); loadScreensavers(context, userSettings); - loadSoundEffects(context, userSettings); - loadSkins(context, userSettings); context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false; @@ -190,20 +125,14 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' context.querySelector('#txtLibraryPageSize').value = userSettings.libraryPageSize(); - selectDashboardTheme.value = userSettings.dashboardTheme() || ''; - selectTheme.value = userSettings.theme() || ''; - context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || ''; - showOrHideMissingEpisodesField(context, user, apiClient); + showOrHideMissingEpisodesField(context); loading.hide(); } function saveUser(context, user, userSettingsInstance, apiClient) { - - appSettings.runAtStartup(context.querySelector('.chkRunAtStartup').checked); - user.Configuration.DisplayMissingEpisodes = context.querySelector('.chkDisplayMissingEpisodes').checked; if (appHost.supports('displaylanguage')) { @@ -214,15 +143,11 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked); userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked); - userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value); userSettingsInstance.theme(context.querySelector('#selectTheme').value); - userSettingsInstance.soundEffects(context.querySelector('.selectSoundEffects').value); userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value); userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value); - userSettingsInstance.skin(context.querySelector('.selectSkin').value); - userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked); userSettingsInstance.enableBlurhash(context.querySelector('#chkBlurhash').checked); userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked); @@ -239,29 +164,29 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { loading.show(); - apiClient.getUser(userId).then(function (user) { - saveUser(context, user, userSettings, apiClient).then(function () { + apiClient.getUser(userId).then(user => { + saveUser(context, user, userSettings, apiClient).then(() => { loading.hide(); if (enableSaveConfirmation) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('SettingsSaved')); }); } events.trigger(instance, 'saved'); - }, function () { + }, () => { loading.hide(); }); }); } function onSubmit(e) { - var self = this; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userId = self.options.userId; - var userSettings = self.options.userSettings; + const self = this; + const apiClient = window.connectionManager.getApiClient(self.options.serverId); + const userId = self.options.userId; + const userSettings = self.options.userSettings; - userSettings.setUserInfo(userId, apiClient).then(function () { - var enableSaveConfirmation = self.options.enableSaveConfirmation; + userSettings.setUserInfo(userId, apiClient).then(() => { + const enableSaveConfirmation = self.options.enableSaveConfirmation; save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); }); @@ -272,50 +197,51 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' return false; } - function embed(options, self) { - require(['text!./displaySettings.template.html'], function (template) { - options.element.innerHTML = globalize.translateDocument(template, 'core'); - options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); - if (options.enableSaveButton) { - options.element.querySelector('.btnSave').classList.remove('hide'); - } - self.loadData(options.autoFocus); - }); + async function embed(options, self) { + const { default: template } = await import('text!./displaySettings.template.html'); + options.element.innerHTML = globalize.translateHtml(template, 'core'); + options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); + if (options.enableSaveButton) { + options.element.querySelector('.btnSave').classList.remove('hide'); + } + self.loadData(options.autoFocus); } - function DisplaySettings(options) { - this.options = options; - embed(options, this); - } + class DisplaySettings { + constructor(options) { + this.options = options; + embed(options, this); + } - DisplaySettings.prototype.loadData = function (autoFocus) { - var self = this; - var context = self.options.element; + loadData(autoFocus) { + const self = this; + const context = self.options.element; - loading.show(); + loading.show(); - var userId = self.options.userId; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userSettings = self.options.userSettings; + const userId = self.options.userId; + const apiClient = window.connectionManager.getApiClient(self.options.serverId); + const userSettings = self.options.userSettings; - return apiClient.getUser(userId).then(function (user) { - return userSettings.setUserInfo(userId, apiClient).then(function () { - self.dataLoaded = true; - loadForm(context, user, userSettings, apiClient); - if (autoFocus) { - focusManager.autoFocus(context); - } + return apiClient.getUser(userId).then(user => { + return userSettings.setUserInfo(userId, apiClient).then(() => { + self.dataLoaded = true; + loadForm(context, user, userSettings); + if (autoFocus) { + focusManager.autoFocus(context); + } + }); }); - }); - }; + } - DisplaySettings.prototype.submit = function () { - onSubmit.call(this); - }; + submit() { + onSubmit.call(this); + } - DisplaySettings.prototype.destroy = function () { - this.options = null; - }; + destroy() { + this.options = null; + } + } - return DisplaySettings; -}); +/* eslint-enable indent */ +export default DisplaySettings; diff --git a/src/components/displaySettings/displaySettings.template.html b/src/components/displaySettings/displaySettings.template.html index ab01b4b6ae..1b9bf00376 100644 --- a/src/components/displaySettings/displaySettings.template.html +++ b/src/components/displaySettings/displaySettings.template.html @@ -1,5 +1,4 @@
-

${Display}

@@ -123,26 +122,14 @@
${LabelPleaseRestart}
-
- -
-
-
- -
-
-
- -
-
${LabelLibraryPageSizeHelp}
@@ -159,9 +146,9 @@
-
${EnableBlurhashHelp}
+
${EnableBlurHashHelp}
@@ -175,7 +162,7 @@
${EnableBackdropsHelp}
@@ -183,7 +170,7 @@
${EnableThemeSongsHelp}
@@ -191,18 +178,11 @@
${EnableThemeVideosHelp}
-
- -
-
'; return html; @@ -105,7 +105,7 @@ export default function(view, params) { }); view.querySelector('.btnNewRepository').addEventListener('click', () => { - let dialog = dialogHelper.createDialog({ + const dialog = dialogHelper.createDialog({ scrollY: false, size: 'large', modal: false, @@ -127,7 +127,7 @@ export default function(view, params) { html += ``; html += `
${globalize.translate('LabelRepositoryUrlHelp')}
`; html += '
'; - html += ``; + html += ``; html += '
'; html += ''; diff --git a/src/scheduledtask.html b/src/controllers/dashboard/scheduledtasks/scheduledtask.html similarity index 86% rename from src/scheduledtask.html rename to src/controllers/dashboard/scheduledtasks/scheduledtask.html index c7e82594ce..8d0b2e24e0 100644 --- a/src/scheduledtask.html +++ b/src/controllers/dashboard/scheduledtasks/scheduledtask.html @@ -23,7 +23,7 @@
-

${HeaderAddScheduledTaskTrigger}

+

${ButtonAddScheduledTaskTrigger}

@@ -31,18 +31,18 @@ - +
@@ -73,7 +73,7 @@
'; + html += ''; html += '
'; } @@ -77,22 +84,21 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby }, // TODO: Replace this mess with date-fns and remove datetime completely getTriggerFriendlyName: function (trigger) { - if ('DailyTrigger' == trigger.Type) { + if (trigger.Type == 'DailyTrigger') { return globalize.translate('DailyAt', ScheduledTaskPage.getDisplayTime(trigger.TimeOfDayTicks)); } - if ('WeeklyTrigger' == trigger.Type) { + if (trigger.Type == 'WeeklyTrigger') { // TODO: The day of week isn't localised as well return globalize.translate('WeeklyAt', trigger.DayOfWeek, ScheduledTaskPage.getDisplayTime(trigger.TimeOfDayTicks)); } - if ('SystemEventTrigger' == trigger.Type && 'WakeFromSleep' == trigger.SystemEvent) { + if (trigger.Type == 'SystemEventTrigger' && trigger.SystemEvent == 'WakeFromSleep') { return globalize.translate('OnWakeFromSleep'); } if (trigger.Type == 'IntervalTrigger') { - - var hours = trigger.IntervalTicks / 36e9; + const hours = trigger.IntervalTicks / 36e9; if (hours == 0.25) { return globalize.translate('EveryXMinutes', '15'); @@ -117,8 +123,8 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby return trigger.Type; }, getDisplayTime: function (ticks) { - var ms = ticks / 1e4; - var now = new Date(); + const ms = ticks / 1e4; + const now = new Date(); now.setHours(0, 0, 0, 0); now.setTime(now.getTime() + ms); return datetime.getDisplayTime(now); @@ -129,7 +135,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby $('#popupAddTrigger', view).removeClass('hide'); }, confirmDeleteTrigger: function (view, index) { - require(['confirm'], function (confirm) { + import('confirm').then(({default: confirm}) => { confirm(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () { ScheduledTaskPage.deleteTrigger(view, index); }); @@ -137,7 +143,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby }, deleteTrigger: function (view, index) { loading.show(); - var id = getParameterByName('id'); + const id = getParameterByName('id'); ApiClient.getScheduledTask(id).then(function (task) { task.Triggers.remove(index); ApiClient.updateScheduledTaskTriggers(task.Id, task.Triggers).then(function () { @@ -179,7 +185,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby } }, getTriggerToAdd: function (page) { - var trigger = { + const trigger = { Type: $('#selectTriggerType', page).val() }; @@ -194,7 +200,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby trigger.IntervalTicks = $('#selectInterval', page).val(); } - var timeLimit = $('#txtTimeLimit', page).val() || '0'; + let timeLimit = $('#txtTimeLimit', page).val() || '0'; timeLimit = parseFloat(timeLimit) * 3600000; trigger.MaxRuntimeMs = timeLimit || null; @@ -202,10 +208,10 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby return trigger; } }; - return function (view, params) { + export default function (view, params) { function onSubmit(e) { loading.show(); - var id = getParameterByName('id'); + const id = getParameterByName('id'); ApiClient.getScheduledTask(id).then(function (task) { task.Triggers.push(ScheduledTaskPage.getTriggerToAdd(view)); ApiClient.updateScheduledTaskTriggers(task.Id, task.Triggers).then(function () { @@ -226,7 +232,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby ScheduledTaskPage.showAddTriggerPopup(view); }); view.addEventListener('click', function (e) { - var btnDeleteTrigger = dom.parentWithClass(e.target, 'btnDeleteTrigger'); + const btnDeleteTrigger = dom.parentWithClass(e.target, 'btnDeleteTrigger'); if (btnDeleteTrigger) { ScheduledTaskPage.confirmDeleteTrigger(view, parseInt(btnDeleteTrigger.getAttribute('data-index'))); @@ -235,5 +241,6 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby view.addEventListener('viewshow', function () { ScheduledTaskPage.refreshScheduledTask(view); }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/scheduledtasks.html b/src/controllers/dashboard/scheduledtasks/scheduledtasks.html similarity index 100% rename from src/scheduledtasks.html rename to src/controllers/dashboard/scheduledtasks/scheduledtasks.html diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js index 5ce53cf6fe..81a34d4fa6 100644 --- a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js +++ b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js @@ -1,5 +1,14 @@ -define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date-fns', 'dfnshelper', 'listViewStyle', 'emby-button'], function ($, loading, events, globalize, serverNotifications, datefns, dfnshelper) { - 'use strict'; +import $ from 'jQuery'; +import loading from 'loading'; +import events from 'events'; +import globalize from 'globalize'; +import serverNotifications from 'serverNotifications'; +import * as datefns from 'date-fns'; +import dfnshelper from 'dfnshelper'; +import 'listViewStyle'; +import 'emby-button'; + +/* eslint-disable indent */ function reloadList(page) { ApiClient.getScheduledTasks({ @@ -17,10 +26,10 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date return a == b ? 0 : a < b ? -1 : 1; }); - var currentCategory; - var html = ''; - for (var i = 0; i < tasks.length; i++) { - var task = tasks[i]; + let currentCategory; + let html = ''; + for (let i = 0; i < tasks.length; i++) { + const task = tasks[i]; if (task.Category != currentCategory) { currentCategory = task.Category; if (currentCategory) { @@ -63,11 +72,11 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date } function getTaskProgressHtml(task) { - var html = ''; + let html = ''; if (task.State === 'Idle') { if (task.LastExecutionResult) { - var endtime = Date.parse(task.LastExecutionResult.EndTimeUtc); - var starttime = Date.parse(task.LastExecutionResult.StartTimeUtc); + const endtime = Date.parse(task.LastExecutionResult.EndTimeUtc); + const starttime = Date.parse(task.LastExecutionResult.StartTimeUtc); html += globalize.translate('LabelScheduledTaskLastRan', datefns.formatDistanceToNow(endtime, dfnshelper.localeWithSuffix), datefns.formatDistance(starttime, endtime, { locale: dfnshelper.getLocale() })); if (task.LastExecutionResult.Status === 'Failed') { @@ -79,7 +88,7 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date } } } else if (task.State === 'Running') { - var progress = (task.CurrentProgressPercentage || 0).toFixed(1); + const progress = (task.CurrentProgressPercentage || 0).toFixed(1); html += '
'; html += '
'; html += '
'; @@ -94,7 +103,7 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date } function setTaskButtonIcon(button, icon) { - var inner = button.querySelector('.material-icons'); + const inner = button.querySelector('.material-icons'); inner.classList.remove('stop', 'play_arrow'); inner.classList.add(icon); } @@ -114,10 +123,10 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date $(elem).parents('.listItem')[0].setAttribute('data-status', state); } - return function(view, params) { + export default function(view, params) { function updateTasks(tasks) { - for (var i = 0; i < tasks.length; i++) { - var task = tasks[i]; + for (let i = 0; i < tasks.length; i++) { + const task = tasks[i]; view.querySelector('#taskProgress' + task.Id).innerHTML = getTaskProgressHtml(task); updateTaskButton(view.querySelector('#btnTask' + task.Id), task.State); } @@ -146,12 +155,12 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date pollInterval && clearInterval(pollInterval); } - var pollInterval; - var serverId = ApiClient.serverId(); + let pollInterval; + const serverId = ApiClient.serverId(); $('.divScheduledTasks', view).on('click', '.btnStartTask', function() { - var button = this; - var id = button.getAttribute('data-taskid'); + const button = this; + const id = button.getAttribute('data-taskid'); ApiClient.startScheduledTask(id).then(function() { updateTaskButton(button, 'Running'); reloadList(view); @@ -159,8 +168,8 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date }); $('.divScheduledTasks', view).on('click', '.btnStopTask', function() { - var button = this; - var id = button.getAttribute('data-taskid'); + const button = this; + const id = button.getAttribute('data-taskid'); ApiClient.stopScheduledTask(id).then(function() { updateTaskButton(button, ''); reloadList(view); @@ -178,5 +187,6 @@ define(['jQuery', 'loading', 'events', 'globalize', 'serverNotifications', 'date reloadList(view); events.on(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate); }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/serveractivity.html b/src/controllers/dashboard/serveractivity.html similarity index 100% rename from src/serveractivity.html rename to src/controllers/dashboard/serveractivity.html diff --git a/src/controllers/dashboard/serveractivity.js b/src/controllers/dashboard/serveractivity.js index c48a2903ae..ed56126267 100644 --- a/src/controllers/dashboard/serveractivity.js +++ b/src/controllers/dashboard/serveractivity.js @@ -1,8 +1,10 @@ -define(['components/activitylog', 'globalize'], function (ActivityLog, globalize) { - 'use strict'; +import ActivityLog from 'components/activitylog'; +import globalize from 'globalize'; - return function (view, params) { - var activityLog; +/* eslint-disable indent */ + + export default function (view, params) { + let activityLog; if (params.useractivity !== 'false') { view.querySelector('.activityItems').setAttribute('data-useractivity', 'true'); @@ -27,5 +29,6 @@ define(['components/activitylog', 'globalize'], function (ActivityLog, globalize activityLog = null; }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/streamingsettings.html b/src/controllers/dashboard/streaming.html similarity index 95% rename from src/streamingsettings.html rename to src/controllers/dashboard/streaming.html index 2d51d9ee77..c3e7e783f2 100644 --- a/src/streamingsettings.html +++ b/src/controllers/dashboard/streaming.html @@ -12,7 +12,7 @@
diff --git a/src/controllers/dashboard/streaming.js b/src/controllers/dashboard/streaming.js index 37afe5a054..5db888dfc1 100644 --- a/src/controllers/dashboard/streaming.js +++ b/src/controllers/dashboard/streaming.js @@ -1,5 +1,9 @@ -define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMenu, loading, globalize) { - 'use strict'; +import $ from 'jQuery'; +import libraryMenu from 'libraryMenu'; +import loading from 'loading'; +import globalize from 'globalize'; + +/* eslint-disable indent */ function loadPage(page, config) { $('#txtRemoteClientBitrateLimit', page).val(config.RemoteClientBitrateLimit / 1e6 || ''); @@ -8,7 +12,7 @@ define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMe function onSubmit() { loading.show(); - var form = this; + const form = this; ApiClient.getServerConfiguration().then(function (config) { config.RemoteClientBitrateLimit = parseInt(1e6 * parseFloat($('#txtRemoteClientBitrateLimit', form).val() || '0')); ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult); @@ -23,7 +27,7 @@ define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMe name: globalize.translate('Transcoding') }, { href: 'playbackconfiguration.html', - name: globalize.translate('TabResumeSettings') + name: globalize.translate('ButtonResume') }, { href: 'streamingsettings.html', name: globalize.translate('TabStreaming') @@ -35,9 +39,10 @@ define(['jQuery', 'libraryMenu', 'loading', 'globalize'], function ($, libraryMe }).on('pageshow', '#streamingSettingsPage', function () { loading.show(); libraryMenu.setTabs('playback', 2, getTabs); - var page = this; + const page = this; ApiClient.getServerConfiguration().then(function (config) { loadPage(page, config); }); }); -}); + +/* eslint-enable indent */ diff --git a/src/useredit.html b/src/controllers/dashboard/users/useredit.html similarity index 98% rename from src/useredit.html rename to src/controllers/dashboard/users/useredit.html index c3a613bed4..f4dc8c096b 100644 --- a/src/useredit.html +++ b/src/controllers/dashboard/users/useredit.html @@ -11,10 +11,10 @@

${ButtonEditOtherUserPreferences} @@ -192,7 +192,7 @@

- ${TabProfile} + ${Profile} ${TabAccess} ${TabParentalControl} - ${TabPassword} + ${HeaderPassword}
@@ -59,7 +59,7 @@
diff --git a/src/controllers/dashboard/users/userlibraryaccess.js b/src/controllers/dashboard/users/userlibraryaccess.js index 5ea24e3da3..146777a0db 100644 --- a/src/controllers/dashboard/users/userlibraryaccess.js +++ b/src/controllers/dashboard/users/userlibraryaccess.js @@ -1,40 +1,44 @@ -define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, libraryMenu, globalize) { - 'use strict'; +import $ from 'jQuery'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; + +/* eslint-disable indent */ function triggerChange(select) { - var evt = document.createEvent('HTMLEvents'); + const evt = document.createEvent('HTMLEvents'); evt.initEvent('change', false, true); select.dispatchEvent(evt); } function loadMediaFolders(page, user, mediaFolders) { - var html = ''; + let html = ''; html += '

' + globalize.translate('HeaderLibraries') + '

'; html += '
'; - for (var i = 0, length = mediaFolders.length; i < length; i++) { - var folder = mediaFolders[i]; - var isChecked = user.Policy.EnableAllFolders || -1 != user.Policy.EnabledFolders.indexOf(folder.Id); - var checkedAttribute = isChecked ? ' checked="checked"' : ''; + for (let i = 0, length = mediaFolders.length; i < length; i++) { + const folder = mediaFolders[i]; + const isChecked = user.Policy.EnableAllFolders || user.Policy.EnabledFolders.indexOf(folder.Id) != -1; + const checkedAttribute = isChecked ? ' checked="checked"' : ''; html += ''; } html += '
'; page.querySelector('.folderAccess').innerHTML = html; - var chkEnableAllFolders = page.querySelector('#chkEnableAllFolders'); + const chkEnableAllFolders = page.querySelector('#chkEnableAllFolders'); chkEnableAllFolders.checked = user.Policy.EnableAllFolders; triggerChange(chkEnableAllFolders); } function loadChannels(page, user, channels) { - var html = ''; - html += '

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

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

' + globalize.translate('Channels') + '

'; html += '
'; - for (var i = 0, length = channels.length; i < length; i++) { - var folder = channels[i]; - var isChecked = user.Policy.EnableAllChannels || -1 != user.Policy.EnabledChannels.indexOf(folder.Id); - var checkedAttribute = isChecked ? ' checked="checked"' : ''; + for (let i = 0, length = channels.length; i < length; i++) { + const folder = channels[i]; + const isChecked = user.Policy.EnableAllChannels || user.Policy.EnabledChannels.indexOf(folder.Id) != -1; + const checkedAttribute = isChecked ? ' checked="checked"' : ''; html += ''; } @@ -51,13 +55,13 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, } function loadDevices(page, user, devices) { - var html = ''; + let html = ''; html += '

' + globalize.translate('HeaderDevices') + '

'; html += '
'; - for (var i = 0, length = devices.length; i < length; i++) { - var device = devices[i]; - var checkedAttribute = user.Policy.EnableAllDevices || -1 != user.Policy.EnabledDevices.indexOf(device.Id) ? ' checked="checked"' : ''; + for (let i = 0, length = devices.length; i < length; i++) { + const device = devices[i]; + const checkedAttribute = user.Policy.EnableAllDevices || user.Policy.EnabledDevices.indexOf(device.Id) != -1 ? ' checked="checked"' : ''; html += ''; } @@ -84,7 +88,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, function onSaveComplete(page) { loading.hide(); - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('SettingsSaved')); }); } @@ -116,9 +120,9 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, } function onSubmit() { - var page = $(this).parents('.page'); + const page = $(this).parents('.page'); loading.show(); - var userId = getParameterByName('userId'); + const userId = getParameterByName('userId'); ApiClient.getUser(userId).then(function (result) { saveUser(result, page); }); @@ -126,7 +130,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, } $(document).on('pageinit', '#userLibraryAccessPage', function () { - var page = this; + const page = this; $('#chkEnableAllDevices', page).on('change', function () { if (this.checked) { $('.deviceAccessListContainer', page).hide(); @@ -150,29 +154,30 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, }); $('.userLibraryAccessForm').off('submit', onSubmit).on('submit', onSubmit); }).on('pageshow', '#userLibraryAccessPage', function () { - var page = this; + const page = this; loading.show(); - var promise1; - var userId = getParameterByName('userId'); + let promise1; + const userId = getParameterByName('userId'); if (userId) { promise1 = ApiClient.getUser(userId); } else { - var deferred = $.Deferred(); + const deferred = $.Deferred(); deferred.resolveWith(null, [{ Configuration: {} }]); promise1 = deferred.promise(); } - var promise2 = Dashboard.getCurrentUser(); - var promise4 = ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', { + const promise2 = Dashboard.getCurrentUser(); + const promise4 = ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', { IsHidden: false })); - var promise5 = ApiClient.getJSON(ApiClient.getUrl('Channels')); - var promise6 = ApiClient.getJSON(ApiClient.getUrl('Devices')); + const promise5 = ApiClient.getJSON(ApiClient.getUrl('Channels')); + const promise6 = ApiClient.getJSON(ApiClient.getUrl('Devices')); Promise.all([promise1, promise2, promise4, promise5, promise6]).then(function (responses) { loadUser(page, responses[0], responses[1], responses[2].Items, responses[3].Items, responses[4].Items); }); }); -}); + +/* eslint-enable indent */ diff --git a/src/usernew.html b/src/controllers/dashboard/users/usernew.html similarity index 96% rename from src/usernew.html rename to src/controllers/dashboard/users/usernew.html index fac036aa8d..67f1f61ebc 100644 --- a/src/usernew.html +++ b/src/controllers/dashboard/users/usernew.html @@ -4,7 +4,7 @@
-

${HeaderAddUser}

+

${ButtonAddUser}

${Help}
@@ -49,7 +49,7 @@
@@ -40,7 +40,7 @@

${HeaderAccessSchedule}

-
@@ -51,7 +51,7 @@
diff --git a/src/controllers/dashboard/users/userparentalcontrol.js b/src/controllers/dashboard/users/userparentalcontrol.js index e8255512d6..efe00aec0b 100644 --- a/src/controllers/dashboard/users/userparentalcontrol.js +++ b/src/controllers/dashboard/users/userparentalcontrol.js @@ -1,17 +1,22 @@ -define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewStyle', 'paper-icon-button-light'], function ($, datetime, loading, libraryMenu, globalize) { - 'use strict'; +import $ from 'jQuery'; +import datetime from 'datetime'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; +import 'listViewStyle'; +import 'paper-icon-button-light'; + +/* eslint-disable indent */ function populateRatings(allParentalRatings, page) { - var html = ''; + let html = ''; html += ""; - var i; - var length; - var rating; - var ratings = []; + let rating; + const ratings = []; - for (i = 0, length = allParentalRatings.length; i < length; i++) { + for (let i = 0, length = allParentalRatings.length; i < length; i++) { if (rating = allParentalRatings[i], ratings.length) { - var lastRating = ratings[ratings.length - 1]; + const lastRating = ratings[ratings.length - 1]; if (lastRating.Value === rating.Value) { lastRating.Name += '/' + rating.Name; @@ -25,7 +30,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt }); } - for (i = 0, length = ratings.length; i < length; i++) { + for (let i = 0, length = ratings.length; i < length; i++) { rating = ratings[i]; html += "'; } @@ -34,35 +39,35 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt } function loadUnratedItems(page, user) { - var items = [{ - name: globalize.translate('OptionBlockBooks'), + const items = [{ + name: globalize.translate('Books'), value: 'Book' }, { - name: globalize.translate('OptionBlockChannelContent'), + name: globalize.translate('Channels'), value: 'ChannelContent' }, { - name: globalize.translate('OptionBlockLiveTvChannels'), + name: globalize.translate('LiveTV'), value: 'LiveTvChannel' }, { - name: globalize.translate('OptionBlockMovies'), + name: globalize.translate('Movies'), value: 'Movie' }, { - name: globalize.translate('OptionBlockMusic'), + name: globalize.translate('Music'), value: 'Music' }, { - name: globalize.translate('OptionBlockTrailers'), + name: globalize.translate('Trailers'), value: 'Trailer' }, { - name: globalize.translate('OptionBlockTvShows'), + name: globalize.translate('Shows'), value: 'Series' }]; - var html = ''; + let html = ''; html += '

' + globalize.translate('HeaderBlockItemsWithNoRating') + '

'; html += '
'; - for (var i = 0, length = items.length; i < length; i++) { - var item = items[i]; - var checkedAttribute = -1 != user.Policy.BlockUnratedItems.indexOf(item.value) ? ' checked="checked"' : ''; + for (let i = 0, length = items.length; i < length; i++) { + const item = items[i]; + const checkedAttribute = user.Policy.BlockUnratedItems.indexOf(item.value) != -1 ? ' checked="checked"' : ''; html += ''; } @@ -76,11 +81,11 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt loadUnratedItems(page, user); loadBlockedTags(page, user.Policy.BlockedTags); populateRatings(allParentalRatings, page); - var ratingValue = ''; + let ratingValue = ''; if (user.Policy.MaxParentalRating) { - for (var i = 0, length = allParentalRatings.length; i < length; i++) { - var rating = allParentalRatings[i]; + for (let i = 0, length = allParentalRatings.length; i < length; i++) { + const rating = allParentalRatings[i]; if (user.Policy.MaxParentalRating >= rating.Value) { ratingValue = rating.Value; @@ -101,8 +106,8 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt } function loadBlockedTags(page, tags) { - var html = tags.map(function (h) { - var li = '
'; + let html = tags.map(function (h) { + let li = '
'; li += '
'; li += '

'; li += h; @@ -116,10 +121,10 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt html = '
' + html + '
'; } - var elem = $('.blockedTags', page).html(html).trigger('create'); + const elem = $('.blockedTags', page).html(html).trigger('create'); $('.btnDeleteTag', elem).on('click', function () { - var tag = this.getAttribute('data-tag'); - var newTags = tags.filter(function (t) { + const tag = this.getAttribute('data-tag'); + const newTags = tags.filter(function (t) { return t != tag; }); loadBlockedTags(page, newTags); @@ -132,10 +137,10 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt } function renderAccessSchedule(page, schedules) { - var html = ''; - var index = 0; + let html = ''; + let index = 0; html += schedules.map(function (a) { - var itemHtml = ''; + let itemHtml = ''; itemHtml += '
'; itemHtml += '
'; itemHtml += '

'; @@ -148,7 +153,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt index++; return itemHtml; }).join(''); - var accessScheduleList = page.querySelector('.accessScheduleList'); + const accessScheduleList = page.querySelector('.accessScheduleList'); accessScheduleList.innerHTML = html; $('.btnDelete', accessScheduleList).on('click', function () { deleteAccessSchedule(page, schedules, parseInt(this.getAttribute('data-index'))); @@ -158,7 +163,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt function onSaveComplete(page) { loading.hide(); - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('SettingsSaved')); }); } @@ -178,8 +183,8 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt } function getDisplayTime(hours) { - var minutes = 0; - var pct = hours % 1; + let minutes = 0; + const pct = hours % 1; if (pct) { minutes = parseInt(60 * pct); @@ -190,14 +195,13 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt function showSchedulePopup(page, schedule, index) { schedule = schedule || {}; - - require(['components/accessSchedule/accessSchedule'], function (accessschedule) { + import('components/accessSchedule/accessSchedule').then(({default: accessschedule}) => { accessschedule.show({ schedule: schedule }).then(function (updatedSchedule) { - var schedules = getSchedulesFromPage(page); + const schedules = getSchedulesFromPage(page); - if (-1 == index) { + if (index == -1) { index = schedules.length; } @@ -224,13 +228,13 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt } function showBlockedTagPopup(page) { - require(['prompt'], function (prompt) { + import('prompt').then(({default: prompt}) => { prompt({ label: globalize.translate('LabelTag') }).then(function (value) { - var tags = getBlockedTagsFromPage(page); + const tags = getBlockedTagsFromPage(page); - if (-1 == tags.indexOf(value)) { + if (tags.indexOf(value) == -1) { tags.push(value); loadBlockedTags(page, tags); } @@ -240,9 +244,9 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt window.UserParentalControlPage = { onSubmit: function () { - var page = $(this).parents('.page'); + const page = $(this).parents('.page'); loading.show(); - var userId = getParameterByName('userId'); + const userId = getParameterByName('userId'); ApiClient.getUser(userId).then(function (result) { saveUser(result, page); }); @@ -250,7 +254,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt } }; $(document).on('pageinit', '#userParentalControlPage', function () { - var page = this; + const page = this; $('.btnAddSchedule', page).on('click', function () { showSchedulePopup(page, {}, -1); }); @@ -259,13 +263,14 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt }); $('.userParentalControlForm').off('submit', UserParentalControlPage.onSubmit).on('submit', UserParentalControlPage.onSubmit); }).on('pageshow', '#userParentalControlPage', function () { - var page = this; + const page = this; loading.show(); - var userId = getParameterByName('userId'); - var promise1 = ApiClient.getUser(userId); - var promise2 = ApiClient.getParentalRatings(); + const userId = getParameterByName('userId'); + const promise1 = ApiClient.getUser(userId); + const promise2 = ApiClient.getParentalRatings(); Promise.all([promise1, promise2]).then(function (responses) { loadUser(page, responses[0], responses[1]); }); }); -}); + +/* eslint-enable indent */ diff --git a/src/userpassword.html b/src/controllers/dashboard/users/userpassword.html similarity index 93% rename from src/userpassword.html rename to src/controllers/dashboard/users/userpassword.html index 119a0212de..285533cc4c 100644 --- a/src/userpassword.html +++ b/src/controllers/dashboard/users/userpassword.html @@ -9,10 +9,10 @@

- ${TabProfile} + ${Profile} ${TabAccess} ${TabParentalControl} - ${TabPassword} + ${HeaderPassword}
@@ -29,9 +29,9 @@

- +
@@ -58,7 +58,7 @@

diff --git a/src/controllers/dashboard/users/userprofilespage.js b/src/controllers/dashboard/users/userprofilespage.js index c691c665f6..bfd8d96d92 100644 --- a/src/controllers/dashboard/users/userprofilespage.js +++ b/src/controllers/dashboard/users/userprofilespage.js @@ -1,14 +1,24 @@ -define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-button-light', 'cardStyle', 'emby-button', 'indicators', 'flexStyles'], function (loading, dom, globalize, datefns, dfnshelper) { - 'use strict'; +import loading from 'loading'; +import dom from 'dom'; +import globalize from 'globalize'; +import * as datefns from 'date-fns'; +import dfnshelper from 'dfnshelper'; +import 'paper-icon-button-light'; +import 'cardStyle'; +import 'emby-button'; +import 'indicators'; +import 'flexStyles'; + +/* eslint-disable indent */ function deleteUser(page, id) { - var msg = globalize.translate('DeleteUserConfirmation'); + const msg = globalize.translate('DeleteUserConfirmation'); - require(['confirm'], function (confirm) { + import('confirm').then(({default: confirm}) => { confirm({ title: globalize.translate('DeleteUser'), text: msg, - confirmText: globalize.translate('ButtonDelete'), + confirmText: globalize.translate('Delete'), primary: 'delete' }).then(function () { loading.show(); @@ -20,10 +30,10 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but } function showUserMenu(elem) { - var card = dom.parentWithClass(elem, 'card'); - var page = dom.parentWithClass(card, 'page'); - var userId = card.getAttribute('data-userid'); - var menuItems = []; + const card = dom.parentWithClass(elem, 'card'); + const page = dom.parentWithClass(card, 'page'); + const userId = card.getAttribute('data-userid'); + const menuItems = []; menuItems.push({ name: globalize.translate('ButtonOpen'), id: 'open', @@ -40,12 +50,12 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but icon: 'person' }); menuItems.push({ - name: globalize.translate('ButtonDelete'), + name: globalize.translate('Delete'), id: 'delete', icon: 'delete' }); - require(['actionsheet'], function (actionsheet) { + import('actionsheet').then(({default: actionsheet}) => { actionsheet.show({ items: menuItems, positionTo: card, @@ -72,8 +82,8 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but } function getUserHtml(user, addConnectIndicator) { - var html = ''; - var cssClass = 'card squareCard scalableCard squareCard-scalable'; + let html = ''; + let cssClass = 'card squareCard scalableCard squareCard-scalable'; if (user.Policy.IsDisabled) { cssClass += ' grayscale'; @@ -84,7 +94,7 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but html += '
'; html += '
'; html += ''; - var imgUrl; + let imgUrl; if (user.PrimaryImageTag) { imgUrl = ApiClient.getUserImageUrl(user.Id, { @@ -94,7 +104,7 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but }); } - var imageClass = 'cardImage'; + let imageClass = 'cardImage'; if (user.Policy.IsDisabled) { imageClass += ' disabledUser'; @@ -118,8 +128,8 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but html += ''; html += '
'; html += '
'; - var lastSeen = getLastSeenText(user.LastActivityDate); - html += '' != lastSeen ? lastSeen : ' '; + const lastSeen = getLastSeenText(user.LastActivityDate); + html += lastSeen != '' ? lastSeen : ' '; html += '
'; html += '
'; html += '
'; @@ -145,125 +155,30 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but page.querySelector('.localUsers').innerHTML = getUserSectionHtml(users, true); } - function showPendingUserMenu(elem) { - var menuItems = []; - menuItems.push({ - name: globalize.translate('ButtonCancel'), - id: 'delete', - icon: 'delete' - }); - - require(['actionsheet'], function (actionsheet) { - var card = dom.parentWithClass(elem, 'card'); - var page = dom.parentWithClass(card, 'page'); - var id = card.getAttribute('data-id'); - actionsheet.show({ - items: menuItems, - positionTo: card, - callback: function (menuItemId) { - switch (menuItemId) { - case 'delete': - cancelAuthorization(page, id); - } - } - }); - }); - } - - function getPendingUserHtml(user) { - var html = ''; - html += "
"; - html += '
'; - html += '
'; - html += '
'; - html += ''; - - if (user.ImageUrl) { - html += '
"; - html += '
'; - } else { - html += ''; - } - - html += ''; - html += '
'; - html += '
'; - html += '
'; - html += ''; - html += '
'; - html += '
'; - html += user.UserName; - html += '
'; - html += '
'; - html += '
'; - return html + '
'; - } - - function renderPendingGuests(page, users) { - if (users.length) { - page.querySelector('.sectionPendingGuests').classList.remove('hide'); - } else { - page.querySelector('.sectionPendingGuests').classList.add('hide'); - } - - page.querySelector('.pending').innerHTML = users.map(getPendingUserHtml).join(''); - } - - // TODO cvium: maybe reuse for invitation system - function cancelAuthorization(page, id) { - loading.show(); - ApiClient.ajax({ - type: 'DELETE', - url: ApiClient.getUrl('Connect/Pending', { - Id: id - }) - }).then(function () { - loadData(page); - }); - } - function loadData(page) { loading.show(); ApiClient.getUsers().then(function (users) { renderUsers(page, users); loading.hide(); }); - // TODO cvium - renderPendingGuests(page, []); - // ApiClient.getJSON(ApiClient.getUrl("Connect/Pending")).then(function (pending) { - // - // }); - } - - function showInvitePopup(page) { - require(['components/guestinviter/guestinviter'], function (guestinviter) { - guestinviter.show().then(function () { - loadData(page); - }); - }); } pageIdOn('pageinit', 'userProfilesPage', function () { - var page = this; + const page = this; page.querySelector('.btnAddUser').addEventListener('click', function() { Dashboard.navigate('usernew.html'); }); page.querySelector('.localUsers').addEventListener('click', function (e__e) { - var btnUserMenu = dom.parentWithClass(e__e.target, 'btnUserMenu'); + const btnUserMenu = dom.parentWithClass(e__e.target, 'btnUserMenu'); if (btnUserMenu) { showUserMenu(btnUserMenu); } }); - page.querySelector('.pending').addEventListener('click', function (e__r) { - var btnUserMenu = dom.parentWithClass(e__r.target, 'btnUserMenu'); - - if (btnUserMenu) { - showPendingUserMenu(btnUserMenu); - } - }); }); + pageIdOn('pagebeforeshow', 'userProfilesPage', function () { loadData(this); }); -}); + +/* eslint-enable indent */ diff --git a/src/edititemmetadata.html b/src/controllers/edititemmetadata.html similarity index 100% rename from src/edititemmetadata.html rename to src/controllers/edititemmetadata.html diff --git a/src/controllers/edititemmetadata.js b/src/controllers/edititemmetadata.js index 2bfc5e560d..57c72dda28 100644 --- a/src/controllers/edititemmetadata.js +++ b/src/controllers/edititemmetadata.js @@ -1,31 +1,30 @@ -define(['loading', 'scripts/editorsidebar'], function (loading) { - 'use strict'; +import loading from 'loading'; +import 'scripts/editorsidebar'; - function reload(context, itemId) { - loading.show(); +function reload(context, itemId) { + loading.show(); - if (itemId) { - require(['metadataEditor'], function (metadataEditor) { - metadataEditor.embed(context.querySelector('.editPageInnerContent'), itemId, ApiClient.serverInfo().Id); - }); - } else { - context.querySelector('.editPageInnerContent').innerHTML = ''; - loading.hide(); - } + if (itemId) { + import('metadataEditor').then(({ default: metadataEditor }) => { + metadataEditor.embed(context.querySelector('.editPageInnerContent'), itemId, ApiClient.serverInfo().Id); + }); + } else { + context.querySelector('.editPageInnerContent').innerHTML = ''; + loading.hide(); } +} - return function (view, params) { - view.addEventListener('viewshow', function () { - reload(this, MetadataEditor.getCurrentItemId()); - }); - MetadataEditor.setCurrentItemId(null); - view.querySelector('.libraryTree').addEventListener('itemclicked', function (event) { - var data = event.detail; +export default function (view, params) { + view.addEventListener('viewshow', function () { + reload(this, MetadataEditor.getCurrentItemId()); + }); + MetadataEditor.setCurrentItemId(null); + view.querySelector('.libraryTree').addEventListener('itemclicked', function (event) { + var data = event.detail; - if (data.id != MetadataEditor.getCurrentItemId()) { - MetadataEditor.setCurrentItemId(data.id); - reload(view, data.id); - } - }); - }; -}); + if (data.id != MetadataEditor.getCurrentItemId()) { + MetadataEditor.setCurrentItemId(data.id); + reload(view, data.id); + } + }); +} diff --git a/src/controllers/favorites.js b/src/controllers/favorites.js index b4c7936239..fc37f4eef4 100644 --- a/src/controllers/favorites.js +++ b/src/controllers/favorites.js @@ -1,5 +1,14 @@ -define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'apphost', 'layoutManager', 'focusManager', 'emby-itemscontainer', 'emby-scroller'], function (appRouter, cardBuilder, dom, globalize, connectionManager, appHost, layoutManager, focusManager) { - 'use strict'; +import appRouter from 'appRouter'; +import cardBuilder from 'cardBuilder'; +import dom from 'dom'; +import globalize from 'globalize'; +import appHost from 'apphost'; +import layoutManager from 'layoutManager'; +import focusManager from 'focusManager'; +import 'emby-itemscontainer'; +import 'emby-scroller'; + +/* eslint-disable indent */ function enableScrollX() { return true; @@ -19,7 +28,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap function getSections() { return [{ - name: 'HeaderFavoriteMovies', + name: 'Movies', types: 'Movie', shape: getPosterShape(), showTitle: true, @@ -28,7 +37,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap overlayText: false, centerText: true }, { - name: 'HeaderFavoriteShows', + name: 'Shows', types: 'Series', shape: getPosterShape(), showTitle: true, @@ -37,7 +46,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap overlayText: false, centerText: true }, { - name: 'HeaderFavoriteEpisodes', + name: 'Episodes', types: 'Episode', shape: getThumbShape(), preferThumb: false, @@ -47,7 +56,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap overlayText: false, centerText: true }, { - name: 'HeaderFavoriteVideos', + name: 'Videos', types: 'Video', shape: getThumbShape(), preferThumb: true, @@ -56,7 +65,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap overlayText: false, centerText: true }, { - name: 'HeaderFavoriteCollections', + name: 'Collections', types: 'BoxSet', shape: getPosterShape(), showTitle: true, @@ -64,7 +73,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap overlayText: false, centerText: true }, { - name: 'HeaderFavoritePlaylists', + name: 'Playlists', types: 'Playlist', shape: getSquareShape(), preferThumb: false, @@ -75,7 +84,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap overlayPlayButton: true, coverImage: true }, { - name: 'HeaderFavoritePeople', + name: 'People', types: 'Person', shape: getPosterShape(), preferThumb: false, @@ -86,7 +95,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap overlayPlayButton: true, coverImage: true }, { - name: 'HeaderFavoriteArtists', + name: 'Artists', types: 'MusicArtist', shape: getSquareShape(), preferThumb: false, @@ -97,7 +106,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap overlayPlayButton: true, coverImage: true }, { - name: 'HeaderFavoriteAlbums', + name: 'Albums', types: 'MusicAlbum', shape: getSquareShape(), preferThumb: false, @@ -108,7 +117,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap overlayPlayButton: true, coverImage: true }, { - name: 'HeaderFavoriteSongs', + name: 'Songs', types: 'Audio', shape: getSquareShape(), preferThumb: false, @@ -120,7 +129,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap action: 'instantmix', coverImage: true }, { - name: 'HeaderFavoriteBooks', + name: 'Books', types: 'Book', shape: getPosterShape(), showTitle: true, @@ -133,8 +142,8 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap function getFetchDataFn(section) { return function () { - var apiClient = this.apiClient; - var options = { + const apiClient = this.apiClient; + const options = { SortBy: (section.types, 'SeriesName,SortName'), SortOrder: 'Ascending', Filters: 'IsFavorite', @@ -145,13 +154,13 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap EnableTotalRecordCount: false }; options.Limit = 20; - var userId = apiClient.getCurrentUserId(); + const userId = apiClient.getCurrentUserId(); - if ('MusicArtist' === section.types) { + if (section.types === 'MusicArtist') { return apiClient.getArtists(userId, options); } - if ('Person' === section.types) { + if (section.types === 'Person') { return apiClient.getPeople(userId, options); } @@ -170,17 +179,16 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap function getItemsHtmlFn(section) { return function (items) { - var supportsImageAnalysis = appHost.supports('imageanalysis'); - var cardLayout = (appHost.preferVisualCards || supportsImageAnalysis) && section.autoCardLayout && section.showTitle; + let cardLayout = appHost.preferVisualCards && section.autoCardLayout && section.showTitle; cardLayout = false; - var serverId = this.apiClient.serverId(); - var leadingButtons = layoutManager.tv ? [{ + const serverId = this.apiClient.serverId(); + const leadingButtons = layoutManager.tv ? [{ name: globalize.translate('All'), id: 'more', icon: 'favorite', routeUrl: getRouteUrl(section, serverId) }] : null; - var lines = 0; + let lines = 0; if (section.showTitle) { lines++; @@ -199,7 +207,7 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap preferThumb: section.preferThumb, shape: section.shape, centerText: section.centerText && !cardLayout, - overlayText: false !== section.overlayText, + overlayText: section.overlayText !== false, showTitle: section.showTitle, showYear: section.showYear, showParentTitle: section.showParentTitle, @@ -216,23 +224,12 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap }; } - function FavoritesTab(view, params) { - this.view = view; - this.params = params; - this.apiClient = connectionManager.currentApiClient(); - this.sectionsContainer = view.querySelector('.sections'); - createSections(this, this.sectionsContainer, this.apiClient); - } - function createSections(instance, elem, apiClient) { - var i; - var length; - var sections = getSections(); - var html = ''; + const sections = getSections(); + let html = ''; - for (i = 0, length = sections.length; i < length; i++) { - var section = sections[i]; - var sectionClass = 'verticalSection'; + for (const section of sections) { + let sectionClass = 'verticalSection'; if (!section.showTitle) { sectionClass += ' verticalSection-extrabottompadding'; @@ -258,23 +255,32 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap } elem.innerHTML = html; - var elems = elem.querySelectorAll('.itemsContainer'); + const elems = elem.querySelectorAll('.itemsContainer'); - for (i = 0, length = elems.length; i < length; i++) { - var itemsContainer = elems[i]; + for (let i = 0, length = elems.length; i < length; i++) { + const itemsContainer = elems[i]; itemsContainer.fetchData = getFetchDataFn(sections[i]).bind(instance); itemsContainer.getItemsHtml = getItemsHtmlFn(sections[i]).bind(instance); itemsContainer.parentContainer = dom.parentWithClass(itemsContainer, 'verticalSection'); } } - FavoritesTab.prototype.onResume = function (options) { - var promises = (this.apiClient, []); - var view = this.view; - var elems = this.sectionsContainer.querySelectorAll('.itemsContainer'); +class FavoritesTab { + constructor(view, params) { + this.view = view; + this.params = params; + this.apiClient = window.connectionManager.currentApiClient(); + this.sectionsContainer = view.querySelector('.sections'); + createSections(this, this.sectionsContainer, this.apiClient); + } - for (var i = 0, length = elems.length; i < length; i++) { - promises.push(elems[i].resume(options)); + onResume(options) { + const promises = (this.apiClient, []); + const view = this.view; + const elems = this.sectionsContainer.querySelectorAll('.itemsContainer'); + + for (const elem of elems) { + promises.push(elem.resume(options)); } Promise.all(promises).then(function () { @@ -282,30 +288,32 @@ define(['appRouter', 'cardBuilder', 'dom', 'globalize', 'connectionManager', 'ap focusManager.autoFocus(view); } }); - }; + } - FavoritesTab.prototype.onPause = function () { - var elems = this.sectionsContainer.querySelectorAll('.itemsContainer'); + onPause() { + const elems = this.sectionsContainer.querySelectorAll('.itemsContainer'); - for (var i = 0, length = elems.length; i < length; i++) { - elems[i].pause(); + for (const elem of elems) { + elem.pause(); } - }; + } - FavoritesTab.prototype.destroy = function () { + destroy() { this.view = null; this.params = null; this.apiClient = null; - var elems = this.sectionsContainer.querySelectorAll('.itemsContainer'); + const elems = this.sectionsContainer.querySelectorAll('.itemsContainer'); - for (var i = 0, length = elems.length; i < length; i++) { - elems[i].fetchData = null; - elems[i].getItemsHtml = null; - elems[i].parentContainer = null; + for (const elem of elems) { + elem.fetchData = null; + elem.getItemsHtml = null; + elem.parentContainer = null; } this.sectionsContainer = null; - }; + } +} - return FavoritesTab; -}); +export default FavoritesTab; + +/* eslint-enable indent */ diff --git a/src/home.html b/src/controllers/home.html similarity index 100% rename from src/home.html rename to src/controllers/home.html diff --git a/src/controllers/home.js b/src/controllers/home.js index 9a4cea2227..72e326e46b 100644 --- a/src/controllers/home.js +++ b/src/controllers/home.js @@ -1,7 +1,33 @@ -define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-scroller'], function (TabbedView, globalize, require) { - 'use strict'; +import TabbedView from 'tabbedView'; +import globalize from 'globalize'; +import 'emby-tabs'; +import 'emby-button'; +import 'emby-scroller'; - function getTabs() { +class HomeView extends TabbedView { + constructor(view, params) { + super(view, params); + } + + setTitle() { + Emby.Page.setTitle(null); + } + + onPause() { + super.onPause(this); + document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); + } + + onResume(options) { + super.onResume(this, options); + document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); + } + + getDefaultTabIndex() { + return 0; + } + + getTabs() { return [{ name: globalize.translate('Home') }, { @@ -9,35 +35,25 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby- }]; } - function getDefaultTabIndex() { - return 0; - } - - function getRequirePromise(deps) { - return new Promise(function (resolve, reject) { - require(deps, resolve); - }); - } - - function getTabController(index) { - if (null == index) { + getTabController(index) { + if (index == null) { throw new Error('index cannot be null'); } - var depends = []; + let depends = ''; switch (index) { case 0: - depends.push('controllers/hometab'); + depends = 'controllers/hometab'; break; case 1: - depends.push('controllers/favorites'); + depends = 'controllers/favorites'; } - var instance = this; - return getRequirePromise(depends).then(function (controllerFactory) { - var controller = instance.tabControllers[index]; + const instance = this; + return import(depends).then(({ default: controllerFactory }) => { + let controller = instance.tabControllers[index]; if (!controller) { controller = new controllerFactory(instance.view.querySelector(".tabContent[data-index='" + index + "']"), instance.params); @@ -47,29 +63,6 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby- return controller; }); } +} - function HomeView(view, params) { - TabbedView.call(this, view, params); - } - - Object.assign(HomeView.prototype, TabbedView.prototype); - HomeView.prototype.getTabs = getTabs; - HomeView.prototype.getDefaultTabIndex = getDefaultTabIndex; - HomeView.prototype.getTabController = getTabController; - - HomeView.prototype.setTitle = function () { - Emby.Page.setTitle(null); - }; - - HomeView.prototype.onPause = function () { - TabbedView.prototype.onPause.call(this); - document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); - }; - - HomeView.prototype.onResume = function (options) { - TabbedView.prototype.onResume.call(this, options); - document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); - }; - - return HomeView; -}); +export default HomeView; diff --git a/src/controllers/hometab.js b/src/controllers/hometab.js index 8e2a1f92e7..ff56e08d14 100644 --- a/src/controllers/hometab.js +++ b/src/controllers/hometab.js @@ -1,27 +1,20 @@ -define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManager', 'focusManager', 'homeSections', 'emby-itemscontainer'], function (userSettings, loading, connectionManager, appHost, layoutManager, focusManager, homeSections) { - 'use strict'; +import * as userSettings from 'userSettings'; +import loading from 'loading'; +import focusManager from 'focusManager'; +import homeSections from 'homeSections'; +import 'emby-itemscontainer'; - function HomeTab(view, params) { +class HomeTab { + constructor(view, params) { this.view = view; this.params = params; - this.apiClient = connectionManager.currentApiClient(); + this.apiClient = window.connectionManager.currentApiClient(); this.sectionsContainer = view.querySelector('.sections'); view.querySelector('.sections').addEventListener('settingschange', onHomeScreenSettingsChanged.bind(this)); } - - function onHomeScreenSettingsChanged() { - this.sectionsRendered = false; - - if (!this.paused) { - this.onResume({ - refresh: true - }); - } - } - - HomeTab.prototype.onResume = function (options) { + onResume(options) { if (this.sectionsRendered) { - var sectionsContainer = this.sectionsContainer; + const sectionsContainer = this.sectionsContainer; if (sectionsContainer) { return homeSections.resume(sectionsContainer, options); @@ -31,8 +24,8 @@ define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManage } loading.show(); - var view = this.view; - var apiClient = this.apiClient; + const view = this.view; + const apiClient = this.apiClient; this.destroyHomeSections(); this.sectionsRendered = true; return apiClient.getCurrentUser().then(function (user) { @@ -44,31 +37,38 @@ define(['userSettings', 'loading', 'connectionManager', 'apphost', 'layoutManage loading.hide(); }); }); - }; - - HomeTab.prototype.onPause = function () { - var sectionsContainer = this.sectionsContainer; + } + onPause() { + const sectionsContainer = this.sectionsContainer; if (sectionsContainer) { homeSections.pause(sectionsContainer); } - }; - - HomeTab.prototype.destroy = function () { + } + destroy() { this.view = null; this.params = null; this.apiClient = null; this.destroyHomeSections(); this.sectionsContainer = null; - }; - - HomeTab.prototype.destroyHomeSections = function () { - var sectionsContainer = this.sectionsContainer; + } + destroyHomeSections() { + const sectionsContainer = this.sectionsContainer; if (sectionsContainer) { homeSections.destroySections(sectionsContainer); } - }; + } +} - return HomeTab; -}); +function onHomeScreenSettingsChanged() { + this.sectionsRendered = false; + + if (!this.paused) { + this.onResume({ + refresh: true + }); + } +} + +export default HomeTab; diff --git a/src/controllers/itemDetails/index.html b/src/controllers/itemDetails/index.html index ddb7be3aec..b2604e0341 100644 --- a/src/controllers/itemDetails/index.html +++ b/src/controllers/itemDetails/index.html @@ -7,24 +7,24 @@
-
-
+
+
-
+
- -
-
-
+
@@ -139,22 +139,22 @@

-
-
+
+
-
-

${HeaderSchedule}

+
+

${Schedule}

-

${HeaderNextUp}

+

${NextUp}

@@ -173,7 +173,9 @@

${HeaderAdditionalParts}

-
+
+
+
@@ -191,7 +193,7 @@
-

${HeaderCastCrew}

+

${HeaderCastAndCrew}

@@ -203,13 +205,17 @@
-

${HeaderSpecialFeatures}

-
+

${SpecialFeatures}

+
+
+
-

${HeaderMusicVideos}

-
+

${MusicVideos}

+
+
+
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index 45c43c19be..c68fe15feb 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -1,1921 +1,1970 @@ -define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSettings', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'dom', 'indicators', 'imageLoader', 'libraryMenu', 'globalize', 'browser', 'events', 'playbackManager', 'scrollStyles', 'emby-itemscontainer', 'emby-checkbox', 'emby-button', 'emby-playstatebutton', 'emby-ratingbutton', 'emby-scroller', 'emby-select'], function (loading, appRouter, layoutManager, connectionManager, userSettings, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, dom, indicators, imageLoader, libraryMenu, globalize, browser, events, playbackManager) { - 'use strict'; +import appHost from 'apphost'; +import loading from 'loading'; +import appRouter from 'appRouter'; +import itemShortcuts from 'itemShortcuts'; +import layoutManager from 'layoutManager'; +import * as userSettings from 'userSettings'; +import cardBuilder from 'cardBuilder'; +import datetime from 'datetime'; +import mediaInfo from 'mediaInfo'; +import backdrop from 'backdrop'; +import listView from 'listView'; +import itemContextMenu from 'itemContextMenu'; +import itemHelper from 'itemHelper'; +import dom from 'dom'; +import indicators from 'indicators'; +import imageLoader from 'imageLoader'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; +import browser from 'browser'; +import events from 'events'; +import playbackManager from 'playbackManager'; +import 'scrollStyles'; +import 'emby-itemscontainer'; +import 'emby-checkbox'; +import 'emby-button'; +import 'emby-playstatebutton'; +import 'emby-ratingbutton'; +import 'emby-scroller'; +import 'emby-select'; - function getPromise(apiClient, params) { - var id = params.id; +function getPromise(apiClient, params) { + const id = params.id; - if (id) { - return apiClient.getItem(apiClient.getCurrentUserId(), id); - } - - if (params.seriesTimerId) { - return apiClient.getLiveTvSeriesTimer(params.seriesTimerId); - } - - if (params.genre) { - return apiClient.getGenre(params.genre, apiClient.getCurrentUserId()); - } - - if (params.musicgenre) { - return apiClient.getMusicGenre(params.musicgenre, apiClient.getCurrentUserId()); - } - - if (params.musicartist) { - return apiClient.getArtist(params.musicartist, apiClient.getCurrentUserId()); - } - - throw new Error('Invalid request'); + if (id) { + return apiClient.getItem(apiClient.getCurrentUserId(), id); } - function hideAll(page, className, show) { - for (const elem of page.querySelectorAll('.' + className)) { - if (show) { - elem.classList.remove('hide'); - } else { - elem.classList.add('hide'); - } + if (params.seriesTimerId) { + return apiClient.getLiveTvSeriesTimer(params.seriesTimerId); + } + + if (params.genre) { + return apiClient.getGenre(params.genre, apiClient.getCurrentUserId()); + } + + if (params.musicgenre) { + return apiClient.getMusicGenre(params.musicgenre, apiClient.getCurrentUserId()); + } + + if (params.musicartist) { + return apiClient.getArtist(params.musicartist, apiClient.getCurrentUserId()); + } + + throw new Error('Invalid request'); +} + +function hideAll(page, className, show) { + for (const elem of page.querySelectorAll('.' + className)) { + if (show) { + elem.classList.remove('hide'); + } else { + elem.classList.add('hide'); } } +} - function getContextMenuOptions(item, user, button) { - var options = { - item: item, - open: false, - play: false, - playAllFromHere: false, - queueAllFromHere: false, - positionTo: button, - cancelTimer: false, - record: false, - deleteItem: item.CanDelete === true, - shuffle: false, - instantMix: false, - user: user, - share: true - }; - return options; - } +function getContextMenuOptions(item, user, button) { + return { + item: item, + open: false, + play: false, + playAllFromHere: false, + queueAllFromHere: false, + positionTo: button, + cancelTimer: false, + record: false, + deleteItem: item.CanDelete === true, + shuffle: false, + instantMix: false, + user: user, + share: true + }; +} - function getProgramScheduleHtml(items) { - var html = ''; - html += '
'; - html += listView.getListViewHtml({ - items: items, - enableUserDataButtons: false, - image: true, - imageSource: 'channel', - showProgramDateTime: true, - showChannel: false, - mediaInfo: false, - action: 'none', - moreButton: false, - recordButton: false - }); - html += '
'; +function getProgramScheduleHtml(items) { + let html = ''; - return html; - } + html += '
'; + html += listView.getListViewHtml({ + items: items, + enableUserDataButtons: false, + image: true, + imageSource: 'channel', + showProgramDateTime: true, + showChannel: false, + mediaInfo: false, + action: 'none', + moreButton: false, + recordButton: false + }); - function renderSeriesTimerSchedule(page, apiClient, seriesTimerId) { - apiClient.getLiveTvTimers({ - UserId: apiClient.getCurrentUserId(), - ImageTypeLimit: 1, - EnableImageTypes: 'Primary,Backdrop,Thumb', - SortBy: 'StartDate', - EnableTotalRecordCount: false, - EnableUserData: false, - SeriesTimerId: seriesTimerId, - Fields: 'ChannelInfo,ChannelImage' - }).then(function (result) { - if (result.Items.length && result.Items[0].SeriesTimerId != seriesTimerId) { - result.Items = []; - } + html += '
'; - var html = getProgramScheduleHtml(result.Items); - var scheduleTab = page.querySelector('.seriesTimerSchedule'); - scheduleTab.innerHTML = html; - imageLoader.lazyChildren(scheduleTab); - }); - } + return html; +} - function renderTimerEditor(page, item, apiClient, user) { - if ('Recording' !== item.Type || !user.Policy.EnableLiveTvManagement || !item.TimerId || 'InProgress' !== item.Status) { - return void hideAll(page, 'btnCancelTimer'); +function renderSeriesTimerSchedule(page, apiClient, seriesTimerId) { + apiClient.getLiveTvTimers({ + UserId: apiClient.getCurrentUserId(), + ImageTypeLimit: 1, + EnableImageTypes: 'Primary,Backdrop,Thumb', + SortBy: 'StartDate', + EnableTotalRecordCount: false, + EnableUserData: false, + SeriesTimerId: seriesTimerId, + Fields: 'ChannelInfo,ChannelImage' + }).then(function (result) { + if (result.Items.length && result.Items[0].SeriesTimerId != seriesTimerId) { + result.Items = []; } - hideAll(page, 'btnCancelTimer', true); + const html = getProgramScheduleHtml(result.Items); + const scheduleTab = page.querySelector('.seriesTimerSchedule'); + scheduleTab.innerHTML = html; + imageLoader.lazyChildren(scheduleTab); + }); +} + +function renderTimerEditor(page, item, apiClient, user) { + if (item.Type !== 'Recording' || !user.Policy.EnableLiveTvManagement || !item.TimerId || item.Status !== 'InProgress') { + return void hideAll(page, 'btnCancelTimer'); } - function renderSeriesTimerEditor(page, item, apiClient, user) { - if ('SeriesTimer' !== item.Type) { - return void hideAll(page, 'btnCancelSeriesTimer'); - } + hideAll(page, 'btnCancelTimer', true); +} - if (user.Policy.EnableLiveTvManagement) { - require(['seriesRecordingEditor'], function (seriesRecordingEditor) { - seriesRecordingEditor.embed(item, apiClient.serverId(), { - context: page.querySelector('.seriesRecordingEditor') - }); - }); - - page.querySelector('.seriesTimerScheduleSection').classList.remove('hide'); - hideAll(page, 'btnCancelSeriesTimer', true); - return void renderSeriesTimerSchedule(page, apiClient, item.Id); - } - - page.querySelector('.seriesTimerScheduleSection').classList.add('hide'); +function renderSeriesTimerEditor(page, item, apiClient, user) { + if (item.Type !== 'SeriesTimer') { return void hideAll(page, 'btnCancelSeriesTimer'); } - function renderTrackSelections(page, instance, item, forceReload) { - var select = page.querySelector('.selectSource'); - - if (!item.MediaSources || !itemHelper.supportsMediaSourceSelection(item) || -1 === playbackManager.getSupportedCommands().indexOf('PlayMediaSource') || !playbackManager.canPlay(item)) { - page.querySelector('.trackSelections').classList.add('hide'); - select.innerHTML = ''; - page.querySelector('.selectVideo').innerHTML = ''; - page.querySelector('.selectAudio').innerHTML = ''; - page.querySelector('.selectSubtitles').innerHTML = ''; - return; - } - - var mediaSources = item.MediaSources; - instance._currentPlaybackMediaSources = mediaSources; - - page.querySelector('.trackSelections').classList.remove('hide'); - - select.setLabel(globalize.translate('LabelVersion')); - - var currentValue = select.value; - - var selectedId = mediaSources[0].Id; - select.innerHTML = mediaSources.map(function (v) { - var selected = v.Id === selectedId ? ' selected' : ''; - return ''; - }).join(''); - - if (mediaSources.length > 1) { - page.querySelector('.selectSourceContainer').classList.remove('hide'); - } else { - page.querySelector('.selectSourceContainer').classList.add('hide'); - } - - if (select.value !== currentValue || forceReload) { - renderVideoSelections(page, mediaSources); - renderAudioSelections(page, mediaSources); - renderSubtitleSelections(page, mediaSources); - } + if (user.Policy.EnableLiveTvManagement) { + import('seriesRecordingEditor').then(({ default: seriesRecordingEditor }) => { + seriesRecordingEditor.embed(item, apiClient.serverId(), { + context: page.querySelector('.seriesRecordingEditor') + }); + }); + page.querySelector('.seriesTimerScheduleSection').classList.remove('hide'); + hideAll(page, 'btnCancelSeriesTimer', true); + return void renderSeriesTimerSchedule(page, apiClient, item.Id); } - function renderVideoSelections(page, mediaSources) { - var mediaSourceId = page.querySelector('.selectSource').value; - var mediaSource = mediaSources.filter(function (m) { - return m.Id === mediaSourceId; - })[0]; - var tracks = mediaSource.MediaStreams.filter(function (m) { - return m.Type === 'Video'; - }); - var select = page.querySelector('.selectVideo'); - select.setLabel(globalize.translate('LabelVideo')); - var selectedId = tracks.length ? tracks[0].Index : -1; - select.innerHTML = tracks.map(function (v) { - var selected = v.Index === selectedId ? ' selected' : ''; - var titleParts = []; - var resolutionText = mediaInfo.getResolutionText(v); + page.querySelector('.seriesTimerScheduleSection').classList.add('hide'); + return void hideAll(page, 'btnCancelSeriesTimer'); +} - if (resolutionText) { - titleParts.push(resolutionText); - } +function renderTrackSelections(page, instance, item, forceReload) { + const select = page.querySelector('.selectSource'); - if (v.Codec) { - titleParts.push(v.Codec.toUpperCase()); - } + if (!item.MediaSources || !itemHelper.supportsMediaSourceSelection(item) || playbackManager.getSupportedCommands().indexOf('PlayMediaSource') === -1 || !playbackManager.canPlay(item)) { + page.querySelector('.trackSelections').classList.add('hide'); + select.innerHTML = ''; + page.querySelector('.selectVideo').innerHTML = ''; + page.querySelector('.selectAudio').innerHTML = ''; + page.querySelector('.selectSubtitles').innerHTML = ''; + return; + } - return ''; - }).join(''); + const mediaSources = item.MediaSources; + instance._currentPlaybackMediaSources = mediaSources; + + page.querySelector('.trackSelections').classList.remove('hide'); + select.setLabel(globalize.translate('LabelVersion')); + + const currentValue = select.value; + + const selectedId = mediaSources[0].Id; + select.innerHTML = mediaSources.map(function (v) { + const selected = v.Id === selectedId ? ' selected' : ''; + return ''; + }).join(''); + + if (mediaSources.length > 1) { + page.querySelector('.selectSourceContainer').classList.remove('hide'); + } else { + page.querySelector('.selectSourceContainer').classList.add('hide'); + } + + if (select.value !== currentValue || forceReload) { + renderVideoSelections(page, mediaSources); + renderAudioSelections(page, mediaSources); + renderSubtitleSelections(page, mediaSources); + } +} + +function renderVideoSelections(page, mediaSources) { + const mediaSourceId = page.querySelector('.selectSource').value; + const mediaSource = mediaSources.filter(function (m) { + return m.Id === mediaSourceId; + })[0]; + + const tracks = mediaSource.MediaStreams.filter(function (m) { + return m.Type === 'Video'; + }); + + const select = page.querySelector('.selectVideo'); + select.setLabel(globalize.translate('Video')); + const selectedId = tracks.length ? tracks[0].Index : -1; + select.innerHTML = tracks.map(function (v) { + const selected = v.Index === selectedId ? ' selected' : ''; + const titleParts = []; + const resolutionText = mediaInfo.getResolutionText(v); + + if (resolutionText) { + titleParts.push(resolutionText); + } + + if (v.Codec) { + titleParts.push(v.Codec.toUpperCase()); + } + + return ''; + }).join(''); + select.setAttribute('disabled', 'disabled'); + + if (tracks.length) { + page.querySelector('.selectVideoContainer').classList.remove('hide'); + } else { + page.querySelector('.selectVideoContainer').classList.add('hide'); + } +} + +function renderAudioSelections(page, mediaSources) { + const mediaSourceId = page.querySelector('.selectSource').value; + const mediaSource = mediaSources.filter(function (m) { + return m.Id === mediaSourceId; + })[0]; + const tracks = mediaSource.MediaStreams.filter(function (m) { + return m.Type === 'Audio'; + }); + const select = page.querySelector('.selectAudio'); + select.setLabel(globalize.translate('Audio')); + const selectedId = mediaSource.DefaultAudioStreamIndex; + select.innerHTML = tracks.map(function (v) { + const selected = v.Index === selectedId ? ' selected' : ''; + return ''; + }).join(''); + + if (tracks.length > 1) { + select.removeAttribute('disabled'); + } else { select.setAttribute('disabled', 'disabled'); - - if (tracks.length) { - page.querySelector('.selectVideoContainer').classList.remove('hide'); - } else { - page.querySelector('.selectVideoContainer').classList.add('hide'); - } } - function renderAudioSelections(page, mediaSources) { - var mediaSourceId = page.querySelector('.selectSource').value; - var mediaSource = mediaSources.filter(function (m) { - return m.Id === mediaSourceId; - })[0]; - var tracks = mediaSource.MediaStreams.filter(function (m) { - return 'Audio' === m.Type; - }); - var select = page.querySelector('.selectAudio'); - select.setLabel(globalize.translate('LabelAudio')); - var selectedId = mediaSource.DefaultAudioStreamIndex; - select.innerHTML = tracks.map(function (v) { - var selected = v.Index === selectedId ? ' selected' : ''; + if (tracks.length) { + page.querySelector('.selectAudioContainer').classList.remove('hide'); + } else { + page.querySelector('.selectAudioContainer').classList.add('hide'); + } +} + +function renderSubtitleSelections(page, mediaSources) { + const mediaSourceId = page.querySelector('.selectSource').value; + const mediaSource = mediaSources.filter(function (m) { + return m.Id === mediaSourceId; + })[0]; + const tracks = mediaSource.MediaStreams.filter(function (m) { + return m.Type === 'Subtitle'; + }); + const select = page.querySelector('.selectSubtitles'); + select.setLabel(globalize.translate('Subtitles')); + const selectedId = mediaSource.DefaultSubtitleStreamIndex == null ? -1 : mediaSource.DefaultSubtitleStreamIndex; + + const videoTracks = mediaSource.MediaStreams.filter(function (m) { + return m.Type === 'Video'; + }); + + // This only makes sense on Video items + if (videoTracks.length) { + let selected = selectedId === -1 ? ' selected' : ''; + select.innerHTML = '' + tracks.map(function (v) { + selected = v.Index === selectedId ? ' selected' : ''; return ''; }).join(''); - if (tracks.length > 1) { + if (tracks.length > 0) { select.removeAttribute('disabled'); } else { select.setAttribute('disabled', 'disabled'); } - if (tracks.length) { - page.querySelector('.selectAudioContainer').classList.remove('hide'); - } else { - page.querySelector('.selectAudioContainer').classList.add('hide'); - } + page.querySelector('.selectSubtitlesContainer').classList.remove('hide'); + } else { + select.innerHTML = ''; + page.querySelector('.selectSubtitlesContainer').classList.add('hide'); } +} - function renderSubtitleSelections(page, mediaSources) { - var mediaSourceId = page.querySelector('.selectSource').value; - var mediaSource = mediaSources.filter(function (m) { - return m.Id === mediaSourceId; - })[0]; - var tracks = mediaSource.MediaStreams.filter(function (m) { - return 'Subtitle' === m.Type; - }); - var select = page.querySelector('.selectSubtitles'); - select.setLabel(globalize.translate('LabelSubtitles')); - var selectedId = null == mediaSource.DefaultSubtitleStreamIndex ? -1 : mediaSource.DefaultSubtitleStreamIndex; +function reloadPlayButtons(page, item) { + let canPlay = false; - var videoTracks = mediaSource.MediaStreams.filter(function (m) { - return 'Video' === m.Type; - }); + if (item.Type == 'Program') { + const now = new Date(); - // This only makes sence on Video items - if (videoTracks.length) { - var selected = -1 === selectedId ? ' selected' : ''; - select.innerHTML = '' + tracks.map(function (v) { - selected = v.Index === selectedId ? ' selected' : ''; - return ''; - }).join(''); - - if (tracks.length > 1) { - select.removeAttribute('disabled'); - } else { - select.setAttribute('disabled', 'disabled'); - } - - page.querySelector('.selectSubtitlesContainer').classList.remove('hide'); - } else { - select.innerHTML = ''; - page.querySelector('.selectSubtitlesContainer').classList.add('hide'); - } - } - - function reloadPlayButtons(page, item) { - var canPlay = false; - - if ('Program' == item.Type) { - var now = new Date(); - - if (now >= datetime.parseISO8601Date(item.StartDate, true) && now < datetime.parseISO8601Date(item.EndDate, true)) { - hideAll(page, 'btnPlay', true); - canPlay = true; - } else { - hideAll(page, 'btnPlay'); - } - - hideAll(page, 'btnResume'); - hideAll(page, 'btnInstantMix'); - hideAll(page, 'btnShuffle'); - } else if (playbackManager.canPlay(item)) { + if (now >= datetime.parseISO8601Date(item.StartDate, true) && now < datetime.parseISO8601Date(item.EndDate, true)) { hideAll(page, 'btnPlay', true); - var enableInstantMix = -1 !== ['Audio', 'MusicAlbum', 'MusicGenre', 'MusicArtist'].indexOf(item.Type); - hideAll(page, 'btnInstantMix', enableInstantMix); - var enableShuffle = item.IsFolder || -1 !== ['MusicAlbum', 'MusicGenre', 'MusicArtist'].indexOf(item.Type); - hideAll(page, 'btnShuffle', enableShuffle); canPlay = true; - - const isResumable = item.UserData && item.UserData.PlaybackPositionTicks > 0; - hideAll(page, 'btnResume', isResumable); - - if (isResumable) { - for (const elem of page.querySelectorAll('.btnPlay')) { - elem.querySelector('.detailButton-icon').classList.replace('play_arrow', 'replay'); - } - } } else { hideAll(page, 'btnPlay'); - hideAll(page, 'btnResume'); - hideAll(page, 'btnInstantMix'); - hideAll(page, 'btnShuffle'); } - return canPlay; + hideAll(page, 'btnResume'); + hideAll(page, 'btnInstantMix'); + hideAll(page, 'btnShuffle'); + } else if (playbackManager.canPlay(item)) { + hideAll(page, 'btnPlay', true); + const enableInstantMix = ['Audio', 'MusicAlbum', 'MusicGenre', 'MusicArtist'].indexOf(item.Type) !== -1; + hideAll(page, 'btnInstantMix', enableInstantMix); + const enableShuffle = item.IsFolder || ['MusicAlbum', 'MusicGenre', 'MusicArtist'].indexOf(item.Type) !== -1; + hideAll(page, 'btnShuffle', enableShuffle); + canPlay = true; + + const isResumable = item.UserData && item.UserData.PlaybackPositionTicks > 0; + hideAll(page, 'btnResume', isResumable); + + if (isResumable) { + for (const elem of page.querySelectorAll('.btnPlay')) { + elem.querySelector('.detailButton-icon').classList.replace('play_arrow', 'replay'); + } + } + } else { + hideAll(page, 'btnPlay'); + hideAll(page, 'btnResume'); + hideAll(page, 'btnInstantMix'); + hideAll(page, 'btnShuffle'); } - function reloadUserDataButtons(page, item) { - var i; - var length; - var btnPlaystates = page.querySelectorAll('.btnPlaystate'); + return canPlay; +} - for (i = 0, length = btnPlaystates.length; i < length; i++) { - var btnPlaystate = btnPlaystates[i]; +function reloadUserDataButtons(page, item) { + let i; + let length; + const btnPlaystates = page.querySelectorAll('.btnPlaystate'); - if (itemHelper.canMarkPlayed(item)) { - btnPlaystate.classList.remove('hide'); - btnPlaystate.setItem(item); - } else { - btnPlaystate.classList.add('hide'); - btnPlaystate.setItem(null); - } - } + for (i = 0, length = btnPlaystates.length; i < length; i++) { + const btnPlaystate = btnPlaystates[i]; - var btnUserRatings = page.querySelectorAll('.btnUserRating'); - - for (i = 0, length = btnUserRatings.length; i < length; i++) { - var btnUserRating = btnUserRatings[i]; - - if (itemHelper.canRate(item)) { - btnUserRating.classList.remove('hide'); - btnUserRating.setItem(item); - } else { - btnUserRating.classList.add('hide'); - btnUserRating.setItem(null); - } + if (itemHelper.canMarkPlayed(item)) { + btnPlaystate.classList.remove('hide'); + btnPlaystate.setItem(item); + } else { + btnPlaystate.classList.add('hide'); + btnPlaystate.setItem(null); } } - function getArtistLinksHtml(artists, serverId, context) { - var html = []; + const btnUserRatings = page.querySelectorAll('.btnUserRating'); - for (const artist of artists) { - var href = appRouter.getRouteUrl(artist, { - context: context, - itemType: 'MusicArtist', - serverId: serverId - }); - html.push('' + artist.Name + ''); + for (i = 0, length = btnUserRatings.length; i < length; i++) { + const btnUserRating = btnUserRatings[i]; + + if (itemHelper.canRate(item)) { + btnUserRating.classList.remove('hide'); + btnUserRating.setItem(item); + } else { + btnUserRating.classList.add('hide'); + btnUserRating.setItem(null); } - html = html.join(' / '); - - return html; } +} - /** - * Renders the item's name block - * @param {Object} item - Item used to render the name. - * @param {HTMLDivElement} container - Container to render the information into. - * @param {Object} context - Application context. - */ - function renderName(item, container, context) { - var parentRoute; - var parentNameHtml = []; - var parentNameLast = false; +function getArtistLinksHtml(artists, serverId, context) { + const html = []; - if (item.AlbumArtists) { - parentNameHtml.push(getArtistLinksHtml(item.AlbumArtists, item.ServerId, context)); - parentNameLast = true; - } else if (item.ArtistItems && item.ArtistItems.length && 'MusicVideo' === item.Type) { - parentNameHtml.push(getArtistLinksHtml(item.ArtistItems, item.ServerId, context)); - parentNameLast = true; - } else if (item.SeriesName && 'Episode' === item.Type) { - parentRoute = appRouter.getRouteUrl({ - Id: item.SeriesId, - Name: item.SeriesName, - Type: 'Series', - IsFolder: true, - ServerId: item.ServerId - }, { - context: context - }); - parentNameHtml.push('' + item.SeriesName + ''); - } else if (item.IsSeries || item.EpisodeTitle) { - parentNameHtml.push(item.Name); - } - - if (item.SeriesName && 'Season' === item.Type) { - parentRoute = appRouter.getRouteUrl({ - Id: item.SeriesId, - Name: item.SeriesName, - Type: 'Series', - IsFolder: true, - ServerId: item.ServerId - }, { - context: context - }); - parentNameHtml.push('' + item.SeriesName + ''); - } else if (null != item.ParentIndexNumber && 'Episode' === item.Type) { - parentRoute = appRouter.getRouteUrl({ - Id: item.SeasonId, - Name: item.SeasonName, - Type: 'Season', - IsFolder: true, - ServerId: item.ServerId - }, { - context: context - }); - parentNameHtml.push('' + item.SeasonName + ''); - } else if (null != item.ParentIndexNumber && item.IsSeries) { - parentNameHtml.push(item.SeasonName || 'S' + item.ParentIndexNumber); - } else if (item.Album && item.AlbumId && ('MusicVideo' === item.Type || 'Audio' === item.Type)) { - parentRoute = appRouter.getRouteUrl({ - Id: item.AlbumId, - Name: item.Album, - Type: 'MusicAlbum', - IsFolder: true, - ServerId: item.ServerId - }, { - context: context - }); - parentNameHtml.push('' + item.Album + ''); - } else if (item.Album) { - parentNameHtml.push(item.Album); - } - - // FIXME: This whole section needs some refactoring, so it becames easier to scale across all form factors. See GH #1022 - var html = ''; - var tvShowHtml = parentNameHtml[0]; - var tvSeasonHtml = parentNameHtml[1]; - - if (parentNameHtml.length) { - if (parentNameLast) { - // Music - if (layoutManager.mobile) { - html = '

' + parentNameHtml.join('
') + '

'; - } else { - html = '

' + parentNameHtml.join(' - ') + '

'; - } - } else { - html = '

' + tvShowHtml + '

'; - } - } - - var name = itemHelper.getDisplayName(item, { - includeParentInfo: false + for (const artist of artists) { + const href = appRouter.getRouteUrl(artist, { + context: context, + itemType: 'MusicArtist', + serverId: serverId }); + html.push('' + artist.Name + ''); + } - if (html && !parentNameLast) { - if (tvSeasonHtml) { - html += '

' + tvSeasonHtml + ' - ' + name + '

'; + return html.join(' / '); +} + +/** + * Renders the item's name block + * @param {Object} item - Item used to render the name. + * @param {HTMLDivElement} container - Container to render the information into. + * @param {Object} context - Application context. + */ +function renderName(item, container, context) { + let parentRoute; + const parentNameHtml = []; + let parentNameLast = false; + + if (item.AlbumArtists) { + parentNameHtml.push(getArtistLinksHtml(item.AlbumArtists, item.ServerId, context)); + parentNameLast = true; + } else if (item.ArtistItems && item.ArtistItems.length && item.Type === 'MusicVideo') { + parentNameHtml.push(getArtistLinksHtml(item.ArtistItems, item.ServerId, context)); + parentNameLast = true; + } else if (item.SeriesName && item.Type === 'Episode') { + parentRoute = appRouter.getRouteUrl({ + Id: item.SeriesId, + Name: item.SeriesName, + Type: 'Series', + IsFolder: true, + ServerId: item.ServerId + }, { + context: context + }); + parentNameHtml.push('' + item.SeriesName + ''); + } else if (item.IsSeries || item.EpisodeTitle) { + parentNameHtml.push(item.Name); + } + + if (item.SeriesName && item.Type === 'Season') { + parentRoute = appRouter.getRouteUrl({ + Id: item.SeriesId, + Name: item.SeriesName, + Type: 'Series', + IsFolder: true, + ServerId: item.ServerId + }, { + context: context + }); + parentNameHtml.push('' + item.SeriesName + ''); + } else if (item.ParentIndexNumber != null && item.Type === 'Episode') { + parentRoute = appRouter.getRouteUrl({ + Id: item.SeasonId, + Name: item.SeasonName, + Type: 'Season', + IsFolder: true, + ServerId: item.ServerId + }, { + context: context + }); + parentNameHtml.push('' + item.SeasonName + ''); + } else if (item.ParentIndexNumber != null && item.IsSeries) { + parentNameHtml.push(item.SeasonName || 'S' + item.ParentIndexNumber); + } else if (item.Album && item.AlbumId && (item.Type === 'MusicVideo' || item.Type === 'Audio')) { + parentRoute = appRouter.getRouteUrl({ + Id: item.AlbumId, + Name: item.Album, + Type: 'MusicAlbum', + IsFolder: true, + ServerId: item.ServerId + }, { + context: context + }); + parentNameHtml.push('' + item.Album + ''); + } else if (item.Album) { + parentNameHtml.push(item.Album); + } + + // FIXME: This whole section needs some refactoring, so it becames easier to scale across all form factors. See GH #1022 + let html = ''; + const tvShowHtml = parentNameHtml[0]; + const tvSeasonHtml = parentNameHtml[1]; + + if (parentNameHtml.length) { + if (parentNameLast) { + // Music + if (layoutManager.mobile) { + html = '

' + parentNameHtml.join('
') + '

'; } else { - html += '

' + name + '

'; + html = '

' + parentNameHtml.join(' - ') + '

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

' + name + '

' + html; } else { - html = '

' + name + '

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

' + item.OriginalTitle + '

'; - } - - container.innerHTML = html; - - if (html.length) { - container.classList.remove('hide'); - } else { - container.classList.add('hide'); + html = '

' + tvShowHtml + '

'; } } - function setTrailerButtonVisibility(page, item) { - if ((item.LocalTrailerCount || item.RemoteTrailers && item.RemoteTrailers.length) && -1 !== playbackManager.getSupportedCommands().indexOf('PlayTrailers')) { - hideAll(page, 'btnPlayTrailer', true); + const name = itemHelper.getDisplayName(item, { + includeParentInfo: false + }); + + if (html && !parentNameLast) { + if (tvSeasonHtml) { + html += '

' + tvSeasonHtml + ' - ' + name + '

'; } else { - hideAll(page, 'btnPlayTrailer'); + html += '

' + name + '

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

' + name + '

' + html; + } else { + html = '

' + name + '

' + html; } - function renderBackdrop(item) { - if (dom.getWindowSize().innerWidth >= 1000) { - backdrop.setBackdrops([item]); - } else { - backdrop.clear(); - } + if (item.OriginalTitle && item.OriginalTitle != item.Name) { + html += '

' + item.OriginalTitle + '

'; } - function renderDetailPageBackdrop(page, item, apiClient) { - var imgUrl; - var hasbackdrop = false; - var itemBackdropElement = page.querySelector('#itemBackdrop'); + container.innerHTML = html; - if (!layoutManager.mobile && !userSettings.detailsBanner()) { - return false; - } + if (html.length) { + container.classList.remove('hide'); + } else { + container.classList.add('hide'); + } +} - if (item.BackdropImageTags && item.BackdropImageTags.length) { - imgUrl = apiClient.getScaledImageUrl(item.Id, { - type: 'Backdrop', - maxWidth: dom.getScreenWidth(), - index: 0, - tag: item.BackdropImageTags[0] - }); - imageLoader.lazyImage(itemBackdropElement, imgUrl); - hasbackdrop = true; - } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) { - imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, { - type: 'Backdrop', - maxWidth: dom.getScreenWidth(), - index: 0, - tag: item.ParentBackdropImageTags[0] - }); - imageLoader.lazyImage(itemBackdropElement, imgUrl); - hasbackdrop = true; - } else { - itemBackdropElement.style.backgroundImage = ''; - } +function setTrailerButtonVisibility(page, item) { + if ((item.LocalTrailerCount || item.RemoteTrailers && item.RemoteTrailers.length) && playbackManager.getSupportedCommands().indexOf('PlayTrailers') !== -1) { + hideAll(page, 'btnPlayTrailer', true); + } else { + hideAll(page, 'btnPlayTrailer'); + } +} - return hasbackdrop; +function renderBackdrop(item) { + if (dom.getWindowSize().innerWidth >= 1000) { + backdrop.setBackdrops([item]); + } else { + backdrop.clearBackdrop(); + } +} + +function renderDetailPageBackdrop(page, item, apiClient) { + let imgUrl; + let hasbackdrop = false; + const itemBackdropElement = page.querySelector('#itemBackdrop'); + + if (!layoutManager.mobile && !userSettings.detailsBanner()) { + return false; } - function reloadFromItem(instance, page, params, item, user) { - const apiClient = connectionManager.getApiClient(item.ServerId); + if (item.BackdropImageTags && item.BackdropImageTags.length) { + imgUrl = apiClient.getScaledImageUrl(item.Id, { + type: 'Backdrop', + maxWidth: dom.getScreenWidth(), + index: 0, + tag: item.BackdropImageTags[0] + }); + imageLoader.lazyImage(itemBackdropElement, imgUrl); + hasbackdrop = true; + } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) { + imgUrl = apiClient.getScaledImageUrl(item.ParentBackdropItemId, { + type: 'Backdrop', + maxWidth: dom.getScreenWidth(), + index: 0, + tag: item.ParentBackdropImageTags[0] + }); + imageLoader.lazyImage(itemBackdropElement, imgUrl); + hasbackdrop = true; + } else if (item.ImageTags && item.ImageTags.Primary) { + imgUrl = apiClient.getScaledImageUrl(item.Id, { + type: 'Primary', + maxWidth: dom.getScreenWidth(), + tag: item.ImageTags.Primary + }); + imageLoader.lazyImage(itemBackdropElement, imgUrl); + hasbackdrop = true; + } else { + itemBackdropElement.style.backgroundImage = ''; + } - Emby.Page.setTitle(''); + return hasbackdrop; +} - // Start rendering the artwork first - renderImage(page, item); +function reloadFromItem(instance, page, params, item, user) { + const apiClient = window.connectionManager.getApiClient(item.ServerId); + + Emby.Page.setTitle(''); + + // Start rendering the artwork first + renderImage(page, item); + // Save some screen real estate in TV mode + if (!layoutManager.tv) { renderLogo(page, item, apiClient); - renderBackdrop(item); renderDetailPageBackdrop(page, item, apiClient); + } + renderBackdrop(item); - // Render the main information for the item - page.querySelector('.detailPagePrimaryContainer').classList.add('detailRibbon'); - renderName(item, page.querySelector('.nameContainer'), params.context); - renderDetails(page, item, apiClient, params.context); - renderTrackSelections(page, instance, item); + // Render the main information for the item + page.querySelector('.detailPagePrimaryContainer').classList.add('detailRibbon'); + renderName(item, page.querySelector('.nameContainer'), params.context); + renderDetails(page, item, apiClient, params.context); + renderTrackSelections(page, instance, item); - renderSeriesTimerEditor(page, item, apiClient, user); - renderTimerEditor(page, item, apiClient, user); - setInitialCollapsibleState(page, item, apiClient, params.context, user); - var canPlay = reloadPlayButtons(page, item); + renderSeriesTimerEditor(page, item, apiClient, user); + renderTimerEditor(page, item, apiClient, user); + setInitialCollapsibleState(page, item, apiClient, params.context, user); + const canPlay = reloadPlayButtons(page, item); - if ((item.LocalTrailerCount || item.RemoteTrailers && item.RemoteTrailers.length) && -1 !== playbackManager.getSupportedCommands().indexOf('PlayTrailers')) { - hideAll(page, 'btnPlayTrailer', true); - } else { - hideAll(page, 'btnPlayTrailer'); - } + if ((item.LocalTrailerCount || item.RemoteTrailers && item.RemoteTrailers.length) && playbackManager.getSupportedCommands().indexOf('PlayTrailers') !== -1) { + hideAll(page, 'btnPlayTrailer', true); + } else { + hideAll(page, 'btnPlayTrailer'); + } - setTrailerButtonVisibility(page, item); + setTrailerButtonVisibility(page, item); - if ('Program' !== item.Type || canPlay) { - hideAll(page, 'mainDetailButtons', true); - } else { - hideAll(page, 'mainDetailButtons'); - } + if (item.Type !== 'Program' || canPlay) { + hideAll(page, 'mainDetailButtons', true); + } else { + hideAll(page, 'mainDetailButtons'); + } - showRecordingFields(instance, page, item, user); - var groupedVersions = (item.MediaSources || []).filter(function (g) { - return 'Grouping' == g.Type; - }); + showRecordingFields(instance, page, item, user); + const groupedVersions = (item.MediaSources || []).filter(function (g) { + return g.Type == 'Grouping'; + }); - if (user.Policy.IsAdministrator && groupedVersions.length) { - page.querySelector('.btnSplitVersions').classList.remove('hide'); - } else { - page.querySelector('.btnSplitVersions').classList.add('hide'); - } + if (user.Policy.IsAdministrator && groupedVersions.length) { + page.querySelector('.btnSplitVersions').classList.remove('hide'); + } else { + page.querySelector('.btnSplitVersions').classList.add('hide'); + } - if (itemContextMenu.getCommands(getContextMenuOptions(item, user)).length) { - hideAll(page, 'btnMoreCommands', true); - } else { - hideAll(page, 'btnMoreCommands'); - } + if (itemContextMenu.getCommands(getContextMenuOptions(item, user)).length) { + hideAll(page, 'btnMoreCommands', true); + } else { + hideAll(page, 'btnMoreCommands'); + } - var itemBirthday = page.querySelector('#itemBirthday'); + const itemBirthday = page.querySelector('#itemBirthday'); - if ('Person' == item.Type && item.PremiereDate) { - try { - var birthday = datetime.parseISO8601Date(item.PremiereDate, true).toDateString(); - itemBirthday.classList.remove('hide'); - itemBirthday.innerHTML = globalize.translate('BirthDateValue', birthday); - } catch (err) { - itemBirthday.classList.add('hide'); - } - } else { + if (item.Type == 'Person' && item.PremiereDate) { + try { + const birthday = datetime.parseISO8601Date(item.PremiereDate, true).toDateString(); + itemBirthday.classList.remove('hide'); + itemBirthday.innerHTML = globalize.translate('BirthDateValue', birthday); + } catch (err) { itemBirthday.classList.add('hide'); } + } else { + itemBirthday.classList.add('hide'); + } - var itemDeathDate = page.querySelector('#itemDeathDate'); + const itemDeathDate = page.querySelector('#itemDeathDate'); - if ('Person' == item.Type && item.EndDate) { - try { - var deathday = datetime.parseISO8601Date(item.EndDate, true).toDateString(); - itemDeathDate.classList.remove('hide'); - itemDeathDate.innerHTML = globalize.translate('DeathDateValue', deathday); - } catch (err) { - itemDeathDate.classList.add('hide'); - } - } else { + if (item.Type == 'Person' && item.EndDate) { + try { + const deathday = datetime.parseISO8601Date(item.EndDate, true).toDateString(); + itemDeathDate.classList.remove('hide'); + itemDeathDate.innerHTML = globalize.translate('DeathDateValue', deathday); + } catch (err) { itemDeathDate.classList.add('hide'); } - - var itemBirthLocation = page.querySelector('#itemBirthLocation'); - - if ('Person' == item.Type && item.ProductionLocations && item.ProductionLocations.length) { - var gmap = '' + item.ProductionLocations[0] + ''; - itemBirthLocation.classList.remove('hide'); - itemBirthLocation.innerHTML = globalize.translate('BirthPlaceValue', gmap); - } else { - itemBirthLocation.classList.add('hide'); - } - - setPeopleHeader(page, item); - loading.hide(); - - if (item.Type === 'Book') { - hideAll(page, 'btnDownload', true); - } - - require(['autoFocuser'], function (autoFocuser) { - autoFocuser.autoFocus(page); - }); + } else { + itemDeathDate.classList.add('hide'); } - function logoImageUrl(item, apiClient, options) { - options = options || {}; - options.type = 'Logo'; + const itemBirthLocation = page.querySelector('#itemBirthLocation'); - if (item.ImageTags && item.ImageTags.Logo) { - options.tag = item.ImageTags.Logo; - return apiClient.getScaledImageUrl(item.Id, options); - } - - if (item.ParentLogoImageTag) { - options.tag = item.ParentLogoImageTag; - return apiClient.getScaledImageUrl(item.ParentLogoItemId, options); - } - - return null; + if (item.Type == 'Person' && item.ProductionLocations && item.ProductionLocations.length) { + const gmap = '' + item.ProductionLocations[0] + ''; + itemBirthLocation.classList.remove('hide'); + itemBirthLocation.innerHTML = globalize.translate('BirthPlaceValue', gmap); + } else { + itemBirthLocation.classList.add('hide'); } - function renderLogo(page, item, apiClient) { - var detailLogo = page.querySelector('.detailLogo'); + setPeopleHeader(page, item); + loading.hide(); - var url = logoImageUrl(item, apiClient, {}); - - if (!layoutManager.mobile && !userSettings.enableBackdrops()) { - detailLogo.classList.add('hide'); - } else if (url) { - detailLogo.classList.remove('hide'); - imageLoader.setLazyImage(detailLogo, url); - } else { - detailLogo.classList.add('hide'); - } + if (item.Type === 'Book' && item.CanDownload && appHost.supports('filedownload')) { + hideAll(page, 'btnDownload', true); } - function showRecordingFields(instance, page, item, user) { - if (!instance.currentRecordingFields) { - var recordingFieldsElement = page.querySelector('.recordingFields'); + import('autoFocuser').then(({ default: autoFocuser }) => { + autoFocuser.autoFocus(page); + }); +} - if ('Program' == item.Type && user.Policy.EnableLiveTvManagement) { - require(['recordingFields'], function (recordingFields) { - instance.currentRecordingFields = new recordingFields({ - parent: recordingFieldsElement, - programId: item.Id, - serverId: item.ServerId - }); - recordingFieldsElement.classList.remove('hide'); +function logoImageUrl(item, apiClient, options) { + options = options || {}; + options.type = 'Logo'; + + if (item.ImageTags && item.ImageTags.Logo) { + options.tag = item.ImageTags.Logo; + return apiClient.getScaledImageUrl(item.Id, options); + } + + if (item.ParentLogoImageTag) { + options.tag = item.ParentLogoImageTag; + return apiClient.getScaledImageUrl(item.ParentLogoItemId, options); + } + + return null; +} + +function renderLogo(page, item, apiClient) { + const detailLogo = page.querySelector('.detailLogo'); + + const url = logoImageUrl(item, apiClient, {}); + + if (!layoutManager.mobile && !userSettings.enableBackdrops()) { + detailLogo.classList.add('hide'); + } else if (url) { + detailLogo.classList.remove('hide'); + imageLoader.setLazyImage(detailLogo, url); + } else { + detailLogo.classList.add('hide'); + } +} + +function showRecordingFields(instance, page, item, user) { + if (!instance.currentRecordingFields) { + const recordingFieldsElement = page.querySelector('.recordingFields'); + + if (item.Type == 'Program' && user.Policy.EnableLiveTvManagement) { + import('recordingFields').then(({ default: recordingFields }) => { + instance.currentRecordingFields = new recordingFields({ + parent: recordingFieldsElement, + programId: item.Id, + serverId: item.ServerId }); - } else { - recordingFieldsElement.classList.add('hide'); - recordingFieldsElement.innerHTML = ''; - } - } - } - - function renderLinks(page, item) { - var externalLinksElem = page.querySelector('.itemExternalLinks'); - - var links = []; - - if (!layoutManager.tv && item.HomePageUrl) { - links.push(`${globalize.translate('ButtonWebsite')}`); - } - - if (item.ExternalUrls) { - for (const url of item.ExternalUrls) { - links.push(`${url.Name}`); - } - } - - var html = []; - if (links.length) { - html.push(links.join(', ')); - } - - externalLinksElem.innerHTML = html.join(', '); - - if (html.length) { - externalLinksElem.classList.remove('hide'); - } else { - externalLinksElem.classList.add('hide'); - } - } - - function renderDetailImage(elem, item, imageLoader) { - const itemArray = []; - itemArray.push(item); - const cardHtml = cardBuilder.getCardsHtml(itemArray, { - shape: 'auto', - showTitle: false, - centerText: true, - overlayText: false, - transition: false, - disableIndicators: true, - disableHoverMenu: true, - overlayPlayButton: true, - width: dom.getWindowSize().innerWidth * 0.25 - }); - - elem.innerHTML = cardHtml; - - imageLoader.lazyChildren(elem); - } - - function renderImage(page, item) { - renderDetailImage( - page.querySelector('.detailImageContainer'), - item, - imageLoader - ); - } - - function refreshDetailImageUserData(elem, item) { - elem.querySelector('.detailImageProgressContainer').innerHTML = indicators.getProgressBarHtml(item); - } - - function refreshImage(page, item) { - refreshDetailImageUserData(page.querySelector('.detailImageContainer'), item); - } - - function setPeopleHeader(page, item) { - if ('Audio' == item.MediaType || 'MusicAlbum' == item.Type || 'Book' == item.MediaType || 'Photo' == item.MediaType) { - page.querySelector('#peopleHeader').innerHTML = globalize.translate('HeaderPeople'); - } else { - page.querySelector('#peopleHeader').innerHTML = globalize.translate('HeaderCastAndCrew'); - } - } - - function renderNextUp(page, item, user) { - var section = page.querySelector('.nextUpSection'); - - if ('Series' != item.Type) { - return void section.classList.add('hide'); - } - - connectionManager.getApiClient(item.ServerId).getNextUpEpisodes({ - SeriesId: item.Id, - UserId: user.Id - }).then(function (result) { - if (result.Items.length) { - section.classList.remove('hide'); - } else { - section.classList.add('hide'); - } - - var html = cardBuilder.getCardsHtml({ - items: result.Items, - shape: 'overflowBackdrop', - showTitle: true, - displayAsSpecial: 'Season' == item.Type && item.IndexNumber, - overlayText: false, - centerText: true, - overlayPlayButton: true + recordingFieldsElement.classList.remove('hide'); }); - var itemsContainer = section.querySelector('.nextUpItems'); - itemsContainer.innerHTML = html; - imageLoader.lazyChildren(itemsContainer); - }); + } else { + recordingFieldsElement.classList.add('hide'); + recordingFieldsElement.innerHTML = ''; + } + } +} + +function renderLinks(page, item) { + const externalLinksElem = page.querySelector('.itemExternalLinks'); + + const links = []; + + if (!layoutManager.tv && item.HomePageUrl) { + links.push(`${globalize.translate('ButtonWebsite')}`); } - function setInitialCollapsibleState(page, item, apiClient, context, user) { - page.querySelector('.collectionItems').innerHTML = ''; + if (item.ExternalUrls) { + for (const url of item.ExternalUrls) { + links.push(`${url.Name}`); + } + } - if ('Playlist' == item.Type) { - page.querySelector('#childrenCollapsible').classList.remove('hide'); - renderPlaylistItems(page, item); - } else if ('Studio' == item.Type || 'Person' == item.Type || 'Genre' == item.Type || 'MusicGenre' == item.Type || 'MusicArtist' == item.Type) { - page.querySelector('#childrenCollapsible').classList.remove('hide'); - renderItemsByName(page, item); - } else if (item.IsFolder) { - if ('BoxSet' == item.Type) { - page.querySelector('#childrenCollapsible').classList.add('hide'); - } + const html = []; + if (links.length) { + html.push(links.join(', ')); + } - renderChildren(page, item); + externalLinksElem.innerHTML = html.join(', '); + + if (html.length) { + externalLinksElem.classList.remove('hide'); + } else { + externalLinksElem.classList.add('hide'); + } +} + +function renderDetailImage(elem, item, imageLoader) { + const itemArray = []; + itemArray.push(item); + const cardHtml = cardBuilder.getCardsHtml(itemArray, { + shape: 'auto', + showTitle: false, + centerText: true, + overlayText: false, + transition: false, + disableIndicators: true, + overlayPlayButton: true, + action: 'play', + width: dom.getWindowSize().innerWidth * 0.25 + }); + + elem.innerHTML = cardHtml; + imageLoader.lazyChildren(elem); + + // Avoid breaking the design by preventing focus of the poster using the keyboard. + elem.querySelector('button').tabIndex = -1; +} + +function renderImage(page, item) { + renderDetailImage( + page.querySelector('.detailImageContainer'), + item, + imageLoader + ); +} + +function refreshDetailImageUserData(elem, item) { + elem.querySelector('.detailImageProgressContainer').innerHTML = indicators.getProgressBarHtml(item); +} + +function refreshImage(page, item) { + refreshDetailImageUserData(page.querySelector('.detailImageContainer'), item); +} + +function setPeopleHeader(page, item) { + if (item.MediaType == 'Audio' || item.Type == 'MusicAlbum' || item.MediaType == 'Book' || item.MediaType == 'Photo') { + page.querySelector('#peopleHeader').innerHTML = globalize.translate('People'); + } else { + page.querySelector('#peopleHeader').innerHTML = globalize.translate('HeaderCastAndCrew'); + } +} + +function renderNextUp(page, item, user) { + const section = page.querySelector('.nextUpSection'); + + if (item.Type != 'Series') { + return void section.classList.add('hide'); + } + + window.connectionManager.getApiClient(item.ServerId).getNextUpEpisodes({ + SeriesId: item.Id, + UserId: user.Id + }).then(function (result) { + if (result.Items.length) { + section.classList.remove('hide'); } else { + section.classList.add('hide'); + } + + const html = cardBuilder.getCardsHtml({ + items: result.Items, + shape: 'overflowBackdrop', + showTitle: true, + displayAsSpecial: item.Type == 'Season' && item.IndexNumber, + overlayText: false, + centerText: true, + overlayPlayButton: true + }); + const itemsContainer = section.querySelector('.nextUpItems'); + itemsContainer.innerHTML = html; + imageLoader.lazyChildren(itemsContainer); + }); +} + +function setInitialCollapsibleState(page, item, apiClient, context, user) { + page.querySelector('.collectionItems').innerHTML = ''; + + if (item.Type == 'Playlist') { + page.querySelector('#childrenCollapsible').classList.remove('hide'); + renderPlaylistItems(page, item); + } else if (item.Type == 'Studio' || item.Type == 'Person' || item.Type == 'Genre' || item.Type == 'MusicGenre' || item.Type == 'MusicArtist') { + page.querySelector('#childrenCollapsible').classList.remove('hide'); + renderItemsByName(page, item); + } else if (item.IsFolder) { + if (item.Type == 'BoxSet') { page.querySelector('#childrenCollapsible').classList.add('hide'); } - if ('Series' == item.Type) { - renderSeriesSchedule(page, item); - renderNextUp(page, item, user); - } else { - page.querySelector('.nextUpSection').classList.add('hide'); - } - - renderScenes(page, item); - - if (item.SpecialFeatureCount && 0 != item.SpecialFeatureCount && 'Series' != item.Type) { - page.querySelector('#specialsCollapsible').classList.remove('hide'); - renderSpecials(page, item, user, 6); - } else { - page.querySelector('#specialsCollapsible').classList.add('hide'); - } - - renderCast(page, item); - - if (item.PartCount && item.PartCount > 1) { - page.querySelector('#additionalPartsCollapsible').classList.remove('hide'); - renderAdditionalParts(page, item, user); - } else { - page.querySelector('#additionalPartsCollapsible').classList.add('hide'); - } - - if ('MusicAlbum' == item.Type) { - renderMusicVideos(page, item, user); - } else { - page.querySelector('#musicVideosCollapsible').classList.add('hide'); - } + renderChildren(page, item); + } else { + page.querySelector('#childrenCollapsible').classList.add('hide'); } - function toggleLineClamp(clampTarget, e) { - var expandButton = e.target; - var clampClassName = 'detail-clamp-text'; - - if (clampTarget.classList.contains(clampClassName)) { - clampTarget.classList.remove(clampClassName); - expandButton.innerHTML = globalize.translate('ShowLess'); - } else { - clampTarget.classList.add(clampClassName); - expandButton.innerHTML = globalize.translate('ShowMore'); - } + if (item.Type == 'Series') { + renderSeriesSchedule(page, item); + renderNextUp(page, item, user); + } else { + page.querySelector('.nextUpSection').classList.add('hide'); } - function renderOverview(page, item) { - for (const overviewElemnt of page.querySelectorAll('.overview')) { - var overview = item.Overview || ''; + renderScenes(page, item); - if (overview) { - overviewElemnt.innerHTML = overview; - overviewElemnt.classList.remove('hide'); - overviewElemnt.classList.add('detail-clamp-text'); + if (item.SpecialFeatureCount && item.SpecialFeatureCount != 0 && item.Type != 'Series') { + page.querySelector('#specialsCollapsible').classList.remove('hide'); + renderSpecials(page, item, user); + } else { + page.querySelector('#specialsCollapsible').classList.add('hide'); + } - // Grab the sibling element to control the expand state - var expandButton = overviewElemnt.parentElement.querySelector('.overview-expand'); + renderCast(page, item); - // Detect if we have overflow of text. Based on this StackOverflow answer - // https://stackoverflow.com/a/35157976 - if (Math.abs(overviewElemnt.scrollHeight - overviewElemnt.offsetHeight) > 2) { - expandButton.classList.remove('hide'); - } else { - expandButton.classList.add('hide'); - } + if (item.PartCount && item.PartCount > 1) { + page.querySelector('#additionalPartsCollapsible').classList.remove('hide'); + renderAdditionalParts(page, item, user); + } else { + page.querySelector('#additionalPartsCollapsible').classList.add('hide'); + } - expandButton.addEventListener('click', toggleLineClamp.bind(null, overviewElemnt)); + if (item.Type == 'MusicAlbum') { + renderMusicVideos(page, item, user); + } else { + page.querySelector('#musicVideosCollapsible').classList.add('hide'); + } +} - for (const anchor of overviewElemnt.querySelectorAll('a')) { - anchor.setAttribute('target', '_blank'); - } +function toggleLineClamp(clampTarget, e) { + const expandButton = e.target; + const clampClassName = 'detail-clamp-text'; + + if (clampTarget.classList.contains(clampClassName)) { + clampTarget.classList.remove(clampClassName); + expandButton.innerHTML = globalize.translate('ShowLess'); + } else { + clampTarget.classList.add(clampClassName); + expandButton.innerHTML = globalize.translate('ShowMore'); + } +} + +function renderOverview(page, item) { + for (const overviewElemnt of page.querySelectorAll('.overview')) { + const overview = item.Overview || ''; + + if (overview) { + overviewElemnt.innerHTML = overview; + overviewElemnt.classList.remove('hide'); + overviewElemnt.classList.add('detail-clamp-text'); + + // Grab the sibling element to control the expand state + const expandButton = overviewElemnt.parentElement.querySelector('.overview-expand'); + + // Detect if we have overflow of text. Based on this StackOverflow answer + // https://stackoverflow.com/a/35157976 + if (Math.abs(overviewElemnt.scrollHeight - overviewElemnt.offsetHeight) > 2) { + expandButton.classList.remove('hide'); } else { - overviewElemnt.innerHTML = ''; - overviewElemnt.classList.add('hide'); + expandButton.classList.add('hide'); } - } - } - function renderGenres(page, item, context = inferContext(item)) { - var genres = item.GenreItems || []; - var type = context === 'music' ? 'MusicGenre' : 'Genre'; + expandButton.addEventListener('click', toggleLineClamp.bind(null, overviewElemnt)); - var html = genres.map(function (p) { - return '' + p.Name + ''; - }).join(', '); - - var genresLabel = page.querySelector('.genresLabel'); - genresLabel.innerHTML = globalize.translate(genres.length > 1 ? 'Genres' : 'Genre'); - var genresValue = page.querySelector('.genres'); - genresValue.innerHTML = html; - - var genresGroup = page.querySelector('.genresGroup'); - if (genres.length) { - genresGroup.classList.remove('hide'); + for (const anchor of overviewElemnt.querySelectorAll('a')) { + anchor.setAttribute('target', '_blank'); + } } else { - genresGroup.classList.add('hide'); + overviewElemnt.innerHTML = ''; + overviewElemnt.classList.add('hide'); } } +} - function renderWriter(page, item, context) { - var writers = (item.People || []).filter(function (person) { - return person.Type === 'Writer'; +function renderGenres(page, item, context = inferContext(item)) { + const genres = item.GenreItems || []; + const type = context === 'music' ? 'MusicGenre' : 'Genre'; + + const html = genres.map(function (p) { + return '' + p.Name + ''; + }).join(', '); + + const genresLabel = page.querySelector('.genresLabel'); + genresLabel.innerHTML = globalize.translate(genres.length > 1 ? 'Genres' : 'Genre'); + const genresValue = page.querySelector('.genres'); + genresValue.innerHTML = html; + + const genresGroup = page.querySelector('.genresGroup'); + if (genres.length) { + genresGroup.classList.remove('hide'); + } else { + genresGroup.classList.add('hide'); + } +} + +function renderWriter(page, item, context) { + const writers = (item.People || []).filter(function (person) { + return person.Type === 'Writer'; + }); + + const html = writers.map(function (person) { + return '' + person.Name + ''; + }).join(', '); + + const writersLabel = page.querySelector('.writersLabel'); + writersLabel.innerHTML = globalize.translate(writers.length > 1 ? 'Writers' : 'Writer'); + const writersValue = page.querySelector('.writers'); + writersValue.innerHTML = html; + + const writersGroup = page.querySelector('.writersGroup'); + if (writers.length) { + writersGroup.classList.remove('hide'); + } else { + writersGroup.classList.add('hide'); + } +} + +function renderDirector(page, item, context) { + const directors = (item.People || []).filter(function (person) { + return person.Type === 'Director'; + }); + + const html = directors.map(function (person) { + return '' + person.Name + ''; + }).join(', '); + + const directorsLabel = page.querySelector('.directorsLabel'); + directorsLabel.innerHTML = globalize.translate(directors.length > 1 ? 'Directors' : 'Director'); + const directorsValue = page.querySelector('.directors'); + directorsValue.innerHTML = html; + + const directorsGroup = page.querySelector('.directorsGroup'); + if (directors.length) { + directorsGroup.classList.remove('hide'); + } else { + directorsGroup.classList.add('hide'); + } +} + +function renderMiscInfo(page, item) { + const primaryItemMiscInfo = page.querySelectorAll('.itemMiscInfo-primary'); + + for (const miscInfo of primaryItemMiscInfo) { + mediaInfo.fillPrimaryMediaInfo(miscInfo, item, { + interactive: true, + episodeTitle: false, + subtitles: false }); - var html = writers.map(function (person) { - return '' + person.Name + ''; - }).join(', '); - - var writersLabel = page.querySelector('.writersLabel'); - writersLabel.innerHTML = globalize.translate(writers.length > 1 ? 'Writers' : 'Writer'); - var writersValue = page.querySelector('.writers'); - writersValue.innerHTML = html; - - var writersGroup = page.querySelector('.writersGroup'); - if (writers.length) { - writersGroup.classList.remove('hide'); + if (miscInfo.innerHTML && item.Type !== 'SeriesTimer') { + miscInfo.classList.remove('hide'); } else { - writersGroup.classList.add('hide'); + miscInfo.classList.add('hide'); } } - function renderDirector(page, item, context) { - var directors = (item.People || []).filter(function (person) { - return person.Type === 'Director'; + const secondaryItemMiscInfo = page.querySelectorAll('.itemMiscInfo-secondary'); + + for (const miscInfo of secondaryItemMiscInfo) { + mediaInfo.fillSecondaryMediaInfo(miscInfo, item, { + interactive: true }); - var html = directors.map(function (person) { - return '' + person.Name + ''; - }).join(', '); - - var directorsLabel = page.querySelector('.directorsLabel'); - directorsLabel.innerHTML = globalize.translate(directors.length > 1 ? 'Directors' : 'Director'); - var directorsValue = page.querySelector('.directors'); - directorsValue.innerHTML = html; - - var directorsGroup = page.querySelector('.directorsGroup'); - if (directors.length) { - directorsGroup.classList.remove('hide'); + if (miscInfo.innerHTML && item.Type !== 'SeriesTimer') { + miscInfo.classList.remove('hide'); } else { - directorsGroup.classList.add('hide'); + miscInfo.classList.add('hide'); } } +} - function renderMiscInfo(page, item) { - const primaryItemMiscInfo = page.querySelectorAll('.itemMiscInfo-primary'); +function renderTagline(page, item) { + const taglineElement = page.querySelector('.tagline'); - for (const miscInfo of primaryItemMiscInfo) { - mediaInfo.fillPrimaryMediaInfo(miscInfo, item, { - interactive: true, - episodeTitle: false, - subtitles: false - }); - - if (miscInfo.innerHTML && 'SeriesTimer' !== item.Type) { - miscInfo.classList.remove('hide'); - } else { - miscInfo.classList.add('hide'); - } - } - - const secondaryItemMiscInfo = page.querySelectorAll('.itemMiscInfo-secondary'); - - for (const miscInfo of secondaryItemMiscInfo) { - mediaInfo.fillSecondaryMediaInfo(miscInfo, item, { - interactive: true - }); - - if (miscInfo.innerHTML && 'SeriesTimer' !== item.Type) { - miscInfo.classList.remove('hide'); - } else { - miscInfo.classList.add('hide'); - } - } + if (item.Taglines && item.Taglines.length) { + taglineElement.classList.remove('hide'); + taglineElement.innerHTML = item.Taglines[0]; + } else { + taglineElement.classList.add('hide'); } +} - function renderTagline(page, item) { - var taglineElement = page.querySelector('.tagline'); +function renderDetails(page, item, apiClient, context, isStatic) { + renderSimilarItems(page, item, context); + renderMoreFromSeason(page, item, apiClient); + renderMoreFromArtist(page, item, apiClient); + renderDirector(page, item, context); + renderWriter(page, item, context); + renderGenres(page, item, context); + renderChannelGuide(page, apiClient, item); + renderTagline(page, item); + renderOverview(page, item); + renderMiscInfo(page, item); + reloadUserDataButtons(page, item); - if (item.Taglines && item.Taglines.length) { - taglineElement.classList.remove('hide'); - taglineElement.innerHTML = item.Taglines[0]; - } else { - taglineElement.classList.add('hide'); - } - } - - function renderDetails(page, item, apiClient, context, isStatic) { - renderSimilarItems(page, item, context); - renderMoreFromSeason(page, item, apiClient); - renderMoreFromArtist(page, item, apiClient); - renderDirector(page, item, context); - renderWriter(page, item, context); - renderGenres(page, item, context); - renderChannelGuide(page, apiClient, item); - renderTagline(page, item); - renderOverview(page, item); - renderMiscInfo(page, item); - reloadUserDataButtons(page, item); + // Don't allow redirection to other websites from the TV layout + if (!layoutManager.tv) { renderLinks(page, item); - renderTags(page, item); - renderSeriesAirTime(page, item, isStatic); } - function enableScrollX() { - return browser.mobile && screen.availWidth <= 1000; + renderTags(page, item); + renderSeriesAirTime(page, item, isStatic); +} + +function enableScrollX() { + return browser.mobile && window.screen.availWidth <= 1000; +} + +function getPortraitShape(scrollX) { + if (scrollX == null) { + scrollX = enableScrollX(); } - function getPortraitShape(scrollX) { - if (null == scrollX) { - scrollX = enableScrollX(); + return scrollX ? 'overflowPortrait' : 'portrait'; +} + +function getSquareShape(scrollX) { + if (scrollX == null) { + scrollX = enableScrollX(); + } + + return scrollX ? 'overflowSquare' : 'square'; +} + +function renderMoreFromSeason(view, item, apiClient) { + const section = view.querySelector('.moreFromSeasonSection'); + + if (section) { + if (item.Type !== 'Episode' || !item.SeasonId || !item.SeriesId) { + return void section.classList.add('hide'); } - return scrollX ? 'overflowPortrait' : 'portrait'; - } - - function getSquareShape(scrollX) { - if (null == scrollX) { - scrollX = enableScrollX(); - } - - return scrollX ? 'overflowSquare' : 'square'; - } - - function renderMoreFromSeason(view, item, apiClient) { - var section = view.querySelector('.moreFromSeasonSection'); - - if (section) { - if ('Episode' !== item.Type || !item.SeasonId || !item.SeriesId) { + const userId = apiClient.getCurrentUserId(); + apiClient.getEpisodes(item.SeriesId, { + SeasonId: item.SeasonId, + UserId: userId, + Fields: 'ItemCounts,PrimaryImageAspectRatio,BasicSyncInfo,CanDelete,MediaSourceCount' + }).then(function (result) { + if (result.Items.length < 2) { return void section.classList.add('hide'); } - var userId = apiClient.getCurrentUserId(); - apiClient.getEpisodes(item.SeriesId, { - SeasonId: item.SeasonId, - UserId: userId, - Fields: 'ItemCounts,PrimaryImageAspectRatio,BasicSyncInfo,CanDelete,MediaSourceCount' - }).then(function (result) { - if (result.Items.length < 2) { - return void section.classList.add('hide'); - } - - section.classList.remove('hide'); - section.querySelector('h2').innerHTML = globalize.translate('MoreFromValue', item.SeasonName); - var itemsContainer = section.querySelector('.itemsContainer'); - cardBuilder.buildCards(result.Items, { - parentContainer: section, - itemsContainer: itemsContainer, - shape: 'autooverflow', - sectionTitleTagName: 'h2', - scalable: true, - showTitle: true, - overlayText: false, - centerText: true, - includeParentInfoInTitle: false, - allowBottomPadding: false - }); - var card = itemsContainer.querySelector('.card[data-id="' + item.Id + '"]'); - - if (card) { - setTimeout(function () { - section.querySelector('.emby-scroller').toStart(card.previousSibling || card, true); - }, 100); - } + section.classList.remove('hide'); + section.querySelector('h2').innerHTML = globalize.translate('MoreFromValue', item.SeasonName); + const itemsContainer = section.querySelector('.itemsContainer'); + cardBuilder.buildCards(result.Items, { + parentContainer: section, + itemsContainer: itemsContainer, + shape: 'autooverflow', + sectionTitleTagName: 'h2', + scalable: true, + showTitle: true, + overlayText: false, + centerText: true, + includeParentInfoInTitle: false, + allowBottomPadding: false }); - } + const card = itemsContainer.querySelector('.card[data-id="' + item.Id + '"]'); + + if (card) { + setTimeout(function () { + section.querySelector('.emby-scroller').toStart(card.previousSibling || card, true); + }, 100); + } + }); } +} - function renderMoreFromArtist(view, item, apiClient) { - var section = view.querySelector('.moreFromArtistSection'); +function renderMoreFromArtist(view, item, apiClient) { + const section = view.querySelector('.moreFromArtistSection'); - if (section) { - if ('MusicArtist' === item.Type) { - if (!apiClient.isMinServerVersion('3.4.1.19')) { - return void section.classList.add('hide'); - } - } else if ('MusicAlbum' !== item.Type || !item.AlbumArtists || !item.AlbumArtists.length) { + if (section) { + if (item.Type === 'MusicArtist') { + if (!apiClient.isMinServerVersion('3.4.1.19')) { + return void section.classList.add('hide'); + } + } else if (item.Type !== 'MusicAlbum' || !item.AlbumArtists || !item.AlbumArtists.length) { + return void section.classList.add('hide'); + } + + const query = { + IncludeItemTypes: 'MusicAlbum', + Recursive: true, + ExcludeItemIds: item.Id, + SortBy: 'ProductionYear,SortName', + SortOrder: 'Descending' + }; + + if (item.Type === 'MusicArtist') { + query.ContributingArtistIds = item.Id; + } else if (apiClient.isMinServerVersion('3.4.1.18')) { + query.AlbumArtistIds = item.AlbumArtists[0].Id; + } else { + query.ArtistIds = item.AlbumArtists[0].Id; + } + + apiClient.getItems(apiClient.getCurrentUserId(), query).then(function (result) { + if (!result.Items.length) { return void section.classList.add('hide'); } - var query = { - IncludeItemTypes: 'MusicAlbum', - Recursive: true, - ExcludeItemIds: item.Id, - SortBy: 'ProductionYear,SortName', - SortOrder: 'Descending' - }; + section.classList.remove('hide'); - if ('MusicArtist' === item.Type) { - query.ContributingArtistIds = item.Id; - } else if (apiClient.isMinServerVersion('3.4.1.18')) { - query.AlbumArtistIds = item.AlbumArtists[0].Id; + if (item.Type === 'MusicArtist') { + section.querySelector('h2').innerHTML = globalize.translate('HeaderAppearsOn'); } else { - query.ArtistIds = item.AlbumArtists[0].Id; + section.querySelector('h2').innerHTML = globalize.translate('MoreFromValue', item.AlbumArtists[0].Name); } - apiClient.getItems(apiClient.getCurrentUserId(), query).then(function (result) { - if (!result.Items.length) { - return void section.classList.add('hide'); - } - - section.classList.remove('hide'); - - if ('MusicArtist' === item.Type) { - section.querySelector('h2').innerHTML = globalize.translate('HeaderAppearsOn'); - } else { - section.querySelector('h2').innerHTML = globalize.translate('MoreFromValue', item.AlbumArtists[0].Name); - } - - cardBuilder.buildCards(result.Items, { - parentContainer: section, - itemsContainer: section.querySelector('.itemsContainer'), - shape: 'autooverflow', - sectionTitleTagName: 'h2', - scalable: true, - coverImage: 'MusicArtist' === item.Type || 'MusicAlbum' === item.Type, - showTitle: true, - showParentTitle: false, - centerText: true, - overlayText: false, - overlayPlayButton: true, - showYear: true - }); + cardBuilder.buildCards(result.Items, { + parentContainer: section, + itemsContainer: section.querySelector('.itemsContainer'), + shape: 'autooverflow', + sectionTitleTagName: 'h2', + scalable: true, + coverImage: item.Type === 'MusicArtist' || item.Type === 'MusicAlbum', + showTitle: true, + showParentTitle: false, + centerText: true, + overlayText: false, + overlayPlayButton: true, + showYear: true }); - } + }); } +} - function renderSimilarItems(page, item, context) { - var similarCollapsible = page.querySelector('#similarCollapsible'); +function renderSimilarItems(page, item, context) { + const similarCollapsible = page.querySelector('#similarCollapsible'); - if (similarCollapsible) { - if ('Movie' != item.Type && 'Trailer' != item.Type && 'Series' != item.Type && 'Program' != item.Type && 'Recording' != item.Type && 'MusicAlbum' != item.Type && 'MusicArtist' != item.Type && 'Playlist' != item.Type) { + if (similarCollapsible) { + if (item.Type != 'Movie' && item.Type != 'Trailer' && item.Type != 'Series' && item.Type != 'Program' && item.Type != 'Recording' && item.Type != 'MusicAlbum' && item.Type != 'MusicArtist' && item.Type != 'Playlist') { + return void similarCollapsible.classList.add('hide'); + } + + similarCollapsible.classList.remove('hide'); + const apiClient = window.connectionManager.getApiClient(item.ServerId); + const options = { + userId: apiClient.getCurrentUserId(), + limit: 12, + fields: 'PrimaryImageAspectRatio,UserData,CanDelete' + }; + + if (item.Type == 'MusicAlbum' && item.AlbumArtists && item.AlbumArtists.length) { + options.ExcludeArtistIds = item.AlbumArtists[0].Id; + } + + apiClient.getSimilarItems(item.Id, options).then(function (result) { + if (!result.Items.length) { return void similarCollapsible.classList.add('hide'); } similarCollapsible.classList.remove('hide'); - var apiClient = connectionManager.getApiClient(item.ServerId); - var options = { - userId: apiClient.getCurrentUserId(), - limit: 12, - fields: 'PrimaryImageAspectRatio,UserData,CanDelete' - }; - - if ('MusicAlbum' == item.Type && item.AlbumArtists && item.AlbumArtists.length) { - options.ExcludeArtistIds = item.AlbumArtists[0].Id; - } - - apiClient.getSimilarItems(item.Id, options).then(function (result) { - if (!result.Items.length) { - return void similarCollapsible.classList.add('hide'); - } - - similarCollapsible.classList.remove('hide'); - var html = ''; - html += cardBuilder.getCardsHtml({ - items: result.Items, - shape: 'autooverflow', - showParentTitle: 'MusicAlbum' == item.Type, - centerText: true, - showTitle: true, - context: context, - lazy: true, - showDetailsMenu: true, - coverImage: 'MusicAlbum' == item.Type || 'MusicArtist' == item.Type, - overlayPlayButton: true, - overlayText: false, - showYear: 'Movie' === item.Type || 'Trailer' === item.Type || 'Series' === item.Type - }); - var similarContent = similarCollapsible.querySelector('.similarContent'); - similarContent.innerHTML = html; - imageLoader.lazyChildren(similarContent); + let html = ''; + html += cardBuilder.getCardsHtml({ + items: result.Items, + shape: 'autooverflow', + showParentTitle: item.Type == 'MusicAlbum', + centerText: true, + showTitle: true, + context: context, + lazy: true, + showDetailsMenu: true, + coverImage: item.Type == 'MusicAlbum' || item.Type == 'MusicArtist', + overlayPlayButton: true, + overlayText: false, + showYear: item.Type === 'Movie' || item.Type === 'Trailer' || item.Type === 'Series' }); - } + const similarContent = similarCollapsible.querySelector('.similarContent'); + similarContent.innerHTML = html; + imageLoader.lazyChildren(similarContent); + }); } +} - function renderSeriesAirTime(page, item, isStatic) { - var seriesAirTime = page.querySelector('#seriesAirTime'); - if ('Series' != item.Type) { - seriesAirTime.classList.add('hide'); - return; - } - var html = ''; - if (item.AirDays && item.AirDays.length) { - if (7 == item.AirDays.length) { - html += 'daily'; - } else { - html += item.AirDays.map(function (a) { - return a + 's'; - }).join(','); - } - } - if (item.AirTime) { - html += ' at ' + item.AirTime; - } - if (item.Studios.length) { - if (isStatic) { - html += ' on ' + item.Studios[0].Name; - } else { - var context = inferContext(item); - var href = appRouter.getRouteUrl(item.Studios[0], { - context: context, - itemType: 'Studio', - serverId: item.ServerId - }); - html += ' on ' + item.Studios[0].Name + ''; - } - } - if (html) { - html = ('Ended' == item.Status ? 'Aired ' : 'Airs ') + html; - seriesAirTime.innerHTML = html; - seriesAirTime.classList.remove('hide'); +function renderSeriesAirTime(page, item, isStatic) { + const seriesAirTime = page.querySelector('#seriesAirTime'); + if (item.Type != 'Series') { + seriesAirTime.classList.add('hide'); + return; + } + let html = ''; + if (item.AirDays && item.AirDays.length) { + if (item.AirDays.length == 7) { + html += 'daily'; } else { - seriesAirTime.classList.add('hide'); + html += item.AirDays.map(function (a) { + return a + 's'; + }).join(','); } } - - function renderTags(page, item) { - var itemTags = page.querySelector('.itemTags'); - var tagElements = []; - var tags = item.Tags || []; - - if ('Program' === item.Type) { - tags = []; - } - - for (var i = 0, length = tags.length; i < length; i++) { - tagElements.push(tags[i]); - } - - if (tagElements.length) { - itemTags.innerHTML = globalize.translate('TagsValue', tagElements.join(', ')); - itemTags.classList.remove('hide'); + if (item.AirTime) { + html += ' at ' + item.AirTime; + } + if (item.Studios.length) { + if (isStatic) { + html += ' on ' + item.Studios[0].Name; } else { - itemTags.innerHTML = ''; - itemTags.classList.add('hide'); + const context = inferContext(item); + const href = appRouter.getRouteUrl(item.Studios[0], { + context: context, + itemType: 'Studio', + serverId: item.ServerId + }); + html += ' on ' + item.Studios[0].Name + ''; } } + if (html) { + html = (item.Status == 'Ended' ? 'Aired ' : 'Airs ') + html; + seriesAirTime.innerHTML = html; + seriesAirTime.classList.remove('hide'); + } else { + seriesAirTime.classList.add('hide'); + } +} - function renderChildren(page, item) { - var fields = 'ItemCounts,PrimaryImageAspectRatio,BasicSyncInfo,CanDelete,MediaSourceCount'; - var query = { - ParentId: item.Id, +function renderTags(page, item) { + const itemTags = page.querySelector('.itemTags'); + const tagElements = []; + let tags = item.Tags || []; + + if (item.Type === 'Program') { + tags = []; + } + + for (let i = 0, length = tags.length; i < length; i++) { + tagElements.push(tags[i]); + } + + if (tagElements.length) { + itemTags.innerHTML = globalize.translate('TagsValue', tagElements.join(', ')); + itemTags.classList.remove('hide'); + } else { + itemTags.innerHTML = ''; + itemTags.classList.add('hide'); + } +} + +function renderChildren(page, item) { + let fields = 'ItemCounts,PrimaryImageAspectRatio,BasicSyncInfo,CanDelete,MediaSourceCount'; + const query = { + ParentId: item.Id, + Fields: fields + }; + + if (item.Type !== 'BoxSet') { + query.SortBy = 'SortName'; + } + + let promise; + const apiClient = window.connectionManager.getApiClient(item.ServerId); + const userId = apiClient.getCurrentUserId(); + + if (item.Type == 'Series') { + promise = apiClient.getSeasons(item.Id, { + userId: userId, Fields: fields - }; + }); + } else if (item.Type == 'Season') { + fields += ',Overview'; + promise = apiClient.getEpisodes(item.SeriesId, { + seasonId: item.Id, + userId: userId, + Fields: fields + }); + } else if (item.Type == 'MusicArtist') { + query.SortBy = 'ProductionYear,SortName'; + } - if ('BoxSet' !== item.Type) { - query.SortBy = 'SortName'; - } + promise = promise || apiClient.getItems(apiClient.getCurrentUserId(), query); + promise.then(function (result) { + let html = ''; + let scrollX = false; + let isList = false; + const childrenItemsContainer = page.querySelector('.childrenItemsContainer'); - var promise; - var apiClient = connectionManager.getApiClient(item.ServerId); - var userId = apiClient.getCurrentUserId(); - - if ('Series' == item.Type) { - promise = apiClient.getSeasons(item.Id, { - userId: userId, - Fields: fields + if (item.Type == 'MusicAlbum') { + const equalSet = (arr1, arr2) => arr1.every(x => arr2.indexOf(x) !== -1) && arr1.length === arr2.length; + let showArtist = false; + for (const track of result.Items) { + if (!equalSet(track.ArtistItems.map(x => x.Id), track.AlbumArtists.map(x => x.Id))) { + showArtist = true; + break; + } + } + const discNumbers = result.Items.map(x => x.ParentIndexNumber); + html = listView.getListViewHtml({ + items: result.Items, + smallIcon: true, + showIndex: new Set(discNumbers).size > 1 || (discNumbers.length >= 1 && discNumbers[0] > 1), + index: 'disc', + showIndexNumberLeft: true, + playFromHere: true, + action: 'playallfromhere', + image: false, + artist: showArtist, + containerAlbumArtists: item.AlbumArtists }); - } else if ('Season' == item.Type) { - fields += ',Overview'; - promise = apiClient.getEpisodes(item.SeriesId, { - seasonId: item.Id, - userId: userId, - Fields: fields + isList = true; + } else if (item.Type == 'Series') { + scrollX = enableScrollX(); + html = cardBuilder.getCardsHtml({ + items: result.Items, + shape: 'overflowPortrait', + showTitle: true, + centerText: true, + lazy: true, + overlayPlayButton: true, + allowBottomPadding: !scrollX }); - } else if ('MusicArtist' == item.Type) { - query.SortBy = 'ProductionYear,SortName'; - } - - promise = promise || apiClient.getItems(apiClient.getCurrentUserId(), query); - promise.then(function (result) { - var html = ''; - var scrollX = false; - var isList = false; - var childrenItemsContainer = page.querySelector('.childrenItemsContainer'); - - if ('MusicAlbum' == item.Type) { - html = listView.getListViewHtml({ - items: result.Items, - smallIcon: true, - showIndex: true, - index: 'disc', - showIndexNumberLeft: true, - playFromHere: true, - action: 'playallfromhere', - image: false, - artist: 'auto', - containerAlbumArtists: item.AlbumArtists - }); + } else if (item.Type == 'Season' || item.Type == 'Episode') { + if (item.Type !== 'Episode') { isList = true; - } else if ('Series' == item.Type) { - scrollX = enableScrollX(); + } + scrollX = item.Type == 'Episode'; + if (result.Items.length < 2 && item.Type === 'Episode') { + return; + } + + if (item.Type === 'Episode') { html = cardBuilder.getCardsHtml({ items: result.Items, - shape: 'overflowPortrait', + shape: 'overflowBackdrop', showTitle: true, - centerText: true, + displayAsSpecial: item.Type == 'Season' && item.IndexNumber, + playFromHere: true, + overlayText: true, lazy: true, + showDetailsMenu: true, overlayPlayButton: true, - allowBottomPadding: !scrollX + allowBottomPadding: !scrollX, + includeParentInfoInTitle: false + }); + } else if (item.Type === 'Season') { + html = listView.getListViewHtml({ + items: result.Items, + showIndexNumber: false, + enableOverview: true, + enablePlayedButton: layoutManager.mobile ? false : true, + infoButton: layoutManager.mobile ? false : true, + imageSize: 'large', + enableSideMediaInfo: false, + highlight: false, + action: !layoutManager.desktop ? 'link' : 'none', + imagePlayButton: true, + includeParentInfoInTitle: false }); - } else if ('Season' == item.Type || 'Episode' == item.Type) { - if ('Episode' !== item.Type) { - isList = true; - } - scrollX = 'Episode' == item.Type; - if (result.Items.length < 2 && 'Episode' === item.Type) { - return; - } - - if ('Episode' === item.Type) { - html = cardBuilder.getCardsHtml({ - items: result.Items, - shape: 'overflowBackdrop', - showTitle: true, - displayAsSpecial: 'Season' == item.Type && item.IndexNumber, - playFromHere: true, - overlayText: true, - lazy: true, - showDetailsMenu: true, - overlayPlayButton: true, - allowBottomPadding: !scrollX, - includeParentInfoInTitle: false - }); - } else if ('Season' === item.Type) { - html = listView.getListViewHtml({ - items: result.Items, - showIndexNumber: false, - enableOverview: true, - enablePlayedButton: layoutManager.mobile ? false : true, - infoButton: layoutManager.mobile ? false : true, - imageSize: 'large', - enableSideMediaInfo: false, - highlight: false, - action: layoutManager.tv ? 'resume' : 'none', - imagePlayButton: true, - includeParentInfoInTitle: false - }); - } } + } - if ('BoxSet' !== item.Type) { - page.querySelector('#childrenCollapsible').classList.remove('hide'); - } - if (scrollX) { - childrenItemsContainer.classList.add('scrollX'); - childrenItemsContainer.classList.add('hiddenScrollX'); + if (item.Type !== 'BoxSet') { + page.querySelector('#childrenCollapsible').classList.remove('hide'); + } + if (scrollX) { + childrenItemsContainer.classList.add('scrollX'); + childrenItemsContainer.classList.add('hiddenScrollX'); + childrenItemsContainer.classList.remove('vertical-wrap'); + childrenItemsContainer.classList.remove('vertical-list'); + } else { + childrenItemsContainer.classList.remove('scrollX'); + childrenItemsContainer.classList.remove('hiddenScrollX'); + childrenItemsContainer.classList.remove('smoothScrollX'); + if (isList) { + childrenItemsContainer.classList.add('vertical-list'); childrenItemsContainer.classList.remove('vertical-wrap'); - childrenItemsContainer.classList.remove('vertical-list'); } else { - childrenItemsContainer.classList.remove('scrollX'); - childrenItemsContainer.classList.remove('hiddenScrollX'); - childrenItemsContainer.classList.remove('smoothScrollX'); - if (isList) { - childrenItemsContainer.classList.add('vertical-list'); - childrenItemsContainer.classList.remove('vertical-wrap'); - } else { - childrenItemsContainer.classList.add('vertical-wrap'); - childrenItemsContainer.classList.remove('vertical-list'); - } + childrenItemsContainer.classList.add('vertical-wrap'); + childrenItemsContainer.classList.remove('vertical-list'); } - if (layoutManager.mobile) { - childrenItemsContainer.classList.remove('padded-right'); - } - childrenItemsContainer.innerHTML = html; - imageLoader.lazyChildren(childrenItemsContainer); - if ('BoxSet' == item.Type) { - var collectionItemTypes = [{ - name: globalize.translate('HeaderVideos'), - mediaType: 'Video' - }, { - name: globalize.translate('HeaderSeries'), - type: 'Series' - }, { - name: globalize.translate('HeaderAlbums'), - type: 'MusicAlbum' - }, { - name: globalize.translate('HeaderBooks'), - type: 'Book' - }]; - renderCollectionItems(page, item, collectionItemTypes, result.Items); - } - }); - - if ('Season' == item.Type) { - page.querySelector('#childrenTitle').innerHTML = globalize.translate('HeaderEpisodes'); - } else if ('Series' == item.Type) { - page.querySelector('#childrenTitle').innerHTML = globalize.translate('HeaderSeasons'); - } else if ('MusicAlbum' == item.Type) { - page.querySelector('#childrenTitle').innerHTML = globalize.translate('HeaderTracks'); - } else { - page.querySelector('#childrenTitle').innerHTML = globalize.translate('HeaderItems'); } - - if ('MusicAlbum' == item.Type || 'Season' == item.Type) { - page.querySelector('.childrenSectionHeader').classList.add('hide'); - page.querySelector('#childrenCollapsible').classList.add('verticalSection-extrabottompadding'); - } else { - page.querySelector('.childrenSectionHeader').classList.remove('hide'); + if (layoutManager.mobile) { + childrenItemsContainer.classList.remove('padded-right'); } + childrenItemsContainer.innerHTML = html; + imageLoader.lazyChildren(childrenItemsContainer); + if (item.Type == 'BoxSet') { + const collectionItemTypes = [{ + name: globalize.translate('HeaderVideos'), + mediaType: 'Video' + }, { + name: globalize.translate('Series'), + type: 'Series' + }, { + name: globalize.translate('Albums'), + type: 'MusicAlbum' + }, { + name: globalize.translate('Books'), + type: 'Book' + }]; + renderCollectionItems(page, item, collectionItemTypes, result.Items); + } + }); + + if (item.Type == 'Season') { + page.querySelector('#childrenTitle').innerHTML = globalize.translate('Episodes'); + } else if (item.Type == 'Series') { + page.querySelector('#childrenTitle').innerHTML = globalize.translate('HeaderSeasons'); + } else if (item.Type == 'MusicAlbum') { + page.querySelector('#childrenTitle').innerHTML = globalize.translate('HeaderTracks'); + } else { + page.querySelector('#childrenTitle').innerHTML = globalize.translate('Items'); } - function renderItemsByName(page, item) { - require('scripts/itembynamedetailpage'.split(','), function () { - window.ItemsByName.renderItems(page, item); - }); + if (item.Type == 'MusicAlbum' || item.Type == 'Season') { + page.querySelector('.childrenSectionHeader').classList.add('hide'); + page.querySelector('#childrenCollapsible').classList.add('verticalSection-extrabottompadding'); + } else { + page.querySelector('.childrenSectionHeader').classList.remove('hide'); } +} - function renderPlaylistItems(page, item) { - require('scripts/playlistedit'.split(','), function () { - PlaylistViewer.render(page, item); - }); - } +function renderItemsByName(page, item) { + import('scripts/itembynamedetailpage').then(() => { + window.ItemsByName.renderItems(page, item); + }); +} - function renderProgramsForChannel(page, result) { - var html = ''; - var currentItems = []; - var currentStartDate = null; +function renderPlaylistItems(page, item) { + import('scripts/playlistedit').then(() => { + PlaylistViewer.render(page, item); + }); +} - for (var i = 0, length = result.Items.length; i < length; i++) { - var item = result.Items[i]; - var itemStartDate = datetime.parseISO8601Date(item.StartDate); +function renderProgramsForChannel(page, result) { + let html = ''; + let currentItems = []; + let currentStartDate = null; - if (!(currentStartDate && currentStartDate.toDateString() === itemStartDate.toDateString())) { - if (currentItems.length) { - html += '
'; - html += '

' + datetime.toLocaleDateString(currentStartDate, { - weekday: 'long', - month: 'long', - day: 'numeric' - }) + '

'; - html += '
' + listView.getListViewHtml({ - items: currentItems, - enableUserDataButtons: false, - showParentTitle: true, - image: false, - showProgramTime: true, - mediaInfo: false, - parentTitleWithTitle: true - }) + '
'; - } + for (let i = 0, length = result.Items.length; i < length; i++) { + const item = result.Items[i]; + const itemStartDate = datetime.parseISO8601Date(item.StartDate); - currentStartDate = itemStartDate; - currentItems = []; + if (!(currentStartDate && currentStartDate.toDateString() === itemStartDate.toDateString())) { + if (currentItems.length) { + html += '
'; + html += '

' + datetime.toLocaleDateString(currentStartDate, { + weekday: 'long', + month: 'long', + day: 'numeric' + }) + '

'; + html += '
' + listView.getListViewHtml({ + items: currentItems, + enableUserDataButtons: false, + showParentTitle: true, + image: false, + showProgramTime: true, + mediaInfo: false, + parentTitleWithTitle: true + }) + '
'; } - currentItems.push(item); + currentStartDate = itemStartDate; + currentItems = []; } - if (currentItems.length) { - html += '
'; - html += '

' + datetime.toLocaleDateString(currentStartDate, { - weekday: 'long', - month: 'long', - day: 'numeric' - }) + '

'; - html += '
' + listView.getListViewHtml({ - items: currentItems, - enableUserDataButtons: false, - showParentTitle: true, - image: false, - showProgramTime: true, - mediaInfo: false, - parentTitleWithTitle: true - }) + '
'; - } - - page.querySelector('.programGuide').innerHTML = html; + currentItems.push(item); } - function renderChannelGuide(page, apiClient, item) { - if ('TvChannel' === item.Type) { - page.querySelector('.programGuideSection').classList.remove('hide'); - apiClient.getLiveTvPrograms({ - ChannelIds: item.Id, - UserId: apiClient.getCurrentUserId(), - HasAired: false, - SortBy: 'StartDate', - EnableTotalRecordCount: false, - EnableImages: false, - ImageTypeLimit: 0, - EnableUserData: false - }).then(function (result) { - renderProgramsForChannel(page, result); - }); - } + if (currentItems.length) { + html += '
'; + html += '

' + datetime.toLocaleDateString(currentStartDate, { + weekday: 'long', + month: 'long', + day: 'numeric' + }) + '

'; + html += '
' + listView.getListViewHtml({ + items: currentItems, + enableUserDataButtons: false, + showParentTitle: true, + image: false, + showProgramTime: true, + mediaInfo: false, + parentTitleWithTitle: true + }) + '
'; } - function renderSeriesSchedule(page, item) { - var apiClient = connectionManager.getApiClient(item.ServerId); + page.querySelector('.programGuide').innerHTML = html; +} + +function renderChannelGuide(page, apiClient, item) { + if (item.Type === 'TvChannel') { + page.querySelector('.programGuideSection').classList.remove('hide'); apiClient.getLiveTvPrograms({ + ChannelIds: item.Id, UserId: apiClient.getCurrentUserId(), HasAired: false, SortBy: 'StartDate', EnableTotalRecordCount: false, EnableImages: false, ImageTypeLimit: 0, - Limit: 50, - EnableUserData: false, - LibrarySeriesId: item.Id + EnableUserData: false }).then(function (result) { - if (result.Items.length) { - page.querySelector('#seriesScheduleSection').classList.remove('hide'); - } else { - page.querySelector('#seriesScheduleSection').classList.add('hide'); - } - - page.querySelector('#seriesScheduleList').innerHTML = listView.getListViewHtml({ - items: result.Items, - enableUserDataButtons: false, - showParentTitle: false, - image: false, - showProgramDateTime: true, - mediaInfo: false, - showTitle: true, - moreButton: false, - action: 'programdialog' - }); - loading.hide(); + renderProgramsForChannel(page, result); }); } +} - function inferContext(item) { - if ('Movie' === item.Type || 'BoxSet' === item.Type) { - return 'movies'; - } - - if ('Series' === item.Type || 'Season' === item.Type || 'Episode' === item.Type) { - return 'tvshows'; - } - - if ('MusicArtist' === item.Type || 'MusicAlbum' === item.Type || 'Audio' === item.Type || 'AudioBook' === item.Type) { - return 'music'; - } - - if ('Program' === item.Type) { - return 'livetv'; - } - - return null; - } - - function filterItemsByCollectionItemType(items, typeInfo) { - return items.filter(function (item) { - if (typeInfo.mediaType) { - return item.MediaType == typeInfo.mediaType; - } - - return item.Type == typeInfo.type; - }); - } - - function canPlaySomeItemInCollection(items) { - var i = 0; - - for (var length = items.length; i < length; i++) { - if (playbackManager.canPlay(items[i])) { - return true; - } - } - - return false; - } - - function renderCollectionItems(page, parentItem, types, items) { - page.querySelector('.collectionItems').classList.remove('hide'); - page.querySelector('.collectionItems').innerHTML = ''; - - for (const type of types) { - var typeItems = filterItemsByCollectionItemType(items, type); - - if (typeItems.length) { - renderCollectionItemType(page, parentItem, type, typeItems); - } - } - - var otherType = { - name: globalize.translate('HeaderOtherItems') - }; - var otherTypeItems = items.filter(function (curr) { - return !types.filter(function (t) { - return filterItemsByCollectionItemType([curr], t).length > 0; - }).length; - }); - - if (otherTypeItems.length) { - renderCollectionItemType(page, parentItem, otherType, otherTypeItems); - } - - if (!items.length) { - renderCollectionItemType(page, parentItem, { - name: globalize.translate('HeaderItems') - }, items); - } - - var containers = page.querySelectorAll('.collectionItemsContainer'); - - var notifyRefreshNeeded = function () { - renderChildren(page, parentItem); - }; - - for (const container of containers) { - container.notifyRefreshNeeded = notifyRefreshNeeded; - } - - // if nothing in the collection can be played hide play and shuffle buttons - if (!canPlaySomeItemInCollection(items)) { - hideAll(page, 'btnPlay', false); - hideAll(page, 'btnShuffle', false); - } - - // HACK: Call autoFocuser again because btnPlay may be hidden, but focused by reloadFromItem - // FIXME: Sometimes focus does not move until all (?) sections are loaded - require(['autoFocuser'], function (autoFocuser) { - autoFocuser.autoFocus(page); - }); - } - - function renderCollectionItemType(page, parentItem, type, items) { - var html = ''; - html += '
'; - html += '
'; - html += '

'; - html += '' + type.name + ''; - html += '

'; - html += ''; - html += '
'; - html += '
'; - var shape = 'MusicAlbum' == type.type ? getSquareShape(false) : getPortraitShape(false); - html += cardBuilder.getCardsHtml({ - items: items, - shape: shape, - showTitle: true, - showYear: 'Video' === type.mediaType || 'Series' === type.type, - centerText: true, - lazy: true, - showDetailsMenu: true, - overlayMoreButton: true, - showAddToCollection: false, - showRemoveFromCollection: true, - collectionId: parentItem.Id - }); - html += '
'; - html += '
'; - var collectionItems = page.querySelector('.collectionItems'); - collectionItems.insertAdjacentHTML('beforeend', html); - imageLoader.lazyChildren(collectionItems); - collectionItems.querySelector('.btnAddToCollection').addEventListener('click', function () { - require(['alert'], function (alert) { - alert({ - text: globalize.translate('AddItemToCollectionHelp'), - html: globalize.translate('AddItemToCollectionHelp') + '

' + globalize.translate('ButtonLearnMore') + '' - }); - }); - }); - } - - function renderMusicVideos(page, item, user) { - connectionManager.getApiClient(item.ServerId).getItems(user.Id, { - SortBy: 'SortName', - SortOrder: 'Ascending', - IncludeItemTypes: 'MusicVideo', - Recursive: true, - Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,CanDelete,MediaSourceCount', - AlbumIds: item.Id - }).then(function (result) { - if (result.Items.length) { - page.querySelector('#musicVideosCollapsible').classList.remove('hide'); - var musicVideosContent = page.querySelector('.musicVideosContent'); - musicVideosContent.innerHTML = getVideosHtml(result.Items, user); - imageLoader.lazyChildren(musicVideosContent); - } else { - page.querySelector('#musicVideosCollapsible').classList.add('hide'); - } - }); - } - - function renderAdditionalParts(page, item, user) { - connectionManager.getApiClient(item.ServerId).getAdditionalVideoParts(user.Id, item.Id).then(function (result) { - if (result.Items.length) { - page.querySelector('#additionalPartsCollapsible').classList.remove('hide'); - var additionalPartsContent = page.querySelector('#additionalPartsContent'); - additionalPartsContent.innerHTML = getVideosHtml(result.Items, user); - imageLoader.lazyChildren(additionalPartsContent); - } else { - page.querySelector('#additionalPartsCollapsible').classList.add('hide'); - } - }); - } - - function renderScenes(page, item) { - var chapters = item.Chapters || []; - - if (chapters.length && !chapters[0].ImageTag && (chapters = []), chapters.length) { - page.querySelector('#scenesCollapsible').classList.remove('hide'); - var scenesContent = page.querySelector('#scenesContent'); - - require(['chaptercardbuilder'], function (chaptercardbuilder) { - chaptercardbuilder.buildChapterCards(item, chapters, { - itemsContainer: scenesContent, - backdropShape: 'overflowBackdrop', - squareShape: 'overflowSquare', - imageBlurhashes: item.ImageBlurHashes - }); - }); +function renderSeriesSchedule(page, item) { + const apiClient = window.connectionManager.getApiClient(item.ServerId); + apiClient.getLiveTvPrograms({ + UserId: apiClient.getCurrentUserId(), + HasAired: false, + SortBy: 'StartDate', + EnableTotalRecordCount: false, + EnableImages: false, + ImageTypeLimit: 0, + Limit: 50, + EnableUserData: false, + LibrarySeriesId: item.Id + }).then(function (result) { + if (result.Items.length) { + page.querySelector('#seriesScheduleSection').classList.remove('hide'); } else { - page.querySelector('#scenesCollapsible').classList.add('hide'); + page.querySelector('#seriesScheduleSection').classList.add('hide'); } - } - function getVideosHtml(items, user, limit, moreButtonClass) { - var html = cardBuilder.getCardsHtml({ - items: items, - shape: 'auto', + page.querySelector('#seriesScheduleList').innerHTML = listView.getListViewHtml({ + items: result.Items, + enableUserDataButtons: false, + showParentTitle: false, + image: false, + showProgramDateTime: true, + mediaInfo: false, showTitle: true, - action: 'play', - overlayText: false, - centerText: true, - showRuntime: true + moreButton: false, + action: 'programdialog' }); + loading.hide(); + }); +} - if (limit && items.length > limit) { - html += '

'; - } - - return html; +function inferContext(item) { + if (item.Type === 'Movie' || item.Type === 'BoxSet') { + return 'movies'; } - function renderSpecials(page, item, user, limit) { - connectionManager.getApiClient(item.ServerId).getSpecialFeatures(user.Id, item.Id).then(function (specials) { - var specialsContent = page.querySelector('#specialsContent'); - specialsContent.innerHTML = getVideosHtml(specials, user, limit, 'moreSpecials'); - imageLoader.lazyChildren(specialsContent); - }); + if (item.Type === 'Series' || item.Type === 'Season' || item.Type === 'Episode') { + return 'tvshows'; } - function renderCast(page, item) { - var people = (item.People || []).filter(function (p) { - return p.Type === 'Actor'; - }); + if (item.Type === 'MusicArtist' || item.Type === 'MusicAlbum' || item.Type === 'Audio' || item.Type === 'AudioBook') { + return 'music'; + } - if (!people.length) { - return void page.querySelector('#castCollapsible').classList.add('hide'); + if (item.Type === 'Program') { + return 'livetv'; + } + + return null; +} + +function filterItemsByCollectionItemType(items, typeInfo) { + return items.filter(function (item) { + if (typeInfo.mediaType) { + return item.MediaType == typeInfo.mediaType; } - page.querySelector('#castCollapsible').classList.remove('hide'); - var castContent = page.querySelector('#castContent'); + return item.Type == typeInfo.type; + }); +} - require(['peoplecardbuilder'], function (peoplecardbuilder) { - peoplecardbuilder.buildPeopleCards(people, { - itemsContainer: castContent, - coverImage: true, - serverId: item.ServerId, - shape: 'overflowPortrait', +function canPlaySomeItemInCollection(items) { + let i = 0; + + for (let length = items.length; i < length; i++) { + if (playbackManager.canPlay(items[i])) { + return true; + } + } + + return false; +} + +function renderCollectionItems(page, parentItem, types, items) { + page.querySelector('.collectionItems').classList.remove('hide'); + page.querySelector('.collectionItems').innerHTML = ''; + + for (const type of types) { + const typeItems = filterItemsByCollectionItemType(items, type); + + if (typeItems.length) { + renderCollectionItemType(page, parentItem, type, typeItems); + } + } + + const otherType = { + name: globalize.translate('HeaderOtherItems') + }; + const otherTypeItems = items.filter(function (curr) { + return !types.filter(function (t) { + return filterItemsByCollectionItemType([curr], t).length > 0; + }).length; + }); + + if (otherTypeItems.length) { + renderCollectionItemType(page, parentItem, otherType, otherTypeItems); + } + + if (!items.length) { + renderCollectionItemType(page, parentItem, { + name: globalize.translate('Items') + }, items); + } + + const containers = page.querySelectorAll('.collectionItemsContainer'); + + const notifyRefreshNeeded = function () { + renderChildren(page, parentItem); + }; + + for (const container of containers) { + container.notifyRefreshNeeded = notifyRefreshNeeded; + } + + // if nothing in the collection can be played hide play and shuffle buttons + if (!canPlaySomeItemInCollection(items)) { + hideAll(page, 'btnPlay', false); + hideAll(page, 'btnShuffle', false); + } + + // HACK: Call autoFocuser again because btnPlay may be hidden, but focused by reloadFromItem + // FIXME: Sometimes focus does not move until all (?) sections are loaded + import('autoFocuser').then(({ default: autoFocuser }) => { + autoFocuser.autoFocus(page); + }); +} + +function renderCollectionItemType(page, parentItem, type, items) { + let html = ''; + html += '
'; + html += '
'; + html += '

'; + html += '' + type.name + ''; + html += '

'; + html += '
'; + html += '
'; + const shape = type.type == 'MusicAlbum' ? getSquareShape(false) : getPortraitShape(false); + html += cardBuilder.getCardsHtml({ + items: items, + shape: shape, + showTitle: true, + showYear: type.mediaType === 'Video' || type.type === 'Series', + centerText: true, + lazy: true, + showDetailsMenu: true, + overlayMoreButton: true, + showAddToCollection: false, + showRemoveFromCollection: true, + collectionId: parentItem.Id + }); + html += '
'; + html += '
'; + const collectionItems = page.querySelector('.collectionItems'); + collectionItems.insertAdjacentHTML('beforeend', html); + imageLoader.lazyChildren(collectionItems); +} + +function renderMusicVideos(page, item, user) { + window.connectionManager.getApiClient(item.ServerId).getItems(user.Id, { + SortBy: 'SortName', + SortOrder: 'Ascending', + IncludeItemTypes: 'MusicVideo', + Recursive: true, + Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,CanDelete,MediaSourceCount', + AlbumIds: item.Id + }).then(function (result) { + if (result.Items.length) { + page.querySelector('#musicVideosCollapsible').classList.remove('hide'); + const musicVideosContent = page.querySelector('.musicVideosContent'); + musicVideosContent.innerHTML = getVideosHtml(result.Items); + imageLoader.lazyChildren(musicVideosContent); + } else { + page.querySelector('#musicVideosCollapsible').classList.add('hide'); + } + }); +} + +function renderAdditionalParts(page, item, user) { + window.connectionManager.getApiClient(item.ServerId).getAdditionalVideoParts(user.Id, item.Id).then(function (result) { + if (result.Items.length) { + page.querySelector('#additionalPartsCollapsible').classList.remove('hide'); + const additionalPartsContent = page.querySelector('#additionalPartsContent'); + additionalPartsContent.innerHTML = getVideosHtml(result.Items); + imageLoader.lazyChildren(additionalPartsContent); + } else { + page.querySelector('#additionalPartsCollapsible').classList.add('hide'); + } + }); +} + +function renderScenes(page, item) { + let chapters = item.Chapters || []; + + if (chapters.length && !chapters[0].ImageTag && (chapters = []), chapters.length) { + page.querySelector('#scenesCollapsible').classList.remove('hide'); + const scenesContent = page.querySelector('#scenesContent'); + + import('chaptercardbuilder').then(({ default: chaptercardbuilder }) => { + chaptercardbuilder.buildChapterCards(item, chapters, { + itemsContainer: scenesContent, + backdropShape: 'overflowBackdrop', + squareShape: 'overflowSquare', imageBlurhashes: item.ImageBlurHashes }); }); + } else { + page.querySelector('#scenesCollapsible').classList.add('hide'); + } +} + +function getVideosHtml(items) { + return cardBuilder.getCardsHtml({ + items: items, + shape: 'autooverflow', + showTitle: true, + action: 'play', + overlayText: false, + centerText: true, + showRuntime: true + }); +} + +function renderSpecials(page, item, user) { + window.connectionManager.getApiClient(item.ServerId).getSpecialFeatures(user.Id, item.Id).then(function (specials) { + const specialsContent = page.querySelector('#specialsContent'); + specialsContent.innerHTML = getVideosHtml(specials); + imageLoader.lazyChildren(specialsContent); + }); +} + +function renderCast(page, item) { + const people = (item.People || []).filter(function (p) { + return p.Type === 'Actor'; + }); + + if (!people.length) { + return void page.querySelector('#castCollapsible').classList.add('hide'); } - function itemDetailPage() { - var self = this; - self.setInitialCollapsibleState = setInitialCollapsibleState; - self.renderDetails = renderDetails; - self.renderCast = renderCast; + page.querySelector('#castCollapsible').classList.remove('hide'); + const castContent = page.querySelector('#castContent'); + + import('peoplecardbuilder').then(({ default: peoplecardbuilder }) => { + peoplecardbuilder.buildPeopleCards(people, { + itemsContainer: castContent, + coverImage: true, + serverId: item.ServerId, + shape: 'overflowPortrait', + imageBlurhashes: item.ImageBlurHashes + }); + }); +} + +function itemDetailPage() { + const self = this; + self.setInitialCollapsibleState = setInitialCollapsibleState; + self.renderDetails = renderDetails; + self.renderCast = renderCast; +} + +function bindAll(view, selector, eventName, fn) { + const elems = view.querySelectorAll(selector); + + for (const elem of elems) { + elem.addEventListener(eventName, fn); + } +} + +function onTrackSelectionsSubmit(e) { + e.preventDefault(); + return false; +} + +window.ItemDetailPage = new itemDetailPage(); + +export default function (view, params) { + function reload(instance, page, params) { + loading.show(); + + const apiClient = params.serverId ? window.connectionManager.getApiClient(params.serverId) : ApiClient; + + Promise.all([getPromise(apiClient, params), apiClient.getCurrentUser()]).then(([item, user]) => { + currentItem = item; + reloadFromItem(instance, page, params, item, user); + }).catch((error) => { + console.error('failed to get item or current user: ', error); + }); } - function bindAll(view, selector, eventName, fn) { - var elems = view.querySelectorAll(selector); - - for (const elem of elems) { - elem.addEventListener(eventName, fn); - } - } - - function onTrackSelectionsSubmit(e) { - e.preventDefault(); - return false; - } - - window.ItemDetailPage = new itemDetailPage(); - return function (view, params) { - function reload(instance, page, params) { - loading.show(); - - var apiClient = params.serverId ? connectionManager.getApiClient(params.serverId) : ApiClient; - - Promise.all([getPromise(apiClient, params), apiClient.getCurrentUser()]).then(([item, user]) => { - currentItem = item; - reloadFromItem(instance, page, params, item, user); - }).catch((error) => { - console.error('failed to get item or current user: ', error); + function splitVersions(instance, page, apiClient, params) { + import('confirm').then(({ default: confirm }) => { + confirm('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () { + loading.show(); + apiClient.ajax({ + type: 'DELETE', + url: apiClient.getUrl('Videos/' + params.id + '/AlternateSources') + }).then(function () { + loading.hide(); + reload(instance, page, params); + }); }); - } + }); + } - function splitVersions(instance, page, apiClient, params) { - require(['confirm'], function (confirm) { - confirm('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () { - loading.show(); - apiClient.ajax({ - type: 'DELETE', - url: apiClient.getUrl('Videos/' + params.id + '/AlternateSources') - }).then(function () { - loading.hide(); - reload(instance, page, params); - }); + function getPlayOptions(startPosition) { + const audioStreamIndex = view.querySelector('.selectAudio').value || null; + return { + startPositionTicks: startPosition, + mediaSourceId: view.querySelector('.selectSource').value, + audioStreamIndex: audioStreamIndex, + subtitleStreamIndex: view.querySelector('.selectSubtitles').value + }; + } + + function playItem(item, startPosition) { + const playOptions = getPlayOptions(startPosition); + playOptions.items = [item]; + playbackManager.play(playOptions); + } + + function playTrailer() { + playbackManager.playTrailers(currentItem); + } + + function playCurrentItem(button, mode) { + const item = currentItem; + + if (item.Type === 'Program') { + const apiClient = window.connectionManager.getApiClient(item.ServerId); + return void apiClient.getLiveTvChannel(item.ChannelId, apiClient.getCurrentUserId()).then(function (channel) { + playbackManager.play({ + items: [channel] }); }); } - function getPlayOptions(startPosition) { - var audioStreamIndex = view.querySelector('.selectAudio').value || null; - return { - startPositionTicks: startPosition, - mediaSourceId: view.querySelector('.selectSource').value, - audioStreamIndex: audioStreamIndex, - subtitleStreamIndex: view.querySelector('.selectSubtitles').value - }; - } + playItem(item, item.UserData && mode === 'resume' ? item.UserData.PlaybackPositionTicks : 0); + } - function playItem(item, startPosition) { - var playOptions = getPlayOptions(startPosition); - playOptions.items = [item]; - playbackManager.play(playOptions); - } + function onPlayClick() { + playCurrentItem(this, this.getAttribute('data-mode')); + } - function playTrailer() { - playbackManager.playTrailers(currentItem); - } + function onPosterClick(e) { + itemShortcuts.onClick.call(view.querySelector('.detailImageContainer'), e); + } - function playCurrentItem(button, mode) { - var item = currentItem; + function onInstantMixClick() { + playbackManager.instantMix(currentItem); + } - if ('Program' === item.Type) { - var apiClient = connectionManager.getApiClient(item.ServerId); - return void apiClient.getLiveTvChannel(item.ChannelId, apiClient.getCurrentUserId()).then(function (channel) { - playbackManager.play({ - items: [channel] - }); - }); - } + function onShuffleClick() { + playbackManager.shuffle(currentItem); + } - playItem(item, item.UserData && mode === 'resume' ? item.UserData.PlaybackPositionTicks : 0); - } - - function onPlayClick() { - playCurrentItem(this, this.getAttribute('data-mode')); - } - - function onInstantMixClick() { - playbackManager.instantMix(currentItem); - } - - function onShuffleClick() { - playbackManager.shuffle(currentItem); - } - - function onCancelSeriesTimerClick() { - require(['recordingHelper'], function (recordingHelper) { - recordingHelper.cancelSeriesTimerWithConfirmation(currentItem.Id, currentItem.ServerId).then(function () { - Dashboard.navigate('livetv.html'); - }); + function onCancelSeriesTimerClick() { + import('recordingHelper').then(({ default: recordingHelper }) => { + recordingHelper.cancelSeriesTimerWithConfirmation(currentItem.Id, currentItem.ServerId).then(function () { + Dashboard.navigate('livetv.html'); }); - } + }); + } - function onCancelTimerClick() { - require(['recordingHelper'], function (recordingHelper) { - recordingHelper.cancelTimer(connectionManager.getApiClient(currentItem.ServerId), currentItem.TimerId).then(function () { - reload(self, view, params); - }); + function onCancelTimerClick() { + import('recordingHelper').then(({ default: recordingHelper }) => { + recordingHelper.cancelTimer(window.connectionManager.getApiClient(currentItem.ServerId), currentItem.TimerId).then(function () { + reload(self, view, params); }); - } + }); + } - function onPlayTrailerClick() { - playTrailer(); - } + function onPlayTrailerClick() { + playTrailer(); + } - function onDownloadClick() { - require(['fileDownloader'], function (fileDownloader) { - var downloadHref = apiClient.getItemDownloadUrl(currentItem.Id); - fileDownloader.download([{ - url: downloadHref, - itemId: currentItem.Id, - serverId: currentItem.serverId - }]); - }); - } + function onDownloadClick() { + import('fileDownloader').then(({ default: fileDownloader }) => { + const downloadHref = apiClient.getItemDownloadUrl(currentItem.Id); + fileDownloader.download([{ + url: downloadHref, + itemId: currentItem.Id, + serverId: currentItem.serverId + }]); + }); + } + + function onMoreCommandsClick() { + const button = this; + let selectedItem = view.querySelector('.selectSource').value || currentItem.Id; + + apiClient.getItem(apiClient.getCurrentUserId(), selectedItem).then(function (item) { + selectedItem = item; - function onMoreCommandsClick() { - var button = this; apiClient.getCurrentUser().then(function (user) { - itemContextMenu.show(getContextMenuOptions(currentItem, user, button)).then(function (result) { + itemContextMenu.show(getContextMenuOptions(selectedItem, user, button)).then(function (result) { if (result.deleted) { appRouter.goHome(); } else if (result.updated) { @@ -1923,107 +1972,90 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti } }); }); - } + }); + } - function onPlayerChange() { - renderTrackSelections(view, self, currentItem); - setTrailerButtonVisibility(view, currentItem); - } + function onPlayerChange() { + renderTrackSelections(view, self, currentItem); + setTrailerButtonVisibility(view, currentItem); + } - function editImages() { - return new Promise(function (resolve, reject) { - require(['imageEditor'], function (imageEditor) { - imageEditor.show({ - itemId: currentItem.Id, - serverId: currentItem.ServerId - }).then(resolve, reject); - }); - }); - } + function onWebSocketMessage(e, data) { + const msg = data; - function onWebSocketMessage(e, data) { - var msg = data; + if (msg.MessageType === 'UserDataChanged' && currentItem && msg.Data.UserId == apiClient.getCurrentUserId()) { + const key = currentItem.UserData.Key; + const userData = msg.Data.UserDataList.filter(function (u) { + return u.Key == key; + })[0]; - if ('UserDataChanged' === msg.MessageType && currentItem && msg.Data.UserId == apiClient.getCurrentUserId()) { - var key = currentItem.UserData.Key; - var userData = msg.Data.UserDataList.filter(function (u) { - return u.Key == key; - })[0]; - - if (userData) { - currentItem.UserData = userData; - reloadPlayButtons(view, currentItem); - refreshImage(view, currentItem); - } + if (userData) { + currentItem.UserData = userData; + reloadPlayButtons(view, currentItem); + refreshImage(view, currentItem); } } + } - var currentItem; - var self = this; - var apiClient = params.serverId ? connectionManager.getApiClient(params.serverId) : ApiClient; - view.querySelectorAll('.btnPlay'); - bindAll(view, '.btnPlay', 'click', onPlayClick); - bindAll(view, '.btnResume', 'click', onPlayClick); - bindAll(view, '.btnInstantMix', 'click', onInstantMixClick); - bindAll(view, '.btnShuffle', 'click', onShuffleClick); - bindAll(view, '.btnPlayTrailer', 'click', onPlayTrailerClick); - bindAll(view, '.btnCancelSeriesTimer', 'click', onCancelSeriesTimerClick); - bindAll(view, '.btnCancelTimer', 'click', onCancelTimerClick); - bindAll(view, '.btnDownload', 'click', onDownloadClick); - view.querySelector('.trackSelections').addEventListener('submit', onTrackSelectionsSubmit); - view.querySelector('.btnSplitVersions').addEventListener('click', function () { - splitVersions(self, view, apiClient, params); - }); - bindAll(view, '.btnMoreCommands', 'click', onMoreCommandsClick); - view.querySelector('.selectSource').addEventListener('change', function () { - renderVideoSelections(view, self._currentPlaybackMediaSources); - renderAudioSelections(view, self._currentPlaybackMediaSources); - renderSubtitleSelections(view, self._currentPlaybackMediaSources); - }); - view.addEventListener('click', function (e) { - if (dom.parentWithClass(e.target, 'moreScenes')) { - renderScenes(view, currentItem); - } else if (dom.parentWithClass(e.target, 'morePeople')) { - renderCast(view, currentItem); - } else if (dom.parentWithClass(e.target, 'moreSpecials')) { - apiClient.getCurrentUser().then(function (user) { - renderSpecials(view, currentItem, user); - }); + let currentItem; + const self = this; + const apiClient = params.serverId ? window.connectionManager.getApiClient(params.serverId) : ApiClient; + + const btnResume = view.querySelector('.mainDetailButtons .btnResume'); + const btnPlay = view.querySelector('.mainDetailButtons .btnPlay'); + if (layoutManager.tv && !btnResume.classList.contains('hide')) { + btnResume.classList.add('fab'); + btnResume.classList.add('detailFloatingButton'); + } else if (layoutManager.tv && btnResume.classList.contains('hide')) { + btnPlay.classList.add('fab'); + btnPlay.classList.add('detailFloatingButton'); + } + + view.querySelectorAll('.btnPlay'); + bindAll(view, '.btnPlay', 'click', onPlayClick); + bindAll(view, '.btnResume', 'click', onPlayClick); + bindAll(view, '.btnInstantMix', 'click', onInstantMixClick); + bindAll(view, '.btnShuffle', 'click', onShuffleClick); + bindAll(view, '.btnPlayTrailer', 'click', onPlayTrailerClick); + bindAll(view, '.btnCancelSeriesTimer', 'click', onCancelSeriesTimerClick); + bindAll(view, '.btnCancelTimer', 'click', onCancelTimerClick); + bindAll(view, '.btnDownload', 'click', onDownloadClick); + view.querySelector('.detailImageContainer').addEventListener('click', onPosterClick); + view.querySelector('.trackSelections').addEventListener('submit', onTrackSelectionsSubmit); + view.querySelector('.btnSplitVersions').addEventListener('click', function () { + splitVersions(self, view, apiClient, params); + }); + bindAll(view, '.btnMoreCommands', 'click', onMoreCommandsClick); + view.querySelector('.selectSource').addEventListener('change', function () { + renderVideoSelections(view, self._currentPlaybackMediaSources); + renderAudioSelections(view, self._currentPlaybackMediaSources); + renderSubtitleSelections(view, self._currentPlaybackMediaSources); + }); + view.addEventListener('viewshow', function (e) { + const page = this; + + libraryMenu.setTransparentMenu(true); + + if (e.detail.isRestored) { + if (currentItem) { + Emby.Page.setTitle(''); + renderTrackSelections(page, self, currentItem, true); } - }); - view.querySelector('.detailImageContainer').addEventListener('click', function (e) { - if (dom.parentWithClass(e.target, 'itemDetailGalleryLink')) { - editImages().then(function () { - reload(self, view, params); - }); - } - }); - view.addEventListener('viewshow', function (e) { - var page = this; + } else { + reload(self, page, params); + } - libraryMenu.setTransparentMenu(true); - - if (e.detail.isRestored) { - if (currentItem) { - Emby.Page.setTitle(''); - renderTrackSelections(page, self, currentItem, true); - } - } else { - reload(self, page, params); - } - - events.on(apiClient, 'message', onWebSocketMessage); - events.on(playbackManager, 'playerchange', onPlayerChange); - }); - view.addEventListener('viewbeforehide', function () { - events.off(apiClient, 'message', onWebSocketMessage); - events.off(playbackManager, 'playerchange', onPlayerChange); - libraryMenu.setTransparentMenu(false); - }); - view.addEventListener('viewdestroy', function () { - currentItem = null; - self._currentPlaybackMediaSources = null; - self.currentRecordingFields = null; - }); - }; -}); + events.on(apiClient, 'message', onWebSocketMessage); + events.on(playbackManager, 'playerchange', onPlayerChange); + }); + view.addEventListener('viewbeforehide', function () { + events.off(apiClient, 'message', onWebSocketMessage); + events.off(playbackManager, 'playerchange', onPlayerChange); + libraryMenu.setTransparentMenu(false); + }); + view.addEventListener('viewdestroy', function () { + currentItem = null; + self._currentPlaybackMediaSources = null; + self.currentRecordingFields = null; + }); +} diff --git a/src/list.html b/src/controllers/list.html similarity index 100% rename from src/list.html rename to src/controllers/list.html diff --git a/src/controllers/list.js b/src/controllers/list.js index d05616ec9d..07e07eeb05 100644 --- a/src/controllers/list.js +++ b/src/controllers/list.js @@ -1,15 +1,27 @@ -define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, alphaPicker) { - 'use strict'; +import globalize from 'globalize'; +import listView from 'listView'; +import layoutManager from 'layoutManager'; +import * as userSettings from 'userSettings'; +import focusManager from 'focusManager'; +import cardBuilder from 'cardBuilder'; +import loading from 'loading'; +import AlphaNumericShortcuts from 'alphaNumericShortcuts'; +import playbackManager from 'playbackManager'; +import AlphaPicker from 'alphaPicker'; +import 'emby-itemscontainer'; +import 'emby-scroller'; + +/* eslint-disable indent */ function getInitialLiveTvQuery(instance, params) { - var query = { - UserId: connectionManager.getApiClient(params.serverId).getCurrentUserId(), + const query = { + UserId: window.connectionManager.getApiClient(params.serverId).getCurrentUserId(), StartIndex: 0, Fields: 'ChannelInfo,PrimaryImageAspectRatio', Limit: 300 }; - if ('Recordings' === params.type) { + if (params.type === 'Recordings') { query.IsInProgress = false; } else { query.HasAired = false; @@ -19,39 +31,39 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' query.GenreIds = params.genreId; } - if ('true' === params.IsMovie) { + if (params.IsMovie === 'true') { query.IsMovie = true; - } else if ('false' === params.IsMovie) { + } else if (params.IsMovie === 'false') { query.IsMovie = false; } - if ('true' === params.IsSeries) { + if (params.IsSeries === 'true') { query.IsSeries = true; - } else if ('false' === params.IsSeries) { + } else if (params.IsSeries === 'false') { query.IsSeries = false; } - if ('true' === params.IsNews) { + if (params.IsNews === 'true') { query.IsNews = true; - } else if ('false' === params.IsNews) { + } else if (params.IsNews === 'false') { query.IsNews = false; } - if ('true' === params.IsSports) { + if (params.IsSports === 'true') { query.IsSports = true; - } else if ('false' === params.IsSports) { + } else if (params.IsSports === 'false') { query.IsSports = false; } - if ('true' === params.IsKids) { + if (params.IsKids === 'true') { query.IsKids = true; - } else if ('false' === params.IsKids) { + } else if (params.IsKids === 'false') { query.IsKids = false; } - if ('true' === params.IsAiring) { + if (params.IsAiring === 'true') { query.IsAiring = true; - } else if ('false' === params.IsAiring) { + } else if (params.IsAiring === 'false') { query.IsAiring = false; } @@ -59,7 +71,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function modifyQueryWithFilters(instance, query) { - var sortValues = instance.getSortValues(); + const sortValues = instance.getSortValues(); if (!query.SortBy) { query.SortBy = sortValues.sortBy; @@ -68,9 +80,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' query.Fields = query.Fields ? query.Fields + ',PrimaryImageAspectRatio' : 'PrimaryImageAspectRatio'; query.ImageTypeLimit = 1; - var hasFilters; - var queryFilters = []; - var filters = instance.getFilters(); + let hasFilters; + const queryFilters = []; + const filters = instance.getFilters(); if (filters.IsPlayed) { queryFilters.push('IsPlayed'); @@ -151,7 +163,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' instance.setFilterStatus(hasFilters); if (instance.alphaPicker) { - query.NameStartsWithOrGreater = instance.alphaPicker.value(); + query.NameStartsWith = instance.alphaPicker.value(); } return query; @@ -164,30 +176,30 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function updateSortText(instance) { - var btnSortText = instance.btnSortText; + const btnSortText = instance.btnSortText; if (btnSortText) { - var options = instance.getSortMenuOptions(); - var values = instance.getSortValues(); - var sortBy = values.sortBy; + const options = instance.getSortMenuOptions(); + const values = instance.getSortValues(); + const sortBy = values.sortBy; - for (var i = 0, length = options.length; i < length; i++) { - if (sortBy === options[i].value) { - btnSortText.innerHTML = globalize.translate('SortByValue', options[i].name); + for (const option of options) { + if (sortBy === option.value) { + btnSortText.innerHTML = globalize.translate('SortByValue', option.name); break; } } - var btnSortIcon = instance.btnSortIcon; + const btnSortIcon = instance.btnSortIcon; if (btnSortIcon) { - setSortButtonIcon(btnSortIcon, 'Descending' === values.sortOrder ? 'arrow_downward' : 'arrow_upward'); + setSortButtonIcon(btnSortIcon, values.sortOrder === 'Descending' ? 'arrow_downward' : 'arrow_upward'); } } } function updateItemsContainerForViewType(instance) { - if ('list' === instance.getViewSettings().imageType) { + if (instance.getViewSettings().imageType === 'list') { instance.itemsContainer.classList.remove('vertical-wrap'); instance.itemsContainer.classList.add('vertical-list'); } else { @@ -198,16 +210,16 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' function updateAlphaPickerState(instance, numItems) { if (instance.alphaPicker) { - var alphaPicker = instance.alphaPickerElement; + const alphaPicker = instance.alphaPickerElement; if (alphaPicker) { - var values = instance.getSortValues(); + const values = instance.getSortValues(); - if (null == numItems) { + if (numItems == null) { numItems = 100; } - if ('SortName' === values.sortBy && 'Ascending' === values.sortOrder && numItems > 40) { + if (values.sortBy === 'SortName' && values.sortOrder === 'Ascending' && numItems > 40) { alphaPicker.classList.remove('hide'); instance.itemsContainer.parentNode.classList.add('padded-right-withalphapicker'); } else { @@ -219,22 +231,22 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function getItems(instance, params, item, sortBy, startIndex, limit) { - var apiClient = connectionManager.getApiClient(params.serverId); + const apiClient = window.connectionManager.getApiClient(params.serverId); instance.queryRecursive = false; - if ('Recordings' === params.type) { + if (params.type === 'Recordings') { return apiClient.getLiveTvRecordings(getInitialLiveTvQuery(instance, params)); } - if ('Programs' === params.type) { - if ('true' === params.IsAiring) { + if (params.type === 'Programs') { + if (params.IsAiring === 'true') { return apiClient.getLiveTvRecommendedPrograms(getInitialLiveTvQuery(instance, params)); } return apiClient.getLiveTvPrograms(getInitialLiveTvQuery(instance, params)); } - if ('nextup' === params.type) { + if (params.type === 'nextup') { return apiClient.getNextUpEpisodes(modifyQueryWithFilters(instance, { Limit: limit, Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo', @@ -248,11 +260,11 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' if (!item) { instance.queryRecursive = true; - var method = 'getItems'; + let method = 'getItems'; - if ('MusicArtist' === params.type) { + if (params.type === 'MusicArtist') { method = 'getArtists'; - } else if ('Person' === params.type) { + } else if (params.type === 'Person') { method = 'getPeople'; } @@ -261,17 +273,17 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' Limit: limit, Fields: 'PrimaryImageAspectRatio,SortName', ImageTypeLimit: 1, - IncludeItemTypes: 'MusicArtist' === params.type || 'Person' === params.type ? null : params.type, + IncludeItemTypes: params.type === 'MusicArtist' || params.type === 'Person' ? null : params.type, Recursive: true, - IsFavorite: 'true' === params.IsFavorite || null, + IsFavorite: params.IsFavorite === 'true' || null, ArtistIds: params.artistId || null, SortBy: sortBy })); } - if ('Genre' === item.Type || 'MusicGenre' === item.Type || 'Studio' === item.Type || 'Person' === item.Type) { + if (item.Type === 'Genre' || item.Type === 'MusicGenre' || item.Type === 'Studio' || item.Type === 'Person') { instance.queryRecursive = true; - var query = { + const query = { StartIndex: startIndex, Limit: limit, Fields: 'PrimaryImageAspectRatio,SortName', @@ -280,25 +292,25 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' SortBy: sortBy }; - if ('Studio' === item.Type) { + if (item.Type === 'Studio') { query.StudioIds = item.Id; - } else if ('Genre' === item.Type || 'MusicGenre' === item.Type) { + } else if (item.Type === 'Genre' || item.Type === 'MusicGenre') { query.GenreIds = item.Id; - } else if ('Person' === item.Type) { + } else if (item.Type === 'Person') { query.PersonIds = item.Id; } - if ('MusicGenre' === item.Type) { + if (item.Type === 'MusicGenre') { query.IncludeItemTypes = 'MusicAlbum'; - } else if ('GameGenre' === item.Type) { + } else if (item.Type === 'GameGenre') { query.IncludeItemTypes = 'Game'; - } else if ('movies' === item.CollectionType) { + } else if (item.CollectionType === 'movies') { query.IncludeItemTypes = 'Movie'; - } else if ('tvshows' === item.CollectionType) { + } else if (item.CollectionType === 'tvshows') { query.IncludeItemTypes = 'Series'; - } else if ('Genre' === item.Type) { + } else if (item.Type === 'Genre') { query.IncludeItemTypes = 'Movie,Series,Video'; - } else if ('Person' === item.Type) { + } else if (item.Type === 'Person') { query.IncludeItemTypes = params.type; } @@ -316,12 +328,12 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function getItem(params) { - if ('Recordings' === params.type || 'Programs' === params.type || 'nextup' === params.type) { + if (params.type === 'Recordings' || params.type === 'Programs' || params.type === 'nextup') { return Promise.resolve(null); } - var apiClient = connectionManager.getApiClient(params.serverId); - var itemId = params.genreId || params.musicGenreId || params.studioId || params.personId || params.parentId; + const apiClient = window.connectionManager.getApiClient(params.serverId); + const itemId = params.genreId || params.musicGenreId || params.studioId || params.personId || params.parentId; if (itemId) { return apiClient.getItem(apiClient.getCurrentUserId(), itemId); @@ -331,9 +343,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function showViewSettingsMenu() { - var instance = this; + const instance = this; - require(['viewSettings'], function (ViewSettings) { + import('viewSettings').then(({default: ViewSettings}) => { new ViewSettings().show({ settingsKey: instance.getSettingsKey(), settings: instance.getViewSettings(), @@ -346,9 +358,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function showFilterMenu() { - var instance = this; + const instance = this; - require(['filterMenu'], function (FilterMenu) { + import('filterMenu').then(({default: FilterMenu}) => { new FilterMenu().show({ settingsKey: instance.getSettingsKey(), settings: instance.getFilters(), @@ -365,9 +377,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function showSortMenu() { - var instance = this; + const instance = this; - require(['sortMenu'], function (SortMenu) { + import('sortMenu').then(({default: SortMenu}) => { new SortMenu().show({ settingsKey: instance.getSettingsKey(), settings: instance.getSortValues(), @@ -383,10 +395,10 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function onNewItemClick() { - var instance = this; + const instance = this; - require(['playlistEditor'], function (playlistEditor) { - new playlistEditor().show({ + import('playlistEditor').then(({default: playlistEditor}) => { + new playlistEditor({ items: [], serverId: instance.params.serverId }); @@ -394,25 +406,26 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function hideOrShowAll(elems, hide) { - for (var i = 0, length = elems.length; i < length; i++) { + for (const elem of elems) { if (hide) { - elems[i].classList.add('hide'); + elem.classList.add('hide'); } else { - elems[i].classList.remove('hide'); + elem.classList.remove('hide'); } } } function bindAll(elems, eventName, fn) { - for (var i = 0, length = elems.length; i < length; i++) { - elems[i].addEventListener(eventName, fn); + for (const elem of elems) { + elem.addEventListener(eventName, fn); } } - function ItemsView(view, params) { +class ItemsView { + constructor(view, params) { function fetchData() { return getItems(self, params, self.currentItem).then(function (result) { - if (null == self.totalItemCount) { + if (self.totalItemCount == null) { self.totalItemCount = result.Items ? result.Items.length : result.length; } @@ -422,45 +435,45 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function getItemsHtml(items) { - var settings = self.getViewSettings(); + const settings = self.getViewSettings(); - if ('list' === settings.imageType) { + if (settings.imageType === 'list') { return listView.getListViewHtml({ items: items }); } - var shape; - var preferThumb; - var preferDisc; - var preferLogo; - var defaultShape; - var item = self.currentItem; - var lines = settings.showTitle ? 2 : 0; + let shape; + let preferThumb; + let preferDisc; + let preferLogo; + let defaultShape; + const item = self.currentItem; + let lines = settings.showTitle ? 2 : 0; - if ('banner' === settings.imageType) { + if (settings.imageType === 'banner') { shape = 'banner'; - } else if ('disc' === settings.imageType) { + } else if (settings.imageType === 'disc') { shape = 'square'; preferDisc = true; - } else if ('logo' === settings.imageType) { + } else if (settings.imageType === 'logo') { shape = 'backdrop'; preferLogo = true; - } else if ('thumb' === settings.imageType) { + } else if (settings.imageType === 'thumb') { shape = 'backdrop'; preferThumb = true; - } else if ('nextup' === params.type) { + } else if (params.type === 'nextup') { shape = 'backdrop'; - preferThumb = 'thumb' === settings.imageType; - } else if ('Programs' === params.type || 'Recordings' === params.type) { - shape = 'true' === params.IsMovie ? 'portrait' : 'autoVertical'; - preferThumb = 'true' !== params.IsMovie ? 'auto' : false; - defaultShape = 'true' === params.IsMovie ? 'portrait' : 'backdrop'; + preferThumb = settings.imageType === 'thumb'; + } else if (params.type === 'Programs' || params.type === 'Recordings') { + shape = params.IsMovie === 'true' ? 'portrait' : 'autoVertical'; + preferThumb = params.IsMovie !== 'true' ? 'auto' : false; + defaultShape = params.IsMovie === 'true' ? 'portrait' : 'backdrop'; } else { shape = 'autoVertical'; } - var posterOptions = { + let posterOptions = { shape: shape, showTitle: settings.showTitle, showYear: settings.showTitle, @@ -473,46 +486,46 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' overlayMoreButton: true, overlayText: !settings.showTitle, defaultShape: defaultShape, - action: 'Audio' === params.type ? 'playallfromhere' : null + action: params.type === 'Audio' ? 'playallfromhere' : null }; - if ('nextup' === params.type) { + if (params.type === 'nextup') { posterOptions.showParentTitle = settings.showTitle; - } else if ('Person' === params.type) { + } else if (params.type === 'Person') { posterOptions.showYear = false; posterOptions.showParentTitle = false; lines = 1; - } else if ('Audio' === params.type) { + } else if (params.type === 'Audio') { posterOptions.showParentTitle = settings.showTitle; - } else if ('MusicAlbum' === params.type) { + } else if (params.type === 'MusicAlbum') { posterOptions.showParentTitle = settings.showTitle; - } else if ('Episode' === params.type) { + } else if (params.type === 'Episode') { posterOptions.showParentTitle = settings.showTitle; - } else if ('MusicArtist' === params.type) { + } else if (params.type === 'MusicArtist') { posterOptions.showYear = false; lines = 1; - } else if ('Programs' === params.type) { + } else if (params.type === 'Programs') { lines = settings.showTitle ? 1 : 0; - var showParentTitle = settings.showTitle && 'true' !== params.IsMovie; + const showParentTitle = settings.showTitle && params.IsMovie !== 'true'; if (showParentTitle) { lines++; } - var showAirTime = settings.showTitle && 'Recordings' !== params.type; + const showAirTime = settings.showTitle && params.type !== 'Recordings'; if (showAirTime) { lines++; } - var showYear = settings.showTitle && 'true' === params.IsMovie && 'Recordings' === params.type; + const showYear = settings.showTitle && params.IsMovie === 'true' && params.type === 'Recordings'; if (showYear) { lines++; } posterOptions = Object.assign(posterOptions, { - inheritThumb: 'Recordings' === params.type, + inheritThumb: params.type === 'Recordings', context: 'livetv', showParentTitle: showParentTitle, showAirTime: showAirTime, @@ -529,7 +542,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' posterOptions.lines = lines; posterOptions.items = items; - if (item && 'folders' === item.CollectionType) { + if (item && item.CollectionType === 'folders') { posterOptions.context = 'folders'; } @@ -538,13 +551,13 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' function initAlphaPicker() { self.scroller = view.querySelector('.scrollFrameY'); - var alphaPickerElement = self.alphaPickerElement; + const alphaPickerElement = self.alphaPickerElement; alphaPickerElement.classList.add('alphaPicker-fixed-right'); alphaPickerElement.classList.add('focuscontainer-right'); self.itemsContainer.parentNode.classList.add('padded-right-withalphapicker'); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker({ element: alphaPickerElement, itemsContainer: layoutManager.tv ? self.itemsContainer : null, itemClass: 'card', @@ -561,7 +574,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' function setTitle(item) { Emby.Page.setTitle(getTitle(item) || ''); - if (item && 'playlists' === item.CollectionType) { + if (item && item.CollectionType === 'playlists') { hideOrShowAll(view.querySelectorAll('.btnNewItem'), false); } else { hideOrShowAll(view.querySelectorAll('.btnNewItem'), true); @@ -569,43 +582,43 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function getTitle(item) { - if ('Recordings' === params.type) { + if (params.type === 'Recordings') { return globalize.translate('Recordings'); } - if ('Programs' === params.type) { - if ('true' === params.IsMovie) { + if (params.type === 'Programs') { + if (params.IsMovie === 'true') { return globalize.translate('Movies'); } - if ('true' === params.IsSports) { + if (params.IsSports === 'true') { return globalize.translate('Sports'); } - if ('true' === params.IsKids) { + if (params.IsKids === 'true') { return globalize.translate('HeaderForKids'); } - if ('true' === params.IsAiring) { + if (params.IsAiring === 'true') { return globalize.translate('HeaderOnNow'); } - if ('true' === params.IsSeries) { + if (params.IsSeries === 'true') { return globalize.translate('Shows'); } - if ('true' === params.IsNews) { + if (params.IsNews === 'true') { return globalize.translate('News'); } return globalize.translate('Programs'); } - if ('nextup' === params.type) { + if (params.type === 'nextup') { return globalize.translate('NextUp'); } - if ('favoritemovies' === params.type) { + if (params.type === 'favoritemovies') { return globalize.translate('FavoriteMovies'); } @@ -613,35 +626,35 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' return item.Name; } - if ('Movie' === params.type) { + if (params.type === 'Movie') { return globalize.translate('Movies'); } - if ('Series' === params.type) { + if (params.type === 'Series') { return globalize.translate('Shows'); } - if ('Season' === params.type) { + if (params.type === 'Season') { return globalize.translate('Seasons'); } - if ('Episode' === params.type) { + if (params.type === 'Episode') { return globalize.translate('Episodes'); } - if ('MusicArtist' === params.type) { + if (params.type === 'MusicArtist') { return globalize.translate('Artists'); } - if ('MusicAlbum' === params.type) { + if (params.type === 'MusicAlbum') { return globalize.translate('Albums'); } - if ('Audio' === params.type) { + if (params.type === 'Audio') { return globalize.translate('Songs'); } - if ('Video' === params.type) { + if (params.type === 'Video') { return globalize.translate('Videos'); } @@ -649,7 +662,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function play() { - var currentItem = self.currentItem; + const currentItem = self.currentItem; if (currentItem && !self.hasFilters) { playbackManager.play({ @@ -665,7 +678,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function queue() { - var currentItem = self.currentItem; + const currentItem = self.currentItem; if (currentItem && !self.hasFilters) { playbackManager.queue({ @@ -681,7 +694,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } function shuffle() { - var currentItem = self.currentItem; + const currentItem = self.currentItem; if (currentItem && !self.hasFilters) { playbackManager.shuffle(currentItem); @@ -694,34 +707,31 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } } - var self = this; + const self = this; self.params = params; this.itemsContainer = view.querySelector('.itemsContainer'); if (params.parentId) { this.itemsContainer.setAttribute('data-parentid', params.parentId); - } else if ('nextup' === params.type) { + } else if (params.type === 'nextup') { this.itemsContainer.setAttribute('data-monitor', 'videoplayback'); - } else if ('favoritemovies' === params.type) { + } else if (params.type === 'favoritemovies') { this.itemsContainer.setAttribute('data-monitor', 'markfavorite'); - } else if ('Programs' === params.type) { + } else if (params.type === 'Programs') { this.itemsContainer.setAttribute('data-refreshinterval', '300000'); } - var i; - var length; - var btnViewSettings = view.querySelectorAll('.btnViewSettings'); + const btnViewSettings = view.querySelectorAll('.btnViewSettings'); - for (i = 0, length = btnViewSettings.length; i < length; i++) { - btnViewSettings[i].addEventListener('click', showViewSettingsMenu.bind(this)); + for (const btnViewSetting of btnViewSettings) { + btnViewSetting.addEventListener('click', showViewSettingsMenu.bind(this)); } - var filterButtons = view.querySelectorAll('.btnFilter'); + const filterButtons = view.querySelectorAll('.btnFilter'); this.filterButtons = filterButtons; - var hasVisibleFilters = this.getVisibleFilters().length; + const hasVisibleFilters = this.getVisibleFilters().length; - for (i = 0, length = filterButtons.length; i < length; i++) { - var btnFilter = filterButtons[i]; + for (const btnFilter of filterButtons) { btnFilter.addEventListener('click', showFilterMenu.bind(this)); if (hasVisibleFilters) { @@ -731,13 +741,13 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } } - var sortButtons = view.querySelectorAll('.btnSort'); + const sortButtons = view.querySelectorAll('.btnSort'); - for (this.sortButtons = sortButtons, i = 0, length = sortButtons.length; i < length; i++) { - var sortButton = sortButtons[i]; + this.sortButtons = sortButtons; + for (const sortButton of sortButtons) { sortButton.addEventListener('click', showSortMenu.bind(this)); - if ('nextup' !== params.type) { + if (params.type !== 'nextup') { sortButton.classList.remove('hide'); } } @@ -749,7 +759,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' self.itemsContainer.fetchData = fetchData; self.itemsContainer.getItemsHtml = getItemsHtml; view.addEventListener('viewshow', function (e) { - var isRestored = e.detail.isRestored; + const isRestored = e.detail.isRestored; if (!isRestored) { loading.show(); @@ -761,7 +771,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' getItem(params).then(function (item) { setTitle(item); self.currentItem = item; - var refresh = !isRestored; + const refresh = !isRestored; self.itemsContainer.resume({ refresh: refresh }).then(function () { @@ -772,19 +782,19 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } }); - if (!isRestored && item && 'PhotoAlbum' !== item.Type) { + if (!isRestored && item && item.Type !== 'PhotoAlbum') { initAlphaPicker(); } - var itemType = item ? item.Type : null; + const itemType = item ? item.Type : null; - if ('MusicGenre' === itemType || 'Programs' !== params.type && 'Channel' !== itemType) { + if (itemType === 'MusicGenre' || params.type !== 'Programs' && itemType !== 'Channel') { hideOrShowAll(view.querySelectorAll('.btnPlay'), false); } else { hideOrShowAll(view.querySelectorAll('.btnPlay'), true); } - if ('MusicGenre' === itemType || 'Programs' !== params.type && 'nextup' !== params.type && 'Channel' !== itemType) { + if (itemType === 'MusicGenre' || params.type !== 'Programs' && params.type !== 'nextup' && itemType !== 'Channel') { hideOrShowAll(view.querySelectorAll('.btnShuffle'), false); } else { hideOrShowAll(view.querySelectorAll('.btnShuffle'), true); @@ -803,18 +813,18 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' bindAll(view.querySelectorAll('.btnShuffle'), 'click', shuffle); } - this.alphaNumericShortcuts = new AlphaNumericShortcuts({ + self.alphaNumericShortcuts = new AlphaNumericShortcuts({ itemsContainer: self.itemsContainer }); }); view.addEventListener('viewhide', function (e) { - var itemsContainer = self.itemsContainer; + const itemsContainer = self.itemsContainer; if (itemsContainer) { itemsContainer.pause(); } - var alphaNumericShortcuts = self.alphaNumericShortcuts; + const alphaNumericShortcuts = self.alphaNumericShortcuts; if (alphaNumericShortcuts) { alphaNumericShortcuts.destroy(); @@ -842,17 +852,17 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' }); } - ItemsView.prototype.getFilters = function () { - var basekey = this.getSettingsKey(); + getFilters() { + const basekey = this.getSettingsKey(); return { - IsPlayed: 'true' === userSettings.getFilter(basekey + '-filter-IsPlayed'), - IsUnplayed: 'true' === userSettings.getFilter(basekey + '-filter-IsUnplayed'), - IsFavorite: 'true' === userSettings.getFilter(basekey + '-filter-IsFavorite'), - IsResumable: 'true' === userSettings.getFilter(basekey + '-filter-IsResumable'), - Is4K: 'true' === userSettings.getFilter(basekey + '-filter-Is4K'), - IsHD: 'true' === userSettings.getFilter(basekey + '-filter-IsHD'), - IsSD: 'true' === userSettings.getFilter(basekey + '-filter-IsSD'), - Is3D: 'true' === userSettings.getFilter(basekey + '-filter-Is3D'), + IsPlayed: userSettings.getFilter(basekey + '-filter-IsPlayed') === 'true', + IsUnplayed: userSettings.getFilter(basekey + '-filter-IsUnplayed') === 'true', + IsFavorite: userSettings.getFilter(basekey + '-filter-IsFavorite') === 'true', + IsResumable: userSettings.getFilter(basekey + '-filter-IsResumable') === 'true', + Is4K: userSettings.getFilter(basekey + '-filter-Is4K') === 'true', + IsHD: userSettings.getFilter(basekey + '-filter-IsHD') === 'true', + IsSD: userSettings.getFilter(basekey + '-filter-IsSD') === 'true', + Is3D: userSettings.getFilter(basekey + '-filter-Is3D') === 'true', VideoTypes: userSettings.getFilter(basekey + '-filter-VideoTypes'), SeriesStatus: userSettings.getFilter(basekey + '-filter-SeriesStatus'), HasSubtitles: userSettings.getFilter(basekey + '-filter-HasSubtitles'), @@ -862,39 +872,37 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' HasThemeVideo: userSettings.getFilter(basekey + '-filter-HasThemeVideo'), GenreIds: userSettings.getFilter(basekey + '-filter-GenreIds') }; - }; + } - ItemsView.prototype.getSortValues = function () { - var basekey = this.getSettingsKey(); + getSortValues() { + const basekey = this.getSettingsKey(); return { sortBy: userSettings.getFilter(basekey + '-sortby') || this.getDefaultSortBy(), - sortOrder: 'Descending' === userSettings.getFilter(basekey + '-sortorder') ? 'Descending' : 'Ascending' + sortOrder: userSettings.getFilter(basekey + '-sortorder') === 'Descending' ? 'Descending' : 'Ascending' }; - }; + } - ItemsView.prototype.getDefaultSortBy = function () { - var params = this.params; - var sortNameOption = this.getNameSortOption(params); + getDefaultSortBy() { + const sortNameOption = this.getNameSortOption(this.params); - if (params.type) { + if (this.params.type) { return sortNameOption.value; } return 'IsFolder,' + sortNameOption.value; - }; + } - ItemsView.prototype.getSortMenuOptions = function () { - var sortBy = []; - var params = this.params; + getSortMenuOptions() { + const sortBy = []; - if ('Programs' === params.type) { + if (this.params.type === 'Programs') { sortBy.push({ name: globalize.translate('AirDate'), value: 'StartDate,SortName' }); } - var option = this.getNameSortOption(params); + let option = this.getNameSortOption(this.params); if (option) { sortBy.push(option); @@ -912,7 +920,7 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' sortBy.push(option); } - if ('Programs' !== params.type) { + if (this.params.type !== 'Programs') { sortBy.push({ name: globalize.translate('DateAdded'), value: 'DateCreated,SortName' @@ -925,8 +933,8 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' sortBy.push(option); } - if (!params.type) { - option = this.getNameSortOption(params); + if (!this.params.type) { + option = this.getNameSortOption(this.params); sortBy.push({ name: globalize.translate('Folders'), value: 'IsFolder,' + option.value @@ -952,10 +960,10 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' value: 'Runtime,SortName' }); return sortBy; - }; + } - ItemsView.prototype.getNameSortOption = function (params) { - if ('Episode' === params.type) { + getNameSortOption(params) { + if (params.type === 'Episode') { return { name: globalize.translate('Name'), value: 'SeriesName,SortName' @@ -966,10 +974,10 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' name: globalize.translate('Name'), value: 'SortName' }; - }; + } - ItemsView.prototype.getPlayCountSortOption = function () { - if ('Programs' === this.params.type) { + getPlayCountSortOption() { + if (this.params.type === 'Programs') { return null; } @@ -977,10 +985,10 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' name: globalize.translate('PlayCount'), value: 'PlayCount,SortName' }; - }; + } - ItemsView.prototype.getDatePlayedSortOption = function () { - if ('Programs' === this.params.type) { + getDatePlayedSortOption() { + if (this.params.type === 'Programs') { return null; } @@ -988,10 +996,10 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' name: globalize.translate('DatePlayed'), value: 'DatePlayed,SortName' }; - }; + } - ItemsView.prototype.getCriticRatingSortOption = function () { - if ('Programs' === this.params.type) { + getCriticRatingSortOption() { + if (this.params.type === 'Programs') { return null; } @@ -999,21 +1007,21 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' name: globalize.translate('CriticRating'), value: 'CriticRating,SortName' }; - }; + } - ItemsView.prototype.getCommunityRatingSortOption = function () { + getCommunityRatingSortOption() { return { name: globalize.translate('CommunityRating'), value: 'CommunityRating,SortName' }; - }; + } - ItemsView.prototype.getVisibleFilters = function () { - var filters = []; - var params = this.params; + getVisibleFilters() { + const filters = []; + const params = this.params; - if (!('nextup' === params.type)) { - if ('Programs' === params.type) { + if (!(params.type === 'nextup')) { + if (params.type === 'Programs') { filters.push('Genres'); } else { filters.push('IsUnplayed'); @@ -1034,16 +1042,15 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } return filters; - }; + } - ItemsView.prototype.setFilterStatus = function (hasFilters) { + setFilterStatus(hasFilters) { this.hasFilters = hasFilters; - var filterButtons = this.filterButtons; + const filterButtons = this.filterButtons; if (filterButtons.length) { - for (var i = 0, length = filterButtons.length; i < length; i++) { - var btnFilter = filterButtons[i]; - var bubble = btnFilter.querySelector('.filterButtonBubble'); + for (const btnFilter of filterButtons) { + let bubble = btnFilter.querySelector('.filterButtonBubble'); if (!bubble) { if (!hasFilters) { @@ -1062,10 +1069,10 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } } } - }; + } - ItemsView.prototype.getFilterMenuOptions = function () { - var params = this.params; + getFilterMenuOptions() { + const params = this.params; return { IsAiring: params.IsAiring, IsMovie: params.IsMovie, @@ -1075,68 +1082,68 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' IsSeries: params.IsSeries, Recursive: this.queryRecursive }; - }; + } - ItemsView.prototype.getVisibleViewSettings = function () { - var item = (this.params, this.currentItem); - var fields = ['showTitle']; + getVisibleViewSettings() { + const item = (this.params, this.currentItem); + const fields = ['showTitle']; - if (!item || 'PhotoAlbum' !== item.Type && 'ChannelFolderItem' !== item.Type) { + if (!item || item.Type !== 'PhotoAlbum' && item.Type !== 'ChannelFolderItem') { fields.push('imageType'); } fields.push('viewType'); return fields; - }; + } - ItemsView.prototype.getViewSettings = function () { - var basekey = this.getSettingsKey(); - var params = this.params; - var item = this.currentItem; - var showTitle = userSettings.get(basekey + '-showTitle'); + getViewSettings() { + const basekey = this.getSettingsKey(); + const params = this.params; + const item = this.currentItem; + let showTitle = userSettings.get(basekey + '-showTitle'); - if ('true' === showTitle) { + if (showTitle === 'true') { showTitle = true; - } else if ('false' === showTitle) { + } else if (showTitle === 'false') { showTitle = false; - } else if ('Programs' === params.type || 'Recordings' === params.type || 'Person' === params.type || 'nextup' === params.type || 'Audio' === params.type || 'MusicAlbum' === params.type || 'MusicArtist' === params.type) { + } else if (params.type === 'Programs' || params.type === 'Recordings' || params.type === 'Person' || params.type === 'nextup' || params.type === 'Audio' || params.type === 'MusicAlbum' || params.type === 'MusicArtist') { showTitle = true; - } else if (item && 'PhotoAlbum' !== item.Type) { + } else if (item && item.Type !== 'PhotoAlbum') { showTitle = true; } - var imageType = userSettings.get(basekey + '-imageType'); + let imageType = userSettings.get(basekey + '-imageType'); - if (!imageType && 'nextup' === params.type) { + if (!imageType && params.type === 'nextup') { imageType = 'thumb'; } return { showTitle: showTitle, - showYear: 'false' !== userSettings.get(basekey + '-showYear'), + showYear: userSettings.get(basekey + '-showYear') !== 'false', imageType: imageType || 'primary', viewType: userSettings.get(basekey + '-viewType') || 'images' }; - }; + } - ItemsView.prototype.getItemTypes = function () { - var params = this.params; + getItemTypes() { + const params = this.params; - if ('nextup' === params.type) { + if (params.type === 'nextup') { return ['Episode']; } - if ('Programs' === params.type) { + if (params.type === 'Programs') { return ['Program']; } return []; - }; + } - ItemsView.prototype.getSettingsKey = function () { - var values = []; + getSettingsKey() { + const values = []; values.push('items'); - var params = this.params; + const params = this.params; if (params.type) { values.push(params.type); @@ -1193,7 +1200,9 @@ define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager' } return values.join('-'); - }; + } +} - return ItemsView; -}); +export default ItemsView; + +/* eslint-enable indent */ diff --git a/src/livetv.html b/src/controllers/livetv.html similarity index 95% rename from src/livetv.html rename to src/controllers/livetv.html index fdf19bd915..fa6c3125d5 100644 --- a/src/livetv.html +++ b/src/controllers/livetv.html @@ -1,4 +1,4 @@ -
+
@@ -15,7 +15,7 @@
-

${TabShows}

+

${Shows}
@@ -24,7 +24,7 @@
-

${HeaderMovies}

+

${Movies}
@@ -63,7 +63,7 @@
- +
diff --git a/src/controllers/livetv/livetvchannels.js b/src/controllers/livetv/livetvchannels.js index 62906d9d21..278200c634 100644 --- a/src/controllers/livetv/livetvchannels.js +++ b/src/controllers/livetv/livetvchannels.js @@ -1,130 +1,134 @@ -define(['cardBuilder', 'imageLoader', 'libraryBrowser', 'loading', 'events', 'userSettings', 'emby-itemscontainer'], function (cardBuilder, imageLoader, libraryBrowser, loading, events, userSettings) { - 'use strict'; +import cardBuilder from 'cardBuilder'; +import imageLoader from 'imageLoader'; +import libraryBrowser from 'libraryBrowser'; +import loading from 'loading'; +import events from 'events'; +import * as userSettings from 'userSettings'; +import 'emby-itemscontainer'; - return function (view, params, tabContent) { - function getPageData() { - if (!pageData) { - pageData = { - query: { - StartIndex: 0, - Fields: 'PrimaryImageAspectRatio' - } - }; +export default function (view, params, tabContent) { + function getPageData() { + if (!pageData) { + pageData = { + query: { + StartIndex: 0, + Fields: 'PrimaryImageAspectRatio' + } + }; + } + + if (userSettings.libraryPageSize() > 0) { + pageData.query['Limit'] = userSettings.libraryPageSize(); + } + + return pageData; + } + + function getQuery() { + return getPageData().query; + } + + function getChannelsHtml(channels) { + return cardBuilder.getCardsHtml({ + items: channels, + shape: 'square', + showTitle: true, + lazy: true, + cardLayout: true, + showDetailsMenu: true, + showCurrentProgram: true, + showCurrentProgramTime: true + }); + } + + function renderChannels(context, result) { + function onNextPageClick() { + if (isLoading) { + return; } if (userSettings.libraryPageSize() > 0) { - pageData.query['Limit'] = userSettings.libraryPageSize(); + query.StartIndex += query.Limit; + } + reloadItems(context); + } + + function onPreviousPageClick() { + if (isLoading) { + return; } - return pageData; - } - - function getQuery() { - return getPageData().query; - } - - function getChannelsHtml(channels) { - return cardBuilder.getCardsHtml({ - items: channels, - shape: 'square', - showTitle: true, - lazy: true, - cardLayout: true, - showDetailsMenu: true, - showCurrentProgram: true, - showCurrentProgramTime: true - }); - } - - function renderChannels(context, result) { - function onNextPageClick() { - if (isLoading) { - return; - } - - if (userSettings.libraryPageSize() > 0) { - query.StartIndex += query.Limit; - } - reloadItems(context); - } - - function onPreviousPageClick() { - if (isLoading) { - return; - } - - if (userSettings.libraryPageSize() > 0) { - query.StartIndex = Math.max(0, query.StartIndex - query.Limit); - } - reloadItems(context); - } - - var query = getQuery(); - context.querySelector('.paging').innerHTML = libraryBrowser.getQueryPagingHtml({ - startIndex: query.StartIndex, - limit: query.Limit, - totalRecordCount: result.TotalRecordCount, - showLimit: false, - updatePageSizeSetting: false, - filterButton: false - }); - var html = getChannelsHtml(result.Items); - var elem = context.querySelector('#items'); - elem.innerHTML = html; - imageLoader.lazyChildren(elem); - var i; - var length; - var elems; - - for (elems = context.querySelectorAll('.btnNextPage'), i = 0, length = elems.length; i < length; i++) { - elems[i].addEventListener('click', onNextPageClick); - } - - for (elems = context.querySelectorAll('.btnPreviousPage'), i = 0, length = elems.length; i < length; i++) { - elems[i].addEventListener('click', onPreviousPageClick); + if (userSettings.libraryPageSize() > 0) { + query.StartIndex = Math.max(0, query.StartIndex - query.Limit); } + reloadItems(context); } - function showFilterMenu(context) { - require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) { - var filterDialog = new filterDialogFactory({ - query: getQuery(), - mode: 'livetvchannels', - serverId: ApiClient.serverId() - }); - events.on(filterDialog, 'filterchange', function () { - reloadItems(context); - }); - filterDialog.show(); - }); - } - - function reloadItems(context, save) { - loading.show(); - isLoading = true; - var query = getQuery(); - var apiClient = ApiClient; - query.UserId = apiClient.getCurrentUserId(); - apiClient.getLiveTvChannels(query).then(function (result) { - renderChannels(context, result); - loading.hide(); - isLoading = false; - - require(['autoFocuser'], function (autoFocuser) { - autoFocuser.autoFocus(view); - }); - }); - } - - var pageData; - var self = this; - var isLoading = false; - tabContent.querySelector('.btnFilter').addEventListener('click', function () { - showFilterMenu(tabContent); + const query = getQuery(); + context.querySelector('.paging').innerHTML = libraryBrowser.getQueryPagingHtml({ + startIndex: query.StartIndex, + limit: query.Limit, + totalRecordCount: result.TotalRecordCount, + showLimit: false, + updatePageSizeSetting: false, + filterButton: false }); + const html = getChannelsHtml(result.Items); + const elem = context.querySelector('#items'); + elem.innerHTML = html; + imageLoader.lazyChildren(elem); + let i; + let length; + let elems; - self.renderTab = function () { - reloadItems(tabContent); - }; + for (elems = context.querySelectorAll('.btnNextPage'), i = 0, length = elems.length; i < length; i++) { + elems[i].addEventListener('click', onNextPageClick); + } + + for (elems = context.querySelectorAll('.btnPreviousPage'), i = 0, length = elems.length; i < length; i++) { + elems[i].addEventListener('click', onPreviousPageClick); + } + } + + function showFilterMenu(context) { + import(['components/filterdialog/filterdialog']).then(({default: FilterDialog}) => { + const filterDialog = new FilterDialog({ + query: getQuery(), + mode: 'livetvchannels', + serverId: ApiClient.serverId() + }); + events.on(filterDialog, 'filterchange', function () { + reloadItems(context); + }); + filterDialog.show(); + }); + } + + function reloadItems(context, save) { + loading.show(); + isLoading = true; + const query = getQuery(); + const apiClient = ApiClient; + query.UserId = apiClient.getCurrentUserId(); + apiClient.getLiveTvChannels(query).then(function (result) { + renderChannels(context, result); + loading.hide(); + isLoading = false; + + import('autoFocuser').then(({default: autoFocuser}) => { + autoFocuser.autoFocus(view); + }); + }); + } + + let pageData; + const self = this; + let isLoading = false; + tabContent.querySelector('.btnFilter').addEventListener('click', function () { + showFilterMenu(tabContent); + }); + + self.renderTab = function () { + reloadItems(tabContent); }; -}); +} diff --git a/src/controllers/livetv/livetvguide.js b/src/controllers/livetv/livetvguide.js index ec7a7a3f81..f8b49bd22a 100644 --- a/src/controllers/livetv/livetvguide.js +++ b/src/controllers/livetv/livetvguide.js @@ -1,29 +1,27 @@ -define(['tvguide'], function (tvguide) { - 'use strict'; +import tvguide from 'tvguide'; - return function (view, params, tabContent) { - var guideInstance; - var self = this; +export default function (view, params, tabContent) { + let guideInstance; + const self = this; - self.renderTab = function () { - if (!guideInstance) { - guideInstance = new tvguide({ - element: tabContent, - serverId: ApiClient.serverId() - }); - } - }; - - self.onShow = function () { - if (guideInstance) { - guideInstance.resume(); - } - }; - - self.onHide = function () { - if (guideInstance) { - guideInstance.pause(); - } - }; + self.renderTab = function () { + if (!guideInstance) { + guideInstance = new tvguide({ + element: tabContent, + serverId: ApiClient.serverId() + }); + } }; -}); + + self.onShow = function () { + if (guideInstance) { + guideInstance.resume(); + } + }; + + self.onHide = function () { + if (guideInstance) { + guideInstance.pause(); + } + }; +} diff --git a/src/controllers/livetv/livetvrecordings.js b/src/controllers/livetv/livetvrecordings.js index d5cfe66672..ec2f57e14f 100644 --- a/src/controllers/livetv/livetvrecordings.js +++ b/src/controllers/livetv/livetvrecordings.js @@ -1,110 +1,112 @@ -define(['layoutManager', 'loading', 'cardBuilder', 'apphost', 'imageLoader', 'scripts/livetvcomponents', 'listViewStyle', 'emby-itemscontainer'], function (layoutManager, loading, cardBuilder, appHost, imageLoader) { - 'use strict'; +import loading from 'loading'; +import cardBuilder from 'cardBuilder'; +import imageLoader from 'imageLoader'; +import 'scripts/livetvcomponents'; +import 'listViewStyle'; +import 'emby-itemscontainer'; - function renderRecordings(elem, recordings, cardOptions, scrollX) { - if (!elem) { - return; - } - - if (recordings.length) { - elem.classList.remove('hide'); - } else { - elem.classList.add('hide'); - } - - var recordingItems = elem.querySelector('.recordingItems'); - - if (scrollX) { - recordingItems.classList.add('scrollX'); - recordingItems.classList.add('hiddenScrollX'); - recordingItems.classList.remove('vertical-wrap'); - } else { - recordingItems.classList.remove('scrollX'); - recordingItems.classList.remove('hiddenScrollX'); - recordingItems.classList.add('vertical-wrap'); - } - - appHost.supports('imageanalysis'); - recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({ - items: recordings, - shape: scrollX ? 'autooverflow' : 'auto', - defaultShape: scrollX ? 'overflowBackdrop' : 'backdrop', - showTitle: true, - showParentTitle: true, - coverImage: true, - cardLayout: false, - centerText: true, - allowBottomPadding: !scrollX, - preferThumb: 'auto', - overlayText: false - }, cardOptions || {})); - imageLoader.lazyChildren(recordingItems); +function renderRecordings(elem, recordings, cardOptions, scrollX) { + if (!elem) { + return; } - function renderLatestRecordings(context, promise) { - promise.then(function (result) { - renderRecordings(context.querySelector('#latestRecordings'), result.Items, { - showYear: true, - lines: 2 - }, false); - loading.hide(); - }); + if (recordings.length) { + elem.classList.remove('hide'); + } else { + elem.classList.add('hide'); } - function renderRecordingFolders(context, promise) { - promise.then(function (result) { - renderRecordings(context.querySelector('#recordingFolders'), result.Items, { - showYear: false, - showParentTitle: false - }, false); - }); + const recordingItems = elem.querySelector('.recordingItems'); + + if (scrollX) { + recordingItems.classList.add('scrollX'); + recordingItems.classList.add('hiddenScrollX'); + recordingItems.classList.remove('vertical-wrap'); + } else { + recordingItems.classList.remove('scrollX'); + recordingItems.classList.remove('hiddenScrollX'); + recordingItems.classList.add('vertical-wrap'); } - function onMoreClick(e) { - var type = this.getAttribute('data-type'); - var serverId = ApiClient.serverId(); + recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({ + items: recordings, + shape: scrollX ? 'autooverflow' : 'auto', + defaultShape: scrollX ? 'overflowBackdrop' : 'backdrop', + showTitle: true, + showParentTitle: true, + coverImage: true, + cardLayout: false, + centerText: true, + allowBottomPadding: !scrollX, + preferThumb: 'auto', + overlayText: false + }, cardOptions || {})); + imageLoader.lazyChildren(recordingItems); +} - switch (type) { - case 'latest': - Dashboard.navigate('list.html?type=Recordings&serverId=' + serverId); - } +function renderLatestRecordings(context, promise) { + promise.then(function (result) { + renderRecordings(context.querySelector('#latestRecordings'), result.Items, { + showYear: true, + lines: 2 + }, false); + loading.hide(); + }); +} + +function renderRecordingFolders(context, promise) { + promise.then(function (result) { + renderRecordings(context.querySelector('#recordingFolders'), result.Items, { + showYear: false, + showParentTitle: false + }, false); + }); +} + +function onMoreClick(e) { + const type = this.getAttribute('data-type'); + const serverId = ApiClient.serverId(); + + switch (type) { + case 'latest': + Dashboard.navigate('list.html?type=Recordings&serverId=' + serverId); + } +} + +export default function (view, params, tabContent) { + function enableFullRender() { + return new Date().getTime() - lastFullRender > 300000; } - return function (view, params, tabContent) { - function enableFullRender() { - return new Date().getTime() - lastFullRender > 300000; + let foldersPromise; + let latestPromise; + const self = this; + let lastFullRender = 0; + const moreButtons = tabContent.querySelectorAll('.more'); + + for (let i = 0, length = moreButtons.length; i < length; i++) { + moreButtons[i].addEventListener('click', onMoreClick); + } + + self.preRender = function () { + if (enableFullRender()) { + latestPromise = ApiClient.getLiveTvRecordings({ + UserId: Dashboard.getCurrentUserId(), + Limit: 12, + Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo', + EnableTotalRecordCount: false, + EnableImageTypes: 'Primary,Thumb,Backdrop' + }); + foldersPromise = ApiClient.getRecordingFolders(Dashboard.getCurrentUserId()); } - - var foldersPromise; - var latestPromise; - var self = this; - var lastFullRender = 0; - var moreButtons = tabContent.querySelectorAll('.more'); - - for (var i = 0, length = moreButtons.length; i < length; i++) { - moreButtons[i].addEventListener('click', onMoreClick); - } - - self.preRender = function () { - if (enableFullRender()) { - latestPromise = ApiClient.getLiveTvRecordings({ - UserId: Dashboard.getCurrentUserId(), - Limit: 12, - Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo', - EnableTotalRecordCount: false, - EnableImageTypes: 'Primary,Thumb,Backdrop' - }); - foldersPromise = ApiClient.getRecordingFolders(Dashboard.getCurrentUserId()); - } - }; - - self.renderTab = function () { - if (enableFullRender()) { - loading.show(); - renderLatestRecordings(tabContent, latestPromise); - renderRecordingFolders(tabContent, foldersPromise); - lastFullRender = new Date().getTime(); - } - }; }; -}); + + self.renderTab = function () { + if (enableFullRender()) { + loading.show(); + renderLatestRecordings(tabContent, latestPromise); + renderRecordingFolders(tabContent, foldersPromise); + lastFullRender = new Date().getTime(); + } + }; +} diff --git a/src/controllers/livetv/livetvschedule.js b/src/controllers/livetv/livetvschedule.js index a6f509c6f1..d7bfbad059 100644 --- a/src/controllers/livetv/livetvschedule.js +++ b/src/controllers/livetv/livetvschedule.js @@ -1,123 +1,124 @@ -define(['layoutManager', 'cardBuilder', 'apphost', 'imageLoader', 'loading', 'scripts/livetvcomponents', 'emby-button', 'emby-itemscontainer'], function (layoutManager, cardBuilder, appHost, imageLoader, loading) { - 'use strict'; +import layoutManager from 'layoutManager'; +import cardBuilder from 'cardBuilder'; +import imageLoader from 'imageLoader'; +import loading from 'loading'; +import 'scripts/livetvcomponents'; +import 'emby-button'; +import 'emby-itemscontainer'; - function enableScrollX() { - return !layoutManager.desktop; +function enableScrollX() { + return !layoutManager.desktop; +} + +function renderRecordings(elem, recordings, cardOptions) { + if (recordings.length) { + elem.classList.remove('hide'); + } else { + elem.classList.add('hide'); } - function renderRecordings(elem, recordings, cardOptions) { - if (recordings.length) { + const recordingItems = elem.querySelector('.recordingItems'); + + if (enableScrollX()) { + recordingItems.classList.add('scrollX'); + + if (layoutManager.tv) { + recordingItems.classList.add('smoothScrollX'); + } + + recordingItems.classList.add('hiddenScrollX'); + recordingItems.classList.remove('vertical-wrap'); + } else { + recordingItems.classList.remove('scrollX'); + recordingItems.classList.remove('smoothScrollX'); + recordingItems.classList.remove('hiddenScrollX'); + recordingItems.classList.add('vertical-wrap'); + } + + recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({ + items: recordings, + shape: enableScrollX() ? 'autooverflow' : 'auto', + showTitle: true, + showParentTitle: true, + coverImage: true, + cardLayout: false, + centerText: true, + allowBottomPadding: !enableScrollX(), + preferThumb: 'auto' + }, cardOptions || {})); + imageLoader.lazyChildren(recordingItems); +} + +function getBackdropShape() { + return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; +} + +function renderActiveRecordings(context, promise) { + promise.then(function (result) { + renderRecordings(context.querySelector('#activeRecordings'), result.Items, { + shape: enableScrollX() ? 'autooverflow' : 'auto', + defaultShape: getBackdropShape(), + showParentTitle: false, + showParentTitleOrTitle: true, + showTitle: false, + showAirTime: true, + showAirEndTime: true, + showChannelName: true, + coverImage: true, + overlayText: false, + overlayMoreButton: true + }); + }); +} + +function renderTimers(context, timers, options) { + LiveTvHelpers.getTimersHtml(timers, options).then(function (html) { + const elem = context; + + if (html) { elem.classList.remove('hide'); } else { elem.classList.add('hide'); } - var recordingItems = elem.querySelector('.recordingItems'); + elem.querySelector('.recordingItems').innerHTML = html; + imageLoader.lazyChildren(elem); + }); +} - if (enableScrollX()) { - recordingItems.classList.add('scrollX'); +function renderUpcomingRecordings(context, promise) { + promise.then(function (result) { + renderTimers(context.querySelector('#upcomingRecordings'), result.Items); + loading.hide(); + }); +} - if (layoutManager.tv) { - recordingItems.classList.add('smoothScrollX'); - } +export default function (view, params, tabContent) { + let activeRecordingsPromise; + let upcomingRecordingsPromise; + const self = this; + tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () { + self.preRender(); + self.renderTab(); + }); - recordingItems.classList.add('hiddenScrollX'); - recordingItems.classList.remove('vertical-wrap'); - } else { - recordingItems.classList.remove('scrollX'); - recordingItems.classList.remove('smoothScrollX'); - recordingItems.classList.remove('hiddenScrollX'); - recordingItems.classList.add('vertical-wrap'); - } - - var supportsImageAnalysis = appHost.supports('imageanalysis'); - var cardLayout = appHost.preferVisualCards || supportsImageAnalysis; - cardLayout = false; - recordingItems.innerHTML = cardBuilder.getCardsHtml(Object.assign({ - items: recordings, - shape: enableScrollX() ? 'autooverflow' : 'auto', - showTitle: true, - showParentTitle: true, - coverImage: true, - cardLayout: cardLayout, - centerText: !cardLayout, - allowBottomPadding: !enableScrollX(), - preferThumb: 'auto' - }, cardOptions || {})); - imageLoader.lazyChildren(recordingItems); - } - - function getBackdropShape() { - return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; - } - - function renderActiveRecordings(context, promise) { - promise.then(function (result) { - renderRecordings(context.querySelector('#activeRecordings'), result.Items, { - shape: enableScrollX() ? 'autooverflow' : 'auto', - defaultShape: getBackdropShape(), - showParentTitle: false, - showParentTitleOrTitle: true, - showTitle: false, - showAirTime: true, - showAirEndTime: true, - showChannelName: true, - coverImage: true, - overlayText: false, - overlayMoreButton: true - }); + self.preRender = function () { + activeRecordingsPromise = ApiClient.getLiveTvRecordings({ + UserId: Dashboard.getCurrentUserId(), + IsInProgress: true, + Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo', + EnableTotalRecordCount: false, + EnableImageTypes: 'Primary,Thumb,Backdrop' }); - } - - function renderTimers(context, timers, options) { - LiveTvHelpers.getTimersHtml(timers, options).then(function (html) { - var elem = context; - - if (html) { - elem.classList.remove('hide'); - } else { - elem.classList.add('hide'); - } - - elem.querySelector('.recordingItems').innerHTML = html; - imageLoader.lazyChildren(elem); + upcomingRecordingsPromise = ApiClient.getLiveTvTimers({ + IsActive: false, + IsScheduled: true }); - } - - function renderUpcomingRecordings(context, promise) { - promise.then(function (result) { - renderTimers(context.querySelector('#upcomingRecordings'), result.Items); - loading.hide(); - }); - } - - return function (view, params, tabContent) { - var activeRecordingsPromise; - var upcomingRecordingsPromise; - var self = this; - tabContent.querySelector('#upcomingRecordings .recordingItems').addEventListener('timercancelled', function () { - self.preRender(); - self.renderTab(); - }); - - self.preRender = function () { - activeRecordingsPromise = ApiClient.getLiveTvRecordings({ - UserId: Dashboard.getCurrentUserId(), - IsInProgress: true, - Fields: 'CanDelete,PrimaryImageAspectRatio,BasicSyncInfo', - EnableTotalRecordCount: false, - EnableImageTypes: 'Primary,Thumb,Backdrop' - }); - upcomingRecordingsPromise = ApiClient.getLiveTvTimers({ - IsActive: false, - IsScheduled: true - }); - }; - - self.renderTab = function () { - loading.show(); - renderActiveRecordings(tabContent, activeRecordingsPromise); - renderUpcomingRecordings(tabContent, upcomingRecordingsPromise); - }; }; -}); + + self.renderTab = function () { + loading.show(); + renderActiveRecordings(tabContent, activeRecordingsPromise); + renderUpcomingRecordings(tabContent, upcomingRecordingsPromise); + }; +} diff --git a/src/controllers/livetv/livetvseriestimers.js b/src/controllers/livetv/livetvseriestimers.js index 27daca1983..4f6bfaaa6a 100644 --- a/src/controllers/livetv/livetvseriestimers.js +++ b/src/controllers/livetv/livetvseriestimers.js @@ -1,51 +1,52 @@ -define(['datetime', 'cardBuilder', 'imageLoader', 'apphost', 'loading', 'paper-icon-button-light', 'emby-button'], function (datetime, cardBuilder, imageLoader, appHost, loading) { - 'use strict'; +import cardBuilder from 'cardBuilder'; +import imageLoader from 'imageLoader'; +import loading from 'loading'; +import 'paper-icon-button-light'; +import 'emby-button'; - function renderTimers(context, timers) { - var html = ''; - appHost.supports('imageanalysis'); - html += cardBuilder.getCardsHtml({ - items: timers, - shape: 'auto', - defaultShape: 'portrait', - showTitle: true, - cardLayout: false, - preferThumb: 'auto', - coverImage: true, - overlayText: false, - showSeriesTimerTime: true, - showSeriesTimerChannel: true, - centerText: true, - overlayMoreButton: true, - lines: 3 - }); - var elem = context.querySelector('#items'); - elem.innerHTML = html; - imageLoader.lazyChildren(elem); - loading.hide(); - } +function renderTimers(context, timers) { + const html = cardBuilder.getCardsHtml({ + items: timers, + shape: 'auto', + defaultShape: 'portrait', + showTitle: true, + cardLayout: false, + preferThumb: 'auto', + coverImage: true, + overlayText: false, + showSeriesTimerTime: true, + showSeriesTimerChannel: true, + centerText: true, + overlayMoreButton: true, + lines: 3 + }); + const elem = context.querySelector('#items'); + elem.innerHTML = html; + imageLoader.lazyChildren(elem); + loading.hide(); +} - function reload(context, promise) { - loading.show(); - promise.then(function (result) { - renderTimers(context, result.Items); - }); - } +function reload(context, promise) { + loading.show(); + promise.then(function (result) { + renderTimers(context, result.Items); + }); +} - var query = { - SortBy: 'SortName', - SortOrder: 'Ascending' +const query = { + SortBy: 'SortName', + SortOrder: 'Ascending' +}; + +export default function (view, params, tabContent) { + let timersPromise; + const self = this; + + self.preRender = function () { + timersPromise = ApiClient.getLiveTvSeriesTimers(query); }; - return function (view, params, tabContent) { - var timersPromise; - var self = this; - self.preRender = function () { - timersPromise = ApiClient.getLiveTvSeriesTimers(query); - }; - - self.renderTab = function () { - reload(tabContent, timersPromise); - }; + self.renderTab = function () { + reload(tabContent, timersPromise); }; -}); +} diff --git a/src/controllers/livetv/livetvsuggested.js b/src/controllers/livetv/livetvsuggested.js index 036eee9fc6..346630012a 100644 --- a/src/controllers/livetv/livetvsuggested.js +++ b/src/controllers/livetv/livetvsuggested.js @@ -1,393 +1,397 @@ -define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize', 'libraryBrowser', 'mainTabsManager', 'cardBuilder', 'apphost', 'imageLoader', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (layoutManager, userSettings, inputManager, loading, globalize, libraryBrowser, mainTabsManager, cardBuilder, appHost, imageLoader) { - 'use strict'; +import layoutManager from 'layoutManager'; +import * as userSettings from 'userSettings'; +import inputManager from 'inputManager'; +import loading from 'loading'; +import globalize from 'globalize'; +import * as mainTabsManager from 'mainTabsManager'; +import cardBuilder from 'cardBuilder'; +import imageLoader from 'imageLoader'; +import 'scrollStyles'; +import 'emby-itemscontainer'; +import 'emby-tabs'; +import 'emby-button'; - function enableScrollX() { - return !layoutManager.desktop; +function enableScrollX() { + return !layoutManager.desktop; +} + +function getBackdropShape() { + if (enableScrollX()) { + return 'overflowBackdrop'; + } + return 'backdrop'; +} + +function getPortraitShape() { + if (enableScrollX()) { + return 'overflowPortrait'; + } + return 'portrait'; +} + +function getLimit() { + if (enableScrollX()) { + return 12; } - function getBackdropShape() { - if (enableScrollX()) { - return 'overflowBackdrop'; - } - return 'backdrop'; + return 9; +} + +function loadRecommendedPrograms(page) { + loading.show(); + let limit = getLimit(); + + if (enableScrollX()) { + limit *= 2; } - function getPortraitShape() { - if (enableScrollX()) { - return 'overflowPortrait'; - } - return 'portrait'; - } + ApiClient.getLiveTvRecommendedPrograms({ + userId: Dashboard.getCurrentUserId(), + IsAiring: true, + limit: limit, + ImageTypeLimit: 1, + EnableImageTypes: 'Primary,Thumb,Backdrop', + EnableTotalRecordCount: false, + Fields: 'ChannelInfo,PrimaryImageAspectRatio' + }).then(function (result) { + renderItems(page, result.Items, 'activeProgramItems', 'play', { + showAirDateTime: false, + showAirEndTime: true + }); + loading.hide(); - function getLimit() { - if (enableScrollX()) { - return 12; - } + import('autoFocuser').then(({default: autoFocuser}) => { + autoFocuser.autoFocus(page); + }); + }); +} - return 9; - } - - function loadRecommendedPrograms(page) { - loading.show(); - var limit = getLimit(); - - if (enableScrollX()) { - limit *= 2; - } - - ApiClient.getLiveTvRecommendedPrograms({ +function reload(page, enableFullRender) { + if (enableFullRender) { + loadRecommendedPrograms(page); + ApiClient.getLiveTvPrograms({ userId: Dashboard.getCurrentUserId(), - IsAiring: true, - limit: limit, - ImageTypeLimit: 1, - EnableImageTypes: 'Primary,Thumb,Backdrop', + HasAired: false, + limit: getLimit(), + IsMovie: false, + IsSports: false, + IsKids: false, + IsNews: false, + IsSeries: true, EnableTotalRecordCount: false, - Fields: 'ChannelInfo,PrimaryImageAspectRatio' + Fields: 'ChannelInfo,PrimaryImageAspectRatio', + EnableImageTypes: 'Primary,Thumb' }).then(function (result) { - renderItems(page, result.Items, 'activeProgramItems', 'play', { - showAirDateTime: false, - showAirEndTime: true + renderItems(page, result.Items, 'upcomingEpisodeItems'); + }); + ApiClient.getLiveTvPrograms({ + userId: Dashboard.getCurrentUserId(), + HasAired: false, + limit: getLimit(), + IsMovie: true, + EnableTotalRecordCount: false, + Fields: 'ChannelInfo', + EnableImageTypes: 'Primary,Thumb' + }).then(function (result) { + renderItems(page, result.Items, 'upcomingTvMovieItems', null, { + shape: getPortraitShape(), + preferThumb: null, + showParentTitle: false }); - loading.hide(); - - require(['autoFocuser'], function (autoFocuser) { - autoFocuser.autoFocus(page); + }); + ApiClient.getLiveTvPrograms({ + userId: Dashboard.getCurrentUserId(), + HasAired: false, + limit: getLimit(), + IsSports: true, + EnableTotalRecordCount: false, + Fields: 'ChannelInfo,PrimaryImageAspectRatio', + EnableImageTypes: 'Primary,Thumb' + }).then(function (result) { + renderItems(page, result.Items, 'upcomingSportsItems'); + }); + ApiClient.getLiveTvPrograms({ + userId: Dashboard.getCurrentUserId(), + HasAired: false, + limit: getLimit(), + IsKids: true, + EnableTotalRecordCount: false, + Fields: 'ChannelInfo,PrimaryImageAspectRatio', + EnableImageTypes: 'Primary,Thumb' + }).then(function (result) { + renderItems(page, result.Items, 'upcomingKidsItems'); + }); + ApiClient.getLiveTvPrograms({ + userId: Dashboard.getCurrentUserId(), + HasAired: false, + limit: getLimit(), + IsNews: true, + EnableTotalRecordCount: false, + Fields: 'ChannelInfo,PrimaryImageAspectRatio', + EnableImageTypes: 'Primary,Thumb' + }).then(function (result) { + renderItems(page, result.Items, 'upcomingNewsItems', null, { + showParentTitleOrTitle: true, + showTitle: false, + showParentTitle: false }); }); } +} - function reload(page, enableFullRender) { - if (enableFullRender) { - loadRecommendedPrograms(page); - ApiClient.getLiveTvPrograms({ - userId: Dashboard.getCurrentUserId(), - HasAired: false, - limit: getLimit(), - IsMovie: false, - IsSports: false, - IsKids: false, - IsNews: false, - IsSeries: true, - EnableTotalRecordCount: false, - Fields: 'ChannelInfo,PrimaryImageAspectRatio', - EnableImageTypes: 'Primary,Thumb' - }).then(function (result) { - renderItems(page, result.Items, 'upcomingEpisodeItems'); - }); - ApiClient.getLiveTvPrograms({ - userId: Dashboard.getCurrentUserId(), - HasAired: false, - limit: getLimit(), - IsMovie: true, - EnableTotalRecordCount: false, - Fields: 'ChannelInfo', - EnableImageTypes: 'Primary,Thumb' - }).then(function (result) { - renderItems(page, result.Items, 'upcomingTvMovieItems', null, { - shape: getPortraitShape(), - preferThumb: null, - showParentTitle: false - }); - }); - ApiClient.getLiveTvPrograms({ - userId: Dashboard.getCurrentUserId(), - HasAired: false, - limit: getLimit(), - IsSports: true, - EnableTotalRecordCount: false, - Fields: 'ChannelInfo,PrimaryImageAspectRatio', - EnableImageTypes: 'Primary,Thumb' - }).then(function (result) { - renderItems(page, result.Items, 'upcomingSportsItems'); - }); - ApiClient.getLiveTvPrograms({ - userId: Dashboard.getCurrentUserId(), - HasAired: false, - limit: getLimit(), - IsKids: true, - EnableTotalRecordCount: false, - Fields: 'ChannelInfo,PrimaryImageAspectRatio', - EnableImageTypes: 'Primary,Thumb' - }).then(function (result) { - renderItems(page, result.Items, 'upcomingKidsItems'); - }); - ApiClient.getLiveTvPrograms({ - userId: Dashboard.getCurrentUserId(), - HasAired: false, - limit: getLimit(), - IsNews: true, - EnableTotalRecordCount: false, - Fields: 'ChannelInfo,PrimaryImageAspectRatio', - EnableImageTypes: 'Primary,Thumb' - }).then(function (result) { - renderItems(page, result.Items, 'upcomingNewsItems', null, { - showParentTitleOrTitle: true, - showTitle: false, - showParentTitle: false - }); - }); +function renderItems(page, items, sectionClass, overlayButton, cardOptions) { + const html = cardBuilder.getCardsHtml(Object.assign({ + items: items, + preferThumb: 'auto', + inheritThumb: false, + shape: enableScrollX() ? 'autooverflow' : 'auto', + defaultShape: getBackdropShape(), + showParentTitle: true, + showTitle: true, + centerText: true, + coverImage: true, + overlayText: false, + lazy: true, + overlayPlayButton: overlayButton === 'play', + overlayMoreButton: overlayButton === 'more', + overlayInfoButton: overlayButton === 'info', + allowBottomPadding: !enableScrollX(), + showAirTime: true, + showAirDateTime: true + }, cardOptions || {})); + const elem = page.querySelector('.' + sectionClass); + elem.innerHTML = html; + imageLoader.lazyChildren(elem); +} + +function getTabs() { + return [{ + name: globalize.translate('Programs') + }, { + name: globalize.translate('Guide') + }, { + name: globalize.translate('Channels') + }, { + name: globalize.translate('Recordings') + }, { + name: globalize.translate('Schedule') + }, { + name: globalize.translate('Series') + }]; +} + +function setScrollClasses(elem, scrollX) { + if (scrollX) { + elem.classList.add('hiddenScrollX'); + + if (layoutManager.tv) { + elem.classList.add('smoothScrollX'); } + + elem.classList.add('scrollX'); + elem.classList.remove('vertical-wrap'); + } else { + elem.classList.remove('hiddenScrollX'); + elem.classList.remove('smoothScrollX'); + elem.classList.remove('scrollX'); + elem.classList.add('vertical-wrap'); + } +} + +function getDefaultTabIndex(folderId) { + if (userSettings.get('landing-' + folderId) === 'guide') { + return 1; } - function renderItems(page, items, sectionClass, overlayButton, cardOptions) { - var html = cardBuilder.getCardsHtml(Object.assign({ - items: items, - preferThumb: 'auto', - inheritThumb: false, - shape: enableScrollX() ? 'autooverflow' : 'auto', - defaultShape: getBackdropShape(), - showParentTitle: true, - showTitle: true, - centerText: true, - coverImage: true, - overlayText: false, - lazy: true, - overlayPlayButton: 'play' === overlayButton, - overlayMoreButton: 'more' === overlayButton, - overlayInfoButton: 'info' === overlayButton, - allowBottomPadding: !enableScrollX(), - showAirTime: true, - showAirDateTime: true - }, cardOptions || {})); - var elem = page.querySelector('.' + sectionClass); - elem.innerHTML = html; - imageLoader.lazyChildren(elem); + return 0; +} + +export default function (view, params) { + function enableFullRender() { + return new Date().getTime() - lastFullRender > 3e5; } - function getTabs() { - return [{ - name: globalize.translate('Programs') - }, { - name: globalize.translate('TabGuide') - }, { - name: globalize.translate('TabChannels') - }, { - name: globalize.translate('TabRecordings') - }, { - name: globalize.translate('HeaderSchedule') - }, { - name: globalize.translate('TabSeries') - }, { - name: globalize.translate('ButtonSearch'), - cssClass: 'searchTabButton' - }]; + function onBeforeTabChange(evt) { + preLoadTab(view, parseInt(evt.detail.selectedTabIndex)); } - function setScrollClasses(elem, scrollX) { - if (scrollX) { - elem.classList.add('hiddenScrollX'); + function onTabChange(evt) { + const previousTabController = tabControllers[parseInt(evt.detail.previousIndex)]; - if (layoutManager.tv) { - elem.classList.add('smoothScrollX'); + if (previousTabController && previousTabController.onHide) { + previousTabController.onHide(); + } + + loadTab(view, parseInt(evt.detail.selectedTabIndex)); + } + + function getTabContainers() { + return view.querySelectorAll('.pageTabContent'); + } + + function initTabs() { + mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange); + } + + function getTabController(page, index, callback) { + let depends; + + // TODO int is a little hard to read + switch (index) { + case 0: + depends = 'controllers/livetv/livetvsuggested'; + break; + + case 1: + depends = 'controllers/livetv/livetvguide'; + break; + + case 2: + depends = 'controllers/livetv/livetvchannels'; + break; + + case 3: + depends = 'controllers/livetv/livetvrecordings'; + break; + + case 4: + depends = 'controllers/livetv/livetvschedule'; + break; + + case 5: + depends = 'controllers/livetv/livetvseriestimers'; + break; + } + + import(depends).then(({default: controllerFactory}) => { + let tabContent; + + if (index === 0) { + tabContent = view.querySelector(`.pageTabContent[data-index="${index}"]`); + self.tabContent = tabContent; } - elem.classList.add('scrollX'); - elem.classList.remove('vertical-wrap'); - } else { - elem.classList.remove('hiddenScrollX'); - elem.classList.remove('smoothScrollX'); - elem.classList.remove('scrollX'); - elem.classList.add('vertical-wrap'); - } - } + let controller = tabControllers[index]; - function getDefaultTabIndex(folderId) { - if (userSettings.get('landing-' + folderId) === 'guide') { - return 1; - } + if (!controller) { + tabContent = view.querySelector(`.pageTabContent[data-index="${index}"]`); - return 0; - } - - return function (view, params) { - function enableFullRender() { - return new Date().getTime() - lastFullRender > 3e5; - } - - function onBeforeTabChange(evt) { - preLoadTab(view, parseInt(evt.detail.selectedTabIndex)); - } - - function onTabChange(evt) { - var previousTabController = tabControllers[parseInt(evt.detail.previousIndex)]; - - if (previousTabController && previousTabController.onHide) { - previousTabController.onHide(); - } - - loadTab(view, parseInt(evt.detail.selectedTabIndex)); - } - - function getTabContainers() { - return view.querySelectorAll('.pageTabContent'); - } - - function initTabs() { - mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange); - } - - function getTabController(page, index, callback) { - var depends = []; - - // TODO int is a little hard to read - switch (index) { - case 0: - break; - - case 1: - depends.push('controllers/livetv/livetvguide'); - break; - - case 2: - depends.push('controllers/livetv/livetvchannels'); - break; - - case 3: - depends.push('controllers/livetv/livetvrecordings'); - break; - - case 4: - depends.push('controllers/livetv/livetvschedule'); - break; - - case 5: - depends.push('controllers/livetv/livetvseriestimers'); - break; - - case 6: - depends.push('scripts/searchtab'); - } - - require(depends, function (controllerFactory) { - var tabContent; - - if (0 == index) { - tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); - self.tabContent = tabContent; + if (index === 0) { + controller = self; + } else if (index === 6) { + controller = new controllerFactory(view, tabContent, { + collectionType: 'livetv' + }); + } else { + controller = new controllerFactory(view, params, tabContent); } - var controller = tabControllers[index]; + tabControllers[index] = controller; - if (!controller) { - tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); + if (controller.initTab) { + controller.initTab(); + } + } - if (0 === index) { - controller = self; - } else if (6 === index) { - controller = new controllerFactory(view, tabContent, { - collectionType: 'livetv' - }); - } else { - controller = new controllerFactory(view, params, tabContent); - } + callback(controller); + }); + } - tabControllers[index] = controller; + function preLoadTab(page, index) { + getTabController(page, index, function (controller) { + if (renderedTabs.indexOf(index) === -1 && controller.preRender) { + controller.preRender(); + } + }); + } - if (controller.initTab) { - controller.initTab(); - } + function loadTab(page, index) { + currentTabIndex = index; + getTabController(page, index, function (controller) { + initialTabIndex = null; + + if (renderedTabs.indexOf(index) === -1) { + if (index === 1) { + renderedTabs.push(index); } - callback(controller); - }); + controller.renderTab(); + } else if (controller.onShow) { + controller.onShow(); + } + + currentTabController = controller; + }); + } + + function onInputCommand(evt) { + if (evt.detail.command === 'search') { + evt.preventDefault(); + Dashboard.navigate('search.html?collectionType=livetv'); } + } - function preLoadTab(page, index) { - getTabController(page, index, function (controller) { - if (renderedTabs.indexOf(index) === -1 && controller.preRender) { - controller.preRender(); - } - }); + let isViewRestored; + const self = this; + let currentTabIndex = parseInt(params.tab || getDefaultTabIndex('livetv')); + let initialTabIndex = currentTabIndex; + let lastFullRender = 0; + [].forEach.call(view.querySelectorAll('.sectionTitleTextButton-programs'), function (link) { + const href = link.href; + + if (href) { + link.href = href + '&serverId=' + ApiClient.serverId(); } + }); - function loadTab(page, index) { - currentTabIndex = index; - getTabController(page, index, function (controller) { - initialTabIndex = null; + self.initTab = function () { + const tabContent = view.querySelector('.pageTabContent[data-index="0"]'); + const containers = tabContent.querySelectorAll('.itemsContainer'); - if (-1 == renderedTabs.indexOf(index)) { - if (1 === index) { - renderedTabs.push(index); - } - - controller.renderTab(); - } else if (controller.onShow) { - controller.onShow(); - } - - currentTabController = controller; - }); + for (let i = 0, length = containers.length; i < length; i++) { + setScrollClasses(containers[i], enableScrollX()); } - - function onInputCommand(evt) { - if (evt.detail.command === 'search') { - evt.preventDefault(); - Dashboard.navigate('search.html?collectionType=livetv'); - } - } - - var isViewRestored; - var self = this; - var currentTabIndex = parseInt(params.tab || getDefaultTabIndex('livetv')); - var initialTabIndex = currentTabIndex; - var lastFullRender = 0; - [].forEach.call(view.querySelectorAll('.sectionTitleTextButton-programs'), function (link) { - var href = link.href; - - if (href) { - link.href = href + '&serverId=' + ApiClient.serverId(); - } - }); - - self.initTab = function () { - var tabContent = view.querySelector(".pageTabContent[data-index='0']"); - var containers = tabContent.querySelectorAll('.itemsContainer'); - - for (var i = 0, length = containers.length; i < length; i++) { - setScrollClasses(containers[i], enableScrollX()); - } - }; - - self.renderTab = function () { - var tabContent = view.querySelector(".pageTabContent[data-index='0']"); - - if (enableFullRender()) { - reload(tabContent, true); - lastFullRender = new Date().getTime(); - } else { - reload(tabContent); - } - }; - - var currentTabController; - var tabControllers = []; - var renderedTabs = []; - view.addEventListener('viewbeforeshow', function (evt) { - isViewRestored = evt.detail.isRestored; - initTabs(); - }); - view.addEventListener('viewshow', function (evt) { - isViewRestored = evt.detail.isRestored; - - if (!isViewRestored) { - mainTabsManager.selectedTabIndex(initialTabIndex); - } - - inputManager.on(window, onInputCommand); - }); - view.addEventListener('viewbeforehide', function (e) { - if (currentTabController && currentTabController.onHide) { - currentTabController.onHide(); - } - - inputManager.off(window, onInputCommand); - }); - view.addEventListener('viewdestroy', function (evt) { - tabControllers.forEach(function (tabController) { - if (tabController.destroy) { - tabController.destroy(); - } - }); - }); }; -}); + + self.renderTab = function () { + const tabContent = view.querySelector('.pageTabContent[data-index="0"]'); + + if (enableFullRender()) { + reload(tabContent, true); + lastFullRender = new Date().getTime(); + } else { + reload(tabContent); + } + }; + + let currentTabController; + const tabControllers = []; + const renderedTabs = []; + view.addEventListener('viewbeforeshow', function (evt) { + isViewRestored = evt.detail.isRestored; + initTabs(); + }); + view.addEventListener('viewshow', function (evt) { + isViewRestored = evt.detail.isRestored; + + if (!isViewRestored) { + mainTabsManager.selectedTabIndex(initialTabIndex); + } + + inputManager.on(window, onInputCommand); + }); + view.addEventListener('viewbeforehide', function () { + if (currentTabController && currentTabController.onHide) { + currentTabController.onHide(); + } + + inputManager.off(window, onInputCommand); + }); + view.addEventListener('viewdestroy', function () { + tabControllers.forEach(function (tabController) { + if (tabController.destroy) { + tabController.destroy(); + } + }); + }); +} diff --git a/src/livetvguideprovider.html b/src/controllers/livetvguideprovider.html similarity index 100% rename from src/livetvguideprovider.html rename to src/controllers/livetvguideprovider.html diff --git a/src/controllers/livetvguideprovider.js b/src/controllers/livetvguideprovider.js index e83036992b..6ab195a088 100644 --- a/src/controllers/livetvguideprovider.js +++ b/src/controllers/livetvguideprovider.js @@ -1,30 +1,30 @@ -define(['events', 'loading', 'globalize'], function (events, loading, globalize) { - 'use strict'; +import events from 'events'; +import loading from 'loading'; +import globalize from 'globalize'; - function onListingsSubmitted() { - Dashboard.navigate('livetvstatus.html'); - } +function onListingsSubmitted() { + Dashboard.navigate('livetvstatus.html'); +} - function init(page, type, providerId) { - var url = 'components/tvproviders/' + type + '.js'; +function init(page, type, providerId) { + const url = 'components/tvproviders/' + type + '.js'; - require([url], function (factory) { - var instance = new factory(page, providerId, {}); - events.on(instance, 'submitted', onListingsSubmitted); - instance.init(); - }); - } - - function loadTemplate(page, type, providerId) { - require(['text!./components/tvproviders/' + type + '.template.html'], function (html) { - page.querySelector('.providerTemplate').innerHTML = globalize.translateDocument(html); - init(page, type, providerId); - }); - } - - pageIdOn('pageshow', 'liveTvGuideProviderPage', function () { - loading.show(); - var providerId = getParameterByName('id'); - loadTemplate(this, getParameterByName('type'), providerId); + import(url).then(({default: factory}) => { + const instance = new factory(page, providerId, {}); + events.on(instance, 'submitted', onListingsSubmitted); + instance.init(); }); +} + +function loadTemplate(page, type, providerId) { + import('text!./../components/tvproviders/' + type + '.template.html').then(({default: html}) => { + page.querySelector('.providerTemplate').innerHTML = globalize.translateHtml(html); + init(page, type, providerId); + }); +} + +pageIdOn('pageshow', 'liveTvGuideProviderPage', function () { + loading.show(); + const providerId = getParameterByName('id'); + loadTemplate(this, getParameterByName('type'), providerId); }); diff --git a/src/livetvsettings.html b/src/controllers/livetvsettings.html similarity index 97% rename from src/livetvsettings.html rename to src/controllers/livetvsettings.html index 02b960f08d..374ab9a4a0 100644 --- a/src/livetvsettings.html +++ b/src/controllers/livetvsettings.html @@ -11,7 +11,7 @@
'; } - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const itemsContainer = tabContent.querySelector('.itemsContainer'); itemsContainer.innerHTML = html; imageLoader.lazyChildren(itemsContainer); libraryBrowser.saveQueryValues(getSavedQueryKey(page), query); loading.hide(); isLoading = false; - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); - } + }; - var self = this; - var data = {}; - var isLoading = false; + const data = {}; + let isLoading = false; - self.getCurrentViewStyle = function () { + this.getCurrentViewStyle = function () { return getPageData(tabContent).view; }; - function initPage(tabContent) { + const initPage = (tabContent) => { tabContent.querySelector('.btnSort').addEventListener('click', function (e) { libraryBrowser.showSortMenu({ items: [{ - name: globalize.translate('OptionNameSort'), + name: globalize.translate('Name'), id: 'SortName' }, { name: globalize.translate('OptionImdbRating'), @@ -227,36 +233,37 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB button: e.target }); }); - var btnSelectView = tabContent.querySelector('.btnSelectView'); + const btnSelectView = tabContent.querySelector('.btnSelectView'); btnSelectView.addEventListener('click', function (e) { - libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(',')); + libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard,Thumb,ThumbCard'.split(',')); }); btnSelectView.addEventListener('layoutchange', function (e) { - var viewStyle = e.detail.viewStyle; + const viewStyle = e.detail.viewStyle; getPageData(tabContent).view = viewStyle; libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); getQuery(tabContent).StartIndex = 0; onViewStyleChange(); reloadItems(tabContent); }); - tabContent.querySelector('.btnNewCollection').addEventListener('click', function () { - require(['collectionEditor'], function (collectionEditor) { - var serverId = ApiClient.serverInfo().Id; - new collectionEditor().show({ + tabContent.querySelector('.btnNewCollection').addEventListener('click', () => { + import('collectionEditor').then(({default: collectionEditor}) => { + const serverId = ApiClient.serverInfo().Id; + new collectionEditor.showEditor({ items: [], serverId: serverId }); }); }); - } + }; initPage(tabContent); onViewStyleChange(); - self.renderTab = function () { + this.renderTab = function () { reloadItems(tabContent); }; - self.destroy = function () {}; - }; -}); + this.destroy = function () {}; + } + +/* eslint-enable indent */ diff --git a/src/controllers/movies/moviegenres.js b/src/controllers/movies/moviegenres.js index ab410c1bd4..ca02ede36d 100644 --- a/src/controllers/movies/moviegenres.js +++ b/src/controllers/movies/moviegenres.js @@ -1,10 +1,18 @@ -define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost', 'globalize', 'appRouter', 'dom', 'emby-button'], function (layoutManager, loading, libraryBrowser, cardBuilder, lazyLoader, appHost, globalize, appRouter, dom) { - 'use strict'; +import layoutManager from 'layoutManager'; +import loading from 'loading'; +import libraryBrowser from 'libraryBrowser'; +import cardBuilder from 'cardBuilder'; +import lazyLoader from 'lazyLoader'; +import globalize from 'globalize'; +import appRouter from 'appRouter'; +import 'emby-button'; - return function (view, params, tabContent) { +/* eslint-disable indent */ + + export default function (view, params, tabContent) { function getPageData() { - var key = getSavedQueryKey(); - var pageData = data[key]; + const key = getSavedQueryKey(); + let pageData = data[key]; if (!pageData) { pageData = data[key] = { @@ -34,7 +42,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader function getPromise() { loading.show(); - var query = getQuery(); + const query = getQuery(); return ApiClient.getGenres(ApiClient.getCurrentUserId(), query); } @@ -50,18 +58,18 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader return enableScrollX() ? 'overflowPortrait' : 'portrait'; } - function fillItemsContainer(entry) { - var elem = entry.target; - var id = elem.getAttribute('data-id'); - var viewStyle = self.getCurrentViewStyle(); - var limit = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 5 : 9; + const fillItemsContainer = (entry) => { + const elem = entry.target; + const id = elem.getAttribute('data-id'); + const viewStyle = this.getCurrentViewStyle(); + let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9; if (enableScrollX()) { limit = 10; } - var enableImageTypes = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 'Primary,Backdrop,Thumb' : 'Primary'; - var query = { + const enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary'; + const query = { SortBy: 'SortName', SortOrder: 'Ascending', IncludeItemTypes: 'Movie', @@ -75,8 +83,6 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader ParentId: params.topParentId }; ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) { - var supportsImageAnalysis = appHost.supports('imageanalysis'); - if (viewStyle == 'Thumb') { cardBuilder.buildCards(result.Items, { itemsContainer: elem, @@ -125,17 +131,17 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader tabContent.querySelector('.btnMoreFromGenre' + id + ' .material-icons').classList.remove('hide'); } }); - } + }; function reloadItems(context, promise) { - var query = getQuery(); + const query = getQuery(); promise.then(function (result) { - var elem = context.querySelector('#items'); - var html = ''; - var items = result.Items; + const elem = context.querySelector('#items'); + let html = ''; + const items = result.Items; - for (var i = 0, length = items.length; i < length; i++) { - var item = items[i]; + for (let i = 0, length = items.length; i < length; i++) { + const item = items[i]; html += '
'; html += '
'; @@ -150,7 +156,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader html += ''; html += '
'; if (enableScrollX()) { - var scrollXClass = 'scrollX hiddenScrollX'; + let scrollXClass = 'scrollX hiddenScrollX'; if (layoutManager.tv) { scrollXClass += 'smoothScrollX padded-top-focusscale padded-bottom-focusscale'; @@ -181,37 +187,37 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader }); } - function fullyReload() { - self.preRender(); - self.renderTab(); - } + const fullyReload = () => { + this.preRender(); + this.renderTab(); + }; - var self = this; - var data = {}; + const data = {}; - self.getViewStyles = function () { + this.getViewStyles = function () { return 'Poster,PosterCard,Thumb,ThumbCard'.split(','); }; - self.getCurrentViewStyle = function () { + this.getCurrentViewStyle = function () { return getPageData().view; }; - self.setCurrentViewStyle = function (viewStyle) { + this.setCurrentViewStyle = function (viewStyle) { getPageData().view = viewStyle; libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle); fullyReload(); }; - self.enableViewSelection = true; - var promise; + this.enableViewSelection = true; + let promise; - self.preRender = function () { + this.preRender = function () { promise = getPromise(); }; - self.renderTab = function () { + this.renderTab = function () { reloadItems(tabContent, promise); }; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/movies.html b/src/controllers/movies/movies.html similarity index 91% rename from src/movies.html rename to src/controllers/movies/movies.html index a2221c510d..dddda3f7f9 100644 --- a/src/movies.html +++ b/src/controllers/movies/movies.html @@ -4,8 +4,8 @@
- - + +
@@ -46,8 +46,8 @@
- - + +
@@ -75,7 +75,7 @@
- +
diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js index c22b52c47e..01111d4c1b 100644 --- a/src/controllers/movies/movies.js +++ b/src/controllers/movies/movies.js @@ -1,9 +1,18 @@ -define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', 'alphaPicker', 'listView', 'cardBuilder', 'globalize', 'emby-itemscontainer'], function (loading, layoutManager, userSettings, events, libraryBrowser, alphaPicker, listView, cardBuilder, globalize) { - 'use strict'; +import loading from 'loading'; +import * as userSettings from 'userSettings'; +import events from 'events'; +import libraryBrowser from 'libraryBrowser'; +import AlphaPicker from 'alphaPicker'; +import listView from 'listView'; +import cardBuilder from 'cardBuilder'; +import globalize from 'globalize'; +import 'emby-itemscontainer'; - return function (view, params, tabContent, options) { - function onViewStyleChange() { - if (self.getCurrentViewStyle() == 'List') { +/* eslint-disable indent */ + + export default function (view, params, tabContent, options) { + const onViewStyleChange = () => { + if (this.getCurrentViewStyle() == 'List') { itemsContainer.classList.add('vertical-list'); itemsContainer.classList.remove('vertical-wrap'); } else { @@ -12,13 +21,13 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', } itemsContainer.innerHTML = ''; - } + }; - function updateFilterControls() { - if (self.alphaPicker) { - self.alphaPicker.value(query.NameStartsWithOrGreater); + const updateFilterControls = () => { + if (this.alphaPicker) { + this.alphaPicker.value(query.NameStartsWith); } - } + }; function fetchData() { isLoading = true; @@ -51,7 +60,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', window.scrollTo(0, 0); updateFilterControls(); - var pagingHtml = libraryBrowser.getQueryPagingHtml({ + const pagingHtml = libraryBrowser.getQueryPagingHtml({ startIndex: query.StartIndex, limit: query.Limit, totalRecordCount: result.TotalRecordCount, @@ -61,35 +70,30 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', sortButton: false, filterButton: false }); - var i; - var length; - var elems = tabContent.querySelectorAll('.paging'); - for (i = 0, length = elems.length; i < length; i++) { - elems[i].innerHTML = pagingHtml; + for (const elem of tabContent.querySelectorAll('.paging')) { + elem.innerHTML = pagingHtml; } - elems = tabContent.querySelectorAll('.btnNextPage'); - for (i = 0, length = elems.length; i < length; i++) { - elems[i].addEventListener('click', onNextPageClick); + for (const elem of tabContent.querySelectorAll('.btnNextPage')) { + elem.addEventListener('click', onNextPageClick); } - elems = tabContent.querySelectorAll('.btnPreviousPage'); - for (i = 0, length = elems.length; i < length; i++) { - elems[i].addEventListener('click', onPreviousPageClick); + for (const elem of tabContent.querySelectorAll('.btnPreviousPage')) { + elem.addEventListener('click', onPreviousPageClick); } isLoading = false; loading.hide(); - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(tabContent); }); } - function getItemsHtml(items) { - var html; - var viewStyle = self.getCurrentViewStyle(); + const getItemsHtml = (items) => { + let html; + const viewStyle = this.getCurrentViewStyle(); if (viewStyle == 'Thumb') { html = cardBuilder.getCardsHtml({ @@ -153,22 +157,22 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', } return html; - } + }; - function initPage(tabContent) { + const initPage = (tabContent) => { itemsContainer.fetchData = fetchData; itemsContainer.getItemsHtml = getItemsHtml; itemsContainer.afterRefresh = afterRefresh; - var alphaPickerElement = tabContent.querySelector('.alphaPicker'); + const alphaPickerElement = tabContent.querySelector('.alphaPicker'); if (alphaPickerElement) { alphaPickerElement.addEventListener('alphavaluechanged', function (e) { - var newValue = e.detail.value; - query.NameStartsWithOrGreater = newValue; + const newValue = e.detail.value; + query.NameStartsWith = newValue; query.StartIndex = 0; itemsContainer.refreshItems(); }); - self.alphaPicker = new alphaPicker({ + this.alphaPicker = new AlphaPicker({ element: alphaPickerElement, valueChangeEvent: 'click' }); @@ -178,20 +182,20 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', itemsContainer.classList.add('padded-right-withalphapicker'); } - var btnFilter = tabContent.querySelector('.btnFilter'); + const btnFilter = tabContent.querySelector('.btnFilter'); if (btnFilter) { - btnFilter.addEventListener('click', function () { - self.showFilterMenu(); + btnFilter.addEventListener('click', () => { + this.showFilterMenu(); }); } - var btnSort = tabContent.querySelector('.btnSort'); + const btnSort = tabContent.querySelector('.btnSort'); if (btnSort) { btnSort.addEventListener('click', function (e) { libraryBrowser.showSortMenu({ items: [{ - name: globalize.translate('OptionNameSort'), + name: globalize.translate('Name'), id: 'SortName,ProductionYear' }, { name: globalize.translate('OptionImdbRating'), @@ -215,7 +219,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', name: globalize.translate('OptionReleaseDate'), id: 'PremiereDate,SortName,ProductionYear' }, { - name: globalize.translate('OptionRuntime'), + name: globalize.translate('Runtime'), id: 'Runtime,SortName,ProductionYear' }], callback: function () { @@ -228,24 +232,23 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', }); }); } - var btnSelectView = tabContent.querySelector('.btnSelectView'); + const btnSelectView = tabContent.querySelector('.btnSelectView'); btnSelectView.addEventListener('click', function (e) { - libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(',')); + libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle, 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(',')); }); btnSelectView.addEventListener('layoutchange', function (e) { - var viewStyle = e.detail.viewStyle; + const viewStyle = e.detail.viewStyle; userSettings.set(savedViewKey, viewStyle); query.StartIndex = 0; onViewStyleChange(); itemsContainer.refreshItems(); }); - } + }; - var self = this; - var itemsContainer = tabContent.querySelector('.itemsContainer'); - var savedQueryKey = params.topParentId + '-' + options.mode; - var savedViewKey = savedQueryKey + '-view'; - var query = { + let itemsContainer = tabContent.querySelector('.itemsContainer'); + const savedQueryKey = params.topParentId + '-' + options.mode; + const savedViewKey = savedQueryKey + '-view'; + let query = { SortBy: 'SortName,ProductionYear', SortOrder: 'Ascending', IncludeItemTypes: 'Movie', @@ -261,7 +264,7 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', query['Limit'] = userSettings.libraryPageSize(); } - var isLoading = false; + let isLoading = false; if (options.mode === 'favorites') { query.IsFavorite = true; @@ -269,14 +272,14 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', query = userSettings.loadQuerySettings(savedQueryKey, query); - self.showFilterMenu = function () { - require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) { - var filterDialog = new filterDialogFactory({ + this.showFilterMenu = function () { + import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + const filterDialog = new filterDialogFactory({ query: query, mode: 'movies', serverId: ApiClient.serverId() }); - events.on(filterDialog, 'filterchange', function () { + events.on(filterDialog, 'filterchange', () => { query.StartIndex = 0; itemsContainer.refreshItems(); }); @@ -284,22 +287,23 @@ define(['loading', 'layoutManager', 'userSettings', 'events', 'libraryBrowser', }); }; - self.getCurrentViewStyle = function () { + this.getCurrentViewStyle = function () { return userSettings.get(savedViewKey) || 'Poster'; }; - self.initTab = function () { + this.initTab = function () { initPage(tabContent); onViewStyleChange(); }; - self.renderTab = function () { + this.renderTab = function () { itemsContainer.refreshItems(); updateFilterControls(); }; - self.destroy = function () { + this.destroy = function () { itemsContainer = null; }; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/movies/moviesrecommended.js b/src/controllers/movies/moviesrecommended.js index d948c1cef7..4036128b51 100644 --- a/src/controllers/movies/moviesrecommended.js +++ b/src/controllers/movies/moviesrecommended.js @@ -1,5 +1,20 @@ -define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu', 'mainTabsManager', 'cardBuilder', 'dom', 'imageLoader', 'playbackManager', 'globalize', 'emby-scroller', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager, globalize) { - 'use strict'; +import events from 'events'; +import layoutManager from 'layoutManager'; +import inputManager from 'inputManager'; +import * as userSettings from 'userSettings'; +import libraryMenu from 'libraryMenu'; +import * as mainTabsManager from 'mainTabsManager'; +import cardBuilder from 'cardBuilder'; +import dom from 'dom'; +import imageLoader from 'imageLoader'; +import playbackManager from 'playbackManager'; +import globalize from 'globalize'; +import 'emby-scroller'; +import 'emby-itemscontainer'; +import 'emby-tabs'; +import 'emby-button'; + +/* eslint-disable indent */ function enableScrollX() { return !layoutManager.desktop; @@ -14,7 +29,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' } function loadLatest(page, userId, parentId) { - var options = { + const options = { IncludeItemTypes: 'Movie', Limit: 18, Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo', @@ -24,8 +39,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' EnableTotalRecordCount: false }; ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) { - var allowBottomPadding = !enableScrollX(); - var container = page.querySelector('#recentlyAddedItems'); + const allowBottomPadding = !enableScrollX(); + const container = page.querySelector('#recentlyAddedItems'); cardBuilder.buildCards(items, { itemsContainer: container, shape: getPortraitShape(), @@ -43,8 +58,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' } function loadResume(page, userId, parentId) { - var screenWidth = dom.getWindowSize().innerWidth; - var options = { + const screenWidth = dom.getWindowSize().innerWidth; + const options = { SortBy: 'DatePlayed', SortOrder: 'Descending', IncludeItemTypes: 'Movie', @@ -65,8 +80,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' page.querySelector('#resumableSection').classList.add('hide'); } - var allowBottomPadding = !enableScrollX(); - var container = page.querySelector('#resumableItems'); + const allowBottomPadding = !enableScrollX(); + const container = page.querySelector('#resumableItems'); cardBuilder.buildCards(result.Items, { itemsContainer: container, preferThumb: true, @@ -86,8 +101,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' } function getRecommendationHtml(recommendation) { - var html = ''; - var title = ''; + let html = ''; + let title = ''; switch (recommendation.RecommendationType) { case 'SimilarToRecentlyPlayed': @@ -111,7 +126,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' html += '
'; html += '

' + title + '

'; - var allowBottomPadding = true; + const allowBottomPadding = true; if (enableScrollX()) { html += '
'; @@ -139,8 +154,8 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' } function loadSuggestions(page, userId, parentId) { - var screenWidth = dom.getWindowSize().innerWidth; - var url = ApiClient.getUrl('Movies/Recommendations', { + const screenWidth = dom.getWindowSize().innerWidth; + const url = ApiClient.getUrl('Movies/Recommendations', { userId: userId, categoryLimit: 6, ItemLimit: screenWidth >= 1920 ? 8 : screenWidth >= 1600 ? 8 : screenWidth >= 1200 ? 6 : 5, @@ -155,9 +170,9 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' return; } - var html = recommendations.map(getRecommendationHtml).join(''); + const html = recommendations.map(getRecommendationHtml).join(''); page.querySelector('.noItemsMessage').classList.add('hide'); - var recs = page.querySelector('.recommendations'); + const recs = page.querySelector('.recommendations'); recs.innerHTML = html; imageLoader.lazyChildren(recs); @@ -167,7 +182,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' } function autoFocus(page) { - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); } @@ -193,17 +208,16 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' } function initSuggestedTab(page, tabContent) { - var containers = tabContent.querySelectorAll('.itemsContainer'); + const containers = tabContent.querySelectorAll('.itemsContainer'); - for (var i = 0, length = containers.length; i < length; i++) { - setScrollClasses(containers[i], enableScrollX()); + for (const container of containers) { + setScrollClasses(container, enableScrollX()); } } function loadSuggestionsTab(view, params, tabContent) { - var parentId = params.topParentId; - var userId = ApiClient.getCurrentUserId(); - console.debug('loadSuggestionsTab'); + const parentId = params.topParentId; + const userId = ApiClient.getCurrentUserId(); loadResume(tabContent, userId, parentId); loadLatest(tabContent, userId, parentId); loadSuggestions(tabContent, userId, parentId); @@ -213,18 +227,15 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' return [{ name: globalize.translate('Movies') }, { - name: globalize.translate('TabSuggestions') + name: globalize.translate('Suggestions') }, { - name: globalize.translate('TabTrailers') + name: globalize.translate('Trailers') }, { - name: globalize.translate('TabFavorites') + name: globalize.translate('Favorites') }, { - name: globalize.translate('TabCollections') + name: globalize.translate('Collections') }, { - name: globalize.translate('TabGenres') - }, { - name: globalize.translate('ButtonSearch'), - cssClass: 'searchTabButton' + name: globalize.translate('Genres') }]; } @@ -247,13 +258,13 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' } } - return function (view, params) { + export default function (view, params) { function onBeforeTabChange(e) { preLoadTab(view, parseInt(e.detail.selectedTabIndex)); } function onTabChange(e) { - var newIndex = parseInt(e.detail.selectedTabIndex); + const newIndex = parseInt(e.detail.selectedTabIndex); loadTab(view, newIndex); } @@ -265,52 +276,50 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange); } - function getTabController(page, index, callback) { - var depends = []; + const getTabController = (page, index, callback) => { + let depends = ''; switch (index) { case 0: - depends.push('controllers/movies/movies'); + depends = 'controllers/movies/movies'; break; case 1: + depends = 'controllers/movies/moviesrecommended.js'; break; case 2: - depends.push('controllers/movies/movietrailers'); + depends = 'controllers/movies/movietrailers'; break; case 3: - depends.push('controllers/movies/movies'); + depends = 'controllers/movies/movies'; break; case 4: - depends.push('controllers/movies/moviecollections'); + depends = 'controllers/movies/moviecollections'; break; case 5: - depends.push('controllers/movies/moviegenres'); + depends = 'controllers/movies/moviegenres'; break; - - case 6: - depends.push('scripts/searchtab'); } - require(depends, function (controllerFactory) { - var tabContent; + import(depends).then(({default: controllerFactory}) => { + let tabContent; if (index === suggestionsTabIndex) { tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); - self.tabContent = tabContent; + this.tabContent = tabContent; } - var controller = tabControllers[index]; + let controller = tabControllers[index]; if (!controller) { tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); if (index === suggestionsTabIndex) { - controller = self; + controller = this; } else if (index === 6) { controller = new controllerFactory(view, tabContent, { collectionType: 'movies', @@ -333,7 +342,7 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' callback(controller); }); - } + }; function preLoadTab(page, index) { getTabController(page, index, function (controller) { @@ -345,14 +354,12 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' function loadTab(page, index) { currentTabIndex = index; - getTabController(page, index, function (controller) { - initialTabIndex = null; - + getTabController(page, index, ((controller) => { if (renderedTabs.indexOf(index) == -1) { renderedTabs.push(index); controller.renderTab(); } - }); + })); } function onPlaybackStop(e, state) { @@ -370,26 +377,24 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' } } - var isViewRestored; - var self = this; - var currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId)); - var initialTabIndex = currentTabIndex; - var suggestionsTabIndex = 1; + let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId)); + const suggestionsTabIndex = 1; - self.initTab = function () { - var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']"); + this.initTab = function () { + const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']"); initSuggestedTab(view, tabContent); }; - self.renderTab = function () { - var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']"); + this.renderTab = function () { + const tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']"); loadSuggestionsTab(view, params, tabContent); }; - var tabControllers = []; - var renderedTabs = []; + const tabControllers = []; + let renderedTabs = []; view.addEventListener('viewshow', function (e) { - if (isViewRestored = e.detail.isRestored, initTabs(), !view.getAttribute('data-title')) { + initTabs(); + if (!view.getAttribute('data-title')) { var parentId = params.topParentId; if (parentId) { @@ -398,23 +403,22 @@ define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu' libraryMenu.setTitle(item.Name); }); } else { - view.setAttribute('data-title', globalize.translate('TabMovies')); - libraryMenu.setTitle(globalize.translate('TabMovies')); + view.setAttribute('data-title', globalize.translate('Movies')); + libraryMenu.setTitle(globalize.translate('Movies')); } } events.on(playbackManager, 'playbackstop', onPlaybackStop); inputManager.on(window, onInputCommand); }); - view.addEventListener('viewbeforehide', function (e) { + view.addEventListener('viewbeforehide', function () { inputManager.off(window, onInputCommand); }); - view.addEventListener('viewdestroy', function (e) { - tabControllers.forEach(function (t) { - if (t.destroy) { - t.destroy(); - } - }); - }); - }; -}); + for (const tabController of tabControllers) { + if (tabController.destroy) { + tabController.destroy(); + } + } + } + +/* eslint-enable indent */ diff --git a/src/controllers/movies/movietrailers.js b/src/controllers/movies/movietrailers.js index 5daad8d7c3..def55d919a 100644 --- a/src/controllers/movies/movietrailers.js +++ b/src/controllers/movies/movietrailers.js @@ -1,10 +1,20 @@ -define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) { - 'use strict'; +import loading from 'loading'; +import events from 'events'; +import libraryBrowser from 'libraryBrowser'; +import imageLoader from 'imageLoader'; +import AlphaPicker from 'alphaPicker'; +import listView from 'listView'; +import cardBuilder from 'cardBuilder'; +import * as userSettings from 'userSettings'; +import globalize from 'globalize'; +import 'emby-itemscontainer'; - return function (view, params, tabContent) { +/* eslint-disable indent */ + + export default function (view, params, tabContent) { function getPageData(context) { - var key = getSavedQueryKey(context); - var pageData = data[key]; + const key = getSavedQueryKey(context); + let pageData = data[key]; if (!pageData) { pageData = data[key] = { @@ -43,11 +53,11 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' return context.savedQueryKey; } - function reloadItems() { + const reloadItems = () => { loading.show(); isLoading = true; - var query = getQuery(tabContent); - ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) { + const query = getQuery(tabContent); + ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => { function onNextPageClick() { if (isLoading) { return; @@ -72,7 +82,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' window.scrollTo(0, 0); updateFilterControls(tabContent); - var pagingHtml = libraryBrowser.getQueryPagingHtml({ + const pagingHtml = libraryBrowser.getQueryPagingHtml({ startIndex: query.StartIndex, limit: query.Limit, totalRecordCount: result.TotalRecordCount, @@ -82,8 +92,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' sortButton: false, filterButton: false }); - var html; - var viewStyle = self.getCurrentViewStyle(); + let html; + const viewStyle = this.getCurrentViewStyle(); if (viewStyle == 'Thumb') { html = cardBuilder.getCardsHtml({ @@ -139,22 +149,20 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' }); } - var i; - var length; - var elems = tabContent.querySelectorAll('.paging'); + let elems = tabContent.querySelectorAll('.paging'); - for (i = 0, length = elems.length; i < length; i++) { - elems[i].innerHTML = pagingHtml; + for (const elem of elems) { + elem.innerHTML = pagingHtml; } elems = tabContent.querySelectorAll('.btnNextPage'); - for (i = 0, length = elems.length; i < length; i++) { - elems[i].addEventListener('click', onNextPageClick); + for (const elem of elems) { + elem.addEventListener('click', onNextPageClick); } elems = tabContent.querySelectorAll('.btnPreviousPage'); - for (i = 0, length = elems.length; i < length; i++) { - elems[i].addEventListener('click', onPreviousPageClick); + for (const elem of elems) { + elem.addEventListener('click', onPreviousPageClick); } if (!result.Items.length) { @@ -166,27 +174,26 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' html += '
'; } - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const itemsContainer = tabContent.querySelector('.itemsContainer'); itemsContainer.innerHTML = html; imageLoader.lazyChildren(itemsContainer); libraryBrowser.saveQueryValues(getSavedQueryKey(tabContent), query); loading.hide(); isLoading = false; }); - } + }; - function updateFilterControls(tabContent) { - var query = getQuery(tabContent); - self.alphaPicker.value(query.NameStartsWithOrGreater); - } + const updateFilterControls = (tabContent) => { + const query = getQuery(tabContent); + this.alphaPicker.value(query.NameStartsWith); + }; - var self = this; - var data = {}; - var isLoading = false; + const data = {}; + let isLoading = false; - self.showFilterMenu = function () { - require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) { - var filterDialog = new filterDialogFactory({ + this.showFilterMenu = function () { + import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + const filterDialog = new filterDialogFactory({ query: getQuery(tabContent), mode: 'movies', serverId: ApiClient.serverId() @@ -199,21 +206,21 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' }); }; - self.getCurrentViewStyle = function () { + this.getCurrentViewStyle = function () { return getPageData(tabContent).view; }; - function initPage(tabContent) { - var alphaPickerElement = tabContent.querySelector('.alphaPicker'); - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const initPage = (tabContent) => { + const alphaPickerElement = tabContent.querySelector('.alphaPicker'); + const itemsContainer = tabContent.querySelector('.itemsContainer'); alphaPickerElement.addEventListener('alphavaluechanged', function (e) { - var newValue = e.detail.value; - var query = getQuery(tabContent); - query.NameStartsWithOrGreater = newValue; + const newValue = e.detail.value; + const query = getQuery(tabContent); + query.NameStartsWith = newValue; query.StartIndex = 0; reloadItems(); }); - self.alphaPicker = new alphaPicker({ + this.alphaPicker = new AlphaPicker({ element: alphaPickerElement, valueChangeEvent: 'click' }); @@ -223,12 +230,12 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' itemsContainer.classList.add('padded-right-withalphapicker'); tabContent.querySelector('.btnFilter').addEventListener('click', function () { - self.showFilterMenu(); + this.showFilterMenu(); }); tabContent.querySelector('.btnSort').addEventListener('click', function (e) { libraryBrowser.showSortMenu({ items: [{ - name: globalize.translate('OptionNameSort'), + name: globalize.translate('Name'), id: 'SortName' }, { name: globalize.translate('OptionImdbRating'), @@ -257,15 +264,16 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' button: e.target }); }); - } + }; initPage(tabContent); - self.renderTab = function () { + this.renderTab = function () { reloadItems(); updateFilterControls(tabContent); }; - self.destroy = function () {}; - }; -}); + this.destroy = function () {}; + } + +/* eslint-enable indent */ diff --git a/src/music.html b/src/controllers/music/music.html similarity index 89% rename from src/music.html rename to src/controllers/music/music.html index 1e22ae9f3a..84d324857d 100644 --- a/src/music.html +++ b/src/controllers/music/music.html @@ -38,10 +38,10 @@
- + - - + +
@@ -57,7 +57,7 @@
- +
@@ -73,7 +73,7 @@
- +
@@ -92,8 +92,8 @@
- - + +
diff --git a/src/controllers/music/musicalbums.js b/src/controllers/music/musicalbums.js index 645daf4ad9..42490fd2f4 100644 --- a/src/controllers/music/musicalbums.js +++ b/src/controllers/music/musicalbums.js @@ -1,7 +1,18 @@ -define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) { - 'use strict'; +import playbackManager from 'playbackManager'; +import loading from 'loading'; +import events from 'events'; +import libraryBrowser from 'libraryBrowser'; +import imageLoader from 'imageLoader'; +import AlphaPicker from 'alphaPicker'; +import listView from 'listView'; +import cardBuilder from 'cardBuilder'; +import * as userSettings from 'userSettings'; +import globalize from 'globalize'; +import 'emby-itemscontainer'; - return function (view, params, tabContent) { +/* eslint-disable indent */ + + export default function (view, params, tabContent) { function playAll() { ApiClient.getItem(ApiClient.getCurrentUserId(), params.topParentId).then(function (item) { playbackManager.play({ @@ -18,7 +29,7 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser } function getPageData() { - var key = getSavedQueryKey(); + const key = getSavedQueryKey(); if (!pageData) { pageData = { @@ -58,11 +69,11 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser return savedQueryKey; } - function onViewStyleChange() { - var viewStyle = self.getCurrentViewStyle(); - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const onViewStyleChange = () => { + const viewStyle = this.getCurrentViewStyle(); + const itemsContainer = tabContent.querySelector('.itemsContainer'); - if ('List' == viewStyle) { + if (viewStyle == 'List') { itemsContainer.classList.add('vertical-list'); itemsContainer.classList.remove('vertical-wrap'); } else { @@ -71,13 +82,13 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser } itemsContainer.innerHTML = ''; - } + }; - function reloadItems(page) { + const reloadItems = (page) => { loading.show(); isLoading = true; - var query = getQuery(); - ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) { + const query = getQuery(); + ApiClient.getItems(ApiClient.getCurrentUserId(), query).then((result) => { function onNextPageClick() { if (isLoading) { return; @@ -102,8 +113,8 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser window.scrollTo(0, 0); updateFilterControls(page); - var html; - var pagingHtml = libraryBrowser.getQueryPagingHtml({ + let html; + const pagingHtml = libraryBrowser.getQueryPagingHtml({ startIndex: query.StartIndex, limit: query.Limit, totalRecordCount: result.TotalRecordCount, @@ -113,7 +124,7 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser sortButton: false, filterButton: false }); - var viewStyle = self.getCurrentViewStyle(); + const viewStyle = this.getCurrentViewStyle(); if (viewStyle == 'List') { html = listView.getListViewHtml({ items: result.Items, @@ -144,50 +155,47 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser overlayPlayButton: true }); } - var i; - var length; - var elems = tabContent.querySelectorAll('.paging'); + let elems = tabContent.querySelectorAll('.paging'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].innerHTML = pagingHtml; } elems = tabContent.querySelectorAll('.btnNextPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onNextPageClick); } elems = tabContent.querySelectorAll('.btnPreviousPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onPreviousPageClick); } - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const itemsContainer = tabContent.querySelector('.itemsContainer'); itemsContainer.innerHTML = html; imageLoader.lazyChildren(itemsContainer); libraryBrowser.saveQueryValues(getSavedQueryKey(), query); loading.hide(); isLoading = false; - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(tabContent); }); }); - } + }; - function updateFilterControls(tabContent) { - var query = getQuery(); - self.alphaPicker.value(query.NameStartsWithOrGreater); - } + const updateFilterControls = (tabContent) => { + const query = getQuery(); + this.alphaPicker.value(query.NameStartsWith); + }; - var savedQueryKey; - var pageData; - var self = this; - var isLoading = false; + let savedQueryKey; + let pageData; + let isLoading = false; - self.showFilterMenu = function () { - require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) { - var filterDialog = new filterDialogFactory({ + this.showFilterMenu = function () { + import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + const filterDialog = new filterDialogFactory({ query: getQuery(), mode: 'albums', serverId: ApiClient.serverId() @@ -200,22 +208,22 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser }); }; - self.getCurrentViewStyle = function () { + this.getCurrentViewStyle = function () { return getPageData().view; }; - function initPage(tabContent) { - var alphaPickerElement = tabContent.querySelector('.alphaPicker'); - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const initPage = (tabContent) => { + const alphaPickerElement = tabContent.querySelector('.alphaPicker'); + const itemsContainer = tabContent.querySelector('.itemsContainer'); alphaPickerElement.addEventListener('alphavaluechanged', function (e) { - var newValue = e.detail.value; - var query = getQuery(); - query.NameStartsWithOrGreater = newValue; + const newValue = e.detail.value; + const query = getQuery(); + query.NameStartsWith = newValue; query.StartIndex = 0; reloadItems(tabContent); }); - self.alphaPicker = new alphaPicker({ + this.alphaPicker = new AlphaPicker({ element: alphaPickerElement, valueChangeEvent: 'click' }); @@ -224,16 +232,16 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser alphaPickerElement.classList.add('alphaPicker-fixed-right'); itemsContainer.classList.add('padded-right-withalphapicker'); - tabContent.querySelector('.btnFilter').addEventListener('click', function () { - self.showFilterMenu(); + tabContent.querySelector('.btnFilter').addEventListener('click', () => { + this.showFilterMenu(); }); - tabContent.querySelector('.btnSort').addEventListener('click', function (e) { + tabContent.querySelector('.btnSort').addEventListener('click', (e) => { libraryBrowser.showSortMenu({ items: [{ - name: globalize.translate('OptionNameSort'), + name: globalize.translate('Name'), id: 'SortName' }, { - name: globalize.translate('OptionAlbumArtist'), + name: globalize.translate('AlbumArtist'), id: 'AlbumArtist,SortName' }, { name: globalize.translate('OptionCommunityRating'), @@ -259,12 +267,12 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser button: e.target }); }); - var btnSelectView = tabContent.querySelector('.btnSelectView'); - btnSelectView.addEventListener('click', function (e) { - libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(',')); + const btnSelectView = tabContent.querySelector('.btnSelectView'); + btnSelectView.addEventListener('click', (e) => { + libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(',')); }); btnSelectView.addEventListener('layoutchange', function (e) { - var viewStyle = e.detail.viewStyle; + const viewStyle = e.detail.viewStyle; getPageData().view = viewStyle; libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle); getQuery().StartIndex = 0; @@ -273,16 +281,17 @@ define(['layoutManager', 'playbackManager', 'loading', 'events', 'libraryBrowser }); tabContent.querySelector('.btnPlayAll').addEventListener('click', playAll); tabContent.querySelector('.btnShuffle').addEventListener('click', shuffle); - } + }; initPage(tabContent); onViewStyleChange(); - self.renderTab = function () { + this.renderTab = function () { reloadItems(tabContent); updateFilterControls(tabContent); }; - self.destroy = function () {}; - }; -}); + this.destroy = function () {}; + } + +/* eslint-enable indent */ diff --git a/src/controllers/music/musicartists.js b/src/controllers/music/musicartists.js index 7a889ff8b9..3517437622 100644 --- a/src/controllers/music/musicartists.js +++ b/src/controllers/music/musicartists.js @@ -1,13 +1,22 @@ -define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'apphost', 'userSettings', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, appHost, userSettings) { - 'use strict'; +import loading from 'loading'; +import events from 'events'; +import libraryBrowser from 'libraryBrowser'; +import imageLoader from 'imageLoader'; +import AlphaPicker from 'alphaPicker'; +import listView from 'listView'; +import cardBuilder from 'cardBuilder'; +import * as userSettings from 'userSettings'; +import 'emby-itemscontainer'; - return function (view, params, tabContent) { +/* eslint-disable indent */ + + export default function (view, params, tabContent) { function getPageData(context) { - var key = getSavedQueryKey(context); - var pageData = data[key]; + const key = getSavedQueryKey(context); + let pageData = data[key]; if (!pageData) { - var queryValues = { + const queryValues = { SortBy: 'SortName', SortOrder: 'Ascending', Recursive: true, @@ -36,19 +45,19 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' return getPageData(context).query; } - function getSavedQueryKey(context) { + const getSavedQueryKey = (context) => { if (!context.savedQueryKey) { - context.savedQueryKey = libraryBrowser.getSavedQueryKey(self.mode); + context.savedQueryKey = libraryBrowser.getSavedQueryKey(this.mode); } return context.savedQueryKey; - } + }; - function onViewStyleChange() { - var viewStyle = self.getCurrentViewStyle(); - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const onViewStyleChange = () => { + const viewStyle = this.getCurrentViewStyle(); + const itemsContainer = tabContent.querySelector('.itemsContainer'); - if ('List' == viewStyle) { + if (viewStyle == 'List') { itemsContainer.classList.add('vertical-list'); itemsContainer.classList.remove('vertical-wrap'); } else { @@ -57,16 +66,16 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' } itemsContainer.innerHTML = ''; - } + }; - function reloadItems(page) { + const reloadItems = (page) => { loading.show(); isLoading = true; - var query = getQuery(page); - var promise = self.mode == 'albumartists' ? + const query = getQuery(page); + const promise = this.mode == 'albumartists' ? ApiClient.getAlbumArtists(ApiClient.getCurrentUserId(), query) : ApiClient.getArtists(ApiClient.getCurrentUserId(), query); - promise.then(function (result) { + promise.then((result) => { function onNextPageClick() { if (isLoading) { return; @@ -91,8 +100,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' window.scrollTo(0, 0); updateFilterControls(page); - var html; - var pagingHtml = libraryBrowser.getQueryPagingHtml({ + let html; + const pagingHtml = libraryBrowser.getQueryPagingHtml({ startIndex: query.StartIndex, limit: query.Limit, totalRecordCount: result.TotalRecordCount, @@ -102,7 +111,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' sortButton: false, filterButton: false }); - var viewStyle = self.getCurrentViewStyle(); + const viewStyle = this.getCurrentViewStyle(); if (viewStyle == 'List') { html = listView.getListViewHtml({ items: result.Items, @@ -129,51 +138,48 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' overlayPlayButton: true }); } - var i; - var length; - var elems = tabContent.querySelectorAll('.paging'); + let elems = tabContent.querySelectorAll('.paging'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].innerHTML = pagingHtml; } elems = tabContent.querySelectorAll('.btnNextPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onNextPageClick); } elems = tabContent.querySelectorAll('.btnPreviousPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onPreviousPageClick); } - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const itemsContainer = tabContent.querySelector('.itemsContainer'); itemsContainer.innerHTML = html; imageLoader.lazyChildren(itemsContainer); libraryBrowser.saveQueryValues(getSavedQueryKey(page), query); loading.hide(); isLoading = false; - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(tabContent); }); }); - } + }; - function updateFilterControls(tabContent) { - var query = getQuery(tabContent); - self.alphaPicker.value(query.NameStartsWithOrGreater); - } + const updateFilterControls = (tabContent) => { + const query = getQuery(tabContent); + this.alphaPicker.value(query.NameStartsWith); + }; - var self = this; - var data = {}; - var isLoading = false; + const data = {}; + let isLoading = false; - self.showFilterMenu = function () { - require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) { - var filterDialog = new filterDialogFactory({ + this.showFilterMenu = function () { + import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + const filterDialog = new filterDialogFactory({ query: getQuery(tabContent), - mode: self.mode, + mode: this.mode, serverId: ApiClient.serverId() }); events.on(filterDialog, 'filterchange', function () { @@ -184,22 +190,22 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' }); }; - self.getCurrentViewStyle = function () { + this.getCurrentViewStyle = function () { return getPageData(tabContent).view; }; - function initPage(tabContent) { - var alphaPickerElement = tabContent.querySelector('.alphaPicker'); - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const initPage = (tabContent) => { + const alphaPickerElement = tabContent.querySelector('.alphaPicker'); + const itemsContainer = tabContent.querySelector('.itemsContainer'); alphaPickerElement.addEventListener('alphavaluechanged', function (e) { - var newValue = e.detail.value; - var query = getQuery(tabContent); - query.NameStartsWithOrGreater = newValue; + const newValue = e.detail.value; + const query = getQuery(tabContent); + query.NameStartsWith = newValue; query.StartIndex = 0; reloadItems(tabContent); }); - self.alphaPicker = new alphaPicker({ + this.alphaPicker = new AlphaPicker({ element: alphaPickerElement, valueChangeEvent: 'click' }); @@ -208,31 +214,32 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' alphaPickerElement.classList.add('alphaPicker-fixed-right'); itemsContainer.classList.add('padded-right-withalphapicker'); - tabContent.querySelector('.btnFilter').addEventListener('click', function () { - self.showFilterMenu(); + tabContent.querySelector('.btnFilter').addEventListener('click', () => { + this.showFilterMenu(); }); - var btnSelectView = tabContent.querySelector('.btnSelectView'); + const btnSelectView = tabContent.querySelector('.btnSelectView'); btnSelectView.addEventListener('click', function (e) { - libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(',')); + libraryBrowser.showLayoutMenu(e.target, this.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(',')); }); btnSelectView.addEventListener('layoutchange', function (e) { - var viewStyle = e.detail.viewStyle; + const viewStyle = e.detail.viewStyle; getPageData(tabContent).view = viewStyle; libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); getQuery(tabContent).StartIndex = 0; onViewStyleChange(); reloadItems(tabContent); }); - } + }; initPage(tabContent); onViewStyleChange(); - self.renderTab = function () { + this.renderTab = function () { reloadItems(tabContent); updateFilterControls(tabContent); }; - self.destroy = function () {}; - }; -}); + this.destroy = function () {}; + } + +/* eslint-enable indent */ diff --git a/src/controllers/music/musicgenres.js b/src/controllers/music/musicgenres.js index 82f2eba574..2cd9e2114b 100644 --- a/src/controllers/music/musicgenres.js +++ b/src/controllers/music/musicgenres.js @@ -1,10 +1,14 @@ -define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], function (libraryBrowser, cardBuilder, appHost, imageLoader, loading) { - 'use strict'; +import libraryBrowser from 'libraryBrowser'; +import cardBuilder from 'cardBuilder'; +import imageLoader from 'imageLoader'; +import loading from 'loading'; - return function (view, params, tabContent) { +/* eslint-disable indent */ + + export default function (view, params, tabContent) { function getPageData() { - var key = getSavedQueryKey(); - var pageData = data[key]; + const key = getSavedQueryKey(); + let pageData = data[key]; if (!pageData) { pageData = data[key] = { @@ -34,15 +38,15 @@ define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], f function getPromise() { loading.show(); - var query = getQuery(); + const query = getQuery(); return ApiClient.getGenres(ApiClient.getCurrentUserId(), query); } - function reloadItems(context, promise) { - var query = getQuery(); - promise.then(function (result) { - var html = ''; - var viewStyle = self.getCurrentViewStyle(); + const reloadItems = (context, promise) => { + const query = getQuery(); + promise.then((result) => { + let html = ''; + const viewStyle = this.getCurrentViewStyle(); if (viewStyle == 'Thumb') { html = cardBuilder.getCardsHtml({ @@ -82,49 +86,49 @@ define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], f }); } - var elem = context.querySelector('#items'); + const elem = context.querySelector('#items'); elem.innerHTML = html; imageLoader.lazyChildren(elem); libraryBrowser.saveQueryValues(getSavedQueryKey(), query); loading.hide(); - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(context); }); }); - } + }; function fullyReload() { - self.preRender(); - self.renderTab(); + this.preRender(); + this.renderTab(); } - var self = this; - var data = {}; + const data = {}; - self.getViewStyles = function () { + this.getViewStyles = function () { return 'Poster,PosterCard,Thumb,ThumbCard'.split(','); }; - self.getCurrentViewStyle = function () { + this.getCurrentViewStyle = function () { return getPageData().view; }; - self.setCurrentViewStyle = function (viewStyle) { + this.setCurrentViewStyle = function (viewStyle) { getPageData().view = viewStyle; libraryBrowser.saveViewSetting(getSavedQueryKey(), viewStyle); fullyReload(); }; - self.enableViewSelection = true; - var promise; + this.enableViewSelection = true; + let promise; - self.preRender = function () { + this.preRender = function () { promise = getPromise(); }; - self.renderTab = function () { + this.renderTab = function () { reloadItems(tabContent, promise); }; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/music/musicplaylists.js b/src/controllers/music/musicplaylists.js index f508489216..67e6a959eb 100644 --- a/src/controllers/music/musicplaylists.js +++ b/src/controllers/music/musicplaylists.js @@ -1,10 +1,14 @@ -define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], function (libraryBrowser, cardBuilder, appHost, imageLoader, loading) { - 'use strict'; +import libraryBrowser from 'libraryBrowser'; +import cardBuilder from 'cardBuilder'; +import imageLoader from 'imageLoader'; +import loading from 'loading'; - return function (view, params, tabContent) { +/* eslint-disable indent */ + + export default function (view, params, tabContent) { function getPageData() { - var key = getSavedQueryKey(); - var pageData = data[key]; + const key = getSavedQueryKey(); + let pageData = data[key]; if (!pageData) { pageData = data[key] = { @@ -35,14 +39,14 @@ define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], f function getPromise() { loading.show(); - var query = getQuery(); + const query = getQuery(); return ApiClient.getItems(ApiClient.getCurrentUserId(), query); } function reloadItems(context, promise) { - var query = getQuery(); + const query = getQuery(); promise.then(function (result) { - var html = ''; + let html = ''; html = cardBuilder.getCardsHtml({ items: result.Items, shape: 'square', @@ -53,33 +57,33 @@ define(['libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'loading'], f allowBottomPadding: true, cardLayout: false }); - var elem = context.querySelector('#items'); + const elem = context.querySelector('#items'); elem.innerHTML = html; imageLoader.lazyChildren(elem); libraryBrowser.saveQueryValues(getSavedQueryKey(), query); loading.hide(); - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(context); }); }); } - var self = this; - var data = {}; + const data = {}; - self.getCurrentViewStyle = function () { + this.getCurrentViewStyle = function () { return getPageData().view; }; - var promise; + let promise; - self.preRender = function () { + this.preRender = function () { promise = getPromise(); }; - self.renderTab = function () { + this.renderTab = function () { reloadItems(tabContent, promise); }; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/music/musicrecommended.js b/src/controllers/music/musicrecommended.js index 3f025799f6..a93bfea4e3 100644 --- a/src/controllers/music/musicrecommended.js +++ b/src/controllers/music/musicrecommended.js @@ -1,8 +1,24 @@ -define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', 'cardBuilder', 'dom', 'apphost', 'imageLoader', 'libraryMenu', 'playbackManager', 'mainTabsManager', 'globalize', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button', 'flexStyles'], function (browser, layoutManager, userSettings, inputManager, loading, cardBuilder, dom, appHost, imageLoader, libraryMenu, playbackManager, mainTabsManager, globalize) { - 'use strict'; +import browser from 'browser'; +import layoutManager from 'layoutManager'; +import * as userSettings from 'userSettings'; +import inputManager from 'inputManager'; +import loading from 'loading'; +import cardBuilder from 'cardBuilder'; +import dom from 'dom'; +import imageLoader from 'imageLoader'; +import libraryMenu from 'libraryMenu'; +import * as mainTabsManager from 'mainTabsManager'; +import globalize from 'globalize'; +import 'scrollStyles'; +import 'emby-itemscontainer'; +import 'emby-tabs'; +import 'emby-button'; +import 'flexStyles'; + +/* eslint-disable indent */ function itemsPerRow() { - var screenWidth = dom.getWindowSize().innerWidth; + const screenWidth = dom.getWindowSize().innerWidth; if (screenWidth >= 1920) { return 9; @@ -29,8 +45,8 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' function loadLatest(page, parentId) { loading.show(); - var userId = ApiClient.getCurrentUserId(); - var options = { + const userId = ApiClient.getCurrentUserId(); + const options = { IncludeItemTypes: 'Audio', Limit: enableScrollX() ? 3 * itemsPerRow() : 2 * itemsPerRow(), Fields: 'PrimaryImageAspectRatio,BasicSyncInfo', @@ -41,8 +57,6 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' }; ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) { var elem = page.querySelector('#recentlyAddedSongs'); - var supportsImageAnalysis = appHost.supports('imageanalysis'); - supportsImageAnalysis = false; elem.innerHTML = cardBuilder.getCardsHtml({ items: items, showUnplayedIndicator: false, @@ -51,23 +65,23 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' showTitle: true, showParentTitle: true, lazy: true, - centerText: !supportsImageAnalysis, - overlayPlayButton: !supportsImageAnalysis, + centerText: true, + overlayPlayButton: true, allowBottomPadding: !enableScrollX(), - cardLayout: supportsImageAnalysis, + cardLayout: false, coverImage: true }); imageLoader.lazyChildren(elem); loading.hide(); - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); } function loadRecentlyPlayed(page, parentId) { - var options = { + const options = { SortBy: 'DatePlayed', SortOrder: 'Descending', IncludeItemTypes: 'Audio', @@ -81,7 +95,7 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' EnableTotalRecordCount: false }; ApiClient.getItems(ApiClient.getCurrentUserId(), options).then(function (result) { - var elem = page.querySelector('#recentlyPlayed'); + const elem = page.querySelector('#recentlyPlayed'); if (result.Items.length) { elem.classList.remove('hide'); @@ -90,8 +104,6 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' } var itemsContainer = elem.querySelector('.itemsContainer'); - var supportsImageAnalysis = appHost.supports('imageanalysis'); - supportsImageAnalysis = false; itemsContainer.innerHTML = cardBuilder.getCardsHtml({ items: result.Items, showUnplayedIndicator: false, @@ -100,10 +112,10 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' showParentTitle: true, action: 'instantmix', lazy: true, - centerText: !supportsImageAnalysis, - overlayMoreButton: !supportsImageAnalysis, + centerText: true, + overlayMoreButton: true, allowBottomPadding: !enableScrollX(), - cardLayout: supportsImageAnalysis, + cardLayout: false, coverImage: true }); imageLoader.lazyChildren(itemsContainer); @@ -111,7 +123,7 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' } function loadFrequentlyPlayed(page, parentId) { - var options = { + const options = { SortBy: 'PlayCount', SortOrder: 'Descending', IncludeItemTypes: 'Audio', @@ -125,7 +137,7 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' EnableTotalRecordCount: false }; ApiClient.getItems(ApiClient.getCurrentUserId(), options).then(function (result) { - var elem = page.querySelector('#topPlayed'); + const elem = page.querySelector('#topPlayed'); if (result.Items.length) { elem.classList.remove('hide'); @@ -134,8 +146,6 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' } var itemsContainer = elem.querySelector('.itemsContainer'); - var supportsImageAnalysis = appHost.supports('imageanalysis'); - supportsImageAnalysis = false; itemsContainer.innerHTML = cardBuilder.getCardsHtml({ items: result.Items, showUnplayedIndicator: false, @@ -144,10 +154,10 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' showParentTitle: true, action: 'instantmix', lazy: true, - centerText: !supportsImageAnalysis, - overlayMoreButton: !supportsImageAnalysis, + centerText: true, + overlayMoreButton: true, allowBottomPadding: !enableScrollX(), - cardLayout: supportsImageAnalysis, + cardLayout: false, coverImage: true }); imageLoader.lazyChildren(itemsContainer); @@ -160,29 +170,26 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' loadRecentlyPlayed(tabContent, parentId); loadFrequentlyPlayed(tabContent, parentId); - require(['components/favoriteitems'], function (favoriteItems) { + import('components/favoriteitems').then(({default: favoriteItems}) => { favoriteItems.render(tabContent, ApiClient.getCurrentUserId(), parentId, ['favoriteArtists', 'favoriteAlbums', 'favoriteSongs']); }); } function getTabs() { return [{ - name: globalize.translate('TabSuggestions') + name: globalize.translate('Suggestions') }, { - name: globalize.translate('TabAlbums') + name: globalize.translate('Albums') }, { - name: globalize.translate('TabAlbumArtists') + name: globalize.translate('HeaderAlbumArtists') }, { - name: globalize.translate('TabArtists') + name: globalize.translate('Artists') }, { - name: globalize.translate('TabPlaylists') + name: globalize.translate('Playlists') }, { - name: globalize.translate('TabSongs') + name: globalize.translate('Songs') }, { - name: globalize.translate('TabGenres') - }, { - name: globalize.translate('ButtonSearch'), - cssClass: 'searchTabButton' + name: globalize.translate('Genres') }]; } @@ -211,10 +218,10 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' } } - return function (view, params) { + export default function (view, params) { function reload() { loading.show(); - var tabContent = view.querySelector(".pageTabContent[data-index='0']"); + const tabContent = view.querySelector(".pageTabContent[data-index='0']"); loadSuggestionsTab(view, tabContent, params.topParentId); } @@ -256,53 +263,51 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' mainTabsManager.setTabs(view, currentTabIndex, getTabs, getTabContainers, onBeforeTabChange, onTabChange); } - function getTabController(page, index, callback) { - var depends = []; + const getTabController = (page, index, callback) => { + let depends; switch (index) { case 0: + depends = 'controllers/music/musicrecommended'; break; case 1: - depends.push('controllers/music/musicalbums'); + depends = 'controllers/music/musicalbums'; break; case 2: case 3: - depends.push('controllers/music/musicartists'); + depends = 'controllers/music/musicartists'; break; case 4: - depends.push('controllers/music/musicplaylists'); + depends = 'controllers/music/musicplaylists'; break; case 5: - depends.push('controllers/music/songs'); + depends = 'controllers/music/songs'; break; case 6: - depends.push('controllers/music/musicgenres'); + depends = 'controllers/music/musicgenres'; break; - - case 7: - depends.push('scripts/searchtab'); } - require(depends, function (controllerFactory) { - var tabContent; + import(depends).then(({default: controllerFactory}) => { + let tabContent; - if (0 == index) { + if (index == 0) { tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); - self.tabContent = tabContent; + this.tabContent = tabContent; } - var controller = tabControllers[index]; + let controller = tabControllers[index]; if (!controller) { tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); if (index === 0) { - controller = self; + controller = this; } else if (index === 7) { controller = new controllerFactory(view, tabContent, { collectionType: 'music', @@ -326,7 +331,7 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' callback(controller); }); - } + }; function preLoadTab(page, index) { getTabController(page, index, function (controller) { @@ -339,8 +344,6 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' function loadTab(page, index) { currentTabIndex = index; getTabController(page, index, function (controller) { - initialTabIndex = null; - if (renderedTabs.indexOf(index) == -1) { renderedTabs.push(index); controller.renderTab(); @@ -356,31 +359,27 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' } } - var isViewRestored; - var self = this; - var currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId)); - var initialTabIndex = currentTabIndex; + let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId)); - self.initTab = function () { - var tabContent = view.querySelector(".pageTabContent[data-index='0']"); - var containers = tabContent.querySelectorAll('.itemsContainer'); + this.initTab = function () { + const tabContent = view.querySelector(".pageTabContent[data-index='0']"); + const containers = tabContent.querySelectorAll('.itemsContainer'); - for (var i = 0, length = containers.length; i < length; i++) { + for (let i = 0, length = containers.length; i < length; i++) { setScrollClasses(containers[i], enableScrollX()); } }; - self.renderTab = function () { + this.renderTab = function () { reload(); }; - var tabControllers = []; - var renderedTabs = []; + const tabControllers = []; + const renderedTabs = []; view.addEventListener('viewshow', function (e) { - isViewRestored = e.detail.isRestored; initTabs(); if (!view.getAttribute('data-title')) { - var parentId = params.topParentId; + const parentId = params.topParentId; if (parentId) { ApiClient.getItem(ApiClient.getCurrentUserId(), parentId).then(function (item) { @@ -405,5 +404,6 @@ define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', ' } }); }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/music/songs.js b/src/controllers/music/songs.js index aa63ec51fe..d30c74deb8 100644 --- a/src/controllers/music/songs.js +++ b/src/controllers/music/songs.js @@ -1,10 +1,18 @@ -define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userSettings', 'globalize', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView, loading, userSettings, globalize) { - 'use strict'; +import events from 'events'; +import libraryBrowser from 'libraryBrowser'; +import imageLoader from 'imageLoader'; +import listView from 'listView'; +import loading from 'loading'; +import * as userSettings from 'userSettings'; +import globalize from 'globalize'; +import 'emby-itemscontainer'; - return function (view, params, tabContent) { +/* eslint-disable indent */ + + export default function (view, params, tabContent) { function getPageData(context) { - var key = getSavedQueryKey(context); - var pageData = data[key]; + const key = getSavedQueryKey(context); + let pageData = data[key]; if (!pageData) { pageData = data[key] = { @@ -46,7 +54,7 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS function reloadItems(page) { loading.show(); isLoading = true; - var query = getQuery(page); + const query = getQuery(page); ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) { function onNextPageClick() { if (isLoading) { @@ -71,9 +79,7 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS } window.scrollTo(0, 0); - var i; - var length; - var pagingHtml = libraryBrowser.getQueryPagingHtml({ + const pagingHtml = libraryBrowser.getQueryPagingHtml({ startIndex: query.StartIndex, limit: query.Limit, totalRecordCount: result.TotalRecordCount, @@ -83,49 +89,49 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS sortButton: false, filterButton: false }); - var html = listView.getListViewHtml({ + const html = listView.getListViewHtml({ items: result.Items, action: 'playallfromhere', smallIcon: true, artist: true, addToListButton: true }); - var elems = tabContent.querySelectorAll('.paging'); + let elems = tabContent.querySelectorAll('.paging'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].innerHTML = pagingHtml; } elems = tabContent.querySelectorAll('.btnNextPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onNextPageClick); } elems = tabContent.querySelectorAll('.btnPreviousPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onPreviousPageClick); } - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const itemsContainer = tabContent.querySelector('.itemsContainer'); itemsContainer.innerHTML = html; imageLoader.lazyChildren(itemsContainer); libraryBrowser.saveQueryValues(getSavedQueryKey(page), query); loading.hide(); isLoading = false; - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); } - var self = this; - var data = {}; - var isLoading = false; + const self = this; + const data = {}; + let isLoading = false; self.showFilterMenu = function () { - require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) { - var filterDialog = new filterDialogFactory({ + import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + const filterDialog = new filterDialogFactory({ query: getQuery(tabContent), mode: 'songs', serverId: ApiClient.serverId() @@ -152,13 +158,13 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS name: globalize.translate('OptionTrackName'), id: 'Name' }, { - name: globalize.translate('OptionAlbum'), + name: globalize.translate('Album'), id: 'Album,SortName' }, { - name: globalize.translate('OptionAlbumArtist'), + name: globalize.translate('AlbumArtist'), id: 'AlbumArtist,Album,SortName' }, { - name: globalize.translate('OptionArtist'), + name: globalize.translate('Artist'), id: 'Artist,Album,SortName' }, { name: globalize.translate('OptionDateAdded'), @@ -173,7 +179,7 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS name: globalize.translate('OptionReleaseDate'), id: 'PremiereDate,AlbumArtist,Album,SortName' }, { - name: globalize.translate('OptionRuntime'), + name: globalize.translate('Runtime'), id: 'Runtime,AlbumArtist,Album,SortName' }], callback: function () { @@ -193,5 +199,6 @@ define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'loading', 'userS }; self.destroy = function () {}; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/playback/nowplaying.js b/src/controllers/playback/nowplaying.js deleted file mode 100644 index 98c9945e84..0000000000 --- a/src/controllers/playback/nowplaying.js +++ /dev/null @@ -1,22 +0,0 @@ -define(['components/remotecontrol/remotecontrol', 'libraryMenu', 'emby-button'], function (remotecontrolFactory, libraryMenu) { - 'use strict'; - - return function (view, params) { - var remoteControl = new remotecontrolFactory(); - remoteControl.init(view, view.querySelector('.remoteControlContent')); - view.addEventListener('viewshow', function (e) { - libraryMenu.setTransparentMenu(true); - - if (remoteControl) { - remoteControl.onShow(); - } - }); - view.addEventListener('viewbeforehide', function (e) { - libraryMenu.setTransparentMenu(false); - - if (remoteControl) { - remoteControl.destroy(); - } - }); - }; -}); diff --git a/src/nowplaying.html b/src/controllers/playback/queue/index.html similarity index 84% rename from src/nowplaying.html rename to src/controllers/playback/queue/index.html index 5f235a562e..f38f9cd010 100644 --- a/src/nowplaying.html +++ b/src/controllers/playback/queue/index.html @@ -5,7 +5,7 @@
- +
@@ -15,9 +15,9 @@
- +
- +
@@ -25,15 +25,20 @@
- -
- + +
+
- + + + - + @@ -49,30 +54,39 @@ - + - + + +
- + - - +
- + + @@ -85,7 +99,7 @@
-
@@ -106,7 +120,7 @@ -

- - -
@@ -162,21 +176,18 @@
-
- - +
-
-
-
-
-
-
diff --git a/src/controllers/playback/queue/index.js b/src/controllers/playback/queue/index.js new file mode 100644 index 0000000000..581b5f4b8a --- /dev/null +++ b/src/controllers/playback/queue/index.js @@ -0,0 +1,22 @@ +import remotecontrolFactory from 'components/remotecontrol/remotecontrol'; +import libraryMenu from 'libraryMenu'; +import 'emby-button'; + +export default function (view, params) { + const remoteControl = new remotecontrolFactory(); + remoteControl.init(view, view.querySelector('.remoteControlContent')); + view.addEventListener('viewshow', function (e) { + libraryMenu.setTransparentMenu(true); + + if (remoteControl) { + remoteControl.onShow(); + } + }); + view.addEventListener('viewbeforehide', function (e) { + libraryMenu.setTransparentMenu(false); + + if (remoteControl) { + remoteControl.destroy(); + } + }); +} diff --git a/src/videoosd.html b/src/controllers/playback/video/index.html similarity index 97% rename from src/videoosd.html rename to src/controllers/playback/video/index.html index 452c8a9af8..77274230e4 100644 --- a/src/videoosd.html +++ b/src/controllers/playback/video/index.html @@ -1,5 +1,4 @@
-
@@ -28,7 +27,7 @@ - @@ -44,7 +43,7 @@ - diff --git a/src/controllers/playback/videoosd.js b/src/controllers/playback/video/index.js similarity index 74% rename from src/controllers/playback/videoosd.js rename to src/controllers/playback/video/index.js index 85499dc537..a5c270bf6d 100644 --- a/src/controllers/playback/videoosd.js +++ b/src/controllers/playback/video/index.js @@ -1,27 +1,46 @@ -define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'mediaInfo', 'focusManager', 'imageLoader', 'scrollHelper', 'events', 'connectionManager', 'browser', 'globalize', 'apphost', 'layoutManager', 'userSettings', 'keyboardnavigation', 'scrollStyles', 'emby-slider', 'paper-icon-button-light', 'css!assets/css/videoosd'], function (playbackManager, dom, inputManager, datetime, itemHelper, mediaInfo, focusManager, imageLoader, scrollHelper, events, connectionManager, browser, globalize, appHost, layoutManager, userSettings, keyboardnavigation) { - 'use strict'; +import playbackManager from 'playbackManager'; +import dom from 'dom'; +import inputManager from 'inputManager'; +import mouseManager from 'mouseManager'; +import datetime from 'datetime'; +import itemHelper from 'itemHelper'; +import mediaInfo from 'mediaInfo'; +import focusManager from 'focusManager'; +import events from 'events'; +import browser from 'browser'; +import globalize from 'globalize'; +import appHost from 'apphost'; +import layoutManager from 'layoutManager'; +import * as userSettings from 'userSettings'; +import keyboardnavigation from 'keyboardnavigation'; +import 'scrollStyles'; +import 'emby-slider'; +import 'paper-icon-button-light'; +import 'css!assets/css/videoosd'; + +/* eslint-disable indent */ function seriesImageUrl(item, options) { - if ('Episode' !== item.Type) { + if (item.Type !== 'Episode') { return null; } options = options || {}; options.type = options.type || 'Primary'; - if ('Primary' === options.type && item.SeriesPrimaryImageTag) { + if (options.type === 'Primary' && item.SeriesPrimaryImageTag) { options.tag = item.SeriesPrimaryImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); + return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); } - if ('Thumb' === options.type) { + if (options.type === 'Thumb') { if (item.SeriesThumbImageTag) { options.tag = item.SeriesThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); + return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); } if (item.ParentThumbImageTag) { options.tag = item.ParentThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); + return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); } } @@ -34,24 +53,28 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med if (item.ImageTags && item.ImageTags[options.type]) { options.tag = item.ImageTags[options.type]; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); + return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); } - if ('Primary' === options.type && item.AlbumId && item.AlbumPrimaryImageTag) { + if (options.type === 'Primary' && item.AlbumId && item.AlbumPrimaryImageTag) { options.tag = item.AlbumPrimaryImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); + return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); } return null; } - return function (view, params) { + function getOpenedDialog() { + return document.querySelector('.dialogContainer .dialog.opened'); + } + + export default function (view, params) { function onVerticalSwipe(e, elem, data) { - var player = currentPlayer; + const player = currentPlayer; if (player) { - var deltaY = data.currentDeltaY; - var windowSize = dom.getWindowSize(); + const deltaY = data.currentDeltaY; + const windowSize = dom.getWindowSize(); if (supportsBrightnessChange && data.clientX < windowSize.innerWidth / 2) { return void doBrightnessTouch(deltaY, player, windowSize.innerHeight); @@ -62,25 +85,25 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function doBrightnessTouch(deltaY, player, viewHeight) { - var delta = -deltaY / viewHeight * 100; - var newValue = playbackManager.getBrightness(player) + delta; + const delta = -deltaY / viewHeight * 100; + let newValue = playbackManager.getBrightness(player) + delta; newValue = Math.min(newValue, 100); newValue = Math.max(newValue, 0); playbackManager.setBrightness(newValue, player); } function doVolumeTouch(deltaY, player, viewHeight) { - var delta = -deltaY / viewHeight * 100; - var newValue = playbackManager.getVolume(player) + delta; + const delta = -deltaY / viewHeight * 100; + let newValue = playbackManager.getVolume(player) + delta; newValue = Math.min(newValue, 100); newValue = Math.max(newValue, 0); playbackManager.setVolume(newValue, player); } function onDoubleClick(e) { - var clientX = e.clientX; + const clientX = e.clientX; - if (null != clientX) { + if (clientX != null) { if (clientX < dom.getWindowSize().innerWidth / 2) { playbackManager.rewind(currentPlayer); } else { @@ -93,8 +116,8 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function getDisplayItem(item) { - if ('TvChannel' === item.Type) { - var apiClient = connectionManager.getApiClient(item.ServerId); + if (item.Type === 'TvChannel') { + const apiClient = window.connectionManager.getApiClient(item.ServerId); return apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (refreshedItem) { return { originalItem: refreshedItem, @@ -109,7 +132,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function updateRecordingButton(item) { - if (!item || 'Program' !== item.Type) { + if (!item || item.Type !== 'Program') { if (recordingButtonManager) { recordingButtonManager.destroy(); recordingButtonManager = null; @@ -118,9 +141,9 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med return void view.querySelector('.btnRecord').classList.add('hide'); } - connectionManager.getApiClient(item.ServerId).getCurrentUser().then(function (user) { + window.connectionManager.getApiClient(item.ServerId).getCurrentUser().then(function (user) { if (user.Policy.EnableLiveTvManagement) { - require(['recordingButton'], function (RecordingButton) { + import('recordingButton').then(({default: RecordingButton}) => { if (recordingButtonManager) { return void recordingButtonManager.refreshItem(item); } @@ -136,24 +159,22 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function updateDisplayItem(itemInfo) { - var item = itemInfo.originalItem; + const item = itemInfo.originalItem; currentItem = item; - var displayItem = itemInfo.displayItem || item; + const displayItem = itemInfo.displayItem || item; updateRecordingButton(displayItem); setPoster(displayItem, item); - var parentName = displayItem.SeriesName || displayItem.Album; + let parentName = displayItem.SeriesName || displayItem.Album; if (displayItem.EpisodeTitle || displayItem.IsSeries) { parentName = displayItem.Name; } setTitle(displayItem, parentName); - var titleElement; - var osdTitle = view.querySelector('.osdTitle'); - titleElement = osdTitle; - var displayName = itemHelper.getDisplayName(displayItem, { - includeParentInfo: 'Program' !== displayItem.Type, - includeIndexNumber: 'Program' !== displayItem.Type + const titleElement = view.querySelector('.osdTitle'); + let displayName = itemHelper.getDisplayName(displayItem, { + includeParentInfo: displayItem.Type !== 'Program', + includeIndexNumber: displayItem.Type !== 'Program' }); if (!displayName) { @@ -168,17 +189,17 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med titleElement.classList.add('hide'); } - var mediaInfoHtml = mediaInfo.getPrimaryMediaInfoHtml(displayItem, { + const mediaInfoHtml = mediaInfo.getPrimaryMediaInfoHtml(displayItem, { runtime: false, subtitles: false, tomatoes: false, endsAt: false, episodeTitle: false, - originalAirDate: 'Program' !== displayItem.Type, - episodeTitleIndexNumber: 'Program' !== displayItem.Type, + originalAirDate: displayItem.Type !== 'Program', + episodeTitleIndexNumber: displayItem.Type !== 'Program', programIndicator: false }); - var osdMediaInfo = view.querySelector('.osdMediaInfo'); + const osdMediaInfo = view.querySelector('.osdMediaInfo'); osdMediaInfo.innerHTML = mediaInfoHtml; if (mediaInfoHtml) { @@ -187,8 +208,8 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med osdMediaInfo.classList.add('hide'); } - var secondaryMediaInfo = view.querySelector('.osdSecondaryMediaInfo'); - var secondaryMediaInfoHtml = mediaInfo.getSecondaryMediaInfoHtml(displayItem, { + const secondaryMediaInfo = view.querySelector('.osdSecondaryMediaInfo'); + const secondaryMediaInfoHtml = mediaInfo.getSecondaryMediaInfoHtml(displayItem, { startDate: false, programTime: false }); @@ -236,7 +257,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function setDisplayTime(elem, date) { - var html; + let html; if (date) { date = datetime.parseISO8601Date(date); @@ -247,11 +268,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function shouldEnableProgressByTimeOfDay(item) { - return !('TvChannel' !== item.Type || !item.CurrentProgram); + return !(item.Type !== 'TvChannel' || !item.CurrentProgram); } function updateNowPlayingInfo(player, state) { - var item = state.NowPlayingItem; + const item = state.NowPlayingItem; currentItem = item; if (!item) { @@ -294,7 +315,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med function setTitle(item, parentName) { Emby.Page.setTitle(parentName || ''); - var documentTitle = parentName || (item ? item.Name : null); + const documentTitle = parentName || (item ? item.Name : null); if (documentTitle) { document.title = documentTitle; @@ -302,28 +323,28 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function setPoster(item, secondaryItem) { - var osdPoster = view.querySelector('.osdPoster'); + const osdPoster = view.querySelector('.osdPoster'); if (item) { - var imgUrl = seriesImageUrl(item, { - maxWidth: osdPoster.clientWidth * 2, + let imgUrl = seriesImageUrl(item, { + maxWidth: osdPoster.clientWidth, type: 'Primary' }) || seriesImageUrl(item, { - maxWidth: osdPoster.clientWidth * 2, + maxWidth: osdPoster.clientWidth, type: 'Thumb' }) || imageUrl(item, { - maxWidth: osdPoster.clientWidth * 2, + maxWidth: osdPoster.clientWidth, type: 'Primary' }); if (!imgUrl && secondaryItem && (imgUrl = seriesImageUrl(secondaryItem, { - maxWidth: osdPoster.clientWidth * 2, + maxWidth: osdPoster.clientWidth, type: 'Primary' }) || seriesImageUrl(secondaryItem, { - maxWidth: osdPoster.clientWidth * 2, + maxWidth: osdPoster.clientWidth, type: 'Thumb' }) || imageUrl(secondaryItem, { - maxWidth: osdPoster.clientWidth * 2, + maxWidth: osdPoster.clientWidth, type: 'Primary' })), imgUrl) { return void (osdPoster.innerHTML = ''); @@ -333,46 +354,28 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med osdPoster.innerHTML = ''; } - let osdLockCount = 0; + let mouseIsDown = false; function showOsd() { slideDownToShow(headerElement); showMainOsdControls(); - if (!osdLockCount) { - startOsdHideTimer(); - } + resetIdle(); } function hideOsd() { - if (osdLockCount) { - return; - } - slideUpToHide(headerElement); hideMainOsdControls(); + mouseManager.hideCursor(); } function toggleOsd() { - if ('osd' === currentVisibleMenu) { + if (currentVisibleMenu === 'osd') { hideOsd(); } else if (!currentVisibleMenu) { showOsd(); } } - function lockOsd() { - osdLockCount++; - stopOsdHideTimer(); - } - - function unlockOsd() { - osdLockCount--; - // Restart hide timer if OSD is currently visible - if (currentVisibleMenu && !osdLockCount) { - startOsdHideTimer(); - } - } - function startOsdHideTimer() { stopOsdHideTimer(); osdHideTimeout = setTimeout(hideOsd, 3e3); @@ -400,7 +403,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function onHideAnimationComplete(e) { - var elem = e.target; + const elem = e.target; if (elem != osdBottomElement) return; elem.classList.add('hide'); @@ -411,7 +414,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med function showMainOsdControls() { if (!currentVisibleMenu) { - var elem = osdBottomElement; + const elem = osdBottomElement; currentVisibleMenu = 'osd'; clearHideAnimationEventListeners(elem); elem.classList.remove('hide'); @@ -427,10 +430,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function hideMainOsdControls() { - if ('osd' === currentVisibleMenu) { - var elem = osdBottomElement; + if (currentVisibleMenu === 'osd') { + const elem = osdBottomElement; clearHideAnimationEventListeners(elem); elem.classList.add('videoOsdBottom-hidden'); + dom.addEventListener(elem, transitionEndEventName, onHideAnimationComplete, { once: true }); @@ -444,11 +448,22 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } } + // TODO: Move all idle-related code to `inputManager` or `idleManager` or `idleHelper` (per dialog thing) and listen event from there. + + function resetIdle() { + // Restart hide timer if OSD is currently visible and there is no opened dialog + if (currentVisibleMenu && !mouseIsDown && !getOpenedDialog()) { + startOsdHideTimer(); + } else { + stopOsdHideTimer(); + } + } + function onPointerMove(e) { - if ('mouse' === (e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'))) { - var eventX = e.screenX || 0; - var eventY = e.screenY || 0; - var obj = lastPointerMoveData; + if ((e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse')) === 'mouse') { + const eventX = e.screenX || 0; + const eventY = e.screenY || 0; + const obj = lastPointerMoveData; if (!obj) { lastPointerMoveData = { @@ -469,11 +484,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function onInputCommand(e) { - var player = currentPlayer; + const player = currentPlayer; switch (e.detail.command) { case 'left': - if ('osd' === currentVisibleMenu) { + if (currentVisibleMenu === 'osd') { showOsd(); } else { if (!currentVisibleMenu) { @@ -485,7 +500,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med break; case 'right': - if ('osd' === currentVisibleMenu) { + if (currentVisibleMenu === 'osd') { showOsd(); } else if (!currentVisibleMenu) { e.preventDefault(); @@ -528,7 +543,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function onRecordingCommand() { - var btnRecord = view.querySelector('.btnRecord'); + const btnRecord = view.querySelector('.btnRecord'); if (!btnRecord.classList.contains('hide')) { btnRecord.click(); @@ -555,7 +570,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function onStateChanged(event, state) { - var player = this; + const player = this; if (state.NowPlayingItem) { isEnabled = true; @@ -573,21 +588,21 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med function onVolumeChanged(e) { if (isEnabled) { - var player = this; + const player = this; updatePlayerVolumeState(player, player.isMuted(), player.getVolume()); } } function onPlaybackStart(e, state) { console.debug('nowplaying event: ' + e.type); - var player = this; + const player = this; onStateChanged.call(player, e, state); resetUpNextDialog(); } function resetUpNextDialog() { comingUpNextDisplayed = false; - var dlg = currentUpNextDialog; + const dlg = currentUpNextDialog; if (dlg) { dlg.destroy(); @@ -600,15 +615,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med resetUpNextDialog(); console.debug('nowplaying event: ' + e.type); - if ('Video' !== state.NextMediaType) { + if (state.NextMediaType !== 'Video') { view.removeEventListener('viewbeforehide', onViewHideStopPlayback); Emby.Page.back(); } } function onMediaStreamsChanged(e) { - var player = this; - var state = playbackManager.getPlayerState(player); + const player = this; + const state = playbackManager.getPlayerState(player); onStateChanged.call(player, { type: 'init' }, state); @@ -628,7 +643,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med currentPlayer = player; if (!player) return; } - var state = playbackManager.getPlayerState(player); + const state = playbackManager.getPlayerState(player); onStateChanged.call(player, { type: 'init' }, state); @@ -653,7 +668,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med destroyStats(); destroySubtitleSync(); resetUpNextDialog(); - var player = currentPlayer; + const player = currentPlayer; if (player) { events.off(player, 'playbackstart', onPlaybackStart); @@ -671,15 +686,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med function onTimeUpdate(e) { // Test for 'currentItem' is required for Firefox since its player spams 'timeupdate' events even being at breakpoint if (isEnabled && currentItem) { - var now = new Date().getTime(); + const now = new Date().getTime(); if (!(now - lastUpdateTime < 700)) { lastUpdateTime = now; - var player = this; + const player = this; currentRuntimeTicks = playbackManager.duration(player); - var currentTime = playbackManager.currentTime(player); + const currentTime = playbackManager.currentTime(player) * 10000; updateTimeDisplay(currentTime, currentRuntimeTicks, playbackManager.playbackStartTime(player), playbackManager.getBufferedRanges(player)); - var item = currentItem; + const item = currentItem; refreshProgramInfoIfNeeded(player, item); showComingUpNextIfNeeded(player, item, currentTime, currentRuntimeTicks); } @@ -687,10 +702,10 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function showComingUpNextIfNeeded(player, currentItem, currentTimeTicks, runtimeTicks) { - if (runtimeTicks && currentTimeTicks && !comingUpNextDisplayed && !currentVisibleMenu && 'Episode' === currentItem.Type && userSettings.enableNextVideoInfoOverlay()) { - var showAtSecondsLeft = runtimeTicks >= 3e10 ? 40 : runtimeTicks >= 24e9 ? 35 : 30; - var showAtTicks = runtimeTicks - 1e3 * showAtSecondsLeft * 1e4; - var timeRemainingTicks = runtimeTicks - currentTimeTicks; + if (runtimeTicks && currentTimeTicks && !comingUpNextDisplayed && !currentVisibleMenu && currentItem.Type === 'Episode' && userSettings.enableNextVideoInfoOverlay()) { + const showAtSecondsLeft = runtimeTicks >= 3e10 ? 40 : runtimeTicks >= 24e9 ? 35 : 30; + const showAtTicks = runtimeTicks - 1e3 * showAtSecondsLeft * 1e4; + const timeRemainingTicks = runtimeTicks - currentTimeTicks; if (currentTimeTicks >= showAtTicks && runtimeTicks >= 6e9 && timeRemainingTicks >= 2e8) { showComingUpNext(player); @@ -699,13 +714,13 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function onUpNextHidden() { - if ('upnext' === currentVisibleMenu) { + if (currentVisibleMenu === 'upnext') { currentVisibleMenu = null; } } function showComingUpNext(player) { - require(['upNextDialog'], function (UpNextDialog) { + import('upNextDialog').then(({default: UpNextDialog}) => { if (!(currentVisibleMenu || currentUpNextDialog)) { currentVisibleMenu = 'upnext'; comingUpNextDisplayed = true; @@ -722,16 +737,16 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function refreshProgramInfoIfNeeded(player, item) { - if ('TvChannel' === item.Type) { - var program = item.CurrentProgram; + if (item.Type === 'TvChannel') { + const program = item.CurrentProgram; if (program && program.EndDate) { try { - var endDate = datetime.parseISO8601Date(program.EndDate); + const endDate = datetime.parseISO8601Date(program.EndDate); if (new Date().getTime() >= endDate.getTime()) { console.debug('program info needs to be refreshed'); - var state = playbackManager.getPlayerState(player); + const state = playbackManager.getPlayerState(player); onStateChanged.call(player, { type: 'init' }, state); @@ -751,7 +766,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med if (isPaused) { btnPlayPauseIcon.classList.add('play_arrow'); - btnPlayPause.setAttribute('title', globalize.translate('ButtonPlay') + ' (k)'); + btnPlayPause.setAttribute('title', globalize.translate('Play') + ' (k)'); } else { btnPlayPauseIcon.classList.add('pause'); btnPlayPause.setAttribute('title', globalize.translate('ButtonPause') + ' (k)'); @@ -759,11 +774,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function updatePlayerStateInternal(event, player, state) { - var playState = state.PlayState || {}; + const playState = state.PlayState || {}; updatePlayPauseState(playState.IsPaused); - var supportedCommands = playbackManager.getSupportedCommands(player); + const supportedCommands = playbackManager.getSupportedCommands(player); currentPlayerSupportedCommands = supportedCommands; - supportsBrightnessChange = -1 !== supportedCommands.indexOf('SetBrightness'); + supportsBrightnessChange = supportedCommands.indexOf('SetBrightness') !== -1; updatePlayerVolumeState(player, playState.IsMuted, playState.VolumeLevel); if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) { @@ -772,18 +787,18 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med btnFastForward.disabled = !playState.CanSeek; btnRewind.disabled = !playState.CanSeek; - var nowPlayingItem = state.NowPlayingItem || {}; + const nowPlayingItem = state.NowPlayingItem || {}; playbackStartTimeTicks = playState.PlaybackStartTimeTicks; updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playState.PlaybackStartTimeTicks, playState.BufferedRanges || []); updateNowPlayingInfo(player, state); - if (state.MediaSource && state.MediaSource.SupportsTranscoding && -1 !== supportedCommands.indexOf('SetMaxStreamingBitrate')) { + if (state.MediaSource && state.MediaSource.SupportsTranscoding && supportedCommands.indexOf('SetMaxStreamingBitrate') !== -1) { view.querySelector('.btnVideoOsdSettings').classList.remove('hide'); } else { view.querySelector('.btnVideoOsdSettings').classList.add('hide'); } - var isProgressClear = state.MediaSource && null == state.MediaSource.RunTimeTicks; + const isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null; nowPlayingPositionSlider.setIsClear(isProgressClear); if (nowPlayingItem.RunTimeTicks) { @@ -791,19 +806,19 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med userSettings.skipForwardLength() * 1000000 / nowPlayingItem.RunTimeTicks); } - if (-1 === supportedCommands.indexOf('ToggleFullscreen') || player.isLocalPlayer && layoutManager.tv && playbackManager.isFullscreen(player)) { + if (supportedCommands.indexOf('ToggleFullscreen') === -1 || player.isLocalPlayer && layoutManager.tv && playbackManager.isFullscreen(player)) { view.querySelector('.btnFullscreen').classList.add('hide'); } else { view.querySelector('.btnFullscreen').classList.remove('hide'); } - if (-1 === supportedCommands.indexOf('PictureInPicture')) { + if (supportedCommands.indexOf('PictureInPicture') === -1) { view.querySelector('.btnPip').classList.add('hide'); } else { view.querySelector('.btnPip').classList.remove('hide'); } - if (-1 === supportedCommands.indexOf('AirPlay')) { + if (supportedCommands.indexOf('AirPlay') === -1) { view.querySelector('.btnAirPlay').classList.add('hide'); } else { view.querySelector('.btnAirPlay').classList.remove('hide'); @@ -820,12 +835,12 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med if (enableProgressByTimeOfDay) { if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) { if (programStartDateMs && programEndDateMs) { - var currentTimeMs = (playbackStartTimeTicks + (positionTicks || 0)) / 1e4; - var programRuntimeMs = programEndDateMs - programStartDateMs; + const currentTimeMs = (playbackStartTimeTicks + (positionTicks || 0)) / 1e4; + const programRuntimeMs = programEndDateMs - programStartDateMs; if (nowPlayingPositionSlider.value = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, currentTimeMs), bufferedRanges.length) { - var rangeStart = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, (playbackStartTimeTicks + (bufferedRanges[0].start || 0)) / 1e4); - var rangeEnd = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, (playbackStartTimeTicks + (bufferedRanges[0].end || 0)) / 1e4); + const rangeStart = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, (playbackStartTimeTicks + (bufferedRanges[0].start || 0)) / 1e4); + const rangeEnd = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, (playbackStartTimeTicks + (bufferedRanges[0].end || 0)) / 1e4); nowPlayingPositionSlider.setBufferedRanges([{ start: rangeStart, end: rangeEnd @@ -844,14 +859,14 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } else { if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) { if (runtimeTicks) { - var pct = positionTicks / runtimeTicks; + let pct = positionTicks / runtimeTicks; pct *= 100; nowPlayingPositionSlider.value = pct; } else { nowPlayingPositionSlider.value = 0; } - if (runtimeTicks && null != positionTicks && currentRuntimeTicks && !enableProgressByTimeOfDay && currentItem.RunTimeTicks && 'Recording' !== currentItem.Type) { + if (runtimeTicks && positionTicks != null && currentRuntimeTicks && !enableProgressByTimeOfDay && currentItem.RunTimeTicks && currentItem.Type !== 'Recording') { endsAtText.innerHTML = '  -  ' + mediaInfo.getEndsAtFromPosition(runtimeTicks, positionTicks, true); } else { endsAtText.innerHTML = ''; @@ -868,15 +883,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function updatePlayerVolumeState(player, isMuted, volumeLevel) { - var supportedCommands = currentPlayerSupportedCommands; - var showMuteButton = true; - var showVolumeSlider = true; + const supportedCommands = currentPlayerSupportedCommands; + let showMuteButton = true; + let showVolumeSlider = true; - if (-1 === supportedCommands.indexOf('Mute')) { + if (supportedCommands.indexOf('Mute') === -1) { showMuteButton = false; } - if (-1 === supportedCommands.indexOf('SetVolume')) { + if (supportedCommands.indexOf('SetVolume') === -1) { showVolumeSlider = false; } @@ -918,8 +933,8 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function updatePlaylist(player) { - var btnPreviousTrack = view.querySelector('.btnPreviousTrack'); - var btnNextTrack = view.querySelector('.btnNextTrack'); + const btnPreviousTrack = view.querySelector('.btnPreviousTrack'); + const btnNextTrack = view.querySelector('.btnNextTrack'); btnPreviousTrack.classList.remove('hide'); btnNextTrack.classList.remove('hide'); btnNextTrack.disabled = false; @@ -927,12 +942,12 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function updateTimeText(elem, ticks, divider) { - if (null == ticks) { + if (ticks == null) { elem.innerHTML = ''; return; } - var html = datetime.getDisplayRunningTime(ticks); + let html = datetime.getDisplayRunningTime(ticks); if (divider) { html = ' / ' + html; @@ -942,15 +957,14 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function onSettingsButtonClick(e) { - var btn = this; + const btn = this; - require(['playerSettingsMenu'], function (playerSettingsMenu) { - var player = currentPlayer; + import('playerSettingsMenu').then(({default: playerSettingsMenu}) => { + const player = currentPlayer; if (player) { - // show subtitle offset feature only if player and media support it - var showSubOffset = playbackManager.supportSubtitleOffset(player) && + const showSubOffset = playbackManager.supportSubtitleOffset(player) && playbackManager.canHandleOffsetOnCurrentSubtitle(player); playerSettingsMenu.show({ @@ -960,16 +974,20 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med stats: true, suboffset: showSubOffset, onOption: onSettingsOption + }).finally(() => { + resetIdle(); }); + + setTimeout(resetIdle, 0); } }); } function onSettingsOption(selectedOption) { - if ('stats' === selectedOption) { + if (selectedOption === 'stats') { toggleStats(); - } else if ('suboffset' === selectedOption) { - var player = currentPlayer; + } else if (selectedOption === 'suboffset') { + const player = currentPlayer; if (player) { playbackManager.enableShowingSubtitleOffset(player); toggleSubtitleSync(); @@ -978,8 +996,8 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function toggleStats() { - require(['playerStats'], function (PlayerStats) { - var player = currentPlayer; + import('playerStats').then(({default: PlayerStats}) => { + const player = currentPlayer; if (player) { if (statsOverlay) { @@ -1001,11 +1019,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function showAudioTrackSelection() { - var player = currentPlayer; - var audioTracks = playbackManager.audioTracks(player); - var currentIndex = playbackManager.getAudioStreamIndex(player); - var menuItems = audioTracks.map(function (stream) { - var opt = { + const player = currentPlayer; + const audioTracks = playbackManager.audioTracks(player); + const currentIndex = playbackManager.getAudioStreamIndex(player); + const menuItems = audioTracks.map(function (stream) { + const opt = { name: stream.DisplayTitle, id: stream.Index }; @@ -1016,29 +1034,33 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med return opt; }); - var positionTo = this; + const positionTo = this; - require(['actionsheet'], function (actionsheet) { + import('actionsheet').then(({default: actionsheet}) => { actionsheet.show({ items: menuItems, title: globalize.translate('Audio'), positionTo: positionTo }).then(function (id) { - var index = parseInt(id); + const index = parseInt(id); if (index !== currentIndex) { playbackManager.setAudioStreamIndex(index, player); } + }).finally(() => { + resetIdle(); }); + + setTimeout(resetIdle, 0); }); } function showSubtitleTrackSelection() { - var player = currentPlayer; - var streams = playbackManager.subtitleTracks(player); - var currentIndex = playbackManager.getSubtitleStreamIndex(player); + const player = currentPlayer; + const streams = playbackManager.subtitleTracks(player); + let currentIndex = playbackManager.getSubtitleStreamIndex(player); - if (null == currentIndex) { + if (currentIndex == null) { currentIndex = -1; } @@ -1046,8 +1068,8 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med Index: -1, DisplayTitle: globalize.translate('Off') }); - var menuItems = streams.map(function (stream) { - var opt = { + const menuItems = streams.map(function (stream) { + const opt = { name: stream.DisplayTitle, id: stream.Index }; @@ -1058,28 +1080,32 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med return opt; }); - var positionTo = this; + const positionTo = this; - require(['actionsheet'], function (actionsheet) { + import('actionsheet').then(({default: actionsheet}) => { actionsheet.show({ title: globalize.translate('Subtitles'), items: menuItems, positionTo: positionTo }).then(function (id) { - var index = parseInt(id); + const index = parseInt(id); if (index !== currentIndex) { playbackManager.setSubtitleStreamIndex(index, player); } toggleSubtitleSync(); + }).finally(() => { + resetIdle(); }); + + setTimeout(resetIdle, 0); }); } function toggleSubtitleSync(action) { - require(['subtitleSync'], function (SubtitleSync) { - var player = currentPlayer; + import('subtitleSync').then(({default: SubtitleSync}) => { + const player = currentPlayer; if (subtitleSyncOverlay) { subtitleSyncOverlay.toggle(action); } else if (player) { @@ -1099,14 +1125,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med * Clicked element. * To skip 'click' handling on Firefox/Edge. */ - var clickedElement; + let clickedElement; - function onWindowKeyDown(e) { - clickedElement = e.srcElement; + function onKeyDown(e) { + clickedElement = e.target; - var key = keyboardnavigation.getKeyName(e); + const key = keyboardnavigation.getKeyName(e); + const isKeyModified = e.ctrlKey || e.altKey || e.metaKey; - if (!currentVisibleMenu && 32 === e.keyCode) { + if (!currentVisibleMenu && e.keyCode === 32) { playbackManager.playPause(currentPlayer); showOsd(); return; @@ -1124,7 +1151,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med case 'Escape': case 'Back': // Ignore key when some dialog is opened - if (currentVisibleMenu === 'osd' && !document.querySelector('.dialogContainer')) { + if (currentVisibleMenu === 'osd' && !getOpenedDialog()) { hideOsd(); e.stopPropagation(); } @@ -1208,29 +1235,52 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med case '6': case '7': case '8': - case '9': - var percent = parseInt(key, 10) * 10; - playbackManager.seekPercent(percent, currentPlayer); + case '9': { + if (!isKeyModified) { + const percent = parseInt(key, 10) * 10; + playbackManager.seekPercent(percent, currentPlayer); + } + break; + } + case '>': + playbackManager.increasePlaybackRate(currentPlayer); + break; + case '<': + playbackManager.decreasePlaybackRate(currentPlayer); break; } } + function onKeyDownCapture() { + resetIdle(); + } + function onWindowMouseDown(e) { - clickedElement = e.srcElement; - lockOsd(); + clickedElement = e.target; + mouseIsDown = true; + resetIdle(); } function onWindowMouseUp() { - unlockOsd(); + mouseIsDown = false; + resetIdle(); } function onWindowTouchStart(e) { - clickedElement = e.srcElement; - lockOsd(); + clickedElement = e.target; + mouseIsDown = true; + resetIdle(); } function onWindowTouchEnd() { - unlockOsd(); + mouseIsDown = false; + resetIdle(); + } + + function onWindowDragEnd() { + // mousedown -> dragstart -> dragend !!! no mouseup :( + mouseIsDown = false; + resetIdle(); } function getImgUrl(item, chapter, index, maxWidth, apiClient) { @@ -1247,11 +1297,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } function getChapterBubbleHtml(apiClient, item, chapters, positionTicks) { - var chapter; - var index = -1; + let chapter; + let index = -1; - for (var i = 0, length = chapters.length; i < length; i++) { - var currentChapter = chapters[i]; + for (let i = 0, length = chapters.length; i < length; i++) { + const currentChapter = chapters[i]; if (positionTicks >= currentChapter.StartPositionTicks) { chapter = currentChapter; @@ -1263,10 +1313,10 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med return null; } - var src = getImgUrl(item, chapter, index, 400, apiClient); + const src = getImgUrl(item, chapter, index, 400, apiClient); if (src) { - var html = '
'; + let html = '
'; html += ''; html += '
'; html += '
'; @@ -1282,15 +1332,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med return null; } - var playPauseClickTimeout; + let playPauseClickTimeout; function onViewHideStopPlayback() { if (playbackManager.isPlayingVideo()) { - require(['shell'], function (shell) { + import('shell').then(({default: shell}) => { shell.disableFullscreen(); }); clearTimeout(playPauseClickTimeout); - var player = currentPlayer; + const player = currentPlayer; view.removeEventListener('viewbeforehide', onViewHideStopPlayback); releaseCurrentPlayer(); playbackManager.stop(player); @@ -1305,47 +1355,49 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med } } - require(['shell'], function (shell) { + import('shell').then(({default: shell}) => { shell.enableFullscreen(); }); - var currentPlayer; - var comingUpNextDisplayed; - var currentUpNextDialog; - var isEnabled; - var currentItem; - var recordingButtonManager; - var enableProgressByTimeOfDay; - var supportsBrightnessChange; - var currentVisibleMenu; - var statsOverlay; - var osdHideTimeout; - var lastPointerMoveData; - var self = this; - var currentPlayerSupportedCommands = []; - var currentRuntimeTicks = 0; - var lastUpdateTime = 0; - var programStartDateMs = 0; - var programEndDateMs = 0; - var playbackStartTimeTicks = 0; - var subtitleSyncOverlay; - var nowPlayingVolumeSlider = view.querySelector('.osdVolumeSlider'); - var nowPlayingVolumeSliderContainer = view.querySelector('.osdVolumeSliderContainer'); - var nowPlayingPositionSlider = view.querySelector('.osdPositionSlider'); - var nowPlayingPositionText = view.querySelector('.osdPositionText'); - var nowPlayingDurationText = view.querySelector('.osdDurationText'); - var startTimeText = view.querySelector('.startTimeText'); - var endTimeText = view.querySelector('.endTimeText'); - var endsAtText = view.querySelector('.endsAtText'); - var btnRewind = view.querySelector('.btnRewind'); - var btnFastForward = view.querySelector('.btnFastForward'); - var transitionEndEventName = dom.whichTransitionEvent(); - var headerElement = document.querySelector('.skinHeader'); - var osdBottomElement = document.querySelector('.videoOsdBottom-maincontrols'); + let currentPlayer; + let comingUpNextDisplayed; + let currentUpNextDialog; + let isEnabled; + let currentItem; + let recordingButtonManager; + let enableProgressByTimeOfDay; + let supportsBrightnessChange; + let currentVisibleMenu; + let statsOverlay; + let osdHideTimeout; + let lastPointerMoveData; + const self = this; + let currentPlayerSupportedCommands = []; + let currentRuntimeTicks = 0; + let lastUpdateTime = 0; + let programStartDateMs = 0; + let programEndDateMs = 0; + let playbackStartTimeTicks = 0; + let subtitleSyncOverlay; + const nowPlayingVolumeSlider = view.querySelector('.osdVolumeSlider'); + const nowPlayingVolumeSliderContainer = view.querySelector('.osdVolumeSliderContainer'); + const nowPlayingPositionSlider = view.querySelector('.osdPositionSlider'); + const nowPlayingPositionText = view.querySelector('.osdPositionText'); + const nowPlayingDurationText = view.querySelector('.osdDurationText'); + const startTimeText = view.querySelector('.startTimeText'); + const endTimeText = view.querySelector('.endTimeText'); + const endsAtText = view.querySelector('.endsAtText'); + const btnRewind = view.querySelector('.btnRewind'); + const btnFastForward = view.querySelector('.btnFastForward'); + const transitionEndEventName = dom.whichTransitionEvent(); + const headerElement = document.querySelector('.skinHeader'); + const osdBottomElement = document.querySelector('.videoOsdBottom-maincontrols'); + + nowPlayingPositionSlider.enableKeyboardDragging(); + nowPlayingVolumeSlider.enableKeyboardDragging(); if (layoutManager.tv) { nowPlayingPositionSlider.classList.add('focusable'); - nowPlayingPositionSlider.enableKeyboardDragging(); } view.addEventListener('viewbeforeshow', function (e) { @@ -1356,30 +1408,43 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med try { events.on(playbackManager, 'playerchange', onPlayerChange); bindToPlayer(playbackManager.getCurrentPlayer()); + /* eslint-disable-next-line compat/compat */ dom.addEventListener(document, window.PointerEvent ? 'pointermove' : 'mousemove', onPointerMove, { passive: true }); showOsd(); inputManager.on(window, onInputCommand); - dom.addEventListener(window, 'keydown', onWindowKeyDown, { - capture: true - }); - dom.addEventListener(window, window.PointerEvent ? 'pointerdown' : 'mousedown', onWindowMouseDown, { + document.addEventListener('keydown', onKeyDown); + dom.addEventListener(document, 'keydown', onKeyDownCapture, { + capture: true, passive: true }); + /* eslint-disable-next-line compat/compat */ + dom.addEventListener(window, window.PointerEvent ? 'pointerdown' : 'mousedown', onWindowMouseDown, { + capture: true, + passive: true + }); + /* eslint-disable-next-line compat/compat */ dom.addEventListener(window, window.PointerEvent ? 'pointerup' : 'mouseup', onWindowMouseUp, { + capture: true, passive: true }); dom.addEventListener(window, 'touchstart', onWindowTouchStart, { + capture: true, passive: true }); ['touchend', 'touchcancel'].forEach((event) => { dom.addEventListener(window, event, onWindowTouchEnd, { + capture: true, passive: true }); }); + dom.addEventListener(window, 'dragend', onWindowDragEnd, { + capture: true, + passive: true + }); } catch (e) { - require(['appRouter'], function(appRouter) { + import('appRouter').then(({default: appRouter}) => { appRouter.goHome(); }); } @@ -1389,26 +1454,39 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med statsOverlay.enabled(false); } - dom.removeEventListener(window, 'keydown', onWindowKeyDown, { - capture: true - }); - dom.removeEventListener(window, window.PointerEvent ? 'pointerdown' : 'mousedown', onWindowMouseDown, { + document.removeEventListener('keydown', onKeyDown); + dom.removeEventListener(document, 'keydown', onKeyDownCapture, { + capture: true, passive: true }); + /* eslint-disable-next-line compat/compat */ + dom.removeEventListener(window, window.PointerEvent ? 'pointerdown' : 'mousedown', onWindowMouseDown, { + capture: true, + passive: true + }); + /* eslint-disable-next-line compat/compat */ dom.removeEventListener(window, window.PointerEvent ? 'pointerup' : 'mouseup', onWindowMouseUp, { + capture: true, passive: true }); dom.removeEventListener(window, 'touchstart', onWindowTouchStart, { + capture: true, passive: true }); ['touchend', 'touchcancel'].forEach((event) => { dom.removeEventListener(window, event, onWindowTouchEnd, { + capture: true, passive: true }); }); + dom.removeEventListener(window, 'dragend', onWindowDragEnd, { + capture: true, + passive: true + }); stopOsdHideTimer(); headerElement.classList.remove('osdHeader'); headerElement.classList.remove('osdHeader-hidden'); + /* eslint-disable-next-line compat/compat */ dom.removeEventListener(document, window.PointerEvent ? 'pointermove' : 'mousemove', onPointerMove, { passive: true }); @@ -1443,14 +1521,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med destroyStats(); destroySubtitleSync(); }); - var lastPointerDown = 0; + let lastPointerDown = 0; + /* eslint-disable-next-line compat/compat */ dom.addEventListener(view, window.PointerEvent ? 'pointerdown' : 'click', function (e) { if (dom.parentWithClass(e.target, ['videoOsdBottom', 'upNextContainer'])) { return void showOsd(); } - var pointerType = e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'); - var now = new Date().getTime(); + const pointerType = e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'); + const now = new Date().getTime(); switch (pointerType) { case 'touch': @@ -1488,31 +1567,28 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med if (browser.touch) { dom.addEventListener(view, 'dblclick', onDoubleClick, {}); } else { - var options = { passive: true }; + const options = { passive: true }; dom.addEventListener(view, 'dblclick', function () { playbackManager.toggleFullscreen(currentPlayer); }, options); } - function setVolume() { - playbackManager.setVolume(this.value, currentPlayer); - } - view.querySelector('.buttonMute').addEventListener('click', function () { playbackManager.toggleMute(currentPlayer); }); - nowPlayingVolumeSlider.addEventListener('change', setVolume); - nowPlayingVolumeSlider.addEventListener('mousemove', setVolume); - nowPlayingVolumeSlider.addEventListener('touchmove', setVolume); + + nowPlayingVolumeSlider.addEventListener('input', (e) => { + playbackManager.setVolume(e.target.value, currentPlayer); + }); nowPlayingPositionSlider.addEventListener('change', function () { - var player = currentPlayer; + const player = currentPlayer; if (player) { - var newPercent = parseFloat(this.value); + const newPercent = parseFloat(this.value); if (enableProgressByTimeOfDay) { - var seekAirTimeTicks = newPercent / 100 * (programEndDateMs - programStartDateMs) * 1e4; + let seekAirTimeTicks = newPercent / 100 * (programEndDateMs - programStartDateMs) * 1e4; seekAirTimeTicks += 1e4 * programStartDateMs; seekAirTimeTicks -= playbackStartTimeTicks; playbackManager.seek(seekAirTimeTicks, player); @@ -1526,7 +1602,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med showOsd(); if (enableProgressByTimeOfDay) { if (programStartDateMs && programEndDateMs) { - var ms = programEndDateMs - programStartDateMs; + let ms = programEndDateMs - programStartDateMs; ms /= 100; ms *= value; ms += programStartDateMs; @@ -1540,13 +1616,13 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med return '--:--'; } - var ticks = currentRuntimeTicks; + let ticks = currentRuntimeTicks; ticks /= 100; ticks *= value; - var item = currentItem; + const item = currentItem; if (item && item.Chapters && item.Chapters.length && item.Chapters[0].ImageTag) { - var html = getChapterBubbleHtml(connectionManager.getApiClient(item.ServerId), item, item.Chapters, ticks); + const html = getChapterBubbleHtml(window.connectionManager.getApiClient(item.ServerId), item, item.Chapters, ticks); if (html) { return html; @@ -1579,7 +1655,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med if (browser.touch) { (function () { - require(['touchHelper'], function (TouchHelper) { + import('touchHelper').then(({default: TouchHelper}) => { self.touchHelper = new TouchHelper(view, { swipeYThreshold: 30, triggerOnMove: true, @@ -1591,5 +1667,6 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med }); })(); } - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/search.html b/src/controllers/search.html similarity index 70% rename from src/search.html rename to src/controllers/search.html index acf65e7317..b0277aa7e0 100644 --- a/src/search.html +++ b/src/controllers/search.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/controllers/searchpage.js b/src/controllers/searchpage.js index 8a138b7516..ffb7fbac0b 100644 --- a/src/controllers/searchpage.js +++ b/src/controllers/searchpage.js @@ -1,36 +1,36 @@ -define(['focusManager', 'searchFields', 'searchResults', 'events'], function (focusManager, SearchFields, SearchResults, events) { - 'use strict'; +import SearchFields from 'searchFields'; +import SearchResults from 'searchResults'; +import events from 'events'; - return function (view, params) { - function onSearch(e, value) { - self.searchResults.search(value); +export default function (view, params) { + function onSearch(e, value) { + self.searchResults.search(value); + } + + const self = this; + view.addEventListener('viewshow', function () { + if (!self.searchFields) { + self.searchFields = new SearchFields({ + element: view.querySelector('.searchFields') + }); + self.searchResults = new SearchResults({ + element: view.querySelector('.searchResults'), + serverId: params.serverId || ApiClient.serverId(), + parentId: params.parentId, + collectionType: params.collectionType + }); + events.on(self.searchFields, 'search', onSearch); + } + }); + view.addEventListener('viewdestroy', function () { + if (self.searchFields) { + self.searchFields.destroy(); + self.searchFields = null; } - var self = this; - view.addEventListener('viewshow', function () { - if (!self.searchFields) { - self.searchFields = new SearchFields({ - element: view.querySelector('.searchFields') - }); - self.searchResults = new SearchResults({ - element: view.querySelector('.searchResults'), - serverId: params.serverId || ApiClient.serverId(), - parentId: params.parentId, - collectionType: params.collectionType - }); - events.on(self.searchFields, 'search', onSearch); - } - }); - view.addEventListener('viewdestroy', function () { - if (self.searchFields) { - self.searchFields.destroy(); - self.searchFields = null; - } - - if (self.searchResults) { - self.searchResults.destroy(); - self.searchResults = null; - } - }); - }; -}); + if (self.searchResults) { + self.searchResults.destroy(); + self.searchResults = null; + } + }); +} diff --git a/src/addserver.html b/src/controllers/session/addServer/index.html similarity index 94% rename from src/addserver.html rename to src/controllers/session/addServer/index.html index d25a8eef98..31dd66b33c 100644 --- a/src/addserver.html +++ b/src/controllers/session/addServer/index.html @@ -8,7 +8,7 @@

-
-
diff --git a/src/controllers/auth/login.js b/src/controllers/session/login/index.js similarity index 74% rename from src/controllers/auth/login.js rename to src/controllers/session/login/index.js index c0c37e27d6..0c0f0bcdad 100644 --- a/src/controllers/auth/login.js +++ b/src/controllers/session/login/index.js @@ -1,24 +1,26 @@ -define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layoutManager', 'browser', 'globalize', 'cardStyle', 'emby-checkbox'], function (appHost, appSettings, dom, connectionManager, loading, layoutManager, browser, globalize) { - 'use strict'; +import appHost from 'apphost'; +import appSettings from 'appSettings'; +import dom from 'dom'; +import loading from 'loading'; +import layoutManager from 'layoutManager'; +import libraryMenu from 'libraryMenu'; +import browser from 'browser'; +import globalize from 'globalize'; +import 'cardStyle'; +import 'emby-checkbox'; - var enableFocusTransform = !browser.slow && !browser.edge; +/* eslint-disable indent */ + + const enableFocusTransform = !browser.slow && !browser.edge; function authenticateUserByName(page, apiClient, username, password) { loading.show(); apiClient.authenticateUserByName(username, password).then(function (result) { var user = result.User; - var serverId = getParameterByName('serverid'); - var newUrl; - - if (user.Policy.IsAdministrator && !serverId) { - newUrl = 'dashboard.html'; - } else { - newUrl = 'home.html'; - } - loading.hide(); + Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient); - Dashboard.navigate(newUrl); + Dashboard.navigate('home.html'); }, function (response) { page.querySelector('#txtManualName').value = ''; page.querySelector('#txtManualPassword').value = ''; @@ -26,7 +28,7 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout const UnauthorizedOrForbidden = [401, 403]; if (UnauthorizedOrForbidden.includes(response.status)) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { const messageKey = response.status === 401 ? 'MessageInvalidUser' : 'MessageUnauthorizedUser'; toast(globalize.translate(messageKey)); }); @@ -58,23 +60,23 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout } } - var metroColors = ['#6FBD45', '#4BB3DD', '#4164A5', '#E12026', '#800080', '#E1B222', '#008040', '#0094FF', '#FF00C7', '#FF870F', '#7F0037']; + const metroColors = ['#6FBD45', '#4BB3DD', '#4164A5', '#E12026', '#800080', '#E1B222', '#008040', '#0094FF', '#FF00C7', '#FF870F', '#7F0037']; function getRandomMetroColor() { - var index = Math.floor(Math.random() * (metroColors.length - 1)); + const index = Math.floor(Math.random() * (metroColors.length - 1)); return metroColors[index]; } function getMetroColor(str) { if (str) { - var character = String(str.substr(0, 1).charCodeAt()); - var sum = 0; + const character = String(str.substr(0, 1).charCodeAt()); + let sum = 0; - for (var i = 0; i < character.length; i++) { + for (let i = 0; i < character.length; i++) { sum += parseInt(character.charAt(i)); } - var index = String(sum).substr(-1); + const index = String(sum).substr(-1); return metroColors[index]; } @@ -82,13 +84,13 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout } function loadUserList(context, apiClient, users) { - var html = ''; + let html = ''; - for (var i = 0; i < users.length; i++) { - var user = users[i]; + for (let i = 0; i < users.length; i++) { + const user = users[i]; // TODO move card creation code to Card component - var cssClass = 'card squareCard scalableCard squareCard-scalable'; + let cssClass = 'card squareCard scalableCard squareCard-scalable'; if (layoutManager.tv) { cssClass += ' show-focus'; @@ -98,13 +100,13 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout } } - var cardBoxCssClass = 'cardBox cardBox-bottompadded'; + const cardBoxCssClass = 'cardBox cardBox-bottompadded'; html += '
'; return cardContainer; }).join(''); - var itemsContainer = view.querySelector('.servers'); + const itemsContainer = view.querySelector('.servers'); if (!items.length) { html = '

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

'; @@ -77,11 +93,6 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu } } - function showGeneralError() { - loading.hide(); - alertText(globalize.translate('DefaultErrorMessage')); - } - function alertText(text) { alertTextWithOptions({ text: text @@ -89,7 +100,7 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu } function alertTextWithOptions(options) { - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert(options); }); } @@ -98,14 +109,14 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu alertText(globalize.translate('MessageUnableToConnectToServer')); } - return function (view, params) { + export default function (view, params) { function connectToServer(server) { loading.show(); - connectionManager.connectToServer(server, { + window.connectionManager.connectToServer(server, { enableAutoLogin: appSettings.enableAutoLogin() }).then(function (result) { loading.hide(); - var apiClient = result.ApiClient; + const apiClient = result.ApiClient; switch (result.State) { case 'SignedIn': @@ -133,14 +144,14 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu function deleteServer(server) { loading.show(); - connectionManager.deleteServer(server.Id).then(function () { + window.connectionManager.deleteServer(server.Id).then(function () { loading.hide(); loadServers(); }); } function onServerClick(server) { - var menuItems = []; + const menuItems = []; menuItems.push({ name: globalize.translate('Connect'), id: 'connect' @@ -175,34 +186,36 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu function loadServers() { loading.show(); - connectionManager.getAvailableServers().then(onServersRetrieved); + window.connectionManager.getAvailableServers().then(onServersRetrieved); } - var servers; + let servers; updatePageStyle(view, params); view.addEventListener('viewshow', function (e) { - var isRestored = e.detail.isRestored; + const isRestored = e.detail.isRestored; appRouter.setTitle(null); + libraryMenu.setTransparentMenu(true); if (!isRestored) { loadServers(); } }); view.querySelector('.servers').addEventListener('click', function (e) { - var card = dom.parentWithClass(e.target, 'card'); + const card = dom.parentWithClass(e.target, 'card'); if (card) { - var url = card.getAttribute('data-url'); + const url = card.getAttribute('data-url'); if (url) { appRouter.show(url); } else { - var id = card.getAttribute('data-id'); + const id = card.getAttribute('data-id'); onServerClick(servers.filter(function (s) { return s.Id === id; })[0]); } } }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/shows/episodes.js b/src/controllers/shows/episodes.js index eeede20661..6dd633d7b0 100644 --- a/src/controllers/shows/episodes.js +++ b/src/controllers/shows/episodes.js @@ -1,10 +1,19 @@ -define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'userSettings', 'globalize', 'emby-itemscontainer'], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) { - 'use strict'; +import loading from 'loading'; +import events from 'events'; +import libraryBrowser from 'libraryBrowser'; +import imageLoader from 'imageLoader'; +import listView from 'listView'; +import cardBuilder from 'cardBuilder'; +import * as userSettings from 'userSettings'; +import globalize from 'globalize'; +import 'emby-itemscontainer'; - return function (view, params, tabContent) { +/* eslint-disable indent */ + + export default function (view, params, tabContent) { function getPageData(context) { - var key = getSavedQueryKey(context); - var pageData = data[key]; + const key = getSavedQueryKey(context); + let pageData = data[key]; if (!pageData) { pageData = data[key] = { @@ -46,10 +55,10 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB } function onViewStyleChange() { - var viewStyle = self.getCurrentViewStyle(); - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const viewStyle = self.getCurrentViewStyle(); + const itemsContainer = tabContent.querySelector('.itemsContainer'); - if ('List' == viewStyle) { + if (viewStyle == 'List') { itemsContainer.classList.add('vertical-list'); itemsContainer.classList.remove('vertical-wrap'); } else { @@ -63,7 +72,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB function reloadItems(page) { loading.show(); isLoading = true; - var query = getQuery(page); + const query = getQuery(page); ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) { function onNextPageClick() { if (isLoading) { @@ -88,8 +97,8 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB } window.scrollTo(0, 0); - var html; - var pagingHtml = libraryBrowser.getQueryPagingHtml({ + let html; + const pagingHtml = libraryBrowser.getQueryPagingHtml({ startIndex: query.StartIndex, limit: query.Limit, totalRecordCount: result.TotalRecordCount, @@ -99,8 +108,8 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB sortButton: false, filterButton: false }); - var viewStyle = self.getCurrentViewStyle(); - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const viewStyle = self.getCurrentViewStyle(); + const itemsContainer = tabContent.querySelector('.itemsContainer'); if (viewStyle == 'List') { html = listView.getListViewHtml({ items: result.Items, @@ -128,22 +137,20 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB overlayPlayButton: true }); } - var i; - var length; - var elems; + let elems; elems = tabContent.querySelectorAll('.paging'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].innerHTML = pagingHtml; } elems = tabContent.querySelectorAll('.btnNextPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onNextPageClick); } elems = tabContent.querySelectorAll('.btnPreviousPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onPreviousPageClick); } @@ -153,19 +160,19 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB loading.hide(); isLoading = false; - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); } - var self = this; - var data = {}; - var isLoading = false; + const self = this; + const data = {}; + let isLoading = false; self.showFilterMenu = function () { - require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) { - var filterDialog = new filterDialogFactory({ + import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + const filterDialog = new filterDialogFactory({ query: getQuery(tabContent), mode: 'episodes', serverId: ApiClient.serverId() @@ -188,7 +195,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB tabContent.querySelector('.btnSort').addEventListener('click', function (e) { libraryBrowser.showSortMenu({ items: [{ - name: globalize.translate('OptionNameSort'), + name: globalize.translate('Name'), id: 'SeriesSortName,SortName' }, { name: globalize.translate('OptionTvdbRating'), @@ -209,7 +216,7 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB name: globalize.translate('OptionPlayCount'), id: 'PlayCount,SeriesSortName,SortName' }, { - name: globalize.translate('OptionRuntime'), + name: globalize.translate('Runtime'), id: 'Runtime,SeriesSortName,SortName' }], callback: function () { @@ -219,12 +226,12 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB button: e.target }); }); - var btnSelectView = tabContent.querySelector('.btnSelectView'); + const btnSelectView = tabContent.querySelector('.btnSelectView'); btnSelectView.addEventListener('click', function (e) { libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'List,Poster,PosterCard'.split(',')); }); btnSelectView.addEventListener('layoutchange', function (e) { - var viewStyle = e.detail.viewStyle; + const viewStyle = e.detail.viewStyle; getPageData(tabContent).view = viewStyle; libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); onViewStyleChange(); @@ -240,5 +247,6 @@ define(['loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardB }; self.destroy = function () {}; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/shows/tvgenres.js b/src/controllers/shows/tvgenres.js index 7d09307fc2..3a17fd7997 100644 --- a/src/controllers/shows/tvgenres.js +++ b/src/controllers/shows/tvgenres.js @@ -1,10 +1,18 @@ -define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader', 'apphost', 'globalize', 'appRouter', 'dom', 'emby-button'], function (layoutManager, loading, libraryBrowser, cardBuilder, lazyLoader, appHost, globalize, appRouter, dom) { - 'use strict'; +import layoutManager from 'layoutManager'; +import loading from 'loading'; +import libraryBrowser from 'libraryBrowser'; +import cardBuilder from 'cardBuilder'; +import lazyLoader from 'lazyLoader'; +import globalize from 'globalize'; +import appRouter from 'appRouter'; +import 'emby-button'; - return function (view, params, tabContent) { +/* eslint-disable indent */ + + export default function (view, params, tabContent) { function getPageData() { - var key = getSavedQueryKey(); - var pageData = data[key]; + const key = getSavedQueryKey(); + let pageData = data[key]; if (!pageData) { pageData = data[key] = { @@ -34,7 +42,7 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader function getPromise() { loading.show(); - var query = getQuery(); + const query = getQuery(); return ApiClient.getGenres(ApiClient.getCurrentUserId(), query); } @@ -51,17 +59,17 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader } function fillItemsContainer(entry) { - var elem = entry.target; - var id = elem.getAttribute('data-id'); - var viewStyle = self.getCurrentViewStyle(); - var limit = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 5 : 9; + const elem = entry.target; + const id = elem.getAttribute('data-id'); + const viewStyle = self.getCurrentViewStyle(); + let limit = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 5 : 9; if (enableScrollX()) { limit = 10; } - var enableImageTypes = 'Thumb' == viewStyle || 'ThumbCard' == viewStyle ? 'Primary,Backdrop,Thumb' : 'Primary'; - var query = { + const enableImageTypes = viewStyle == 'Thumb' || viewStyle == 'ThumbCard' ? 'Primary,Backdrop,Thumb' : 'Primary'; + const query = { SortBy: 'SortName', SortOrder: 'Ascending', IncludeItemTypes: 'Series', @@ -75,8 +83,6 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader ParentId: params.topParentId }; ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) { - var supportsImageAnalysis = appHost.supports('imageanalysis'); - if (viewStyle == 'Thumb') { cardBuilder.buildCards(result.Items, { itemsContainer: elem, @@ -128,14 +134,13 @@ define(['layoutManager', 'loading', 'libraryBrowser', 'cardBuilder', 'lazyLoader } function reloadItems(context, promise) { - var query = getQuery(); + const query = getQuery(); promise.then(function (result) { - var elem = context.querySelector('#items'); - var html = ''; - var items = result.Items; + const elem = context.querySelector('#items'); + let html = ''; + const items = result.Items; - for (var i = 0, length = items.length; i < length; i++) { - var item = items[i]; + for (const item of items) { html += '
'; html += '
'; html += '
- - + +
@@ -33,12 +33,12 @@
-

${HeaderNextUp}

+

${NextUp}

- +
@@ -58,8 +58,8 @@
- - + +
diff --git a/src/controllers/shows/tvrecommended.js b/src/controllers/shows/tvrecommended.js index fc165cf1e5..048d27d45d 100644 --- a/src/controllers/shows/tvrecommended.js +++ b/src/controllers/shows/tvrecommended.js @@ -1,22 +1,33 @@ -define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'dom', 'userSettings', 'cardBuilder', 'playbackManager', 'mainTabsManager', 'globalize', 'scrollStyles', 'emby-itemscontainer', 'emby-button'], function (events, inputManager, libraryMenu, layoutManager, loading, dom, userSettings, cardBuilder, playbackManager, mainTabsManager, globalize) { - 'use strict'; +import events from 'events'; +import inputManager from 'inputManager'; +import libraryMenu from 'libraryMenu'; +import layoutManager from 'layoutManager'; +import loading from 'loading'; +import dom from 'dom'; +import * as userSettings from 'userSettings'; +import cardBuilder from 'cardBuilder'; +import playbackManager from 'playbackManager'; +import * as mainTabsManager from 'mainTabsManager'; +import globalize from 'globalize'; +import 'scrollStyles'; +import 'emby-itemscontainer'; +import 'emby-button'; + +/* eslint-disable indent */ function getTabs() { return [{ - name: globalize.translate('TabShows') + name: globalize.translate('Shows') }, { - name: globalize.translate('TabSuggestions') + name: globalize.translate('Suggestions') }, { name: globalize.translate('TabUpcoming') }, { - name: globalize.translate('TabGenres') + name: globalize.translate('Genres') }, { name: globalize.translate('TabNetworks') }, { - name: globalize.translate('TabEpisodes') - }, { - name: globalize.translate('ButtonSearch'), - cssClass: 'searchTabButton' + name: globalize.translate('Episodes') }]; } @@ -110,7 +121,7 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do }); loading.hide(); - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(view); }); }); @@ -151,7 +162,7 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do }); loading.hide(); - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(view); }); }); @@ -192,7 +203,7 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do }); loading.hide(); - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(view); }); }); @@ -206,14 +217,13 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do return enableScrollX() ? 'overflowBackdrop' : 'backdrop'; } - return function (view, params) { - + export default function (view, params) { function onBeforeTabChange(e) { preLoadTab(view, parseInt(e.detail.selectedTabIndex)); } function onTabChange(e) { - var newIndex = parseInt(e.detail.selectedTabIndex); + const newIndex = parseInt(e.detail.selectedTabIndex); loadTab(view, newIndex); } @@ -226,45 +236,43 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do } function getTabController(page, index, callback) { - var depends = []; + let depends; switch (index) { case 0: - depends.push('controllers/shows/tvshows'); + depends = 'controllers/shows/tvshows'; break; case 1: + depends = 'controllers/shows/tvrecommended'; break; case 2: - depends.push('controllers/shows/tvupcoming'); + depends = 'controllers/shows/tvupcoming'; break; case 3: - depends.push('controllers/shows/tvgenres'); + depends = 'controllers/shows/tvgenres'; break; case 4: - depends.push('controllers/shows/tvstudios'); + depends = 'controllers/shows/tvstudios'; break; case 5: - depends.push('controllers/shows/episodes'); + depends = 'controllers/shows/episodes'; break; - - case 6: - depends.push('scripts/searchtab'); } - require(depends, function (controllerFactory) { - var tabContent; + import(depends).then(({default: controllerFactory}) => { + let tabContent; if (index === 1) { tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); self.tabContent = tabContent; } - var controller = tabControllers[index]; + let controller = tabControllers[index]; if (!controller) { tabContent = view.querySelector(".pageTabContent[data-index='" + index + "']"); @@ -302,8 +310,6 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do function loadTab(page, index) { currentTabIndex = index; getTabController(page, index, function (controller) { - initialTabIndex = null; - if (renderedTabs.indexOf(index) == -1) { renderedTabs.push(index); controller.renderTab(); @@ -319,7 +325,7 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do } function onWebSocketMessage(e, data) { - var msg = data; + const msg = data; if (msg.MessageType === 'UserDataChanged' && msg.Data.UserId == ApiClient.getCurrentUserId()) { renderedTabs = []; @@ -334,11 +340,9 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do } } - var isViewRestored; - var self = this; - var currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId)); - var initialTabIndex = currentTabIndex; - var suggestionsTabIndex = 1; + const self = this; + let currentTabIndex = parseInt(params.tab || getDefaultTabIndex(params.topParentId)); + const suggestionsTabIndex = 1; self.initTab = function () { var tabContent = view.querySelector(".pageTabContent[data-index='" + suggestionsTabIndex + "']"); @@ -350,13 +354,12 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do loadSuggestionsTab(view, params, tabContent); }; - var tabControllers = []; - var renderedTabs = []; + const tabControllers = []; + let renderedTabs = []; view.addEventListener('viewshow', function (e) { - isViewRestored = e.detail.isRestored; initTabs(); if (!view.getAttribute('data-title')) { - var parentId = params.topParentId; + const parentId = params.topParentId; if (parentId) { ApiClient.getItem(ApiClient.getCurrentUserId(), parentId).then(function (item) { @@ -364,8 +367,8 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do libraryMenu.setTitle(item.Name); }); } else { - view.setAttribute('data-title', globalize.translate('TabShows')); - libraryMenu.setTitle(globalize.translate('TabShows')); + view.setAttribute('data-title', globalize.translate('Shows')); + libraryMenu.setTitle(globalize.translate('Shows')); } } @@ -385,5 +388,6 @@ define(['events', 'inputManager', 'libraryMenu', 'layoutManager', 'loading', 'do } }); }); - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/shows/tvshows.js b/src/controllers/shows/tvshows.js index 0bd5e4b52e..fee4fd24a5 100644 --- a/src/controllers/shows/tvshows.js +++ b/src/controllers/shows/tvshows.js @@ -1,10 +1,20 @@ -define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'alphaPicker', 'userSettings', 'globalize', 'emby-itemscontainer'], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, alphaPicker, userSettings, globalize) { - 'use strict'; +import loading from 'loading'; +import events from 'events'; +import libraryBrowser from 'libraryBrowser'; +import imageLoader from 'imageLoader'; +import listView from 'listView'; +import cardBuilder from 'cardBuilder'; +import AlphaPicker from 'alphaPicker'; +import * as userSettings from 'userSettings'; +import globalize from 'globalize'; +import 'emby-itemscontainer'; - return function (view, params, tabContent) { +/* eslint-disable indent */ + + export default function (view, params, tabContent) { function getPageData(context) { - var key = getSavedQueryKey(context); - var pageData = data[key]; + const key = getSavedQueryKey(context); + let pageData = data[key]; if (!pageData) { pageData = data[key] = { @@ -45,10 +55,10 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' } function onViewStyleChange() { - var viewStyle = self.getCurrentViewStyle(); - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const viewStyle = self.getCurrentViewStyle(); + const itemsContainer = tabContent.querySelector('.itemsContainer'); - if ('List' == viewStyle) { + if (viewStyle == 'List') { itemsContainer.classList.add('vertical-list'); itemsContainer.classList.remove('vertical-wrap'); } else { @@ -62,7 +72,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' function reloadItems(page) { loading.show(); isLoading = true; - var query = getQuery(page); + const query = getQuery(page); ApiClient.getItems(ApiClient.getCurrentUserId(), query).then(function (result) { function onNextPageClick() { if (isLoading) { @@ -88,8 +98,8 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' window.scrollTo(0, 0); updateFilterControls(page); - var html; - var pagingHtml = libraryBrowser.getQueryPagingHtml({ + let html; + const pagingHtml = libraryBrowser.getQueryPagingHtml({ startIndex: query.StartIndex, limit: query.Limit, totalRecordCount: result.TotalRecordCount, @@ -99,7 +109,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' sortButton: false, filterButton: false }); - var viewStyle = self.getCurrentViewStyle(); + const viewStyle = self.getCurrentViewStyle(); if (viewStyle == 'Thumb') { html = cardBuilder.getCardsHtml({ items: result.Items, @@ -156,49 +166,48 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' showYear: true }); } - var i; - var length; - var elems = tabContent.querySelectorAll('.paging'); - for (i = 0, length = elems.length; i < length; i++) { + let elems = tabContent.querySelectorAll('.paging'); + + for (let i = 0, length = elems.length; i < length; i++) { elems[i].innerHTML = pagingHtml; } elems = tabContent.querySelectorAll('.btnNextPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onNextPageClick); } elems = tabContent.querySelectorAll('.btnPreviousPage'); - for (i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].addEventListener('click', onPreviousPageClick); } - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const itemsContainer = tabContent.querySelector('.itemsContainer'); itemsContainer.innerHTML = html; imageLoader.lazyChildren(itemsContainer); libraryBrowser.saveQueryValues(getSavedQueryKey(page), query); loading.hide(); isLoading = false; - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); } function updateFilterControls(tabContent) { - var query = getQuery(tabContent); - self.alphaPicker.value(query.NameStartsWithOrGreater); + const query = getQuery(tabContent); + self.alphaPicker.value(query.NameStartsWith); } - var self = this; - var data = {}; - var isLoading = false; + const self = this; + const data = {}; + let isLoading = false; self.showFilterMenu = function () { - require(['components/filterdialog/filterdialog'], function ({default: filterDialogFactory}) { - var filterDialog = new filterDialogFactory({ + import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + const filterDialog = new filterDialogFactory({ query: getQuery(tabContent), mode: 'series', serverId: ApiClient.serverId() @@ -216,17 +225,17 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' }; function initPage(tabContent) { - var alphaPickerElement = tabContent.querySelector('.alphaPicker'); - var itemsContainer = tabContent.querySelector('.itemsContainer'); + const alphaPickerElement = tabContent.querySelector('.alphaPicker'); + const itemsContainer = tabContent.querySelector('.itemsContainer'); alphaPickerElement.addEventListener('alphavaluechanged', function (e) { - var newValue = e.detail.value; - var query = getQuery(tabContent); - query.NameStartsWithOrGreater = newValue; + const newValue = e.detail.value; + const query = getQuery(tabContent); + query.NameStartsWith = newValue; query.StartIndex = 0; reloadItems(tabContent); }); - self.alphaPicker = new alphaPicker({ + self.alphaPicker = new AlphaPicker({ element: alphaPickerElement, valueChangeEvent: 'click' }); @@ -241,7 +250,7 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' tabContent.querySelector('.btnSort').addEventListener('click', function (e) { libraryBrowser.showSortMenu({ items: [{ - name: globalize.translate('OptionNameSort'), + name: globalize.translate('Name'), id: 'SortName' }, { name: globalize.translate('OptionImdbRating'), @@ -267,12 +276,12 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' button: e.target }); }); - var btnSelectView = tabContent.querySelector('.btnSelectView'); + const btnSelectView = tabContent.querySelector('.btnSelectView'); btnSelectView.addEventListener('click', function (e) { libraryBrowser.showLayoutMenu(e.target, self.getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(',')); }); btnSelectView.addEventListener('layoutchange', function (e) { - var viewStyle = e.detail.viewStyle; + const viewStyle = e.detail.viewStyle; getPageData(tabContent).view = viewStyle; libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); getQuery(tabContent).StartIndex = 0; @@ -290,5 +299,6 @@ define(['layoutManager', 'loading', 'events', 'libraryBrowser', 'imageLoader', ' }; self.destroy = function () {}; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/shows/tvstudios.js b/src/controllers/shows/tvstudios.js index 1051bfa10b..4be717fb7f 100644 --- a/src/controllers/shows/tvstudios.js +++ b/src/controllers/shows/tvstudios.js @@ -1,9 +1,12 @@ -define(['loading', 'libraryBrowser', 'cardBuilder', 'apphost'], function (loading, libraryBrowser, cardBuilder, appHost) { - 'use strict'; +import loading from 'loading'; +import libraryBrowser from 'libraryBrowser'; +import cardBuilder from 'cardBuilder'; + +/* eslint-disable indent */ function getQuery(params) { - var key = getSavedQueryKey(); - var pageData = data[key]; + const key = getSavedQueryKey(); + let pageData = data[key]; if (!pageData) { pageData = data[key] = { @@ -27,14 +30,14 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'apphost'], function (loadin } function getPromise(context, params) { - var query = getQuery(params); + const query = getQuery(params); loading.show(); return ApiClient.getStudios(ApiClient.getCurrentUserId(), query); } function reloadItems(context, params, promise) { promise.then(function (result) { - var elem = context.querySelector('#items'); + const elem = context.querySelector('#items'); cardBuilder.buildCards(result.Items, { itemsContainer: elem, shape: 'backdrop', @@ -47,16 +50,17 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'apphost'], function (loadin }); loading.hide(); - require(['autoFocuser'], function (autoFocuser) { + import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(context); }); }); } - var data = {}; - return function (view, params, tabContent) { - var promise; - var self = this; + const data = {}; + + export default function (view, params, tabContent) { + let promise; + const self = this; self.preRender = function () { promise = getPromise(view, params); @@ -65,5 +69,6 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'apphost'], function (loadin self.renderTab = function () { reloadItems(tabContent, params, promise); }; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/shows/tvupcoming.js b/src/controllers/shows/tvupcoming.js index d57a5ae3cd..f9df3df343 100644 --- a/src/controllers/shows/tvupcoming.js +++ b/src/controllers/shows/tvupcoming.js @@ -1,9 +1,17 @@ -define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', 'apphost', 'imageLoader', 'globalize', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, loading, datetime, libraryBrowser, cardBuilder, appHost, imageLoader, globalize) { - 'use strict'; +import layoutManager from 'layoutManager'; +import loading from 'loading'; +import datetime from 'datetime'; +import cardBuilder from 'cardBuilder'; +import imageLoader from 'imageLoader'; +import globalize from 'globalize'; +import 'scrollStyles'; +import 'emby-itemscontainer'; + +/* eslint-disable indent */ function getUpcomingPromise(context, params) { loading.show(); - var query = { + const query = { Limit: 48, Fields: 'AirTime,UserData', UserId: ApiClient.getCurrentUserId(), @@ -17,7 +25,7 @@ define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', function loadUpcoming(context, params, promise) { promise.then(function (result) { - var items = result.Items; + const items = result.Items; if (items.length) { context.querySelector('.noItemsMessage').style.display = 'none'; @@ -39,19 +47,17 @@ define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', } function renderUpcoming(elem, items) { - var i; - var length; - var groups = []; - var currentGroupName = ''; - var currentGroup = []; + const groups = []; + let currentGroupName = ''; + let currentGroup = []; - for (i = 0, length = items.length; i < length; i++) { - var item = items[i]; - var dateText = ''; + for (let i = 0, length = items.length; i < length; i++) { + const item = items[i]; + let dateText = ''; if (item.PremiereDate) { try { - var premiereDate = datetime.parseISO8601Date(item.PremiereDate, true); + const premiereDate = datetime.parseISO8601Date(item.PremiereDate, true); dateText = datetime.isRelativeDay(premiereDate, -1) ? globalize.translate('Yesterday') : datetime.toLocaleDateString(premiereDate, { weekday: 'long', month: 'short', @@ -77,17 +83,17 @@ define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', } } - var html = ''; + let html = ''; - for (i = 0, length = groups.length; i < length; i++) { - var group = groups[i]; + for (let i = 0, length = groups.length; i < length; i++) { + const group = groups[i]; html += '
'; html += '

' + group.name + '

'; - var allowBottomPadding = true; + let allowBottomPadding = true; if (enableScrollX()) { allowBottomPadding = false; - var scrollXClass = 'scrollX hiddenScrollX'; + let scrollXClass = 'scrollX hiddenScrollX'; if (layoutManager.tv) { scrollXClass += ' smoothScrollX'; @@ -98,8 +104,6 @@ define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', html += '
'; } - var supportsImageAnalysis = appHost.supports('imageanalysis'); - supportsImageAnalysis = false; html += cardBuilder.getCardsHtml({ items: group.items, showLocationTypeIndicator: false, @@ -108,11 +112,11 @@ define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', preferThumb: true, lazy: true, showDetailsMenu: true, - centerText: !supportsImageAnalysis, + centerText: true, showParentTitle: true, overlayText: false, allowBottomPadding: allowBottomPadding, - cardLayout: supportsImageAnalysis, + cardLayout: false, overlayMoreButton: true, missingIndicator: false }); @@ -124,9 +128,9 @@ define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', imageLoader.lazyChildren(elem); } - return function (view, params, tabContent) { - var upcomingPromise; - var self = this; + export default function (view, params, tabContent) { + let upcomingPromise; + const self = this; self.preRender = function () { upcomingPromise = getUpcomingPromise(view, params); @@ -135,5 +139,6 @@ define(['layoutManager', 'loading', 'datetime', 'libraryBrowser', 'cardBuilder', self.renderTab = function () { loadUpcoming(tabContent, params, upcomingPromise); }; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/controllers/user/display.js b/src/controllers/user/display.js deleted file mode 100644 index 26c75f209a..0000000000 --- a/src/controllers/user/display.js +++ /dev/null @@ -1,53 +0,0 @@ -define(['displaySettings', 'userSettings', 'autoFocuser'], function (DisplaySettings, userSettings, autoFocuser) { - 'use strict'; - - // Shortcuts - const UserSettings = userSettings.UserSettings; - - return function (view, params) { - function onBeforeUnload(e) { - if (hasChanges) { - e.returnValue = 'You currently have unsaved changes. Are you sure you wish to leave?'; - } - } - - var settingsInstance; - var hasChanges; - var userId = params.userId || ApiClient.getCurrentUserId(); - var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new UserSettings(); - view.addEventListener('viewshow', function () { - window.addEventListener('beforeunload', onBeforeUnload); - - if (settingsInstance) { - settingsInstance.loadData(); - } else { - settingsInstance = new DisplaySettings({ - serverId: ApiClient.serverId(), - userId: userId, - element: view.querySelector('.settingsContainer'), - userSettings: currentSettings, - enableSaveButton: false, - enableSaveConfirmation: false, - autoFocus: autoFocuser.isEnabled() - }); - } - }); - view.addEventListener('change', function () { - hasChanges = true; - }); - view.addEventListener('viewbeforehide', function () { - window.removeEventListener('beforeunload', onBeforeUnload); - hasChanges = false; - - if (settingsInstance) { - settingsInstance.submit(); - } - }); - view.addEventListener('viewdestroy', function () { - if (settingsInstance) { - settingsInstance.destroy(); - settingsInstance = null; - } - }); - }; -}); diff --git a/src/mypreferencesdisplay.html b/src/controllers/user/display/index.html similarity index 84% rename from src/mypreferencesdisplay.html rename to src/controllers/user/display/index.html index bee49754af..5482b62fe8 100644 --- a/src/mypreferencesdisplay.html +++ b/src/controllers/user/display/index.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/controllers/user/display/index.js b/src/controllers/user/display/index.js new file mode 100644 index 0000000000..54f71ad571 --- /dev/null +++ b/src/controllers/user/display/index.js @@ -0,0 +1,45 @@ +import DisplaySettings from 'displaySettings'; +import * as userSettings from 'userSettings'; +import autoFocuser from 'autoFocuser'; + +/* eslint-disable indent */ + + // Shortcuts + const UserSettings = userSettings.UserSettings; + + export default function (view, params) { + let settingsInstance; + let hasChanges; + + const userId = params.userId || ApiClient.getCurrentUserId(); + const currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new UserSettings(); + + view.addEventListener('viewshow', function () { + if (settingsInstance) { + settingsInstance.loadData(); + } else { + settingsInstance = new DisplaySettings({ + serverId: ApiClient.serverId(), + userId: userId, + element: view.querySelector('.settingsContainer'), + userSettings: currentSettings, + enableSaveButton: true, + enableSaveConfirmation: true, + autoFocus: autoFocuser.isEnabled() + }); + } + }); + + view.addEventListener('change', function () { + hasChanges = true; + }); + + view.addEventListener('viewdestroy', function () { + if (settingsInstance) { + settingsInstance.destroy(); + settingsInstance = null; + } + }); + } + +/* eslint-enable indent */ diff --git a/src/controllers/user/home.js b/src/controllers/user/home.js deleted file mode 100644 index 8f826c425d..0000000000 --- a/src/controllers/user/home.js +++ /dev/null @@ -1,52 +0,0 @@ -define(['homescreenSettings', 'dom', 'globalize', 'loading', 'userSettings', 'autoFocuser', 'listViewStyle'], function (HomescreenSettings, dom, globalize, loading, userSettings, autoFocuser) { - 'use strict'; - - // Shortcuts - const UserSettings = userSettings.UserSettings; - - return function (view, params) { - function onBeforeUnload(e) { - if (hasChanges) { - e.returnValue = 'You currently have unsaved changes. Are you sure you wish to leave?'; - } - } - - var homescreenSettingsInstance; - var hasChanges; - var userId = params.userId || ApiClient.getCurrentUserId(); - var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new UserSettings(); - view.addEventListener('viewshow', function () { - window.addEventListener('beforeunload', onBeforeUnload); - - if (homescreenSettingsInstance) { - homescreenSettingsInstance.loadData(); - } else { - homescreenSettingsInstance = new HomescreenSettings({ - serverId: ApiClient.serverId(), - userId: userId, - element: view.querySelector('.homeScreenSettingsContainer'), - userSettings: currentSettings, - enableSaveButton: false, - enableSaveConfirmation: false, - autoFocus: autoFocuser.isEnabled() - }); - } - }); - view.addEventListener('change', function () { - hasChanges = true; - }); - view.addEventListener('viewbeforehide', function () { - hasChanges = false; - - if (homescreenSettingsInstance) { - homescreenSettingsInstance.submit(); - } - }); - view.addEventListener('viewdestroy', function () { - if (homescreenSettingsInstance) { - homescreenSettingsInstance.destroy(); - homescreenSettingsInstance = null; - } - }); - }; -}); diff --git a/src/mypreferenceshome.html b/src/controllers/user/home/index.html similarity index 85% rename from src/mypreferenceshome.html rename to src/controllers/user/home/index.html index 79c5ccc4bd..f98f373cb0 100644 --- a/src/mypreferenceshome.html +++ b/src/controllers/user/home/index.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/controllers/user/home/index.js b/src/controllers/user/home/index.js new file mode 100644 index 0000000000..539365ff97 --- /dev/null +++ b/src/controllers/user/home/index.js @@ -0,0 +1,46 @@ +import HomescreenSettings from 'homescreenSettings'; +import * as userSettings from 'userSettings'; +import autoFocuser from 'autoFocuser'; +import 'listViewStyle'; + +/* eslint-disable indent */ + + // Shortcuts + const UserSettings = userSettings.UserSettings; + + export default function (view, params) { + let homescreenSettingsInstance; + let hasChanges; + + const userId = params.userId || ApiClient.getCurrentUserId(); + const currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new UserSettings(); + + view.addEventListener('viewshow', function () { + if (homescreenSettingsInstance) { + homescreenSettingsInstance.loadData(); + } else { + homescreenSettingsInstance = new HomescreenSettings({ + serverId: ApiClient.serverId(), + userId: userId, + element: view.querySelector('.homeScreenSettingsContainer'), + userSettings: currentSettings, + enableSaveButton: true, + enableSaveConfirmation: true, + autoFocus: autoFocuser.isEnabled() + }); + } + }); + + view.addEventListener('change', function () { + hasChanges = true; + }); + + view.addEventListener('viewdestroy', function () { + if (homescreenSettingsInstance) { + homescreenSettingsInstance.destroy(); + homescreenSettingsInstance = null; + } + }); + } + +/* eslint-enable indent */ diff --git a/src/controllers/user/menu.js b/src/controllers/user/menu.js deleted file mode 100644 index 586cd6744c..0000000000 --- a/src/controllers/user/menu.js +++ /dev/null @@ -1,58 +0,0 @@ -define(['apphost', 'connectionManager', 'layoutManager', 'listViewStyle', 'emby-button'], function(appHost, connectionManager, layoutManager) { - 'use strict'; - - return function(view, params) { - view.querySelector('.btnLogout').addEventListener('click', function() { - Dashboard.logout(); - }); - - view.querySelector('.selectServer').addEventListener('click', function () { - Dashboard.selectServer(); - }); - - view.querySelector('.clientSettings').addEventListener('click', function () { - window.NativeShell.openClientSettings(); - }); - - view.addEventListener('viewshow', function() { - // this page can also be used by admins to change user preferences from the user edit page - var userId = params.userId || Dashboard.getCurrentUserId(); - var page = this; - - page.querySelector('.lnkMyProfile').setAttribute('href', 'myprofile.html?userId=' + userId); - page.querySelector('.lnkDisplayPreferences').setAttribute('href', 'mypreferencesdisplay.html?userId=' + userId); - page.querySelector('.lnkHomePreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId); - page.querySelector('.lnkPlaybackPreferences').setAttribute('href', 'mypreferencesplayback.html?userId=' + userId); - page.querySelector('.lnkSubtitlePreferences').setAttribute('href', 'mypreferencessubtitles.html?userId=' + userId); - - if (window.NativeShell && window.NativeShell.AppHost.supports('clientsettings')) { - page.querySelector('.clientSettings').classList.remove('hide'); - } else { - page.querySelector('.clientSettings').classList.add('hide'); - } - - if (appHost.supports('multiserver')) { - page.querySelector('.selectServer').classList.remove('hide'); - } else { - page.querySelector('.selectServer').classList.add('hide'); - } - - // hide the actions if user preferences are being edited for a different user - if (params.userId && params.userId !== Dashboard.getCurrentUserId) { - page.querySelector('.userSection').classList.add('hide'); - page.querySelector('.adminSection').classList.add('hide'); - } - - ApiClient.getUser(userId).then(function(user) { - page.querySelector('.headerUsername').innerHTML = user.Name; - if (!user.Policy.IsAdministrator) { - page.querySelector('.adminSection').classList.add('hide'); - } - }); - - require(['autoFocuser'], function (autoFocuser) { - autoFocuser.autoFocus(view); - }); - }); - }; -}); diff --git a/src/mypreferencesmenu.html b/src/controllers/user/menu/index.html similarity index 92% rename from src/mypreferencesmenu.html rename to src/controllers/user/menu/index.html index 2c3ca0edd9..1655f75c5e 100644 --- a/src/mypreferencesmenu.html +++ b/src/controllers/user/menu/index.html @@ -1,4 +1,4 @@ -
+
@@ -7,7 +7,7 @@
-
${ButtonProfile}
+
${Profile}
@@ -16,7 +16,7 @@
-
${HeaderDisplay}
+
${Display}
 @@ -25,7 +25,7 @@
-
${HeaderHome}
+
${Home}
@@ -57,7 +57,7 @@
-
+

${HeaderAdmin}

@@ -82,7 +82,7 @@
-
${HeaderSelectServer}
+
${SelectServer}
 diff --git a/src/controllers/user/menu/index.js b/src/controllers/user/menu/index.js new file mode 100644 index 0000000000..7a8d619bb0 --- /dev/null +++ b/src/controllers/user/menu/index.js @@ -0,0 +1,59 @@ +import appHost from 'apphost'; +import layoutManager from 'layoutManager'; +import 'listViewStyle'; +import 'emby-button'; + +export default function (view, params) { + view.querySelector('.btnLogout').addEventListener('click', function () { + Dashboard.logout(); + }); + + view.querySelector('.selectServer').addEventListener('click', function () { + Dashboard.selectServer(); + }); + + view.querySelector('.clientSettings').addEventListener('click', function () { + window.NativeShell.openClientSettings(); + }); + + view.addEventListener('viewshow', function () { + // this page can also be used by admins to change user preferences from the user edit page + const userId = params.userId || Dashboard.getCurrentUserId(); + const page = this; + + page.querySelector('.lnkMyProfile').setAttribute('href', 'myprofile.html?userId=' + userId); + page.querySelector('.lnkDisplayPreferences').setAttribute('href', 'mypreferencesdisplay.html?userId=' + userId); + page.querySelector('.lnkHomePreferences').setAttribute('href', 'mypreferenceshome.html?userId=' + userId); + page.querySelector('.lnkPlaybackPreferences').setAttribute('href', 'mypreferencesplayback.html?userId=' + userId); + page.querySelector('.lnkSubtitlePreferences').setAttribute('href', 'mypreferencessubtitles.html?userId=' + userId); + + if (window.NativeShell && window.NativeShell.AppHost.supports('clientsettings')) { + page.querySelector('.clientSettings').classList.remove('hide'); + } else { + page.querySelector('.clientSettings').classList.add('hide'); + } + + if (appHost.supports('multiserver')) { + page.querySelector('.selectServer').classList.remove('hide'); + } else { + page.querySelector('.selectServer').classList.add('hide'); + } + + ApiClient.getUser(userId).then(function (user) { + page.querySelector('.headerUsername').innerHTML = user.Name; + if (user.Policy.IsAdministrator && !layoutManager.tv) { + page.querySelector('.adminSection').classList.remove('hide'); + } + }); + + // Hide the actions if user preferences are being edited for a different user + if (params.userId && params.userId !== Dashboard.getCurrentUserId) { + page.querySelector('.userSection').classList.add('hide'); + page.querySelector('.adminSection').classList.add('hide'); + } + + import('autoFocuser').then(({default: autoFocuser}) => { + autoFocuser.autoFocus(view); + }); + }); +} diff --git a/src/controllers/user/playback.js b/src/controllers/user/playback.js deleted file mode 100644 index 02a718eb8c..0000000000 --- a/src/controllers/user/playback.js +++ /dev/null @@ -1,52 +0,0 @@ -define(['playbackSettings', 'dom', 'globalize', 'loading', 'userSettings', 'autoFocuser', 'listViewStyle'], function (PlaybackSettings, dom, globalize, loading, userSettings, autoFocuser) { - 'use strict'; - - // Shortcuts - const UserSettings = userSettings.UserSettings; - - return function (view, params) { - function onBeforeUnload(e) { - if (hasChanges) { - e.returnValue = 'You currently have unsaved changes. Are you sure you wish to leave?'; - } - } - - var settingsInstance; - var hasChanges; - var userId = params.userId || ApiClient.getCurrentUserId(); - var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new UserSettings(); - view.addEventListener('viewshow', function () { - window.addEventListener('beforeunload', onBeforeUnload); - - if (settingsInstance) { - settingsInstance.loadData(); - } else { - settingsInstance = new PlaybackSettings({ - serverId: ApiClient.serverId(), - userId: userId, - element: view.querySelector('.settingsContainer'), - userSettings: currentSettings, - enableSaveButton: false, - enableSaveConfirmation: false, - autoFocus: autoFocuser.isEnabled() - }); - } - }); - view.addEventListener('change', function () { - hasChanges = true; - }); - view.addEventListener('viewbeforehide', function () { - hasChanges = false; - - if (settingsInstance) { - settingsInstance.submit(); - } - }); - view.addEventListener('viewdestroy', function () { - if (settingsInstance) { - settingsInstance.destroy(); - settingsInstance = null; - } - }); - }; -}); diff --git a/src/mypreferencesplayback.html b/src/controllers/user/playback/index.html similarity index 100% rename from src/mypreferencesplayback.html rename to src/controllers/user/playback/index.html diff --git a/src/controllers/user/playback/index.js b/src/controllers/user/playback/index.js new file mode 100644 index 0000000000..34a5ae0b1d --- /dev/null +++ b/src/controllers/user/playback/index.js @@ -0,0 +1,46 @@ +import PlaybackSettings from 'playbackSettings'; +import * as userSettings from 'userSettings'; +import autoFocuser from 'autoFocuser'; +import 'listViewStyle'; + +/* eslint-disable indent */ + + // Shortcuts + const UserSettings = userSettings.UserSettings; + + export default function (view, params) { + let settingsInstance; + let hasChanges; + + const userId = params.userId || ApiClient.getCurrentUserId(); + const currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new UserSettings(); + + view.addEventListener('viewshow', function () { + if (settingsInstance) { + settingsInstance.loadData(); + } else { + settingsInstance = new PlaybackSettings({ + serverId: ApiClient.serverId(), + userId: userId, + element: view.querySelector('.settingsContainer'), + userSettings: currentSettings, + enableSaveButton: true, + enableSaveConfirmation: true, + autoFocus: autoFocuser.isEnabled() + }); + } + }); + + view.addEventListener('change', function () { + hasChanges = true; + }); + + view.addEventListener('viewdestroy', function () { + if (settingsInstance) { + settingsInstance.destroy(); + settingsInstance = null; + } + }); + } + +/* eslint-enable indent */ diff --git a/src/controllers/user/profile.js b/src/controllers/user/profile.js deleted file mode 100644 index fd7d1e32cc..0000000000 --- a/src/controllers/user/profile.js +++ /dev/null @@ -1,106 +0,0 @@ -define(['controllers/dashboard/users/userpasswordpage', 'loading', 'libraryMenu', 'apphost', 'globalize', 'emby-button'], function (UserPasswordPage, loading, libraryMenu, appHost, globalize) { - 'use strict'; - - function reloadUser(page) { - var userId = getParameterByName('userId'); - loading.show(); - ApiClient.getUser(userId).then(function (user) { - page.querySelector('.username').innerHTML = user.Name; - libraryMenu.setTitle(user.Name); - - var imageUrl = 'assets/img/avatar.png'; - if (user.PrimaryImageTag) { - imageUrl = ApiClient.getUserImageUrl(user.Id, { - tag: user.PrimaryImageTag, - type: 'Primary' - }); - } - - var userImage = page.querySelector('#image'); - userImage.style.backgroundImage = 'url(' + imageUrl + ')'; - - Dashboard.getCurrentUser().then(function (loggedInUser) { - if (user.PrimaryImageTag) { - page.querySelector('#btnAddImage').classList.add('hide'); - page.querySelector('#btnDeleteImage').classList.remove('hide'); - } else if (appHost.supports('fileinput') && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) { - page.querySelector('#btnDeleteImage').classList.add('hide'); - page.querySelector('#btnAddImage').classList.remove('hide'); - } - }); - loading.hide(); - }); - } - - function onFileReaderError(evt) { - loading.hide(); - switch (evt.target.error.code) { - case evt.target.error.NOT_FOUND_ERR: - require(['toast'], function (toast) { - toast(globalize.translate('FileNotFound')); - }); - break; - case evt.target.error.ABORT_ERR: - onFileReaderAbort(); - break; - case evt.target.error.NOT_READABLE_ERR: - default: - require(['toast'], function (toast) { - toast(globalize.translate('FileReadError')); - }); - } - } - - function onFileReaderAbort(evt) { - loading.hide(); - require(['toast'], function (toast) { - toast(globalize.translate('FileReadCancelled')); - }); - } - - function setFiles(page, files) { - var userImage = page.querySelector('#image'); - var file = files[0]; - - if (!file || !file.type.match('image.*')) { - return false; - } - - var reader = new FileReader(); - reader.onerror = onFileReaderError; - reader.onabort = onFileReaderAbort; - reader.onload = function (evt) { - userImage.style.backgroundImage = 'url(' + evt.target.result + ')'; - var userId = getParameterByName('userId'); - ApiClient.uploadUserImage(userId, 'Primary', file).then(function () { - loading.hide(); - reloadUser(page); - }); - }; - - reader.readAsDataURL(file); - } - - return function (view, params) { - reloadUser(view); - new UserPasswordPage(view, params); - view.querySelector('#btnDeleteImage').addEventListener('click', function () { - require(['confirm'], function (confirm) { - confirm(globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage')).then(function () { - loading.show(); - var userId = getParameterByName('userId'); - ApiClient.deleteUserImage(userId, 'primary').then(function () { - loading.hide(); - reloadUser(view); - }); - }); - }); - }); - view.querySelector('#btnAddImage').addEventListener('click', function (evt) { - view.querySelector('#uploadImage').click(); - }); - view.querySelector('#uploadImage').addEventListener('change', function (evt) { - setFiles(view, evt.target.files); - }); - }; -}); diff --git a/src/myprofile.html b/src/controllers/user/profile/index.html similarity index 93% rename from src/myprofile.html rename to src/controllers/user/profile/index.html index 3765ac5e75..3eaa2f7299 100644 --- a/src/myprofile.html +++ b/src/controllers/user/profile/index.html @@ -1,4 +1,4 @@ -
+
@@ -12,7 +12,7 @@ ${ButtonAddImage}
@@ -32,10 +32,10 @@
@@ -57,7 +57,7 @@
+

@@ -12,10 +12,10 @@
diff --git a/src/wizardremoteaccess.html b/src/controllers/wizard/remote/index.html similarity index 94% rename from src/wizardremoteaccess.html rename to src/controllers/wizard/remote/index.html index 0718c2dc37..0334f584c5 100644 --- a/src/wizardremoteaccess.html +++ b/src/controllers/wizard/remote/index.html @@ -22,10 +22,10 @@
diff --git a/src/controllers/wizard/remote/index.js b/src/controllers/wizard/remote/index.js new file mode 100644 index 0000000000..b967d668ad --- /dev/null +++ b/src/controllers/wizard/remote/index.js @@ -0,0 +1,41 @@ +import loading from 'loading'; +import 'emby-checkbox'; +import 'emby-button'; +import 'emby-select'; + +function save(page) { + loading.show(); + const apiClient = ApiClient; + const config = {}; + config.EnableRemoteAccess = page.querySelector('#chkRemoteAccess').checked; + config.EnableAutomaticPortMapping = page.querySelector('#chkEnableUpnp').checked; + apiClient.ajax({ + type: 'POST', + data: JSON.stringify(config), + url: apiClient.getUrl('Startup/RemoteAccess'), + contentType: 'application/json' + }).then(function () { + loading.hide(); + navigateToNextPage(); + }); +} + +function navigateToNextPage() { + Dashboard.navigate('wizardfinish.html'); +} + +function onSubmit(e) { + save(this); + e.preventDefault(); + return false; +} + +export default function (view, params) { + view.querySelector('.wizardSettingsForm').addEventListener('submit', onSubmit); + view.addEventListener('viewshow', function () { + document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); + }); + view.addEventListener('viewhide', function () { + document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); + }); +} diff --git a/src/controllers/wizard/remoteaccess.js b/src/controllers/wizard/remoteaccess.js deleted file mode 100644 index 400cd357f4..0000000000 --- a/src/controllers/wizard/remoteaccess.js +++ /dev/null @@ -1,39 +0,0 @@ -define(['loading', 'emby-checkbox', 'emby-button', 'emby-select'], function (loading) { - 'use strict'; - - function save(page) { - loading.show(); - var apiClient = ApiClient; - var config = {}; - config.EnableRemoteAccess = page.querySelector('#chkRemoteAccess').checked; - config.EnableAutomaticPortMapping = page.querySelector('#chkEnableUpnp').checked; - apiClient.ajax({ - type: 'POST', - data: config, - url: apiClient.getUrl('Startup/RemoteAccess') - }).then(function () { - loading.hide(); - navigateToNextPage(); - }); - } - - function navigateToNextPage() { - Dashboard.navigate('wizardfinish.html'); - } - - function onSubmit(e) { - save(this); - e.preventDefault(); - return false; - } - - return function (view, params) { - view.querySelector('.wizardSettingsForm').addEventListener('submit', onSubmit); - view.addEventListener('viewshow', function () { - document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); - }); - view.addEventListener('viewhide', function () { - document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); - }); - }; -}); diff --git a/src/controllers/wizard/settings.js b/src/controllers/wizard/settings.js deleted file mode 100644 index 2062e795a3..0000000000 --- a/src/controllers/wizard/settings.js +++ /dev/null @@ -1,84 +0,0 @@ -define(['loading', 'emby-checkbox', 'emby-button', 'emby-select'], function (loading) { - 'use strict'; - - function save(page) { - loading.show(); - var apiClient = ApiClient; - apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) { - config.PreferredMetadataLanguage = page.querySelector('#selectLanguage').value; - config.MetadataCountryCode = page.querySelector('#selectCountry').value; - apiClient.ajax({ - type: 'POST', - data: config, - url: apiClient.getUrl('Startup/Configuration') - }).then(function () { - loading.hide(); - navigateToNextPage(); - }); - }); - } - - function populateLanguages(select, languages) { - var html = ''; - html += ""; - - for (var i = 0, length = languages.length; i < length; i++) { - var culture = languages[i]; - html += "'; - } - - select.innerHTML = html; - } - - function populateCountries(select, allCountries) { - var html = ''; - html += ""; - - for (var i = 0, length = allCountries.length; i < length; i++) { - var culture = allCountries[i]; - html += "'; - } - - select.innerHTML = html; - } - - function reloadData(page, config, cultures, countries) { - populateLanguages(page.querySelector('#selectLanguage'), cultures); - populateCountries(page.querySelector('#selectCountry'), countries); - page.querySelector('#selectLanguage').value = config.PreferredMetadataLanguage; - page.querySelector('#selectCountry').value = config.MetadataCountryCode; - loading.hide(); - } - - function reload(page) { - loading.show(); - var apiClient = ApiClient; - var promise1 = apiClient.getJSON(apiClient.getUrl('Startup/Configuration')); - var promise2 = apiClient.getCultures(); - var promise3 = apiClient.getCountries(); - Promise.all([promise1, promise2, promise3]).then(function (responses) { - reloadData(page, responses[0], responses[1], responses[2]); - }); - } - - function navigateToNextPage() { - Dashboard.navigate('wizardremoteaccess.html'); - } - - function onSubmit(e) { - save(this); - e.preventDefault(); - return false; - } - - return function (view, params) { - view.querySelector('.wizardSettingsForm').addEventListener('submit', onSubmit); - view.addEventListener('viewshow', function () { - document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); - reload(this); - }); - view.addEventListener('viewhide', function () { - document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); - }); - }; -}); diff --git a/src/wizardsettings.html b/src/controllers/wizard/settings/index.html similarity index 92% rename from src/wizardsettings.html rename to src/controllers/wizard/settings/index.html index d4f537cf98..d1f557d8f1 100644 --- a/src/wizardsettings.html +++ b/src/controllers/wizard/settings/index.html @@ -17,10 +17,10 @@
diff --git a/src/controllers/wizard/settings/index.js b/src/controllers/wizard/settings/index.js new file mode 100644 index 0000000000..6e3a82cd9b --- /dev/null +++ b/src/controllers/wizard/settings/index.js @@ -0,0 +1,86 @@ +import loading from 'loading'; +import 'emby-checkbox'; +import 'emby-button'; +import 'emby-select'; + +function save(page) { + loading.show(); + const apiClient = ApiClient; + apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) { + config.PreferredMetadataLanguage = page.querySelector('#selectLanguage').value; + config.MetadataCountryCode = page.querySelector('#selectCountry').value; + apiClient.ajax({ + type: 'POST', + data: JSON.stringify(config), + url: apiClient.getUrl('Startup/Configuration'), + contentType: 'application/json' + }).then(function () { + loading.hide(); + navigateToNextPage(); + }); + }); +} + +function populateLanguages(select, languages) { + let html = ''; + html += ""; + + for (let i = 0, length = languages.length; i < length; i++) { + const culture = languages[i]; + html += "'; + } + + select.innerHTML = html; +} + +function populateCountries(select, allCountries) { + let html = ''; + html += ""; + + for (let i = 0, length = allCountries.length; i < length; i++) { + const culture = allCountries[i]; + html += "'; + } + + select.innerHTML = html; +} + +function reloadData(page, config, cultures, countries) { + populateLanguages(page.querySelector('#selectLanguage'), cultures); + populateCountries(page.querySelector('#selectCountry'), countries); + page.querySelector('#selectLanguage').value = config.PreferredMetadataLanguage; + page.querySelector('#selectCountry').value = config.MetadataCountryCode; + loading.hide(); +} + +function reload(page) { + loading.show(); + const apiClient = ApiClient; + const promise1 = apiClient.getJSON(apiClient.getUrl('Startup/Configuration')); + const promise2 = apiClient.getCultures(); + const promise3 = apiClient.getCountries(); + Promise.all([promise1, promise2, promise3]).then(function (responses) { + reloadData(page, responses[0], responses[1], responses[2]); + }); +} + +function navigateToNextPage() { + Dashboard.navigate('wizardremoteaccess.html'); +} + +function onSubmit(e) { + save(this); + e.preventDefault(); + return false; +} + +export default function (view, params) { + view.querySelector('.wizardSettingsForm').addEventListener('submit', onSubmit); + view.addEventListener('viewshow', function () { + document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); + reload(this); + }); + view.addEventListener('viewhide', function () { + document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); + }); +} diff --git a/src/controllers/wizard/start.js b/src/controllers/wizard/start.js deleted file mode 100644 index b7fb920d45..0000000000 --- a/src/controllers/wizard/start.js +++ /dev/null @@ -1,48 +0,0 @@ -define(['jQuery', 'loading', 'emby-button', 'emby-select'], function ($, loading) { - 'use strict'; - - function loadPage(page, config, languageOptions) { - $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) { - return ''; - })).val(config.UICulture); - loading.hide(); - } - - function save(page) { - loading.show(); - var apiClient = ApiClient; - apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) { - config.UICulture = $('#selectLocalizationLanguage', page).val(); - apiClient.ajax({ - type: 'POST', - data: config, - url: apiClient.getUrl('Startup/Configuration') - }).then(function () { - Dashboard.navigate('wizarduser.html'); - }); - }); - } - - function onSubmit() { - save($(this).parents('.page')); - return false; - } - - return function (view, params) { - $('.wizardStartForm', view).on('submit', onSubmit); - view.addEventListener('viewshow', function () { - document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); - loading.show(); - var page = this; - var apiClient = ApiClient; - var promise1 = apiClient.getJSON(apiClient.getUrl('Startup/Configuration')); - var promise2 = apiClient.getJSON(apiClient.getUrl('Localization/Options')); - Promise.all([promise1, promise2]).then(function (responses) { - loadPage(page, responses[0], responses[1]); - }); - }); - view.addEventListener('viewhide', function () { - document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); - }); - }; -}); diff --git a/src/wizardstart.html b/src/controllers/wizard/start/index.html similarity index 96% rename from src/wizardstart.html rename to src/controllers/wizard/start/index.html index 05e282bee3..5306d2ca73 100644 --- a/src/wizardstart.html +++ b/src/controllers/wizard/start/index.html @@ -19,7 +19,7 @@
diff --git a/src/controllers/wizard/start/index.js b/src/controllers/wizard/start/index.js new file mode 100644 index 0000000000..3cd53b4ceb --- /dev/null +++ b/src/controllers/wizard/start/index.js @@ -0,0 +1,50 @@ +import $ from 'jQuery'; +import loading from 'loading'; +import 'emby-button'; +import 'emby-select'; + +function loadPage(page, config, languageOptions) { + $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) { + return ''; + })).val(config.UICulture); + loading.hide(); +} + +function save(page) { + loading.show(); + const apiClient = ApiClient; + apiClient.getJSON(apiClient.getUrl('Startup/Configuration')).then(function (config) { + config.UICulture = $('#selectLocalizationLanguage', page).val(); + apiClient.ajax({ + type: 'POST', + data: JSON.stringify(config), + url: apiClient.getUrl('Startup/Configuration'), + contentType: 'application/json' + }).then(function () { + Dashboard.navigate('wizarduser.html'); + }); + }); +} + +function onSubmit() { + save($(this).parents('.page')); + return false; +} + +export default function (view, params) { + $('.wizardStartForm', view).on('submit', onSubmit); + view.addEventListener('viewshow', function () { + document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); + loading.show(); + const page = this; + const apiClient = ApiClient; + const promise1 = apiClient.getJSON(apiClient.getUrl('Startup/Configuration')); + const promise2 = apiClient.getJSON(apiClient.getUrl('Localization/Options')); + Promise.all([promise1, promise2]).then(function (responses) { + loadPage(page, responses[0], responses[1]); + }); + }); + view.addEventListener('viewhide', function () { + document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); + }); +} diff --git a/src/controllers/wizard/user.js b/src/controllers/wizard/user.js deleted file mode 100644 index e62edef9fe..0000000000 --- a/src/controllers/wizard/user.js +++ /dev/null @@ -1,67 +0,0 @@ -define(['loading', 'globalize', 'dashboardcss', 'emby-input', 'emby-button', 'emby-button'], function (loading, globalize) { - 'use strict'; - - function getApiClient() { - return ApiClient; - } - - function nextWizardPage() { - Dashboard.navigate('wizardlibrary.html'); - } - - function onUpdateUserComplete(result) { - console.debug('user update complete: ' + result); - loading.hide(); - nextWizardPage(); - } - - function submit(form) { - loading.show(); - var apiClient = getApiClient(); - apiClient.ajax({ - type: 'POST', - data: { - Name: form.querySelector('#txtUsername').value, - Password: form.querySelector('#txtManualPassword').value - }, - url: apiClient.getUrl('Startup/User') - }).then(onUpdateUserComplete); - } - - function onSubmit(e) { - var form = this; - - if (form.querySelector('#txtManualPassword').value != form.querySelector('#txtPasswordConfirm').value) { - require(['toast'], function (toast) { - toast(globalize.translate('PasswordMatchError')); - }); - } else { - submit(form); - } - - e.preventDefault(); - return false; - } - - function onViewShow() { - loading.show(); - var page = this; - var apiClient = getApiClient(); - apiClient.getJSON(apiClient.getUrl('Startup/User')).then(function (user) { - page.querySelector('#txtUsername').value = user.Name || ''; - page.querySelector('#txtManualPassword').value = user.Password || ''; - loading.hide(); - }); - } - - return function (view, params) { - view.querySelector('.wizardUserForm').addEventListener('submit', onSubmit); - view.addEventListener('viewshow', function () { - document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); - }); - view.addEventListener('viewhide', function () { - document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); - }); - view.addEventListener('viewshow', onViewShow); - }; -}); diff --git a/src/wizarduser.html b/src/controllers/wizard/user/index.html similarity index 94% rename from src/wizarduser.html rename to src/controllers/wizard/user/index.html index 3ce0b3ba74..24429d043a 100644 --- a/src/wizarduser.html +++ b/src/controllers/wizard/user/index.html @@ -23,10 +23,10 @@
diff --git a/src/controllers/wizard/user/index.js b/src/controllers/wizard/user/index.js new file mode 100644 index 0000000000..ec587fec8e --- /dev/null +++ b/src/controllers/wizard/user/index.js @@ -0,0 +1,70 @@ +import loading from 'loading'; +import globalize from 'globalize'; +import 'dashboardcss'; +import 'emby-input'; +import 'emby-button'; + +function getApiClient() { + return ApiClient; +} + +function nextWizardPage() { + Dashboard.navigate('wizardlibrary.html'); +} + +function onUpdateUserComplete(result) { + console.debug('user update complete: ' + result); + loading.hide(); + nextWizardPage(); +} + +function submit(form) { + loading.show(); + const apiClient = getApiClient(); + apiClient.ajax({ + type: 'POST', + data: JSON.stringify({ + Name: form.querySelector('#txtUsername').value, + Password: form.querySelector('#txtManualPassword').value + }), + url: apiClient.getUrl('Startup/User'), + contentType: 'application/json' + }).then(onUpdateUserComplete); +} + +function onSubmit(e) { + const form = this; + + if (form.querySelector('#txtManualPassword').value != form.querySelector('#txtPasswordConfirm').value) { + import('toast').then(({default: toast}) => { + toast(globalize.translate('PasswordMatchError')); + }); + } else { + submit(form); + } + + e.preventDefault(); + return false; +} + +function onViewShow() { + loading.show(); + const page = this; + const apiClient = getApiClient(); + apiClient.getJSON(apiClient.getUrl('Startup/User')).then(function (user) { + page.querySelector('#txtUsername').value = user.Name || ''; + page.querySelector('#txtManualPassword').value = user.Password || ''; + loading.hide(); + }); +} + +export default function (view, params) { + view.querySelector('.wizardUserForm').addEventListener('submit', onSubmit); + view.addEventListener('viewshow', function () { + document.querySelector('.skinHeader').classList.add('noHomeButtonHeader'); + }); + view.addEventListener('viewhide', function () { + document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader'); + }); + view.addEventListener('viewshow', onViewShow); +} diff --git a/src/elements/emby-button/emby-button.js b/src/elements/emby-button/emby-button.js index be52b1d512..213bbc8e7f 100644 --- a/src/elements/emby-button/emby-button.js +++ b/src/elements/emby-button/emby-button.js @@ -1,70 +1,74 @@ -define(['browser', 'dom', 'layoutManager', 'shell', 'appRouter', 'apphost', 'css!./emby-button', 'registerElement'], function (browser, dom, layoutManager, shell, appRouter, appHost) { - 'use strict'; +import dom from 'dom'; +import layoutManager from 'layoutManager'; +import shell from 'shell'; +import appRouter from 'appRouter'; +import appHost from 'apphost'; +import 'css!./emby-button'; +import 'webcomponents'; - var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); - var EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype); +const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); +const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype); - function onAnchorClick(e) { - var href = this.getAttribute('href') || ''; - if (href !== '#') { - if (this.getAttribute('target')) { - if (!appHost.supports('targetblank')) { - e.preventDefault(); - shell.openUrl(href); - } - } else { - appRouter.handleAnchorClick(e); +function onAnchorClick(e) { + const href = this.getAttribute('href') || ''; + if (href !== '#') { + if (this.getAttribute('target')) { + if (!appHost.supports('targetblank')) { + e.preventDefault(); + shell.openUrl(href); } } else { - e.preventDefault(); + appRouter.handleAnchorClick(e); } + } else { + e.preventDefault(); + } +} + +EmbyButtonPrototype.createdCallback = function () { + if (this.classList.contains('emby-button')) { + return; } - EmbyButtonPrototype.createdCallback = function () { - if (this.classList.contains('emby-button')) { - return; - } + this.classList.add('emby-button'); + // TODO replace all instances of element-showfocus with this method + if (layoutManager.tv) { + // handles all special css for tv layout + // this method utilizes class chaining + this.classList.add('show-focus'); + } +}; - this.classList.add('emby-button'); - // TODO replace all instances of element-showfocus with this method - if (layoutManager.tv) { - // handles all special css for tv layout - // this method utilizes class chaining - this.classList.add('show-focus'); - } - }; +EmbyButtonPrototype.attachedCallback = function () { + if (this.tagName === 'A') { + dom.removeEventListener(this, 'click', onAnchorClick, {}); + dom.addEventListener(this, 'click', onAnchorClick, {}); - EmbyButtonPrototype.attachedCallback = function () { - if (this.tagName === 'A') { - dom.removeEventListener(this, 'click', onAnchorClick, {}); - dom.addEventListener(this, 'click', onAnchorClick, {}); - - if (this.getAttribute('data-autohide') === 'true') { - if (appHost.supports('externallinks')) { - this.classList.remove('hide'); - } else { - this.classList.add('hide'); - } + if (this.getAttribute('data-autohide') === 'true') { + if (appHost.supports('externallinks')) { + this.classList.remove('hide'); + } else { + this.classList.add('hide'); } } - }; + } +}; - EmbyButtonPrototype.detachedCallback = function () { - dom.removeEventListener(this, 'click', onAnchorClick, {}); - }; +EmbyButtonPrototype.detachedCallback = function () { + dom.removeEventListener(this, 'click', onAnchorClick, {}); +}; - EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback; - EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback; +EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback; +EmbyLinkButtonPrototype.attachedCallback = EmbyButtonPrototype.attachedCallback; - document.registerElement('emby-button', { - prototype: EmbyButtonPrototype, - extends: 'button' - }); - - document.registerElement('emby-linkbutton', { - prototype: EmbyLinkButtonPrototype, - extends: 'a' - }); - - return EmbyButtonPrototype; +document.registerElement('emby-button', { + prototype: EmbyButtonPrototype, + extends: 'button' }); + +document.registerElement('emby-linkbutton', { + prototype: EmbyLinkButtonPrototype, + extends: 'a' +}); + +export default EmbyButtonPrototype; diff --git a/src/elements/emby-button/paper-icon-button-light.js b/src/elements/emby-button/paper-icon-button-light.js index 7eda76baec..f6c754fedb 100644 --- a/src/elements/emby-button/paper-icon-button-light.js +++ b/src/elements/emby-button/paper-icon-button-light.js @@ -1,18 +1,18 @@ -define(['layoutManager', 'css!./emby-button', 'registerElement'], function (layoutManager) { - 'use strict'; +import layoutManager from 'layoutManager'; +import 'css!./emby-button'; +import 'webcomponents'; - var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); +const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); - EmbyButtonPrototype.createdCallback = function () { - this.classList.add('paper-icon-button-light'); +EmbyButtonPrototype.createdCallback = function () { + this.classList.add('paper-icon-button-light'); - if (layoutManager.tv) { - this.classList.add('show-focus'); - } - }; + if (layoutManager.tv) { + this.classList.add('show-focus'); + } +}; - document.registerElement('paper-icon-button-light', { - prototype: EmbyButtonPrototype, - extends: 'button' - }); +document.registerElement('paper-icon-button-light', { + prototype: EmbyButtonPrototype, + extends: 'button' }); diff --git a/src/elements/emby-checkbox/emby-checkbox.js b/src/elements/emby-checkbox/emby-checkbox.js index 4d02d56163..d44c58ed48 100644 --- a/src/elements/emby-checkbox/emby-checkbox.js +++ b/src/elements/emby-checkbox/emby-checkbox.js @@ -1,12 +1,16 @@ -define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (browser, dom) { - 'use strict'; +import browser from 'browser'; +import dom from 'dom'; +import 'css!./emby-checkbox'; +import 'webcomponents'; - var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype); +/* eslint-disable indent */ + + const EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype); function onKeyDown(e) { // Don't submit form on enter // Real (non-emulator) Tizen does nothing on Space - if (e.keyCode === 13 || e.keyCode === 32) { + if (e.keyCode === 13 || (e.keyCode === 32 && browser.tizen)) { e.preventDefault(); this.checked = !this.checked; @@ -19,10 +23,10 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b } } - var enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false; + const enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false; function forceRefresh(loading) { - var elem = this.parentNode; + const elem = this.parentNode; elem.style.webkitAnimationName = 'repaintChrome'; elem.style.webkitAnimationDelay = (loading === true ? '500ms' : ''); @@ -43,22 +47,22 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b this.classList.add('emby-checkbox'); - var labelElement = this.parentNode; + const labelElement = this.parentNode; labelElement.classList.add('emby-checkbox-label'); - var labelTextElement = labelElement.querySelector('span'); + const labelTextElement = labelElement.querySelector('span'); - var outlineClass = 'checkboxOutline'; + let outlineClass = 'checkboxOutline'; - var customClass = this.getAttribute('data-outlineclass'); + const customClass = this.getAttribute('data-outlineclass'); if (customClass) { outlineClass += ' ' + customClass; } - var checkedIcon = this.getAttribute('data-checkedicon') || 'check'; - var uncheckedIcon = this.getAttribute('data-uncheckedicon') || ''; - var checkHtml = ''; - var uncheckedHtml = ''; + const checkedIcon = this.getAttribute('data-checkedicon') || 'check'; + const uncheckedIcon = this.getAttribute('data-uncheckedicon') || ''; + const checkHtml = ''; + const uncheckedHtml = ''; labelElement.insertAdjacentHTML('beforeend', '' + checkHtml + uncheckedHtml + ''); labelTextElement.classList.add('checkboxLabel'); @@ -103,4 +107,5 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b prototype: EmbyCheckboxPrototype, extends: 'input' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-collapse/emby-collapse.js b/src/elements/emby-collapse/emby-collapse.js index 707e81a786..c87e73d48f 100644 --- a/src/elements/emby-collapse/emby-collapse.js +++ b/src/elements/emby-collapse/emby-collapse.js @@ -1,60 +1,62 @@ -define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], function (browser) { - 'use strict'; +import 'css!./emby-collapse'; +import 'webcomponents'; +import 'emby-button'; - var EmbyButtonPrototype = Object.create(HTMLDivElement.prototype); +/* eslint-disable indent */ + + const EmbyButtonPrototype = Object.create(HTMLDivElement.prototype); function slideDownToShow(button, elem) { - - elem.classList.remove('hide'); - elem.classList.add('expanded'); - elem.style.height = 'auto'; - var height = elem.offsetHeight + 'px'; - elem.style.height = '0'; - - // trigger reflow - var newHeight = elem.offsetHeight; - elem.style.height = height; - - setTimeout(function () { - if (elem.classList.contains('expanded')) { - elem.classList.remove('hide'); - } else { - elem.classList.add('hide'); - } + requestAnimationFrame(() => { + elem.classList.remove('hide'); + elem.classList.add('expanded'); elem.style.height = 'auto'; - }, 300); + const height = elem.offsetHeight + 'px'; + elem.style.height = '0'; + // trigger reflow + // TODO: Find a better way to do this + const newHeight = elem.offsetHeight; /* eslint-disable-line no-unused-vars */ + elem.style.height = height; - var icon = button.querySelector('.material-icons'); - //icon.innerHTML = 'expand_less'; - icon.classList.add('emby-collapse-expandIconExpanded'); + setTimeout(function () { + if (elem.classList.contains('expanded')) { + elem.classList.remove('hide'); + } else { + elem.classList.add('hide'); + } + elem.style.height = 'auto'; + }, 300); + + const icon = button.querySelector('.material-icons'); + icon.classList.add('emby-collapse-expandIconExpanded'); + }); } function slideUpToHide(button, elem) { + requestAnimationFrame(() => { + elem.style.height = elem.offsetHeight + 'px'; + // trigger reflow + // TODO: Find a better way to do this + const newHeight = elem.offsetHeight; /* eslint-disable-line no-unused-vars */ + elem.classList.remove('expanded'); + elem.style.height = '0'; - elem.style.height = elem.offsetHeight + 'px'; - // trigger reflow - var newHeight = elem.offsetHeight; + setTimeout(function () { + if (elem.classList.contains('expanded')) { + elem.classList.remove('hide'); + } else { + elem.classList.add('hide'); + } + }, 300); - elem.classList.remove('expanded'); - elem.style.height = '0'; - - setTimeout(function () { - if (elem.classList.contains('expanded')) { - elem.classList.remove('hide'); - } else { - elem.classList.add('hide'); - } - }, 300); - - var icon = button.querySelector('.material-icons'); - //icon.innerHTML = 'expand_more'; - icon.classList.remove('emby-collapse-expandIconExpanded'); + const icon = button.querySelector('.material-icons'); + icon.classList.remove('emby-collapse-expandIconExpanded'); + }); } function onButtonClick(e) { - - var button = this; - var collapseContent = button.parentNode.querySelector('.collapseContent'); + const button = this; + const collapseContent = button.parentNode.querySelector('.collapseContent'); if (collapseContent.expanded) { collapseContent.expanded = false; @@ -66,25 +68,24 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun } EmbyButtonPrototype.attachedCallback = function () { - if (this.classList.contains('emby-collapse')) { return; } this.classList.add('emby-collapse'); - var collapseContent = this.querySelector('.collapseContent'); + const collapseContent = this.querySelector('.collapseContent'); if (collapseContent) { collapseContent.classList.add('hide'); } - var title = this.getAttribute('title'); + const title = this.getAttribute('title'); - var html = ''; + const html = ''; this.insertAdjacentHTML('afterbegin', html); - var button = this.querySelector('.emby-collapsible-button'); + const button = this.querySelector('.emby-collapsible-button'); button.addEventListener('click', onButtonClick); @@ -97,4 +98,5 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun prototype: EmbyButtonPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-input/emby-input.js b/src/elements/emby-input/emby-input.js index 1cef349bf0..3a71e29a6f 100644 --- a/src/elements/emby-input/emby-input.js +++ b/src/elements/emby-input/emby-input.js @@ -1,18 +1,21 @@ -define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement'], function (layoutManager, browser, dom) { - 'use strict'; +import browser from 'browser'; +import dom from 'dom'; +import 'css!./emby-input'; +import 'webcomponents'; - var EmbyInputPrototype = Object.create(HTMLInputElement.prototype); +/* eslint-disable indent */ - var inputId = 0; - var supportsFloatingLabel = false; + const EmbyInputPrototype = Object.create(HTMLInputElement.prototype); + + let inputId = 0; + let supportsFloatingLabel = false; if (Object.getOwnPropertyDescriptor && Object.defineProperty) { - - var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value'); + const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value'); // descriptor returning null in webos if (descriptor && descriptor.configurable) { - var baseSetMethod = descriptor.set; + const baseSetMethod = descriptor.set; descriptor.set = function (value) { baseSetMethod.call(this, value); @@ -39,9 +42,9 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement' this.classList.add('emby-input'); - var parentNode = this.parentNode; - var document = this.ownerDocument; - var label = document.createElement('label'); + const parentNode = this.parentNode; + const document = this.ownerDocument; + const label = document.createElement('label'); label.innerHTML = this.getAttribute('label') || ''; label.classList.add('inputLabel'); label.classList.add('inputLabelUnfocused'); @@ -90,17 +93,14 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement' } } } - }; function onChange() { - - var label = this.labelElement; + const label = this.labelElement; if (this.value) { label.classList.remove('inputLabel-float'); } else { - - var instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time'; + const instanceSupportsFloat = supportsFloatingLabel && this.type !== 'date' && this.type !== 'time'; if (instanceSupportsFloat) { label.classList.add('inputLabel-float'); @@ -121,4 +121,5 @@ define(['layoutManager', 'browser', 'dom', 'css!./emby-input', 'registerElement' prototype: EmbyInputPrototype, extends: 'input' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js index 9864dbbb67..51f3fc5be9 100644 --- a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js +++ b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js @@ -1,16 +1,19 @@ -define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerElement'], function (EmbyProgressRing, dom, serverNotifications, events) { - 'use strict'; +import EmbyProgressRing from 'emby-progressring'; +import dom from 'dom'; +import serverNotifications from 'serverNotifications'; +import events from 'events'; +import 'webcomponents'; + +/* eslint-disable indent */ function addNotificationEvent(instance, name, handler) { - - var localHandler = handler.bind(instance); + const localHandler = handler.bind(instance); events.on(serverNotifications, name, localHandler); instance[name] = localHandler; } function removeNotificationEvent(instance, name) { - - var handler = instance[name]; + const handler = instance[name]; if (handler) { events.off(serverNotifications, name, handler); instance[name] = null; @@ -18,16 +21,14 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl } function onRefreshProgress(e, apiClient, info) { - - var indicator = this; + const indicator = this; if (!indicator.itemId) { indicator.itemId = dom.parentWithAttribute(indicator, 'data-id').getAttribute('data-id'); } if (info.ItemId === indicator.itemId) { - - var progress = parseFloat(info.Progress); + const progress = parseFloat(info.Progress); if (progress && progress < 100) { this.classList.remove('hide'); @@ -35,14 +36,13 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl this.classList.add('hide'); } - this.setProgress(progress); + this.setAttribute('data-progress', progress); } } - var EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing); + const EmbyItemRefreshIndicatorPrototype = Object.create(EmbyProgressRing); EmbyItemRefreshIndicatorPrototype.createdCallback = function () { - // base method if (EmbyProgressRing.createdCallback) { EmbyProgressRing.createdCallback.call(this); @@ -52,7 +52,6 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl }; EmbyItemRefreshIndicatorPrototype.attachedCallback = function () { - // base method if (EmbyProgressRing.attachedCallback) { EmbyProgressRing.attachedCallback.call(this); @@ -60,7 +59,6 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl }; EmbyItemRefreshIndicatorPrototype.detachedCallback = function () { - // base method if (EmbyProgressRing.detachedCallback) { EmbyProgressRing.detachedCallback.call(this); @@ -74,4 +72,5 @@ define(['emby-progressring', 'dom', 'serverNotifications', 'events', 'registerEl prototype: EmbyItemRefreshIndicatorPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-itemscontainer/emby-itemscontainer.js b/src/elements/emby-itemscontainer/emby-itemscontainer.js index 5d3772ca93..7d8f941603 100644 --- a/src/elements/emby-itemscontainer/emby-itemscontainer.js +++ b/src/elements/emby-itemscontainer/emby-itemscontainer.js @@ -1,12 +1,23 @@ -define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', 'imageLoader', 'layoutManager', 'browser', 'dom', 'loading', 'focusManager', 'serverNotifications', 'events', 'registerElement'], function (itemShortcuts, inputManager, connectionManager, playbackManager, imageLoader, layoutManager, browser, dom, loading, focusManager, serverNotifications, events) { - 'use strict'; +import itemShortcuts from 'itemShortcuts'; +import inputManager from 'inputManager'; +import playbackManager from 'playbackManager'; +import imageLoader from 'imageLoader'; +import layoutManager from 'layoutManager'; +import browser from 'browser'; +import dom from 'dom'; +import loading from 'loading'; +import focusManager from 'focusManager'; +import serverNotifications from 'serverNotifications'; +import events from 'events'; +import 'webcomponents'; - var ItemsContainerPrototype = Object.create(HTMLDivElement.prototype); +/* eslint-disable indent */ + + const ItemsContainerPrototype = Object.create(HTMLDivElement.prototype); function onClick(e) { - var itemsContainer = this; - var target = e.target; - var multiSelect = itemsContainer.multiSelect; + const itemsContainer = this; + const multiSelect = itemsContainer.multiSelect; if (multiSelect) { if (multiSelect.onContainerClick.call(itemsContainer, e) === false) { @@ -24,13 +35,12 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function onContextMenu(e) { - var itemsContainer = this; - var target = e.target; - var card = dom.parentWithAttribute(target, 'data-id'); + const target = e.target; + const card = dom.parentWithAttribute(target, 'data-id'); // check for serverId, it won't be present on selectserver if (card && card.getAttribute('data-serverid')) { - inputManager.trigger('menu', { + inputManager.handleCommand('menu', { sourceElement: card }); @@ -47,7 +57,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } ItemsContainerPrototype.enableMultiSelect = function (enabled) { - var current = this.multiSelect; + const current = this.multiSelect; if (!enabled) { if (current) { @@ -61,8 +71,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return; } - var self = this; - require(['multiSelect'], function (MultiSelect) { + const self = this; + import('multiSelect').then(({default: MultiSelect}) => { self.multiSelect = new MultiSelect({ container: self, bindOnClick: false @@ -71,14 +81,14 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', }; function onDrop(evt, itemsContainer) { - var el = evt.item; + const el = evt.item; - var newIndex = evt.newIndex; - var itemId = el.getAttribute('data-playlistitemid'); - var playlistId = el.getAttribute('data-playlistid'); + const newIndex = evt.newIndex; + const itemId = el.getAttribute('data-playlistitemid'); + const playlistId = el.getAttribute('data-playlistid'); if (!playlistId) { - var oldIndex = evt.oldIndex; + const oldIndex = evt.oldIndex; el.dispatchEvent(new CustomEvent('itemdrop', { detail: { oldIndex: oldIndex, @@ -91,8 +101,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return; } - var serverId = el.getAttribute('data-serverid'); - var apiClient = connectionManager.getApiClient(serverId); + const serverId = el.getAttribute('data-serverid'); + const apiClient = window.connectionManager.getApiClient(serverId); loading.show(); @@ -108,7 +118,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } ItemsContainerPrototype.enableDragReordering = function (enabled) { - var current = this.sortable; + const current = this.sortable; if (!enabled) { if (current) { current.destroy(); @@ -121,8 +131,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return; } - var self = this; - require(['sortable'], function (Sortable) { + const self = this; + import('sortable').then(({default: Sortable}) => { self.sortable = new Sortable(self, { draggable: '.listItem', handle: '.listViewDragHandle', @@ -136,14 +146,13 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', }; function onUserDataChanged(e, apiClient, userData) { + const itemsContainer = this; - var itemsContainer = this; - - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onUserDataChanged(userData, itemsContainer); }); - var eventsToMonitor = getEventsToMonitor(itemsContainer); + const eventsToMonitor = getEventsToMonitor(itemsContainer); // TODO: Check user data change reason? if (eventsToMonitor.indexOf('markfavorite') !== -1) { @@ -154,7 +163,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function getEventsToMonitor(itemsContainer) { - var monitor = itemsContainer.getAttribute('data-monitor'); + const monitor = itemsContainer.getAttribute('data-monitor'); if (monitor) { return monitor.split(','); } @@ -163,25 +172,24 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function onTimerCreated(e, apiClient, data) { - - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; } - var programId = data.ProgramId; + const programId = data.ProgramId; // This could be null, not supported by all tv providers - var newTimerId = data.Id; + const newTimerId = data.Id; - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onTimerCreated(programId, newTimerId, itemsContainer); }); } function onSeriesTimerCreated(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; @@ -189,49 +197,49 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function onTimerCancelled(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; } - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onTimerCancelled(data.Id, itemsContainer); }); } function onSeriesTimerCancelled(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; } - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onSeriesTimerCancelled(data.Id, itemsContainer); }); } function onLibraryChanged(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; - var eventsToMonitor = getEventsToMonitor(itemsContainer); + const eventsToMonitor = getEventsToMonitor(itemsContainer); if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) { // yes this is an assumption return; } - var itemsAdded = data.ItemsAdded || []; - var itemsRemoved = data.ItemsRemoved || []; + const itemsAdded = data.ItemsAdded || []; + const itemsRemoved = data.ItemsRemoved || []; if (!itemsAdded.length && !itemsRemoved.length) { return; } - var parentId = itemsContainer.getAttribute('data-parentid'); + const parentId = itemsContainer.getAttribute('data-parentid'); if (parentId) { - var foldersAddedTo = data.FoldersAddedTo || []; - var foldersRemovedFrom = data.FoldersRemovedFrom || []; - var collectionFolders = data.CollectionFolders || []; + const foldersAddedTo = data.FoldersAddedTo || []; + const foldersRemovedFrom = data.FoldersRemovedFrom || []; + const collectionFolders = data.CollectionFolders || []; if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) { return; @@ -242,10 +250,10 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function onPlaybackStopped(e, stopInfo) { - var itemsContainer = this; - var state = stopInfo.state; + const itemsContainer = this; + const state = stopInfo.state; - var eventsToMonitor = getEventsToMonitor(itemsContainer); + const eventsToMonitor = getEventsToMonitor(itemsContainer); if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') { if (eventsToMonitor.indexOf('videoplayback') !== -1) { itemsContainer.notifyRefreshNeeded(true); @@ -260,14 +268,14 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function addNotificationEvent(instance, name, handler, owner) { - var localHandler = handler.bind(instance); + const localHandler = handler.bind(instance); owner = owner || serverNotifications; events.on(owner, name, localHandler); instance['event_' + name] = localHandler; } function removeNotificationEvent(instance, name, owner) { - var handler = instance['event_' + name]; + const handler = instance['event_' + name]; if (handler) { owner = owner || serverNotifications; events.off(owner, name, handler); @@ -347,10 +355,9 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', ItemsContainerPrototype.resume = function (options) { this.paused = false; - var refreshIntervalEndTime = this.refreshIntervalEndTime; + const refreshIntervalEndTime = this.refreshIntervalEndTime; if (refreshIntervalEndTime) { - - var remainingMs = refreshIntervalEndTime - new Date().getTime(); + const remainingMs = refreshIntervalEndTime - new Date().getTime(); if (remainingMs > 0 && !this.needsRefresh) { resetRefreshInterval(this, remainingMs); } else { @@ -387,7 +394,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return; } - var timeout = this.refreshTimeout; + const timeout = this.refreshTimeout; if (timeout) { clearTimeout(timeout); } @@ -424,9 +431,9 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function onDataFetched(result) { - var items = result.Items || result; + const items = result.Items || result; - var parentContainer = this.parentContainer; + const parentContainer = this.parentContainer; if (parentContainer) { if (items.length) { parentContainer.classList.remove('hide'); @@ -435,9 +442,9 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } } - var activeElement = document.activeElement; - var focusId; - var hasActiveElement; + const activeElement = document.activeElement; + let focusId; + let hasActiveElement; if (this.contains(activeElement)) { hasActiveElement = true; @@ -461,7 +468,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', function setFocus(itemsContainer, focusId) { if (focusId) { - var newElement = itemsContainer.querySelector('[data-id="' + focusId + '"]'); + const newElement = itemsContainer.querySelector('[data-id="' + focusId + '"]'); if (newElement) { try { focusManager.focus(newElement); @@ -479,4 +486,5 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', prototype: ItemsContainerPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-playstatebutton/emby-playstatebutton.js b/src/elements/emby-playstatebutton/emby-playstatebutton.js index 57f7eb76eb..8d17ddf9ff 100644 --- a/src/elements/emby-playstatebutton/emby-playstatebutton.js +++ b/src/elements/emby-playstatebutton/emby-playstatebutton.js @@ -1,14 +1,18 @@ -define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby-button'], function (connectionManager, serverNotifications, events, globalize, EmbyButtonPrototype) { - 'use strict'; +import serverNotifications from 'serverNotifications'; +import events from 'events'; +import globalize from 'globalize'; +import EmbyButtonPrototype from 'emby-button'; + +/* eslint-disable indent */ function addNotificationEvent(instance, name, handler) { - var localHandler = handler.bind(instance); + const localHandler = handler.bind(instance); events.on(serverNotifications, name, localHandler); instance[name] = localHandler; } function removeNotificationEvent(instance, name) { - var handler = instance[name]; + const handler = instance[name]; if (handler) { events.off(serverNotifications, name, handler); instance[name] = null; @@ -16,11 +20,10 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby } function onClick(e) { - - var button = this; - var id = button.getAttribute('data-id'); - var serverId = button.getAttribute('data-serverid'); - var apiClient = connectionManager.getApiClient(serverId); + const button = this; + const id = button.getAttribute('data-id'); + const serverId = button.getAttribute('data-serverid'); + const apiClient = window.connectionManager.getApiClient(serverId); if (!button.classList.contains('playstatebutton-played')) { apiClient.markPlayed(apiClient.getCurrentUserId(), id, new Date()); @@ -32,14 +35,14 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby } function onUserDataChanged(e, apiClient, userData) { - var button = this; + const button = this; if (userData.ItemId === button.getAttribute('data-id')) { setState(button, userData.Played); } } function setState(button, played, updateAttribute) { - var icon = button.iconElement; + let icon = button.iconElement; if (!icon) { button.iconElement = button.querySelector('.material-icons'); icon = button.iconElement; @@ -65,37 +68,33 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby } function setTitle(button, itemType) { - if (itemType !== 'AudioBook' && itemType !== 'AudioPodcast') { button.title = globalize.translate('Watched'); } else { button.title = globalize.translate('Played'); } - var text = button.querySelector('.button-text'); + const text = button.querySelector('.button-text'); if (text) { text.innerHTML = button.title; } } function clearEvents(button) { - button.removeEventListener('click', onClick); removeNotificationEvent(button, 'UserDataChanged'); } function bindEvents(button) { - clearEvents(button); button.addEventListener('click', onClick); addNotificationEvent(button, 'UserDataChanged', onUserDataChanged); } - var EmbyPlaystateButtonPrototype = Object.create(EmbyButtonPrototype); + const EmbyPlaystateButtonPrototype = Object.create(EmbyButtonPrototype); EmbyPlaystateButtonPrototype.createdCallback = function () { - // base method if (EmbyButtonPrototype.createdCallback) { EmbyButtonPrototype.createdCallback.call(this); @@ -103,16 +102,14 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby }; EmbyPlaystateButtonPrototype.attachedCallback = function () { - // base method if (EmbyButtonPrototype.attachedCallback) { EmbyButtonPrototype.attachedCallback.call(this); } - var itemId = this.getAttribute('data-id'); - var serverId = this.getAttribute('data-serverid'); + const itemId = this.getAttribute('data-id'); + const serverId = this.getAttribute('data-serverid'); if (itemId && serverId) { - setState(this, this.getAttribute('data-played') === 'true', false); bindEvents(this); setTitle(this, this.getAttribute('data-type')); @@ -120,7 +117,6 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby }; EmbyPlaystateButtonPrototype.detachedCallback = function () { - // base method if (EmbyButtonPrototype.detachedCallback) { EmbyButtonPrototype.detachedCallback.call(this); @@ -131,20 +127,16 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby }; EmbyPlaystateButtonPrototype.setItem = function (item) { - if (item) { - this.setAttribute('data-id', item.Id); this.setAttribute('data-serverid', item.ServerId); - var played = item.UserData && item.UserData.Played; + const played = item.UserData && item.UserData.Played; setState(this, played); bindEvents(this); setTitle(this, item.Type); - } else { - this.removeAttribute('data-id'); this.removeAttribute('data-serverid'); this.removeAttribute('data-played'); @@ -156,4 +148,5 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby prototype: EmbyPlaystateButtonPrototype, extends: 'button' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-programcell/emby-programcell.js b/src/elements/emby-programcell/emby-programcell.js index a959033186..d1f1820e5e 100644 --- a/src/elements/emby-programcell/emby-programcell.js +++ b/src/elements/emby-programcell/emby-programcell.js @@ -1,16 +1,12 @@ -define([], function() { - 'use strict'; +const ProgramCellPrototype = Object.create(HTMLButtonElement.prototype); - var ProgramCellPrototype = Object.create(HTMLButtonElement.prototype); +ProgramCellPrototype.detachedCallback = function () { + this.posLeft = null; + this.posWidth = null; + this.guideProgramName = null; +}; - ProgramCellPrototype.detachedCallback = function () { - this.posLeft = null; - this.posWidth = null; - this.guideProgramName = null; - }; - - document.registerElement('emby-programcell', { - prototype: ProgramCellPrototype, - extends: 'button' - }); +document.registerElement('emby-programcell', { + prototype: ProgramCellPrototype, + extends: 'button' }); diff --git a/src/elements/emby-progressbar/emby-progressbar.js b/src/elements/emby-progressbar/emby-progressbar.js index a799f82bdd..e232bbcde0 100644 --- a/src/elements/emby-progressbar/emby-progressbar.js +++ b/src/elements/emby-progressbar/emby-progressbar.js @@ -1,20 +1,19 @@ -define([], function() { - 'use strict'; +/* eslint-disable indent */ - var ProgressBarPrototype = Object.create(HTMLDivElement.prototype); + const ProgressBarPrototype = Object.create(HTMLDivElement.prototype); function onAutoTimeProgress() { - var start = parseInt(this.getAttribute('data-starttime')); - var end = parseInt(this.getAttribute('data-endtime')); + const start = parseInt(this.getAttribute('data-starttime')); + const end = parseInt(this.getAttribute('data-endtime')); - var now = new Date().getTime(); - var total = end - start; - var pct = 100 * ((now - start) / total); + const now = new Date().getTime(); + const total = end - start; + let pct = 100 * ((now - start) / total); pct = Math.min(100, pct); pct = Math.max(0, pct); - var itemProgressBarForeground = this.querySelector('.itemProgressBarForeground'); + const itemProgressBarForeground = this.querySelector('.itemProgressBarForeground'); itemProgressBarForeground.style.width = pct + '%'; } @@ -39,4 +38,5 @@ define([], function() { prototype: ProgressBarPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-progressring/emby-progressring.js b/src/elements/emby-progressring/emby-progressring.js index edc635947c..929b80a573 100644 --- a/src/elements/emby-progressring/emby-progressring.js +++ b/src/elements/emby-progressring/emby-progressring.js @@ -1,43 +1,42 @@ -define(['require', 'css!./emby-progressring', 'registerElement'], function (require) { - 'use strict'; +import 'css!./emby-progressring'; +import 'webcomponents'; - var EmbyProgressRing = Object.create(HTMLDivElement.prototype); +/* eslint-disable indent */ + + const EmbyProgressRing = Object.create(HTMLDivElement.prototype); EmbyProgressRing.createdCallback = function () { - this.classList.add('progressring'); - var instance = this; + const instance = this; - require(['text!./emby-progressring.template.html'], function (template) { + import('text!./emby-progressring.template.html').then(({default: template}) => { instance.innerHTML = template; - //if (window.MutationObserver) { - // // create an observer instance - // var observer = new MutationObserver(function (mutations) { - // mutations.forEach(function (mutation) { + if (window.MutationObserver) { + // create an observer instance + var observer = new MutationObserver(function (mutations) { + mutations.forEach(function (mutation) { + instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0')); + }); + }); - // instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0')); - // }); - // }); + // configuration of the observer: + var config = { attributes: true, childList: false, characterData: false }; - // // configuration of the observer: - // var config = { attributes: true, childList: false, characterData: false }; + // pass in the target node, as well as the observer options + observer.observe(instance, config); - // // pass in the target node, as well as the observer options - // observer.observe(instance, config); - - // instance.observer = observer; - //} + instance.observer = observer; + } instance.setProgress(parseFloat(instance.getAttribute('data-progress') || '0')); }); }; EmbyProgressRing.setProgress = function (progress) { - progress = Math.floor(progress); - var angle; + let angle; if (progress < 25) { angle = -90 + (progress / 100) * 360; @@ -48,7 +47,6 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ this.querySelector('.animate-50-75-b').style.transform = 'rotate(-90deg)'; this.querySelector('.animate-75-100-b').style.transform = 'rotate(-90deg)'; } else if (progress >= 25 && progress < 50) { - angle = -90 + ((progress - 25) / 100) * 360; this.querySelector('.animate-0-25-b').style.transform = 'none'; @@ -81,8 +79,7 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ }; EmbyProgressRing.detachedCallback = function () { - - var observer = this.observer; + const observer = this.observer; if (observer) { // later, you can stop observing @@ -97,5 +94,6 @@ define(['require', 'css!./emby-progressring', 'registerElement'], function (requ extends: 'div' }); - return EmbyProgressRing; -}); + export default EmbyProgressRing; + +/* eslint-enable indent */ diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js index 46a3e3826c..7c468a84a6 100644 --- a/src/elements/emby-radio/emby-radio.js +++ b/src/elements/emby-radio/emby-radio.js @@ -1,13 +1,16 @@ -define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) { - 'use strict'; +import layoutManager from 'layoutManager'; +import 'css!./emby-radio'; +import 'webcomponents'; +import browser from 'browser'; - var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype); +/* eslint-disable indent */ + + const EmbyRadioPrototype = Object.create(HTMLInputElement.prototype); function onKeyDown(e) { - // Don't submit form on enter // Real (non-emulator) Tizen does nothing on Space - if (e.keyCode === 13 || e.keyCode === 32) { + if (e.keyCode === 13 || (e.keyCode === 32 && browser.tizen)) { e.preventDefault(); if (!this.checked) { @@ -23,7 +26,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou } EmbyRadioPrototype.attachedCallback = function () { - var showFocus = !layoutManager.mobile; + const showFocus = !layoutManager.mobile; if (this.getAttribute('data-radio') === 'true') { return; @@ -33,8 +36,7 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou this.classList.add('mdl-radio__button'); - var labelElement = this.parentNode; - //labelElement.classList.add('"mdl-radio mdl-js-radio mdl-js-ripple-effect'); + const labelElement = this.parentNode; labelElement.classList.add('mdl-radio'); labelElement.classList.add('mdl-js-radio'); labelElement.classList.add('mdl-js-ripple-effect'); @@ -42,12 +44,12 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou labelElement.classList.add('show-focus'); } - var labelTextElement = labelElement.querySelector('span'); + const labelTextElement = labelElement.querySelector('span'); labelTextElement.classList.add('radioButtonLabel'); labelTextElement.classList.add('mdl-radio__label'); - var html = ''; + let html = ''; html += '
'; @@ -76,4 +78,5 @@ define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layou prototype: EmbyRadioPrototype, extends: 'input' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-ratingbutton/emby-ratingbutton.js b/src/elements/emby-ratingbutton/emby-ratingbutton.js index 142920ca15..865d918b45 100644 --- a/src/elements/emby-ratingbutton/emby-ratingbutton.js +++ b/src/elements/emby-ratingbutton/emby-ratingbutton.js @@ -1,16 +1,18 @@ -define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby-button'], function (connectionManager, serverNotifications, events, globalize, EmbyButtonPrototype) { - 'use strict'; +import serverNotifications from 'serverNotifications'; +import events from 'events'; +import globalize from 'globalize'; +import EmbyButtonPrototype from 'emby-button'; + +/* eslint-disable indent */ function addNotificationEvent(instance, name, handler) { - - var localHandler = handler.bind(instance); + const localHandler = handler.bind(instance); events.on(serverNotifications, name, localHandler); instance[name] = localHandler; } function removeNotificationEvent(instance, name) { - - var handler = instance[name]; + const handler = instance[name]; if (handler) { events.off(serverNotifications, name, handler); instance[name] = null; @@ -18,19 +20,17 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby } function showPicker(button, apiClient, itemId, likes, isFavorite) { - return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), itemId, !isFavorite); } function onClick(e) { + const button = this; + const id = button.getAttribute('data-id'); + const serverId = button.getAttribute('data-serverid'); + const apiClient = window.connectionManager.getApiClient(serverId); - var button = this; - var id = button.getAttribute('data-id'); - var serverId = button.getAttribute('data-serverid'); - var apiClient = connectionManager.getApiClient(serverId); - - var likes = this.getAttribute('data-likes'); - var isFavorite = this.getAttribute('data-isfavorite') === 'true'; + let likes = this.getAttribute('data-likes'); + const isFavorite = this.getAttribute('data-isfavorite') === 'true'; if (likes === 'true') { likes = true; } else if (likes === 'false') { @@ -40,58 +40,44 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby } showPicker(button, apiClient, id, likes, isFavorite).then(function (userData) { - setState(button, userData.Likes, userData.IsFavorite); }); } function onUserDataChanged(e, apiClient, userData) { - - var button = this; + const button = this; if (userData.ItemId === button.getAttribute('data-id')) { - setState(button, userData.Likes, userData.IsFavorite); } } function setState(button, likes, isFavorite, updateAttribute) { - - var icon = button.querySelector('.material-icons'); + const icon = button.querySelector('.material-icons'); if (isFavorite) { - if (icon) { icon.classList.add('favorite'); icon.classList.add('ratingbutton-icon-withrating'); } button.classList.add('ratingbutton-withrating'); - } else if (likes) { - if (icon) { icon.classList.add('favorite'); icon.classList.remove('ratingbutton-icon-withrating'); - //icon.innerHTML = 'thumb_up'; } button.classList.remove('ratingbutton-withrating'); - } else if (likes === false) { - if (icon) { icon.classList.add('favorite'); icon.classList.remove('ratingbutton-icon-withrating'); - //icon.innerHTML = 'thumb_down'; } button.classList.remove('ratingbutton-withrating'); - } else { - if (icon) { icon.classList.add('favorite'); icon.classList.remove('ratingbutton-icon-withrating'); - //icon.innerHTML = 'thumbs_up_down'; } button.classList.remove('ratingbutton-withrating'); } @@ -106,30 +92,27 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby function setTitle(button) { button.title = globalize.translate('Favorite'); - var text = button.querySelector('.button-text'); + const text = button.querySelector('.button-text'); if (text) { text.innerHTML = button.title; } } function clearEvents(button) { - button.removeEventListener('click', onClick); removeNotificationEvent(button, 'UserDataChanged'); } function bindEvents(button) { - clearEvents(button); button.addEventListener('click', onClick); addNotificationEvent(button, 'UserDataChanged', onUserDataChanged); } - var EmbyRatingButtonPrototype = Object.create(EmbyButtonPrototype); + const EmbyRatingButtonPrototype = Object.create(EmbyButtonPrototype); EmbyRatingButtonPrototype.createdCallback = function () { - // base method if (EmbyButtonPrototype.createdCallback) { EmbyButtonPrototype.createdCallback.call(this); @@ -137,18 +120,16 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby }; EmbyRatingButtonPrototype.attachedCallback = function () { - // base method if (EmbyButtonPrototype.attachedCallback) { EmbyButtonPrototype.attachedCallback.call(this); } - var itemId = this.getAttribute('data-id'); - var serverId = this.getAttribute('data-serverid'); + const itemId = this.getAttribute('data-id'); + const serverId = this.getAttribute('data-serverid'); if (itemId && serverId) { - - var likes = this.getAttribute('data-likes'); - var isFavorite = this.getAttribute('data-isfavorite') === 'true'; + let likes = this.getAttribute('data-likes'); + const isFavorite = this.getAttribute('data-isfavorite') === 'true'; if (likes === 'true') { likes = true; } else if (likes === 'false') { @@ -165,7 +146,6 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby }; EmbyRatingButtonPrototype.detachedCallback = function () { - // base method if (EmbyButtonPrototype.detachedCallback) { EmbyButtonPrototype.detachedCallback.call(this); @@ -175,18 +155,14 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby }; EmbyRatingButtonPrototype.setItem = function (item) { - if (item) { - this.setAttribute('data-id', item.Id); this.setAttribute('data-serverid', item.ServerId); - var userData = item.UserData || {}; + const userData = item.UserData || {}; setState(this, userData.Likes, userData.IsFavorite); bindEvents(this); - } else { - this.removeAttribute('data-id'); this.removeAttribute('data-serverid'); this.removeAttribute('data-likes'); @@ -199,4 +175,5 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby prototype: EmbyRatingButtonPrototype, extends: 'button' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js index a4c37384c8..f7665c0618 100644 --- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js +++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js @@ -1,13 +1,16 @@ -define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', 'paper-icon-button-light'], function (layoutManager, dom) { - 'use strict'; +import 'css!./emby-scrollbuttons'; +import 'webcomponents'; +import 'paper-icon-button-light'; - var EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype); +/* eslint-disable indent */ + +const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype); EmbyScrollButtonsPrototype.createdCallback = function () {}; function getScrollButtonHtml(direction) { - var html = ''; - var icon = direction === 'left' ? 'chevron_left' : 'chevron_right'; + let html = ''; + const icon = direction === 'left' ? 'chevron_left' : 'chevron_right'; html += '
-
+
+ +
diff --git a/src/legacy/fnchecked.js b/src/legacy/fnchecked.js deleted file mode 100644 index c3eff813e0..0000000000 --- a/src/legacy/fnchecked.js +++ /dev/null @@ -1,12 +0,0 @@ -define(['jQuery'], function($) { - 'use strict'; - $.fn.checked = function(value) { - return !0 === value || !1 === value ? $(this).each(function() { - this.checked = value; - }) : this.length && this[0].checked; - }; - - $.fn.checkboxradio = function() { - return this; - }; -}); diff --git a/src/legacy/selectmenu.js b/src/legacy/selectmenu.js deleted file mode 100644 index f4cc5466b1..0000000000 --- a/src/legacy/selectmenu.js +++ /dev/null @@ -1,6 +0,0 @@ -define(['jQuery'], function($) { - 'use strict'; - $.fn.selectmenu = function() { - return this; - }; -}); diff --git a/src/legacy/vendorStyles.js b/src/legacy/vendorStyles.js new file mode 100644 index 0000000000..74a90ba04d --- /dev/null +++ b/src/legacy/vendorStyles.js @@ -0,0 +1,34 @@ +// Polyfill for vendor prefixed style properties + +(function () { + const vendorProperties = { + 'transform': ['webkitTransform'], + 'transition': ['webkitTransition'] + }; + + const elem = document.createElement('div'); + + function polyfillProperty(name) { + if (!(name in elem.style)) { + (vendorProperties[name] || []).every((vendorName) => { + if (vendorName in elem.style) { + console.debug(`polyfill '${name}' with '${vendorName}'`); + + Object.defineProperty(CSSStyleDeclaration.prototype, name, { + get: function () { return this[vendorName]; }, + set: function (val) { this[vendorName] = val; } + }); + + return false; + } + + return true; + }); + } + } + + if (elem.style instanceof CSSStyleDeclaration) { + polyfillProperty('transform'); + polyfillProperty('transition'); + } +})(); diff --git a/src/libraries/navdrawer/navdrawer.js b/src/libraries/navdrawer/navdrawer.js index d9c246b406..965b68aee4 100644 --- a/src/libraries/navdrawer/navdrawer.js +++ b/src/libraries/navdrawer/navdrawer.js @@ -1,352 +1,357 @@ -define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, dom) { - "use strict"; +/* Cleaning this file properly is not neecessary, since it's an outdated library + * and will be replaced soon by a Vue component. + */ - return function (options) { - function getTouches(e) { - return e.changedTouches || e.targetTouches || e.touches; +import browser from 'browser'; +import dom from 'dom'; +import 'css!./navdrawer'; +import 'scrollStyles'; + +export default function (options) { + function getTouches(e) { + return e.changedTouches || e.targetTouches || e.touches; + } + + function onMenuTouchStart(e) { + options.target.classList.remove('transition'); + var touches = getTouches(e); + var touch = touches[0] || {}; + menuTouchStartX = touch.clientX; + menuTouchStartY = touch.clientY; + menuTouchStartTime = new Date().getTime(); + } + + function setVelocity(deltaX) { + var time = new Date().getTime() - (menuTouchStartTime || 0); + velocity = Math.abs(deltaX) / time; + } + + function onMenuTouchMove(e) { + var isOpen = self.visible; + var touches = getTouches(e); + var touch = touches[0] || {}; + var endX = touch.clientX || 0; + var endY = touch.clientY || 0; + var deltaX = endX - (menuTouchStartX || 0); + var deltaY = endY - (menuTouchStartY || 0); + setVelocity(deltaX); + + if (isOpen && dragMode !== 1 && deltaX > 0) { + dragMode = 2; } - function onMenuTouchStart(e) { - options.target.classList.remove("transition"); - var touches = getTouches(e); - var touch = touches[0] || {}; - menuTouchStartX = touch.clientX; - menuTouchStartY = touch.clientY; - menuTouchStartTime = new Date().getTime(); + if (dragMode === 0 && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) { + dragMode = 1; + scrollContainer.addEventListener('scroll', disableEvent); + self.showMask(); + } else if (dragMode === 0 && Math.abs(deltaY) >= 5) { + dragMode = 2; } - function setVelocity(deltaX) { - var time = new Date().getTime() - (menuTouchStartTime || 0); - velocity = Math.abs(deltaX) / time; + if (dragMode === 1) { + newPos = currentPos + deltaX; + self.changeMenuPos(); } + } - function onMenuTouchMove(e) { - var isOpen = self.visible; - var touches = getTouches(e); - var touch = touches[0] || {}; - var endX = touch.clientX || 0; - var endY = touch.clientY || 0; - var deltaX = endX - (menuTouchStartX || 0); - var deltaY = endY - (menuTouchStartY || 0); - setVelocity(deltaX); + function onMenuTouchEnd(e) { + options.target.classList.add('transition'); + scrollContainer.removeEventListener('scroll', disableEvent); + dragMode = 0; + var touches = getTouches(e); + var touch = touches[0] || {}; + var endX = touch.clientX || 0; + var endY = touch.clientY || 0; + var deltaX = endX - (menuTouchStartX || 0); + var deltaY = endY - (menuTouchStartY || 0); + currentPos = deltaX; + self.checkMenuState(deltaX, deltaY); + } - if (isOpen && 1 !== dragMode && deltaX > 0) { - dragMode = 2; - } + function onEdgeTouchStart(e) { + if (isPeeking) { + onMenuTouchMove(e); + } else { + if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) { + isPeeking = true; - if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) { - dragMode = 1; - scrollContainer.addEventListener("scroll", disableEvent); - self.showMask(); - } else if (0 === dragMode && Math.abs(deltaY) >= 5) { - dragMode = 2; - } - - if (1 === dragMode) { - newPos = currentPos + deltaX; - self.changeMenuPos(); - } - } - - function onMenuTouchEnd(e) { - options.target.classList.add("transition"); - scrollContainer.removeEventListener("scroll", disableEvent); - dragMode = 0; - var touches = getTouches(e); - var touch = touches[0] || {}; - var endX = touch.clientX || 0; - var endY = touch.clientY || 0; - var deltaX = endX - (menuTouchStartX || 0); - var deltaY = endY - (menuTouchStartY || 0); - currentPos = deltaX; - self.checkMenuState(deltaX, deltaY); - } - - function onEdgeTouchStart(e) { - if (isPeeking) { - onMenuTouchMove(e); - } else { - if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) { - isPeeking = true; - - if (e.type === "touchstart") { - dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}); - dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}); - } - - onMenuTouchStart(e); + if (e.type === 'touchstart') { + dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {}); + dom.addEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {}); } + + onMenuTouchStart(e); } } + } - function onEdgeTouchMove(e) { - e.preventDefault(); - e.stopPropagation(); - onEdgeTouchStart(e); + function onEdgeTouchMove(e) { + e.preventDefault(); + e.stopPropagation(); + onEdgeTouchStart(e); + } + + function onEdgeTouchEnd(e) { + if (isPeeking) { + isPeeking = false; + dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {}); + onMenuTouchEnd(e); } + } - function onEdgeTouchEnd(e) { - if (isPeeking) { - isPeeking = false; - dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}); - onMenuTouchEnd(e); - } - } + function disableEvent(e) { + e.preventDefault(); + e.stopPropagation(); + } - function disableEvent(e) { - e.preventDefault(); - e.stopPropagation(); - } + function onBackgroundTouchStart(e) { + var touches = getTouches(e); + var touch = touches[0] || {}; + backgroundTouchStartX = touch.clientX; + backgroundTouchStartTime = new Date().getTime(); + } - function onBackgroundTouchStart(e) { - var touches = getTouches(e); - var touch = touches[0] || {}; - backgroundTouchStartX = touch.clientX; - backgroundTouchStartTime = new Date().getTime(); - } + function onBackgroundTouchMove(e) { + var touches = getTouches(e); + var touch = touches[0] || {}; + var endX = touch.clientX || 0; - function onBackgroundTouchMove(e) { - var touches = getTouches(e); - var touch = touches[0] || {}; - var endX = touch.clientX || 0; - - if (endX <= options.width && self.isVisible) { - countStart++; - var deltaX = endX - (backgroundTouchStartX || 0); - - if (countStart == 1) { - startPoint = deltaX; - } - if (deltaX < 0 && dragMode !== 2) { - dragMode = 1; - newPos = deltaX - startPoint + options.width; - self.changeMenuPos(); - var time = new Date().getTime() - (backgroundTouchStartTime || 0); - velocity = Math.abs(deltaX) / time; - } - } - - e.preventDefault(); - e.stopPropagation(); - } - - function onBackgroundTouchEnd(e) { - var touches = getTouches(e); - var touch = touches[0] || {}; - var endX = touch.clientX || 0; + if (endX <= options.width && self.isVisible) { + countStart++; var deltaX = endX - (backgroundTouchStartX || 0); - self.checkMenuState(deltaX); - countStart = 0; - } - function onMaskTransitionEnd() { - var classList = mask.classList; - - if (!classList.contains("backdrop")) { - classList.add("hide"); + if (countStart == 1) { + startPoint = deltaX; + } + if (deltaX < 0 && dragMode !== 2) { + dragMode = 1; + newPos = deltaX - startPoint + options.width; + self.changeMenuPos(); + var time = new Date().getTime() - (backgroundTouchStartTime || 0); + velocity = Math.abs(deltaX) / time; } } - var self; - var defaults; - var mask; - var newPos = 0; - var currentPos = 0; - var startPoint = 0; - var countStart = 0; - var velocity = 0; - options.target.classList.add("transition"); - var dragMode = 0; - var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer"); - scrollContainer.classList.add("scrollY"); + e.preventDefault(); + e.stopPropagation(); + } - var TouchMenuLA = function () { - self = this; - defaults = { - width: 260, - handleSize: 10, - disableMask: false, - maxMaskOpacity: 0.5 - }; - this.isVisible = false; - this.initialize(); + function onBackgroundTouchEnd(e) { + var touches = getTouches(e); + var touch = touches[0] || {}; + var endX = touch.clientX || 0; + var deltaX = endX - (backgroundTouchStartX || 0); + self.checkMenuState(deltaX); + countStart = 0; + } + + function onMaskTransitionEnd() { + var classList = mask.classList; + + if (!classList.contains('backdrop')) { + classList.add('hide'); + } + } + + var self; + var defaults; + var mask; + var newPos = 0; + var currentPos = 0; + var startPoint = 0; + var countStart = 0; + var velocity = 0; + options.target.classList.add('transition'); + var dragMode = 0; + var scrollContainer = options.target.querySelector('.mainDrawer-scrollContainer'); + scrollContainer.classList.add('scrollY'); + + var TouchMenuLA = function () { + self = this; + defaults = { + width: 260, + handleSize: 10, + disableMask: false, + maxMaskOpacity: 0.5 }; + this.isVisible = false; + this.initialize(); + }; - TouchMenuLA.prototype.initElements = function () { - options.target.classList.add("touch-menu-la"); - options.target.style.width = options.width + "px"; - options.target.style.left = -options.width + "px"; + TouchMenuLA.prototype.initElements = function () { + options.target.classList.add('touch-menu-la'); + options.target.style.width = options.width + 'px'; + options.target.style.left = -options.width + 'px'; - if (!options.disableMask) { - mask = document.createElement("div"); - mask.className = "tmla-mask hide"; - document.body.appendChild(mask); - dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, { - passive: true - }); - } - }; - - var menuTouchStartX; - var menuTouchStartY; - var menuTouchStartTime; - var edgeContainer = document.querySelector(".mainDrawerHandle"); - var isPeeking = false; - - TouchMenuLA.prototype.animateToPosition = function (pos) { - requestAnimationFrame(function () { - options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none"; + if (!options.disableMask) { + mask = document.createElement('div'); + mask.className = 'tmla-mask hide'; + document.body.appendChild(mask); + dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, { + passive: true }); - }; + } + }; - TouchMenuLA.prototype.changeMenuPos = function () { - if (newPos <= options.width) { - this.animateToPosition(newPos); - } - }; + var menuTouchStartX; + var menuTouchStartY; + var menuTouchStartTime; + var edgeContainer = document.querySelector('.mainDrawerHandle'); + var isPeeking = false; - TouchMenuLA.prototype.clickMaskClose = function () { - mask.addEventListener("click", function () { + TouchMenuLA.prototype.animateToPosition = function (pos) { + requestAnimationFrame(function () { + options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none'; + }); + }; + + TouchMenuLA.prototype.changeMenuPos = function () { + if (newPos <= options.width) { + this.animateToPosition(newPos); + } + }; + + TouchMenuLA.prototype.clickMaskClose = function () { + mask.addEventListener('click', function () { + self.close(); + }); + }; + + TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) { + if (velocity >= 0.4) { + if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) { + self.open(); + } else { self.close(); - }); - }; - - TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) { - if (velocity >= 0.4) { - if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) { - self.open(); - } else { + } + } else { + if (newPos >= 100) { + self.open(); + } else { + if (newPos) { self.close(); } - } else { - if (newPos >= 100) { - self.open(); - } else { - if (newPos) { - self.close(); - } - } } - }; - - TouchMenuLA.prototype.open = function () { - this.animateToPosition(options.width); - currentPos = options.width; - this.isVisible = true; - options.target.classList.add("drawer-open"); - self.showMask(); - self.invoke(options.onChange); - }; - - TouchMenuLA.prototype.close = function () { - this.animateToPosition(0); - currentPos = 0; - self.isVisible = false; - options.target.classList.remove("drawer-open"); - self.hideMask(); - self.invoke(options.onChange); - }; - - TouchMenuLA.prototype.toggle = function () { - if (self.isVisible) { - self.close(); - } else { - self.open(); - } - }; - - var backgroundTouchStartX; - var backgroundTouchStartTime; - - TouchMenuLA.prototype.showMask = function () { - mask.classList.remove("hide"); - mask.classList.add("backdrop"); - }; - - TouchMenuLA.prototype.hideMask = function () { - mask.classList.add("hide"); - mask.classList.remove("backdrop"); - }; - - TouchMenuLA.prototype.invoke = function (fn) { - if (fn) { - fn.apply(self); - } - }; - - var _edgeSwipeEnabled; - - TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) { - if (!options.disableEdgeSwipe) { - if (browser.touch) { - if (enabled) { - if (!_edgeSwipeEnabled) { - _edgeSwipeEnabled = true; - dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, { - passive: true - }); - dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, { - passive: true - }); - dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, { - passive: true - }); - } - } else { - if (_edgeSwipeEnabled) { - _edgeSwipeEnabled = false; - dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, { - passive: true - }); - dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, { - passive: true - }); - dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, { - passive: true - }); - } - } - } - } - }; - - TouchMenuLA.prototype.initialize = function () { - options = Object.assign(defaults, options || {}); - - if (browser.edge) { - options.disableEdgeSwipe = true; - } - - self.initElements(); - - if (browser.touch) { - dom.addEventListener(options.target, "touchstart", onMenuTouchStart, { - passive: true - }); - dom.addEventListener(options.target, "touchmove", onMenuTouchMove, { - passive: true - }); - dom.addEventListener(options.target, "touchend", onMenuTouchEnd, { - passive: true - }); - dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, { - passive: true - }); - dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, { - passive: true - }); - dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {}); - dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, { - passive: true - }); - dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, { - passive: true - }); - } - - self.clickMaskClose(); - }; - - return new TouchMenuLA(); + } }; -}); + + TouchMenuLA.prototype.open = function () { + this.animateToPosition(options.width); + currentPos = options.width; + this.isVisible = true; + options.target.classList.add('drawer-open'); + self.showMask(); + self.invoke(options.onChange); + }; + + TouchMenuLA.prototype.close = function () { + this.animateToPosition(0); + currentPos = 0; + self.isVisible = false; + options.target.classList.remove('drawer-open'); + self.hideMask(); + self.invoke(options.onChange); + }; + + TouchMenuLA.prototype.toggle = function () { + if (self.isVisible) { + self.close(); + } else { + self.open(); + } + }; + + var backgroundTouchStartX; + var backgroundTouchStartTime; + + TouchMenuLA.prototype.showMask = function () { + mask.classList.remove('hide'); + mask.classList.add('backdrop'); + }; + + TouchMenuLA.prototype.hideMask = function () { + mask.classList.add('hide'); + mask.classList.remove('backdrop'); + }; + + TouchMenuLA.prototype.invoke = function (fn) { + if (fn) { + fn.apply(self); + } + }; + + var _edgeSwipeEnabled; + + TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) { + if (!options.disableEdgeSwipe) { + if (browser.touch) { + if (enabled) { + if (!_edgeSwipeEnabled) { + _edgeSwipeEnabled = true; + dom.addEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, { + passive: true + }); + dom.addEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, { + passive: true + }); + dom.addEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, { + passive: true + }); + } + } else { + if (_edgeSwipeEnabled) { + _edgeSwipeEnabled = false; + dom.removeEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, { + passive: true + }); + dom.removeEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, { + passive: true + }); + dom.removeEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, { + passive: true + }); + } + } + } + } + }; + + TouchMenuLA.prototype.initialize = function () { + options = Object.assign(defaults, options || {}); + + if (browser.edge) { + options.disableEdgeSwipe = true; + } + + self.initElements(); + + if (browser.touch) { + dom.addEventListener(options.target, 'touchstart', onMenuTouchStart, { + passive: true + }); + dom.addEventListener(options.target, 'touchmove', onMenuTouchMove, { + passive: true + }); + dom.addEventListener(options.target, 'touchend', onMenuTouchEnd, { + passive: true + }); + dom.addEventListener(options.target, 'touchcancel', onMenuTouchEnd, { + passive: true + }); + dom.addEventListener(mask, 'touchstart', onBackgroundTouchStart, { + passive: true + }); + dom.addEventListener(mask, 'touchmove', onBackgroundTouchMove, {}); + dom.addEventListener(mask, 'touchend', onBackgroundTouchEnd, { + passive: true + }); + dom.addEventListener(mask, 'touchcancel', onBackgroundTouchEnd, { + passive: true + }); + } + + self.clickMaskClose(); + }; + + return new TouchMenuLA(); +} diff --git a/src/libraries/screensavermanager.js b/src/libraries/screensavermanager.js index b9d7082850..68a7dda73b 100644 --- a/src/libraries/screensavermanager.js +++ b/src/libraries/screensavermanager.js @@ -1,132 +1,127 @@ -define(["events", "playbackManager", "pluginManager", "inputManager", "connectionManager", "userSettings"], function (events, playbackManager, pluginManager, inputManager, connectionManager, userSettings) { - "use strict"; +import events from 'events'; +import playbackManager from 'playbackManager'; +import pluginManager from 'pluginManager'; +import inputManager from 'inputManager'; +import * as userSettings from 'userSettings'; - function getMinIdleTime() { - // Returns the minimum amount of idle time required before the screen saver can be displayed - //time units used Millisecond - return 180000; +function getMinIdleTime() { + // Returns the minimum amount of idle time required before the screen saver can be displayed + //time units used Millisecond + return 180000; +} + +let lastFunctionalEvent = 0; + +function getFunctionalEventIdleTime() { + return new Date().getTime() - lastFunctionalEvent; +} + +events.on(playbackManager, 'playbackstop', function (e, stopInfo) { + const state = stopInfo.state; + if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') { + lastFunctionalEvent = new Date().getTime(); } - - var lastFunctionalEvent = 0; - - function getFunctionalEventIdleTime() { - return new Date().getTime() - lastFunctionalEvent; - } - - events.on(playbackManager, "playbackstop", function (e, stopInfo) { - var state = stopInfo.state; - if (state.NowPlayingItem && state.NowPlayingItem.MediaType == "Video") { - lastFunctionalEvent = new Date().getTime(); - } - }); - - function getScreensaverPlugin(isLoggedIn) { - - var option; - try { - option = userSettings.get("screensaver", false); - } catch (err) { - option = isLoggedIn ? "backdropscreensaver" : "logoscreensaver"; - } - - var plugins = pluginManager.ofType("screensaver"); - - for (var i = 0, length = plugins.length; i < length; i++) { - var plugin = plugins[i]; - - if (plugin.id === option) { - return plugin; - } - } - - return null; - } - - function ScreenSaverManager() { - - var self = this; - var activeScreenSaver; - - function showScreenSaver(screensaver) { - - if (activeScreenSaver) { - throw new Error("An existing screensaver is already active."); - } - - console.debug("Showing screensaver " + screensaver.name); - - screensaver.show(); - activeScreenSaver = screensaver; - - if (screensaver.hideOnClick !== false) { - window.addEventListener("click", hide, true); - } - if (screensaver.hideOnMouse !== false) { - window.addEventListener("mousemove", hide, true); - } - if (screensaver.hideOnKey !== false) { - window.addEventListener("keydown", hide, true); - } - } - - function hide() { - if (activeScreenSaver) { - console.debug("Hiding screensaver"); - activeScreenSaver.hide(); - activeScreenSaver = null; - } - - window.removeEventListener("click", hide, true); - window.removeEventListener("mousemove", hide, true); - window.removeEventListener("keydown", hide, true); - } - - self.isShowing = function () { - return activeScreenSaver != null; - }; - - self.show = function () { - var isLoggedIn; - var apiClient = connectionManager.currentApiClient(); - - if (apiClient && apiClient.isLoggedIn()) { - isLoggedIn = true; - } - - var screensaver = getScreensaverPlugin(isLoggedIn); - - if (screensaver) { - showScreenSaver(screensaver); - } - }; - - self.hide = function () { - hide(); - }; - - function onInterval() { - - if (self.isShowing()) { - return; - } - - if (inputManager.idleTime() < getMinIdleTime()) { - return; - } - - if (getFunctionalEventIdleTime < getMinIdleTime()) { - return; - } - - if (playbackManager.isPlayingVideo()) { - return; - } - - self.show(); - } - - setInterval(onInterval, 10000); - } - - return new ScreenSaverManager(); }); + +function getScreensaverPlugin(isLoggedIn) { + let option; + try { + option = userSettings.get('screensaver', false); + } catch (err) { + option = isLoggedIn ? 'backdropscreensaver' : 'logoscreensaver'; + } + + const plugins = pluginManager.ofType('screensaver'); + + for (const plugin of plugins) { + if (plugin.id === option) { + return plugin; + } + } + + return null; +} + +function ScreenSaverManager() { + let activeScreenSaver; + + function showScreenSaver(screensaver) { + if (activeScreenSaver) { + throw new Error('An existing screensaver is already active.'); + } + + console.debug('Showing screensaver ' + screensaver.name); + + screensaver.show(); + activeScreenSaver = screensaver; + + if (screensaver.hideOnClick !== false) { + window.addEventListener('click', hide, true); + } + if (screensaver.hideOnMouse !== false) { + window.addEventListener('mousemove', hide, true); + } + if (screensaver.hideOnKey !== false) { + window.addEventListener('keydown', hide, true); + } + } + + function hide() { + if (activeScreenSaver) { + console.debug('Hiding screensaver'); + activeScreenSaver.hide(); + activeScreenSaver = null; + } + + window.removeEventListener('click', hide, true); + window.removeEventListener('mousemove', hide, true); + window.removeEventListener('keydown', hide, true); + } + + this.isShowing = () => { + return activeScreenSaver != null; + }; + + this.show = function () { + let isLoggedIn; + const apiClient = window.connectionManager.currentApiClient(); + + if (apiClient && apiClient.isLoggedIn()) { + isLoggedIn = true; + } + + const screensaver = getScreensaverPlugin(isLoggedIn); + + if (screensaver) { + showScreenSaver(screensaver); + } + }; + + this.hide = function () { + hide(); + }; + + const onInterval = () => { + if (this.isShowing()) { + return; + } + + if (inputManager.idleTime() < getMinIdleTime()) { + return; + } + + if (getFunctionalEventIdleTime < getMinIdleTime()) { + return; + } + + if (playbackManager.isPlayingVideo()) { + return; + } + + this.show(); + }; + + setInterval(onInterval, 10000); +} + +export default new ScreenSaverManager; diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js index 8c67127eb3..dbb3de16e3 100644 --- a/src/libraries/scroller.js +++ b/src/libraries/scroller.js @@ -1,932 +1,890 @@ -define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'scrollStyles'], function (browser, layoutManager, dom, focusManager, ResizeObserver) { - 'use strict'; +/* Cleaning this file properly is not neecessary, since it's an outdated library + * and will be replaced soon by a Vue component. + */ - /** +import browser from 'browser'; +import layoutManager from 'layoutManager'; +import dom from 'dom'; +import focusManager from 'focusManager'; +import ResizeObserver from 'ResizeObserver'; +import 'scrollStyles'; + +/** * Return type of the value. * * @param {Mixed} value * * @return {String} */ - function type(value) { - if (value == null) { - return String(value); - } - - if (typeof value === 'object' || typeof value === 'function') { - return Object.prototype.toString.call(value).match(/\s([a-z]+)/i)[1].toLowerCase() || 'object'; - } - - return typeof value; +function type(value) { + if (value == null) { + return String(value); } - /** - * Disables an event it was triggered on and unbinds itself. - * - * @param {Event} event - * - * @return {Void} - */ - function disableOneEvent(event) { - /*jshint validthis:true */ - event.preventDefault(); - event.stopPropagation(); - this.removeEventListener(event.type, disableOneEvent); + if (typeof value === 'object' || typeof value === 'function') { + return Object.prototype.toString.call(value).match(/\s([a-z]+)/i)[1].toLowerCase() || 'object'; } - /** - * Make sure that number is within the limits. - * - * @param {Number} number - * @param {Number} min - * @param {Number} max - * - * @return {Number} - */ - function within(number, min, max) { - return number < min ? min : number > max ? max : number; + return typeof value; +} + +/** + * Disables an event it was triggered on and unbinds itself. + * + * @param {Event} event + * + * @return {Void} + */ +function disableOneEvent(event) { + /*jshint validthis:true */ + event.preventDefault(); + event.stopPropagation(); + this.removeEventListener(event.type, disableOneEvent); +} + +/** + * Make sure that number is within the limits. + * + * @param {Number} number + * @param {Number} min + * @param {Number} max + * + * @return {Number} + */ +function within(number, min, max) { + return number < min ? min : number > max ? max : number; +} + +// Other global values +var dragMouseEvents = ['mousemove', 'mouseup']; +var dragTouchEvents = ['touchmove', 'touchend']; +var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel'); +var interactiveElements = ['INPUT', 'SELECT', 'TEXTAREA']; + +var scrollerFactory = function (frame, options) { + // Extend options + var o = Object.assign({}, { + slidee: null, // Selector, DOM element, or jQuery object with DOM element representing SLIDEE. + horizontal: false, // Switch to horizontal mode. + + // Scrolling + mouseWheel: true, + scrollBy: 0, // Pixels or items to move per one mouse scroll. 0 to disable scrolling + + // Dragging + dragSource: null, // Selector or DOM element for catching dragging events. Default is FRAME. + mouseDragging: 1, // Enable navigation by dragging the SLIDEE with mouse cursor. + touchDragging: 1, // Enable navigation by dragging the SLIDEE with touch events. + dragThreshold: 3, // Distance in pixels before Sly recognizes dragging. + intervactive: null, // Selector for special interactive elements. + + // Mixed options + speed: 0 // Animations speed in milliseconds. 0 to disable animations. + + }, options); + + var isSmoothScrollSupported = 'scrollBehavior' in document.documentElement.style; + + // native scroll is a must with touch input + // also use native scroll when scrolling vertically in desktop mode - excluding horizontal because the mouse wheel support is choppy at the moment + // in cases with firefox, if the smooth scroll api is supported then use that because their implementation is very good + if (options.allowNativeScroll === false) { + options.enableNativeScroll = false; + } else if (isSmoothScrollSupported && ((browser.firefox && !layoutManager.tv) || options.allowNativeSmoothScroll)) { + // native smooth scroll + options.enableNativeScroll = true; + } else if (options.requireAnimation && (browser.animate || browser.supportsCssAnimation())) { + // transform is the only way to guarantee animation + options.enableNativeScroll = false; + } else if (!layoutManager.tv || !browser.animate) { + options.enableNativeScroll = true; } - // Other global values - var dragMouseEvents = ['mousemove', 'mouseup']; - var dragTouchEvents = ['touchmove', 'touchend']; - var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel'); - var interactiveElements = ['INPUT', 'SELECT', 'TEXTAREA']; - var tmpArray = []; - var time; - - // Math shorthands - var abs = Math.abs; - var sqrt = Math.sqrt; - var pow = Math.pow; - var round = Math.round; - var max = Math.max; - var min = Math.min; - - var scrollerFactory = function (frame, options) { - - // Extend options - var o = Object.assign({}, { - slidee: null, // Selector, DOM element, or jQuery object with DOM element representing SLIDEE. - horizontal: false, // Switch to horizontal mode. - - // Scrolling - mouseWheel: true, - scrollBy: 0, // Pixels or items to move per one mouse scroll. 0 to disable scrolling - - // Dragging - dragSource: null, // Selector or DOM element for catching dragging events. Default is FRAME. - mouseDragging: 1, // Enable navigation by dragging the SLIDEE with mouse cursor. - touchDragging: 1, // Enable navigation by dragging the SLIDEE with touch events. - dragThreshold: 3, // Distance in pixels before Sly recognizes dragging. - intervactive: null, // Selector for special interactive elements. - - // Mixed options - speed: 0 // Animations speed in milliseconds. 0 to disable animations. - - }, options); - - var isSmoothScrollSupported = 'scrollBehavior' in document.documentElement.style; - - // native scroll is a must with touch input - // also use native scroll when scrolling vertically in desktop mode - excluding horizontal because the mouse wheel support is choppy at the moment - // in cases with firefox, if the smooth scroll api is supported then use that because their implementation is very good - if (options.allowNativeScroll === false) { - options.enableNativeScroll = false; - } else if (isSmoothScrollSupported && ((browser.firefox && !layoutManager.tv) || options.allowNativeSmoothScroll)) { - // native smooth scroll - options.enableNativeScroll = true; - } else if (options.requireAnimation && (browser.animate || browser.supportsCssAnimation())) { - - // transform is the only way to guarantee animation - options.enableNativeScroll = false; - } else if (!layoutManager.tv || !browser.animate) { - - options.enableNativeScroll = true; - } - - // Need this for the magic wheel. With the animated scroll the magic wheel will run off of the screen - if (browser.web0s) { - options.enableNativeScroll = true; - } - - // Private variables - var self = this; - self.options = o; - - // Frame - var slideeElement = o.slidee ? o.slidee : sibling(frame.firstChild)[0]; - self._pos = { - start: 0, - center: 0, - end: 0, - cur: 0, - dest: 0 - }; - - var transform = !options.enableNativeScroll; - - // Miscellaneous - var scrollSource = frame; - var dragSourceElement = o.dragSource ? o.dragSource : frame; - var dragging = { - released: 1 - }; - var scrolling = { - last: 0, - delta: 0, - resetTime: 200 - }; - - // Expose properties - self.initialized = 0; - self.slidee = slideeElement; - self.options = o; - self.dragging = dragging; - - var nativeScrollElement = frame; - - function sibling(n, elem) { - var matched = []; - - for (; n; n = n.nextSibling) { - if (n.nodeType === 1 && n !== elem) { - matched.push(n); - } - } - return matched; - } - - var requiresReflow = true; - - var frameSize = 0; - var slideeSize = 0; - function ensureSizeInfo() { - - if (requiresReflow) { - - requiresReflow = false; - - // Reset global variables - frameSize = o.horizontal ? (frame).offsetWidth : (frame).offsetHeight; - - slideeSize = o.scrollWidth || Math.max(slideeElement[o.horizontal ? 'offsetWidth' : 'offsetHeight'], slideeElement[o.horizontal ? 'scrollWidth' : 'scrollHeight']); - - // Set position limits & relativess - self._pos.end = max(slideeSize - frameSize, 0); - } - } - - /** - * Loading function. - * - * Populate arrays, set sizes, bind events, ... - * - * @param {Boolean} [isInit] Whether load is called from within self.init(). - * @return {Void} - */ - function load(isInit) { - - requiresReflow = true; - - if (!isInit) { - - ensureSizeInfo(); - - // Fix possible overflowing - var pos = self._pos; - self.slideTo(within(pos.dest, pos.start, pos.end)); - } - } - - function initFrameResizeObserver() { - - var observerOptions = {}; - - self.frameResizeObserver = new ResizeObserver(onResize, observerOptions); - - self.frameResizeObserver.observe(frame); - } - - self.reload = function () { - load(); - }; - - self.getScrollEventName = function () { - return transform ? 'scrollanimate' : 'scroll'; - }; - - self.getScrollSlider = function () { - return slideeElement; - }; - - self.getScrollFrame = function () { - return frame; - }; - - function nativeScrollTo(container, pos, immediate) { - - if (container.scroll) { - if (o.horizontal) { - - container.scroll({ - left: pos, - behavior: immediate ? 'instant' : 'smooth' - }); - } else { - - container.scroll({ - top: pos, - behavior: immediate ? 'instant' : 'smooth' - }); - } - } else if (!immediate && container.scrollTo) { - if (o.horizontal) { - container.scrollTo(Math.round(pos), 0); - } else { - container.scrollTo(0, Math.round(pos)); - } - } else { - if (o.horizontal) { - container.scrollLeft = Math.round(pos); - } else { - container.scrollTop = Math.round(pos); - } - } - } - - var lastAnimate; - - /** - * Animate to a position. - * - * @param {Int} newPos New position. - * @param {Bool} immediate Reposition immediately without an animation. - * - * @return {Void} - */ - self.slideTo = function (newPos, immediate, fullItemPos) { - - ensureSizeInfo(); - var pos = self._pos; - - newPos = within(newPos, pos.start, pos.end); - - if (!transform) { - - nativeScrollTo(nativeScrollElement, newPos, immediate); - return; - } - - // Update the animation object - var from = pos.cur; - immediate = immediate || dragging.init || !o.speed; - - var now = new Date().getTime(); - - if (o.autoImmediate) { - if (!immediate && (now - (lastAnimate || 0)) <= 50) { - immediate = true; - } - } - - if (!immediate && o.skipSlideToWhenVisible && fullItemPos && fullItemPos.isVisible) { - - return; - } - - // Start animation rendering - // NOTE the dependency was modified here to fix a scrollbutton issue - pos.dest = newPos; - renderAnimateWithTransform(from, newPos, immediate); - lastAnimate = now; - }; - - function setStyleProperty(elem, name, value, speed, resetTransition) { - - var style = elem.style; - - if (resetTransition || browser.edge) { - style.transition = 'none'; - void elem.offsetWidth; - } - - style.transition = 'transform ' + speed + 'ms ease-out'; - style[name] = value; - } - - function dispatchScrollEventIfNeeded() { - if (o.dispatchScrollEvent) { - frame.dispatchEvent(new CustomEvent(self.getScrollEventName(), { - bubbles: true, - cancelable: false - })); - } - } - - function renderAnimateWithTransform(fromPosition, toPosition, immediate) { - - var speed = o.speed; - - if (immediate) { - speed = o.immediateSpeed || 50; - } - - if (o.horizontal) { - setStyleProperty(slideeElement, 'transform', 'translateX(' + (-round(toPosition)) + 'px)', speed); - } else { - setStyleProperty(slideeElement, 'transform', 'translateY(' + (-round(toPosition)) + 'px)', speed); - } - self._pos.cur = toPosition; - - dispatchScrollEventIfNeeded(); - } - - function getBoundingClientRect(elem) { - - // Support: BlackBerry 5, iOS 3 (original iPhone) - // If we don't have gBCR, just use 0,0 rather than error - if (elem.getBoundingClientRect) { - return elem.getBoundingClientRect(); - } else { - return { top: 0, left: 0 }; - } - } - - /** - * Returns the position object. - * - * @param {Mixed} item - * - * @return {Object} - */ - self.getPos = function (item) { - - var scrollElement = transform ? slideeElement : nativeScrollElement; - var slideeOffset = getBoundingClientRect(scrollElement); - var itemOffset = getBoundingClientRect(item); - - var slideeStartPos = o.horizontal ? slideeOffset.left : slideeOffset.top; - var slideeEndPos = o.horizontal ? slideeOffset.right : slideeOffset.bottom; - - var offset = o.horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top; - - var size = o.horizontal ? itemOffset.width : itemOffset.height; - if (!size && size !== 0) { - size = item[o.horizontal ? 'offsetWidth' : 'offsetHeight']; - } - - var centerOffset = o.centerOffset || 0; - - if (!transform) { - centerOffset = 0; - if (o.horizontal) { - offset += nativeScrollElement.scrollLeft; - } else { - offset += nativeScrollElement.scrollTop; - } - } - - ensureSizeInfo(); - - var currentStart = self._pos.cur; - var currentEnd = currentStart + frameSize; - - console.debug('offset:' + offset + ' currentStart:' + currentStart + ' currentEnd:' + currentEnd); - var isVisible = offset >= currentStart && (offset + size) <= currentEnd; - - return { - start: offset, - center: offset + centerOffset - (frameSize / 2) + (size / 2), - end: offset - frameSize + size, - size: size, - isVisible: isVisible - }; - }; - - self.getCenterPosition = function (item) { - - ensureSizeInfo(); - - var pos = self.getPos(item); - return within(pos.center, pos.start, pos.end); - }; - - function dragInitSlidee(event) { - var isTouch = event.type === 'touchstart'; - - // Ignore when already in progress, or interactive element in non-touch navivagion - if (dragging.init || !isTouch && isInteractive(event.target)) { - return; - } - - // SLIDEE dragging conditions - if (!(isTouch ? o.touchDragging : o.mouseDragging && event.which < 2)) { - return; - } - - if (!isTouch) { - // prevents native image dragging in Firefox - event.preventDefault(); - } - - // Reset dragging object - dragging.released = 0; - - // Properties used in dragHandler - dragging.init = 0; - dragging.source = event.target; - dragging.touch = isTouch; - var pointer = isTouch ? event.touches[0] : event; - dragging.initX = pointer.pageX; - dragging.initY = pointer.pageY; - dragging.initPos = self._pos.cur; - dragging.start = +new Date(); - dragging.time = 0; - dragging.path = 0; - dragging.delta = 0; - dragging.locked = 0; - dragging.pathToLock = isTouch ? 30 : 10; - - // Bind dragging events - if (transform) { - - if (isTouch) { - dragTouchEvents.forEach(function (eventName) { - dom.addEventListener(document, eventName, dragHandler, { - passive: true - }); - }); - } else { - dragMouseEvents.forEach(function (eventName) { - dom.addEventListener(document, eventName, dragHandler, { - passive: true - }); - }); - } - } - } - - /** - * Handler for dragging scrollbar handle or SLIDEE. - * - * @param {Event} event - * - * @return {Void} - */ - function dragHandler(event) { - dragging.released = event.type === 'mouseup' || event.type === 'touchend'; - var pointer = dragging.touch ? event[dragging.released ? 'changedTouches' : 'touches'][0] : event; - dragging.pathX = pointer.pageX - dragging.initX; - dragging.pathY = pointer.pageY - dragging.initY; - dragging.path = sqrt(pow(dragging.pathX, 2) + pow(dragging.pathY, 2)); - dragging.delta = o.horizontal ? dragging.pathX : dragging.pathY; - - if (!dragging.released && dragging.path < 1) { - return; - } - - // We haven't decided whether this is a drag or not... - if (!dragging.init) { - // If the drag path was very short, maybe it's not a drag? - if (dragging.path < o.dragThreshold) { - // If the pointer was released, the path will not become longer and it's - // definitely not a drag. If not released yet, decide on next iteration - return dragging.released ? dragEnd() : undefined; - } else { - // If dragging path is sufficiently long we can confidently start a drag - // if drag is in different direction than scroll, ignore it - if (o.horizontal ? abs(dragging.pathX) > abs(dragging.pathY) : abs(dragging.pathX) < abs(dragging.pathY)) { - dragging.init = 1; - } else { - return dragEnd(); - } - } - } - - //event.preventDefault(); - - // Disable click on a source element, as it is unwelcome when dragging - if (!dragging.locked && dragging.path > dragging.pathToLock) { - dragging.locked = 1; - dragging.source.addEventListener('click', disableOneEvent); - } - - // Cancel dragging on release - if (dragging.released) { - dragEnd(); - } - - self.slideTo(round(dragging.initPos - dragging.delta)); - } - - /** - * Stops dragging and cleans up after it. - * - * @return {Void} - */ - function dragEnd() { - dragging.released = true; - - dragTouchEvents.forEach(function (eventName) { - dom.removeEventListener(document, eventName, dragHandler, { - passive: true - }); - }); - - dragMouseEvents.forEach(function (eventName) { - dom.removeEventListener(document, eventName, dragHandler, { - passive: true - }); - }); - - // Make sure that disableOneEvent is not active in next tick. - setTimeout(function () { - dragging.source.removeEventListener('click', disableOneEvent); - }); - - dragging.init = 0; - } - - /** - * Check whether element is interactive. - * - * @return {Boolean} - */ - function isInteractive(element) { - - while (element) { - - if (interactiveElements.indexOf(element.tagName) !== -1) { - return true; - } - - element = element.parentNode; - } - return false; - } - - /** - * Mouse wheel delta normalization. - * - * @param {Event} event - * - * @return {Int} - */ - function normalizeWheelDelta(event) { - // JELLYFIN MOD: Only use deltaX for horizontal scroll and remove IE8 support - scrolling.curDelta = o.horizontal ? event.deltaX : event.deltaY; - // END JELLYFIN MOD - - if (transform) { - scrolling.curDelta /= event.deltaMode === 1 ? 3 : 100; - } - return scrolling.curDelta; - } - - /** - * Mouse scrolling handler. - * - * @param {Event} event - * - * @return {Void} - */ - function scrollHandler(event) { - - ensureSizeInfo(); - var pos = self._pos; - // Ignore if there is no scrolling to be done - if (!o.scrollBy || pos.start === pos.end) { - return; - } - var delta = normalizeWheelDelta(event); - - if (transform) { - // Trap scrolling only when necessary and/or requested - if (delta > 0 && pos.dest < pos.end || delta < 0 && pos.dest > pos.start) { - //stopDefault(event, 1); - } - - self.slideBy(o.scrollBy * delta); - } else { - - if (isSmoothScrollSupported) { - delta *= 12; - } - - if (o.horizontal) { - nativeScrollElement.scrollLeft += delta; - } else { - nativeScrollElement.scrollTop += delta; - } - } - } - - /** - * Destroys instance and everything it created. - * - * @return {Void} - */ - self.destroy = function () { - - if (self.frameResizeObserver) { - self.frameResizeObserver.disconnect(); - self.frameResizeObserver = null; - } - - // Reset native FRAME element scroll - dom.removeEventListener(frame, 'scroll', resetScroll, { - passive: true - }); - - dom.removeEventListener(scrollSource, wheelEvent, scrollHandler, { - passive: true - }); - - dom.removeEventListener(dragSourceElement, 'touchstart', dragInitSlidee, { - passive: true - }); - - dom.removeEventListener(frame, 'click', onFrameClick, { - passive: true, - capture: true - }); - - dom.removeEventListener(dragSourceElement, 'mousedown', dragInitSlidee, { - //passive: true - }); - - // Reset initialized status and return the instance - self.initialized = 0; - return self; - }; - - var contentRect = {}; - - function onResize(entries) { - - var entry = entries[0]; - - if (entry) { - - var newRect = entry.contentRect; - - // handle element being hidden - if (newRect.width === 0 || newRect.height === 0) { - return; - } - - if (newRect.width !== contentRect.width || newRect.height !== contentRect.height) { - - contentRect = newRect; - - load(false); - } - } - } - - function resetScroll() { - if (o.horizontal) { - this.scrollLeft = 0; - } else { - this.scrollTop = 0; - } - } - - function onFrameClick(e) { - if (e.which === 1) { - var focusableParent = focusManager.focusableParent(e.target); - if (focusableParent && focusableParent !== document.activeElement) { - focusableParent.focus(); - } - } - } - - self.getScrollPosition = function () { - - if (transform) { - return self._pos.cur; - } - - if (o.horizontal) { - return nativeScrollElement.scrollLeft; - } else { - return nativeScrollElement.scrollTop; - } - }; - - self.getScrollSize = function () { - - if (transform) { - return slideeSize; - } - - if (o.horizontal) { - return nativeScrollElement.scrollWidth; - } else { - return nativeScrollElement.scrollHeight; - } - }; - - /** - * Initialize. - * - * @return {Object} - */ - self.init = function () { - if (self.initialized) { - return; - } - - if (!transform) { - if (o.horizontal) { - if (layoutManager.desktop && !o.hideScrollbar) { - nativeScrollElement.classList.add('scrollX'); - } else { - nativeScrollElement.classList.add('scrollX'); - nativeScrollElement.classList.add('hiddenScrollX'); - - if (layoutManager.tv && o.allowNativeSmoothScroll !== false) { - nativeScrollElement.classList.add('smoothScrollX'); - } - } - - if (o.forceHideScrollbars) { - nativeScrollElement.classList.add('hiddenScrollX-forced'); - } - } else { - if (layoutManager.desktop && !o.hideScrollbar) { - nativeScrollElement.classList.add('scrollY'); - } else { - nativeScrollElement.classList.add('scrollY'); - nativeScrollElement.classList.add('hiddenScrollY'); - - if (layoutManager.tv && o.allowNativeSmoothScroll !== false) { - nativeScrollElement.classList.add('smoothScrollY'); - } - } - - if (o.forceHideScrollbars) { - nativeScrollElement.classList.add('hiddenScrollY-forced'); - } - } - } else { - frame.style.overflow = 'hidden'; - slideeElement.style['will-change'] = 'transform'; - slideeElement.style.transition = 'transform ' + o.speed + 'ms ease-out'; - - if (o.horizontal) { - slideeElement.classList.add('animatedScrollX'); - } else { - slideeElement.classList.add('animatedScrollY'); - } - } - - if (transform || layoutManager.tv) { - // This can prevent others from being able to listen to mouse events - dom.addEventListener(dragSourceElement, 'mousedown', dragInitSlidee, { - //passive: true - }); - } - - initFrameResizeObserver(); - - if (transform) { - - dom.addEventListener(dragSourceElement, 'touchstart', dragInitSlidee, { - passive: true - }); - - if (!o.horizontal) { - dom.addEventListener(frame, 'scroll', resetScroll, { - passive: true - }); - } - - if (o.mouseWheel) { - // Scrolling navigation - dom.addEventListener(scrollSource, wheelEvent, scrollHandler, { - passive: true - }); - } - - } else if (o.horizontal) { - - // Don't bind to mouse events with vertical scroll since the mouse wheel can handle this natively - - if (o.mouseWheel) { - // Scrolling navigation - dom.addEventListener(scrollSource, wheelEvent, scrollHandler, { - passive: true - }); - } - } - - dom.addEventListener(frame, 'click', onFrameClick, { - passive: true, - capture: true - }); - - // Mark instance as initialized - self.initialized = 1; - - // Load - load(true); - - // Return instance - return self; - }; + // Need this for the magic wheel. With the animated scroll the magic wheel will run off of the screen + if (browser.web0s) { + options.enableNativeScroll = true; + } + + // Private variables + var self = this; + self.options = o; + + // Frame + var slideeElement = o.slidee ? o.slidee : sibling(frame.firstChild)[0]; + self._pos = { + start: 0, + center: 0, + end: 0, + cur: 0, + dest: 0 }; + var transform = !options.enableNativeScroll; + + // Miscellaneous + var scrollSource = frame; + var dragSourceElement = o.dragSource ? o.dragSource : frame; + var dragging = { + released: 1 + }; + var scrolling = { + last: 0, + delta: 0, + resetTime: 200 + }; + + // Expose properties + self.initialized = 0; + self.slidee = slideeElement; + self.options = o; + self.dragging = dragging; + + var nativeScrollElement = frame; + + function sibling(n, elem) { + var matched = []; + + for (; n; n = n.nextSibling) { + if (n.nodeType === 1 && n !== elem) { + matched.push(n); + } + } + return matched; + } + + var requiresReflow = true; + + var frameSize = 0; + var slideeSize = 0; + function ensureSizeInfo() { + if (requiresReflow) { + requiresReflow = false; + + // Reset global variables + frameSize = o.horizontal ? (frame).offsetWidth : (frame).offsetHeight; + + slideeSize = o.scrollWidth || Math.max(slideeElement[o.horizontal ? 'offsetWidth' : 'offsetHeight'], slideeElement[o.horizontal ? 'scrollWidth' : 'scrollHeight']); + + // Set position limits & relativess + self._pos.end = Math.max(slideeSize - frameSize, 0); + } + } + /** - * Slide SLIDEE by amount of pixels. + * Loading function. * - * @param {Int} delta Pixels/Items. Positive means forward, negative means backward. - * @param {Bool} immediate Reposition immediately without an animation. + * Populate arrays, set sizes, bind events, ... * + * @param {Boolean} [isInit] Whether load is called from within self.init(). * @return {Void} */ - scrollerFactory.prototype.slideBy = function (delta, immediate) { - if (!delta) { + function load(isInit) { + requiresReflow = true; + + if (!isInit) { + ensureSizeInfo(); + + // Fix possible overflowing + var pos = self._pos; + self.slideTo(within(pos.dest, pos.start, pos.end)); + } + } + + function initFrameResizeObserver() { + var observerOptions = {}; + + self.frameResizeObserver = new ResizeObserver(onResize, observerOptions); + + self.frameResizeObserver.observe(frame); + } + + self.reload = function () { + load(); + }; + + self.getScrollEventName = function () { + return transform ? 'scrollanimate' : 'scroll'; + }; + + self.getScrollSlider = function () { + return slideeElement; + }; + + self.getScrollFrame = function () { + return frame; + }; + + function nativeScrollTo(container, pos, immediate) { + if (container.scroll) { + if (o.horizontal) { + container.scroll({ + left: pos, + behavior: immediate ? 'instant' : 'smooth' + }); + } else { + container.scroll({ + top: pos, + behavior: immediate ? 'instant' : 'smooth' + }); + } + } else if (!immediate && container.scrollTo) { + if (o.horizontal) { + container.scrollTo(Math.round(pos), 0); + } else { + container.scrollTo(0, Math.round(pos)); + } + } else { + if (o.horizontal) { + container.scrollLeft = Math.round(pos); + } else { + container.scrollTop = Math.round(pos); + } + } + } + + var lastAnimate; + + /** + * Animate to a position. + * + * @param {Int} newPos New position. + * @param {Bool} immediate Reposition immediately without an animation. + * + * @return {Void} + */ + self.slideTo = function (newPos, immediate, fullItemPos) { + ensureSizeInfo(); + var pos = self._pos; + + if (layoutManager.tv) { + newPos = within(newPos, pos.start); + } else { + newPos = within(newPos, pos.start, pos.end); + } + + if (!transform) { + nativeScrollTo(nativeScrollElement, newPos, immediate); return; } - this.slideTo(this._pos.dest + delta, immediate); - }; - /** - * Core method for handling `toLocation` methods. - * - * @param {String} location - * @param {Mixed} item - * @param {Bool} immediate - * - * @return {Void} - */ - scrollerFactory.prototype.to = function (location, item, immediate) { - // Optional arguments logic - if (type(item) === 'boolean') { - immediate = item; - item = undefined; - } + // Update the animation object + var from = pos.cur; + immediate = immediate || dragging.init || !o.speed; - if (item === undefined) { - this.slideTo(this._pos[location], immediate); - } else { + var now = new Date().getTime(); - //if (!transform) { - - // item.scrollIntoView(); - // return; - //} - - var itemPos = this.getPos(item); - - if (itemPos) { - this.slideTo(itemPos[location], immediate, itemPos); + if (o.autoImmediate) { + if (!immediate && (now - (lastAnimate || 0)) <= 50) { + immediate = true; } } + + if (!immediate && o.skipSlideToWhenVisible && fullItemPos && fullItemPos.isVisible) { + return; + } + + // Start animation rendering + // NOTE the dependency was modified here to fix a scrollbutton issue + pos.dest = newPos; + renderAnimateWithTransform(from, newPos, immediate); + lastAnimate = now; }; + function setStyleProperty(elem, name, value, speed, resetTransition) { + var style = elem.style; + + if (resetTransition || browser.edge) { + style.transition = 'none'; + void elem.offsetWidth; + } + + style.transition = 'transform ' + speed + 'ms ease-out'; + style[name] = value; + } + + function dispatchScrollEventIfNeeded() { + if (o.dispatchScrollEvent) { + frame.dispatchEvent(new CustomEvent(self.getScrollEventName(), { + bubbles: true, + cancelable: false + })); + } + } + + function renderAnimateWithTransform(fromPosition, toPosition, immediate) { + var speed = o.speed; + + if (immediate) { + speed = o.immediateSpeed || 50; + } + + if (o.horizontal) { + setStyleProperty(slideeElement, 'transform', 'translateX(' + (-Math.round(toPosition)) + 'px)', speed); + } else { + setStyleProperty(slideeElement, 'transform', 'translateY(' + (-Math.round(toPosition)) + 'px)', speed); + } + self._pos.cur = toPosition; + + dispatchScrollEventIfNeeded(); + } + + function getBoundingClientRect(elem) { + // Support: BlackBerry 5, iOS 3 (original iPhone) + // If we don't have gBCR, just use 0,0 rather than error + if (elem.getBoundingClientRect) { + return elem.getBoundingClientRect(); + } else { + return { top: 0, left: 0 }; + } + } + /** - * Animate element or the whole SLIDEE to the start of the frame. + * Returns the position object. * - * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE. - * @param {Bool} immediate Reposition immediately without an animation. + * @param {Mixed} item + * + * @return {Object} + */ + self.getPos = function (item) { + var scrollElement = transform ? slideeElement : nativeScrollElement; + var slideeOffset = getBoundingClientRect(scrollElement); + var itemOffset = getBoundingClientRect(item); + + var offset = o.horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top; + + var size = o.horizontal ? itemOffset.width : itemOffset.height; + if (!size && size !== 0) { + size = item[o.horizontal ? 'offsetWidth' : 'offsetHeight']; + } + + var centerOffset = o.centerOffset || 0; + + if (!transform) { + centerOffset = 0; + if (o.horizontal) { + offset += nativeScrollElement.scrollLeft; + } else { + offset += nativeScrollElement.scrollTop; + } + } + + ensureSizeInfo(); + + var currentStart = self._pos.cur; + var currentEnd = currentStart + frameSize; + + console.debug('offset:' + offset + ' currentStart:' + currentStart + ' currentEnd:' + currentEnd); + var isVisible = offset >= currentStart && (offset + size) <= currentEnd; + + return { + start: offset, + center: offset + centerOffset - (frameSize / 2) + (size / 2), + end: offset - frameSize + size, + size: size, + isVisible: isVisible + }; + }; + + self.getCenterPosition = function (item) { + ensureSizeInfo(); + + var pos = self.getPos(item); + return within(pos.center, pos.start, pos.end); + }; + + function dragInitSlidee(event) { + var isTouch = event.type === 'touchstart'; + + // Ignore when already in progress, or interactive element in non-touch navivagion + if (dragging.init || !isTouch && isInteractive(event.target)) { + return; + } + + // SLIDEE dragging conditions + if (!(isTouch ? o.touchDragging : o.mouseDragging && event.which < 2)) { + return; + } + + if (!isTouch) { + // prevents native image dragging in Firefox + event.preventDefault(); + } + + // Reset dragging object + dragging.released = 0; + + // Properties used in dragHandler + dragging.init = 0; + dragging.source = event.target; + dragging.touch = isTouch; + var pointer = isTouch ? event.touches[0] : event; + dragging.initX = pointer.pageX; + dragging.initY = pointer.pageY; + dragging.initPos = self._pos.cur; + dragging.start = +new Date(); + dragging.time = 0; + dragging.path = 0; + dragging.delta = 0; + dragging.locked = 0; + dragging.pathToLock = isTouch ? 30 : 10; + + // Bind dragging events + if (transform) { + if (isTouch) { + dragTouchEvents.forEach(function (eventName) { + dom.addEventListener(document, eventName, dragHandler, { + passive: true + }); + }); + } else { + dragMouseEvents.forEach(function (eventName) { + dom.addEventListener(document, eventName, dragHandler, { + passive: true + }); + }); + } + } + } + + /** + * Handler for dragging scrollbar handle or SLIDEE. + * + * @param {Event} event * * @return {Void} */ - scrollerFactory.prototype.toStart = function (item, immediate) { - this.to('start', item, immediate); - }; + function dragHandler(event) { + dragging.released = event.type === 'mouseup' || event.type === 'touchend'; + var pointer = dragging.touch ? event[dragging.released ? 'changedTouches' : 'touches'][0] : event; + dragging.pathX = pointer.pageX - dragging.initX; + dragging.pathY = pointer.pageY - dragging.initY; + dragging.path = Math.sqrt(Math.pow(dragging.pathX, 2) + Math.pow(dragging.pathY, 2)); + dragging.delta = o.horizontal ? dragging.pathX : dragging.pathY; + + if (!dragging.released && dragging.path < 1) { + return; + } + + // We haven't decided whether this is a drag or not... + if (!dragging.init) { + // If the drag path was very short, maybe it's not a drag? + if (dragging.path < o.dragThreshold) { + // If the pointer was released, the path will not become longer and it's + // definitely not a drag. If not released yet, decide on next iteration + return dragging.released ? dragEnd() : undefined; + } else { + // If dragging path is sufficiently long we can confidently start a drag + // if drag is in different direction than scroll, ignore it + if (o.horizontal ? Math.abs(dragging.pathX) > Math.abs(dragging.pathY) : Math.abs(dragging.pathX) < Math.abs(dragging.pathY)) { + dragging.init = 1; + } else { + return dragEnd(); + } + } + } + + //event.preventDefault(); + + // Disable click on a source element, as it is unwelcome when dragging + if (!dragging.locked && dragging.path > dragging.pathToLock) { + dragging.locked = 1; + dragging.source.addEventListener('click', disableOneEvent); + } + + // Cancel dragging on release + if (dragging.released) { + dragEnd(); + } + + self.slideTo(Math.round(dragging.initPos - dragging.delta)); + } /** - * Animate element or the whole SLIDEE to the end of the frame. - * - * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE. - * @param {Bool} immediate Reposition immediately without an animation. + * Stops dragging and cleans up after it. * * @return {Void} */ - scrollerFactory.prototype.toEnd = function (item, immediate) { - this.to('end', item, immediate); - }; + function dragEnd() { + dragging.released = true; + + dragTouchEvents.forEach(function (eventName) { + dom.removeEventListener(document, eventName, dragHandler, { + passive: true + }); + }); + + dragMouseEvents.forEach(function (eventName) { + dom.removeEventListener(document, eventName, dragHandler, { + passive: true + }); + }); + + // Make sure that disableOneEvent is not active in next tick. + setTimeout(function () { + dragging.source.removeEventListener('click', disableOneEvent); + }); + + dragging.init = 0; + } /** - * Animate element or the whole SLIDEE to the center of the frame. + * Check whether element is interactive. * - * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE. - * @param {Bool} immediate Reposition immediately without an animation. + * @return {Boolean} + */ + function isInteractive(element) { + while (element) { + if (interactiveElements.indexOf(element.tagName) !== -1) { + return true; + } + + element = element.parentNode; + } + return false; + } + + /** + * Mouse wheel delta normalization. + * + * @param {Event} event + * + * @return {Int} + */ + function normalizeWheelDelta(event) { + // JELLYFIN MOD: Only use deltaX for horizontal scroll and remove IE8 support + scrolling.curDelta = o.horizontal ? event.deltaX : event.deltaY; + // END JELLYFIN MOD + + if (transform) { + scrolling.curDelta /= event.deltaMode === 1 ? 3 : 100; + } + return scrolling.curDelta; + } + + /** + * Mouse scrolling handler. + * + * @param {Event} event * * @return {Void} */ - scrollerFactory.prototype.toCenter = function (item, immediate) { - this.to('center', item, immediate); + function scrollHandler(event) { + ensureSizeInfo(); + var pos = self._pos; + // Ignore if there is no scrolling to be done + if (!o.scrollBy || pos.start === pos.end) { + return; + } + var delta = normalizeWheelDelta(event); + + if (transform) { + // Trap scrolling only when necessary and/or requested + if (delta > 0 && pos.dest < pos.end || delta < 0 && pos.dest > pos.start) { + //stopDefault(event, 1); + } + + self.slideBy(o.scrollBy * delta); + } else { + if (isSmoothScrollSupported) { + delta *= 12; + } + + if (o.horizontal) { + nativeScrollElement.scrollLeft += delta; + } else { + nativeScrollElement.scrollTop += delta; + } + } + } + + /** + * Destroys instance and everything it created. + * + * @return {Void} + */ + self.destroy = function () { + if (self.frameResizeObserver) { + self.frameResizeObserver.disconnect(); + self.frameResizeObserver = null; + } + + // Reset native FRAME element scroll + dom.removeEventListener(frame, 'scroll', resetScroll, { + passive: true + }); + + dom.removeEventListener(scrollSource, wheelEvent, scrollHandler, { + passive: true + }); + + dom.removeEventListener(dragSourceElement, 'touchstart', dragInitSlidee, { + passive: true + }); + + dom.removeEventListener(frame, 'click', onFrameClick, { + passive: true, + capture: true + }); + + dom.removeEventListener(dragSourceElement, 'mousedown', dragInitSlidee, { + //passive: true + }); + + // Reset initialized status and return the instance + self.initialized = 0; + return self; }; - scrollerFactory.create = function (frame, options) { - var instance = new scrollerFactory(frame, options); - return Promise.resolve(instance); + var contentRect = {}; + + function onResize(entries) { + var entry = entries[0]; + + if (entry) { + var newRect = entry.contentRect; + + // handle element being hidden + if (newRect.width === 0 || newRect.height === 0) { + return; + } + + if (newRect.width !== contentRect.width || newRect.height !== contentRect.height) { + contentRect = newRect; + + load(false); + } + } + } + + function resetScroll() { + if (o.horizontal) { + this.scrollLeft = 0; + } else { + this.scrollTop = 0; + } + } + + function onFrameClick(e) { + if (e.which === 1) { + var focusableParent = focusManager.focusableParent(e.target); + if (focusableParent && focusableParent !== document.activeElement) { + focusableParent.focus(); + } + } + } + + self.getScrollPosition = function () { + if (transform) { + return self._pos.cur; + } + + if (o.horizontal) { + return nativeScrollElement.scrollLeft; + } else { + return nativeScrollElement.scrollTop; + } }; - return scrollerFactory; -}); + self.getScrollSize = function () { + if (transform) { + return slideeSize; + } + + if (o.horizontal) { + return nativeScrollElement.scrollWidth; + } else { + return nativeScrollElement.scrollHeight; + } + }; + + /** + * Initialize. + * + * @return {Object} + */ + self.init = function () { + if (self.initialized) { + return; + } + + if (!transform) { + if (o.horizontal) { + if (layoutManager.desktop && !o.hideScrollbar) { + nativeScrollElement.classList.add('scrollX'); + } else { + nativeScrollElement.classList.add('scrollX'); + nativeScrollElement.classList.add('hiddenScrollX'); + + if (layoutManager.tv && o.allowNativeSmoothScroll !== false) { + nativeScrollElement.classList.add('smoothScrollX'); + } + } + + if (o.forceHideScrollbars) { + nativeScrollElement.classList.add('hiddenScrollX-forced'); + } + } else { + if (layoutManager.desktop && !o.hideScrollbar) { + nativeScrollElement.classList.add('scrollY'); + } else { + nativeScrollElement.classList.add('scrollY'); + nativeScrollElement.classList.add('hiddenScrollY'); + + if (layoutManager.tv && o.allowNativeSmoothScroll !== false) { + nativeScrollElement.classList.add('smoothScrollY'); + } + } + + if (o.forceHideScrollbars) { + nativeScrollElement.classList.add('hiddenScrollY-forced'); + } + } + } else { + frame.style.overflow = 'hidden'; + slideeElement.style['will-change'] = 'transform'; + slideeElement.style.transition = 'transform ' + o.speed + 'ms ease-out'; + + if (o.horizontal) { + slideeElement.classList.add('animatedScrollX'); + } else { + slideeElement.classList.add('animatedScrollY'); + } + } + + if (transform || layoutManager.tv) { + // This can prevent others from being able to listen to mouse events + dom.addEventListener(dragSourceElement, 'mousedown', dragInitSlidee, { + //passive: true + }); + } + + initFrameResizeObserver(); + + if (transform) { + dom.addEventListener(dragSourceElement, 'touchstart', dragInitSlidee, { + passive: true + }); + + if (!o.horizontal) { + dom.addEventListener(frame, 'scroll', resetScroll, { + passive: true + }); + } + + if (o.mouseWheel) { + // Scrolling navigation + dom.addEventListener(scrollSource, wheelEvent, scrollHandler, { + passive: true + }); + } + } else if (o.horizontal) { + // Don't bind to mouse events with vertical scroll since the mouse wheel can handle this natively + + if (o.mouseWheel) { + // Scrolling navigation + dom.addEventListener(scrollSource, wheelEvent, scrollHandler, { + passive: true + }); + } + } + + dom.addEventListener(frame, 'click', onFrameClick, { + passive: true, + capture: true + }); + + // Mark instance as initialized + self.initialized = 1; + + // Load + load(true); + + // Return instance + return self; + }; +}; + +/** + * Slide SLIDEE by amount of pixels. + * + * @param {Int} delta Pixels/Items. Positive means forward, negative means backward. + * @param {Bool} immediate Reposition immediately without an animation. + * + * @return {Void} + */ +scrollerFactory.prototype.slideBy = function (delta, immediate) { + if (!delta) { + return; + } + this.slideTo(this._pos.dest + delta, immediate); +}; + +/** + * Core method for handling `toLocation` methods. + * + * @param {String} location + * @param {Mixed} item + * @param {Bool} immediate + * + * @return {Void} + */ +scrollerFactory.prototype.to = function (location, item, immediate) { + // Optional arguments logic + if (type(item) === 'boolean') { + immediate = item; + item = undefined; + } + + if (item === undefined) { + this.slideTo(this._pos[location], immediate); + } else { + var itemPos = this.getPos(item); + + if (itemPos) { + this.slideTo(itemPos[location], immediate, itemPos); + } + } +}; + +/** + * Animate element or the whole SLIDEE to the start of the frame. + * + * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE. + * @param {Bool} immediate Reposition immediately without an animation. + * + * @return {Void} + */ +scrollerFactory.prototype.toStart = function (item, immediate) { + this.to('start', item, immediate); +}; + +/** + * Animate element or the whole SLIDEE to the end of the frame. + * + * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE. + * @param {Bool} immediate Reposition immediately without an animation. + * + * @return {Void} + */ +scrollerFactory.prototype.toEnd = function (item, immediate) { + this.to('end', item, immediate); +}; + +/** + * Animate element or the whole SLIDEE to the center of the frame. + * + * @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE. + * @param {Bool} immediate Reposition immediately without an animation. + * + * @return {Void} + */ +scrollerFactory.prototype.toCenter = function (item, immediate) { + this.to('center', item, immediate); +}; + +scrollerFactory.create = function (frame, options) { + var instance = new scrollerFactory(frame, options); + return Promise.resolve(instance); +}; + +export default scrollerFactory; diff --git a/src/manifest.json b/src/manifest.json index fed1177e24..5b5ecd5516 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,6 +1,6 @@ { "name": "Jellyfin", - "description": "Jellyfin: the Free Software Media System.", + "description": "The Free Software Media System", "lang": "en-US", "short_name": "Jellyfin", "start_url": "index.html#!/home.html", diff --git a/src/plugins/backdropScreensaver/plugin.js b/src/plugins/backdropScreensaver/plugin.js index 88bfa1f4b7..917d8f48a3 100644 --- a/src/plugins/backdropScreensaver/plugin.js +++ b/src/plugins/backdropScreensaver/plugin.js @@ -1,5 +1,4 @@ /* eslint-disable indent */ -import connectionManager from 'connectionManager'; class BackdropScreensaver { constructor() { @@ -21,11 +20,9 @@ class BackdropScreensaver { Limit: 200 }; - const apiClient = connectionManager.currentApiClient(); + const apiClient = window.connectionManager.currentApiClient(); apiClient.getItems(apiClient.getCurrentUserId(), query).then((result) => { - if (result.Items.length) { - import('slideshow').then(({default: Slideshow}) => { const newSlideShow = new Slideshow({ showTitle: true, diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index 5e8732e97f..0303275be2 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -1,7 +1,7 @@ -import connectionManager from 'connectionManager'; import loading from 'loading'; import keyboardnavigation from 'keyboardnavigation'; import dialogHelper from 'dialogHelper'; +import dom from 'dom'; import events from 'events'; import 'css!./style'; import 'material-icons'; @@ -26,16 +26,16 @@ export class BookPlayer { this._loaded = false; loading.show(); - let elem = this.createMediaElement(); + const elem = this.createMediaElement(); return this.setCurrentSrc(elem, options); } stop() { this.unbindEvents(); - let elem = this._mediaElement; - let tocElement = this._tocElement; - let rendition = this._rendition; + const elem = this._mediaElement; + const tocElement = this._tocElement; + const rendition = this._rendition; if (elem) { dialogHelper.close(elem); @@ -92,24 +92,23 @@ export class BookPlayer { } onWindowKeyUp(e) { - let key = keyboardnavigation.getKeyName(e); - let rendition = this._rendition; - let book = rendition.book; + const key = keyboardnavigation.getKeyName(e); + // TODO: depending on the event this can be the document or the rendition itself + const rendition = this._rendition || this; + const book = rendition.book; + + if (this._loaded === false) return; switch (key) { case 'l': case 'ArrowRight': case 'Right': - if (this._loaded) { - book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next(); - } + book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next(); break; case 'j': case 'ArrowLeft': case 'Left': - if (this._loaded) { - book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev(); - } + book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev(); break; case 'Escape': if (this._tocElement) { @@ -123,12 +122,32 @@ export class BookPlayer { } } + onTouchStart(e) { + // TODO: depending on the event this can be the document or the rendition itself + const rendition = this._rendition || this; + const book = rendition.book; + + // check that the event is from the book or the document + if (!book || this._loaded === false) return; + + // epubjs stores pages off the screen or something for preloading + // get the modulus of the touch event to account for the increased width + if (!e.touches || e.touches.length === 0) return; + + const touch = e.touches[0].clientX % dom.getWindowSize().innerWidth; + if (touch < dom.getWindowSize().innerWidth / 2) { + book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev(); + } else { + book.package.metadata.direction === 'rtl' ? rendition.prev() : rendition.next(); + } + } + onDialogClosed() { this.stop(); } bindMediaElementEvents() { - let elem = this._mediaElement; + const elem = this._mediaElement; elem.addEventListener('close', this.onDialogClosed, {once: true}); elem.querySelector('.btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true}); @@ -139,12 +158,15 @@ export class BookPlayer { this.bindMediaElementEvents(); document.addEventListener('keyup', this.onWindowKeyUp); + document.addEventListener('touchstart', this.onTouchStart); + // FIXME: I don't really get why document keyup event is not triggered when epub is in focus this._rendition.on('keyup', this.onWindowKeyUp); + this._rendition.on('touchstart', this.onTouchStart); } unbindMediaElementEvents() { - let elem = this._mediaElement; + const elem = this._mediaElement; elem.removeEventListener('close', this.onDialogClosed); elem.querySelector('.btnBookplayerExit').removeEventListener('click', this.onDialogClosed); @@ -155,9 +177,13 @@ export class BookPlayer { if (this._mediaElement) { this.unbindMediaElementEvents(); } + document.removeEventListener('keyup', this.onWindowKeyUp); + document.removeEventListener('touchstart', this.onTouchStart); + if (this._rendition) { this._rendition.off('keyup', this.onWindowKeyUp); + this._rendition.off('touchstart', this.onTouchStart); } } @@ -169,13 +195,11 @@ export class BookPlayer { createMediaElement() { let elem = this._mediaElement; - if (elem) { return elem; } elem = document.getElementById('bookPlayer'); - if (!elem) { elem = dialogHelper.createDialog({ exitAnimationDuration: 400, @@ -185,6 +209,7 @@ export class BookPlayer { exitAnimation: 'fadeout', removeOnClose: true }); + elem.id = 'bookPlayer'; let html = ''; @@ -206,7 +231,7 @@ export class BookPlayer { } setCurrentSrc(elem, options) { - let item = options.items[0]; + const item = options.items[0]; this._currentItem = item; this.streamInfo = { started: true, @@ -216,24 +241,25 @@ export class BookPlayer { } }; - let serverId = item.ServerId; - let apiClient = connectionManager.getApiClient(serverId); + const serverId = item.ServerId; + const apiClient = window.connectionManager.getApiClient(serverId); return new Promise((resolve, reject) => { - require(['epubjs'], (epubjs) => { - let downloadHref = apiClient.getItemDownloadUrl(item.Id); - let book = epubjs.default(downloadHref, {openAs: 'epub'}); - let rendition = book.renderTo(elem, {width: '100%', height: '97%'}); + import('epubjs').then(({default: epubjs}) => { + const downloadHref = apiClient.getItemDownloadUrl(item.Id); + const book = epubjs(downloadHref, {openAs: 'epub'}); + const rendition = book.renderTo(elem, {width: '100%', height: '97%'}); this._currentSrc = downloadHref; this._rendition = rendition; - let cancellationToken = { + const cancellationToken = { shouldCancel: false }; + this._cancellationToken = cancellationToken; return rendition.display().then(() => { - let epubElem = document.querySelector('.epub-container'); + const epubElem = document.querySelector('.epub-container'); epubElem.style.display = 'none'; this.bindEvents(); @@ -253,7 +279,6 @@ export class BookPlayer { epubElem.style.display = 'block'; rendition.on('relocated', (locations) => { this._progress = book.locations.percentageFromCfi(locations.start.cfi); - events.trigger(this, 'timeupdate'); }); @@ -262,7 +287,7 @@ export class BookPlayer { return resolve(); }); }, () => { - console.error('Failed to display epub'); + console.error('failed to display epub'); return reject(); }); }); diff --git a/src/plugins/bookPlayer/tableOfContents.js b/src/plugins/bookPlayer/tableOfContents.js index 23e288aff5..a1c5d8f220 100644 --- a/src/plugins/bookPlayer/tableOfContents.js +++ b/src/plugins/bookPlayer/tableOfContents.js @@ -11,7 +11,7 @@ export default class TableOfContents { } destroy() { - let elem = this._elem; + const elem = this._elem; if (elem) { this.unbindEvents(); dialogHelper.close(elem); @@ -21,14 +21,14 @@ export default class TableOfContents { } bindEvents() { - let elem = this._elem; + const elem = this._elem; elem.addEventListener('close', this.onDialogClosed, {once: true}); elem.querySelector('.btnBookplayerTocClose').addEventListener('click', this.onDialogClosed, {once: true}); } unbindEvents() { - let elem = this._elem; + const elem = this._elem; elem.removeEventListener('close', this.onDialogClosed); elem.querySelector('.btnBookplayerTocClose').removeEventListener('click', this.onDialogClosed); @@ -39,10 +39,10 @@ export default class TableOfContents { } replaceLinks(contents, f) { - let links = contents.querySelectorAll('a[href]'); + const links = contents.querySelectorAll('a[href]'); links.forEach((link) => { - let href = link.getAttribute('href'); + const href = link.getAttribute('href'); link.onclick = () => { f(href); @@ -52,9 +52,9 @@ export default class TableOfContents { } createMediaElement() { - let rendition = this._rendition; + const rendition = this._rendition; - let elem = dialogHelper.createDialog({ + const elem = dialogHelper.createDialog({ size: 'small', autoFocus: false, removeOnClose: true @@ -69,7 +69,7 @@ export default class TableOfContents { rendition.book.navigation.forEach((chapter) => { tocHtml += '
  • '; // Remove '../' from href - let link = chapter.href.startsWith('../') ? chapter.href.substr(3) : chapter.href; + const link = chapter.href.startsWith('../') ? chapter.href.substr(3) : chapter.href; tocHtml += `${chapter.label}`; tocHtml += '
    • '; }); @@ -78,7 +78,7 @@ export default class TableOfContents { elem.innerHTML = tocHtml; this.replaceLinks(elem, (href) => { - let relative = rendition.book.path.relative(href); + const relative = rendition.book.path.relative(href); rendition.display(relative); this.destroy(); }); diff --git a/src/plugins/chromecastPlayer/chromecastHelper.js b/src/plugins/chromecastPlayer/chromecastHelper.js new file mode 100644 index 0000000000..e92fa4471b --- /dev/null +++ b/src/plugins/chromecastPlayer/chromecastHelper.js @@ -0,0 +1,229 @@ +import events from 'events'; + +// LinkParser +// +// https://github.com/ravisorg/LinkParser +// +// Locate and extract almost any URL within a string. Handles protocol-less domains, IPv4 and +// IPv6, unrecognised TLDs, and more. +// +// This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. +// http://creativecommons.org/licenses/by-sa/4.0/ +(function () { + // Original URL regex from the Android android.text.util.Linkify function, found here: + // http://stackoverflow.com/a/19696443 + // + // However there were problems with it, most probably related to the fact it was + // written in 2007, and it's been highly modified. + // + // 1) I didn't like the fact that it was tied to specific TLDs, since new ones + // are being added all the time it wouldn't be reasonable to expect developer to + // be continually updating their regular expressions. + // + // 2) It didn't allow unicode characters in the domains which are now allowed in + // many languages, (including some IDN TLDs). Again these are constantly being + // added to and it doesn't seem reasonable to hard-code them. Note this ended up + // not being possible in standard JS due to the way it handles multibyte strings. + // It is possible using XRegExp, however a big performance hit results. Disabled + // for now. + // + // 3) It didn't allow for IPv6 hostnames + // IPv6 regex from http://stackoverflow.com/a/17871737 + // + // 4) It was very poorly commented + // + // 5) It wasn't as smart as it could have been about what should be part of a + // URL and what should be part of human language. + + const protocols = '(?:(?:http|https|rtsp|ftp):\\/\\/)'; + const credentials = "(?:(?:[a-z0-9\\$\\-\\_\\.\\+\\!\\*\\'\\(\\)\\,\\;\\?\\&\\=]|(?:\\%[a-f0-9]{2})){1,64}" // username (1-64 normal or url escaped characters) + + "(?:\\:(?:[a-z0-9\\$\\-\\_\\.\\+\\!\\*\\'\\(\\)\\,\\;\\?\\&\\=]|(?:\\%[a-f0-9]{2})){1,25})?" // followed by optional password (: + 1-25 normal or url escaped characters) + + '\\@)'; + + // IPv6 Regex http://forums.intermapper.com/viewtopic.php?t=452 + // by Dartware, LLC is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License + // http://intermapper.com/ + const ipv6 = '(' + + '(([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))' + + '|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))' + + '|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))' + + '|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))' + + '|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))' + + '|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))' + + '|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))' + + '|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))' + + ')(%.+)?'; + + const ipv4 = '(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9])\\.' + + '(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9]|0)\\.' + + '(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9]|0)\\.' + + '(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[0-9])'; + + // This would have been a lot cleaner if JS RegExp supported conditionals... + const linkRegExpString = + + // begin match for protocol / username / password / host + '(?:' + + // ============================ + // If we have a recognized protocol at the beginning of the URL, we're + // more relaxed about what we accept, because we assume the user wants + // this to be a URL, and we're not accidentally matching human language + + protocols + '?' + + // optional username:password@ + + credentials + '?' + + // IP address (both v4 and v6) + + '(?:' + + // IPv6 + + ipv6 + + // IPv4 + + '|' + ipv4 + + + ')' + + // end match for protocol / username / password / host + + ')' + + // optional port number + + '(?:\\:\\d{1,5})?' + + // plus optional path and query params (no unicode allowed here?) + + '(?:' + + '\\/(?:' + // some characters we'll accept because it's unlikely human language + // would use them after a URL unless they were part of the url + + '(?:[a-z0-9\\/\\@\\&\\#\\~\\*\\_\\-\\+])' + + '|(?:\\%[a-f0-9]{2})' + // some characters are much more likely to be used AFTER a url and + // were not intended to be included in the url itself. Mostly end + // of sentence type things. It's also likely that the URL would + // still work if any of these characters were missing from the end + // because we parsed it incorrectly. For these characters to be accepted + // they must be followed by another character that we're reasonably + // sure is part of the url + + "|(?:[\\;\\?\\:\\.\\!\\'\\(\\)\\,\\=]+(?=(?:[a-z0-9\\/\\@\\&\\#\\~\\*\\_\\-\\+])|(?:\\%[a-f0-9]{2})))" + + ')*' + + '|\\b|\$' + + ')'; + + // regex = XRegExp(regex,'gi'); + const linkRegExp = RegExp(linkRegExpString, 'gi'); + + const protocolRegExp = RegExp('^' + protocols, 'i'); + + // if url doesn't begin with a known protocol, add http by default + function ensureProtocol(url) { + if (!url.match(protocolRegExp)) { + url = 'http://' + url; + } + return url; + } + + // look for links in the text + const LinkParser = { + parse: function (text) { + const links = []; + let match; + + // eslint-disable-next-line no-cond-assign + while (match = linkRegExp.exec(text)) { + console.debug(match); + const txt = match[0]; + const pos = match.index; + const len = txt.length; + const url = ensureProtocol(text); + links.push({ 'pos': pos, 'text': txt, 'len': len, 'url': url }); + } + + return links; + } + + }; + + window.LinkParser = LinkParser; +})(); + +let cache = {}; + +// TODO: Replace with isIP (https://www.npmjs.com/package/is-ip) +function isValidIpAddress(address) { + const links = LinkParser.parse(address); + + return links.length == 1; +} + +// TODO: Add IPv6 support. Potentially replace with isLocalhost (https://www.npmjs.com/package/is-localhost-ip) +function isLocalIpAddress(address) { + address = address.toLowerCase(); + + if (address.includes('127.0.0.1')) { + return true; + } + if (address.includes('localhost')) { + return true; + } + + return false; +} + +export function getServerAddress(apiClient) { + const serverAddress = apiClient.serverAddress(); + + if (isValidIpAddress(serverAddress) && !isLocalIpAddress(serverAddress)) { + return Promise.resolve(serverAddress); + } + + const cachedValue = getCachedValue(serverAddress); + if (cachedValue) { + return Promise.resolve(cachedValue); + } + + return apiClient.getEndpointInfo().then(function (endpoint) { + if (endpoint.IsInNetwork) { + return apiClient.getPublicSystemInfo().then(function (info) { + let localAddress = info.LocalAddress; + if (!localAddress) { + console.debug('No valid local address returned, defaulting to external one'); + localAddress = serverAddress; + } + addToCache(serverAddress, localAddress); + return localAddress; + }); + } else { + addToCache(serverAddress, serverAddress); + return serverAddress; + } + }); +} + +function clearCache() { + cache = {}; +} + +function addToCache(key, value) { + cache[key] = { + value: value, + time: new Date().getTime() + }; +} + +function getCachedValue(key) { + const obj = cache[key]; + + if (obj && (new Date().getTime() - obj.time) < 180000) { + return obj.value; + } + + return null; +} + +events.on(window.connectionManager, 'localusersignedin', clearCache); +events.on(window.connectionManager, 'localusersignedout', clearCache); + +export default { + getServerAddress: getServerAddress +}; diff --git a/src/plugins/chromecastPlayer/chromecastHelpers.js b/src/plugins/chromecastPlayer/chromecastHelpers.js deleted file mode 100644 index ca2d27c977..0000000000 --- a/src/plugins/chromecastPlayer/chromecastHelpers.js +++ /dev/null @@ -1,234 +0,0 @@ -define(['events'], function (events) { - 'use strict'; - - // LinkParser - // - // https://github.com/ravisorg/LinkParser - // - // Locate and extract almost any URL within a string. Handles protocol-less domains, IPv4 and - // IPv6, unrecognised TLDs, and more. - // - // This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. - // http://creativecommons.org/licenses/by-sa/4.0/ - (function () { - - // Original URL regex from the Android android.text.util.Linkify function, found here: - // http://stackoverflow.com/a/19696443 - // - // However there were problems with it, most probably related to the fact it was - // written in 2007, and it's been highly modified. - // - // 1) I didn't like the fact that it was tied to specific TLDs, since new ones - // are being added all the time it wouldn't be reasonable to expect developer to - // be continually updating their regular expressions. - // - // 2) It didn't allow unicode characters in the domains which are now allowed in - // many languages, (including some IDN TLDs). Again these are constantly being - // added to and it doesn't seem reasonable to hard-code them. Note this ended up - // not being possible in standard JS due to the way it handles multibyte strings. - // It is possible using XRegExp, however a big performance hit results. Disabled - // for now. - // - // 3) It didn't allow for IPv6 hostnames - // IPv6 regex from http://stackoverflow.com/a/17871737 - // - // 4) It was very poorly commented - // - // 5) It wasn't as smart as it could have been about what should be part of a - // URL and what should be part of human language. - - var protocols = '(?:(?:http|https|rtsp|ftp):\\/\\/)'; - var credentials = "(?:(?:[a-z0-9\\$\\-\\_\\.\\+\\!\\*\\'\\(\\)\\,\\;\\?\\&\\=]|(?:\\%[a-f0-9]{2})){1,64}" // username (1-64 normal or url escaped characters) - + "(?:\\:(?:[a-z0-9\\$\\-\\_\\.\\+\\!\\*\\'\\(\\)\\,\\;\\?\\&\\=]|(?:\\%[a-f0-9]{2})){1,25})?" // followed by optional password (: + 1-25 normal or url escaped characters) - + '\\@)'; - - // IPv6 Regex http://forums.intermapper.com/viewtopic.php?t=452 - // by Dartware, LLC is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License - // http://intermapper.com/ - var ipv6 = '(' - + '(([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))' - + '|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))' - + '|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))' - + '|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))' - + '|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))' - + '|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))' - + '|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))' - + '|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))' - + ')(%.+)?'; - - var ipv4 = '(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9])\\.' - + '(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9]|0)\\.' - + '(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9]|0)\\.' - + '(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[0-9])'; - - // This would have been a lot cleaner if JS RegExp supported conditionals... - var linkRegExpString = - - // begin match for protocol / username / password / host - '(?:' - - // ============================ - // If we have a recognized protocol at the beginning of the URL, we're - // more relaxed about what we accept, because we assume the user wants - // this to be a URL, and we're not accidentally matching human language - + protocols + '?' - - // optional username:password@ - + credentials + '?' - - // IP address (both v4 and v6) - + '(?:' - - // IPv6 - + ipv6 - - // IPv4 - + '|' + ipv4 - - + ')' - - // end match for protocol / username / password / host - + ')' - - // optional port number - + '(?:\\:\\d{1,5})?' - - // plus optional path and query params (no unicode allowed here?) - + '(?:' - + '\\/(?:' - // some characters we'll accept because it's unlikely human language - // would use them after a URL unless they were part of the url - + '(?:[a-z0-9\\/\\@\\&\\#\\~\\*\\_\\-\\+])' - + '|(?:\\%[a-f0-9]{2})' - // some characters are much more likely to be used AFTER a url and - // were not intended to be included in the url itself. Mostly end - // of sentence type things. It's also likely that the URL would - // still work if any of these characters were missing from the end - // because we parsed it incorrectly. For these characters to be accepted - // they must be followed by another character that we're reasonably - // sure is part of the url - + "|(?:[\\;\\?\\:\\.\\!\\'\\(\\)\\,\\=]+(?=(?:[a-z0-9\\/\\@\\&\\#\\~\\*\\_\\-\\+])|(?:\\%[a-f0-9]{2})))" - + ')*' - + '|\\b|\$' - + ')'; - - // regex = XRegExp(regex,'gi'); - var linkRegExp = RegExp(linkRegExpString, 'gi'); - - var protocolRegExp = RegExp('^' + protocols, 'i'); - - // if url doesn't begin with a known protocol, add http by default - function ensureProtocol(url) { - if (!url.match(protocolRegExp)) { - url = 'http://' + url; - } - return url; - } - - // look for links in the text - var LinkParser = { - parse: function (text) { - var links = []; - var match; - - // eslint-disable-next-line no-cond-assign - while (match = linkRegExp.exec(text)) { - console.debug(match); - var txt = match[0]; - var pos = match.index; - var len = txt.length; - var url = ensureProtocol(text); - links.push({ 'pos': pos, 'text': txt, 'len': len, 'url': url }); - } - - return links; - } - - }; - - window.LinkParser = LinkParser; - })(); - - var cache = {}; - - function isValidIpAddress(address) { - - var links = LinkParser.parse(address); - - return links.length == 1; - } - - function isLocalIpAddress(address) { - - address = address.toLowerCase(); - - if (address.indexOf('127.0.0.1') !== -1) { - return true; - } - if (address.indexOf('localhost') !== -1) { - return true; - } - - return false; - } - - function getServerAddress(apiClient) { - - var serverAddress = apiClient.serverAddress(); - - if (isValidIpAddress(serverAddress) && !isLocalIpAddress(serverAddress)) { - return Promise.resolve(serverAddress); - } - - var cachedValue = getCachedValue(serverAddress); - if (cachedValue) { - return Promise.resolve(cachedValue); - } - - return apiClient.getEndpointInfo().then(function (endpoint) { - if (endpoint.IsInNetwork) { - return apiClient.getPublicSystemInfo().then(function (info) { - var localAddress = info.LocalAddress; - if (!localAddress) { - console.debug('No valid local address returned, defaulting to external one'); - localAddress = serverAddress; - } - addToCache(serverAddress, localAddress); - return localAddress; - }); - } else { - addToCache(serverAddress, serverAddress); - return serverAddress; - } - }); - } - - function clearCache() { - cache = {}; - } - - function addToCache(key, value) { - cache[key] = { - value: value, - time: new Date().getTime() - }; - } - - function getCachedValue(key) { - - var obj = cache[key]; - - if (obj && (new Date().getTime() - obj.time) < 180000) { - return obj.value; - } - - return null; - } - - events.on(ConnectionManager, 'localusersignedin', clearCache); - events.on(ConnectionManager, 'localusersignedout', clearCache); - - return { - getServerAddress: getServerAddress - }; -}); diff --git a/src/plugins/chromecastPlayer/plugin.js b/src/plugins/chromecastPlayer/plugin.js index b3f75f7a6d..f61a0055af 100644 --- a/src/plugins/chromecastPlayer/plugin.js +++ b/src/plugins/chromecastPlayer/plugin.js @@ -1,66 +1,70 @@ -define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', 'globalize', 'events', 'require', 'castSenderApiLoader'], function (appSettings, userSettings, playbackManager, connectionManager, globalize, events, require, castSenderApiLoader) { - 'use strict'; +import appSettings from 'appSettings'; +import * as userSettings from 'userSettings'; +import playbackManager from 'playbackManager'; +import globalize from 'globalize'; +import events from 'events'; +import castSenderApiLoader from 'castSenderApiLoader'; - // Based on https://github.com/googlecast/CastVideos-chrome/blob/master/CastVideos.js - var currentResolve; - var currentReject; +// Based on https://github.com/googlecast/CastVideos-chrome/blob/master/CastVideos.js - var PlayerName = 'Google Cast'; +let currentResolve; +let currentReject; - function sendConnectionResult(isOk) { +const PlayerName = 'Google Cast'; - var resolve = currentResolve; - var reject = currentReject; +function sendConnectionResult(isOk) { + const resolve = currentResolve; + const reject = currentReject; - currentResolve = null; - currentReject = null; + currentResolve = null; + currentReject = null; - if (isOk) { - if (resolve) { - resolve(); - } + if (isOk) { + if (resolve) { + resolve(); + } + } else { + if (reject) { + reject(); } else { - if (reject) { - reject(); - } else { - playbackManager.removeActivePlayer(PlayerName); - } + playbackManager.removeActivePlayer(PlayerName); } } +} - /** - * Constants of states for Chromecast device - **/ - var DEVICE_STATE = { - 'IDLE': 0, - 'ACTIVE': 1, - 'WARNING': 2, - 'ERROR': 3 - }; +/** + * Constants of states for Chromecast device + **/ +const DEVICE_STATE = { + 'IDLE': 0, + 'ACTIVE': 1, + 'WARNING': 2, + 'ERROR': 3 +}; - /** - * Constants of states for CastPlayer - **/ - var PLAYER_STATE = { - 'IDLE': 'IDLE', - 'LOADING': 'LOADING', - 'LOADED': 'LOADED', - 'PLAYING': 'PLAYING', - 'PAUSED': 'PAUSED', - 'STOPPED': 'STOPPED', - 'SEEKING': 'SEEKING', - 'ERROR': 'ERROR' - }; +/** + * Constants of states for CastPlayer + **/ +const PLAYER_STATE = { + 'IDLE': 'IDLE', + 'LOADING': 'LOADING', + 'LOADED': 'LOADED', + 'PLAYING': 'PLAYING', + 'PAUSED': 'PAUSED', + 'STOPPED': 'STOPPED', + 'SEEKING': 'SEEKING', + 'ERROR': 'ERROR' +}; - // production version registered with google - // replace this value if you want to test changes on another instance - var applicationStable = 'F007D354'; - var applicationNightly = '6F511C87'; +// production version registered with google +// replace this value if you want to test changes on another instance +const applicationStable = 'F007D354'; +const applicationUnstable = '6F511C87'; - var messageNamespace = 'urn:x-cast:com.connectsdk'; - - var CastPlayer = function () { +const messageNamespace = 'urn:x-cast:com.connectsdk'; +class CastPlayer { + constructor() { /* device variables */ // @type {DEVICE_STATE} A state for device this.deviceState = DEVICE_STATE.IDLE; @@ -81,7 +85,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' this.mediaStatusUpdateHandler = this.onMediaStatusUpdate.bind(this); this.initializeCastPlayer(); - }; + } /** * Initialize Cast media player @@ -89,8 +93,8 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' * invoked once the API has finished initialization. The sessionListener and * receiverListener may be invoked at any time afterwards, and possibly more than once. */ - CastPlayer.prototype.initializeCastPlayer = function () { - var chrome = window.chrome; + initializeCastPlayer() { + const chrome = window.chrome; if (!chrome) { return; } @@ -100,35 +104,35 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' return; } - var applicationID = applicationStable; - if (userSettings.chromecastVersion() === 'nightly') { - applicationID = applicationNightly; + let applicationID = applicationStable; + if (userSettings.chromecastVersion() === 'unstable') { + applicationID = applicationUnstable; } // request session - var sessionRequest = new chrome.cast.SessionRequest(applicationID); - var apiConfig = new chrome.cast.ApiConfig(sessionRequest, + const sessionRequest = new chrome.cast.SessionRequest(applicationID); + const apiConfig = new chrome.cast.ApiConfig(sessionRequest, this.sessionListener.bind(this), this.receiverListener.bind(this)); console.debug('chromecast.initialize'); chrome.cast.initialize(apiConfig, this.onInitSuccess.bind(this), this.errorHandler); - }; + } /** * Callback function for init success */ - CastPlayer.prototype.onInitSuccess = function () { + onInitSuccess() { this.isInitialized = true; console.debug('chromecast init success'); - }; + } /** * Generic error callback function */ - CastPlayer.prototype.onError = function () { + onError() { console.debug('chromecast error'); - }; + } /** * @param {!Object} e A new session @@ -137,7 +141,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' * join existing session and occur in Cast mode and media * status gets synced up with current media of the session */ - CastPlayer.prototype.sessionListener = function (e) { + sessionListener(e) { this.session = e; if (this.session) { if (this.session.media[0]) { @@ -146,24 +150,15 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' this.onSessionConnected(e); } - }; - - function alertText(text, title) { - require(['alert'], function (alert) { - alert({ - text: text, - title: title - }); - }); } - CastPlayer.prototype.messageListener = function (namespace, message) { + messageListener(namespace, message) { if (typeof (message) === 'string') { message = JSON.parse(message); } if (message.type === 'playbackerror') { - var errorCode = message.data; + const errorCode = message.data; setTimeout(function () { alertText(globalize.translate('MessagePlaybackError' + errorCode), globalize.translate('HeaderPlaybackError')); }, 300); @@ -174,14 +169,14 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' } else if (message.type) { events.trigger(this, message.type, [message.data]); } - }; + } /** * @param {string} e Receiver availability * This indicates availability of receivers but * does not provide a list of device IDs */ - CastPlayer.prototype.receiverListener = function (e) { + receiverListener(e) { if (e === 'available') { console.debug('chromecast receiver found'); this.hasReceivers = true; @@ -189,12 +184,12 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' console.debug('chromecast receiver list empty'); this.hasReceivers = false; } - }; + } /** * session update listener */ - CastPlayer.prototype.sessionUpdateListener = function (isAlive) { + sessionUpdateListener(isAlive) { if (isAlive) { console.debug('sessionUpdateListener: already alive'); } else { @@ -209,28 +204,28 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' sendConnectionResult(false); } - }; + } /** * Requests that a receiver application session be created or joined. By default, the SessionRequest * passed to the API at initialization time is used; this may be overridden by passing a different * session request in opt_sessionRequest. */ - CastPlayer.prototype.launchApp = function () { + launchApp() { console.debug('chromecast launching app...'); chrome.cast.requestSession(this.onRequestSessionSuccess.bind(this), this.onLaunchError.bind(this)); - }; + } /** * Callback function for request session success * @param {Object} e A chrome.cast.Session object */ - CastPlayer.prototype.onRequestSessionSuccess = function (e) { + onRequestSessionSuccess(e) { console.debug('chromecast session success: ' + e.sessionId); this.onSessionConnected(e); - }; + } - CastPlayer.prototype.onSessionConnected = function (session) { + onSessionConnected(session) { this.session = session; this.deviceState = DEVICE_STATE.ACTIVE; @@ -246,46 +241,38 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' options: {}, command: 'Identify' }); - }; - - function onVolumeUpKeyDown() { - playbackManager.volumeUp(); - } - - function onVolumeDownKeyDown() { - playbackManager.volumeDown(); } /** * session update listener */ - CastPlayer.prototype.sessionMediaListener = function (e) { + sessionMediaListener(e) { this.currentMediaSession = e; this.currentMediaSession.addUpdateListener(this.mediaStatusUpdateHandler); - }; + } /** * Callback function for launch error */ - CastPlayer.prototype.onLaunchError = function () { + onLaunchError() { console.debug('chromecast launch error'); this.deviceState = DEVICE_STATE.ERROR; sendConnectionResult(false); - }; + } /** * Stops the running receiver application associated with the session. */ - CastPlayer.prototype.stopApp = function () { + stopApp() { if (this.session) { this.session.stop(this.onStopAppSuccess.bind(this, 'Session stopped'), this.errorHandler); } - }; + } /** * Callback function for stop app success */ - CastPlayer.prototype.onStopAppSuccess = function (message) { + onStopAppSuccess(message) { console.debug(message); this.deviceState = DEVICE_STATE.IDLE; @@ -294,13 +281,13 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' document.removeEventListener('volumedownbutton', onVolumeDownKeyDown, false); this.currentMediaSession = null; - }; + } /** * Loads media into a running receiver application * @param {Number} mediaIndex An index number to indicate current media content */ - CastPlayer.prototype.loadMedia = function (options, command) { + loadMedia(options, command) { if (!this.session) { console.debug('no session'); return Promise.reject(); @@ -322,27 +309,26 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' options: options, command: command }); - }; + } - CastPlayer.prototype.sendMessage = function (message) { + sendMessage(message) { + const player = this; - var player = this; + let receiverName = null; - var receiverName = null; - - var session = player.session; + const session = player.session; if (session && session.receiver && session.receiver.friendlyName) { receiverName = session.receiver.friendlyName; } - var apiClient; + let apiClient; if (message.options && message.options.ServerId) { - apiClient = connectionManager.getApiClient(message.options.ServerId); + apiClient = window.connectionManager.getApiClient(message.options.ServerId); } else if (message.options && message.options.items && message.options.items.length) { - apiClient = connectionManager.getApiClient(message.options.items[0].ServerId); + apiClient = window.connectionManager.getApiClient(message.options.items[0].ServerId); } else { - apiClient = connectionManager.currentApiClient(); + apiClient = window.connectionManager.currentApiClient(); } message = Object.assign(message, { @@ -355,7 +341,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' receiverName: receiverName }); - var bitrateSetting = appSettings.maxChromecastBitrate(); + const bitrateSetting = appSettings.maxChromecastBitrate(); if (bitrateSetting) { message.maxBitrate = bitrateSetting; } @@ -366,32 +352,31 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' } return new Promise(function (resolve, reject) { - require(['chromecastHelper'], function (chromecastHelper) { + import('./chromecastHelper').then(({ default: chromecastHelper }) => { chromecastHelper.getServerAddress(apiClient).then(function (serverAddress) { message.serverAddress = serverAddress; player.sendMessageInternal(message).then(resolve, reject); }, reject); }); }); - }; + } - CastPlayer.prototype.sendMessageInternal = function (message) { + sendMessageInternal(message) { message = JSON.stringify(message); this.session.sendMessage(messageNamespace, message, this.onPlayCommandSuccess.bind(this), this.errorHandler); return Promise.resolve(); - }; + } - CastPlayer.prototype.onPlayCommandSuccess = function () { + onPlayCommandSuccess() { console.debug('Message was sent to receiver ok.'); - }; + } /** * Callback function for loadMedia success * @param {Object} mediaSession A new media object. */ - CastPlayer.prototype.onMediaDiscovered = function (how, mediaSession) { - + onMediaDiscovered(how, mediaSession) { console.debug('chromecast new media session ID:' + mediaSession.mediaSessionId + ' (' + how + ')'); this.currentMediaSession = mediaSession; @@ -404,24 +389,24 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' } this.currentMediaSession.addUpdateListener(this.mediaStatusUpdateHandler); - }; + } /** * Callback function for media status update from receiver * @param {!Boolean} e true/false */ - CastPlayer.prototype.onMediaStatusUpdate = function (e) { + onMediaStatusUpdate(e) { console.debug('chromecast updating media: ' + e); if (e === false) { this.castPlayerState = PLAYER_STATE.IDLE; } - }; + } /** * Set media volume in Cast mode * @param {Boolean} mute A boolean */ - CastPlayer.prototype.setReceiverVolume = function (mute, vol) { + setReceiverVolume(mute, vol) { if (!this.currentMediaSession) { console.debug('this.currentMediaSession is null'); return; @@ -436,154 +421,161 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' this.mediaCommandSuccessCallback.bind(this), this.errorHandler); } - }; + } /** * Mute CC */ - CastPlayer.prototype.mute = function () { + mute() { this.setReceiverVolume(true); - }; + } /** * Callback function for media command success */ - CastPlayer.prototype.mediaCommandSuccessCallback = function (info, e) { + mediaCommandSuccessCallback(info, e) { console.debug(info); - }; + } +} - function normalizeImages(state) { +function alertText(text, title) { + import('alert').then(({default: alert}) => { + alert({ + text: text, + title: title + }); + }); +} - if (state && state.NowPlayingItem) { +function onVolumeUpKeyDown() { + playbackManager.volumeUp(); +} - var item = state.NowPlayingItem; +function onVolumeDownKeyDown() { + playbackManager.volumeDown(); +} - if (!item.ImageTags || !item.ImageTags.Primary) { - if (item.PrimaryImageTag) { - item.ImageTags = item.ImageTags || {}; - item.ImageTags.Primary = item.PrimaryImageTag; - } - } - if (item.BackdropImageTag && item.BackdropItemId === item.Id) { - item.BackdropImageTags = [item.BackdropImageTag]; - } - if (item.BackdropImageTag && item.BackdropItemId !== item.Id) { - item.ParentBackdropImageTags = [item.BackdropImageTag]; - item.ParentBackdropItemId = item.BackdropItemId; +function normalizeImages(state) { + if (state && state.NowPlayingItem) { + const item = state.NowPlayingItem; + + if (!item.ImageTags || !item.ImageTags.Primary) { + if (item.PrimaryImageTag) { + item.ImageTags = item.ImageTags || {}; + item.ImageTags.Primary = item.PrimaryImageTag; } } + if (item.BackdropImageTag && item.BackdropItemId === item.Id) { + item.BackdropImageTags = [item.BackdropImageTag]; + } + if (item.BackdropImageTag && item.BackdropItemId !== item.Id) { + item.ParentBackdropImageTags = [item.BackdropImageTag]; + item.ParentBackdropItemId = item.BackdropItemId; + } } +} - function getItemsForPlayback(apiClient, query) { +function getItemsForPlayback(apiClient, query) { + const userId = apiClient.getCurrentUserId(); - var userId = apiClient.getCurrentUserId(); + if (query.Ids && query.Ids.split(',').length === 1) { + return apiClient.getItem(userId, query.Ids.split(',')).then(function (item) { + return { + Items: [item], + TotalRecordCount: 1 + }; + }); + } else { + query.Limit = query.Limit || 100; + query.ExcludeLocationTypes = 'Virtual'; + query.EnableTotalRecordCount = false; - if (query.Ids && query.Ids.split(',').length === 1) { - return apiClient.getItem(userId, query.Ids.split(',')).then(function (item) { - return { - Items: [item], - TotalRecordCount: 1 - }; - }); + return apiClient.getItems(userId, query); + } +} + +function bindEventForRelay(instance, eventName) { + events.on(instance._castPlayer, eventName, function (e, data) { + console.debug('cc: ' + eventName); + const state = instance.getPlayerStateInternal(data); + + events.trigger(instance, eventName, [state]); + }); +} + +function initializeChromecast() { + const instance = this; + instance._castPlayer = new CastPlayer(); + + // To allow the native android app to override + document.dispatchEvent(new CustomEvent('chromecastloaded', { + detail: { + player: instance + } + })); + + events.on(instance._castPlayer, 'connect', function (e) { + if (currentResolve) { + sendConnectionResult(true); } else { - - query.Limit = query.Limit || 100; - query.ExcludeLocationTypes = 'Virtual'; - query.EnableTotalRecordCount = false; - - return apiClient.getItems(userId, query); + playbackManager.setActivePlayer(PlayerName, instance.getCurrentTargetInfo()); } - } - function bindEventForRelay(instance, eventName) { + console.debug('cc: connect'); + // Reset this so that statechange will fire + instance.lastPlayerData = null; + }); - events.on(instance._castPlayer, eventName, function (e, data) { + events.on(instance._castPlayer, 'playbackstart', function (e, data) { + console.debug('cc: playbackstart'); - console.debug('cc: ' + eventName); - var state = instance.getPlayerStateInternal(data); + instance._castPlayer.initializeCastPlayer(); - events.trigger(instance, eventName, [state]); - }); - } + const state = instance.getPlayerStateInternal(data); + events.trigger(instance, 'playbackstart', [state]); + }); - function initializeChromecast() { + events.on(instance._castPlayer, 'playbackstop', function (e, data) { + console.debug('cc: playbackstop'); + let state = instance.getPlayerStateInternal(data); - var instance = this; - instance._castPlayer = new CastPlayer(); + events.trigger(instance, 'playbackstop', [state]); - // To allow the native android app to override - document.dispatchEvent(new CustomEvent('chromecastloaded', { - detail: { - player: instance - } - })); + state = instance.lastPlayerData.PlayState || {}; + const volume = state.VolumeLevel || 0.5; + const mute = state.IsMuted || false; - events.on(instance._castPlayer, 'connect', function (e) { + // Reset this so the next query doesn't make it appear like content is playing. + instance.lastPlayerData = {}; + instance.lastPlayerData.PlayState = {}; + instance.lastPlayerData.PlayState.VolumeLevel = volume; + instance.lastPlayerData.PlayState.IsMuted = mute; + }); - if (currentResolve) { - sendConnectionResult(true); - } else { - playbackManager.setActivePlayer(PlayerName, instance.getCurrentTargetInfo()); - } + events.on(instance._castPlayer, 'playbackprogress', function (e, data) { + console.debug('cc: positionchange'); + const state = instance.getPlayerStateInternal(data); - console.debug('cc: connect'); - // Reset this so that statechange will fire - instance.lastPlayerData = null; - }); + events.trigger(instance, 'timeupdate', [state]); + }); - events.on(instance._castPlayer, 'playbackstart', function (e, data) { + bindEventForRelay(instance, 'timeupdate'); + bindEventForRelay(instance, 'pause'); + bindEventForRelay(instance, 'unpause'); + bindEventForRelay(instance, 'volumechange'); + bindEventForRelay(instance, 'repeatmodechange'); + bindEventForRelay(instance, 'shufflequeuemodechange'); - console.debug('cc: playbackstart'); + events.on(instance._castPlayer, 'playstatechange', function (e, data) { + console.debug('cc: playstatechange'); + const state = instance.getPlayerStateInternal(data); - instance._castPlayer.initializeCastPlayer(); - - var state = instance.getPlayerStateInternal(data); - events.trigger(instance, 'playbackstart', [state]); - }); - - events.on(instance._castPlayer, 'playbackstop', function (e, data) { - - console.debug('cc: playbackstop'); - var state = instance.getPlayerStateInternal(data); - - events.trigger(instance, 'playbackstop', [state]); - - var state = instance.lastPlayerData.PlayState || {}; - var volume = state.VolumeLevel || 0.5; - var mute = state.IsMuted || false; - - // Reset this so the next query doesn't make it appear like content is playing. - instance.lastPlayerData = {}; - instance.lastPlayerData.PlayState = {}; - instance.lastPlayerData.PlayState.VolumeLevel = volume; - instance.lastPlayerData.PlayState.IsMuted = mute; - }); - - events.on(instance._castPlayer, 'playbackprogress', function (e, data) { - - console.debug('cc: positionchange'); - var state = instance.getPlayerStateInternal(data); - - events.trigger(instance, 'timeupdate', [state]); - }); - - bindEventForRelay(instance, 'timeupdate'); - bindEventForRelay(instance, 'pause'); - bindEventForRelay(instance, 'unpause'); - bindEventForRelay(instance, 'volumechange'); - bindEventForRelay(instance, 'repeatmodechange'); - - events.on(instance._castPlayer, 'playstatechange', function (e, data) { - - console.debug('cc: playstatechange'); - var state = instance.getPlayerStateInternal(data); - - events.trigger(instance, 'pause', [state]); - }); - } - - function ChromecastPlayer() { + events.trigger(instance, 'pause', [state]); + }); +} +class ChromecastPlayer { + constructor() { // playbackManager needs this this.name = PlayerName; this.type = 'mediaplayer'; @@ -591,11 +583,11 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' this.isLocalPlayer = false; this.lastPlayerData = {}; - castSenderApiLoader.load().then(initializeChromecast.bind(this)); + new castSenderApiLoader().load().then(initializeChromecast.bind(this)); } - ChromecastPlayer.prototype.tryPair = function (target) { - var castPlayer = this._castPlayer; + tryPair(target) { + const castPlayer = this._castPlayer; if (castPlayer.deviceState !== DEVICE_STATE.ACTIVE && castPlayer.isInitialized) { return new Promise(function (resolve, reject) { @@ -609,24 +601,23 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' return Promise.reject(); } - }; + } - ChromecastPlayer.prototype.getTargets = function () { - var targets = []; + getTargets() { + const targets = []; if (this._castPlayer && this._castPlayer.hasReceivers) { targets.push(this.getCurrentTargetInfo()); } return Promise.resolve(targets); - }; + } // This is a privately used method - ChromecastPlayer.prototype.getCurrentTargetInfo = function () { + getCurrentTargetInfo() { + let appName = null; - var appName = null; - - var castPlayer = this._castPlayer; + const castPlayer = this._castPlayer; if (castPlayer.session && castPlayer.session.receiver && castPlayer.session.receiver.friendlyName) { appName = castPlayer.session.receiver.friendlyName; @@ -651,16 +642,16 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' 'SetSubtitleStreamIndex', 'DisplayContent', 'SetRepeatMode', + 'SetShuffleQueue', 'EndSession', 'PlayMediaSource', 'PlayTrailers' ] }; - }; + } - ChromecastPlayer.prototype.getPlayerStateInternal = function (data) { - - var triggerStateChange = false; + getPlayerStateInternal(data) { + let triggerStateChange = false; if (data && !this.lastPlayerData) { triggerStateChange = true; } @@ -677,16 +668,14 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' } return data; - }; - - ChromecastPlayer.prototype.playWithCommand = function (options, command) { + } + playWithCommand(options, command) { if (!options.items) { - var apiClient = connectionManager.getApiClient(options.serverId); - var instance = this; + const apiClient = window.connectionManager.getApiClient(options.serverId); + const instance = this; return apiClient.getItem(apiClient.getCurrentUserId(), options.ids[0]).then(function (item) { - options.items = [item]; return instance.playWithCommand(options, command); }); @@ -700,10 +689,9 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' } return this._castPlayer.loadMedia(options, command); - }; - - ChromecastPlayer.prototype.seek = function (position) { + } + seek(position) { position = parseInt(position); position = position / 10000000; @@ -714,56 +702,55 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' }, command: 'Seek' }); - }; + } - ChromecastPlayer.prototype.setAudioStreamIndex = function (index) { + setAudioStreamIndex(index) { this._castPlayer.sendMessage({ options: { index: index }, command: 'SetAudioStreamIndex' }); - }; + } - ChromecastPlayer.prototype.setSubtitleStreamIndex = function (index) { + setSubtitleStreamIndex(index) { this._castPlayer.sendMessage({ options: { index: index }, command: 'SetSubtitleStreamIndex' }); - }; - - ChromecastPlayer.prototype.setMaxStreamingBitrate = function (options) { + } + setMaxStreamingBitrate(options) { this._castPlayer.sendMessage({ options: options, command: 'SetMaxStreamingBitrate' }); - }; + } - ChromecastPlayer.prototype.isFullscreen = function () { - var state = this.lastPlayerData || {}; + isFullscreen() { + let state = this.lastPlayerData || {}; state = state.PlayState || {}; return state.IsFullscreen; - }; + } - ChromecastPlayer.prototype.nextTrack = function () { + nextTrack() { this._castPlayer.sendMessage({ options: {}, command: 'NextTrack' }); - }; + } - ChromecastPlayer.prototype.previousTrack = function () { + previousTrack() { this._castPlayer.sendMessage({ options: {}, command: 'PreviousTrack' }); - }; + } - ChromecastPlayer.prototype.volumeDown = function () { - var vol = this._castPlayer.session.receiver.volume.level; + volumeDown() { + let vol = this._castPlayer.session.receiver.volume.level; if (vol == null) { vol = 0.5; } @@ -771,22 +758,20 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' vol = Math.max(vol, 0); this._castPlayer.session.setReceiverVolumeLevel(vol); + } - }; - - ChromecastPlayer.prototype.endSession = function () { - - var instance = this; + endSession() { + const instance = this; this.stop().then(function () { setTimeout(function () { instance._castPlayer.stopApp(); }, 1000); }); - }; + } - ChromecastPlayer.prototype.volumeUp = function () { - var vol = this._castPlayer.session.receiver.volume.level; + volumeUp() { + let vol = this._castPlayer.session.receiver.volume.level; if (vol == null) { vol = 0.5; } @@ -794,56 +779,53 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' vol = Math.min(vol, 1); this._castPlayer.session.setReceiverVolumeLevel(vol); - }; - - ChromecastPlayer.prototype.setVolume = function (vol) { + } + setVolume(vol) { vol = Math.min(vol, 100); vol = Math.max(vol, 0); vol = vol / 100; this._castPlayer.session.setReceiverVolumeLevel(vol); - }; + } - ChromecastPlayer.prototype.unpause = function () { + unpause() { this._castPlayer.sendMessage({ options: {}, command: 'Unpause' }); - }; + } - ChromecastPlayer.prototype.playPause = function () { + playPause() { this._castPlayer.sendMessage({ options: {}, command: 'PlayPause' }); - }; + } - ChromecastPlayer.prototype.pause = function () { + pause() { this._castPlayer.sendMessage({ options: {}, command: 'Pause' }); - }; + } - ChromecastPlayer.prototype.stop = function () { + stop() { return this._castPlayer.sendMessage({ options: {}, command: 'Stop' }); - }; - - ChromecastPlayer.prototype.displayContent = function (options) { + } + displayContent(options) { this._castPlayer.sendMessage({ options: options, command: 'DisplayContent' }); - }; + } - ChromecastPlayer.prototype.setMute = function (isMuted) { - - var castPlayer = this._castPlayer; + setMute(isMuted) { + const castPlayer = this._castPlayer; if (isMuted) { castPlayer.sendMessage({ @@ -856,16 +838,21 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' command: 'Unmute' }); } - }; + } - ChromecastPlayer.prototype.getRepeatMode = function () { - var state = this.lastPlayerData || {}; + getRepeatMode() { + let state = this.lastPlayerData || {}; state = state.PlayState || {}; return state.RepeatMode; - }; + } - ChromecastPlayer.prototype.playTrailers = function (item) { + getQueueShuffleMode() { + let state = this.lastPlayerData || {}; + state = state.PlayState || {}; + return state.ShuffleMode; + } + playTrailers(item) { this._castPlayer.sendMessage({ options: { ItemId: item.Id, @@ -873,238 +860,222 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', ' }, command: 'PlayTrailers' }); - }; + } - ChromecastPlayer.prototype.setRepeatMode = function (mode) { + setRepeatMode(mode) { this._castPlayer.sendMessage({ options: { RepeatMode: mode }, command: 'SetRepeatMode' }); - }; + } - ChromecastPlayer.prototype.toggleMute = function () { + setQueueShuffleMode(value) { + this._castPlayer.sendMessage({ + options: { + ShuffleMode: value + }, + command: 'SetShuffleQueue' + }); + } + toggleMute() { this._castPlayer.sendMessage({ options: {}, command: 'ToggleMute' }); - }; + } - ChromecastPlayer.prototype.audioTracks = function () { - var state = this.lastPlayerData || {}; + audioTracks() { + let state = this.lastPlayerData || {}; state = state.NowPlayingItem || {}; - var streams = state.MediaStreams || []; + const streams = state.MediaStreams || []; return streams.filter(function (s) { return s.Type === 'Audio'; }); - }; + } - ChromecastPlayer.prototype.getAudioStreamIndex = function () { - var state = this.lastPlayerData || {}; + getAudioStreamIndex() { + let state = this.lastPlayerData || {}; state = state.PlayState || {}; return state.AudioStreamIndex; - }; + } - ChromecastPlayer.prototype.subtitleTracks = function () { - var state = this.lastPlayerData || {}; + subtitleTracks() { + let state = this.lastPlayerData || {}; state = state.NowPlayingItem || {}; - var streams = state.MediaStreams || []; + const streams = state.MediaStreams || []; return streams.filter(function (s) { return s.Type === 'Subtitle'; }); - }; + } - ChromecastPlayer.prototype.getSubtitleStreamIndex = function () { - var state = this.lastPlayerData || {}; + getSubtitleStreamIndex() { + let state = this.lastPlayerData || {}; state = state.PlayState || {}; return state.SubtitleStreamIndex; - }; + } - ChromecastPlayer.prototype.getMaxStreamingBitrate = function () { - var state = this.lastPlayerData || {}; + getMaxStreamingBitrate() { + let state = this.lastPlayerData || {}; state = state.PlayState || {}; return state.MaxStreamingBitrate; - }; + } - ChromecastPlayer.prototype.getVolume = function () { - - var state = this.lastPlayerData || {}; + getVolume() { + let state = this.lastPlayerData || {}; state = state.PlayState || {}; return state.VolumeLevel == null ? 100 : state.VolumeLevel; - }; + } - ChromecastPlayer.prototype.isPlaying = function () { - var state = this.lastPlayerData || {}; - return state.NowPlayingItem != null; - }; + isPlaying(mediaType) { + const state = this.lastPlayerData || {}; + return state.NowPlayingItem != null && (state.NowPlayingItem.MediaType === mediaType || !mediaType); + } - ChromecastPlayer.prototype.isPlayingVideo = function () { - var state = this.lastPlayerData || {}; + isPlayingVideo() { + let state = this.lastPlayerData || {}; state = state.NowPlayingItem || {}; return state.MediaType === 'Video'; - }; + } - ChromecastPlayer.prototype.isPlayingAudio = function () { - var state = this.lastPlayerData || {}; + isPlayingAudio() { + let state = this.lastPlayerData || {}; state = state.NowPlayingItem || {}; return state.MediaType === 'Audio'; - }; - - ChromecastPlayer.prototype.currentTime = function (val) { + } + currentTime(val) { if (val != null) { - return this.seek(val); + return this.seek(val * 10000); } - var state = this.lastPlayerData || {}; + let state = this.lastPlayerData || {}; state = state.PlayState || {}; - return state.PositionTicks; - }; + return state.PositionTicks / 10000; + } - ChromecastPlayer.prototype.duration = function () { - var state = this.lastPlayerData || {}; + duration() { + let state = this.lastPlayerData || {}; state = state.NowPlayingItem || {}; return state.RunTimeTicks; - }; + } - ChromecastPlayer.prototype.getBufferedRanges = function () { - var state = this.lastPlayerData || {}; + getBufferedRanges() { + let state = this.lastPlayerData || {}; state = state.PlayState || {}; return state.BufferedRanges || []; - }; + } - ChromecastPlayer.prototype.paused = function () { - var state = this.lastPlayerData || {}; + paused() { + let state = this.lastPlayerData || {}; state = state.PlayState || {}; return state.IsPaused; - }; + } - ChromecastPlayer.prototype.isMuted = function () { - var state = this.lastPlayerData || {}; + isMuted() { + let state = this.lastPlayerData || {}; state = state.PlayState || {}; return state.IsMuted; - }; + } - ChromecastPlayer.prototype.shuffle = function (item) { + shuffle(item) { + const apiClient = window.connectionManager.getApiClient(item.ServerId); + const userId = apiClient.getCurrentUserId(); - var apiClient = connectionManager.getApiClient(item.ServerId); - var userId = apiClient.getCurrentUserId(); - - var instance = this; + const instance = this; apiClient.getItem(userId, item.Id).then(function (item) { - instance.playWithCommand({ - items: [item] - }, 'Shuffle'); - }); + } - }; + instantMix(item) { + const apiClient = window.connectionManager.getApiClient(item.ServerId); + const userId = apiClient.getCurrentUserId(); - ChromecastPlayer.prototype.instantMix = function (item) { - - var apiClient = connectionManager.getApiClient(item.ServerId); - var userId = apiClient.getCurrentUserId(); - - var instance = this; + const instance = this; apiClient.getItem(userId, item.Id).then(function (item) { - instance.playWithCommand({ - items: [item] - }, 'InstantMix'); - }); + } - }; - - ChromecastPlayer.prototype.canPlayMediaType = function (mediaType) { - + canPlayMediaType(mediaType) { mediaType = (mediaType || '').toLowerCase(); return mediaType === 'audio' || mediaType === 'video'; - }; + } - ChromecastPlayer.prototype.canQueueMediaType = function (mediaType) { + canQueueMediaType(mediaType) { return this.canPlayMediaType(mediaType); - }; + } - ChromecastPlayer.prototype.queue = function (options) { + queue(options) { this.playWithCommand(options, 'PlayLast'); - }; + } - ChromecastPlayer.prototype.queueNext = function (options) { + queueNext(options) { this.playWithCommand(options, 'PlayNext'); - }; - - ChromecastPlayer.prototype.play = function (options) { + } + play(options) { if (options.items) { - return this.playWithCommand(options, 'PlayNow'); - } else { - if (!options.serverId) { throw new Error('serverId required!'); } - var instance = this; - var apiClient = connectionManager.getApiClient(options.serverId); + const instance = this; + const apiClient = window.connectionManager.getApiClient(options.serverId); return getItemsForPlayback(apiClient, { - Ids: options.ids.join(',') - }).then(function (result) { - options.items = result.Items; return instance.playWithCommand(options, 'PlayNow'); - }); } - }; + } - ChromecastPlayer.prototype.toggleFullscreen = function () { + toggleFullscreen() { // not supported - }; + } - ChromecastPlayer.prototype.beginPlayerUpdates = function () { + beginPlayerUpdates() { // Setup polling here - }; + } - ChromecastPlayer.prototype.endPlayerUpdates = function () { + endPlayerUpdates() { // Stop polling here - }; + } - ChromecastPlayer.prototype.getPlaylist = function () { + getPlaylist() { return Promise.resolve([]); - }; + } - ChromecastPlayer.prototype.getCurrentPlaylistItemId = function () { - }; + getCurrentPlaylistItemId() { + } - ChromecastPlayer.prototype.setCurrentPlaylistItem = function (playlistItemId) { + setCurrentPlaylistItem(playlistItemId) { return Promise.resolve(); - }; + } - ChromecastPlayer.prototype.removeFromPlaylist = function (playlistItemIds) { + removeFromPlaylist(playlistItemIds) { return Promise.resolve(); - }; - - ChromecastPlayer.prototype.getPlayerState = function () { + } + getPlayerState() { return this.getPlayerStateInternal() || {}; - }; + } +} - return ChromecastPlayer; -}); +export default ChromecastPlayer; diff --git a/src/plugins/comicsPlayer/plugin.js b/src/plugins/comicsPlayer/plugin.js new file mode 100644 index 0000000000..2928231391 --- /dev/null +++ b/src/plugins/comicsPlayer/plugin.js @@ -0,0 +1,213 @@ +import loading from 'loading'; +import dialogHelper from 'dialogHelper'; +import keyboardnavigation from 'keyboardnavigation'; +import appRouter from 'appRouter'; +import * as libarchive from 'libarchive'; + +export class ComicsPlayer { + constructor() { + this.name = 'Comics Player'; + this.type = 'mediaplayer'; + this.id = 'comicsplayer'; + this.priority = 1; + this.imageMap = new Map(); + + this.onDialogClosed = this.onDialogClosed.bind(this); + this.onWindowKeyUp = this.onWindowKeyUp.bind(this); + } + + play(options) { + this.progress = 0; + + const elem = this.createMediaElement(); + return this.setCurrentSrc(elem, options); + } + + stop() { + this.unbindEvents(); + + const elem = this.mediaElement; + if (elem) { + dialogHelper.close(elem); + this.mediaElement = null; + } + + loading.hide(); + } + + onDialogClosed() { + this.stop(); + } + + onWindowKeyUp(e) { + const key = keyboardnavigation.getKeyName(e); + switch (key) { + case 'Escape': + this.stop(); + break; + } + } + + bindEvents() { + document.addEventListener('keyup', this.onWindowKeyUp); + } + + unbindEvents() { + document.removeEventListener('keyup', this.onWindowKeyUp); + } + + createMediaElement() { + let elem = this.mediaElement; + if (elem) { + return elem; + } + + elem = document.getElementById('comicsPlayer'); + if (!elem) { + elem = dialogHelper.createDialog({ + exitAnimationDuration: 400, + size: 'fullscreen', + autoFocus: false, + scrollY: false, + exitAnimation: 'fadeout', + removeOnClose: true + }); + + elem.id = 'comicsPlayer'; + elem.classList.add('slideshowDialog'); + + elem.innerHTML = '
    '; + + this.bindEvents(); + dialogHelper.open(elem); + } + + this.mediaElement = elem; + return elem; + } + + setCurrentSrc(elem, options) { + const item = options.items[0]; + this.currentItem = item; + + loading.show(); + + const serverId = item.ServerId; + const apiClient = window.connectionManager.getApiClient(serverId); + + libarchive.Archive.init({ + workerUrl: appRouter.baseUrl() + '/libraries/worker-bundle.js' + }); + + return new Promise((resolve, reject) => { + const downloadUrl = apiClient.getItemDownloadUrl(item.Id); + const archiveSource = new ArchiveSource(downloadUrl); + + var instance = this; + import('swiper').then(({default: Swiper}) => { + archiveSource.load().then(() => { + loading.hide(); + this.swiperInstance = new Swiper(elem.querySelector('.slideshowSwiperContainer'), { + direction: 'horizontal', + // loop is disabled due to the lack of support in virtual slides + loop: false, + zoom: { + minRatio: 1, + toggle: true, + containerClass: 'slider-zoom-container' + }, + autoplay: false, + keyboard: { + enabled: true + }, + preloadImages: true, + slidesPerView: 1, + slidesPerColumn: 1, + initialSlide: 0, + // reduces memory consumption for large libraries while allowing preloading of images + virtual: { + slides: archiveSource.urls, + cache: true, + renderSlide: instance.getImgFromUrl, + addSlidesBefore: 1, + addSlidesAfter: 1 + } + }); + }); + }); + }); + } + + getImgFromUrl(url) { + return `
    +
    + +
    +
    `; + } + + canPlayMediaType(mediaType) { + return (mediaType || '').toLowerCase() === 'book'; + } + + canPlayItem(item) { + if (item.Path && (item.Path.endsWith('cbz') || item.Path.endsWith('cbr'))) { + return true; + } + + return false; + } +} + +class ArchiveSource { + constructor(url) { + this.url = url; + this.files = []; + this.urls = []; + this.loadPromise = this.load(); + this.itemsLoaded = 0; + } + + async load() { + const res = await fetch(this.url); + if (!res.ok) { + return; + } + + const blob = await res.blob(); + this.archive = await libarchive.Archive.open(blob); + this.raw = await this.archive.getFilesArray(); + this.numberOfFiles = this.raw.length; + await this.archive.extractFiles(); + + const files = await this.archive.getFilesArray(); + files.sort((a, b) => { + if (a.file.name < b.file.name) { + return -1; + } else { + return 1; + } + }); + + for (const file of files) { + /* eslint-disable-next-line compat/compat */ + const url = URL.createObjectURL(file.file); + this.urls.push(url); + } + } + + getLength() { + return this.raw.length; + } + + async item(index) { + if (this.urls[index]) { + return this.urls[index]; + } + + await this.loadPromise; + return this.urls[index]; + } +} + +export default ComicsPlayer; diff --git a/src/plugins/experimentalWarnings/plugin.js b/src/plugins/experimentalWarnings/plugin.js index 632e38208c..bc301f01af 100644 --- a/src/plugins/experimentalWarnings/plugin.js +++ b/src/plugins/experimentalWarnings/plugin.js @@ -1,70 +1,61 @@ -define(['connectionManager', 'globalize', 'userSettings', 'apphost'], function (connectionManager, globalize, userSettings, appHost) { - 'use strict'; +import globalize from 'globalize'; +import * as userSettings from 'userSettings'; +import appHost from 'apphost'; - function getRequirePromise(deps) { +// TODO: Replace with date-fns +// https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php +function getWeek(date) { + const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())); + const dayNum = d.getUTCDay() || 7; + d.setUTCDate(d.getUTCDate() + 4 - dayNum); + const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1)); + return Math.ceil((((d - yearStart) / 86400000) + 1) / 7); +} - return new Promise(function (resolve, reject) { +function showMessage(text, userSettingsKey, appHostFeature) { + if (appHost.supports(appHostFeature)) { + return Promise.resolve(); + } - require(deps, resolve); + const now = new Date(); + + // TODO: Use date-fns + userSettingsKey += now.getFullYear() + '-w' + getWeek(now); + + if (userSettings.get(userSettingsKey, false) === '1') { + return Promise.resolve(); + } + + return new Promise(function (resolve, reject) { + userSettings.set(userSettingsKey, '1', false); + + import('alert').then(({default: alert}) => { + return alert(text).then(resolve, resolve); }); - } + }); +} - // https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php - function getWeek(date) { - var d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())); - var dayNum = d.getUTCDay() || 7; - d.setUTCDate(d.getUTCDate() + 4 - dayNum); - var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1)); - return Math.ceil((((d - yearStart) / 86400000) + 1) / 7); - } +function showBlurayMessage() { + return showMessage(globalize.translate('UnsupportedPlayback'), 'blurayexpirementalinfo', 'nativeblurayplayback'); +} - function showMessage(text, userSettingsKey, appHostFeature) { +function showDvdMessage() { + return showMessage(globalize.translate('UnsupportedPlayback'), 'dvdexpirementalinfo', 'nativedvdplayback'); +} - if (appHost.supports(appHostFeature)) { - return Promise.resolve(); - } - - var now = new Date(); - - userSettingsKey += now.getFullYear() + '-w' + getWeek(now); - - if (userSettings.get(userSettingsKey, false) === '1') { - return Promise.resolve(); - } - - return new Promise(function (resolve, reject) { - - userSettings.set(userSettingsKey, '1', false); - - require(['alert'], function (alert) { - - return alert(text).then(resolve, resolve); - }); - }); - } - - function showBlurayMessage() { - return showMessage(globalize.translate('UnsupportedPlayback'), 'blurayexpirementalinfo', 'nativeblurayplayback'); - } - - function showDvdMessage() { - return showMessage(globalize.translate('UnsupportedPlayback'), 'dvdexpirementalinfo', 'nativedvdplayback'); - } - - function showIsoMessage() { - return showMessage(globalize.translate('UnsupportedPlayback'), 'isoexpirementalinfo', 'nativeisoplayback'); - } - - function ExpirementalPlaybackWarnings() { +function showIsoMessage() { + return showMessage(globalize.translate('UnsupportedPlayback'), 'isoexpirementalinfo', 'nativeisoplayback'); +} +class ExpirementalPlaybackWarnings { + constructor() { this.name = 'Experimental playback warnings'; this.type = 'preplayintercept'; this.id = 'expirementalplaybackwarnings'; } - ExpirementalPlaybackWarnings.prototype.intercept = function (options) { - - var item = options.item; + intercept(options) { + const item = options.item; if (!item) { return Promise.resolve(); } @@ -82,7 +73,7 @@ define(['connectionManager', 'globalize', 'userSettings', 'apphost'], function ( } return Promise.resolve(); - }; + } +} - return ExpirementalPlaybackWarnings; -}); +export default ExpirementalPlaybackWarnings; diff --git a/src/plugins/htmlAudioPlayer/plugin.js b/src/plugins/htmlAudioPlayer/plugin.js index 8265987e28..6f413fac50 100644 --- a/src/plugins/htmlAudioPlayer/plugin.js +++ b/src/plugins/htmlAudioPlayer/plugin.js @@ -1,92 +1,92 @@ -define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelper'], function (events, browser, require, appHost, appSettings, htmlMediaHelper) { - 'use strict'; +import events from 'events'; +import browser from 'browser'; +import appHost from 'apphost'; +import * as htmlMediaHelper from 'htmlMediaHelper'; - function getDefaultProfile() { - return new Promise(function (resolve, reject) { - require(['browserdeviceprofile'], function (profileBuilder) { - resolve(profileBuilder({})); - }); +function getDefaultProfile() { + return import('browserdeviceprofile').then(({ default: profileBuilder }) => { + return profileBuilder({}); + }); +} + +let fadeTimeout; +function fade(instance, elem, startingVolume) { + instance._isFadingOut = true; + + // Need to record the starting volume on each pass rather than querying elem.volume + // This is due to iOS safari not allowing volume changes and always returning the system volume value + const newVolume = Math.max(0, startingVolume - 0.15); + console.debug('fading volume to ' + newVolume); + elem.volume = newVolume; + + if (newVolume <= 0) { + instance._isFadingOut = false; + return Promise.resolve(); + } + + return new Promise(function (resolve, reject) { + cancelFadeTimeout(); + fadeTimeout = setTimeout(function () { + fade(instance, elem, newVolume).then(resolve, reject); + }, 100); + }); +} + +function cancelFadeTimeout() { + const timeout = fadeTimeout; + if (timeout) { + clearTimeout(timeout); + fadeTimeout = null; + } +} + +function supportsFade() { + if (browser.tv) { + // Not working on tizen. + // We could possibly enable on other tv's, but all smart tv browsers tend to be pretty primitive + return false; + } + + return true; +} + +function requireHlsPlayer(callback) { + import('hlsjs').then(({ default: hls }) => { + window.Hls = hls; + callback(); + }); +} + +function enableHlsPlayer(url, item, mediaSource, mediaType) { + if (!htmlMediaHelper.enableHlsJsPlayer(mediaSource.RunTimeTicks, mediaType)) { + return Promise.reject(); + } + + if (url.indexOf('.m3u8') !== -1) { + return Promise.resolve(); + } + + // issue head request to get content type + return new Promise(function (resolve, reject) { + import('fetchHelper').then((fetchHelper) => { + fetchHelper.ajax({ + url: url, + type: 'HEAD' + }).then(function (response) { + const contentType = (response.headers.get('Content-Type') || '').toLowerCase(); + if (contentType === 'application/x-mpegurl') { + resolve(); + } else { + reject(); + } + }, reject); }); - } + }); +} - var fadeTimeout; - function fade(instance, elem, startingVolume) { - instance._isFadingOut = true; - - // Need to record the starting volume on each pass rather than querying elem.volume - // This is due to iOS safari not allowing volume changes and always returning the system volume value - var newVolume = Math.max(0, startingVolume - 0.15); - console.debug('fading volume to ' + newVolume); - elem.volume = newVolume; - - if (newVolume <= 0) { - instance._isFadingOut = false; - return Promise.resolve(); - } - - return new Promise(function (resolve, reject) { - cancelFadeTimeout(); - fadeTimeout = setTimeout(function () { - fade(instance, elem, newVolume).then(resolve, reject); - }, 100); - }); - } - - function cancelFadeTimeout() { - var timeout = fadeTimeout; - if (timeout) { - clearTimeout(timeout); - fadeTimeout = null; - } - } - - function supportsFade() { - if (browser.tv) { - // Not working on tizen. - // We could possibly enable on other tv's, but all smart tv browsers tend to be pretty primitive - return false; - } - - return true; - } - - function requireHlsPlayer(callback) { - require(['hlsjs'], function (hls) { - window.Hls = hls; - callback(); - }); - } - - function enableHlsPlayer(url, item, mediaSource, mediaType) { - if (!htmlMediaHelper.enableHlsJsPlayer(mediaSource.RunTimeTicks, mediaType)) { - return Promise.reject(); - } - - if (url.indexOf('.m3u8') !== -1) { - return Promise.resolve(); - } - - // issue head request to get content type - return new Promise(function (resolve, reject) { - - require(['fetchHelper'], function (fetchHelper) { - fetchHelper.ajax({ - url: url, - type: 'HEAD' - }).then(function (response) { - var contentType = (response.headers.get('Content-Type') || '').toLowerCase(); - if (contentType === 'application/x-mpegurl') { - resolve(); - } else { - reject(); - } - }, reject); - }); - }); - } - - function HtmlAudioPlayer() { - var self = this; +class HtmlAudioPlayer { + constructor() { + const self = this; self.name = 'Html Audio Player'; self.type = 'mediaplayer'; @@ -96,27 +96,25 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp self.priority = 1; self.play = function (options) { - self._started = false; self._timeUpdated = false; self._currentTime = null; - var elem = createMediaElement(); + const elem = createMediaElement(); return setCurrentSrc(elem, options); }; function setCurrentSrc(elem, options) { - elem.removeEventListener('error', onError); unBindEvents(elem); bindEvents(elem); - var val = options.url; + let val = options.url; console.debug('playing url: ' + val); // Convert to seconds - var seconds = (options.playerStartPositionTicks || 0) / 10000000; + const seconds = (options.playerStartPositionTicks || 0) / 10000000; if (seconds) { val += '#t=' + seconds; } @@ -125,23 +123,16 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp self._currentPlayOptions = options; - var crossOrigin = htmlMediaHelper.getCrossOriginValue(options.mediaSource); + const crossOrigin = htmlMediaHelper.getCrossOriginValue(options.mediaSource); if (crossOrigin) { elem.crossOrigin = crossOrigin; } return enableHlsPlayer(val, options.item, options.mediaSource, 'Audio').then(function () { - return new Promise(function (resolve, reject) { - requireHlsPlayer(function () { - var hls = new Hls({ - manifestLoadingTimeOut: 20000, - xhrSetup: function(xhr, url) { - xhr.withCredentials = true; - } - //appendErrorMaxRetry: 6, - //debug: true + const hls = new Hls({ + manifestLoadingTimeOut: 20000 }); hls.loadSource(val); hls.attachMedia(elem); @@ -153,16 +144,13 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp self._currentSrc = val; }); }); - }, function () { - elem.autoplay = true; // Safari will not send cookies without this elem.crossOrigin = 'use-credentials'; return htmlMediaHelper.applySrc(elem, val, options).then(function () { - self._currentSrc = val; return htmlMediaHelper.playWithPromise(elem, onError); @@ -191,16 +179,13 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp } self.stop = function (destroyPlayer) { - cancelFadeTimeout(); - var elem = self._mediaElement; - var src = self._currentSrc; + const elem = self._mediaElement; + const src = self._currentSrc; if (elem && src) { - if (!destroyPlayer || !supportsFade()) { - elem.pause(); htmlMediaHelper.onEndedInternal(self, elem, onError); @@ -211,10 +196,9 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp return Promise.resolve(); } - var originalVolume = elem.volume; + const originalVolume = elem.volume; return fade(self, elem, elem.volume).then(function () { - elem.pause(); elem.volume = originalVolume; @@ -233,8 +217,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp }; function createMediaElement() { - - var elem = self._mediaElement; + let elem = self._mediaElement; if (elem) { return elem; @@ -258,14 +241,12 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp } function onEnded() { - htmlMediaHelper.onEndedInternal(self, this, onError); } function onTimeUpdate() { - // Get the player position + the transcoding offset - var time = this.currentTime; + const time = this.currentTime; // Don't trigger events after user stop if (!self._isFadingOut) { @@ -275,7 +256,6 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp } function onVolumeChange() { - if (!self._isFadingOut) { htmlMediaHelper.saveVolume(this.volume); events.trigger(self, 'volumechange'); @@ -283,7 +263,6 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp } function onPlaying(e) { - if (!self._started) { self._started = true; this.removeAttribute('controls'); @@ -294,7 +273,6 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp } function onPlay(e) { - events.trigger(self, 'unpause'); } @@ -307,12 +285,11 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp } function onError() { - - var errorCode = this.error ? (this.error.code || 0) : 0; - var errorMessage = this.error ? (this.error.message || '') : ''; + const errorCode = this.error ? (this.error.code || 0) : 0; + const errorMessage = this.error ? (this.error.message || '') : ''; console.error('media element error: ' + errorCode.toString() + ' ' + errorMessage); - var type; + let type; switch (errorCode) { case 1: @@ -346,65 +323,59 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp } } - HtmlAudioPlayer.prototype.currentSrc = function () { + currentSrc() { return this._currentSrc; - }; - - HtmlAudioPlayer.prototype.canPlayMediaType = function (mediaType) { + } + canPlayMediaType(mediaType) { return (mediaType || '').toLowerCase() === 'audio'; - }; - - HtmlAudioPlayer.prototype.getDeviceProfile = function (item) { + } + getDeviceProfile(item) { if (appHost.getDeviceProfile) { return appHost.getDeviceProfile(item); } return getDefaultProfile(); - }; + } // Save this for when playback stops, because querying the time at that point might return 0 - HtmlAudioPlayer.prototype.currentTime = function (val) { - - var mediaElement = this._mediaElement; + currentTime(val) { + const mediaElement = this._mediaElement; if (mediaElement) { if (val != null) { mediaElement.currentTime = val / 1000; return; } - var currentTime = this._currentTime; + const currentTime = this._currentTime; if (currentTime) { return currentTime * 1000; } return (mediaElement.currentTime || 0) * 1000; } - }; + } - HtmlAudioPlayer.prototype.duration = function (val) { - - var mediaElement = this._mediaElement; + duration(val) { + const mediaElement = this._mediaElement; if (mediaElement) { - var duration = mediaElement.duration; + const duration = mediaElement.duration; if (htmlMediaHelper.isValidDuration(duration)) { return duration * 1000; } } return null; - }; + } - HtmlAudioPlayer.prototype.seekable = function () { - var mediaElement = this._mediaElement; + seekable() { + const mediaElement = this._mediaElement; if (mediaElement) { - - var seekable = mediaElement.seekable; + const seekable = mediaElement.seekable; if (seekable && seekable.length) { - - var start = seekable.start(0); - var end = seekable.end(0); + let start = seekable.start(0); + let end = seekable.end(0); if (!htmlMediaHelper.isValidDuration(start)) { start = 0; @@ -418,128 +389,120 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp return false; } - }; + } - HtmlAudioPlayer.prototype.getBufferedRanges = function () { - var mediaElement = this._mediaElement; + getBufferedRanges() { + const mediaElement = this._mediaElement; if (mediaElement) { - return htmlMediaHelper.getBufferedRanges(this, mediaElement); } return []; - }; + } - HtmlAudioPlayer.prototype.pause = function () { - var mediaElement = this._mediaElement; + pause() { + const mediaElement = this._mediaElement; if (mediaElement) { mediaElement.pause(); } - }; + } // This is a retry after error - HtmlAudioPlayer.prototype.resume = function () { - var mediaElement = this._mediaElement; + resume() { + const mediaElement = this._mediaElement; if (mediaElement) { mediaElement.play(); } - }; + } - HtmlAudioPlayer.prototype.unpause = function () { - var mediaElement = this._mediaElement; + unpause() { + const mediaElement = this._mediaElement; if (mediaElement) { mediaElement.play(); } - }; + } - HtmlAudioPlayer.prototype.paused = function () { - - var mediaElement = this._mediaElement; + paused() { + const mediaElement = this._mediaElement; if (mediaElement) { return mediaElement.paused; } return false; - }; + } - HtmlAudioPlayer.prototype.setPlaybackRate = function (value) { - var mediaElement = this._mediaElement; + setPlaybackRate(value) { + const mediaElement = this._mediaElement; if (mediaElement) { mediaElement.playbackRate = value; } - }; + } - HtmlAudioPlayer.prototype.getPlaybackRate = function () { - var mediaElement = this._mediaElement; + getPlaybackRate() { + const mediaElement = this._mediaElement; if (mediaElement) { return mediaElement.playbackRate; } return null; - }; + } - HtmlAudioPlayer.prototype.setVolume = function (val) { - var mediaElement = this._mediaElement; + setVolume(val) { + const mediaElement = this._mediaElement; if (mediaElement) { mediaElement.volume = val / 100; } - }; + } - HtmlAudioPlayer.prototype.getVolume = function () { - var mediaElement = this._mediaElement; + getVolume() { + const mediaElement = this._mediaElement; if (mediaElement) { - return Math.min(Math.round(mediaElement.volume * 100), 100); } - }; + } - HtmlAudioPlayer.prototype.volumeUp = function () { + volumeUp() { this.setVolume(Math.min(this.getVolume() + 2, 100)); - }; + } - HtmlAudioPlayer.prototype.volumeDown = function () { + volumeDown() { this.setVolume(Math.max(this.getVolume() - 2, 0)); - }; + } - HtmlAudioPlayer.prototype.setMute = function (mute) { - - var mediaElement = this._mediaElement; + setMute(mute) { + const mediaElement = this._mediaElement; if (mediaElement) { mediaElement.muted = mute; } - }; + } - HtmlAudioPlayer.prototype.isMuted = function () { - var mediaElement = this._mediaElement; + isMuted() { + const mediaElement = this._mediaElement; if (mediaElement) { return mediaElement.muted; } return false; - }; - - HtmlAudioPlayer.prototype.destroy = function () { - - }; - - var supportedFeatures; - - function getSupportedFeatures() { - var list = []; - var audio = document.createElement('audio'); - - if (typeof audio.playbackRate === 'number') { - list.push('PlaybackRate'); - } - - return list; } - HtmlAudioPlayer.prototype.supports = function (feature) { + supports(feature) { if (!supportedFeatures) { supportedFeatures = getSupportedFeatures(); } return supportedFeatures.indexOf(feature) !== -1; - }; + } +} - return HtmlAudioPlayer; -}); +let supportedFeatures; + +function getSupportedFeatures() { + const list = []; + const audio = document.createElement('audio'); + + if (typeof audio.playbackRate === 'number') { + list.push('PlaybackRate'); + } + + return list; +} + +export default HtmlAudioPlayer; diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index cc312bb956..d07e6aae58 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -1,43 +1,47 @@ -define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackManager', 'appRouter', 'appSettings', 'connectionManager', 'htmlMediaHelper', 'itemHelper', 'screenfull', 'globalize'], function (browser, require, events, appHost, loading, dom, playbackManager, appRouter, appSettings, connectionManager, htmlMediaHelper, itemHelper, screenfull, globalize) { - 'use strict'; - /* globals cast */ +import browser from 'browser'; +import events from 'events'; +import appHost from 'apphost'; +import loading from 'loading'; +import dom from 'dom'; +import playbackManager from 'playbackManager'; +import appRouter from 'appRouter'; +import { + bindEventsToHlsPlayer, + destroyHlsPlayer, + destroyFlvPlayer, + destroyCastPlayer, + getCrossOriginValue, + enableHlsJsPlayer, + applySrc, + playWithPromise, + onEndedInternal, + saveVolume, + seekOnPlaybackStart, + onErrorInternal, + handleHlsJsMediaError, + getSavedVolume, + isValidDuration, + getBufferedRanges +} from 'htmlMediaHelper'; +import itemHelper from 'itemHelper'; +import screenfull from 'screenfull'; +import globalize from 'globalize'; - var mediaManager; +/* eslint-disable indent */ - function tryRemoveElement(elem) { - var parentNode = elem.parentNode; +function tryRemoveElement(elem) { + const parentNode = elem.parentNode; if (parentNode) { - // Seeing crashes in edge webview try { parentNode.removeChild(elem); } catch (err) { - console.error('error removing dialog element: ' + err); + console.error(`error removing dialog element: ${err}`); } } } - var _supportsTextTracks; - function supportsTextTracks() { - - if (_supportsTextTracks == null) { - _supportsTextTracks = document.createElement('video').textTracks != null; - } - - // For now, until ready - return _supportsTextTracks; - } - - function supportsCanvas() { - return !!document.createElement('canvas').getContext; - } - - function supportsWebWorkers() { - return !!window.Worker; - } - function enableNativeTrackSupport(currentSrc, track) { - if (track) { if (track.DeliveryMethod === 'Embed') { return true; @@ -45,14 +49,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa } if (browser.firefox) { - if ((currentSrc || '').toLowerCase().indexOf('.m3u8') !== -1) { - return false; - } - } - - // subs getting blocked due to CORS - if (browser.chromecast) { - if ((currentSrc || '').toLowerCase().indexOf('.m3u8') !== -1) { + if ((currentSrc || '').toLowerCase().includes('.m3u8')) { return false; } } @@ -78,7 +75,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa } if (track) { - var format = (track.Codec || '').toLowerCase(); + const format = (track.Codec || '').toLowerCase(); if (format === 'ssa' || format === 'ass') { return false; } @@ -88,7 +85,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa } function requireHlsPlayer(callback) { - require(['hlsjs'], function (hls) { + import('hlsjs').then(({default: hls}) => { window.Hls = hls; callback(); }); @@ -107,16 +104,16 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa } function hidePrePlaybackPage() { - let animatedPage = document.querySelector('.page:not(.hide)'); + const animatedPage = document.querySelector('.page:not(.hide)'); animatedPage.classList.add('hide'); // At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded document.body.classList.remove('force-scroll'); } function zoomIn(elem) { - return new Promise(function (resolve, reject) { - var duration = 240; - elem.style.animation = 'htmlvideoplayer-zoomin ' + duration + 'ms ease-in normal'; + return new Promise(resolve => { + const duration = 240; + elem.style.animation = `htmlvideoplayer-zoomin ${duration}ms ease-in normal`; hidePrePlaybackPage(); dom.addEventListener(elem, dom.whichAnimationEvent(), resolve, { once: true @@ -125,22 +122,16 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa } function normalizeTrackEventText(text, useHtml) { - var result = text.replace(/\\N/gi, '\n').replace(/\r/gi, ''); + const result = text.replace(/\\N/gi, '\n').replace(/\r/gi, ''); return useHtml ? result.replace(/\n/gi, '
    ') : result; } - function setTracks(elem, tracks, item, mediaSource) { - - elem.innerHTML = getTracksHtml(tracks, item, mediaSource); - } - function getTextTrackUrl(track, item, format) { - if (itemHelper.isLocalItem(item) && track.Path) { return track.Path; } - var url = playbackManager.getSubtitleUrl(track, item.ServerId); + let url = playbackManager.getSubtitleUrl(track, item.ServerId); if (format) { url = url.replace('.vtt', format); } @@ -148,161 +139,232 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa return url; } - function getTracksHtml(tracks, item, mediaSource) { - return tracks.map(function (t) { - - if (t.DeliveryMethod !== 'External') { - return ''; - } - - var defaultAttribute = mediaSource.DefaultSubtitleStreamIndex === t.Index ? ' default' : ''; - - var language = t.Language || 'und'; - var label = t.Language || 'und'; - return ''; - - }).join(''); - } - function getDefaultProfile() { - - return new Promise(function (resolve, reject) { - - require(['browserdeviceprofile'], function (profileBuilder) { - - resolve(profileBuilder({})); - }); + return import('browserdeviceprofile').then(({default: profileBuilder}) => { + return profileBuilder({}); }); } - function HtmlVideoPlayer() { + export class HtmlVideoPlayer { + /** + * @type {string} + */ + name; + /** + * @type {string} + */ + type = 'mediaplayer'; + /** + * @type {string} + */ + id = 'htmlvideoplayer'; + /** + * Let any players created by plugins take priority + * + * @type {number} + */ + priority = 1; + /** + * @type {boolean} + */ + isFetching = false; - if (browser.edgeUwp) { - this.name = 'Windows Video Player'; - } else { - this.name = 'Html Video Player'; - } + /** + * @type {HTMLDivElement | null | undefined} + */ + #videoDialog; + /** + * @type {number | undefined} + */ + #subtitleTrackIndexToSetOnPlaying; + /** + * @type {number | null} + */ + #audioTrackIndexToSetOnPlaying; + /** + * @type {null | undefined} + */ + #currentClock; + /** + * @type {any | null | undefined} + */ + #currentSubtitlesOctopus; + /** + * @type {null | undefined} + */ + #currentAssRenderer; + /** + * @type {number | undefined} + */ + #customTrackIndex; + /** + * @type {boolean | undefined} + */ + #showTrackOffset; + /** + * @type {number | undefined} + */ + #currentTrackOffset; + /** + * @type {HTMLElement | null | undefined} + */ + #videoSubtitlesElem; + /** + * @type {any | null | undefined} + */ + #currentTrackEvents; + /** + * @type {string[] | undefined} + */ + #supportedFeatures; + /** + * @type {HTMLVideoElement | null | undefined} + */ + #mediaElement; + /** + * @type {number} + */ + #fetchQueue = 0; + /** + * @type {string | undefined} + */ + #currentSrc; + /** + * @type {boolean | undefined} + */ + #started; + /** + * @type {boolean | undefined} + */ + #timeUpdated; + /** + * @type {number | null | undefined} + */ + #currentTime; + /** + * @type {any | undefined} + */ + #flvPlayer; + /** + * @private (used in other files) + * @type {any | undefined} + */ + _hlsPlayer; + /** + * @private (used in other files) + * @type {any | null | undefined} + */ + _castPlayer; + /** + * @private (used in other files) + * @type {any | undefined} + */ + _currentPlayOptions; + /** + * @type {any | undefined} + */ + #lastProfile; + /** + * @type {MutationObserver | IntersectionObserver | undefined} (Unclear observer typing) + */ + #resizeObserver; - this.type = 'mediaplayer'; - this.id = 'htmlvideoplayer'; - - // Let any players created by plugins take priority - this.priority = 1; - - var videoDialog; - - var winJsPlaybackItem; - - var subtitleTrackIndexToSetOnPlaying; - var audioTrackIndexToSetOnPlaying; - - var lastCustomTrackMs = 0; - var currentClock; - var currentSubtitlesOctopus; - var currentAssRenderer; - var customTrackIndex = -1; - - var showTrackOffset; - var currentTrackOffset; - - var videoSubtitlesElem; - var currentTrackEvents; - - var self = this; - - self.currentSrc = function () { - return self._currentSrc; - }; - - self._fetchQueue = 0; - self.isFetching = false; - - function incrementFetchQueue() { - if (self._fetchQueue <= 0) { - self.isFetching = true; - events.trigger(self, 'beginFetch'); - } - - self._fetchQueue++; - } - - function decrementFetchQueue() { - self._fetchQueue--; - - if (self._fetchQueue <= 0) { - self.isFetching = false; - events.trigger(self, 'endFetch'); + constructor() { + if (browser.edgeUwp) { + this.name = 'Windows Video Player'; + } else { + this.name = 'Html Video Player'; } } - function updateVideoUrl(streamInfo) { + currentSrc() { + return this.#currentSrc; + } - var isHls = streamInfo.url.toLowerCase().indexOf('.m3u8') !== -1; + /** + * @private + */ + incrementFetchQueue() { + if (this.#fetchQueue <= 0) { + this.isFetching = true; + events.trigger(this, 'beginFetch'); + } - var mediaSource = streamInfo.mediaSource; - var item = streamInfo.item; + this.#fetchQueue++; + } + + /** + * @private + */ + decrementFetchQueue() { + this.#fetchQueue--; + + if (this.#fetchQueue <= 0) { + this.isFetching = false; + events.trigger(this, 'endFetch'); + } + } + + /** + * @private + */ + updateVideoUrl(streamInfo) { + const isHls = streamInfo.url.toLowerCase().includes('.m3u8'); + + const mediaSource = streamInfo.mediaSource; + const item = streamInfo.item; // Huge hack alert. Safari doesn't seem to like if the segments aren't available right away when playback starts // This will start the transcoding process before actually feeding the video url into the player // Edit: Also seeing stalls from hls.js if (mediaSource && item && !mediaSource.RunTimeTicks && isHls && streamInfo.playMethod === 'Transcode' && (browser.iOS || browser.osx)) { - - var hlsPlaylistUrl = streamInfo.url.replace('master.m3u8', 'live.m3u8'); + const hlsPlaylistUrl = streamInfo.url.replace('master.m3u8', 'live.m3u8'); loading.show(); - console.debug('prefetching hls playlist: ' + hlsPlaylistUrl); + console.debug(`prefetching hls playlist: ${hlsPlaylistUrl}`); - return connectionManager.getApiClient(item.ServerId).ajax({ + return window.connectionManager.getApiClient(item.ServerId).ajax({ type: 'GET', url: hlsPlaylistUrl }).then(function () { - - console.debug('completed prefetching hls playlist: ' + hlsPlaylistUrl); + console.debug(`completed prefetching hls playlist: ${hlsPlaylistUrl}`); loading.hide(); streamInfo.url = hlsPlaylistUrl; - - return Promise.resolve(); - }, function () { - - console.error('error prefetching hls playlist: ' + hlsPlaylistUrl); + console.error(`error prefetching hls playlist: ${hlsPlaylistUrl}`); loading.hide(); - return Promise.resolve(); }); - } else { return Promise.resolve(); } } - self.play = function (options) { - self._started = false; - self._timeUpdated = false; + play(options) { + this.#started = false; + this.#timeUpdated = false; - self._currentTime = null; + this.#currentTime = null; - self.resetSubtitleOffset(); + this.resetSubtitleOffset(); - return createMediaElement(options).then(function (elem) { - - return updateVideoUrl(options).then(function () { - return setCurrentSrc(elem, options); + return this.createMediaElement(options).then(elem => { + return this.updateVideoUrl(options).then(() => { + return this.setCurrentSrc(elem, options); }); }); - }; + } - function setSrcWithFlvJs(instance, elem, options, url) { - - return new Promise(function (resolve, reject) { - - require(['flvjs'], function (flvjs) { - - var flvPlayer = flvjs.createPlayer({ + /** + * @private + */ + setSrcWithFlvJs(elem, options, url) { + return import('flvjs').then(({default: flvjs}) => { + const flvPlayer = flvjs.createPlayer({ type: 'flv', url: url }, @@ -311,288 +373,123 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa lazyLoad: false }); - flvPlayer.attachMediaElement(elem); - flvPlayer.load(); + flvPlayer.attachMediaElement(elem); + flvPlayer.load(); - flvPlayer.play().then(resolve, reject); - instance._flvPlayer = flvPlayer; + this.#flvPlayer = flvPlayer; - // This is needed in setCurrentTrackElement - self._currentSrc = url; - }); + // This is needed in setCurrentTrackElement + this.#currentSrc = url; + + return flvPlayer.play(); }); } - function setSrcWithHlsJs(instance, elem, options, url) { - - return new Promise(function (resolve, reject) { - - requireHlsPlayer(function () { - - var hls = new Hls({ - manifestLoadingTimeOut: 20000, - xhrSetup: function(xhr, xhr_url) { - xhr.withCredentials = true; - } - //appendErrorMaxRetry: 6, - //debug: true + /** + * @private + */ + setSrcWithHlsJs(elem, options, url) { + return new Promise((resolve, reject) => { + requireHlsPlayer(() => { + const hls = new Hls({ + manifestLoadingTimeOut: 20000 }); hls.loadSource(url); hls.attachMedia(elem); - htmlMediaHelper.bindEventsToHlsPlayer(self, hls, elem, onError, resolve, reject); + bindEventsToHlsPlayer(this, hls, elem, this.onError, resolve, reject); - self._hlsPlayer = hls; + this._hlsPlayer = hls; // This is needed in setCurrentTrackElement - self._currentSrc = url; + this.#currentSrc = url; }); }); } - function onShakaError(event) { + /** + * @private + */ + setCurrentSrc(elem, options) { + elem.removeEventListener('error', this.onError); - var error = event.detail; - console.error('Error code', error.code, 'object', error); - } - - function setSrcWithShakaPlayer(instance, elem, options, url) { - - return new Promise(function (resolve, reject) { - - require(['shaka'], function () { - /* globals shaka */ - - var player = new shaka.Player(elem); - - //player.configure({ - // abr: { - // enabled: false - // }, - // streaming: { - - // failureCallback: function () { - // alert(2); - // } - // } - //}); - - //shaka.log.setLevel(6); - - // Listen for error events. - player.addEventListener('error', onShakaError); - - // Try to load a manifest. - // This is an asynchronous process. - player.load(url).then(function () { - - // This runs if the asynchronous load is successful. - resolve(); - - }, reject); - - self._shakaPlayer = player; - - // This is needed in setCurrentTrackElement - self._currentSrc = url; - }); - }); - } - - function setCurrentSrcChromecast(instance, elem, options, url) { - - elem.autoplay = true; - - var lrd = new cast.receiver.MediaManager.LoadRequestData(); - lrd.currentTime = (options.playerStartPositionTicks || 0) / 10000000; - lrd.autoplay = true; - lrd.media = new cast.receiver.media.MediaInformation(); - - lrd.media.contentId = url; - lrd.media.contentType = options.mimeType; - lrd.media.streamType = cast.receiver.media.StreamType.OTHER; - lrd.media.customData = options; - - console.debug('loading media url into media manager'); - - try { - mediaManager.load(lrd); - // This is needed in setCurrentTrackElement - self._currentSrc = url; - - return Promise.resolve(); - } catch (err) { - - console.debug('media manager error: ' + err); - return Promise.reject(); - } - } - - // Adapted from : https://github.com/googlecast/CastReferencePlayer/blob/master/player.js - function onMediaManagerLoadMedia(event) { - - if (self._castPlayer) { - self._castPlayer.unload(); // Must unload before starting again. - } - self._castPlayer = null; - - var data = event.data; - - var media = event.data.media || {}; - var url = media.contentId; - var contentType = media.contentType.toLowerCase(); - var options = media.customData; - - var protocol; - var ext = 'm3u8'; - - var mediaElement = self._mediaElement; - - var host = new cast.player.api.Host({ - 'url': url, - 'mediaElement': mediaElement - }); - - if (ext === 'm3u8' || - contentType === 'application/x-mpegurl' || - contentType === 'application/vnd.apple.mpegurl') { - protocol = cast.player.api.CreateHlsStreamingProtocol(host); - } else if (ext === 'mpd' || - contentType === 'application/dash+xml') { - protocol = cast.player.api.CreateDashStreamingProtocol(host); - } else if (url.indexOf('.ism') > -1 || - contentType === 'application/vnd.ms-sstr+xml') { - protocol = cast.player.api.CreateSmoothStreamingProtocol(host); - } - - console.debug('loading playback url: ' + url); - console.debug('content type: ' + contentType); - - host.onError = function (errorCode) { - console.error('fatal Error - ' + errorCode); - }; - - mediaElement.autoplay = false; - - self._castPlayer = new cast.player.api.Player(host); - - self._castPlayer.load(protocol, data.currentTime || 0); - - self._castPlayer.playWhenHaveEnoughData(); - } - - function initMediaManager() { - - mediaManager.defaultOnLoad = mediaManager.onLoad.bind(mediaManager); - mediaManager.onLoad = onMediaManagerLoadMedia.bind(self); - - //mediaManager.defaultOnPlay = mediaManager.onPlay.bind(mediaManager); - //mediaManager.onPlay = function (event) { - // // TODO ??? - // mediaManager.defaultOnPlay(event); - //}; - - mediaManager.defaultOnStop = mediaManager.onStop.bind(mediaManager); - mediaManager.onStop = function (event) { - playbackManager.stop(); - mediaManager.defaultOnStop(event); - }; - } - - function setCurrentSrc(elem, options) { - - elem.removeEventListener('error', onError); - - var val = options.url; - console.debug('playing url: ' + val); + let val = options.url; + console.debug(`playing url: ${val}`); // Convert to seconds - var seconds = (options.playerStartPositionTicks || 0) / 10000000; + const seconds = (options.playerStartPositionTicks || 0) / 10000000; if (seconds) { - val += '#t=' + seconds; + val += `#t=${seconds}`; } - htmlMediaHelper.destroyHlsPlayer(self); - htmlMediaHelper.destroyFlvPlayer(self); - htmlMediaHelper.destroyCastPlayer(self); + destroyHlsPlayer(this); + destroyFlvPlayer(this); + destroyCastPlayer(this); - var tracks = getMediaStreamTextTracks(options.mediaSource); - - subtitleTrackIndexToSetOnPlaying = options.mediaSource.DefaultSubtitleStreamIndex == null ? -1 : options.mediaSource.DefaultSubtitleStreamIndex; - if (subtitleTrackIndexToSetOnPlaying != null && subtitleTrackIndexToSetOnPlaying >= 0) { - var initialSubtitleStream = options.mediaSource.MediaStreams[subtitleTrackIndexToSetOnPlaying]; + this.#subtitleTrackIndexToSetOnPlaying = options.mediaSource.DefaultSubtitleStreamIndex == null ? -1 : options.mediaSource.DefaultSubtitleStreamIndex; + if (this.#subtitleTrackIndexToSetOnPlaying != null && this.#subtitleTrackIndexToSetOnPlaying >= 0) { + const initialSubtitleStream = options.mediaSource.MediaStreams[this.#subtitleTrackIndexToSetOnPlaying]; if (!initialSubtitleStream || initialSubtitleStream.DeliveryMethod === 'Encode') { - subtitleTrackIndexToSetOnPlaying = -1; + this.#subtitleTrackIndexToSetOnPlaying = -1; } } - audioTrackIndexToSetOnPlaying = options.playMethod === 'Transcode' ? null : options.mediaSource.DefaultAudioStreamIndex; + this.#audioTrackIndexToSetOnPlaying = options.playMethod === 'Transcode' ? null : options.mediaSource.DefaultAudioStreamIndex; - self._currentPlayOptions = options; + this._currentPlayOptions = options; - var crossOrigin = htmlMediaHelper.getCrossOriginValue(options.mediaSource); + const crossOrigin = getCrossOriginValue(options.mediaSource); if (crossOrigin) { elem.crossOrigin = crossOrigin; } - /*if (htmlMediaHelper.enableHlsShakaPlayer(options.item, options.mediaSource, 'Video') && val.indexOf('.m3u8') !== -1) { - - setTracks(elem, tracks, options.item, options.mediaSource); - - return setSrcWithShakaPlayer(self, elem, options, val); - - } else*/ if (browser.chromecast && val.indexOf('.m3u8') !== -1 && options.mediaSource.RunTimeTicks) { - - return setCurrentSrcChromecast(self, elem, options, val); - } else if (htmlMediaHelper.enableHlsJsPlayer(options.mediaSource.RunTimeTicks, 'Video') && val.indexOf('.m3u8') !== -1) { - return setSrcWithHlsJs(self, elem, options, val); + if (enableHlsJsPlayer(options.mediaSource.RunTimeTicks, 'Video') && val.includes('.m3u8')) { + return this.setSrcWithHlsJs(elem, options, val); } else if (options.playMethod !== 'Transcode' && options.mediaSource.Container === 'flv') { - - return setSrcWithFlvJs(self, elem, options, val); - + return this.setSrcWithFlvJs(elem, options, val); } else { - elem.autoplay = true; // Safari will not send cookies without this elem.crossOrigin = 'use-credentials'; - return htmlMediaHelper.applySrc(elem, val, options).then(function () { + return applySrc(elem, val, options).then(() => { + this.#currentSrc = val; - self._currentSrc = val; - - return htmlMediaHelper.playWithPromise(elem, onError); + return playWithPromise(elem, this.onError); }); } } - self.setSubtitleStreamIndex = function (index) { + setSubtitleStreamIndex(index) { + this.setCurrentTrackElement(index); + } - setCurrentTrackElement(index); - }; + resetSubtitleOffset() { + this.#currentTrackOffset = 0; + this.#showTrackOffset = false; + } - self.resetSubtitleOffset = function() { - currentTrackOffset = 0; - showTrackOffset = false; - }; + enableShowingSubtitleOffset() { + this.#showTrackOffset = true; + } - self.enableShowingSubtitleOffset = function() { - showTrackOffset = true; - }; + disableShowingSubtitleOffset() { + this.#showTrackOffset = false; + } - self.disableShowingSubtitleOffset = function() { - showTrackOffset = false; - }; + isShowingSubtitleOffsetEnabled() { + return this.#showTrackOffset; + } - self.isShowingSubtitleOffsetEnabled = function() { - return showTrackOffset; - }; - - function getTextTrack() { - var videoElement = self._mediaElement; + /** + * @private + */ + getTextTrack() { + const videoElement = this.#mediaElement; if (videoElement) { return Array.from(videoElement.textTracks) - .find(function(trackElement) { + .find(function (trackElement) { // get showing .vtt textTack return trackElement.mode === 'showing'; }); @@ -601,69 +498,79 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa } } - self.setSubtitleOffset = function(offset) { - - var offsetValue = parseFloat(offset); + /** + * @private + */ + setSubtitleOffset(offset) { + const offsetValue = parseFloat(offset); // if .ass currently rendering - if (currentSubtitlesOctopus) { - updateCurrentTrackOffset(offsetValue); - currentSubtitlesOctopus.timeOffset = (self._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000 + offsetValue; + if (this.#currentSubtitlesOctopus) { + this.updateCurrentTrackOffset(offsetValue); + this.#currentSubtitlesOctopus.timeOffset = (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000 + offsetValue; } else { - var trackElement = getTextTrack(); + const trackElement = this.getTextTrack(); // if .vtt currently rendering if (trackElement) { - setTextTrackSubtitleOffset(trackElement, offsetValue); - } else if (currentTrackEvents) { - setTrackEventsSubtitleOffset(currentTrackEvents, offsetValue); + this.setTextTrackSubtitleOffset(trackElement, offsetValue); + } else if (this.#currentTrackEvents) { + this.setTrackEventsSubtitleOffset(this.#currentTrackEvents, offsetValue); } else { console.debug('No available track, cannot apply offset: ', offsetValue); } } - }; + } - function updateCurrentTrackOffset(offsetValue) { - - var relativeOffset = offsetValue; - var newTrackOffset = offsetValue; - if (currentTrackOffset) { - relativeOffset -= currentTrackOffset; + /** + * @private + */ + updateCurrentTrackOffset(offsetValue) { + let relativeOffset = offsetValue; + const newTrackOffset = offsetValue; + if (this.#currentTrackOffset) { + relativeOffset -= this.#currentTrackOffset; } - currentTrackOffset = newTrackOffset; + this.#currentTrackOffset = newTrackOffset; // relative to currentTrackOffset return relativeOffset; } - function setTextTrackSubtitleOffset(currentTrack, offsetValue) { - + /** + * @private + */ + setTextTrackSubtitleOffset(currentTrack, offsetValue) { if (currentTrack.cues) { - offsetValue = updateCurrentTrackOffset(offsetValue); + offsetValue = this.updateCurrentTrackOffset(offsetValue); Array.from(currentTrack.cues) - .forEach(function(cue) { + .forEach(function (cue) { cue.startTime -= offsetValue; cue.endTime -= offsetValue; }); } } - function setTrackEventsSubtitleOffset(trackEvents, offsetValue) { - + /** + * @private + */ + setTrackEventsSubtitleOffset(trackEvents, offsetValue) { if (Array.isArray(trackEvents)) { - offsetValue = updateCurrentTrackOffset(offsetValue) * 1e7; // ticks - trackEvents.forEach(function(trackEvent) { + offsetValue = this.updateCurrentTrackOffset(offsetValue) * 1e7; // ticks + trackEvents.forEach(function (trackEvent) { trackEvent.StartPositionTicks -= offsetValue; trackEvent.EndPositionTicks -= offsetValue; }); } } - self.getSubtitleOffset = function() { - return currentTrackOffset; - }; + getSubtitleOffset() { + return this.#currentTrackOffset; + } - function isAudioStreamSupported(stream, deviceProfile) { - - var codec = (stream.Codec || '').toLowerCase(); + /** + * @private + */ + isAudioStreamSupported(stream, deviceProfile) { + const codec = (stream.Codec || '').toLowerCase(); if (!codec) { return true; @@ -674,49 +581,43 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa return true; } - var profiles = deviceProfile.DirectPlayProfiles || []; + const profiles = deviceProfile.DirectPlayProfiles || []; return profiles.filter(function (p) { - if (p.Type === 'Video') { - if (!p.AudioCodec) { return true; } - return p.AudioCodec.toLowerCase().indexOf(codec) !== -1; + return p.AudioCodec.toLowerCase().includes(codec); } return false; - }).length > 0; } - function getSupportedAudioStreams() { - var profile = self._lastProfile; + /** + * @private + */ + getSupportedAudioStreams() { + const profile = this.#lastProfile; - return getMediaStreamAudioTracks(self._currentPlayOptions.mediaSource).filter(function (stream) { - return isAudioStreamSupported(stream, profile); + return getMediaStreamAudioTracks(this._currentPlayOptions.mediaSource).filter((stream) => { + return this.isAudioStreamSupported(stream, profile); }); } - self.setAudioStreamIndex = function (index) { - - var streams = getSupportedAudioStreams(); + setAudioStreamIndex(index) { + const streams = this.getSupportedAudioStreams(); if (streams.length < 2) { // If there's only one supported stream then trust that the player will handle it on it's own return; } - var audioIndex = -1; - var i; - var length; - var stream; - - for (i = 0, length = streams.length; i < length; i++) { - stream = streams[i]; + let audioIndex = -1; + for (const stream of streams) { audioIndex++; if (stream.Index === index) { @@ -728,208 +629,272 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa return; } - var elem = self._mediaElement; + const elem = this.#mediaElement; if (!elem) { return; } - // https://msdn.microsoft.com/en-us/library/hh772507(v=vs.85).aspx + // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks - var elemAudioTracks = elem.audioTracks || []; - console.debug('found ' + elemAudioTracks.length + ' audio tracks'); - - for (i = 0, length = elemAudioTracks.length; i < length; i++) { + /** + * @type {ArrayLike|any[]} + */ + const elemAudioTracks = elem.audioTracks || []; + console.debug(`found ${elemAudioTracks.length} audio tracks`); + for (const [i, audioTrack] of Array.from(elemAudioTracks).entries()) { if (audioIndex === i) { - console.debug('setting audio track ' + i + ' to enabled'); - elemAudioTracks[i].enabled = true; + console.debug(`setting audio track ${i} to enabled`); + audioTrack.enabled = true; } else { - console.debug('setting audio track ' + i + ' to disabled'); - elemAudioTracks[i].enabled = false; + console.debug(`setting audio track ${i} to disabled`); + audioTrack.enabled = false; } } - }; + } - self.stop = function (destroyPlayer) { - var elem = self._mediaElement; - var src = self._currentSrc; + stop(destroyPlayer) { + const elem = this.#mediaElement; + const src = this.#currentSrc; if (elem) { if (src) { elem.pause(); } - htmlMediaHelper.onEndedInternal(self, elem, onError); + onEndedInternal(this, elem, this.onError); if (destroyPlayer) { - self.destroy(); + this.destroy(); } } - destroyCustomTrack(elem); + this.destroyCustomTrack(elem); return Promise.resolve(); - }; + } - self.destroy = function () { - htmlMediaHelper.destroyHlsPlayer(self); - htmlMediaHelper.destroyFlvPlayer(self); + destroy() { + destroyHlsPlayer(this); + destroyFlvPlayer(this); appRouter.setTransparency('none'); - var videoElement = self._mediaElement; + const videoElement = this.#mediaElement; if (videoElement) { - self._mediaElement = null; + this.#mediaElement = null; - destroyCustomTrack(videoElement); - videoElement.removeEventListener('timeupdate', onTimeUpdate); - videoElement.removeEventListener('ended', onEnded); - videoElement.removeEventListener('volumechange', onVolumeChange); - videoElement.removeEventListener('pause', onPause); - videoElement.removeEventListener('playing', onPlaying); - videoElement.removeEventListener('play', onPlay); - videoElement.removeEventListener('click', onClick); - videoElement.removeEventListener('dblclick', onDblClick); - videoElement.removeEventListener('waiting', onWaiting); + this.destroyCustomTrack(videoElement); + videoElement.removeEventListener('timeupdate', this.onTimeUpdate); + videoElement.removeEventListener('ended', this.onEnded); + videoElement.removeEventListener('volumechange', this.onVolumeChange); + videoElement.removeEventListener('pause', this.onPause); + videoElement.removeEventListener('playing', this.onPlaying); + videoElement.removeEventListener('play', this.onPlay); + videoElement.removeEventListener('click', this.onClick); + videoElement.removeEventListener('dblclick', this.onDblClick); + videoElement.removeEventListener('waiting', this.onWaiting); videoElement.parentNode.removeChild(videoElement); } - var dlg = videoDialog; + const dlg = this.#videoDialog; if (dlg) { - videoDialog = null; + this.#videoDialog = null; dlg.parentNode.removeChild(dlg); } if (screenfull.isEnabled) { screenfull.exit(); + } else { + // iOS Safari + if (document.webkitIsFullScreen && document.webkitCancelFullscreen) { + document.webkitCancelFullscreen(); + } } + } + + /** + * @private + * @param e {Event} The event received from the `