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

Merge remote-tracking branch 'upstream/master' into fix-subtitle-line-spacing

Browse source 
Conflicts:
	src/components/subtitlesettings/subtitleappearancehelper.js
	src/components/subtitlesettings/subtitlesettings.js
	src/elements/emby-slider/emby-slider.js
This commit is contained in:
Dmitry Lyzo 2020-07-26 13:35:17 +03:00
commit 450807ff14
244 changed files with 7938 additions and 6524 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -36,6 +36,14 @@ jobs:
targetPath: '$(Build.SourcesDirectory)/deployment/dist' targetPath: '$(Build.SourcesDirectory)/deployment/dist'
artifactName: 'jellyfin-web-$(BuildConfiguration)' 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 - task: CopyFilesOverSSH@0
displayName: 'Upload artifacts to repository server' displayName: 'Upload artifacts to repository server'
condition: or(startsWith(variables['Build.SourceBranch'], 'refs/tags'), startsWith(variables['Build.SourceBranch'], 'refs/heads/master')) condition: or(startsWith(variables['Build.SourceBranch'], 'refs/tags'), startsWith(variables['Build.SourceBranch'], 'refs/heads/master'))

2
.dependabot/config.yml
View file

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

2
.eslintrc.js
View file

@ -193,4 +193,4 @@ module.exports = {
} }
} }
] ]
} };

4
.github/CODEOWNERS vendored
View file

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

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

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

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

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

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

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

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

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

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

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

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

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

155
package.json
View file

@ -5,18 +5,18 @@
"repository": "https://github.com/jellyfin/jellyfin-web", "repository": "https://github.com/jellyfin/jellyfin-web",
"license": "GPL-2.0-or-later", "license": "GPL-2.0-or-later",
"devDependencies": { "devDependencies": {
"@babel/core": "^7.10.3", "@babel/core": "^7.10.5",
"@babel/plugin-proposal-class-properties": "^7.10.1", "@babel/plugin-proposal-class-properties": "^7.10.1",
"@babel/plugin-proposal-private-methods": "^7.10.1", "@babel/plugin-proposal-private-methods": "^7.10.1",
"@babel/plugin-transform-modules-amd": "^7.9.6", "@babel/plugin-transform-modules-amd": "^7.10.5",
"@babel/polyfill": "^7.8.7", "@babel/polyfill": "^7.8.7",
"@babel/preset-env": "^7.10.3", "@babel/preset-env": "^7.10.3",
"autoprefixer": "^9.8.2", "autoprefixer": "^9.8.5",
"babel-eslint": "^11.0.0-beta.2", "babel-eslint": "^11.0.0-beta.2",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"browser-sync": "^2.26.7", "browser-sync": "^2.26.10",
"copy-webpack-plugin": "^5.1.1", "copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.6.0", "css-loader": "^4.0.0",
"cssnano": "^4.1.10", "cssnano": "^4.1.10",
"del": "^5.1.0", "del": "^5.1.0",
"eslint": "^6.8.0", "eslint": "^6.8.0",
@ -37,7 +37,7 @@
"gulp-postcss": "^8.0.0", "gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.2", "gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5", "gulp-sourcemaps": "^2.6.5",
"gulp-terser": "^1.2.0", "gulp-terser": "^1.2.1",
"html-webpack-plugin": "^4.3.0", "html-webpack-plugin": "^4.3.0",
"lazypipe": "^1.0.2", "lazypipe": "^1.0.2",
"node-sass": "^4.13.1", "node-sass": "^4.13.1",
@ -48,7 +48,7 @@
"stylelint-config-rational-order": "^0.1.2", "stylelint-config-rational-order": "^0.1.2",
"stylelint-no-browser-hacks": "^1.2.1", "stylelint-no-browser-hacks": "^1.2.1",
"stylelint-order": "^4.1.0", "stylelint-order": "^4.1.0",
"webpack": "^4.41.5", "webpack": "^4.44.0",
"webpack-merge": "^4.2.2", "webpack-merge": "^4.2.2",
"webpack-stream": "^5.2.1" "webpack-stream": "^5.2.1"
}, },
@ -57,15 +57,15 @@
"blurhash": "^1.1.3", "blurhash": "^1.1.3",
"classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz", "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"date-fns": "^2.14.0", "date-fns": "^2.15.0",
"epubjs": "^0.3.85", "epubjs": "^0.3.85",
"fast-text-encoding": "^1.0.3", "fast-text-encoding": "^1.0.3",
"flv.js": "^1.5.0", "flv.js": "^1.5.0",
"headroom.js": "^0.11.0", "headroom.js": "^0.11.0",
"hls.js": "^0.13.1", "hls.js": "^0.14.5",
"howler": "^2.2.0", "howler": "^2.2.0",
"intersection-observer": "^0.10.0", "intersection-observer": "^0.11.0",
"jellyfin-apiclient": "^1.3.0", "jellyfin-apiclient": "^1.4.1",
"jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto", "jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto",
"jquery": "^3.5.1", "jquery": "^3.5.1",
"jstree": "^3.3.10", "jstree": "^3.3.10",
@ -80,7 +80,7 @@
"sortablejs": "^1.10.2", "sortablejs": "^1.10.2",
"swiper": "^5.4.5", "swiper": "^5.4.5",
"webcomponents.js": "^0.7.24", "webcomponents.js": "^0.7.24",
"whatwg-fetch": "^3.0.0" "whatwg-fetch": "^3.2.0"
}, },
"babel": { "babel": {
"presets": [ "presets": [
@ -91,13 +91,46 @@
"test": [ "test": [
"src/components/accessSchedule/accessSchedule.js", "src/components/accessSchedule/accessSchedule.js",
"src/components/actionSheet/actionSheet.js", "src/components/actionSheet/actionSheet.js",
"src/components/activitylog.js",
"src/components/alert.js",
"src/components/alphaPicker/alphaPicker.js",
"src/components/appFooter/appFooter.js",
"src/components/autoFocuser.js", "src/components/autoFocuser.js",
"src/components/backdrop/backdrop.js",
"src/components/cardbuilder/cardBuilder.js", "src/components/cardbuilder/cardBuilder.js",
"src/components/cardbuilder/chaptercardbuilder.js", "src/components/cardbuilder/chaptercardbuilder.js",
"src/components/cardbuilder/peoplecardbuilder.js", "src/components/cardbuilder/peoplecardbuilder.js",
"src/components/channelMapper/channelMapper.js",
"src/components/collectionEditor/collectionEditor.js",
"src/components/confirm/confirm.js",
"src/components/dialog/dialog.js",
"src/components/dialogHelper/dialogHelper.js",
"src/components/directorybrowser/directorybrowser.js",
"src/components/displaySettings/displaySettings.js",
"src/components/fetchhelper.js",
"src/components/filterdialog/filterdialog.js",
"src/components/groupedcards.js",
"src/components/homeScreenSettings/homeScreenSettings.js",
"src/components/homesections/homesections.js",
"src/components/htmlMediaHelper.js",
"src/components/imageOptionsEditor/imageOptionsEditor.js",
"src/components/images/imageLoader.js", "src/components/images/imageLoader.js",
"src/components/imageUploader/imageUploader.js",
"src/components/indicators/indicators.js", "src/components/indicators/indicators.js",
"src/components/itemContextMenu.js",
"src/components/itemidentifier/itemidentifier.js",
"src/components/itemMediaInfo/itemMediaInfo.js",
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
"src/components/libraryoptionseditor/libraryoptionseditor.js",
"src/components/listview/listview.js",
"src/components/maintabsmanager.js",
"src/components/mediainfo/mediainfo.js",
"src/components/mediaLibraryCreator/mediaLibraryCreator.js",
"src/components/mediaLibraryEditor/mediaLibraryEditor.js",
"src/components/metadataEditor/metadataEditor.js",
"src/components/metadataEditor/personEditor.js",
"src/components/multiSelect/multiSelect.js",
"src/components/nowPlayingBar/nowPlayingBar.js",
"src/components/playback/brightnessosd.js", "src/components/playback/brightnessosd.js",
"src/components/playback/mediasession.js", "src/components/playback/mediasession.js",
"src/components/playback/nowplayinghelper.js", "src/components/playback/nowplayinghelper.js",
@ -107,32 +140,122 @@
"src/components/playback/playmethodhelper.js", "src/components/playback/playmethodhelper.js",
"src/components/playback/remotecontrolautoplay.js", "src/components/playback/remotecontrolautoplay.js",
"src/components/playback/volumeosd.js", "src/components/playback/volumeosd.js",
"src/components/playbackSettings/playbackSettings.js",
"src/components/playerstats/playerstats.js",
"src/components/playlisteditor/playlisteditor.js",
"src/components/playmenu.js", "src/components/playmenu.js",
"src/components/prompt/prompt.js",
"src/components/sanatizefilename.js", "src/components/sanatizefilename.js",
"src/components/scrollManager.js", "src/components/scrollManager.js",
"src/components/search/searchfields.js",
"src/components/search/searchresults.js",
"src/components/settingshelper.js",
"src/components/shortcuts.js",
"src/components/subtitlesettings/subtitleappearancehelper.js",
"src/components/subtitlesettings/subtitlesettings.js",
"src/components/syncPlay/groupSelectionMenu.js", "src/components/syncPlay/groupSelectionMenu.js",
"src/components/syncPlay/playbackPermissionManager.js", "src/components/syncPlay/playbackPermissionManager.js",
"src/components/syncPlay/syncPlayManager.js", "src/components/syncPlay/syncPlayManager.js",
"src/components/syncPlay/timeSyncManager.js", "src/components/syncPlay/timeSyncManager.js",
"src/controllers/auth/addserver.js",
"src/controllers/auth/forgotpassword.js",
"src/controllers/auth/forgotpasswordpin.js",
"src/controllers/auth/login.js",
"src/controllers/auth/selectserver.js",
"src/controllers/dashboard/apikeys.js",
"src/controllers/dashboard/dashboard.js",
"src/controllers/dashboard/devices/device.js",
"src/controllers/dashboard/devices/devices.js",
"src/controllers/dashboard/dlna/profile.js",
"src/controllers/dashboard/dlna/profiles.js",
"src/controllers/dashboard/dlna/settings.js",
"src/controllers/dashboard/encodingsettings.js",
"src/controllers/dashboard/general.js",
"src/controllers/dashboard/librarydisplay.js",
"src/controllers/dashboard/logs.js", "src/controllers/dashboard/logs.js",
"src/controllers/dashboard/mediaLibrary.js",
"src/controllers/dashboard/metadataImages.js",
"src/controllers/dashboard/metadatanfo.js",
"src/controllers/dashboard/networking.js",
"src/controllers/dashboard/playback.js",
"src/controllers/dashboard/plugins/repositories.js", "src/controllers/dashboard/plugins/repositories.js",
"src/controllers/dashboard/scheduledtasks/scheduledtask.js",
"src/controllers/dashboard/scheduledtasks/scheduledtasks.js",
"src/controllers/dashboard/serveractivity.js",
"src/controllers/dashboard/streaming.js",
"src/controllers/dashboard/users/useredit.js",
"src/controllers/dashboard/users/userlibraryaccess.js",
"src/controllers/dashboard/users/usernew.js",
"src/controllers/dashboard/users/userparentalcontrol.js",
"src/controllers/dashboard/users/userpasswordpage.js",
"src/controllers/dashboard/users/userprofilespage.js",
"src/controllers/playback/nowplaying.js",
"src/controllers/playback/videoosd.js",
"src/controllers/searchpage.js",
"src/controllers/shows/episodes.js",
"src/controllers/shows/tvgenres.js",
"src/controllers/shows/tvlatest.js",
"src/controllers/shows/tvrecommended.js",
"src/controllers/shows/tvshows.js",
"src/controllers/shows/tvstudios.js",
"src/controllers/shows/tvupcoming.js",
"src/controllers/user/display.js",
"src/controllers/user/home.js",
"src/controllers/user/menu.js",
"src/controllers/user/playback.js",
"src/controllers/user/profile.js",
"src/controllers/user/subtitles.js",
"src/controllers/user/subtitles.js",
"src/controllers/wizard/finish.js",
"src/controllers/wizard/remoteaccess.js",
"src/controllers/wizard/settings.js",
"src/controllers/wizard/start.js",
"src/controllers/wizard/user.js",
"src/elements/emby-button/emby-button.js",
"src/elements/emby-button/paper-icon-button-light.js",
"src/elements/emby-checkbox/emby-checkbox.js",
"src/elements/emby-collapse/emby-collapse.js",
"src/elements/emby-input/emby-input.js",
"src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js",
"src/elements/emby-itemscontainer/emby-itemscontainer.js",
"src/elements/emby-playstatebutton/emby-playstatebutton.js",
"src/elements/emby-programcell/emby-programcell.js",
"src/elements/emby-progressbar/emby-progressbar.js",
"src/elements/emby-progressring/emby-progressring.js",
"src/elements/emby-radio/emby-radio.js",
"src/elements/emby-ratingbutton/emby-ratingbutton.js",
"src/elements/emby-scrollbuttons/emby-scrollbuttons.js",
"src/elements/emby-scroller/emby-scroller.js",
"src/elements/emby-select/emby-select.js",
"src/elements/emby-slider/emby-slider.js",
"src/elements/emby-tabs/emby-tabs.js",
"src/elements/emby-textarea/emby-textarea.js",
"src/elements/emby-toggle/emby-toggle.js",
"src/plugins/backdropScreensaver/plugin.js",
"src/plugins/bookPlayer/plugin.js", "src/plugins/bookPlayer/plugin.js",
"src/plugins/bookPlayer/tableOfContents.js", "src/plugins/bookPlayer/tableOfContents.js",
"src/plugins/photoPlayer/plugin.js", "src/plugins/photoPlayer/plugin.js",
"src/plugins/youtubePlayer/plugin.js",
"src/scripts/alphanumericshortcuts.js",
"src/scripts/autoBackdrops.js",
"src/scripts/datetime.js",
"src/scripts/deleteHelper.js", "src/scripts/deleteHelper.js",
"src/scripts/dfnshelper.js", "src/scripts/dfnshelper.js",
"src/scripts/dom.js", "src/scripts/dom.js",
"src/scripts/editorsidebar.js",
"src/scripts/fileDownloader.js", "src/scripts/fileDownloader.js",
"src/scripts/filesystem.js", "src/scripts/filesystem.js",
"src/scripts/globalize.js",
"src/scripts/imagehelper.js", "src/scripts/imagehelper.js",
"src/scripts/inputManager.js", "src/scripts/inputManager.js",
"src/plugins/backdropScreensaver/plugin.js",
"src/components/filterdialog/filterdialog.js",
"src/components/fetchhelper.js",
"src/scripts/keyboardNavigation.js", "src/scripts/keyboardNavigation.js",
"src/scripts/playlists.js",
"src/scripts/settings/appSettings.js", "src/scripts/settings/appSettings.js",
"src/scripts/settings/userSettings.js", "src/scripts/settings/userSettings.js",
"src/scripts/settings/webSettings.js" "src/scripts/settings/webSettings.js",
"src/scripts/taskbutton.js",
"src/scripts/themeLoader.js",
"src/scripts/touchHelper.js"
], ],
"plugins": [ "plugins": [
"@babel/plugin-transform-modules-amd", "@babel/plugin-transform-modules-amd",

9
src/assets/css/dashboard.css
View file

@ -235,6 +235,15 @@ div[data-role=controlgroup] a.ui-btn-active {
width: 50%; width: 50%;
} }
.localUsers .cardText-secondary {
white-space: pre-wrap;
height: 3em;
}
.customCssContainer textarea {
resize: none;
}
@media all and (min-width: 70em) { @media all and (min-width: 70em) {
.dashboardSections { .dashboardSections {
-webkit-flex-wrap: wrap; -webkit-flex-wrap: wrap;

5
src/assets/css/ios.css
View file

@ -1,8 +1,3 @@
html { html {
font-size: 82% !important; font-size: 82% !important;
} }
.formDialogFooter {
position: static !important;
margin: 0 -1em !important;
}

28
src/assets/css/librarybrowser.css
View file

@ -175,6 +175,10 @@
width: 100%; width: 100%;
} }
.layout-tv .sectionTabs {
width: 55%;
}
.selectedMediaFolder { .selectedMediaFolder {
background-color: #f2f2f2 !important; background-color: #f2f2f2 !important;
} }
@ -269,7 +273,7 @@
} }
} }
@media all and (max-width: 84em) { @media all and (max-width: 100em) {
.withSectionTabs .headerTop { .withSectionTabs .headerTop {
padding-bottom: 0.55em; padding-bottom: 0.55em;
} }
@ -277,9 +281,13 @@
.sectionTabs { .sectionTabs {
font-size: 83.5%; font-size: 83.5%;
} }
.layout-tv .sectionTabs {
width: 100%;
}
} }
@media all and (min-width: 84em) { @media all and (min-width: 100em) {
.headerTop { .headerTop {
padding: 0.8em 0.8em; padding: 0.8em 0.8em;
} }
@ -910,21 +918,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
} }
} }
@media all and (min-width: 62.5em) { @media all and (min-width: 100em) {
.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 { .detailFloatingButton {
display: none !important; display: none !important;
} }

2
src/assets/css/scrollstyles.css
View file

@ -12,6 +12,7 @@
.hiddenScrollX, .hiddenScrollX,
.layout-tv .scrollX { .layout-tv .scrollX {
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none;
} }
.hiddenScrollX-forced { .hiddenScrollX-forced {
@ -40,6 +41,7 @@
.hiddenScrollY, .hiddenScrollY,
.layout-tv .smoothScrollY { .layout-tv .smoothScrollY {
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none;
/* Can't do this because it not only hides the scrollbar, but also prevents scrolling */ /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */

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

@ -3,6 +3,11 @@ html {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
}
.layout-mobile,
.layout-tv {
-webkit-touch-callout: none;
user-select: none; user-select: none;
} }
@ -35,12 +40,6 @@ html {
line-height: 1.35; line-height: 1.35;
} }
.layout-mobile,
.layout-tv {
-webkit-touch-callout: none;
user-select: none;
}
body { body {
overflow-x: hidden; overflow-x: hidden;
background-color: transparent !important; background-color: transparent !important;
@ -130,3 +129,7 @@ div[data-role=page] {
.hide-scroll { .hide-scroll {
overflow-y: hidden; overflow-y: hidden;
} }
.w-100 {
width: 100%;
}

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

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

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

@ -73,7 +73,7 @@ function getPosition(options, dlg) {
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(({default: scrollHelper}) => {
const fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });

62
src/components/activitylog.js
View file

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

22
src/components/alert.js
View file

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

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

@ -1,11 +1,22 @@
define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-button-light', 'material-icons'], function (focusManager, layoutManager, dom) { /* eslint-disable indent */
'use strict';
var selectedButtonClass = 'alphaPickerButton-selected'; /**
* Module alphaPicker.
* @module components/alphaPicker/alphaPicker
*/
import focusManager from 'focusManager';
import layoutManager from 'layoutManager';
import dom from 'dom';
import 'css!./style.css';
import 'paper-icon-button-light';
import 'material-icons';
const selectedButtonClass = 'alphaPickerButton-selected';
function focus() { function focus() {
var scope = this; const scope = this;
var selected = scope.querySelector('.' + selectedButtonClass); const selected = scope.querySelector(`.${selectedButtonClass}`);
if (selected) { if (selected) {
focusManager.focus(selected); focusManager.focus(selected);
@ -16,7 +27,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
function getAlphaPickerButtonClassName(vertical) { function getAlphaPickerButtonClassName(vertical) {
var alphaPickerButtonClassName = 'alphaPickerButton'; let alphaPickerButtonClassName = 'alphaPickerButton';
if (layoutManager.tv) { if (layoutManager.tv) {
alphaPickerButtonClassName += ' alphaPickerButton-tv'; alphaPickerButtonClassName += ' alphaPickerButton-tv';
@ -30,12 +41,12 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
} }
function getLetterButton(l, vertical) { function getLetterButton(l, vertical) {
return '<button data-value="' + l + '" class="' + getAlphaPickerButtonClassName(vertical) + '">' + l + '</button>'; return `<button data-value="${l}" class="${getAlphaPickerButtonClassName(vertical)}">${l}</button>`;
} }
function mapLetters(letters, vertical) { function mapLetters(letters, vertical) {
return letters.map(function (l) { return letters.map(l => {
return getLetterButton(l, vertical); return getLetterButton(l, vertical);
}); });
} }
@ -48,26 +59,26 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
element.classList.add('alphaPicker-tv'); element.classList.add('alphaPicker-tv');
} }
var vertical = element.classList.contains('alphaPicker-vertical'); const vertical = element.classList.contains('alphaPicker-vertical');
if (!vertical) { if (!vertical) {
element.classList.add('focuscontainer-x'); element.classList.add('focuscontainer-x');
} }
var html = ''; let html = '';
var letters; let letters;
var alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical); const alphaPickerButtonClassName = getAlphaPickerButtonClassName(vertical);
var rowClassName = 'alphaPickerRow'; let rowClassName = 'alphaPickerRow';
if (vertical) { if (vertical) {
rowClassName += ' alphaPickerRow-vertical'; rowClassName += ' alphaPickerRow-vertical';
} }
html += '<div class="' + rowClassName + '">'; html += `<div class="${rowClassName}">`;
if (options.mode === 'keyboard') { if (options.mode === 'keyboard') {
html += '<button data-value=" " is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><span class="material-icons alphaPickerButtonIcon space_bar"></span></button>'; html += `<button data-value=" " is="paper-icon-button-light" class="${alphaPickerButtonClassName}"><span class="material-icons alphaPickerButtonIcon space_bar"></span></button>`;
} else { } else {
letters = ['#']; letters = ['#'];
html += mapLetters(letters, vertical).join(''); html += mapLetters(letters, vertical).join('');
@ -77,11 +88,11 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
html += mapLetters(letters, vertical).join(''); html += mapLetters(letters, vertical).join('');
if (options.mode === 'keyboard') { if (options.mode === 'keyboard') {
html += '<button data-value="backspace" is="paper-icon-button-light" class="' + alphaPickerButtonClassName + '"><span class="material-icons alphaPickerButtonIcon backspace"></span></button>'; html += `<button data-value="backspace" is="paper-icon-button-light" class="${alphaPickerButtonClassName}"><span class="material-icons alphaPickerButtonIcon backspace"></span></button>`;
html += '</div>'; html += '</div>';
letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
html += '<div class="' + rowClassName + '">'; html += `<div class="${rowClassName}">`;
html += '<br/>'; html += '<br/>';
html += mapLetters(letters, vertical).join(''); html += mapLetters(letters, vertical).join('');
html += '</div>'; html += '</div>';
@ -95,47 +106,47 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
element.focus = focus; element.focus = focus;
} }
function AlphaPicker(options) { export class AlphaPicker {
constructor(options) {
const self = this;
var self = this;
this.options = options; this.options = options;
var element = options.element; const element = options.element;
var itemsContainer = options.itemsContainer; const itemsContainer = options.itemsContainer;
var itemClass = options.itemClass; const itemClass = options.itemClass;
var itemFocusValue; let itemFocusValue;
var itemFocusTimeout; let itemFocusTimeout;
function onItemFocusTimeout() { function onItemFocusTimeout() {
itemFocusTimeout = null; itemFocusTimeout = null;
self.value(itemFocusValue); self.value(itemFocusValue);
} }
var alphaFocusedElement; let alphaFocusedElement;
var alphaFocusTimeout; let alphaFocusTimeout;
function onAlphaFocusTimeout() { function onAlphaFocusTimeout() {
alphaFocusTimeout = null; alphaFocusTimeout = null;
if (document.activeElement === alphaFocusedElement) { if (document.activeElement === alphaFocusedElement) {
var value = alphaFocusedElement.getAttribute('data-value'); const value = alphaFocusedElement.getAttribute('data-value');
self.value(value, true); self.value(value, true);
} }
} }
function onAlphaPickerInKeyboardModeClick(e) { function onAlphaPickerInKeyboardModeClick(e) {
var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
if (alphaPickerButton) { if (alphaPickerButton) {
var value = alphaPickerButton.getAttribute('data-value'); const value = alphaPickerButton.getAttribute('data-value');
element.dispatchEvent(new CustomEvent('alphavalueclicked', { element.dispatchEvent(new CustomEvent('alphavalueclicked', {
cancelable: false, cancelable: false,
detail: { detail: {
value: value value
} }
})); }));
} }
@ -143,14 +154,14 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
function onAlphaPickerClick(e) { function onAlphaPickerClick(e) {
var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
if (alphaPickerButton) { if (alphaPickerButton) {
var value = alphaPickerButton.getAttribute('data-value'); const value = alphaPickerButton.getAttribute('data-value');
if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) { if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) {
self.value(null, true); this.value(null, true);
} else { } else {
self.value(value, true); this.value(value, true);
} }
} }
} }
@ -162,7 +173,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
alphaFocusTimeout = null; alphaFocusTimeout = null;
} }
var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton'); const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
if (alphaPickerButton) { if (alphaPickerButton) {
alphaFocusedElement = alphaPickerButton; alphaFocusedElement = alphaPickerButton;
@ -172,10 +183,10 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
function onItemsFocusIn(e) { function onItemsFocusIn(e) {
var item = dom.parentWithClass(e.target, itemClass); const item = dom.parentWithClass(e.target, itemClass);
if (item) { if (item) {
var prefix = item.getAttribute('data-prefix'); const prefix = item.getAttribute('data-prefix');
if (prefix && prefix.length) { if (prefix && prefix.length) {
itemFocusValue = prefix[0]; itemFocusValue = prefix[0];
@ -187,7 +198,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
} }
} }
self.enabled = function (enabled) { this.enabled = function (enabled) {
if (enabled) { if (enabled) {
@ -223,11 +234,11 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
this.visible(true); this.visible(true);
} }
AlphaPicker.prototype.value = function (value, applyValue) { value(value, applyValue) {
var element = this.options.element; const element = this.options.element;
var btn; let btn;
var selected; let selected;
if (value !== undefined) { if (value !== undefined) {
if (value != null) { if (value != null) {
@ -236,12 +247,12 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
this._currentValue = value; this._currentValue = value;
if (this.options.mode !== 'keyboard') { if (this.options.mode !== 'keyboard') {
selected = element.querySelector('.' + selectedButtonClass); selected = element.querySelector(`.${selectedButtonClass}`);
try { try {
btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']'); btn = element.querySelector(`.alphaPickerButton[data-value='${value}']`);
} catch (err) { } catch (err) {
console.error('error in querySelector: ' + err); console.error('error in querySelector:', err);
} }
if (btn && btn !== selected) { if (btn && btn !== selected) {
@ -254,7 +265,7 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
} else { } else {
this._currentValue = value; this._currentValue = value;
selected = element.querySelector('.' + selectedButtonClass); selected = element.querySelector(`.${selectedButtonClass}`);
if (selected) { if (selected) {
selected.classList.remove(selectedButtonClass); selected.classList.remove(selectedButtonClass);
} }
@ -265,57 +276,58 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
element.dispatchEvent(new CustomEvent('alphavaluechanged', { element.dispatchEvent(new CustomEvent('alphavaluechanged', {
cancelable: false, cancelable: false,
detail: { detail: {
value: value value
} }
})); }));
} }
return this._currentValue; return this._currentValue;
}; }
AlphaPicker.prototype.on = function (name, fn) { on(name, fn) {
var element = this.options.element; const element = this.options.element;
element.addEventListener(name, fn); element.addEventListener(name, fn);
}; }
AlphaPicker.prototype.off = function (name, fn) { off(name, fn) {
var element = this.options.element; const element = this.options.element;
element.removeEventListener(name, fn); element.removeEventListener(name, fn);
}; }
AlphaPicker.prototype.visible = function (visible) { visible(visible) {
var element = this.options.element; const element = this.options.element;
element.style.visibility = visible ? 'visible' : 'hidden'; element.style.visibility = visible ? 'visible' : 'hidden';
}; }
AlphaPicker.prototype.values = function () { values() {
var element = this.options.element; const element = this.options.element;
var elems = element.querySelectorAll('.alphaPickerButton'); const elems = element.querySelectorAll('.alphaPickerButton');
var values = []; const values = [];
for (var i = 0, length = elems.length; i < length; i++) { for (let i = 0, length = elems.length; i < length; i++) {
values.push(elems[i].getAttribute('data-value')); values.push(elems[i].getAttribute('data-value'));
} }
return values; return values;
}; }
AlphaPicker.prototype.focus = function () { focus() {
var element = this.options.element; const element = this.options.element;
focusManager.autoFocus(element, true); focusManager.autoFocus(element, true);
}; }
AlphaPicker.prototype.destroy = function () { destroy() {
var element = this.options.element; const element = this.options.element;
this.enabled(false); this.enabled(false);
element.classList.remove('focuscontainer-x'); element.classList.remove('focuscontainer-x');
this.options = null; this.options = null;
}; }
}
return AlphaPicker; /* eslint-enable indent */
}); export default AlphaPicker;

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

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

47
src/components/appRouter.js
View file

@ -21,7 +21,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
}; };
function beginConnectionWizard() { function beginConnectionWizard() {
backdrop.clear(); backdrop.clearBackdrop();
loading.show(); loading.show();
connectionManager.connect({ connectionManager.connect({
enableAutoLogin: appSettings.enableAutoLogin() enableAutoLogin: appSettings.enableAutoLogin()
@ -53,7 +53,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
break; break;
case 'ServerUpdateNeeded': case 'ServerUpdateNeeded':
require(['alert'], function (alert) { require(['alert'], function (alert) {
alert({ alert.default({
text: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin'), text: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin'),
html: globalize.translate('ServerUpdateNeeded', '<a href="https://github.com/jellyfin/jellyfin">https://github.com/jellyfin/jellyfin</a>') html: globalize.translate('ServerUpdateNeeded', '<a href="https://github.com/jellyfin/jellyfin">https://github.com/jellyfin/jellyfin</a>')
}).then(function () { }).then(function () {
@ -222,46 +222,13 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
} }
function normalizeImageOptions(options) { function normalizeImageOptions(options) {
var scaleFactor = browser.tv ? 0.8 : 1;
var setQuality; var setQuality;
if (options.maxWidth) { if (options.maxWidth || options.width || options.maxHeight || options.height) {
options.maxWidth = Math.round(options.maxWidth * scaleFactor);
setQuality = true; setQuality = true;
} }
if (options.width) { if (setQuality && !options.quality) {
options.width = Math.round(options.width * scaleFactor); options.quality = 90;
setQuality = true;
}
if (options.maxHeight) {
options.maxHeight = Math.round(options.maxHeight * scaleFactor);
setQuality = true;
}
if (options.height) {
options.height = Math.round(options.height * scaleFactor);
setQuality = true;
}
if (setQuality) {
var quality;
var type = options.type || 'Primary';
if (browser.tv || browser.slow) {
// TODO: wtf
if (browser.chrome) {
// webp support
quality = type === 'Primary' ? 40 : 50;
} else {
quality = type === 'Backdrop' ? 60 : 50;
}
} else {
quality = type === 'Backdrop' ? 70 : 90;
}
options.quality = quality;
} }
} }
@ -465,7 +432,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
function loadContent(ctx, route, html, request) { function loadContent(ctx, route, html, request) {
html = globalize.translateDocument(html, route.dictionary); html = globalize.translateHtml(html, route.dictionary);
request.view = html; request.view = html;
viewManager.loadView(request); viewManager.loadView(request);
@ -657,7 +624,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdro
} }
if (level === 'full' || level === 2) { if (level === 'full' || level === 2) {
backdrop.clear(true); backdrop.clearBackdrop(true);
document.documentElement.classList.add('transparentDocument'); document.documentElement.classList.add('transparentDocument');
backgroundContainer.classList.add('backgroundContainer-transparent'); backgroundContainer.classList.add('backgroundContainer-transparent');
backdropContainer.classList.add('hide'); backdropContainer.classList.add('hide');

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

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

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

@ -1160,10 +1160,10 @@ import 'programStyles';
/** /**
* Imports the refresh indicator element. * Imports the refresh indicator element.
*/ */
function requireRefreshIndicator() { function importRefreshIndicator() {
if (!refreshIndicatorLoaded) { if (!refreshIndicatorLoaded) {
refreshIndicatorLoaded = true; refreshIndicatorLoaded = true;
require(['emby-itemrefreshindicator']); import('emby-itemrefreshindicator');
} }
} }
@ -1415,7 +1415,7 @@ import 'programStyles';
if (item.Type === 'CollectionFolder' || item.CollectionType) { if (item.Type === 'CollectionFolder' || item.CollectionType) {
const refreshClass = item.RefreshProgress ? '' : ' class="hide"'; const refreshClass = item.RefreshProgress ? '' : ' class="hide"';
indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>'; indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>';
requireRefreshIndicator(); importRefreshIndicator();
} }
if (indicatorsHtml) { if (indicatorsHtml) {
@ -1468,7 +1468,7 @@ import 'programStyles';
let additionalCardContent = ''; let additionalCardContent = '';
if (layoutManager.desktop) { if (layoutManager.desktop && !options.disableHoverMenu) {
additionalCardContent += getHoverMenuHtml(item, action, options); additionalCardContent += getHoverMenuHtml(item, action, options);
} }
@ -1497,23 +1497,20 @@ import 'programStyles';
const userData = item.UserData || {}; const userData = item.UserData || {};
if (itemHelper.canMarkPlayed(item) && !options.disableHoverMenu) { if (itemHelper.canMarkPlayed(item)) {
require(['emby-playstatebutton']); import('emby-playstatebutton');
html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check"></span></button>'; html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover check"></span></button>';
} }
if (itemHelper.canRate(item) && !options.disableHoverMenu) { if (itemHelper.canRate(item)) {
const likes = userData.Likes == null ? '' : userData.Likes; const likes = userData.Likes == null ? '' : userData.Likes;
require(['emby-ratingbutton']); import('emby-ratingbutton');
html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite"></span></button>'; html += '<button is="emby-ratingbutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover favorite"></span></button>';
} }
if (!options.disableHoverMenu) {
html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_vert"></span></button>'; html += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><span class="material-icons cardOverlayButtonIcon cardOverlayButtonIcon-hover more_vert"></span></button>';
}
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';

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

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

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

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

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

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

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

@ -1,20 +1,31 @@
define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle', 'flexStyles'], function (dialogHelper, dom, layoutManager, scrollHelper, globalize, require) { import dialogHelper from 'dialogHelper';
'use strict'; import dom from 'dom';
import layoutManager from 'layoutManager';
import scrollHelper from 'scrollHelper';
import globalize from 'globalize';
import 'material-icons';
import 'emby-button';
import 'paper-icon-button-light';
import 'emby-input';
import 'formDialogStyle';
import 'flexStyles';
/* eslint-disable indent */
function showDialog(options, template) { function showDialog(options, template) {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
var enableTvLayout = layoutManager.tv; const enableTvLayout = layoutManager.tv;
if (enableTvLayout) { if (enableTvLayout) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
@ -22,7 +33,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
dlg.classList.add('align-items-center'); dlg.classList.add('align-items-center');
dlg.classList.add('justify-content-center'); dlg.classList.add('justify-content-center');
var formDialogContent = dlg.querySelector('.formDialogContent'); const formDialogContent = dlg.querySelector('.formDialogContent');
formDialogContent.classList.add('no-grow'); formDialogContent.classList.add('no-grow');
if (enableTvLayout) { if (enableTvLayout) {
@ -30,7 +41,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
formDialogContent.style['max-height'] = '60%'; formDialogContent.style['max-height'] = '60%';
scrollHelper.centerFocus.on(formDialogContent, false); scrollHelper.centerFocus.on(formDialogContent, false);
} else { } else {
formDialogContent.style.maxWidth = (Math.min((options.buttons.length * 150) + 200, dom.getWindowSize().innerWidth - 50)) + 'px'; formDialogContent.style.maxWidth = `${Math.min((options.buttons.length * 150) + 200, dom.getWindowSize().innerWidth - 50)}px`;
dlg.classList.add('dialog-fullscreen-lowres'); dlg.classList.add('dialog-fullscreen-lowres');
} }
@ -44,27 +55,27 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
dlg.querySelector('.formDialogHeaderTitle').classList.add('hide'); dlg.querySelector('.formDialogHeaderTitle').classList.add('hide');
} }
var displayText = options.html || options.text || ''; const displayText = options.html || options.text || '';
dlg.querySelector('.text').innerHTML = displayText; dlg.querySelector('.text').innerHTML = displayText;
if (!displayText) { if (!displayText) {
dlg.querySelector('.dialogContentInner').classList.add('hide'); dlg.querySelector('.dialogContentInner').classList.add('hide');
} }
var i; let i;
var length; let length;
var html = ''; let html = '';
var hasDescriptions = false; let hasDescriptions = false;
for (i = 0, length = options.buttons.length; i < length; i++) { for (i = 0, length = options.buttons.length; i < length; i++) {
var item = options.buttons[i]; const item = options.buttons[i];
var autoFocus = i === 0 ? ' autofocus' : ''; const autoFocus = i === 0 ? ' autofocus' : '';
var buttonClass = 'btnOption raised formDialogFooterItem formDialogFooterItem-autosize'; let buttonClass = 'btnOption raised formDialogFooterItem formDialogFooterItem-autosize';
if (item.type) { if (item.type) {
buttonClass += ' button-' + item.type; buttonClass += ` button-${item.type}`;
} }
if (item.description) { if (item.description) {
@ -75,10 +86,10 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
buttonClass += ' formDialogFooterItem-vertical formDialogFooterItem-nomarginbottom'; buttonClass += ' formDialogFooterItem-vertical formDialogFooterItem-nomarginbottom';
} }
html += '<button is="emby-button" type="button" class="' + buttonClass + '" data-id="' + item.id + '"' + autoFocus + '>' + item.name + '</button>'; html += `<button is="emby-button" type="button" class="${buttonClass}" data-id="${item.id}"${autoFocus}>${item.name}</button>`;
if (item.description) { if (item.description) {
html += '<div class="formDialogFooterItem formDialogFooterItem-autosize fieldDescription" style="margin-top:.25em!important;margin-bottom:1.25em!important;">' + item.description + '</div>'; html += `<div class="formDialogFooterItem formDialogFooterItem-autosize fieldDescription" style="margin-top:.25em!important;margin-bottom:1.25em!important;">${item.description}</div>`;
} }
} }
@ -88,18 +99,18 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
dlg.querySelector('.formDialogFooter').classList.add('formDialogFooter-vertical'); dlg.querySelector('.formDialogFooter').classList.add('formDialogFooter-vertical');
} }
var dialogResult; let dialogResult;
function onButtonClick() { function onButtonClick() {
dialogResult = this.getAttribute('data-id'); dialogResult = this.getAttribute('data-id');
dialogHelper.close(dlg); dialogHelper.close(dlg);
} }
var buttons = dlg.querySelectorAll('.btnOption'); const buttons = dlg.querySelectorAll('.btnOption');
for (i = 0, length = buttons.length; i < length; i++) { for (i = 0, length = buttons.length; i < length; i++) {
buttons[i].addEventListener('click', onButtonClick); buttons[i].addEventListener('click', onButtonClick);
} }
return dialogHelper.open(dlg).then(function () { return dialogHelper.open(dlg).then(() => {
if (enableTvLayout) { if (enableTvLayout) {
scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false); scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
@ -113,9 +124,9 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
}); });
} }
return function (text, title) { export async function show(text, title) {
var options; let options;
if (typeof text === 'string') { if (typeof text === 'string') {
options = { options = {
title: title, title: title,
@ -125,10 +136,13 @@ define(['dialogHelper', 'dom', 'layoutManager', 'scrollHelper', 'globalize', 're
options = text; options = text;
} }
return new Promise(function (resolve, reject) { const { default: template } = await import('text!./dialog.template.html');
require(['text!./dialog.template.html'], function (template) { return new Promise((resolve, reject) => {
showDialog(options, template).then(resolve, reject); showDialog(options, template).then(resolve, reject);
}); });
}); }
/* eslint-enable indent */
export default {
show: show
}; };
});

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

@ -1,7 +1,15 @@
define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'dom', 'css!./dialoghelper.css', 'scrollStyles'], function (appRouter, focusManager, browser, layoutManager, inputManager, dom) { import appRouter from 'appRouter';
'use strict'; import focusManager from 'focusManager';
import browser from 'browser';
import layoutManager from 'layoutManager';
import inputManager from 'inputManager';
import dom from 'dom';
import 'css!./dialoghelper.css';
import 'scrollStyles';
var globalOnOpenCallback; /* eslint-disable indent */
let globalOnOpenCallback;
function enableAnimation() { function enableAnimation() {
@ -25,7 +33,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function tryRemoveElement(elem) { function tryRemoveElement(elem) {
var parentNode = elem.parentNode; const parentNode = elem.parentNode;
if (parentNode) { if (parentNode) {
// Seeing crashes in edge webview // Seeing crashes in edge webview
@ -39,14 +47,14 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
function DialogHashHandler(dlg, hash, resolve) { function DialogHashHandler(dlg, hash, resolve) {
var self = this; const self = this;
self.originalUrl = window.location.href; self.originalUrl = window.location.href;
var activeElement = document.activeElement; const activeElement = document.activeElement;
var removeScrollLockOnClose = false; let removeScrollLockOnClose = false;
function onHashChange(e) { function onHashChange(e) {
var isBack = self.originalUrl === window.location.href; const isBack = self.originalUrl === window.location.href;
if (isBack || !isOpened(dlg)) { if (isBack || !isOpened(dlg)) {
window.removeEventListener('popstate', onHashChange); window.removeEventListener('popstate', onHashChange);
@ -84,7 +92,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
if (!self.closedByBack && isHistoryEnabled(dlg)) { if (!self.closedByBack && isHistoryEnabled(dlg)) {
var state = history.state || {}; const state = history.state || {};
if (state.dialogId === hash) { if (state.dialogId === hash) {
history.back(); history.back();
} }
@ -97,7 +105,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (dlg.getAttribute('data-removeonclose') !== 'false') { if (dlg.getAttribute('data-removeonclose') !== 'false') {
removeCenterFocus(dlg); removeCenterFocus(dlg);
var dialogContainer = dlg.dialogContainer; const dialogContainer = dlg.dialogContainer;
if (dialogContainer) { if (dialogContainer) {
tryRemoveElement(dialogContainer); tryRemoveElement(dialogContainer);
dlg.dialogContainer = null; dlg.dialogContainer = null;
@ -108,7 +116,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
//resolve(); //resolve();
// if we just called history.back(), then use a timeout to allow the history events to fire first // if we just called history.back(), then use a timeout to allow the history events to fire first
setTimeout(function () { setTimeout(() => {
resolve({ resolve({
element: dlg, element: dlg,
closedByBack: self.closedByBack closedByBack: self.closedByBack
@ -118,7 +126,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
dlg.addEventListener('close', onDialogClosed); dlg.addEventListener('close', onDialogClosed);
var center = !dlg.classList.contains('dialog-fixedSize'); const center = !dlg.classList.contains('dialog-fixedSize');
if (center) { if (center) {
dlg.classList.add('centeredDialog'); dlg.classList.add('centeredDialog');
} }
@ -141,7 +149,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
animateDialogOpen(dlg); animateDialogOpen(dlg);
if (isHistoryEnabled(dlg)) { if (isHistoryEnabled(dlg)) {
appRouter.pushState({ dialogId: hash }, 'Dialog', '#' + hash); appRouter.pushState({ dialogId: hash }, 'Dialog', `#${hash}`);
window.addEventListener('popstate', onHashChange); window.addEventListener('popstate', onHashChange);
} else { } else {
@ -151,10 +159,10 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
function addBackdropOverlay(dlg) { function addBackdropOverlay(dlg) {
var backdrop = document.createElement('div'); const backdrop = document.createElement('div');
backdrop.classList.add('dialogBackdrop'); backdrop.classList.add('dialogBackdrop');
var backdropParent = dlg.dialogContainer || dlg; const backdropParent = dlg.dialogContainer || dlg;
backdropParent.parentNode.insertBefore(backdrop, backdropParent); backdropParent.parentNode.insertBefore(backdrop, backdropParent);
dlg.backdrop = backdrop; dlg.backdrop = backdrop;
@ -162,7 +170,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
void backdrop.offsetWidth; void backdrop.offsetWidth;
backdrop.classList.add('dialogBackdropOpened'); backdrop.classList.add('dialogBackdropOpened');
dom.addEventListener((dlg.dialogContainer || backdrop), 'click', function (e) { dom.addEventListener((dlg.dialogContainer || backdrop), 'click', e => {
if (e.target === dlg.dialogContainer) { if (e.target === dlg.dialogContainer) {
close(dlg); close(dlg);
} }
@ -170,7 +178,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
passive: true passive: true
}); });
dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', function (e) { dom.addEventListener((dlg.dialogContainer || backdrop), 'contextmenu', e => {
if (e.target === dlg.dialogContainer) { if (e.target === dlg.dialogContainer) {
// Close the application dialog menu // Close the application dialog menu
close(dlg); close(dlg);
@ -184,26 +192,26 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
return dlg.getAttribute('data-history') === 'true'; return dlg.getAttribute('data-history') === 'true';
} }
function open(dlg) { export function open(dlg) {
if (globalOnOpenCallback) { if (globalOnOpenCallback) {
globalOnOpenCallback(dlg); globalOnOpenCallback(dlg);
} }
var parent = dlg.parentNode; const parent = dlg.parentNode;
if (parent) { if (parent) {
parent.removeChild(dlg); parent.removeChild(dlg);
} }
var dialogContainer = document.createElement('div'); const dialogContainer = document.createElement('div');
dialogContainer.classList.add('dialogContainer'); dialogContainer.classList.add('dialogContainer');
dialogContainer.appendChild(dlg); dialogContainer.appendChild(dlg);
dlg.dialogContainer = dialogContainer; dlg.dialogContainer = dialogContainer;
document.body.appendChild(dialogContainer); document.body.appendChild(dialogContainer);
return new Promise(function (resolve, reject) { return new Promise((resolve, reject) => {
new DialogHashHandler(dlg, 'dlg' + new Date().getTime(), resolve); new DialogHashHandler(dlg, `dlg${new Date().getTime()}`, resolve);
}); });
} }
@ -213,7 +221,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
return !dlg.classList.contains('hide'); return !dlg.classList.contains('hide');
} }
function close(dlg) { export function close(dlg) {
if (isOpened(dlg)) { if (isOpened(dlg)) {
if (isHistoryEnabled(dlg)) { if (isHistoryEnabled(dlg)) {
@ -233,7 +241,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
cancelable: false cancelable: false
})); }));
var onAnimationFinish = function () { const onAnimationFinish = () => {
focusManager.popScope(dlg); focusManager.popScope(dlg);
dlg.classList.add('hide'); dlg.classList.add('hide');
@ -249,7 +257,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
function animateDialogOpen(dlg) { function animateDialogOpen(dlg) {
var onAnimationFinish = function () { const onAnimationFinish = () => {
focusManager.pushScope(dlg); focusManager.pushScope(dlg);
if (dlg.getAttribute('data-autofocus') === 'true') { if (dlg.getAttribute('data-autofocus') === 'true') {
@ -264,7 +272,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (enableAnimation()) { if (enableAnimation()) {
var onFinish = function () { const onFinish = () => {
dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, { dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, {
once: true once: true
}); });
@ -283,24 +291,24 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (enableAnimation()) { if (enableAnimation()) {
var animated = true; let animated = true;
switch (dlg.animationConfig.exit.name) { switch (dlg.animationConfig.exit.name) {
case 'fadeout': case 'fadeout':
dlg.style.animation = 'fadeout ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both'; dlg.style.animation = `fadeout ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
break; break;
case 'scaledown': case 'scaledown':
dlg.style.animation = 'scaledown ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both'; dlg.style.animation = `scaledown ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
break; break;
case 'slidedown': case 'slidedown':
dlg.style.animation = 'slidedown ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both'; dlg.style.animation = `slidedown ${dlg.animationConfig.exit.timing.duration}ms ease-out normal both`;
break; break;
default: default:
animated = false; animated = false;
break; break;
} }
var onFinish = function () { const onFinish = () => {
dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, { dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, {
once: true once: true
}); });
@ -318,7 +326,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
onAnimationFinish(); onAnimationFinish();
} }
var supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style; const supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style;
function shouldLockDocumentScroll(options) { function shouldLockDocumentScroll(options) {
@ -343,7 +351,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
function removeBackdrop(dlg) { function removeBackdrop(dlg) {
var backdrop = dlg.backdrop; const backdrop = dlg.backdrop;
if (!backdrop) { if (!backdrop) {
return; return;
@ -351,7 +359,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
dlg.backdrop = null; dlg.backdrop = null;
var onAnimationFinish = function () { const onAnimationFinish = () => {
tryRemoveElement(backdrop); tryRemoveElement(backdrop);
}; };
@ -368,20 +376,20 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(scrollHelper => {
var fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
function createDialog(options) { export function createDialog(options) {
options = options || {}; options = options || {};
// If there's no native dialog support, use a plain div // If there's no native dialog support, use a plain div
// Also not working well in samsung tizen browser, content inside not clickable // Also not working well in samsung tizen browser, content inside not clickable
// Just go ahead and always use a plain div because we're seeing issues overlaying absoltutely positioned content over a modal dialog // Just go ahead and always use a plain div because we're seeing issues overlaying absoltutely positioned content over a modal dialog
var dlg = document.createElement('div'); const dlg = document.createElement('div');
dlg.classList.add('focuscontainer'); dlg.classList.add('focuscontainer');
dlg.classList.add('hide'); dlg.classList.add('hide');
@ -406,17 +414,17 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
dlg.setAttribute('data-autofocus', 'true'); dlg.setAttribute('data-autofocus', 'true');
} }
var defaultEntryAnimation; let defaultEntryAnimation;
var defaultExitAnimation; let defaultExitAnimation;
defaultEntryAnimation = 'scaleup'; defaultEntryAnimation = 'scaleup';
defaultExitAnimation = 'scaledown'; defaultExitAnimation = 'scaledown';
var entryAnimation = options.entryAnimation || defaultEntryAnimation; const entryAnimation = options.entryAnimation || defaultEntryAnimation;
var exitAnimation = options.exitAnimation || defaultExitAnimation; const exitAnimation = options.exitAnimation || defaultExitAnimation;
// If it's not fullscreen then lower the default animation speed to make it open really fast // If it's not fullscreen then lower the default animation speed to make it open really fast
var entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280); const entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280);
var exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220); const exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220);
dlg.animationConfig = { dlg.animationConfig = {
// scale up // scale up
@ -461,7 +469,7 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
if (options.size) { if (options.size) {
dlg.classList.add('dialog-fixedSize'); dlg.classList.add('dialog-fixedSize');
dlg.classList.add('dialog-' + options.size); dlg.classList.add(`dialog-${options.size}`);
} }
if (enableAnimation()) { if (enableAnimation()) {
@ -469,16 +477,16 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
switch (dlg.animationConfig.entry.name) { switch (dlg.animationConfig.entry.name) {
case 'fadein': case 'fadein':
dlg.style.animation = 'fadein ' + entryAnimationDuration + 'ms ease-out normal'; dlg.style.animation = `fadein ${entryAnimationDuration}ms ease-out normal`;
break; break;
case 'scaleup': case 'scaleup':
dlg.style.animation = 'scaleup ' + entryAnimationDuration + 'ms ease-out normal both'; dlg.style.animation = `scaleup ${entryAnimationDuration}ms ease-out normal both`;
break; break;
case 'slideup': case 'slideup':
dlg.style.animation = 'slideup ' + entryAnimationDuration + 'ms ease-out normal'; dlg.style.animation = `slideup ${entryAnimationDuration}ms ease-out normal`;
break; break;
case 'slidedown': case 'slidedown':
dlg.style.animation = 'slidedown ' + entryAnimationDuration + 'ms ease-out normal'; dlg.style.animation = `slidedown ${entryAnimationDuration}ms ease-out normal`;
break; break;
default: default:
break; break;
@ -488,12 +496,15 @@ define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager',
return dlg; return dlg;
} }
return { export function setOnOpen(val) {
globalOnOpenCallback = val;
}
/* eslint-enable indent */
export default {
open: open, open: open,
close: close, close: close,
createDialog: createDialog, createDialog: createDialog,
setOnOpen: function (val) { setOnOpen: setOnOpen
globalOnOpenCallback = val;
}
}; };
});

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

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

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

@ -1,22 +1,37 @@
define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', 'apphost', 'focusManager', 'datetime', 'globalize', 'loading', 'connectionManager', 'skinManager', 'dom', 'events', 'emby-select', 'emby-checkbox', 'emby-button'], function (require, browser, layoutManager, appSettings, pluginManager, appHost, focusManager, datetime, globalize, loading, connectionManager, skinManager, dom, events) { import browser from 'browser';
'use strict'; import layoutManager from 'layoutManager';
import appSettings from 'appSettings';
import pluginManager from 'pluginManager';
import appHost from 'apphost';
import focusManager from 'focusManager';
import datetime from 'datetime';
import globalize from 'globalize';
import loading from 'loading';
import connectionManager from 'connectionManager';
import skinManager from 'skinManager';
import events from 'events';
import 'emby-select';
import 'emby-checkbox';
import 'emby-button';
/* eslint-disable indent */
function fillThemes(select, isDashboard) { function fillThemes(select, isDashboard) {
select.innerHTML = skinManager.getThemes().map(function (t) { select.innerHTML = skinManager.getThemes().map(t => {
var value = t.id; let value = t.id;
if (t.isDefault && !isDashboard) { if (t.isDefault && !isDashboard) {
value = ''; value = '';
} else if (t.isDefaultServerDashboard && isDashboard) { } else if (t.isDefaultServerDashboard && isDashboard) {
value = ''; value = '';
} }
return '<option value="' + value + '">' + t.name + '</option>'; return `<option value="${value}">${t.name}</option>`;
}).join(''); }).join('');
} }
function loadScreensavers(context, userSettings) { function loadScreensavers(context, userSettings) {
var selectScreensaver = context.querySelector('.selectScreensaver'); const selectScreensaver = context.querySelector('.selectScreensaver');
var options = pluginManager.ofType('screensaver').map(function (plugin) { const options = pluginManager.ofType('screensaver').map(plugin => {
return { return {
name: plugin.name, name: plugin.name,
value: plugin.id value: plugin.id
@ -28,8 +43,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
value: 'none' value: 'none'
}); });
selectScreensaver.innerHTML = options.map(function (o) { selectScreensaver.innerHTML = options.map(o => {
return '<option value="' + o.value + '">' + o.name + '</option>'; return `<option value="${o.value}">${o.name}</option>`;
}).join(''); }).join('');
selectScreensaver.value = userSettings.screensaver(); selectScreensaver.value = userSettings.screensaver();
@ -41,8 +56,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
function loadSoundEffects(context, userSettings) { function loadSoundEffects(context, userSettings) {
var selectSoundEffects = context.querySelector('.selectSoundEffects'); const selectSoundEffects = context.querySelector('.selectSoundEffects');
var options = pluginManager.ofType('soundeffects').map(function (plugin) { const options = pluginManager.ofType('soundeffects').map(plugin => {
return { return {
name: plugin.name, name: plugin.name,
value: plugin.id value: plugin.id
@ -54,8 +69,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
value: 'none' value: 'none'
}); });
selectSoundEffects.innerHTML = options.map(function (o) { selectSoundEffects.innerHTML = options.map(o => {
return '<option value="' + o.value + '">' + o.name + '</option>'; return `<option value="${o.value}">${o.name}</option>`;
}).join(''); }).join('');
selectSoundEffects.value = userSettings.soundEffects(); selectSoundEffects.value = userSettings.soundEffects();
@ -67,17 +82,17 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
function loadSkins(context, userSettings) { function loadSkins(context, userSettings) {
var selectSkin = context.querySelector('.selectSkin'); const selectSkin = context.querySelector('.selectSkin');
var options = pluginManager.ofType('skin').map(function (plugin) { const options = pluginManager.ofType('skin').map(plugin => {
return { return {
name: plugin.name, name: plugin.name,
value: plugin.id value: plugin.id
}; };
}); });
selectSkin.innerHTML = options.map(function (o) { selectSkin.innerHTML = options.map(o => {
return '<option value="' + o.value + '">' + o.name + '</option>'; return `<option value="${o.value}">${o.name}</option>`;
}).join(''); }).join('');
selectSkin.value = userSettings.skin(); selectSkin.value = userSettings.skin();
@ -92,7 +107,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
} }
} }
function showOrHideMissingEpisodesField(context, user, apiClient) { function showOrHideMissingEpisodesField(context) {
if (browser.tizen || browser.web0s) { if (browser.tizen || browser.web0s) {
context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide'); context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide');
@ -102,10 +117,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide'); context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide');
} }
function loadForm(context, user, userSettings, apiClient) { function loadForm(context, user, userSettings) {
var loggedInUserId = apiClient.getCurrentUserId();
var userId = user.Id;
if (user.Policy.IsAdministrator) { if (user.Policy.IsAdministrator) {
context.querySelector('.selectDashboardThemeContainer').classList.remove('hide'); context.querySelector('.selectDashboardThemeContainer').classList.remove('hide');
@ -167,8 +179,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup(); context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup();
var selectTheme = context.querySelector('#selectTheme'); const selectTheme = context.querySelector('#selectTheme');
var selectDashboardTheme = context.querySelector('#selectDashboardTheme'); const selectDashboardTheme = context.querySelector('#selectDashboardTheme');
fillThemes(selectTheme); fillThemes(selectTheme);
fillThemes(selectDashboardTheme, true); fillThemes(selectDashboardTheme, true);
@ -195,7 +207,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || ''; context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || '';
showOrHideMissingEpisodesField(context, user, apiClient); showOrHideMissingEpisodesField(context);
loading.hide(); loading.hide();
} }
@ -239,29 +251,29 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
loading.show(); loading.show();
apiClient.getUser(userId).then(function (user) { apiClient.getUser(userId).then(user => {
saveUser(context, user, userSettings, apiClient).then(function () { saveUser(context, user, userSettings, apiClient).then(() => {
loading.hide(); loading.hide();
if (enableSaveConfirmation) { if (enableSaveConfirmation) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('SettingsSaved')); toast(globalize.translate('SettingsSaved'));
}); });
} }
events.trigger(instance, 'saved'); events.trigger(instance, 'saved');
}, function () { }, () => {
loading.hide(); loading.hide();
}); });
}); });
} }
function onSubmit(e) { function onSubmit(e) {
var self = this; const self = this;
var apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
var userId = self.options.userId; const userId = self.options.userId;
var userSettings = self.options.userSettings; const userSettings = self.options.userSettings;
userSettings.setUserInfo(userId, apiClient).then(function () { userSettings.setUserInfo(userId, apiClient).then(() => {
var enableSaveConfirmation = self.options.enableSaveConfirmation; const enableSaveConfirmation = self.options.enableSaveConfirmation;
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
}); });
@ -272,50 +284,51 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
return false; return false;
} }
function embed(options, self) { async function embed(options, self) {
require(['text!./displaySettings.template.html'], function (template) { const { default: template } = await import('text!./displaySettings.template.html');
options.element.innerHTML = globalize.translateDocument(template, 'core'); options.element.innerHTML = globalize.translateHtml(template, 'core');
options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
if (options.enableSaveButton) { if (options.enableSaveButton) {
options.element.querySelector('.btnSave').classList.remove('hide'); options.element.querySelector('.btnSave').classList.remove('hide');
} }
self.loadData(options.autoFocus); self.loadData(options.autoFocus);
});
} }
function DisplaySettings(options) { class DisplaySettings {
constructor(options) {
this.options = options; this.options = options;
embed(options, this); embed(options, this);
} }
DisplaySettings.prototype.loadData = function (autoFocus) { loadData(autoFocus) {
var self = this; const self = this;
var context = self.options.element; const context = self.options.element;
loading.show(); loading.show();
var userId = self.options.userId; const userId = self.options.userId;
var apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
var userSettings = self.options.userSettings; const userSettings = self.options.userSettings;
return apiClient.getUser(userId).then(function (user) { return apiClient.getUser(userId).then(user => {
return userSettings.setUserInfo(userId, apiClient).then(function () { return userSettings.setUserInfo(userId, apiClient).then(() => {
self.dataLoaded = true; self.dataLoaded = true;
loadForm(context, user, userSettings, apiClient); loadForm(context, user, userSettings);
if (autoFocus) { if (autoFocus) {
focusManager.autoFocus(context); focusManager.autoFocus(context);
} }
}); });
}); });
}; }
DisplaySettings.prototype.submit = function () { submit() {
onSubmit.call(this); onSubmit.call(this);
}; }
DisplaySettings.prototype.destroy = function () { destroy() {
this.options = null; this.options = null;
}; }
}
return DisplaySettings; /* eslint-enable indent */
}); export default DisplaySettings;

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

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

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

@ -286,7 +286,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
html += template; html += template;
dlg.innerHTML = globalize.translateDocument(html, 'core'); dlg.innerHTML = globalize.translateHtml(html, 'core');
var settingElements = dlg.querySelectorAll('.viewSetting'); var settingElements = dlg.querySelectorAll('.viewSetting');
for (var i = 0, length = settingElements.length; i < length; i++) { for (var i = 0, length = settingElements.length; i < length; i++) {

14
src/components/groupedcards.js
View file

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

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

@ -114,7 +114,7 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
var html = ''; var html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;

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

@ -1151,7 +1151,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
context.classList.add('tvguide'); context.classList.add('tvguide');
context.innerHTML = globalize.translateDocument(template, 'core'); context.innerHTML = globalize.translateHtml(template, 'core');
programGrid = context.querySelector('.programGrid'); programGrid = context.querySelector('.programGrid');
var timeslotHeaders = context.querySelector('.timeslotHeaders'); var timeslotHeaders = context.querySelector('.timeslotHeaders');

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

@ -1,26 +1,37 @@
define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'homeSections', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager, homeSections, dom, events) { import layoutManager from 'layoutManager';
'use strict'; import focusManager from 'focusManager';
import globalize from 'globalize';
import loading from 'loading';
import connectionManager from 'connectionManager';
import homeSections from 'homeSections';
import dom from 'dom';
import events from 'events';
import 'listViewStyle';
import 'emby-select';
import 'emby-checkbox';
var numConfigurableSections = 7; /* eslint-disable indent */
const numConfigurableSections = 7;
function renderViews(page, user, result) { function renderViews(page, user, result) {
var folderHtml = ''; let folderHtml = '';
folderHtml += '<div class="checkboxList">'; folderHtml += '<div class="checkboxList">';
folderHtml += result.map(function (i) { folderHtml += result.map(i => {
var currentHtml = ''; let currentHtml = '';
var id = 'chkGroupFolder' + i.Id; const id = `chkGroupFolder${i.Id}`;
var isChecked = user.Configuration.GroupedFolders.indexOf(i.Id) !== -1; const isChecked = user.Configuration.GroupedFolders.includes(i.Id);
var checkedHtml = isChecked ? ' checked="checked"' : ''; const checkedHtml = isChecked ? ' checked="checked"' : '';
currentHtml += '<label>'; currentHtml += '<label>';
currentHtml += '<input type="checkbox" is="emby-checkbox" class="chkGroupFolder" data-folderid="' + i.Id + '" id="' + id + '"' + checkedHtml + '/>'; currentHtml += `<input type="checkbox" is="emby-checkbox" class="chkGroupFolder" data-folderid="${i.Id}" id="${id}"${checkedHtml}/>`;
currentHtml += '<span>' + i.Name + '</span>'; currentHtml += `<span>${i.Name}</span>`;
currentHtml += '</label>'; currentHtml += '</label>';
return currentHtml; return currentHtml;
@ -34,7 +45,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function getLandingScreenOptions(type) { function getLandingScreenOptions(type) {
var list = []; const list = [];
if (type === 'movies') { if (type === 'movies') {
list.push({ list.push({
@ -123,27 +134,27 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function getLandingScreenOptionsHtml(type, userValue) { function getLandingScreenOptionsHtml(type, userValue) {
return getLandingScreenOptions(type).map(function (o) { return getLandingScreenOptions(type).map(o => {
var selected = userValue === o.value || (o.isDefault && !userValue); const selected = userValue === o.value || (o.isDefault && !userValue);
var selectedHtml = selected ? ' selected' : ''; const selectedHtml = selected ? ' selected' : '';
var optionValue = o.isDefault ? '' : o.value; const optionValue = o.isDefault ? '' : o.value;
return '<option value="' + optionValue + '"' + selectedHtml + '>' + o.name + '</option>'; return `<option value="${optionValue}"${selectedHtml}>${o.name}</option>`;
}).join(''); }).join('');
} }
function renderViewOrder(context, user, result) { function renderViewOrder(context, user, result) {
var html = ''; let html = '';
var index = 0; let index = 0;
html += result.Items.map(function (view) { html += result.Items.map(view => {
var currentHtml = ''; let currentHtml = '';
currentHtml += '<div class="listItem viewItem" data-viewid="' + view.Id + '">'; currentHtml += `<div class="listItem viewItem" data-viewid="${view.Id}">`;
currentHtml += '<span class="material-icons listItemIcon folder_open"></span>'; currentHtml += '<span class="material-icons listItemIcon folder_open"></span>';
@ -155,8 +166,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
currentHtml += '</div>'; currentHtml += '</div>';
currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="' + globalize.translate('Up') + '"><span class="material-icons keyboard_arrow_up"></span></button>'; currentHtml += `<button type="button" is="paper-icon-button-light" class="btnViewItemUp btnViewItemMove autoSize" title="${globalize.translate('Up')}"><span class="material-icons keyboard_arrow_up"></span></button>`;
currentHtml += '<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="' + globalize.translate('Down') + '"><span class="material-icons keyboard_arrow_down"></span></button>'; currentHtml += `<button type="button" is="paper-icon-button-light" class="btnViewItemDown btnViewItemMove autoSize" title="${globalize.translate('Down')}"><span class="material-icons keyboard_arrow_down"></span></button>`;
currentHtml += '</div>'; currentHtml += '</div>';
@ -170,14 +181,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function updateHomeSectionValues(context, userSettings) { function updateHomeSectionValues(context, userSettings) {
for (var i = 1; i <= 7; i++) { for (let i = 1; i <= 7; i++) {
var select = context.querySelector('#selectHomeSection' + i); const select = context.querySelector(`#selectHomeSection${i}`);
var defaultValue = homeSections.getDefaultSection(i - 1); const defaultValue = homeSections.getDefaultSection(i - 1);
var option = select.querySelector('option[value=' + defaultValue + ']') || select.querySelector('option[value=""]'); const option = select.querySelector(`option[value=${defaultValue}]`) || select.querySelector('option[value=""]');
var userValue = userSettings.get('homesection' + (i - 1)); const userValue = userSettings.get(`homesection${i - 1}`);
option.value = ''; option.value = '';
@ -193,42 +204,42 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function getPerLibrarySettingsHtml(item, user, userSettings, apiClient) { function getPerLibrarySettingsHtml(item, user, userSettings, apiClient) {
var html = ''; let html = '';
var isChecked; let isChecked;
if (item.Type === 'Channel' || item.CollectionType === 'boxsets' || item.CollectionType === 'playlists') { if (item.Type === 'Channel' || item.CollectionType === 'boxsets' || item.CollectionType === 'playlists') {
isChecked = (user.Configuration.MyMediaExcludes || []).indexOf(item.Id) === -1; isChecked = !(user.Configuration.MyMediaExcludes || []).includes(item.Id);
html += '<div>'; html += '<div>';
html += '<label>'; html += '<label>';
html += '<input type="checkbox" is="emby-checkbox" class="chkIncludeInMyMedia" data-folderid="' + item.Id + '"' + (isChecked ? ' checked="checked"' : '') + '/>'; html += `<input type="checkbox" is="emby-checkbox" class="chkIncludeInMyMedia" data-folderid="${item.Id}"${isChecked ? ' checked="checked"' : ''}/>`;
html += '<span>' + globalize.translate('DisplayInMyMedia') + '</span>'; html += `<span>${globalize.translate('DisplayInMyMedia')}</span>`;
html += '</label>'; html += '</label>';
html += '</div>'; html += '</div>';
} }
var excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels']; const excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels'];
if (excludeFromLatest.indexOf(item.CollectionType || '') === -1) { if (!excludeFromLatest.includes(item.CollectionType || '')) {
isChecked = user.Configuration.LatestItemsExcludes.indexOf(item.Id) === -1; isChecked = !user.Configuration.LatestItemsExcludes.includes(item.Id);
html += '<label class="fldIncludeInLatest">'; html += '<label class="fldIncludeInLatest">';
html += '<input type="checkbox" is="emby-checkbox" class="chkIncludeInLatest" data-folderid="' + item.Id + '"' + (isChecked ? ' checked="checked"' : '') + '/>'; html += `<input type="checkbox" is="emby-checkbox" class="chkIncludeInLatest" data-folderid="${item.Id}"${isChecked ? ' checked="checked"' : ''}/>`;
html += '<span>' + globalize.translate('DisplayInOtherHomeScreenSections') + '</span>'; html += `<span>${globalize.translate('DisplayInOtherHomeScreenSections')}</span>`;
html += '</label>'; html += '</label>';
} }
if (html) { if (html) {
html = '<div class="checkboxListContainer">' + html + '</div>'; html = `<div class="checkboxListContainer">${html}</div>`;
} }
if (item.CollectionType === 'movies' || item.CollectionType === 'tvshows' || item.CollectionType === 'music' || item.CollectionType === 'livetv') { if (item.CollectionType === 'movies' || item.CollectionType === 'tvshows' || item.CollectionType === 'music' || item.CollectionType === 'livetv') {
var idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id; const idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id;
html += '<div class="selectContainer">'; html += '<div class="selectContainer">';
html += '<select is="emby-select" class="selectLanding" data-folderid="' + idForLanding + '" label="' + globalize.translate('LabelDefaultScreen') + '">'; html += `<select is="emby-select" class="selectLanding" data-folderid="${idForLanding}" label="${globalize.translate('LabelDefaultScreen')}">`;
var userValue = userSettings.get('landing-' + idForLanding); const userValue = userSettings.get(`landing-${idForLanding}`);
html += getLandingScreenOptionsHtml(item.CollectionType, userValue); html += getLandingScreenOptionsHtml(item.CollectionType, userValue);
@ -238,7 +249,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
if (html) { if (html) {
var prefix = ''; let prefix = '';
prefix += '<div class="verticalSection">'; prefix += '<div class="verticalSection">';
prefix += '<h2 class="sectionTitle">'; prefix += '<h2 class="sectionTitle">';
@ -254,10 +265,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function renderPerLibrarySettings(context, user, userViews, userSettings, apiClient) { function renderPerLibrarySettings(context, user, userViews, userSettings, apiClient) {
var elem = context.querySelector('.perLibrarySettings'); const elem = context.querySelector('.perLibrarySettings');
var html = ''; let html = '';
for (var i = 0, length = userViews.length; i < length; i++) { for (let i = 0, length = userViews.length; i < length; i++) {
html += getPerLibrarySettingsHtml(userViews[i], user, userSettings, apiClient); html += getPerLibrarySettingsHtml(userViews[i], user, userSettings, apiClient);
} }
@ -271,10 +282,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
updateHomeSectionValues(context, userSettings); updateHomeSectionValues(context, userSettings);
var promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id); const promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id);
var promise2 = apiClient.getJSON(apiClient.getUrl('Users/' + user.Id + '/GroupingOptions')); const promise2 = apiClient.getJSON(apiClient.getUrl(`Users/${user.Id}/GroupingOptions`));
Promise.all([promise1, promise2]).then(function (responses) { Promise.all([promise1, promise2]).then(responses => {
renderViewOrder(context, user, responses[0]); renderViewOrder(context, user, responses[0]);
@ -286,38 +297,19 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
}); });
} }
function getSibling(elem, type, className) {
var sibling = elem[type];
while (sibling != null) {
if (sibling.classList.contains(className)) {
break;
}
}
if (sibling != null) {
if (!sibling.classList.contains(className)) {
sibling = null;
}
}
return sibling;
}
function onSectionOrderListClick(e) { function onSectionOrderListClick(e) {
var target = dom.parentWithClass(e.target, 'btnViewItemMove'); const target = dom.parentWithClass(e.target, 'btnViewItemMove');
if (target) { if (target) {
var viewItem = dom.parentWithClass(target, 'viewItem'); const viewItem = dom.parentWithClass(target, 'viewItem');
if (viewItem) { if (viewItem) {
var ul = dom.parentWithClass(viewItem, 'paperList'); const ul = dom.parentWithClass(viewItem, 'paperList');
if (target.classList.contains('btnViewItemDown')) { if (target.classList.contains('btnViewItemDown')) {
var next = viewItem.nextSibling; const next = viewItem.nextSibling;
if (next) { if (next) {
viewItem.parentNode.removeChild(viewItem); viewItem.parentNode.removeChild(viewItem);
@ -327,7 +319,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} else { } else {
var prev = viewItem.previousSibling; const prev = viewItem.previousSibling;
if (prev) { if (prev) {
viewItem.parentNode.removeChild(viewItem); viewItem.parentNode.removeChild(viewItem);
@ -341,10 +333,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function getCheckboxItems(selector, context, isChecked) { function getCheckboxItems(selector, context, isChecked) {
var inputs = context.querySelectorAll(selector); const inputs = context.querySelectorAll(selector);
var list = []; const list = [];
for (var i = 0, length = inputs.length; i < length; i++) { for (let i = 0, length = inputs.length; i < length; i++) {
if (inputs[i].checked === isChecked) { if (inputs[i].checked === isChecked) {
list.push(inputs[i]); list.push(inputs[i]);
@ -359,25 +351,25 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
user.Configuration.HidePlayedInLatest = context.querySelector('.chkHidePlayedFromLatest').checked; user.Configuration.HidePlayedInLatest = context.querySelector('.chkHidePlayedFromLatest').checked;
user.Configuration.LatestItemsExcludes = getCheckboxItems('.chkIncludeInLatest', context, false).map(function (i) { user.Configuration.LatestItemsExcludes = getCheckboxItems('.chkIncludeInLatest', context, false).map(i => {
return i.getAttribute('data-folderid'); return i.getAttribute('data-folderid');
}); });
user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(function (i) { user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(i => {
return i.getAttribute('data-folderid'); return i.getAttribute('data-folderid');
}); });
user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(function (i) { user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(i => {
return i.getAttribute('data-folderid'); return i.getAttribute('data-folderid');
}); });
var viewItems = context.querySelectorAll('.viewItem'); const viewItems = context.querySelectorAll('.viewItem');
var orderedViews = []; const orderedViews = [];
var i; let i;
var length; let length;
for (i = 0, length = viewItems.length; i < length; i++) { for (i = 0, length = viewItems.length; i < length; i++) {
orderedViews.push(viewItems[i].getAttribute('data-viewid')); orderedViews.push(viewItems[i].getAttribute('data-viewid'));
} }
@ -394,10 +386,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
userSettingsInstance.set('homesection5', context.querySelector('#selectHomeSection6').value); userSettingsInstance.set('homesection5', context.querySelector('#selectHomeSection6').value);
userSettingsInstance.set('homesection6', context.querySelector('#selectHomeSection7').value); userSettingsInstance.set('homesection6', context.querySelector('#selectHomeSection7').value);
var selectLandings = context.querySelectorAll('.selectLanding'); const selectLandings = context.querySelectorAll('.selectLanding');
for (i = 0, length = selectLandings.length; i < length; i++) { for (i = 0, length = selectLandings.length; i < length; i++) {
var selectLanding = selectLandings[i]; const selectLanding = selectLandings[i];
userSettingsInstance.set('landing-' + selectLanding.getAttribute('data-folderid'), selectLanding.value); userSettingsInstance.set(`landing-${selectLanding.getAttribute('data-folderid')}`, selectLanding.value);
} }
return apiClient.updateUserConfiguration(user.Id, user.Configuration); return apiClient.updateUserConfiguration(user.Id, user.Configuration);
@ -407,20 +399,20 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
loading.show(); loading.show();
apiClient.getUser(userId).then(function (user) { apiClient.getUser(userId).then(user => {
saveUser(context, user, userSettings, apiClient).then(function () { saveUser(context, user, userSettings, apiClient).then(() => {
loading.hide(); loading.hide();
if (enableSaveConfirmation) { if (enableSaveConfirmation) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('SettingsSaved')); toast(globalize.translate('SettingsSaved'));
}); });
} }
events.trigger(instance, 'saved'); events.trigger(instance, 'saved');
}, function () { }, () => {
loading.hide(); loading.hide();
}); });
}); });
@ -428,14 +420,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function onSubmit(e) { function onSubmit(e) {
var self = this; const self = this;
var apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
var userId = self.options.userId; const userId = self.options.userId;
var userSettings = self.options.userSettings; const userSettings = self.options.userSettings;
userSettings.setUserInfo(userId, apiClient).then(function () { userSettings.setUserInfo(userId, apiClient).then(() => {
var enableSaveConfirmation = self.options.enableSaveConfirmation; const enableSaveConfirmation = self.options.enableSaveConfirmation;
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
}); });
@ -448,13 +440,13 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function onChange(e) { function onChange(e) {
var chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia'); const chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia');
if (!chkIncludeInMyMedia) { if (!chkIncludeInMyMedia) {
return; return;
} }
var section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection'); const section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection');
var fldIncludeInLatest = section.querySelector('.fldIncludeInLatest'); const fldIncludeInLatest = section.querySelector('.fldIncludeInLatest');
if (fldIncludeInLatest) { if (fldIncludeInLatest) {
if (chkIncludeInMyMedia.checked) { if (chkIncludeInMyMedia.checked) {
fldIncludeInLatest.classList.remove('hide'); fldIncludeInLatest.classList.remove('hide');
@ -466,13 +458,13 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
function embed(options, self) { function embed(options, self) {
require(['text!./homeScreenSettings.template.html'], function (template) { return import('text!./homeScreenSettings.template.html').then(({default: template}) => {
for (var i = 1; i <= numConfigurableSections; i++) { for (let i = 1; i <= numConfigurableSections; i++) {
template = template.replace('{section' + i + 'label}', globalize.translate('LabelHomeScreenSectionValue', i)); template = template.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i));
} }
options.element.innerHTML = globalize.translateDocument(template, 'core'); options.element.innerHTML = globalize.translateHtml(template, 'core');
options.element.querySelector('.viewOrderList').addEventListener('click', onSectionOrderListClick); options.element.querySelector('.viewOrderList').addEventListener('click', onSectionOrderListClick);
options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
@ -492,27 +484,26 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
}); });
} }
function HomeScreenSettings(options) { class HomeScreenSettings {
constructor(options) {
this.options = options; this.options = options;
embed(options, this); embed(options, this);
} }
HomeScreenSettings.prototype.loadData = function (autoFocus) { loadData(autoFocus) {
var self = this; const self = this;
var context = self.options.element; const context = self.options.element;
loading.show(); loading.show();
var userId = self.options.userId; const userId = self.options.userId;
var apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
var userSettings = self.options.userSettings; const userSettings = self.options.userSettings;
apiClient.getUser(userId).then(function (user) { apiClient.getUser(userId).then(user => {
userSettings.setUserInfo(userId, apiClient).then(function () { userSettings.setUserInfo(userId, apiClient).then(() => {
self.dataLoaded = true; self.dataLoaded = true;
@ -523,16 +514,18 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
} }
}); });
}); });
}; }
HomeScreenSettings.prototype.submit = function () { submit() {
onSubmit.call(this); onSubmit.call(this);
}; }
HomeScreenSettings.prototype.destroy = function () { destroy() {
this.options = null; this.options = null;
}; }
}
return HomeScreenSettings; /* eslint-enable indent */
});
export default HomeScreenSettings;

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

@ -1,7 +1,24 @@
define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'layoutManager', 'imageLoader', 'globalize', 'itemShortcuts', 'itemHelper', 'appRouter', 'scripts/imagehelper', 'paper-icon-button-light', 'emby-itemscontainer', 'emby-scroller', 'emby-button', 'css!./homesections'], function (connectionManager, cardBuilder, appSettings, dom, appHost, layoutManager, imageLoader, globalize, itemShortcuts, itemHelper, appRouter, imageHelper) { import connectionManager from 'connectionManager';
'use strict'; import cardBuilder from 'cardBuilder';
import appSettings from 'appSettings';
import dom from 'dom';
import appHost from 'apphost';
import layoutManager from 'layoutManager';
import imageLoader from 'imageLoader';
import globalize from 'globalize';
import itemShortcuts from 'itemShortcuts';
import itemHelper from 'itemHelper';
import appRouter from 'appRouter';
import imageHelper from 'scripts/imagehelper';
import 'paper-icon-button-light';
import 'emby-itemscontainer';
import 'emby-scroller';
import 'emby-button';
import 'css!./homesections';
function getDefaultSection(index) { /* eslint-disable indent */
export function getDefaultSection(index) {
switch (index) { switch (index) {
case 0: case 0:
return 'smalllibrarytiles'; return 'smalllibrarytiles';
@ -23,9 +40,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function getAllSectionsToShow(userSettings, sectionCount) { function getAllSectionsToShow(userSettings, sectionCount) {
var sections = []; const sections = [];
for (var i = 0, length = sectionCount; i < length; i++) { for (let i = 0, length = sectionCount; i < length; i++) {
var section = userSettings.get('homesection' + i) || getDefaultSection(i); let section = userSettings.get('homesection' + i) || getDefaultSection(i);
if (section === 'folders') { if (section === 'folders') {
section = getDefaultSection(0); section = getDefaultSection(0);
} }
@ -36,22 +53,22 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
return sections; return sections;
} }
function loadSections(elem, apiClient, user, userSettings) { export function loadSections(elem, apiClient, user, userSettings) {
return getUserViews(apiClient, user.Id).then(function (userViews) { return getUserViews(apiClient, user.Id).then(function (userViews) {
var html = ''; let html = '';
if (userViews.length) { if (userViews.length) {
var sectionCount = 7; const sectionCount = 7;
for (var i = 0; i < sectionCount; i++) { for (let i = 0; i < sectionCount; i++) {
html += '<div class="verticalSection section' + i + '"></div>'; html += '<div class="verticalSection section' + i + '"></div>';
} }
elem.innerHTML = html; elem.innerHTML = html;
elem.classList.add('homeSectionsContainer'); elem.classList.add('homeSectionsContainer');
var promises = []; const promises = [];
var sections = getAllSectionsToShow(userSettings, sectionCount); const sections = getAllSectionsToShow(userSettings, sectionCount);
for (var i = 0; i < sections.length; i++) { for (let i = 0; i < sections.length; i++) {
promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i)); promises.push(loadSection(elem, apiClient, user, userSettings, userViews, sections, i));
} }
@ -62,7 +79,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
}); });
}); });
} else { } else {
var noLibDescription; let noLibDescription;
if (user['Policy'] && user['Policy']['IsAdministrator']) { if (user['Policy'] && user['Policy']['IsAdministrator']) {
noLibDescription = globalize.translate('NoCreatedLibraries', '<br><a id="button-createLibrary" class="button-link">', '</a>'); noLibDescription = globalize.translate('NoCreatedLibraries', '<br><a id="button-createLibrary" class="button-link">', '</a>');
} else { } else {
@ -75,7 +92,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
html += '</div>'; html += '</div>';
elem.innerHTML = html; elem.innerHTML = html;
var createNowLink = elem.querySelector('#button-createLibrary'); const createNowLink = elem.querySelector('#button-createLibrary');
if (createNowLink) { if (createNowLink) {
createNowLink.addEventListener('click', function () { createNowLink.addEventListener('click', function () {
Dashboard.navigate('library.html'); Dashboard.navigate('library.html');
@ -85,9 +102,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
}); });
} }
function destroySections(elem) { export function destroySections(elem) {
var elems = elem.querySelectorAll('.itemsContainer'); const elems = elem.querySelectorAll('.itemsContainer');
for (var i = 0; i < elems.length; i++) { for (let i = 0; i < elems.length; i++) {
elems[i].fetchData = null; elems[i].fetchData = null;
elems[i].parentContainer = null; elems[i].parentContainer = null;
elems[i].getItemsHtml = null; elems[i].getItemsHtml = null;
@ -96,24 +113,22 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.innerHTML = ''; elem.innerHTML = '';
} }
function pause(elem) { export function pause(elem) {
var elems = elem.querySelectorAll('.itemsContainer'); const elems = elem.querySelectorAll('.itemsContainer');
for (var i = 0; i < elems.length; i++) { for (let i = 0; i < elems.length; i++) {
elems[i].pause(); elems[i].pause();
} }
} }
function resume(elem, options) { export function resume(elem, options) {
var elems = elem.querySelectorAll('.itemsContainer'); const elems = elem.querySelectorAll('.itemsContainer');
var i; const promises = [];
var length;
var promises = [];
for (i = 0, length = elems.length; i < length; i++) { for (let i = 0, length = elems.length; i < length; i++) {
promises.push(elems[i].resume(options)); promises.push(elems[i].resume(options));
} }
var promise = Promise.all(promises); const promise = Promise.all(promises);
if (!options || options.returnPromise !== false) { if (!options || options.returnPromise !== false) {
return promise; return promise;
} }
@ -121,10 +136,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function loadSection(page, apiClient, user, userSettings, userViews, allSections, index) { function loadSection(page, apiClient, user, userSettings, userViews, allSections, index) {
var section = allSections[index]; const section = allSections[index];
var userId = user.Id; const userId = user.Id;
var elem = page.querySelector('.section' + index); const elem = page.querySelector('.section' + index);
if (section === 'latestmedia') { if (section === 'latestmedia') {
loadRecentlyAdded(elem, apiClient, user, userViews); loadRecentlyAdded(elem, apiClient, user, userViews);
@ -172,7 +187,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function getLibraryButtonsHtml(items) { function getLibraryButtonsHtml(items) {
var html = ''; let html = '';
html += '<div class="verticalSection verticalSection-extrabottompadding">'; html += '<div class="verticalSection verticalSection-extrabottompadding">';
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
@ -180,9 +195,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-multiselect="false">'; html += '<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right vertical-wrap focuscontainer-x" data-multiselect="false">';
// library card background images // library card background images
for (var i = 0, length = items.length; i < length; i++) { for (let i = 0, length = items.length; i < length; i++) {
var item = items[i]; const item = items[i];
var icon = imageHelper.getLibraryIcon(item.CollectionType); const icon = imageHelper.getLibraryIcon(item.CollectionType);
html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><span class="material-icons homeLibraryIcon ' + icon + '"></span><span class="homeLibraryText">' + item.Name + '</span></a>'; html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><span class="material-icons homeLibraryIcon ' + icon + '"></span><span class="homeLibraryText">' + item.Name + '</span></a>';
} }
@ -194,7 +209,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function loadlibraryButtons(elem, apiClient, user, userSettings, userViews) { function loadlibraryButtons(elem, apiClient, user, userSettings, userViews) {
elem.classList.remove('verticalSection'); elem.classList.remove('verticalSection');
var html = getLibraryButtonsHtml(userViews); const html = getLibraryButtonsHtml(userViews);
elem.innerHTML = html; elem.innerHTML = html;
imageLoader.lazyChildren(elem); imageLoader.lazyChildren(elem);
@ -210,8 +225,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getFetchLatestItemsFn(serverId, parentId, collectionType) { function getFetchLatestItemsFn(serverId, parentId, collectionType) {
return function () { return function () {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
var limit = 16; let limit = 16;
if (enableScrollX()) { if (enableScrollX()) {
if (collectionType === 'music') { if (collectionType === 'music') {
@ -227,7 +242,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
} }
var options = { const options = {
Limit: limit, Limit: limit,
Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,Path', Fields: 'PrimaryImageAspectRatio,BasicSyncInfo,Path',
ImageTypeLimit: 1, ImageTypeLimit: 1,
@ -241,8 +256,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getLatestItemsHtmlFn(itemType, viewType) { function getLatestItemsHtmlFn(itemType, viewType) {
return function (items) { return function (items) {
var cardLayout = false; const cardLayout = false;
var shape; let shape;
if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') { if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') {
shape = getPortraitShape(); shape = getPortraitShape();
} else if (viewType === 'music' || viewType === 'homevideos') { } else if (viewType === 'music' || viewType === 'homevideos') {
@ -272,7 +287,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function renderLatestSection(elem, apiClient, user, parent) { function renderLatestSection(elem, apiClient, user, parent) {
var html = ''; let html = '';
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">'; html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
if (!layoutManager.tv) { if (!layoutManager.tv) {
@ -303,7 +318,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.innerHTML = html; elem.innerHTML = html;
var itemsContainer = elem.querySelector('.itemsContainer'); const itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType); itemsContainer.fetchData = getFetchLatestItemsFn(apiClient.serverId(), parent.Id, parent.CollectionType);
itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType); itemsContainer.getItemsHtml = getLatestItemsHtmlFn(parent.Type, parent.CollectionType);
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
@ -311,10 +326,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function loadRecentlyAdded(elem, apiClient, user, userViews) { function loadRecentlyAdded(elem, apiClient, user, userViews) {
elem.classList.remove('verticalSection'); elem.classList.remove('verticalSection');
var excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels']; const excludeViewTypes = ['playlists', 'livetv', 'boxsets', 'channels'];
for (var i = 0, length = userViews.length; i < length; i++) { for (let i = 0, length = userViews.length; i < length; i++) {
var item = userViews[i]; const item = userViews[i];
if (user.Configuration.LatestItemsExcludes.indexOf(item.Id) !== -1) { if (user.Configuration.LatestItemsExcludes.indexOf(item.Id) !== -1) {
continue; continue;
} }
@ -323,7 +338,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
continue; continue;
} }
var frag = document.createElement('div'); const frag = document.createElement('div');
frag.classList.add('verticalSection'); frag.classList.add('verticalSection');
frag.classList.add('hide'); frag.classList.add('hide');
elem.appendChild(frag); elem.appendChild(frag);
@ -334,12 +349,14 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getRequirePromise(deps) { function getRequirePromise(deps) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(deps, resolve); import(deps).then(() => {
return resolve;
});
}); });
} }
function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) { export function loadLibraryTiles(elem, apiClient, user, userSettings, shape, userViews, allSections) {
var html = ''; let html = '';
if (userViews.length) { if (userViews.length) {
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
if (enableScrollX()) { if (enableScrollX()) {
@ -372,10 +389,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getContinueWatchingFetchFn(serverId) { function getContinueWatchingFetchFn(serverId) {
return function () { return function () {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
var screenWidth = dom.getWindowSize().innerWidth; const screenWidth = dom.getWindowSize().innerWidth;
var limit; let limit;
if (enableScrollX()) { if (enableScrollX()) {
limit = 12; limit = 12;
} else { } else {
@ -383,7 +400,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
limit = Math.min(limit, 5); limit = Math.min(limit, 5);
} }
var options = { const options = {
Limit: limit, Limit: limit,
Recursive: true, Recursive: true,
Fields: 'PrimaryImageAspectRatio,BasicSyncInfo', Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
@ -398,7 +415,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function getContinueWatchingItemsHtml(items) { function getContinueWatchingItemsHtml(items) {
var cardLayout = false; const cardLayout = false;
return cardBuilder.getCardsHtml({ return cardBuilder.getCardsHtml({
items: items, items: items,
preferThumb: true, preferThumb: true,
@ -419,7 +436,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function loadResumeVideo(elem, apiClient, userId) { function loadResumeVideo(elem, apiClient, userId) {
var html = ''; let html = '';
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
if (enableScrollX()) { if (enableScrollX()) {
@ -437,7 +454,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.classList.add('hide'); elem.classList.add('hide');
elem.innerHTML = html; elem.innerHTML = html;
var itemsContainer = elem.querySelector('.itemsContainer'); const itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.fetchData = getContinueWatchingFetchFn(apiClient.serverId()); itemsContainer.fetchData = getContinueWatchingFetchFn(apiClient.serverId());
itemsContainer.getItemsHtml = getContinueWatchingItemsHtml; itemsContainer.getItemsHtml = getContinueWatchingItemsHtml;
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
@ -445,10 +462,10 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getContinueListeningFetchFn(serverId) { function getContinueListeningFetchFn(serverId) {
return function () { return function () {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
var screenWidth = dom.getWindowSize().innerWidth; const screenWidth = dom.getWindowSize().innerWidth;
var limit; let limit;
if (enableScrollX()) { if (enableScrollX()) {
limit = 12; limit = 12;
} else { } else {
@ -456,7 +473,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
limit = Math.min(limit, 5); limit = Math.min(limit, 5);
} }
var options = { const options = {
Limit: limit, Limit: limit,
Recursive: true, Recursive: true,
Fields: 'PrimaryImageAspectRatio,BasicSyncInfo', Fields: 'PrimaryImageAspectRatio,BasicSyncInfo',
@ -471,7 +488,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function getContinueListeningItemsHtml(items) { function getContinueListeningItemsHtml(items) {
var cardLayout = false; const cardLayout = false;
return cardBuilder.getCardsHtml({ return cardBuilder.getCardsHtml({
items: items, items: items,
preferThumb: true, preferThumb: true,
@ -492,7 +509,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function loadResumeAudio(elem, apiClient, userId) { function loadResumeAudio(elem, apiClient, userId) {
var html = ''; let html = '';
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderContinueWatching') + '</h2>';
if (enableScrollX()) { if (enableScrollX()) {
@ -510,7 +527,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.classList.add('hide'); elem.classList.add('hide');
elem.innerHTML = html; elem.innerHTML = html;
var itemsContainer = elem.querySelector('.itemsContainer'); const itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.fetchData = getContinueListeningFetchFn(apiClient.serverId()); itemsContainer.fetchData = getContinueListeningFetchFn(apiClient.serverId());
itemsContainer.getItemsHtml = getContinueListeningItemsHtml; itemsContainer.getItemsHtml = getContinueListeningItemsHtml;
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
@ -518,7 +535,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getOnNowFetchFn(serverId) { function getOnNowFetchFn(serverId) {
return function () { return function () {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return apiClient.getLiveTvRecommendedPrograms({ return apiClient.getLiveTvRecommendedPrograms({
userId: apiClient.getCurrentUserId(), userId: apiClient.getCurrentUserId(),
IsAiring: true, IsAiring: true,
@ -532,7 +549,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function getOnNowItemsHtml(items) { function getOnNowItemsHtml(items) {
var cardLayout = false; const cardLayout = false;
return cardBuilder.getCardsHtml({ return cardBuilder.getCardsHtml({
items: items, items: items,
preferThumb: 'auto', preferThumb: 'auto',
@ -559,7 +576,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
return Promise.resolve(); return Promise.resolve();
} }
var userId = user.Id; const userId = user.Id;
return apiClient.getLiveTvRecommendedPrograms({ return apiClient.getLiveTvRecommendedPrograms({
userId: apiClient.getCurrentUserId(), userId: apiClient.getCurrentUserId(),
IsAiring: true, IsAiring: true,
@ -569,7 +586,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
EnableTotalRecordCount: false, EnableTotalRecordCount: false,
Fields: 'ChannelInfo,PrimaryImageAspectRatio' Fields: 'ChannelInfo,PrimaryImageAspectRatio'
}).then(function (result) { }).then(function (result) {
var html = ''; let html = '';
if (result.Items.length) { if (result.Items.length) {
elem.classList.remove('padded-left'); elem.classList.remove('padded-left');
elem.classList.remove('padded-right'); elem.classList.remove('padded-right');
@ -654,7 +671,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.innerHTML = html; elem.innerHTML = html;
var itemsContainer = elem.querySelector('.itemsContainer'); const itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId()); itemsContainer.fetchData = getOnNowFetchFn(apiClient.serverId());
itemsContainer.getItemsHtml = getOnNowItemsHtml; itemsContainer.getItemsHtml = getOnNowItemsHtml;
@ -664,7 +681,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getNextUpFetchFn(serverId) { function getNextUpFetchFn(serverId) {
return function () { return function () {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return apiClient.getNextUpEpisodes({ return apiClient.getNextUpEpisodes({
Limit: enableScrollX() ? 24 : 15, Limit: enableScrollX() ? 24 : 15,
Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo,Path', Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo,Path',
@ -677,7 +694,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function getNextUpItemsHtml(items) { function getNextUpItemsHtml(items) {
var cardLayout = false; const cardLayout = false;
return cardBuilder.getCardsHtml({ return cardBuilder.getCardsHtml({
items: items, items: items,
preferThumb: true, preferThumb: true,
@ -695,7 +712,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function loadNextUp(elem, apiClient, userId) { function loadNextUp(elem, apiClient, userId) {
var html = ''; let html = '';
html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">'; html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
if (!layoutManager.tv) { if (!layoutManager.tv) {
@ -727,7 +744,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.classList.add('hide'); elem.classList.add('hide');
elem.innerHTML = html; elem.innerHTML = html;
var itemsContainer = elem.querySelector('.itemsContainer'); const itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.fetchData = getNextUpFetchFn(apiClient.serverId()); itemsContainer.fetchData = getNextUpFetchFn(apiClient.serverId());
itemsContainer.getItemsHtml = getNextUpItemsHtml; itemsContainer.getItemsHtml = getNextUpItemsHtml;
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
@ -735,7 +752,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) { function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) {
return function () { return function () {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return apiClient.getLiveTvRecordings({ return apiClient.getLiveTvRecordings({
userId: apiClient.getCurrentUserId(), userId: apiClient.getCurrentUserId(),
Limit: enableScrollX() ? 12 : 5, Limit: enableScrollX() ? 12 : 5,
@ -749,7 +766,7 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
function getLatestRecordingItemsHtml(activeRecordingsOnly) { function getLatestRecordingItemsHtml(activeRecordingsOnly) {
return function (items) { return function (items) {
var cardLayout = false; const cardLayout = false;
return cardBuilder.getCardsHtml({ return cardBuilder.getCardsHtml({
items: items, items: items,
shape: enableScrollX() ? 'autooverflow' : 'auto', shape: enableScrollX() ? 'autooverflow' : 'auto',
@ -774,11 +791,11 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
} }
function loadLatestLiveTvRecordings(elem, activeRecordingsOnly, apiClient, userId) { function loadLatestLiveTvRecordings(elem, activeRecordingsOnly, apiClient, userId) {
var title = activeRecordingsOnly ? const title = activeRecordingsOnly ?
globalize.translate('HeaderActiveRecordings') : globalize.translate('HeaderActiveRecordings') :
globalize.translate('HeaderLatestRecordings'); globalize.translate('HeaderLatestRecordings');
var html = ''; let html = '';
html += '<div class="sectionTitleContainer sectionTitleContainer-cards">'; html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
@ -799,13 +816,13 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
elem.classList.add('hide'); elem.classList.add('hide');
elem.innerHTML = html; elem.innerHTML = html;
var itemsContainer = elem.querySelector('.itemsContainer'); const itemsContainer = elem.querySelector('.itemsContainer');
itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly); itemsContainer.fetchData = getLatestRecordingsFetchFn(apiClient.serverId(), activeRecordingsOnly);
itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly); itemsContainer.getItemsHtml = getLatestRecordingItemsHtml(activeRecordingsOnly);
itemsContainer.parentContainer = elem; itemsContainer.parentContainer = elem;
} }
return { export default {
loadLibraryTiles: loadLibraryTiles, loadLibraryTiles: loadLibraryTiles,
getDefaultSection: getDefaultSection, getDefaultSection: getDefaultSection,
loadSections: loadSections, loadSections: loadSections,
@ -813,4 +830,5 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
pause: pause, pause: pause,
resume: resume resume: resume
}; };
});
/* eslint-enable indent */

64
src/components/htmlMediaHelper.js
View file

@ -1,17 +1,20 @@
define(['appSettings', 'browser', 'events'], function (appSettings, browser, events) { /* eslint-disable indent */
'use strict';
function getSavedVolume() { import appSettings from 'appSettings' ;
import browser from 'browser';
import events from 'events';
export function getSavedVolume() {
return appSettings.get('volume') || 1; return appSettings.get('volume') || 1;
} }
function saveVolume(value) { export function saveVolume(value) {
if (value) { if (value) {
appSettings.set('volume', value); appSettings.set('volume', value);
} }
} }
function getCrossOriginValue(mediaSource) { export function getCrossOriginValue(mediaSource) {
if (mediaSource.IsRemote) { if (mediaSource.IsRemote) {
return null; return null;
} }
@ -30,7 +33,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
return false; return false;
} }
function enableHlsShakaPlayer(item, mediaSource, mediaType) { export function enableHlsShakaPlayer(item, mediaSource, mediaType) {
/* eslint-disable-next-line compat/compat */ /* eslint-disable-next-line compat/compat */
if (!!window.MediaSource && !!MediaSource.isTypeSupported) { if (!!window.MediaSource && !!MediaSource.isTypeSupported) {
@ -56,7 +59,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
return false; return false;
} }
function enableHlsJsPlayer(runTimeTicks, mediaType) { export function enableHlsJsPlayer(runTimeTicks, mediaType) {
if (window.MediaSource == null) { if (window.MediaSource == null) {
return false; return false;
@ -98,7 +101,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
var recoverDecodingErrorDate; var recoverDecodingErrorDate;
var recoverSwapAudioCodecDate; var recoverSwapAudioCodecDate;
function handleHlsJsMediaError(instance, reject) { export function handleHlsJsMediaError(instance, reject) {
var hlsPlayer = instance._hlsPlayer; var hlsPlayer = instance._hlsPlayer;
@ -134,7 +137,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
} }
function onErrorInternal(instance, type) { export function onErrorInternal(instance, type) {
// Needed for video // Needed for video
if (instance.destroyCustomTrack) { if (instance.destroyCustomTrack) {
@ -148,7 +151,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
]); ]);
} }
function isValidDuration(duration) { export function isValidDuration(duration) {
if (duration && !isNaN(duration) && duration !== Number.POSITIVE_INFINITY && duration !== Number.NEGATIVE_INFINITY) { if (duration && !isNaN(duration) && duration !== Number.POSITIVE_INFINITY && duration !== Number.NEGATIVE_INFINITY) {
return true; return true;
} }
@ -162,7 +165,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
} }
function seekOnPlaybackStart(instance, element, ticks, onMediaReady) { export function seekOnPlaybackStart(instance, element, ticks, onMediaReady) {
var seconds = (ticks || 0) / 10000000; var seconds = (ticks || 0) / 10000000;
@ -200,7 +203,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
} }
function applySrc(elem, src, options) { export function applySrc(elem, src, options) {
if (window.Windows && options.mediaSource && options.mediaSource.IsLocal) { if (window.Windows && options.mediaSource && options.mediaSource.IsLocal) {
@ -228,7 +231,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
elem.addEventListener('error', onErrorFn); elem.addEventListener('error', onErrorFn);
} }
function playWithPromise(elem, onErrorFn) { export function playWithPromise(elem, onErrorFn) {
try { try {
var promise = elem.play(); var promise = elem.play();
@ -256,7 +259,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
} }
function destroyCastPlayer(instance) { export function destroyCastPlayer(instance) {
var player = instance._castPlayer; var player = instance._castPlayer;
if (player) { if (player) {
@ -270,7 +273,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
} }
function destroyShakaPlayer(instance) { export function destroyShakaPlayer(instance) {
var player = instance._shakaPlayer; var player = instance._shakaPlayer;
if (player) { if (player) {
try { try {
@ -283,7 +286,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
} }
function destroyHlsPlayer(instance) { export function destroyHlsPlayer(instance) {
var player = instance._hlsPlayer; var player = instance._hlsPlayer;
if (player) { if (player) {
try { try {
@ -296,7 +299,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
} }
function destroyFlvPlayer(instance) { export function destroyFlvPlayer(instance) {
var player = instance._flvPlayer; var player = instance._flvPlayer;
if (player) { if (player) {
try { try {
@ -311,7 +314,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
} }
} }
function bindEventsToHlsPlayer(instance, hls, elem, onErrorFn, resolve, reject) { export function bindEventsToHlsPlayer(instance, hls, elem, onErrorFn, resolve, reject) {
hls.on(Hls.Events.MANIFEST_PARSED, function () { hls.on(Hls.Events.MANIFEST_PARSED, function () {
playWithPromise(elem, onErrorFn).then(resolve, function () { playWithPromise(elem, onErrorFn).then(resolve, function () {
@ -403,7 +406,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
}); });
} }
function onEndedInternal(instance, elem, onErrorFn) { export function onEndedInternal(instance, elem, onErrorFn) {
elem.removeEventListener('error', onErrorFn); elem.removeEventListener('error', onErrorFn);
@ -427,7 +430,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
instance._currentPlayOptions = null; instance._currentPlayOptions = null;
} }
function getBufferedRanges(instance, elem) { export function getBufferedRanges(instance, elem) {
var ranges = []; var ranges = [];
var seekable = elem.buffered || []; var seekable = elem.buffered || [];
@ -462,23 +465,4 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
return ranges; return ranges;
} }
return { /* eslint-enable indent */
getSavedVolume: getSavedVolume,
saveVolume: saveVolume,
enableHlsJsPlayer: enableHlsJsPlayer,
enableHlsShakaPlayer: enableHlsShakaPlayer,
handleHlsJsMediaError: handleHlsJsMediaError,
isValidDuration: isValidDuration,
onErrorInternal: onErrorInternal,
seekOnPlaybackStart: seekOnPlaybackStart,
applySrc: applySrc,
playWithPromise: playWithPromise,
destroyHlsPlayer: destroyHlsPlayer,
destroyFlvPlayer: destroyFlvPlayer,
destroyCastPlayer: destroyCastPlayer,
bindEventsToHlsPlayer: bindEventsToHlsPlayer,
onEndedInternal: onEndedInternal,
getCrossOriginValue: getCrossOriginValue,
getBufferedRanges: getBufferedRanges
};
});

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

@ -339,7 +339,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
var dlg = dialogHelper.createDialog(dialogOptions); var dlg = dialogHelper.createDialog(dialogOptions);
dlg.innerHTML = globalize.translateDocument(template, 'core'); dlg.innerHTML = globalize.translateHtml(template, 'core');
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg, false); scrollHelper.centerFocus.on(dlg, false);

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

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

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

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

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

@ -200,7 +200,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
require(['confirm'], function (confirm) { require(['confirm'], function (confirm) {
confirm({ confirm.default({
text: globalize.translate('ConfirmDeleteImage'), text: globalize.translate('ConfirmDeleteImage'),
confirmText: globalize.translate('Delete'), confirmText: globalize.translate('Delete'),
@ -464,7 +464,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.innerHTML = globalize.translateDocument(template, 'core'); dlg.innerHTML = globalize.translateHtml(template, 'core');
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg, false); scrollHelper.centerFocus.on(dlg, false);

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

@ -120,7 +120,7 @@ import 'css!./style';
export function lazyChildren(elem) { export function lazyChildren(elem) {
if (userSettings.enableBlurhash()) { if (userSettings.enableBlurhash()) {
for (const lazyElem of elem.getElementsByClassName('lazy')) { for (const lazyElem of elem.querySelectorAll('.lazy')) {
const blurhashstr = lazyElem.getAttribute('data-blurhash'); const blurhashstr = lazyElem.getAttribute('data-blurhash');
if (!lazyElem.classList.contains('blurhashed', 'non-blurhashable') && blurhashstr) { if (!lazyElem.classList.contains('blurhashed', 'non-blurhashable') && blurhashstr) {
itemBlurhashing(lazyElem, blurhashstr); itemBlurhashing(lazyElem, blurhashstr);

102
src/components/itemContextMenu.js
View file

@ -1,14 +1,24 @@
define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', 'playbackManager', 'loading', 'appSettings', 'browser', 'actionsheet'], function (appHost, globalize, connectionManager, itemHelper, appRouter, playbackManager, loading, appSettings, browser, actionsheet) { import appHost from 'apphost';
'use strict'; import globalize from 'globalize';
import connectionManager from 'connectionManager';
import itemHelper from 'itemHelper';
import appRouter from 'appRouter';
import playbackManager from 'playbackManager';
import loading from 'loading';
import appSettings from 'appSettings';
import browser from 'browser';
import actionsheet from 'actionsheet';
function getCommands(options) { /* eslint-disable indent */
var item = options.item;
var user = options.user;
var canPlay = playbackManager.canPlay(item); export function getCommands(options) {
var restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator; const item = options.item;
const user = options.user;
var commands = []; const canPlay = playbackManager.canPlay(item);
const restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
let commands = [];
if (canPlay && item.MediaType !== 'Photo') { if (canPlay && item.MediaType !== 'Photo') {
if (options.play !== false) { if (options.play !== false) {
@ -171,10 +181,10 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
}); });
} }
var canEdit = itemHelper.canEdit(user, item); const canEdit = itemHelper.canEdit(user, item);
if (canEdit) { if (canEdit) {
if (options.edit !== false && item.Type !== 'SeriesTimer') { if (options.edit !== false && item.Type !== 'SeriesTimer') {
var text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata'); const text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata');
commands.push({ commands.push({
name: text, name: text,
id: 'edit', id: 'edit',
@ -322,31 +332,31 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function executeCommand(item, id, options) { function executeCommand(item, id, options) {
var itemId = item.Id; const itemId = item.Id;
var serverId = item.ServerId; const serverId = item.ServerId;
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
switch (id) { switch (id) {
case 'addtocollection': case 'addtocollection':
require(['collectionEditor'], function (collectionEditor) { import('collectionEditor').then(({default: collectionEditor}) => {
new collectionEditor().show({ new collectionEditor({
items: [itemId], items: [itemId],
serverId: serverId serverId: serverId
}).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
case 'addtoplaylist': case 'addtoplaylist':
require(['playlistEditor'], function (playlistEditor) { import('playlistEditor').then(({default: playlistEditor}) => {
new playlistEditor().show({ new playlistEditor({
items: [itemId], items: [itemId],
serverId: serverId serverId: serverId
}).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
case 'download': case 'download':
require(['fileDownloader'], function (fileDownloader) { import('fileDownloader').then(({default: fileDownloader}) => {
var downloadHref = apiClient.getItemDownloadUrl(itemId); const downloadHref = apiClient.getItemDownloadUrl(itemId);
fileDownloader.download([{ fileDownloader.download([{
url: downloadHref, url: downloadHref,
itemId: itemId, itemId: itemId,
@ -357,17 +367,17 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
getResolveFunction(getResolveFunction(resolve, id), id)(); getResolveFunction(getResolveFunction(resolve, id), id)();
}); });
break; break;
case 'copy-stream': case 'copy-stream': {
var downloadHref = apiClient.getItemDownloadUrl(itemId); const downloadHref = apiClient.getItemDownloadUrl(itemId);
var textAreaCopy = function () { const textAreaCopy = function () {
var textArea = document.createElement('textarea'); let textArea = document.createElement('textarea');
textArea.value = downloadHref; textArea.value = downloadHref;
document.body.appendChild(textArea); document.body.appendChild(textArea);
textArea.focus(); textArea.focus();
textArea.select(); textArea.select();
if (document.execCommand('copy')) { if (document.execCommand('copy')) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('CopyStreamURLSuccess')); toast(globalize.translate('CopyStreamURLSuccess'));
}); });
} else { } else {
@ -382,7 +392,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} else { } else {
/* eslint-disable-next-line compat/compat */ /* eslint-disable-next-line compat/compat */
navigator.clipboard.writeText(downloadHref).then(function () { navigator.clipboard.writeText(downloadHref).then(function () {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('CopyStreamURLSuccess')); toast(globalize.translate('CopyStreamURLSuccess'));
}); });
}).catch(function () { }).catch(function () {
@ -391,8 +401,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
getResolveFunction(resolve, id)(); getResolveFunction(resolve, id)();
break; break;
}
case 'editsubtitles': case 'editsubtitles':
require(['subtitleEditor'], function (subtitleEditor) { import('subtitleEditor').then(({default: subtitleEditor}) => {
subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
@ -400,7 +411,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
break; break;
case 'editimages': case 'editimages':
require(['imageEditor'], function (imageEditor) { import('imageEditor').then(({default: imageEditor}) => {
imageEditor.show({ imageEditor.show({
itemId: itemId, itemId: itemId,
serverId: serverId serverId: serverId
@ -408,12 +419,12 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
}); });
break; break;
case 'identify': case 'identify':
require(['itemIdentifier'], function (itemIdentifier) { import('itemIdentifier').then(({default: itemIdentifier}) => {
itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
case 'moremediainfo': case 'moremediainfo':
require(['itemMediaInfo'], function (itemMediaInfo) { import('itemMediaInfo').then(({default: itemMediaInfo}) => {
itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id)); itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id));
}); });
break; break;
@ -448,7 +459,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
playbackManager.clearQueue(); playbackManager.clearQueue();
break; break;
case 'record': case 'record':
require(['recordingCreator'], function (recordingCreator) { import('recordingCreator').then(({default: recordingCreator}) => {
recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
@ -519,8 +530,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function deleteTimer(apiClient, item, resolve, command) { function deleteTimer(apiClient, item, resolve, command) {
require(['recordingHelper'], function (recordingHelper) { import('recordingHelper').then(({default: recordingHelper}) => {
var timerId = item.TimerId || item.Id; const timerId = item.TimerId || item.Id;
recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () { recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () {
getResolveFunction(resolve, command, true)(); getResolveFunction(resolve, command, true)();
}); });
@ -528,7 +539,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function deleteSeriesTimer(apiClient, item, resolve, command) { function deleteSeriesTimer(apiClient, item, resolve, command) {
require(['recordingHelper'], function (recordingHelper) { import('recordingHelper').then(({default: recordingHelper}) => {
recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () { recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () {
getResolveFunction(resolve, command, true)(); getResolveFunction(resolve, command, true)();
}); });
@ -536,9 +547,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function play(item, resume, queue, queueNext) { function play(item, resume, queue, queueNext) {
var method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play'; const method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play';
var startPosition = 0; let startPosition = 0;
if (resume && item.UserData && item.UserData.PlaybackPositionTicks) { if (resume && item.UserData && item.UserData.PlaybackPositionTicks) {
startPosition = item.UserData.PlaybackPositionTicks; startPosition = item.UserData.PlaybackPositionTicks;
} }
@ -559,18 +570,18 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
function editItem(apiClient, item) { function editItem(apiClient, item) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
var serverId = apiClient.serverInfo().Id; const serverId = apiClient.serverInfo().Id;
if (item.Type === 'Timer') { if (item.Type === 'Timer') {
require(['recordingEditor'], function (recordingEditor) { import('recordingEditor').then(({default: recordingEditor}) => {
recordingEditor.show(item.Id, serverId).then(resolve, reject); recordingEditor.show(item.Id, serverId).then(resolve, reject);
}); });
} else if (item.Type === 'SeriesTimer') { } else if (item.Type === 'SeriesTimer') {
require(['seriesRecordingEditor'], function (recordingEditor) { import('seriesRecordingEditor').then(({default: recordingEditor}) => {
recordingEditor.show(item.Id, serverId).then(resolve, reject); recordingEditor.show(item.Id, serverId).then(resolve, reject);
}); });
} else { } else {
require(['metadataEditor'], function (metadataEditor) { import('metadataEditor').then(({default: metadataEditor}) => {
metadataEditor.show(item.Id, serverId).then(resolve, reject); metadataEditor.show(item.Id, serverId).then(resolve, reject);
}); });
} }
@ -579,7 +590,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
function deleteItem(apiClient, item) { function deleteItem(apiClient, item) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['deleteHelper'], function (deleteHelper) { import('deleteHelper').then(({default: deleteHelper}) => {
deleteHelper.deleteItem({ deleteHelper.deleteItem({
item: item, item: item,
navigate: false navigate: false
@ -591,7 +602,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function refresh(apiClient, item) { function refresh(apiClient, item) {
require(['refreshDialog'], function (refreshDialog) { import('refreshDialog').then(({default: refreshDialog}) => {
new refreshDialog({ new refreshDialog({
itemIds: [item.Id], itemIds: [item.Id],
serverId: apiClient.serverInfo().Id, serverId: apiClient.serverInfo().Id,
@ -600,8 +611,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
}); });
} }
function show(options) { export function show(options) {
var commands = getCommands(options); const commands = getCommands(options);
if (!commands.length) { if (!commands.length) {
return Promise.reject(); return Promise.reject();
} }
@ -615,8 +626,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
}); });
} }
return { /* eslint-enable indent */
export default {
getCommands: getCommands, getCommands: getCommands,
show: show show: show
}; };
});

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

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

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

@ -1,15 +1,34 @@
define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', 'scrollHelper', 'layoutManager', 'focusManager', 'browser', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'cardStyle'], function (dialogHelper, loading, connectionManager, require, globalize, scrollHelper, layoutManager, focusManager, browser) { /* eslint-disable indent */
'use strict';
var enableFocusTransform = !browser.slow && !browser.edge; /**
* Module for itemidentifier media item.
* @module components/itemidentifier/itemidentifier
*/
var currentItem; import dialogHelper from 'dialogHelper';
var currentItemType; import loading from 'loading';
var currentServerId; import connectionManager from 'connectionManager';
var currentResolve; import globalize from 'globalize';
var currentReject; import scrollHelper from 'scrollHelper';
var hasChanges = false; import layoutManager from 'layoutManager';
var currentSearchResult; import focusManager from 'focusManager';
import browser from 'browser';
import 'emby-input';
import 'emby-checkbox';
import 'paper-icon-button-light';
import 'css!./../formdialog';
import 'material-icons';
import 'cardStyle';
const enableFocusTransform = !browser.slow && !browser.edge;
let currentItem;
let currentItemType;
let currentServerId;
let currentResolve;
let currentReject;
let hasChanges = false;
let currentSearchResult;
function getApiClient() { function getApiClient() {
return connectionManager.getApiClient(currentServerId); return connectionManager.getApiClient(currentServerId);
@ -17,14 +36,14 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
function searchForIdentificationResults(page) { function searchForIdentificationResults(page) {
var lookupInfo = { let lookupInfo = {
ProviderIds: {} ProviderIds: {}
}; };
var i; let i;
var length; let length;
var identifyField = page.querySelectorAll('.identifyField'); const identifyField = page.querySelectorAll('.identifyField');
var value; let value;
for (i = 0, length = identifyField.length; i < length; i++) { for (i = 0, length = identifyField.length; i < length; i++) {
value = identifyField[i].value; value = identifyField[i].value;
@ -39,9 +58,9 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
} }
var hasId = false; let hasId = false;
var txtLookupId = page.querySelectorAll('.txtLookupId'); const txtLookupId = page.querySelectorAll('.txtLookupId');
for (i = 0, length = txtLookupId.length; i < length; i++) { for (i = 0, length = txtLookupId.length; i < length; i++) {
value = txtLookupId[i].value; value = txtLookupId[i].value;
@ -53,7 +72,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
if (!hasId && !lookupInfo.Name) { if (!hasId && !lookupInfo.Name) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('PleaseEnterNameOrId')); toast(globalize.translate('PleaseEnterNameOrId'));
}); });
return; return;
@ -71,16 +90,16 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
loading.show(); loading.show();
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.ajax({ apiClient.ajax({
type: 'POST', type: 'POST',
url: apiClient.getUrl('Items/RemoteSearch/' + currentItemType), url: apiClient.getUrl(`Items/RemoteSearch/${currentItemType}`),
data: JSON.stringify(lookupInfo), data: JSON.stringify(lookupInfo),
contentType: 'application/json', contentType: 'application/json',
dataType: 'json' dataType: 'json'
}).then(function (results) { }).then(results => {
loading.hide(); loading.hide();
showIdentificationSearchResults(page, results); showIdentificationSearchResults(page, results);
@ -89,29 +108,29 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
function showIdentificationSearchResults(page, results) { function showIdentificationSearchResults(page, results) {
var identificationSearchResults = page.querySelector('.identificationSearchResults'); const identificationSearchResults = page.querySelector('.identificationSearchResults');
page.querySelector('.popupIdentifyForm').classList.add('hide'); page.querySelector('.popupIdentifyForm').classList.add('hide');
identificationSearchResults.classList.remove('hide'); identificationSearchResults.classList.remove('hide');
page.querySelector('.identifyOptionsForm').classList.add('hide'); page.querySelector('.identifyOptionsForm').classList.add('hide');
page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered'); page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered');
var html = ''; let html = '';
var i; let i;
var length; let length;
for (i = 0, length = results.length; i < length; i++) { for (i = 0, length = results.length; i < length; i++) {
var result = results[i]; const result = results[i];
html += getSearchResultHtml(result, i); html += getSearchResultHtml(result, i);
} }
var elem = page.querySelector('.identificationSearchResultList'); const elem = page.querySelector('.identificationSearchResultList');
elem.innerHTML = html; elem.innerHTML = html;
function onSearchImageClick() { function onSearchImageClick() {
var index = parseInt(this.getAttribute('data-index')); const index = parseInt(this.getAttribute('data-index'));
var currentResult = results[index]; const currentResult = results[index];
if (currentItem != null) { if (currentItem != null) {
@ -122,7 +141,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
} }
var searchImages = elem.querySelectorAll('.card'); const searchImages = elem.querySelectorAll('.card');
for (i = 0, length = searchImages.length; i < length; i++) { for (i = 0, length = searchImages.length; i < length; i++) {
searchImages[i].addEventListener('click', onSearchImageClick); searchImages[i].addEventListener('click', onSearchImageClick);
@ -143,7 +162,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
function showIdentifyOptions(page, identifyResult) { function showIdentifyOptions(page, identifyResult) {
var identifyOptionsForm = page.querySelector('.identifyOptionsForm'); const identifyOptionsForm = page.querySelector('.identifyOptionsForm');
page.querySelector('.popupIdentifyForm').classList.add('hide'); page.querySelector('.popupIdentifyForm').classList.add('hide');
page.querySelector('.identificationSearchResults').classList.add('hide'); page.querySelector('.identificationSearchResults').classList.add('hide');
@ -153,19 +172,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
currentSearchResult = identifyResult; currentSearchResult = identifyResult;
var lines = []; const lines = [];
lines.push(identifyResult.Name); lines.push(identifyResult.Name);
if (identifyResult.ProductionYear) { if (identifyResult.ProductionYear) {
lines.push(identifyResult.ProductionYear); lines.push(identifyResult.ProductionYear);
} }
var resultHtml = lines.join('<br/>'); let resultHtml = lines.join('<br/>');
if (identifyResult.ImageUrl) { if (identifyResult.ImageUrl) {
var displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName); const displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName);
resultHtml = '<div style="display:flex;align-items:center;"><img src="' + displayUrl + '" style="max-height:240px;" /><div style="margin-left:1em;">' + resultHtml + '</div>'; resultHtml = `<div style="display:flex;align-items:center;"><img src="${displayUrl}" style="max-height:240px;" /><div style="margin-left:1em;">${resultHtml}</div>`;
} }
page.querySelector('.selectedSearchResult').innerHTML = resultHtml; page.querySelector('.selectedSearchResult').innerHTML = resultHtml;
@ -177,10 +196,10 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
// TODO move card creation code to Card component // TODO move card creation code to Card component
var html = ''; let html = '';
var cssClass = 'card scalableCard'; let cssClass = 'card scalableCard';
var cardBoxCssClass = 'cardBox'; let cardBoxCssClass = 'cardBox';
var padderClass; let padderClass;
if (currentItemType === 'Episode') { if (currentItemType === 'Episode') {
cssClass += ' backdropCard backdropCard-scalable'; cssClass += ' backdropCard backdropCard-scalable';
@ -203,30 +222,32 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
cardBoxCssClass += ' cardBox-bottompadded'; cardBoxCssClass += ' cardBox-bottompadded';
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">'; html += `<button type="button" class="${cssClass}" data-index="${index}">`;
html += '<div class="' + cardBoxCssClass + '">'; html += `<div class="${cardBoxCssClass}">`;
html += '<div class="cardScalable">'; html += '<div class="cardScalable">';
html += '<div class="' + padderClass + '"></div>'; html += `<div class="${padderClass}"></div>`;
html += '<div class="cardContent searchImage">'; html += '<div class="cardContent searchImage">';
if (result.ImageUrl) { if (result.ImageUrl) {
var displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName); const displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName);
html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + displayUrl + '\');"></div>'; html += `<div class="cardImageContainer coveredImage" style="background-image:url('${displayUrl}');"></div>`;
} else { } else {
html += '<div class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">' + result.Name + '</div></div>'; html += `<div class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">${result.Name}</div></div>`;
} }
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
var numLines = 2; let numLines = 3;
if (currentItemType === 'MusicAlbum') { if (currentItemType === 'MusicAlbum') {
numLines++; numLines++;
} }
var lines = [result.Name]; const lines = [result.Name];
lines.push(result.SearchProviderName);
if (result.AlbumArtist) { if (result.AlbumArtist) {
lines.push(result.AlbumArtist.Name); lines.push(result.AlbumArtist.Name);
@ -235,7 +256,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
lines.push(result.ProductionYear); lines.push(result.ProductionYear);
} }
for (var i = 0; i < numLines; i++) { for (let i = 0; i < numLines; i++) {
if (i === 0) { if (i === 0) {
html += '<div class="cardText cardText-first cardTextCentered">'; html += '<div class="cardText cardText-first cardTextCentered">';
@ -252,7 +273,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
function getSearchImageDisplayUrl(url, provider) { function getSearchImageDisplayUrl(url, provider) {
var apiClient = getApiClient(); const apiClient = getApiClient();
return apiClient.getUrl('Items/RemoteSearch/Image', { imageUrl: url, ProviderName: provider }); return apiClient.getUrl('Items/RemoteSearch/Image', { imageUrl: url, ProviderName: provider });
} }
@ -261,26 +282,26 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
loading.show(); loading.show();
var options = { const options = {
ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked
}; };
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.ajax({ apiClient.ajax({
type: 'POST', type: 'POST',
url: apiClient.getUrl('Items/RemoteSearch/Apply/' + currentItem.Id, options), url: apiClient.getUrl(`Items/RemoteSearch/Apply/${currentItem.Id}`, options),
data: JSON.stringify(currentSearchResult), data: JSON.stringify(currentSearchResult),
contentType: 'application/json' contentType: 'application/json'
}).then(function () { }).then(() => {
hasChanges = true; hasChanges = true;
loading.hide(); loading.hide();
dialogHelper.close(page); dialogHelper.close(page);
}, function () { }, () => {
loading.hide(); loading.hide();
@ -290,28 +311,28 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
function showIdentificationForm(page, item) { function showIdentificationForm(page, item) {
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.getJSON(apiClient.getUrl('Items/' + item.Id + '/ExternalIdInfos')).then(function (idList) { apiClient.getJSON(apiClient.getUrl(`Items/${item.Id}/ExternalIdInfos`)).then(idList => {
var html = ''; let html = '';
for (var i = 0, length = idList.length; i < length; i++) { for (let i = 0, length = idList.length; i < length; i++) {
var idInfo = idList[i]; const idInfo = idList[i];
var id = 'txtLookup' + idInfo.Key; const id = `txtLookup${idInfo.Key}`;
html += '<div class="inputContainer">'; html += '<div class="inputContainer">';
var fullName = idInfo.Name; let fullName = idInfo.Name;
if (idInfo.Type) { if (idInfo.Type) {
fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type); fullName = `${idInfo.Name} ${globalize.translate(idInfo.Type)}`;
} }
var idLabel = globalize.translate('LabelDynamicExternalId', fullName); const idLabel = globalize.translate('LabelDynamicExternalId', fullName);
html += '<input is="emby-input" class="txtLookupId" data-providerkey="' + idInfo.Key + '" id="' + id + '" label="' + idLabel + '"/>'; html += `<input is="emby-input" class="txtLookupId" data-providerkey="${idInfo.Key}" id="${id}" label="${idLabel}"/>`;
html += '</div>'; html += '</div>';
} }
@ -338,16 +359,16 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
loading.show(); loading.show();
require(['text!./itemidentifier.template.html'], function (template) { return import('text!./itemidentifier.template.html').then(({default: template}) => {
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
currentItem = item; currentItem = item;
currentItemType = currentItem.Type; currentItemType = currentItem.Type;
var dialogOptions = { const dialogOptions = {
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -357,13 +378,13 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('recordingDialog'); dlg.classList.add('recordingDialog');
var html = ''; let html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -384,21 +405,21 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) { dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
searchForIdentificationResults(dlg); searchForIdentificationResults(dlg);
return false; return false;
}); });
dlg.querySelector('.identifyOptionsForm').addEventListener('submit', function (e) { dlg.querySelector('.identifyOptionsForm').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
submitIdentficationResult(dlg); submitIdentficationResult(dlg);
return false; return false;
}); });
dlg.querySelector('.btnCancel').addEventListener('click', function (e) { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
@ -421,14 +442,15 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
} }
// TODO investigate where this was used
function showEditorFindNew(itemName, itemYear, itemType, resolveFunc) { function showEditorFindNew(itemName, itemYear, itemType, resolveFunc) {
currentItem = null; currentItem = null;
currentItemType = itemType; currentItemType = itemType;
require(['text!./itemidentifier.template.html'], function (template) { return import('text!./itemidentifier.template.html').then(({default: template}) => {
var dialogOptions = { const dialogOptions = {
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -438,13 +460,13 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('recordingDialog'); dlg.classList.add('recordingDialog');
var html = ''; let html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -454,22 +476,22 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.btnCancel').addEventListener('click', function (e) { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) { dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
searchForIdentificationResults(dlg); searchForIdentificationResults(dlg);
return false; return false;
}); });
dlg.addEventListener('close', function () { dlg.addEventListener('close', () => {
loading.hide(); loading.hide();
var foundItem = hasChanges ? currentSearchResult : null; const foundItem = hasChanges ? currentSearchResult : null;
resolveFunc(foundItem); resolveFunc(foundItem);
}); });
@ -498,10 +520,9 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Search'); dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Search');
} }
return { export function show(itemId, serverId) {
show: function (itemId, serverId) {
return new Promise(function (resolve, reject) { return new Promise((resolve, reject) => {
currentResolve = resolve; currentResolve = resolve;
currentReject = reject; currentReject = reject;
@ -510,11 +531,11 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
showEditor(itemId); showEditor(itemId);
}); });
}, }
showFindNew: function (itemName, itemYear, itemType, serverId) { export function showFindNew(itemName, itemYear, itemType, serverId) {
return new Promise(function (resolve, reject) { return new Promise((resolve) => {
currentServerId = serverId; currentServerId = serverId;
@ -522,5 +543,9 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
showEditorFindNew(itemName, itemYear, itemType, resolve); showEditorFindNew(itemName, itemYear, itemType, resolve);
}); });
} }
/* eslint-enable indent */
export default {
show: show,
showFindNew: showFindNew
}; };
});

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

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

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

@ -1,5 +1,21 @@
define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutManager', 'globalize', 'datetime', 'cardBuilder', 'css!./listview', 'emby-ratingbutton', 'emby-playstatebutton'], function (itemHelper, mediaInfo, indicators, connectionManager, layoutManager, globalize, datetime, cardBuilder) { /* eslint-disable indent */
'use strict';
/**
* Module for display list view.
* @module components/listview/listview
*/
import itemHelper from 'itemHelper';
import mediaInfo from 'mediaInfo';
import indicators from 'indicators';
import connectionManager from 'connectionManager';
import layoutManager from 'layoutManager';
import globalize from 'globalize';
import datetime from 'datetime';
import cardBuilder from 'cardBuilder';
import 'css!./listview';
import 'emby-ratingbutton';
import 'emby-playstatebutton';
function getIndex(item, options) { function getIndex(item, options) {
@ -8,9 +24,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
return item.ParentIndexNumber == null ? '' : globalize.translate('ValueDiscNumber', item.ParentIndexNumber); return item.ParentIndexNumber == null ? '' : globalize.translate('ValueDiscNumber', item.ParentIndexNumber);
} }
var sortBy = (options.sortBy || '').toLowerCase(); const sortBy = (options.sortBy || '').toLowerCase();
var code; let code;
var name; let name;
if (sortBy.indexOf('sortname') === 0) { if (sortBy.indexOf('sortname') === 0) {
@ -69,10 +85,10 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
function getImageUrl(item, width) { function getImageUrl(item, width) {
var apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
let itemId; let itemId;
var options = { const options = {
maxWidth: width * 2, maxWidth: width * 2,
type: 'Primary' type: 'Primary'
}; };
@ -99,8 +115,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
function getChannelImageUrl(item, width) { function getChannelImageUrl(item, width) {
var apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
var options = { const options = {
maxWidth: width * 2, maxWidth: width * 2,
type: 'Primary' type: 'Primary'
}; };
@ -115,9 +131,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
function getTextLinesHtml(textlines, isLargeStyle) { function getTextLinesHtml(textlines, isLargeStyle) {
var html = ''; let html = '';
var largeTitleTagName = layoutManager.tv ? 'h2' : 'div'; const largeTitleTagName = layoutManager.tv ? 'h2' : 'div';
for (const [i, text] of textlines.entries()) { for (const [i, text] of textlines.entries()) {
if (!text) { if (!text) {
@ -126,7 +142,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (i === 0) { if (i === 0) {
if (isLargeStyle) { if (isLargeStyle) {
html += '<' + largeTitleTagName + ' class="listItemBodyText">'; html += `<${largeTitleTagName} class="listItemBodyText">`;
} else { } else {
html += '<div class="listItemBodyText">'; html += '<div class="listItemBodyText">';
} }
@ -135,7 +151,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
html += (textlines[i] || '&nbsp;'); html += (textlines[i] || '&nbsp;');
if (i === 0 && isLargeStyle) { if (i === 0 && isLargeStyle) {
html += '</' + largeTitleTagName + '>'; html += `</${largeTitleTagName}>`;
} else { } else {
html += '</div>'; html += '</div>';
} }
@ -146,13 +162,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
function getRightButtonsHtml(options) { function getRightButtonsHtml(options) {
var html = ''; let html = '';
for (var i = 0, length = options.rightButtons.length; i < length; i++) { for (let i = 0, length = options.rightButtons.length; i < length; i++) {
var button = options.rightButtons[i]; const button = options.rightButtons[i];
html += '<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="' + button.id + '" title="' + button.title + '"><span class="material-icons ' + button.icon + '"></span></button>'; html += `<button is="paper-icon-button-light" class="listItemButton itemAction" data-action="custom" data-customaction="${button.id}" title="${button.title}"><span class="material-icons ${button.icon}"></span></button>`;
} }
return html; return html;
@ -162,34 +178,34 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
return item.Id; return item.Id;
} }
function getListViewHtml(options) { export function getListViewHtml(options) {
var items = options.items; const items = options.items;
var groupTitle = ''; let groupTitle = '';
var action = options.action || 'link'; const action = options.action || 'link';
var isLargeStyle = options.imageSize === 'large'; const isLargeStyle = options.imageSize === 'large';
var enableOverview = options.enableOverview; const enableOverview = options.enableOverview;
var clickEntireItem = layoutManager.tv ? true : false; const clickEntireItem = layoutManager.tv ? true : false;
var outerTagName = clickEntireItem ? 'button' : 'div'; const outerTagName = clickEntireItem ? 'button' : 'div';
var enableSideMediaInfo = options.enableSideMediaInfo != null ? options.enableSideMediaInfo : true; const enableSideMediaInfo = options.enableSideMediaInfo != null ? options.enableSideMediaInfo : true;
var outerHtml = ''; let outerHtml = '';
var enableContentWrapper = options.enableOverview && !layoutManager.tv; const enableContentWrapper = options.enableOverview && !layoutManager.tv;
var containerAlbumArtistIds = (options.containerAlbumArtists || []).map(getId); const containerAlbumArtistIds = (options.containerAlbumArtists || []).map(getId);
for (var i = 0, length = items.length; i < length; i++) { for (let i = 0, length = items.length; i < length; i++) {
var item = items[i]; const item = items[i];
var html = ''; let html = '';
if (options.showIndex) { if (options.showIndex) {
var itemGroupTitle = getIndex(item, options); const itemGroupTitle = getIndex(item, options);
if (itemGroupTitle !== groupTitle) { if (itemGroupTitle !== groupTitle) {
@ -211,7 +227,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
var cssClass = 'listItem'; let cssClass = 'listItem';
if (options.border || (options.highlight !== false && !layoutManager.tv)) { if (options.border || (options.highlight !== false && !layoutManager.tv)) {
cssClass += ' listItem-border'; cssClass += ' listItem-border';
@ -225,28 +241,28 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
cssClass += ' listItem-focusscale'; cssClass += ' listItem-focusscale';
} }
var downloadWidth = 80; let downloadWidth = 80;
if (isLargeStyle) { if (isLargeStyle) {
cssClass += ' listItem-largeImage'; cssClass += ' listItem-largeImage';
downloadWidth = 500; downloadWidth = 500;
} }
var playlistItemId = item.PlaylistItemId ? (' data-playlistitemid="' + item.PlaylistItemId + '"') : ''; const playlistItemId = item.PlaylistItemId ? (` data-playlistitemid="${item.PlaylistItemId}"`) : '';
var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : ''; const positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (` data-positionticks="${item.UserData.PlaybackPositionTicks}"`) : '';
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : ''; const collectionIdData = options.collectionId ? (` data-collectionid="${options.collectionId}"`) : '';
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : ''; const playlistIdData = options.playlistId ? (` data-playlistid="${options.playlistId}"`) : '';
var mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : ''; const mediaTypeData = item.MediaType ? (` data-mediatype="${item.MediaType}"`) : '';
var collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : ''; const collectionTypeData = item.CollectionType ? (` data-collectiontype="${item.CollectionType}"`) : '';
var channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : ''; const channelIdData = item.ChannelId ? (` data-channelid="${item.ChannelId}"`) : '';
if (enableContentWrapper) { if (enableContentWrapper) {
cssClass += ' listItem-withContentWrapper'; cssClass += ' listItem-withContentWrapper';
} }
html += '<' + outerTagName + ' class="' + cssClass + '"' + playlistItemId + ' data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + '>'; html += `<${outerTagName} class="${cssClass}"${playlistItemId} data-action="${action}" data-isfolder="${item.IsFolder}" data-id="${item.Id}" data-serverid="${item.ServerId}" data-type="${item.Type}"${mediaTypeData}${collectionTypeData}${channelIdData}${positionTicksData}${collectionIdData}${playlistIdData}>`;
if (enableContentWrapper) { if (enableContentWrapper) {
@ -267,13 +283,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
imageClass += ' listItemImage-large-tv'; imageClass += ' listItemImage-large-tv';
} }
var playOnImageClick = options.imagePlayButton && !layoutManager.tv; const playOnImageClick = options.imagePlayButton && !layoutManager.tv;
if (!clickEntireItem) { if (!clickEntireItem) {
imageClass += ' itemAction'; imageClass += ' itemAction';
} }
var imageAction = playOnImageClick ? 'resume' : action; const imageAction = playOnImageClick ? 'link' : action;
if (imgUrl) { if (imgUrl) {
html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" item-icon>'; html += '<div data-action="' + imageAction + '" class="' + imageClass + ' lazy" data-src="' + imgUrl + '" item-icon>';
@ -281,18 +297,18 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
html += '<div class="' + imageClass + ' cardImageContainer ' + cardBuilder.getDefaultBackgroundClass(item.Name) + '">' + cardBuilder.getDefaultText(item, options); html += '<div class="' + imageClass + ' cardImageContainer ' + cardBuilder.getDefaultBackgroundClass(item.Name) + '">' + cardBuilder.getDefaultText(item, options);
} }
var indicatorsHtml = ''; let indicatorsHtml = '';
indicatorsHtml += indicators.getPlayedIndicatorHtml(item); indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
if (indicatorsHtml) { if (indicatorsHtml) {
html += '<div class="indicators listItemIndicators">' + indicatorsHtml + '</div>'; html += `<div class="indicators listItemIndicators">${indicatorsHtml}</div>`;
} }
if (playOnImageClick) { if (playOnImageClick) {
html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow"></span></button>'; html += '<button is="paper-icon-button-light" class="listItemImageButton itemAction" data-action="resume"><span class="material-icons listItemImageButton-icon play_arrow"></span></button>';
} }
var progressHtml = indicators.getProgressBarHtml(item, { const progressHtml = indicators.getProgressBarHtml(item, {
containerClass: 'listItemProgressBar' containerClass: 'listItemProgressBar'
}); });
@ -309,7 +325,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
html += '</div>'; html += '</div>';
} }
var textlines = []; const textlines = [];
if (options.showProgramDateTime) { if (options.showProgramDateTime) {
textlines.push(datetime.toLocaleString(datetime.parseISO8601Date(item.StartDate), { textlines.push(datetime.toLocaleString(datetime.parseISO8601Date(item.StartDate), {
@ -332,7 +348,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
var parentTitle = null; let parentTitle = null;
if (options.showParentTitle) { if (options.showParentTitle) {
if (item.Type === 'Episode') { if (item.Type === 'Episode') {
@ -342,12 +358,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
var displayName = itemHelper.getDisplayName(item, { let displayName = itemHelper.getDisplayName(item, {
includeParentInfo: options.includeParentInfoInTitle includeParentInfo: options.includeParentInfoInTitle
}); });
if (options.showIndexNumber && item.IndexNumber != null) { if (options.showIndexNumber && item.IndexNumber != null) {
displayName = item.IndexNumber + '. ' + displayName; displayName = `${item.IndexNumber}. ${displayName}`;
} }
if (options.showParentTitle && options.parentTitleWithTitle) { if (options.showParentTitle && options.parentTitleWithTitle) {
@ -378,14 +394,14 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} else { } else {
var showArtist = options.artist === true; let showArtist = options.artist === true;
var artistItems = item.ArtistItems; const artistItems = item.ArtistItems;
if (!showArtist && options.artist !== false) { if (!showArtist && options.artist !== false) {
if (!artistItems || !artistItems.length) { if (!artistItems || !artistItems.length) {
showArtist = true; showArtist = true;
} else if (artistItems.length > 1 || containerAlbumArtistIds.indexOf(artistItems[0].Id) === -1) { } else if (artistItems.length > 1 || !containerAlbumArtistIds.includes(artistItems[0].Id)) {
showArtist = true; showArtist = true;
} }
} }
@ -393,7 +409,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (showArtist) { if (showArtist) {
if (artistItems && item.Type !== 'MusicAlbum') { if (artistItems && item.Type !== 'MusicAlbum') {
textlines.push(artistItems.map(function (a) { textlines.push(artistItems.map(a => {
return a.Name; return a.Name;
}).join(', ')); }).join(', '));
} }
@ -416,21 +432,23 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
cssClass += ' listItemBody-noleftpadding'; cssClass += ' listItemBody-noleftpadding';
} }
html += '<div class="' + cssClass + '">'; html += `<div class="${cssClass}">`;
html += getTextLinesHtml(textlines, isLargeStyle); html += getTextLinesHtml(textlines, isLargeStyle);
if (options.mediaInfo !== false) { if (options.mediaInfo !== false) {
if (!enableSideMediaInfo) { if (!enableSideMediaInfo) {
var mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText'; const mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText';
html += '<div class="' + mediaInfoClass + '">' + mediaInfo.getPrimaryMediaInfoHtml(item, { html += `<div class="${mediaInfoClass}">`;
html += mediaInfo.getPrimaryMediaInfoHtml(item, {
episodeTitle: false, episodeTitle: false,
originalAirDate: false, originalAirDate: false,
subtitles: false subtitles: false
}) + '</div>'; });
html += '</div>';
} }
} }
@ -444,7 +462,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (options.mediaInfo !== false) { if (options.mediaInfo !== false) {
if (enableSideMediaInfo) { if (enableSideMediaInfo) {
html += '<div class="secondary listItemMediaInfo">' + mediaInfo.getPrimaryMediaInfoHtml(item, { html += '<div class="secondary listItemMediaInfo">';
html += mediaInfo.getPrimaryMediaInfoHtml(item, {
year: false, year: false,
container: false, container: false,
@ -452,7 +471,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
criticRating: false, criticRating: false,
endsAt: false endsAt: false
}) + '</div>'; });
html += '</div>';
} }
} }
@ -478,8 +498,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (options.enableUserDataButtons !== false) { if (options.enableUserDataButtons !== false) {
var userData = item.UserData || {}; const userData = item.UserData || {};
var likes = userData.Likes == null ? '' : userData.Likes; const likes = userData.Likes == null ? '' : userData.Likes;
if (itemHelper.canMarkPlayed(item) && options.enablePlayedButton !== false) { if (itemHelper.canMarkPlayed(item) && options.enablePlayedButton !== false) {
html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons check"></span></button>'; html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><span class="material-icons check"></span></button>';
@ -506,7 +526,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
html += '</' + outerTagName + '>'; html += `</${outerTagName}>`;
outerHtml += html; outerHtml += html;
} }
@ -514,7 +534,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
return outerHtml; return outerHtml;
} }
return { /* eslint-enable indent */
export default {
getListViewHtml: getListViewHtml getListViewHtml: getListViewHtml
}; };
});

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

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

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

@ -1,10 +1,6 @@
define(['components/loading/loadingLegacy', 'browser', 'css!./loading'], function (loadingLegacy, browser) { define(['css!./loading'], function () {
'use strict'; 'use strict';
if (browser.tizen || browser.operaTv || browser.chromecast || browser.orsay || browser.web0s || browser.ps4) {
return loadingLegacy;
}
var loadingElem; var loadingElem;
var layer1; var layer1;
var layer2; var layer2;

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

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

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

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

68
src/components/maintabsmanager.js
View file

@ -1,11 +1,16 @@
define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, browser, events) { import dom from 'dom';
'use strict'; import browser from 'browser';
import events from 'events';
import 'emby-tabs';
import 'emby-button';
var tabOwnerView; /* eslint-disable indent */
var queryScope = document.querySelector('.skinHeader');
var footerTabsContainer; let tabOwnerView;
var headerTabsContainer; const queryScope = document.querySelector('.skinHeader');
var tabsElem; let footerTabsContainer;
let headerTabsContainer;
let tabsElem;
function enableTabsInFooter() { function enableTabsInFooter() {
return false; return false;
@ -44,7 +49,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
return false; return false;
} }
var classList = elem.classList; const classList = elem.classList;
if (classList) { if (classList) {
return !classList.contains('scrollX') && !classList.contains('animatedScrollX'); return !classList.contains('scrollX') && !classList.contains('animatedScrollX');
} }
@ -52,7 +57,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
return true; return true;
} }
var parent = target; let parent = target;
while (parent != null) { while (parent != null) {
if (!allowSwipeOn(parent)) { if (!allowSwipeOn(parent)) {
return false; return false;
@ -70,22 +75,22 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
} }
// implement without hammer // implement without hammer
var pageCount = getTabContainersFn().length; const pageCount = getTabContainersFn().length;
var onSwipeLeft = function (e, target) { const onSwipeLeft = function (e, target) {
if (allowSwipe(target) && view.contains(target)) { if (allowSwipe(target) && view.contains(target)) {
tabsElem.selectNext(); tabsElem.selectNext();
} }
}; };
var onSwipeRight = function (e, target) { const onSwipeRight = function (e, target) {
if (allowSwipe(target) && view.contains(target)) { if (allowSwipe(target) && view.contains(target)) {
tabsElem.selectPrevious(); tabsElem.selectPrevious();
} }
}; };
require(['touchHelper'], function (TouchHelper) { import('touchHelper').then(({default: TouchHelper}) => {
var touchHelper = new TouchHelper(view.parentNode.parentNode); const touchHelper = new TouchHelper(view.parentNode.parentNode);
events.on(touchHelper, 'swipeleft', onSwipeLeft); events.on(touchHelper, 'swipeleft', onSwipeLeft);
events.on(touchHelper, 'swiperight', onSwipeRight); events.on(touchHelper, 'swiperight', onSwipeRight);
@ -96,9 +101,9 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
}); });
} }
function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) { export function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) {
var enableInFooter = enableTabsInFooter(); const enableInFooter = enableTabsInFooter();
if (!view) { if (!view) {
if (tabOwnerView) { if (tabOwnerView) {
@ -129,7 +134,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
ensureElements(enableInFooter); ensureElements(enableInFooter);
var tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer; const tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer;
if (!tabOwnerView) { if (!tabOwnerView) {
tabsContainerElem.classList.remove('hide'); tabsContainerElem.classList.remove('hide');
@ -137,18 +142,18 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
if (tabOwnerView !== view) { if (tabOwnerView !== view) {
var index = 0; let index = 0;
var indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"'); const indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"');
var tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) { const tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) {
var tabClass = 'emby-tab-button'; let tabClass = 'emby-tab-button';
if (t.enabled === false) { if (t.enabled === false) {
tabClass += ' hide'; tabClass += ' hide';
} }
var tabHtml; let tabHtml;
if (t.cssClass) { if (t.cssClass) {
tabClass += ' ' + t.cssClass; tabClass += ' ' + t.cssClass;
@ -177,16 +182,16 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
tabsElem.addEventListener('beforetabchange', function (e) { tabsElem.addEventListener('beforetabchange', function (e) {
var tabContainers = getTabContainersFn(); const tabContainers = getTabContainersFn();
if (e.detail.previousIndex != null) { if (e.detail.previousIndex != null) {
var previousPanel = tabContainers[e.detail.previousIndex]; const previousPanel = tabContainers[e.detail.previousIndex];
if (previousPanel) { if (previousPanel) {
previousPanel.classList.remove('is-active'); previousPanel.classList.remove('is-active');
} }
} }
var newPanel = tabContainers[e.detail.selectedTabIndex]; const newPanel = tabContainers[e.detail.selectedTabIndex];
//if (e.detail.previousIndex != null && e.detail.previousIndex != e.detail.selectedTabIndex) { //if (e.detail.previousIndex != null && e.detail.previousIndex != e.detail.selectedTabIndex) {
// if (newPanel.animate && (animateTabs || []).indexOf(e.detail.selectedTabIndex) != -1) { // if (newPanel.animate && (animateTabs || []).indexOf(e.detail.selectedTabIndex) != -1) {
@ -241,9 +246,9 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
}; };
} }
function selectedTabIndex(index) { export function selectedTabIndex(index) {
var tabsContainerElem = headerTabsContainer; const tabsContainerElem = headerTabsContainer;
if (!tabsElem) { if (!tabsElem) {
tabsElem = tabsContainerElem.querySelector('[is="emby-tabs"]'); tabsElem = tabsContainerElem.querySelector('[is="emby-tabs"]');
@ -256,13 +261,8 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
} }
} }
function getTabsElement() { export function getTabsElement() {
return document.querySelector('.tabs-viewmenubar'); return document.querySelector('.tabs-viewmenubar');
} }
return { /* eslint-enable indent */
setTabs: setTabs,
getTabsElement: getTabsElement,
selectedTabIndex: selectedTabIndex
};
});

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

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

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

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

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

@ -1,9 +1,18 @@
define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'material-icons', 'css!./mediainfo.css', 'programStyles', 'emby-button'], function (datetime, globalize, appRouter, itemHelper, indicators) { import datetime from 'datetime';
'use strict'; import globalize from 'globalize';
import appRouter from 'appRouter';
import itemHelper from 'itemHelper';
import indicators from 'indicators';
import 'material-icons';
import 'css!./mediainfo.css';
import 'programStyles';
import 'emby-button';
/* eslint-disable indent */
function getTimerIndicator(item) { function getTimerIndicator(item) {
var status; let status;
if (item.Type === 'SeriesTimer') { if (item.Type === 'SeriesTimer') {
return '<span class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></span>'; return '<span class="material-icons mediaInfoItem mediaInfoIconItem mediaInfoTimerIcon fiber_smart_record"></span>';
@ -30,11 +39,11 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
function getProgramInfoHtml(item, options) { function getProgramInfoHtml(item, options) {
var html = ''; let html = '';
var miscInfo = []; const miscInfo = [];
var text; let text;
var date; let date;
if (item.StartDate && options.programTime !== false) { if (item.StartDate && options.programTime !== false) {
@ -48,35 +57,35 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
text += datetime.toLocaleDateString(date, { weekday: 'short', month: 'short', day: 'numeric' }); text += datetime.toLocaleDateString(date, { weekday: 'short', month: 'short', day: 'numeric' });
} }
text += ' ' + datetime.getDisplayTime(date); text += ` ${datetime.getDisplayTime(date)}`;
if (item.EndDate) { if (item.EndDate) {
date = datetime.parseISO8601Date(item.EndDate); date = datetime.parseISO8601Date(item.EndDate);
text += ' - ' + datetime.getDisplayTime(date); text += ` - ${datetime.getDisplayTime(date)}`;
} }
miscInfo.push(text); miscInfo.push(text);
} catch (e) { } catch (e) {
console.error('error parsing date: ' + item.StartDate); console.error('error parsing date:', item.StartDate);
} }
} }
if (item.ChannelNumber) { if (item.ChannelNumber) {
miscInfo.push('CH ' + item.ChannelNumber); miscInfo.push(`CH ${item.ChannelNumber}`);
} }
if (item.ChannelName) { if (item.ChannelName) {
if (options.interactive && item.ChannelId) { if (options.interactive && item.ChannelId) {
miscInfo.push({ miscInfo.push({
html: '<a is="emby-linkbutton" class="button-flat mediaInfoItem" href="' + appRouter.getRouteUrl({ html: `<a is="emby-linkbutton" class="button-flat mediaInfoItem" href="${appRouter.getRouteUrl({
ServerId: item.ServerId, ServerId: item.ServerId,
Type: 'TvChannel', Type: 'TvChannel',
Name: item.ChannelName, Name: item.ChannelName,
Id: item.ChannelId Id: item.ChannelId
}) + '">' + item.ChannelName + '</a>' })}">${item.ChannelName}</a>`
}); });
} else { } else {
miscInfo.push(item.ChannelName); miscInfo.push(item.ChannelName);
@ -84,7 +93,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
if (options.timerIndicator !== false) { if (options.timerIndicator !== false) {
var timerHtml = getTimerIndicator(item); const timerHtml = getTimerIndicator(item);
if (timerHtml) { if (timerHtml) {
miscInfo.push({ miscInfo.push({
html: timerHtml html: timerHtml
@ -92,24 +101,24 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
} }
html += miscInfo.map(function (m) { html += miscInfo.map(m => {
return getMediaInfoItem(m); return getMediaInfoItem(m);
}).join(''); }).join('');
return html; return html;
} }
function getMediaInfoHtml(item, options) { export function getMediaInfoHtml(item, options) {
var html = ''; let html = '';
var miscInfo = []; const miscInfo = [];
options = options || {}; options = options || {};
var text; let text;
var date; let date;
var minutes; let minutes;
var count; let count;
var showFolderRuntime = item.Type === 'MusicAlbum' || item.MediaType === 'MusicArtist' || item.MediaType === 'Playlist' || item.MediaType === 'MusicGenre'; const showFolderRuntime = item.Type === 'MusicAlbum' || item.MediaType === 'MusicArtist' || item.MediaType === 'Playlist' || item.MediaType === 'MusicGenre';
if (showFolderRuntime) { if (showFolderRuntime) {
@ -143,7 +152,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
text = datetime.toLocaleDateString(date); text = datetime.toLocaleDateString(date);
miscInfo.push(text); miscInfo.push(text);
} catch (e) { } catch (e) {
console.error('error parsing date: ' + item.PremiereDate); console.error('error parsing date:', item.PremiereDate);
} }
} }
} }
@ -176,7 +185,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
miscInfo.push(text); miscInfo.push(text);
} }
} catch (e) { } catch (e) {
console.error('error parsing date: ' + item.StartDate); console.error('error parsing date:', item.StartDate);
} }
} }
@ -193,14 +202,14 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
try { try {
var endYear = datetime.parseISO8601Date(item.EndDate).getFullYear(); const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
if (endYear !== item.ProductionYear) { if (endYear !== item.ProductionYear) {
text += '-' + datetime.parseISO8601Date(item.EndDate).getFullYear(); text += `-${datetime.parseISO8601Date(item.EndDate).getFullYear()}`;
} }
} catch (e) { } catch (e) {
console.error('error parsing date: ' + item.EndDate); console.error('error parsing date:', item.EndDate);
} }
} }
@ -213,19 +222,19 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
if (options.programIndicator !== false) { if (options.programIndicator !== false) {
if (item.IsLive) { if (item.IsLive) {
miscInfo.push({ miscInfo.push({
html: '<div class="mediaInfoProgramAttribute mediaInfoItem liveTvProgram">' + globalize.translate('Live') + '</div>' html: `<div class="mediaInfoProgramAttribute mediaInfoItem liveTvProgram">${globalize.translate('Live')}</div>`
}); });
} else if (item.IsPremiere) { } else if (item.IsPremiere) {
miscInfo.push({ miscInfo.push({
html: '<div class="mediaInfoProgramAttribute mediaInfoItem premiereTvProgram">' + globalize.translate('Premiere') + '</div>' html: `<div class="mediaInfoProgramAttribute mediaInfoItem premiereTvProgram">${globalize.translate('Premiere')}</div>`
}); });
} else if (item.IsSeries && !item.IsRepeat) { } else if (item.IsSeries && !item.IsRepeat) {
miscInfo.push({ miscInfo.push({
html: '<div class="mediaInfoProgramAttribute mediaInfoItem newTvProgram">' + globalize.translate('AttributeNew') + '</div>' html: `<div class="mediaInfoProgramAttribute mediaInfoItem newTvProgram">${globalize.translate('AttributeNew')}</div>`
}); });
} else if (item.IsSeries && item.IsRepeat) { } else if (item.IsSeries && item.IsRepeat) {
miscInfo.push({ miscInfo.push({
html: '<div class="mediaInfoProgramAttribute mediaInfoItem repeatTvProgram">' + globalize.translate('Repeat') + '</div>' html: `<div class="mediaInfoProgramAttribute mediaInfoItem repeatTvProgram">${globalize.translate('Repeat')}</div>`
}); });
} }
} }
@ -248,7 +257,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
text = globalize.translate('OriginalAirDateValue', datetime.toLocaleDateString(date)); text = globalize.translate('OriginalAirDateValue', datetime.toLocaleDateString(date));
miscInfo.push(text); miscInfo.push(text);
} catch (e) { } catch (e) {
console.error('error parsing date: ' + item.PremiereDate); console.error('error parsing date:', item.PremiereDate);
} }
} else if (item.ProductionYear) { } else if (item.ProductionYear) {
miscInfo.push(item.ProductionYear); miscInfo.push(item.ProductionYear);
@ -267,7 +276,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
text = datetime.parseISO8601Date(item.PremiereDate).getFullYear(); text = datetime.parseISO8601Date(item.PremiereDate).getFullYear();
miscInfo.push(text); miscInfo.push(text);
} catch (e) { } catch (e) {
console.error('error parsing date: ' + item.PremiereDate); console.error('error parsing date:', item.PremiereDate);
} }
} }
} }
@ -284,7 +293,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
minutes = minutes || 1; minutes = minutes || 1;
miscInfo.push(Math.round(minutes) + ' mins'); miscInfo.push(`${Math.round(minutes)} mins`);
} }
} }
@ -300,14 +309,14 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
} }
if (item.MediaType === 'Photo' && item.Width && item.Height) { if (item.MediaType === 'Photo' && item.Width && item.Height) {
miscInfo.push(item.Width + 'x' + item.Height); miscInfo.push(`${item.Width}x${item.Height}`);
} }
if (options.container !== false && item.Type === 'Audio' && item.Container) { if (options.container !== false && item.Type === 'Audio' && item.Container) {
miscInfo.push(item.Container); miscInfo.push(item.Container);
} }
html += miscInfo.map(function (m) { html += miscInfo.map(m => {
return getMediaInfoItem(m); return getMediaInfoItem(m);
}).join(''); }).join('');
@ -320,15 +329,15 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
if (item.CriticRating && options.criticRating !== false) { if (item.CriticRating && options.criticRating !== false) {
if (item.CriticRating >= 60) { if (item.CriticRating >= 60) {
html += '<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingFresh">' + item.CriticRating + '</div>'; html += `<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingFresh">${item.CriticRating}</div>`;
} else { } else {
html += '<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingRotten">' + item.CriticRating + '</div>'; html += `<div class="mediaInfoItem mediaInfoCriticRating mediaInfoCriticRatingRotten">${item.CriticRating}</div>`;
} }
} }
if (options.endsAt !== false) { if (options.endsAt !== false) {
var endsAt = getEndsAt(item); const endsAt = getEndsAt(item);
if (endsAt) { if (endsAt) {
html += getMediaInfoItem(endsAt, 'endsAt'); html += getMediaInfoItem(endsAt, 'endsAt');
} }
@ -339,15 +348,15 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
return html; return html;
} }
function getEndsAt(item) { export function getEndsAt(item) {
if (item.MediaType === 'Video' && item.RunTimeTicks) { if (item.MediaType === 'Video' && item.RunTimeTicks) {
if (!item.StartDate) { if (!item.StartDate) {
var endDate = new Date().getTime() + (item.RunTimeTicks / 10000); let endDate = new Date().getTime() + (item.RunTimeTicks / 10000);
endDate = new Date(endDate); endDate = new Date(endDate);
var displayTime = datetime.getDisplayTime(endDate); const displayTime = datetime.getDisplayTime(endDate);
return globalize.translate('EndsAtValue', displayTime); return globalize.translate('EndsAtValue', displayTime);
} }
} }
@ -355,12 +364,12 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
return null; return null;
} }
function getEndsAtFromPosition(runtimeTicks, positionTicks, includeText) { export function getEndsAtFromPosition(runtimeTicks, positionTicks, includeText) {
var endDate = new Date().getTime() + ((runtimeTicks - (positionTicks || 0)) / 10000); let endDate = new Date().getTime() + ((runtimeTicks - (positionTicks || 0)) / 10000);
endDate = new Date(endDate); endDate = new Date(endDate);
var displayTime = datetime.getDisplayTime(endDate); const displayTime = datetime.getDisplayTime(endDate);
if (includeText === false) { if (includeText === false) {
return displayTime; return displayTime;
@ -370,8 +379,8 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
function getMediaInfoItem(m, cssClass) { function getMediaInfoItem(m, cssClass) {
cssClass = cssClass ? (cssClass + ' mediaInfoItem') : 'mediaInfoItem'; cssClass = cssClass ? (`${cssClass} mediaInfoItem`) : 'mediaInfoItem';
var mediaInfoText = m; let mediaInfoText = m;
if (typeof (m) !== 'string' && typeof (m) !== 'number') { if (typeof (m) !== 'string' && typeof (m) !== 'number') {
@ -379,13 +388,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
return m.html; return m.html;
} }
mediaInfoText = m.text; mediaInfoText = m.text;
cssClass += ' ' + m.cssClass; cssClass += ` ${m.cssClass}`;
} }
return '<div class="' + cssClass + '">' + mediaInfoText + '</div>'; return `<div class="${cssClass}">${mediaInfoText}</div>`;
} }
function getStarIconsHtml(item) { function getStarIconsHtml(item) {
var html = ''; let html = '';
if (item.CommunityRating) { if (item.CommunityRating) {
html += '<div class="starRatingContainer mediaInfoItem">'; html += '<div class="starRatingContainer mediaInfoItem">';
@ -400,7 +409,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
function dynamicEndTime(elem, item) { function dynamicEndTime(elem, item) {
var interval = setInterval(function () { const interval = setInterval(() => {
if (!document.body.contains(elem)) { if (!document.body.contains(elem)) {
@ -413,15 +422,15 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
}, 60000); }, 60000);
} }
function fillPrimaryMediaInfo(elem, item, options) { export function fillPrimaryMediaInfo(elem, item, options) {
var html = getPrimaryMediaInfoHtml(item, options); const html = getPrimaryMediaInfoHtml(item, options);
elem.innerHTML = html; elem.innerHTML = html;
afterFill(elem, item, options); afterFill(elem, item, options);
} }
function fillSecondaryMediaInfo(elem, item, options) { export function fillSecondaryMediaInfo(elem, item, options) {
var html = getSecondaryMediaInfoHtml(item, options); const html = getSecondaryMediaInfoHtml(item, options);
elem.innerHTML = html; elem.innerHTML = html;
afterFill(elem, item, options); afterFill(elem, item, options);
@ -430,13 +439,13 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
function afterFill(elem, item, options) { function afterFill(elem, item, options) {
if (options.endsAt !== false) { if (options.endsAt !== false) {
var endsAtElem = elem.querySelector('.endsAt'); const endsAtElem = elem.querySelector('.endsAt');
if (endsAtElem) { if (endsAtElem) {
dynamicEndTime(endsAtElem, item); dynamicEndTime(endsAtElem, item);
} }
} }
var lnkChannel = elem.querySelector('.lnkChannel'); const lnkChannel = elem.querySelector('.lnkChannel');
if (lnkChannel) { if (lnkChannel) {
lnkChannel.addEventListener('click', onChannelLinkClick); lnkChannel.addEventListener('click', onChannelLinkClick);
} }
@ -444,8 +453,8 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
function onChannelLinkClick(e) { function onChannelLinkClick(e) {
var channelId = this.getAttribute('data-id'); const channelId = this.getAttribute('data-id');
var serverId = this.getAttribute('data-serverid'); const serverId = this.getAttribute('data-serverid');
appRouter.showItem(channelId, serverId); appRouter.showItem(channelId, serverId);
@ -453,7 +462,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
return false; return false;
} }
function getPrimaryMediaInfoHtml(item, options) { export function getPrimaryMediaInfoHtml(item, options) {
options = options || {}; options = options || {};
if (options.interactive == null) { if (options.interactive == null) {
@ -463,7 +472,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
return getMediaInfoHtml(item, options); return getMediaInfoHtml(item, options);
} }
function getSecondaryMediaInfoHtml(item, options) { export function getSecondaryMediaInfoHtml(item, options) {
options = options || {}; options = options || {};
if (options.interactive == null) { if (options.interactive == null) {
@ -476,10 +485,10 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
return ''; return '';
} }
function getResolutionText(i) { export function getResolutionText(i) {
var width = i.Width; const width = i.Width;
var height = i.Height; const height = i.Height;
if (width && height) { if (width && height) {
@ -522,28 +531,28 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
return null; return null;
} }
var mediaSource = item.MediaSources[0]; const mediaSource = item.MediaSources[0];
if (!mediaSource) { if (!mediaSource) {
return null; return null;
} }
return (mediaSource.MediaStreams || []).filter(function (i) { return (mediaSource.MediaStreams || []).filter(i => {
return i.Type === 'Audio' && (i.Index === mediaSource.DefaultAudioStreamIndex || mediaSource.DefaultAudioStreamIndex == null); return i.Type === 'Audio' && (i.Index === mediaSource.DefaultAudioStreamIndex || mediaSource.DefaultAudioStreamIndex == null);
})[0]; })[0];
} }
function getMediaInfoStats(item, options) { export function getMediaInfoStats(item, options) {
options = options || {}; options = options || {};
var list = []; const list = [];
var mediaSource = (item.MediaSources || [])[0] || {}; const mediaSource = (item.MediaSources || [])[0] || {};
var videoStream = (mediaSource.MediaStreams || []).filter(function (i) { const videoStream = (mediaSource.MediaStreams || []).filter(i => {
return i.Type === 'Video'; return i.Type === 'Video';
})[0] || {}; })[0] || {};
var audioStream = getAudioStreamForDisplay(item) || {}; const audioStream = getAudioStreamForDisplay(item) || {};
if (item.VideoType === 'Dvd') { if (item.VideoType === 'Dvd') {
list.push({ list.push({
@ -563,7 +572,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
// html += '<div class="mediaInfoIcon mediaInfoText">' + mediaSource.Container + '</div>'; // html += '<div class="mediaInfoIcon mediaInfoText">' + mediaSource.Container + '</div>';
//} //}
var resolutionText = getResolutionText(videoStream); const resolutionText = getResolutionText(videoStream);
if (resolutionText) { if (resolutionText) {
list.push({ list.push({
type: 'mediainfo', type: 'mediainfo',
@ -578,8 +587,8 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
}); });
} }
var channels = audioStream.Channels; const channels = audioStream.Channels;
var channelText; let channelText;
if (channels === 8) { if (channels === 8) {
@ -605,7 +614,7 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
}); });
} }
var audioCodec = (audioStream.Codec || '').toLowerCase(); const audioCodec = (audioStream.Codec || '').toLowerCase();
if ((audioCodec === 'dca' || audioCodec === 'dts') && audioStream.Profile) { if ((audioCodec === 'dca' || audioCodec === 'dts') && audioStream.Profile) {
list.push({ list.push({
@ -621,20 +630,21 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
if (item.DateCreated && itemHelper.enableDateAddedDisplay(item)) { if (item.DateCreated && itemHelper.enableDateAddedDisplay(item)) {
var dateCreated = datetime.parseISO8601Date(item.DateCreated); const dateCreated = datetime.parseISO8601Date(item.DateCreated);
list.push({ list.push({
type: 'added', type: 'added',
text: globalize.translate('AddedOnValue', datetime.toLocaleDateString(dateCreated) + ' ' + datetime.getDisplayTime(dateCreated)) text: globalize.translate('AddedOnValue', `${datetime.toLocaleDateString(dateCreated)} ${datetime.getDisplayTime(dateCreated)}`)
}); });
} }
return list; return list;
} }
return { /* eslint-enable indent */
export default {
getMediaInfoHtml: getPrimaryMediaInfoHtml, getMediaInfoHtml: getPrimaryMediaInfoHtml,
fill: fillPrimaryMediaInfo,
getEndsAt: getEndsAt, getEndsAt: getEndsAt,
getEndsAtFromPosition: getEndsAtFromPosition, getEndsAtFromPosition: getEndsAtFromPosition,
getPrimaryMediaInfoHtml: getPrimaryMediaInfoHtml, getPrimaryMediaInfoHtml: getPrimaryMediaInfoHtml,
@ -644,4 +654,3 @@ define(['datetime', 'globalize', 'appRouter', 'itemHelper', 'indicators', 'mater
getMediaInfoStats: getMediaInfoStats, getMediaInfoStats: getMediaInfoStats,
getResolutionText: getResolutionText getResolutionText: getResolutionText
}; };
});

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

@ -1,9 +1,30 @@
define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loading', 'focusManager', 'connectionManager', 'globalize', 'require', 'shell', 'emby-checkbox', 'emby-input', 'emby-select', 'listViewStyle', 'emby-textarea', 'emby-button', 'paper-icon-button-light', 'css!./../formdialog', 'clearButtonStyle', 'flexStyles'], function (itemHelper, dom, layoutManager, dialogHelper, datetime, loading, focusManager, connectionManager, globalize, require, shell) { import itemHelper from 'itemHelper';
'use strict'; import dom from 'dom';
import layoutManager from 'layoutManager';
import dialogHelper from 'dialogHelper';
import datetime from 'datetime';
import loading from 'loading';
import focusManager from 'focusManager';
import connectionManager from 'connectionManager';
import globalize from 'globalize';
import require from 'require';
import shell from 'shell';
import 'emby-checkbox';
import 'emby-input';
import 'emby-select';
import 'listViewStyle';
import 'emby-textarea';
import 'emby-button';
import 'paper-icon-button-light';
import 'css!./../formdialog';
import 'clearButtonStyle';
import 'flexStyles';
var currentContext; /* eslint-disable indent */
var metadataEditorInfo;
var currentItem; let currentContext;
let metadataEditorInfo;
let currentItem;
function isDialog() { function isDialog() {
return currentContext.classList.contains('dialog'); return currentContext.classList.contains('dialog');
@ -28,11 +49,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
closeDialog(true); closeDialog(true);
} }
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.updateItem(item).then(function () { apiClient.updateItem(item).then(function () {
var newContentType = form.querySelector('#selectContentType').value || ''; const newContentType = form.querySelector('#selectContentType').value || '';
if ((metadataEditorInfo.ContentType || '') !== newContentType) { if ((metadataEditorInfo.ContentType || '') !== newContentType) {
@ -56,7 +77,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function getSelectedAirDays(form) { function getSelectedAirDays(form) {
var checkedItems = form.querySelectorAll('.chkAirDay:checked') || []; const checkedItems = form.querySelectorAll('.chkAirDay:checked') || [];
return Array.prototype.map.call(checkedItems, function (c) { return Array.prototype.map.call(checkedItems, function (c) {
return c.getAttribute('data-day'); return c.getAttribute('data-day');
}); });
@ -92,7 +113,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
function getDateValue(form, element, property) { function getDateValue(form, element, property) {
var val = form.querySelector(element).value; let val = form.querySelector(element).value;
if (!val) { if (!val) {
return null; return null;
@ -100,14 +121,14 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
if (currentItem[property]) { if (currentItem[property]) {
var date = datetime.parseISO8601Date(currentItem[property], true); const date = datetime.parseISO8601Date(currentItem[property], true);
var parts = date.toISOString().split('T'); const parts = date.toISOString().split('T');
// If the date is the same, preserve the time // If the date is the same, preserve the time
if (parts[0].indexOf(val) === 0) { if (parts[0].indexOf(val) === 0) {
var iso = parts[1]; const iso = parts[1];
val += 'T' + iso; val += 'T' + iso;
} }
@ -120,9 +141,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
loading.show(); loading.show();
var form = this; const form = this;
var item = { const item = {
Id: currentItem.Id, Id: currentItem.Id,
Name: form.querySelector('#txtName').value, Name: form.querySelector('#txtName').value,
OriginalTitle: form.querySelector('#txtOriginalName').value, OriginalTitle: form.querySelector('#txtOriginalName').value,
@ -168,9 +189,9 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
item.ProviderIds = Object.assign({}, currentItem.ProviderIds); item.ProviderIds = Object.assign({}, currentItem.ProviderIds);
var idElements = form.querySelectorAll('.txtExternalId'); const idElements = form.querySelectorAll('.txtExternalId');
Array.prototype.map.call(idElements, function (idElem) { Array.prototype.map.call(idElements, function (idElem) {
var providerKey = idElem.getAttribute('data-providerkey'); const providerKey = idElem.getAttribute('data-providerkey');
item.ProviderIds[providerKey] = idElem.value; item.ProviderIds[providerKey] = idElem.value;
}); });
@ -179,7 +200,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
if (currentItem.Type === 'Person') { if (currentItem.Type === 'Person') {
var placeOfBirth = form.querySelector('#txtPlaceOfBirth').value; const placeOfBirth = form.querySelector('#txtPlaceOfBirth').value;
item.ProductionLocations = placeOfBirth ? [placeOfBirth] : []; item.ProductionLocations = placeOfBirth ? [placeOfBirth] : [];
} }
@ -187,11 +208,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
if (currentItem.Type === 'Series') { if (currentItem.Type === 'Series') {
// 600000000 // 600000000
var seriesRuntime = form.querySelector('#txtSeriesRuntime').value; const seriesRuntime = form.querySelector('#txtSeriesRuntime').value;
item.RunTimeTicks = seriesRuntime ? (seriesRuntime * 600000000) : null; item.RunTimeTicks = seriesRuntime ? (seriesRuntime * 600000000) : null;
} }
var tagline = form.querySelector('#txtTagline').value; const tagline = form.querySelector('#txtTagline').value;
item.Taglines = tagline ? [tagline] : []; item.Taglines = tagline ? [tagline] : [];
submitUpdatedItem(form, item); submitUpdatedItem(form, item);
@ -210,13 +231,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function addElementToList(source, sortCallback) { function addElementToList(source, sortCallback) {
require(['prompt'], function (prompt) { import('prompt').then(({default: prompt}) => {
prompt({ prompt({
label: 'Value:' label: 'Value:'
}).then(function (text) { }).then(function (text) {
var list = dom.parentWithClass(source, 'editableListviewContainer').querySelector('.paperList'); const list = dom.parentWithClass(source, 'editableListviewContainer').querySelector('.paperList');
var items = getListValues(list); const items = getListValues(list);
items.push(text); items.push(text);
populateListView(list, items, sortCallback); populateListView(list, items, sortCallback);
}); });
@ -224,7 +244,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function removeElementFromList(source) { function removeElementFromList(source) {
var el = dom.parentWithClass(source, 'listItem'); const el = dom.parentWithClass(source, 'listItem');
el.parentNode.removeChild(el); el.parentNode.removeChild(el);
} }
@ -234,7 +254,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
personEditor.show(person).then(function (updatedPerson) { personEditor.show(person).then(function (updatedPerson) {
var isNew = index === -1; const isNew = index === -1;
if (isNew) { if (isNew) {
currentItem.People.push(updatedPerson); currentItem.People.push(updatedPerson);
@ -245,15 +265,52 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
}); });
} }
function afterDeleted(context, item) {
var parentId = item.ParentId || item.SeasonId || item.SeriesId;
if (parentId) {
reload(context, parentId, item.ServerId);
} else {
require(['appRouter'], function (appRouter) {
appRouter.goHome();
});
}
}
function showMoreMenu(context, button, user) {
require(['itemContextMenu'], function (itemContextMenu) {
var item = currentItem;
itemContextMenu.show({
item: item,
positionTo: button,
edit: false,
editImages: true,
editSubtitles: true,
sync: false,
share: false,
play: false,
queue: false,
user: user
}).then(function (result) {
if (result.deleted) {
afterDeleted(context, item);
} else if (result.updated) {
reload(context, item.Id, item.ServerId);
}
});
});
}
function onEditorClick(e) { function onEditorClick(e) {
var btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList'); const btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList');
if (btnRemoveFromEditorList) { if (btnRemoveFromEditorList) {
removeElementFromList(btnRemoveFromEditorList); removeElementFromList(btnRemoveFromEditorList);
return; return;
} }
var btnAddTextItem = dom.parentWithClass(e.target, 'btnAddTextItem'); const btnAddTextItem = dom.parentWithClass(e.target, 'btnAddTextItem');
if (btnAddTextItem) { if (btnAddTextItem) {
addElementToList(btnAddTextItem); addElementToList(btnAddTextItem);
} }
@ -264,19 +321,18 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function bindAll(elems, eventName, fn) { function bindAll(elems, eventName, fn) {
for (var i = 0, length = elems.length; i < length; i++) { for (let i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener(eventName, fn); elems[i].addEventListener(eventName, fn);
} }
} }
function init(context, apiClient) { function init(context, apiClient) {
context.querySelector('.externalIds').addEventListener('click', function (e) { context.querySelector('.externalIds').addEventListener('click', function (e) {
var btnOpenExternalId = dom.parentWithClass(e.target, 'btnOpenExternalId'); const btnOpenExternalId = dom.parentWithClass(e.target, 'btnOpenExternalId');
if (btnOpenExternalId) { if (btnOpenExternalId) {
var field = context.querySelector('#' + btnOpenExternalId.getAttribute('data-fieldid')); const field = context.querySelector('#' + btnOpenExternalId.getAttribute('data-fieldid'));
var formatString = field.getAttribute('data-formatstring'); const formatString = field.getAttribute('data-formatstring');
if (field.value) { if (field.value) {
shell.openUrl(formatString.replace('{0}', field.value)); shell.openUrl(formatString.replace('{0}', field.value));
@ -294,13 +350,17 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
closeDialog(false); closeDialog(false);
}); });
context.querySelector('.btnHeaderSave').addEventListener('click', function (e) { context.querySelector('.btnMore').addEventListener('click', function (e) {
getApiClient().getCurrentUser().then(function (user) {
showMoreMenu(context, e.target, user);
});
});
context.querySelector('.btnHeaderSave').addEventListener('click', function (e) {
context.querySelector('.btnSave').click(); context.querySelector('.btnSave').click();
}); });
context.querySelector('#chkLockData').addEventListener('click', function (e) { context.querySelector('#chkLockData').addEventListener('click', function (e) {
if (!e.target.checked) { if (!e.target.checked) {
showElement('.providerSettingsContainer'); showElement('.providerSettingsContainer');
} else { } else {
@ -311,7 +371,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
context.removeEventListener('click', onEditorClick); context.removeEventListener('click', onEditorClick);
context.addEventListener('click', onEditorClick); context.addEventListener('click', onEditorClick);
var form = context.querySelector('form'); const form = context.querySelector('form');
form.removeEventListener('submit', onSubmit); form.removeEventListener('submit', onSubmit);
form.addEventListener('submit', onSubmit); form.addEventListener('submit', onSubmit);
@ -322,15 +382,15 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
context.querySelector('#peopleList').addEventListener('click', function (e) { context.querySelector('#peopleList').addEventListener('click', function (e) {
var index; let index;
var btnDeletePerson = dom.parentWithClass(e.target, 'btnDeletePerson'); const btnDeletePerson = dom.parentWithClass(e.target, 'btnDeletePerson');
if (btnDeletePerson) { if (btnDeletePerson) {
index = parseInt(btnDeletePerson.getAttribute('data-index')); index = parseInt(btnDeletePerson.getAttribute('data-index'));
currentItem.People.splice(index, 1); currentItem.People.splice(index, 1);
populatePeople(context, currentItem.People); populatePeople(context, currentItem.People);
} }
var btnEditPerson = dom.parentWithClass(e.target, 'btnEditPerson'); const btnEditPerson = dom.parentWithClass(e.target, 'btnEditPerson');
if (btnEditPerson) { if (btnEditPerson) {
index = parseInt(btnEditPerson.getAttribute('data-index')); index = parseInt(btnEditPerson.getAttribute('data-index'));
editPerson(context, currentItem.People[index], index); editPerson(context, currentItem.People[index], index);
@ -340,7 +400,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
function getItem(itemId, serverId) { function getItem(itemId, serverId) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
if (itemId) { if (itemId) {
return apiClient.getItem(apiClient.getCurrentUserId(), itemId); return apiClient.getItem(apiClient.getCurrentUserId(), itemId);
@ -351,7 +411,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
function getEditorConfig(itemId, serverId) { function getEditorConfig(itemId, serverId) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
if (itemId) { if (itemId) {
return apiClient.getJSON(apiClient.getUrl('Items/' + itemId + '/MetadataEditor')); return apiClient.getJSON(apiClient.getUrl('Items/' + itemId + '/MetadataEditor'));
@ -362,13 +422,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
function populateCountries(select, allCountries) { function populateCountries(select, allCountries) {
var html = ''; let html = '';
html += "<option value=''></option>"; html += "<option value=''></option>";
for (var i = 0, length = allCountries.length; i < length; i++) { for (let i = 0, length = allCountries.length; i < length; i++) {
var culture = allCountries[i]; const culture = allCountries[i];
html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + '</option>'; html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + '</option>';
} }
@ -378,13 +438,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
function populateLanguages(select, languages) { function populateLanguages(select, languages) {
var html = ''; let html = '';
html += "<option value=''></option>"; html += "<option value=''></option>";
for (var i = 0, length = languages.length; i < length; i++) { for (let i = 0, length = languages.length; i < length; i++) {
var culture = languages[i]; const culture = languages[i];
html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + '</option>'; html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
} }
@ -400,41 +460,41 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
showElement('#fldContentType', context); showElement('#fldContentType', context);
} }
var html = metadataInfo.ContentTypeOptions.map(function (i) { const html = metadataInfo.ContentTypeOptions.map(function (i) {
return '<option value="' + i.Value + '">' + i.Name + '</option>'; return '<option value="' + i.Value + '">' + i.Name + '</option>';
}).join(''); }).join('');
var selectEl = context.querySelector('#selectContentType'); const selectEl = context.querySelector('#selectContentType');
selectEl.innerHTML = html; selectEl.innerHTML = html;
selectEl.value = metadataInfo.ContentType || ''; selectEl.value = metadataInfo.ContentType || '';
} }
function loadExternalIds(context, item, externalIds) { function loadExternalIds(context, item, externalIds) {
var html = ''; let html = '';
var providerIds = item.ProviderIds || {}; const providerIds = item.ProviderIds || {};
for (var i = 0, length = externalIds.length; i < length; i++) { for (let i = 0, length = externalIds.length; i < length; i++) {
var idInfo = externalIds[i]; const idInfo = externalIds[i];
var id = 'txt1' + idInfo.Key; const id = 'txt1' + idInfo.Key;
var formatString = idInfo.UrlFormatString || ''; const formatString = idInfo.UrlFormatString || '';
var fullName = idInfo.Name; let fullName = idInfo.Name;
if (idInfo.Type) { if (idInfo.Type) {
fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type); fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type);
} }
var labelText = globalize.translate('LabelDynamicExternalId', fullName); const labelText = globalize.translate('LabelDynamicExternalId', fullName);
html += '<div class="inputContainer">'; html += '<div class="inputContainer">';
html += '<div class="flex align-items-center">'; html += '<div class="flex align-items-center">';
var value = providerIds[idInfo.Key] || ''; const value = providerIds[idInfo.Key] || '';
html += '<div class="flex-grow">'; html += '<div class="flex-grow">';
html += '<input is="emby-input" class="txtExternalId" value="' + value + '" data-providerkey="' + idInfo.Key + '" data-formatstring="' + formatString + '" id="' + id + '" label="' + labelText + '"/>'; html += '<input is="emby-input" class="txtExternalId" value="' + value + '" data-providerkey="' + idInfo.Key + '" data-formatstring="' + formatString + '" id="' + id + '" label="' + labelText + '"/>';
@ -448,7 +508,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
html += '</div>'; html += '</div>';
} }
var elem = context.querySelector('.externalIds', context); const elem = context.querySelector('.externalIds', context);
elem.innerHTML = html; elem.innerHTML = html;
if (externalIds.length) { if (externalIds.length) {
@ -465,7 +525,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
context = context || document; context = context || document;
if (typeof selector === 'string') { if (typeof selector === 'string') {
var elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)]; const elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
Array.prototype.forEach.call(elements, function (el) { Array.prototype.forEach.call(elements, function (el) {
if (el) { if (el) {
@ -484,7 +544,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
context = context || document; context = context || document;
if (typeof selector === 'string') { if (typeof selector === 'string') {
var elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)]; const elements = multiple ? context.querySelectorAll(selector) : [context.querySelector(selector)];
Array.prototype.forEach.call(elements, function (el) { Array.prototype.forEach.call(elements, function (el) {
if (el) { if (el) {
@ -686,7 +746,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
function fillItemInfo(context, item, parentalRatingOptions) { function fillItemInfo(context, item, parentalRatingOptions) {
var select = context.querySelector('#selectOfficialRating'); let select = context.querySelector('#selectOfficialRating');
populateRatings(parentalRatingOptions, select, item.OfficialRating); populateRatings(parentalRatingOptions, select, item.OfficialRating);
@ -698,7 +758,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
select.value = item.CustomRating || ''; select.value = item.CustomRating || '';
var selectStatus = context.querySelector('#selectStatus'); const selectStatus = context.querySelector('#selectStatus');
populateStatus(selectStatus); populateStatus(selectStatus);
selectStatus.value = item.Status || ''; selectStatus.value = item.Status || '';
@ -717,8 +777,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
populateListView(context.querySelector('#listTags'), item.Tags); populateListView(context.querySelector('#listTags'), item.Tags);
var lockData = (item.LockData || false); const lockData = (item.LockData || false);
var chkLockData = context.querySelector('#chkLockData'); const chkLockData = context.querySelector('#chkLockData');
chkLockData.checked = lockData; chkLockData.checked = lockData;
if (chkLockData.checked) { if (chkLockData.checked) {
hideElement('.providerSettingsContainer', context); hideElement('.providerSettingsContainer', context);
@ -756,7 +816,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
return a.Name; return a.Name;
}).join(';'); }).join(';');
var date; let date;
if (item.DateCreated) { if (item.DateCreated) {
try { try {
@ -798,7 +858,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
context.querySelector('#txtAirTime').value = item.AirTime || ''; context.querySelector('#txtAirTime').value = item.AirTime || '';
var placeofBirth = item.ProductionLocations && item.ProductionLocations.length ? item.ProductionLocations[0] : ''; const placeofBirth = item.ProductionLocations && item.ProductionLocations.length ? item.ProductionLocations[0] : '';
context.querySelector('#txtPlaceOfBirth').value = placeofBirth; context.querySelector('#txtPlaceOfBirth').value = placeofBirth;
context.querySelector('#txtOriginalAspectRatio').value = item.AspectRatio || ''; context.querySelector('#txtOriginalAspectRatio').value = item.AspectRatio || '';
@ -808,7 +868,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
if (item.RunTimeTicks) { if (item.RunTimeTicks) {
var minutes = item.RunTimeTicks / 600000000; const minutes = item.RunTimeTicks / 600000000;
context.querySelector('#txtSeriesRuntime').value = Math.round(minutes); context.querySelector('#txtSeriesRuntime').value = Math.round(minutes);
} else { } else {
@ -818,18 +878,16 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
function populateRatings(allParentalRatings, select, currentValue) { function populateRatings(allParentalRatings, select, currentValue) {
var html = ''; let html = '';
html += "<option value=''></option>"; html += "<option value=''></option>";
var ratings = []; const ratings = [];
var i; let rating;
var length;
var rating;
var currentValueFound = false; let currentValueFound = false;
for (i = 0, length = allParentalRatings.length; i < length; i++) { for (let i = 0, length = allParentalRatings.length; i < length; i++) {
rating = allParentalRatings[i]; rating = allParentalRatings[i];
@ -844,7 +902,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
ratings.push({ Name: currentValue, Value: currentValue }); ratings.push({ Name: currentValue, Value: currentValue });
} }
for (i = 0, length = ratings.length; i < length; i++) { for (let i = 0, length = ratings.length; i < length; i++) {
rating = ratings[i]; rating = ratings[i];
@ -855,7 +913,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function populateStatus(select) { function populateStatus(select) {
var html = ''; let html = '';
html += "<option value=''></option>"; html += "<option value=''></option>";
html += "<option value='Continuing'>" + globalize.translate('Continuing') + '</option>'; html += "<option value='Continuing'>" + globalize.translate('Continuing') + '</option>';
@ -873,8 +931,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} else { } else {
items = sortCallback(items); items = sortCallback(items);
} }
var html = ''; let html = '';
for (var i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
html += '<div class="listItem">'; html += '<div class="listItem">';
html += '<span class="material-icons listItemIcon live_tv" style="background-color:#333;"></span>'; html += '<span class="material-icons listItemIcon live_tv" style="background-color:#333;"></span>';
@ -897,14 +955,14 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
function populatePeople(context, people) { function populatePeople(context, people) {
var lastType = ''; let lastType = '';
var html = ''; let html = '';
var elem = context.querySelector('#peopleList'); const elem = context.querySelector('#peopleList');
for (var i = 0, length = people.length; i < length; i++) { for (let i = 0, length = people.length; i < length; i++) {
var person = people[i]; const person = people[i];
html += '<div class="listItem">'; html += '<div class="listItem">';
@ -934,13 +992,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
function getLockedFieldsHtml(fields, currentFields) { function getLockedFieldsHtml(fields, currentFields) {
var html = ''; let html = '';
for (var i = 0; i < fields.length; i++) { for (let i = 0; i < fields.length; i++) {
var field = fields[i]; const field = fields[i];
var name = field.name; const name = field.name;
var value = field.value || field.name; const value = field.value || field.name;
var checkedHtml = currentFields.indexOf(value) === -1 ? ' checked' : ''; const checkedHtml = currentFields.indexOf(value) === -1 ? ' checked' : '';
html += '<label>'; html += '<label>';
html += '<input type="checkbox" is="emby-checkbox" class="selectLockedField" data-value="' + value + '"' + checkedHtml + '/>'; html += '<input type="checkbox" is="emby-checkbox" class="selectLockedField" data-value="' + value + '"' + checkedHtml + '/>';
html += '<span>' + name + '</span>'; html += '<span>' + name + '</span>';
@ -950,10 +1008,10 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function fillMetadataSettings(context, item, lockedFields) { function fillMetadataSettings(context, item, lockedFields) {
var container = context.querySelector('.providerSettingsContainer'); const container = context.querySelector('.providerSettingsContainer');
lockedFields = lockedFields || []; lockedFields = lockedFields || [];
var lockedFieldsList = [ const lockedFieldsList = [
{ name: globalize.translate('Name'), value: 'Name' }, { name: globalize.translate('Name'), value: 'Name' },
{ name: globalize.translate('Overview'), value: 'Overview' }, { name: globalize.translate('Overview'), value: 'Overview' },
{ name: globalize.translate('Genres'), value: 'Genres' }, { name: globalize.translate('Genres'), value: 'Genres' },
@ -974,7 +1032,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
lockedFieldsList.push({ name: globalize.translate('Studios'), value: 'Studios' }); lockedFieldsList.push({ name: globalize.translate('Studios'), value: 'Studios' });
lockedFieldsList.push({ name: globalize.translate('Tags'), value: 'Tags' }); lockedFieldsList.push({ name: globalize.translate('Tags'), value: 'Tags' });
var html = ''; let html = '';
html += '<h2>' + globalize.translate('HeaderEnabledFields') + '</h2>'; html += '<h2>' + globalize.translate('HeaderEnabledFields') + '</h2>';
html += '<p>' + globalize.translate('HeaderEnabledFieldsHelp') + '</p>'; html += '<p>' + globalize.translate('HeaderEnabledFieldsHelp') + '</p>';
@ -988,13 +1046,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
Promise.all([getItem(itemId, serverId), getEditorConfig(itemId, serverId)]).then(function (responses) { Promise.all([getItem(itemId, serverId), getEditorConfig(itemId, serverId)]).then(function (responses) {
var item = responses[0]; const item = responses[0];
metadataEditorInfo = responses[1]; metadataEditorInfo = responses[1];
currentItem = item; currentItem = item;
var languages = metadataEditorInfo.Cultures; const languages = metadataEditorInfo.Cultures;
var countries = metadataEditorInfo.Countries; const countries = metadataEditorInfo.Countries;
renderContentTypeOptions(context, metadataEditorInfo); renderContentTypeOptions(context, metadataEditorInfo);
@ -1017,8 +1075,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(({default: scrollHelper}) => {
var fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
@ -1026,9 +1084,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
function show(itemId, serverId, resolve, reject) { function show(itemId, serverId, resolve, reject) {
loading.show(); loading.show();
require(['text!./metadataEditor.template.html'], function (template) { import('text!./metadataEditor.template.html').then(({default: template}) => {
const dialogOptions = {
var dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -1039,13 +1096,13 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
var html = ''; let html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -1071,7 +1128,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
}); });
} }
return { export default {
show: function (itemId, serverId) { show: function (itemId, serverId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
return show(itemId, serverId, resolve, reject); return show(itemId, serverId, resolve, reject);
@ -1083,11 +1140,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
loading.show(); loading.show();
require(['text!./metadataEditor.template.html'], function (template) { import('text!./metadataEditor.template.html').then(({default: template}) => {
elem.innerHTML = globalize.translateHtml(template, 'core');
elem.innerHTML = globalize.translateDocument(template, 'core');
elem.querySelector('.formDialogFooter').classList.remove('formDialogFooter'); elem.querySelector('.formDialogFooter').classList.remove('formDialogFooter');
elem.querySelector('.btnClose').classList.add('hide');
elem.querySelector('.btnHeaderSave').classList.remove('hide'); elem.querySelector('.btnHeaderSave').classList.remove('hide');
elem.querySelector('.btnCancel').classList.add('hide'); elem.querySelector('.btnCancel').classList.add('hide');
@ -1101,4 +1158,5 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
}); });
} }
}; };
});
/* eslint-enable indent */

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

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

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

@ -1,9 +1,17 @@
define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-button-light', 'emby-input', 'emby-select', 'css!./../formdialog'], function (dialogHelper, layoutManager, globalize, require) { import dialogHelper from 'dialogHelper';
'use strict'; import layoutManager from 'layoutManager';
import globalize from 'globalize';
import require from 'require';
import 'paper-icon-button-light';
import 'emby-input';
import 'emby-select';
import 'css!./../formdialog';
/* eslint-disable indent */
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(({default: scrollHelper}) => {
var fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
@ -11,9 +19,9 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
function show(person) { function show(person) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['text!./personEditor.template.html'], function (template) { import('text!./personEditor.template.html').then(({default: template}) => {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -24,14 +32,14 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
var html = ''; let html = '';
var submitted = false; let submitted = false;
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -93,7 +101,8 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
}); });
} }
return { export default {
show: show show: show
}; };
});
/* eslint-enable indent */

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

@ -1,13 +1,20 @@
define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'globalize', 'appRouter', 'dom', 'css!./multiSelect'], function (browser, appStorage, appHost, loading, connectionManager, globalize, appRouter, dom) { import browser from 'browser';
'use strict'; import appHost from 'apphost';
import loading from 'loading';
import connectionManager from 'connectionManager';
import globalize from 'globalize';
import dom from 'dom';
import 'css!./multiSelect';
var selectedItems = []; /* eslint-disable indent */
var selectedElements = [];
var currentSelectionCommandsPanel; let selectedItems = [];
let selectedElements = [];
let currentSelectionCommandsPanel;
function hideSelections() { function hideSelections() {
var selectionCommandsPanel = currentSelectionCommandsPanel; const selectionCommandsPanel = currentSelectionCommandsPanel;
if (selectionCommandsPanel) { if (selectionCommandsPanel) {
selectionCommandsPanel.parentNode.removeChild(selectionCommandsPanel); selectionCommandsPanel.parentNode.removeChild(selectionCommandsPanel);
@ -15,10 +22,10 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
selectedItems = []; selectedItems = [];
selectedElements = []; selectedElements = [];
var elems = document.querySelectorAll('.itemSelectionPanel'); const elems = document.querySelectorAll('.itemSelectionPanel');
for (var i = 0, length = elems.length; i < length; i++) { for (let i = 0, length = elems.length; i < length; i++) {
var parent = elems[i].parentNode; const parent = elems[i].parentNode;
parent.removeChild(elems[i]); parent.removeChild(elems[i]);
parent.classList.remove('withMultiSelect'); parent.classList.remove('withMultiSelect');
} }
@ -29,14 +36,14 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
// toggle the checkbox, if it wasn't clicked on // toggle the checkbox, if it wasn't clicked on
if (!dom.parentWithClass(e.target, 'chkItemSelect')) { if (!dom.parentWithClass(e.target, 'chkItemSelect')) {
var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); const chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
if (chkItemSelect) { if (chkItemSelect) {
if (chkItemSelect.classList.contains('checkedInitial')) { if (chkItemSelect.classList.contains('checkedInitial')) {
chkItemSelect.classList.remove('checkedInitial'); chkItemSelect.classList.remove('checkedInitial');
} else { } else {
var newValue = !chkItemSelect.checked; const newValue = !chkItemSelect.checked;
chkItemSelect.checked = newValue; chkItemSelect.checked = newValue;
updateItemSelection(chkItemSelect, newValue); updateItemSelection(chkItemSelect, newValue);
} }
@ -50,11 +57,11 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function updateItemSelection(chkItemSelect, selected) { function updateItemSelection(chkItemSelect, selected) {
var id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id'); const id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id');
if (selected) { if (selected) {
var current = selectedItems.filter(function (i) { const current = selectedItems.filter(i => {
return i === id; return i === id;
}); });
@ -64,16 +71,16 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
} }
} else { } else {
selectedItems = selectedItems.filter(function (i) { selectedItems = selectedItems.filter(i => {
return i !== id; return i !== id;
}); });
selectedElements = selectedElements.filter(function (i) { selectedElements = selectedElements.filter(i => {
return i !== chkItemSelect; return i !== chkItemSelect;
}); });
} }
if (selectedItems.length) { if (selectedItems.length) {
var itemSelectionCount = document.querySelector('.itemSelectionCount'); const itemSelectionCount = document.querySelector('.itemSelectionCount');
if (itemSelectionCount) { if (itemSelectionCount) {
itemSelectionCount.innerHTML = selectedItems.length; itemSelectionCount.innerHTML = selectedItems.length;
} }
@ -88,33 +95,33 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function showSelection(item, isChecked) { function showSelection(item, isChecked) {
var itemSelectionPanel = item.querySelector('.itemSelectionPanel'); let itemSelectionPanel = item.querySelector('.itemSelectionPanel');
if (!itemSelectionPanel) { if (!itemSelectionPanel) {
itemSelectionPanel = document.createElement('div'); itemSelectionPanel = document.createElement('div');
itemSelectionPanel.classList.add('itemSelectionPanel'); itemSelectionPanel.classList.add('itemSelectionPanel');
var parent = item.querySelector('.cardBox') || item.querySelector('.cardContent'); const parent = item.querySelector('.cardBox') || item.querySelector('.cardContent');
parent.classList.add('withMultiSelect'); parent.classList.add('withMultiSelect');
parent.appendChild(itemSelectionPanel); parent.appendChild(itemSelectionPanel);
var cssClass = 'chkItemSelect'; let cssClass = 'chkItemSelect';
if (isChecked && !browser.firefox) { if (isChecked && !browser.firefox) {
// In firefox, the initial tap hold doesnt' get treated as a click // In firefox, the initial tap hold doesnt' get treated as a click
// In other browsers it does, so we need to make sure that initial click is ignored // In other browsers it does, so we need to make sure that initial click is ignored
cssClass += ' checkedInitial'; cssClass += ' checkedInitial';
} }
var checkedAttribute = isChecked ? ' checked' : ''; const checkedAttribute = isChecked ? ' checked' : '';
itemSelectionPanel.innerHTML = '<label class="checkboxContainer"><input type="checkbox" is="emby-checkbox" data-outlineclass="multiSelectCheckboxOutline" class="' + cssClass + '"' + checkedAttribute + '/><span></span></label>'; itemSelectionPanel.innerHTML = `<label class="checkboxContainer"><input type="checkbox" is="emby-checkbox" data-outlineclass="multiSelectCheckboxOutline" class="${cssClass}"${checkedAttribute}/><span></span></label>`;
var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); const chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
chkItemSelect.addEventListener('change', onSelectionChange); chkItemSelect.addEventListener('change', onSelectionChange);
} }
} }
function showSelectionCommands() { function showSelectionCommands() {
var selectionCommandsPanel = currentSelectionCommandsPanel; let selectionCommandsPanel = currentSelectionCommandsPanel;
if (!selectionCommandsPanel) { if (!selectionCommandsPanel) {
@ -124,19 +131,19 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
document.body.appendChild(selectionCommandsPanel); document.body.appendChild(selectionCommandsPanel);
currentSelectionCommandsPanel = selectionCommandsPanel; currentSelectionCommandsPanel = selectionCommandsPanel;
var html = ''; let html = '';
html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><span class="material-icons close"></span></button>'; html += '<button is="paper-icon-button-light" class="btnCloseSelectionPanel autoSize"><span class="material-icons close"></span></button>';
html += '<h1 class="itemSelectionCount"></h1>'; html += '<h1 class="itemSelectionCount"></h1>';
const moreIcon = 'more_vert'; const moreIcon = 'more_vert';
html += '<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><span class="material-icons ' + moreIcon + '"></span></button>'; html += `<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><span class="material-icons ${moreIcon}"></span></button>`;
selectionCommandsPanel.innerHTML = html; selectionCommandsPanel.innerHTML = html;
selectionCommandsPanel.querySelector('.btnCloseSelectionPanel').addEventListener('click', hideSelections); selectionCommandsPanel.querySelector('.btnCloseSelectionPanel').addEventListener('click', hideSelections);
var btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions'); const btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions');
dom.addEventListener(btnSelectionPanelOptions, 'click', showMenuForSelectedItems, { passive: true }); dom.addEventListener(btnSelectionPanelOptions, 'click', showMenuForSelectedItems, { passive: true });
} }
@ -144,9 +151,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function alertText(options) { function alertText(options) {
return new Promise(function (resolve, reject) { return new Promise((resolve, reject) => {
require(['alert'], function (alert) { import('alert').then(({default: alert}) => {
alert(options).then(resolve, resolve); alert(options).then(resolve, resolve);
}); });
}); });
@ -154,24 +161,24 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function deleteItems(apiClient, itemIds) { function deleteItems(apiClient, itemIds) {
return new Promise(function (resolve, reject) { return new Promise((resolve, reject) => {
var msg = globalize.translate('ConfirmDeleteItem'); let msg = globalize.translate('ConfirmDeleteItem');
var title = globalize.translate('HeaderDeleteItem'); let title = globalize.translate('HeaderDeleteItem');
if (itemIds.length > 1) { if (itemIds.length > 1) {
msg = globalize.translate('ConfirmDeleteItems'); msg = globalize.translate('ConfirmDeleteItems');
title = globalize.translate('HeaderDeleteItems'); title = globalize.translate('HeaderDeleteItems');
} }
require(['confirm'], function (confirm) { import('confirm').then(({default: confirm}) => {
confirm(msg, title).then(function () { confirm(msg, title).then(() => {
var promises = itemIds.map(function (itemId) { const promises = itemIds.map(itemId => {
apiClient.deleteItem(itemId); apiClient.deleteItem(itemId);
}); });
Promise.all(promises).then(resolve, function () { Promise.all(promises).then(resolve, () => {
alertText(globalize.translate('ErrorDeletingItem')).then(reject, reject); alertText(globalize.translate('ErrorDeletingItem')).then(reject, reject);
}); });
@ -183,11 +190,11 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function showMenuForSelectedItems(e) { function showMenuForSelectedItems(e) {
var apiClient = connectionManager.currentApiClient(); const apiClient = connectionManager.currentApiClient();
apiClient.getCurrentUser().then(function (user) { apiClient.getCurrentUser().then(user => {
var menuItems = []; const menuItems = [];
menuItems.push({ menuItems.push({
name: globalize.translate('AddToCollection'), name: globalize.translate('AddToCollection'),
@ -244,18 +251,18 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
icon: 'refresh' icon: 'refresh'
}); });
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({ actionsheet.show({
items: menuItems, items: menuItems,
positionTo: e.target, positionTo: e.target,
callback: function (id) { callback: function (id) {
var items = selectedItems.slice(0); const items = selectedItems.slice(0);
var serverId = apiClient.serverInfo().Id; const serverId = apiClient.serverInfo().Id;
switch (id) { switch (id) {
case 'addtocollection': case 'addtocollection':
require(['collectionEditor'], function (collectionEditor) { import('collectionEditor').then(({default: collectionEditor}) => {
new collectionEditor().show({ new collectionEditor({
items: items, items: items,
serverId: serverId serverId: serverId
}); });
@ -264,8 +271,8 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
dispatchNeedsRefresh(); dispatchNeedsRefresh();
break; break;
case 'playlist': case 'playlist':
require(['playlistEditor'], function (playlistEditor) { import('playlistEditor').then(({default: playlistEditor}) => {
new playlistEditor().show({ new playlistEditor({
items: items, items: items,
serverId: serverId serverId: serverId
}); });
@ -282,21 +289,21 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
combineVersions(apiClient, items); combineVersions(apiClient, items);
break; break;
case 'markplayed': case 'markplayed':
items.forEach(function (itemId) { items.forEach(itemId => {
apiClient.markPlayed(apiClient.getCurrentUserId(), itemId); apiClient.markPlayed(apiClient.getCurrentUserId(), itemId);
}); });
hideSelections(); hideSelections();
dispatchNeedsRefresh(); dispatchNeedsRefresh();
break; break;
case 'markunplayed': case 'markunplayed':
items.forEach(function (itemId) { items.forEach(itemId => {
apiClient.markUnplayed(apiClient.getCurrentUserId(), itemId); apiClient.markUnplayed(apiClient.getCurrentUserId(), itemId);
}); });
hideSelections(); hideSelections();
dispatchNeedsRefresh(); dispatchNeedsRefresh();
break; break;
case 'refresh': case 'refresh':
require(['refreshDialog'], function (refreshDialog) { import('refreshDialog').then(({default: refreshDialog}) => {
new refreshDialog({ new refreshDialog({
itemIds: items, itemIds: items,
serverId: serverId serverId: serverId
@ -317,18 +324,18 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function dispatchNeedsRefresh() { function dispatchNeedsRefresh() {
var elems = []; const elems = [];
[].forEach.call(selectedElements, function (i) { [].forEach.call(selectedElements, i => {
var container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer'); const container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer');
if (container && elems.indexOf(container) === -1) { if (container && !elems.includes(container)) {
elems.push(container); elems.push(container);
} }
}); });
for (var i = 0, length = elems.length; i < length; i++) { for (let i = 0, length = elems.length; i < length; i++) {
elems[i].notifyRefreshNeeded(true); elems[i].notifyRefreshNeeded(true);
} }
} }
@ -337,8 +344,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
if (selection.length < 2) { if (selection.length < 2) {
require(['alert'], function (alert) { import('alert').then(({default: alert}) => {
alert({ alert({
text: globalize.translate('PleaseSelectTwoItems') text: globalize.translate('PleaseSelectTwoItems')
}); });
}); });
@ -352,7 +360,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
type: 'POST', type: 'POST',
url: apiClient.getUrl('Videos/MergeVersions', { Ids: selection.join(',') }) url: apiClient.getUrl('Videos/MergeVersions', { Ids: selection.join(',') })
}).then(function () { }).then(() => {
loading.hide(); loading.hide();
hideSelections(); hideSelections();
@ -362,9 +370,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function showSelections(initialCard) { function showSelections(initialCard) {
require(['emby-checkbox'], function () { import('emby-checkbox').then(() => {
var cards = document.querySelectorAll('.card'); const cards = document.querySelectorAll('.card');
for (var i = 0, length = cards.length; i < length; i++) { for (let i = 0, length = cards.length; i < length; i++) {
showSelection(cards[i], initialCard === cards[i]); showSelection(cards[i], initialCard === cards[i]);
} }
@ -375,13 +383,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function onContainerClick(e) { function onContainerClick(e) {
var target = e.target; const target = e.target;
if (selectedItems.length) { if (selectedItems.length) {
var card = dom.parentWithClass(target, 'card'); const card = dom.parentWithClass(target, 'card');
if (card) { if (card) {
var itemSelectionPanel = card.querySelector('.itemSelectionPanel'); const itemSelectionPanel = card.querySelector('.itemSelectionPanel');
if (itemSelectionPanel) { if (itemSelectionPanel) {
return onItemSelectionPanelClick(e, itemSelectionPanel); return onItemSelectionPanelClick(e, itemSelectionPanel);
} }
@ -395,15 +403,15 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
document.addEventListener('viewbeforehide', hideSelections); document.addEventListener('viewbeforehide', hideSelections);
return function (options) { export default function (options) {
var self = this; const self = this;
var container = options.container; const container = options.container;
function onTapHold(e) { function onTapHold(e) {
var card = dom.parentWithClass(e.target, 'card'); const card = dom.parentWithClass(e.target, 'card');
if (card) { if (card) {
@ -423,13 +431,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
return e.changedTouches || e.targetTouches || e.touches; return e.changedTouches || e.targetTouches || e.touches;
} }
var touchTarget; let touchTarget;
var touchStartTimeout; let touchStartTimeout;
var touchStartX; let touchStartX;
var touchStartY; let touchStartY;
function onTouchStart(e) { function onTouchStart(e) {
var touch = getTouches(e)[0]; const touch = getTouches(e)[0];
touchTarget = null; touchTarget = null;
touchStartX = 0; touchStartX = 0;
touchStartY = 0; touchStartY = 0;
@ -437,10 +445,10 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
if (touch) { if (touch) {
touchStartX = touch.clientX; touchStartX = touch.clientX;
touchStartY = touch.clientY; touchStartY = touch.clientY;
var element = touch.target; const element = touch.target;
if (element) { if (element) {
var card = dom.parentWithClass(element, 'card'); const card = dom.parentWithClass(element, 'card');
if (card) { if (card) {
@ -459,13 +467,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
function onTouchMove(e) { function onTouchMove(e) {
if (touchTarget) { if (touchTarget) {
var touch = getTouches(e)[0]; const touch = getTouches(e)[0];
var deltaX; let deltaX;
var deltaY; let deltaY;
if (touch) { if (touch) {
var touchEndX = touch.clientX || 0; const touchEndX = touch.clientX || 0;
var touchEndY = touch.clientY || 0; const touchEndY = touch.clientY || 0;
deltaX = Math.abs(touchEndX - (touchStartX || 0)); deltaX = Math.abs(touchEndX - (touchStartX || 0));
deltaY = Math.abs(touchEndY - (touchStartY || 0)); deltaY = Math.abs(touchEndY - (touchStartY || 0));
} else { } else {
@ -509,7 +517,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
return; return;
} }
var card = dom.parentWithClass(touchTarget, 'card'); const card = dom.parentWithClass(touchTarget, 'card');
touchTarget = null; touchTarget = null;
if (card) { if (card) {
@ -556,12 +564,12 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
self.onContainerClick = onContainerClick; self.onContainerClick = onContainerClick;
self.destroy = function () { self.destroy = () => {
container.removeEventListener('click', onContainerClick); container.removeEventListener('click', onContainerClick);
container.removeEventListener('contextmenu', onTapHold); container.removeEventListener('contextmenu', onTapHold);
var element = container; const element = container;
dom.removeEventListener(element, 'touchstart', onTouchStart, { dom.removeEventListener(element, 'touchstart', onTouchStart, {
passive: true passive: true
@ -586,5 +594,6 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
passive: true passive: true
}); });
}; };
}; }
});
/* eslint-enable indent */

2
src/components/nowPlayingBar/nowPlayingBar.css
View file

@ -114,8 +114,6 @@
.nowPlayingBarUserDataButtons { .nowPlayingBarUserDataButtons {
display: inline-block; display: inline-block;
margin-left: 1em;
margin-right: 1em;
} }
.nowPlayingBarPositionSlider::-webkit-slider-thumb { .nowPlayingBarPositionSlider::-webkit-slider-thumb {

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

@ -1,31 +1,46 @@
define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', 'layoutManager', 'playbackManager', 'nowPlayingHelper', 'apphost', 'dom', 'connectionManager', 'itemContextMenu', 'paper-icon-button-light', 'emby-ratingbutton'], function (require, datetime, itemHelper, events, browser, imageLoader, layoutManager, playbackManager, nowPlayingHelper, appHost, dom, connectionManager, itemContextMenu) { import require from 'require';
'use strict'; import datetime from 'datetime';
import itemHelper from 'itemHelper';
import events from 'events';
import browser from 'browser';
import imageLoader from 'imageLoader';
import layoutManager from 'layoutManager';
import playbackManager from 'playbackManager';
import nowPlayingHelper from 'nowPlayingHelper';
import appHost from 'apphost';
import dom from 'dom';
import connectionManager from 'connectionManager';
import itemContextMenu from 'itemContextMenu';
import 'paper-icon-button-light';
import 'emby-ratingbutton';
var currentPlayer; /* eslint-disable indent */
var currentPlayerSupportedCommands = [];
var currentTimeElement; let currentPlayer;
var nowPlayingImageElement; let currentPlayerSupportedCommands = [];
var nowPlayingTextElement;
var nowPlayingUserData;
var muteButton;
var volumeSlider;
var volumeSliderContainer;
var playPauseButtons;
var positionSlider;
var toggleRepeatButton;
var toggleRepeatButtonIcon;
var lastUpdateTime = 0; let currentTimeElement;
var lastPlayerState = {}; let nowPlayingImageElement;
var isEnabled; let nowPlayingTextElement;
var currentRuntimeTicks = 0; let nowPlayingUserData;
let muteButton;
let volumeSlider;
let volumeSliderContainer;
let playPauseButtons;
let positionSlider;
let toggleRepeatButton;
let toggleRepeatButtonIcon;
var isVisibilityAllowed = true; let lastUpdateTime = 0;
let lastPlayerState = {};
let isEnabled;
let currentRuntimeTicks = 0;
let isVisibilityAllowed = true;
function getNowPlayingBarHtml() { function getNowPlayingBarHtml() {
var html = ''; let html = '';
html += '<div class="nowPlayingBar hide nowPlayingBar-hidden">'; html += '<div class="nowPlayingBar hide nowPlayingBar-hidden">';
@ -72,7 +87,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
if (layoutManager.mobile) { if (layoutManager.mobile) {
html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>'; html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
} else { } else {
html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><span class="material-icons more_vert"></span></button>'; html += '<button is="paper-icon-button-light" class="btnToggleContextMenu mediaButton"><span class="material-icons more_vert"></span></button>';
} }
html += '</div>'; html += '</div>';
@ -204,21 +219,17 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
volumeSliderContainer.classList.toggle('hide', appHost.supports('physicalvolumecontrol')); volumeSliderContainer.classList.toggle('hide', appHost.supports('physicalvolumecontrol'));
function setVolume() { volumeSlider.addEventListener('input', (e) => {
if (currentPlayer) { if (currentPlayer) {
currentPlayer.setVolume(this.value); currentPlayer.setVolume(e.target.value);
} }
} });
volumeSlider.addEventListener('change', setVolume);
volumeSlider.addEventListener('mousemove', setVolume);
volumeSlider.addEventListener('touchmove', setVolume);
positionSlider.addEventListener('change', function () { positionSlider.addEventListener('change', function () {
if (currentPlayer) { if (currentPlayer) {
var newPercent = parseFloat(this.value); const newPercent = parseFloat(this.value);
playbackManager.seekPercent(newPercent, currentPlayer); playbackManager.seekPercent(newPercent, currentPlayer);
} }
@ -227,13 +238,13 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
positionSlider.getBubbleText = function (value) { positionSlider.getBubbleText = function (value) {
var state = lastPlayerState; const state = lastPlayerState;
if (!state || !state.NowPlayingItem || !currentRuntimeTicks) { if (!state || !state.NowPlayingItem || !currentRuntimeTicks) {
return '--:--'; return '--:--';
} }
var ticks = currentRuntimeTicks; let ticks = currentRuntimeTicks;
ticks /= 100; ticks /= 100;
ticks *= value; ticks *= value;
@ -250,12 +261,12 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
function showRemoteControl() { function showRemoteControl() {
require(['appRouter'], function (appRouter) { import('appRouter').then(({default: appRouter}) => {
appRouter.showNowPlaying(); appRouter.showNowPlaying();
}); });
} }
var nowPlayingBarElement; let nowPlayingBarElement;
function getNowPlayingBar() { function getNowPlayingBar() {
if (nowPlayingBarElement) { if (nowPlayingBarElement) {
@ -263,10 +274,14 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
Promise.all([
require(['appFooter-shared', 'itemShortcuts', 'css!./nowPlayingBar.css', 'emby-slider'], function (appfooter, itemShortcuts) { import('appFooter-shared'),
import('itemShortcuts'),
var parentContainer = appfooter.element; import('css!./nowPlayingBar.css'),
import('emby-slider')
])
.then(([appfooter, itemShortcuts]) => {
const parentContainer = appfooter.element;
nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar'); nowPlayingBarElement = parentContainer.querySelector('.nowPlayingBar');
if (nowPlayingBarElement) { if (nowPlayingBarElement) {
@ -319,13 +334,13 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
lastPlayerState = state; lastPlayerState = state;
var playerInfo = playbackManager.getPlayerInfo(); const playerInfo = playbackManager.getPlayerInfo();
var playState = state.PlayState || {}; const playState = state.PlayState || {};
updatePlayPauseState(playState.IsPaused); updatePlayPauseState(playState.IsPaused);
var supportedCommands = playerInfo.supportedCommands; const supportedCommands = playerInfo.supportedCommands;
currentPlayerSupportedCommands = supportedCommands; currentPlayerSupportedCommands = supportedCommands;
if (supportedCommands.indexOf('SetRepeatMode') === -1) { if (supportedCommands.indexOf('SetRepeatMode') === -1) {
@ -343,11 +358,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
positionSlider.disabled = !playState.CanSeek; positionSlider.disabled = !playState.CanSeek;
// determines if both forward and backward buffer progress will be visible // determines if both forward and backward buffer progress will be visible
var isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null; const isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null;
positionSlider.setIsClear(isProgressClear); positionSlider.setIsClear(isProgressClear);
} }
var nowPlayingItem = state.NowPlayingItem || {}; const nowPlayingItem = state.NowPlayingItem || {};
updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playbackManager.getBufferedRanges(player)); updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playbackManager.getBufferedRanges(player));
updateNowPlayingInfo(state); updateNowPlayingInfo(state);
@ -355,7 +370,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
function updateRepeatModeDisplay(repeatMode) { function updateRepeatModeDisplay(repeatMode) {
toggleRepeatButtonIcon.classList.remove('repeat', 'repeat_one'); toggleRepeatButtonIcon.classList.remove('repeat', 'repeat_one');
const cssClass = 'repeatButton-active'; const cssClass = 'buttonActive';
switch (repeatMode) { switch (repeatMode) {
case 'RepeatAll': case 'RepeatAll':
@ -375,18 +390,14 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function updateTimeDisplay(positionTicks, runtimeTicks, bufferedRanges) { function updateTimeDisplay(positionTicks, runtimeTicks, bufferedRanges) {
// See bindEvents for why this is necessary // See bindEvents for why this is necessary
if (positionSlider && !positionSlider.dragging) { if (positionSlider && !positionSlider.dragging) {
if (runtimeTicks) { if (runtimeTicks) {
let pct = positionTicks / runtimeTicks;
var pct = positionTicks / runtimeTicks;
pct *= 100; pct *= 100;
positionSlider.value = pct; positionSlider.value = pct;
} else { } else {
positionSlider.value = 0; positionSlider.value = 0;
} }
} }
@ -396,9 +407,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
if (currentTimeElement) { if (currentTimeElement) {
let timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
var timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
if (runtimeTicks) { if (runtimeTicks) {
timeText += ' / ' + datetime.getDisplayRunningTime(runtimeTicks); timeText += ' / ' + datetime.getDisplayRunningTime(runtimeTicks);
} }
@ -409,10 +418,10 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
function updatePlayerVolumeState(isMuted, volumeLevel) { function updatePlayerVolumeState(isMuted, volumeLevel) {
var supportedCommands = currentPlayerSupportedCommands; const supportedCommands = currentPlayerSupportedCommands;
var showMuteButton = true; let showMuteButton = true;
var showVolumeSlider = true; let showVolumeSlider = true;
if (supportedCommands.indexOf('ToggleMute') === -1) { if (supportedCommands.indexOf('ToggleMute') === -1) {
showMuteButton = false; showMuteButton = false;
@ -514,12 +523,12 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
return null; return null;
} }
var currentImgUrl; let currentImgUrl;
function updateNowPlayingInfo(state) { function updateNowPlayingInfo(state) {
var nowPlayingItem = state.NowPlayingItem; const nowPlayingItem = state.NowPlayingItem;
var textLines = nowPlayingItem ? nowPlayingHelper.getNowPlayingNames(nowPlayingItem) : []; const textLines = nowPlayingItem ? nowPlayingHelper.getNowPlayingNames(nowPlayingItem) : [];
nowPlayingTextElement.innerHTML = ''; nowPlayingTextElement.innerHTML = '';
if (textLines) { if (textLines) {
let itemText = document.createElement('div'); let itemText = document.createElement('div');
@ -543,15 +552,15 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
nowPlayingTextElement.appendChild(secondaryText); nowPlayingTextElement.appendChild(secondaryText);
} }
var imgHeight = 70; const imgHeight = 70;
var url = nowPlayingItem ? (seriesImageUrl(nowPlayingItem, { const url = nowPlayingItem ? (seriesImageUrl(nowPlayingItem, {
height: imgHeight height: imgHeight
}) || imageUrl(nowPlayingItem, { }) || imageUrl(nowPlayingItem, {
height: imgHeight height: imgHeight
})) : null; })) : null;
var isRefreshing = false; let isRefreshing = false;
if (url !== currentImgUrl) { if (url !== currentImgUrl) {
currentImgUrl = url; currentImgUrl = url;
@ -571,10 +580,10 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
if (nowPlayingItem.Id) { if (nowPlayingItem.Id) {
if (isRefreshing) { if (isRefreshing) {
var apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId); const apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId);
apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) { apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
var userData = item.UserData || {}; const userData = item.UserData || {};
var likes = userData.Likes == null ? '' : userData.Likes; const likes = userData.Likes == null ? '' : userData.Likes;
if (!layoutManager.mobile) { if (!layoutManager.mobile) {
let contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu'); let contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu');
// We remove the previous event listener by replacing the item in each update event // We remove the previous event listener by replacing the item in each update event
@ -606,14 +615,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
function onPlaybackStart(e, state) { function onPlaybackStart(e, state) {
console.debug('nowplaying event: ' + e.type); console.debug('nowplaying event: ' + e.type);
var player = this; var player = this;
onStateChanged.call(player, e, state); onStateChanged.call(player, e, state);
} }
function onRepeatModeChange() { function onRepeatModeChange() {
if (!isEnabled) { if (!isEnabled) {
return; return;
} }
@ -628,9 +634,8 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
let shuffleMode = playbackManager.getQueueShuffleMode(); let shuffleMode = playbackManager.getQueueShuffleMode();
let context = nowPlayingBarElement; let context = nowPlayingBarElement;
const cssClass = 'shuffleQueue-active'; const cssClass = 'buttonActive';
let toggleShuffleButton = context.querySelector('.btnShuffleQueue'); let toggleShuffleButton = context.querySelector('.btnShuffleQueue');
switch (shuffleMode) { switch (shuffleMode) {
case 'Shuffle': case 'Shuffle':
toggleShuffleButton.classList.add(cssClass); toggleShuffleButton.classList.add(cssClass);
@ -643,7 +648,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
function showNowPlayingBar() { function showNowPlayingBar() {
if (!isVisibilityAllowed) { if (!isVisibilityAllowed) {
hideNowPlayingBar(); hideNowPlayingBar();
return; return;
@ -660,7 +664,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
// in the event of a stop->play command // in the event of a stop->play command
// Don't call getNowPlayingBar here because we don't want to end up creating it just to hide it // Don't call getNowPlayingBar here because we don't want to end up creating it just to hide it
var elem = document.getElementsByClassName('nowPlayingBar')[0]; const elem = document.getElementsByClassName('nowPlayingBar')[0];
if (elem) { if (elem) {
slideDown(elem); slideDown(elem);
@ -670,7 +674,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
function onPlaybackStopped(e, state) { function onPlaybackStopped(e, state) {
console.debug('nowplaying event: ' + e.type); console.debug('nowplaying event: ' + e.type);
var player = this; const player = this;
if (player.isLocalPlayer) { if (player.isLocalPlayer) {
if (state.NextMediaType !== 'Audio') { if (state.NextMediaType !== 'Audio') {
@ -689,14 +693,14 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
return; return;
} }
var player = this; const player = this;
updatePlayPauseState(player.paused()); updatePlayPauseState(player.paused());
} }
function onStateChanged(event, state) { function onStateChanged(event, state) {
console.debug('nowplaying event: ' + event.type); console.debug('nowplaying event: ' + event.type);
var player = this; const player = this;
if (!state.NowPlayingItem || layoutManager.tv) { if (!state.NowPlayingItem || layoutManager.tv) {
hideNowPlayingBar(); hideNowPlayingBar();
@ -727,21 +731,21 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
// Try to avoid hammering the document with changes // Try to avoid hammering the document with changes
var now = new Date().getTime(); const now = new Date().getTime();
if ((now - lastUpdateTime) < 700) { if ((now - lastUpdateTime) < 700) {
return; return;
} }
lastUpdateTime = now; lastUpdateTime = now;
var player = this; const player = this;
currentRuntimeTicks = playbackManager.duration(player); currentRuntimeTicks = playbackManager.duration(player);
updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks, playbackManager.getBufferedRanges(player)); updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks, playbackManager.getBufferedRanges(player));
} }
function releaseCurrentPlayer() { function releaseCurrentPlayer() {
var player = currentPlayer; const player = currentPlayer;
if (player) { if (player) {
events.off(player, 'playbackstart', onPlaybackStart); events.off(player, 'playbackstart', onPlaybackStart);
@ -765,14 +769,14 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
return; return;
} }
var player = this; const player = this;
updatePlayerVolumeState(player.isMuted(), player.getVolume()); updatePlayerVolumeState(player.isMuted(), player.getVolume());
} }
function refreshFromPlayer(player) { function refreshFromPlayer(player) {
var state = playbackManager.getPlayerState(player); const state = playbackManager.getPlayerState(player);
onStateChanged.call(player, { type: 'init' }, state); onStateChanged.call(player, { type: 'init' }, state);
} }
@ -829,4 +833,5 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
} }
} }
}); });
});
/* eslint-enable indent */

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

@ -1,9 +1,6 @@
define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'playQueueManager', 'userSettings', 'globalize', 'connectionManager', 'loading', 'apphost', 'screenfull'], function (events, datetime, appSettings, itemHelper, pluginManager, PlayQueueManager, userSettings, globalize, connectionManager, loading, apphost, screenfull) { define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'playQueueManager', 'userSettings', 'globalize', 'connectionManager', 'loading', 'apphost', 'screenfull'], function (events, datetime, appSettings, itemHelper, pluginManager, PlayQueueManager, userSettings, globalize, connectionManager, loading, apphost, screenfull) {
'use strict'; 'use strict';
/** Delay time in ms for reportPlayback logging */
const reportPlaybackLogDelay = 1e3;
function enableLocalPlaylistManagement(player) { function enableLocalPlaylistManagement(player) {
if (player.getPlaylist) { if (player.getPlaylist) {
@ -43,12 +40,6 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
events.trigger(playbackManagerInstance, 'playerchange', [newPlayer, newTarget, previousPlayer]); events.trigger(playbackManagerInstance, 'playerchange', [newPlayer, newTarget, previousPlayer]);
} }
/** Last invoked method */
let reportPlaybackLastMethod;
/** Last invoke time of method */
let reportPlaybackLastTime;
function reportPlayback(playbackManagerInstance, state, player, reportPlaylist, serverId, method, progressEventName) { function reportPlayback(playbackManagerInstance, state, player, reportPlaylist, serverId, method, progressEventName) {
if (!serverId) { if (!serverId) {
@ -69,14 +60,6 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
addPlaylistToPlaybackReport(playbackManagerInstance, info, player, serverId); addPlaylistToPlaybackReport(playbackManagerInstance, info, player, serverId);
} }
const now = (new Date).getTime();
if (method !== reportPlaybackLastMethod || now - (reportPlaybackLastTime || 0) >= reportPlaybackLogDelay) {
console.debug(method + '-' + JSON.stringify(info));
reportPlaybackLastMethod = method;
reportPlaybackLastTime = now;
}
var apiClient = connectionManager.getApiClient(serverId); var apiClient = connectionManager.getApiClient(serverId);
var reportPlaybackPromise = apiClient[method](info); var reportPlaybackPromise = apiClient[method](info);
// Notify that report has been sent // Notify that report has been sent
@ -709,7 +692,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
function showPlaybackInfoErrorMessage(instance, errorCode, playNextTrack) { function showPlaybackInfoErrorMessage(instance, errorCode, playNextTrack) {
require(['alert'], function (alert) { require(['alert'], function (alert) {
alert({ alert.default({
text: globalize.translate('PlaybackError' + errorCode), text: globalize.translate('PlaybackError' + errorCode),
title: globalize.translate('HeaderPlaybackError') title: globalize.translate('HeaderPlaybackError')
}).then(function () { }).then(function () {
@ -3664,6 +3647,14 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
this.seek(parseInt(ticks), player); this.seek(parseInt(ticks), player);
}; };
PlaybackManager.prototype.seekMs = function (ms, player) {
player = player || this._currentPlayer;
var ticks = ms * 10000;
this.seek(ticks, player);
};
PlaybackManager.prototype.playTrailers = function (item) { PlaybackManager.prototype.playTrailers = function (item) {
var player = this._currentPlayer; var player = this._currentPlayer;

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

@ -118,7 +118,7 @@ export function show(button) {
}); });
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({default: actionsheet}) => {
loading.hide(); loading.hide();
@ -153,8 +153,12 @@ export function show(button) {
} }
function showActivePlayerMenu(playerInfo) { function showActivePlayerMenu(playerInfo) {
Promise.all([
require(['dialogHelper', 'dialog', 'emby-checkbox', 'emby-button'], function (dialogHelper) { import('dialogHelper'),
import('dialog'),
import('emby-checkbox'),
import('emby-button')
]).then(([dialogHelper]) => {
showActivePlayerMenuInternal(dialogHelper, playerInfo); showActivePlayerMenuInternal(dialogHelper, playerInfo);
}); });
} }
@ -163,7 +167,7 @@ function disconnectFromPlayer(currentDeviceName) {
if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) { if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
require(['dialog'], function (dialog) { import('dialog').then(({default: dialog}) => {
var menuItems = []; var menuItems = [];

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

@ -1,31 +1,42 @@
define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'qualityoptions', 'globalize', 'loading', 'connectionManager', 'dom', 'events', 'emby-select', 'emby-checkbox'], function (require, browser, appSettings, appHost, focusManager, qualityoptions, globalize, loading, connectionManager, dom, events) { import browser from 'browser';
'use strict'; import appSettings from 'appSettings';
import appHost from 'apphost';
import focusManager from 'focusManager';
import qualityoptions from 'qualityoptions';
import globalize from 'globalize';
import loading from 'loading';
import connectionManager from 'connectionManager';
import events from 'events';
import 'emby-select';
import 'emby-checkbox';
/* eslint-disable indent */
function fillSkipLengths(select) { function fillSkipLengths(select) {
var options = [5, 10, 15, 20, 25, 30]; const options = [5, 10, 15, 20, 25, 30];
select.innerHTML = options.map(function (option) { select.innerHTML = options.map(option => {
return { return {
name: globalize.translate('ValueSeconds', option), name: globalize.translate('ValueSeconds', option),
value: option * 1000 value: option * 1000
}; };
}).map(function (o) { }).map(o => {
return '<option value="' + o.value + '">' + o.name + '</option>'; return `<option value="${o.value}">${o.name}</option>`;
}).join(''); }).join('');
} }
function populateLanguages(select, languages) { function populateLanguages(select, languages) {
var html = ''; let html = '';
html += "<option value=''>" + globalize.translate('AnyLanguage') + '</option>'; html += `<option value=''>${globalize.translate('AnyLanguage')}</option>`;
for (var i = 0, length = languages.length; i < length; i++) { for (let i = 0, length = languages.length; i < length; i++) {
var culture = languages[i]; const culture = languages[i];
html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + '</option>'; html += `<option value='${culture.ThreeLetterISOLanguageName}'>${culture.DisplayName}</option>`;
} }
select.innerHTML = html; select.innerHTML = html;
@ -33,7 +44,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
function setMaxBitrateIntoField(select, isInNetwork, mediatype) { function setMaxBitrateIntoField(select, isInNetwork, mediatype) {
var options = mediatype === 'Audio' ? qualityoptions.getAudioQualityOptions({ const options = mediatype === 'Audio' ? qualityoptions.getAudioQualityOptions({
currentMaxBitrate: appSettings.maxStreamingBitrate(isInNetwork, mediatype), currentMaxBitrate: appSettings.maxStreamingBitrate(isInNetwork, mediatype),
isAutomaticBitrateEnabled: appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype), isAutomaticBitrateEnabled: appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype),
@ -47,10 +58,10 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
}); });
select.innerHTML = options.map(function (i) { select.innerHTML = options.map(i => {
// render empty string instead of 0 for the auto option // render empty string instead of 0 for the auto option
return '<option value="' + (i.bitrate || '') + '">' + i.name + '</option>'; return `<option value="${i.bitrate || ''}">${i.name}</option>`;
}).join(''); }).join('');
if (appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype)) { if (appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype)) {
@ -62,23 +73,23 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
function fillChromecastQuality(select) { function fillChromecastQuality(select) {
var options = qualityoptions.getVideoQualityOptions({ const options = qualityoptions.getVideoQualityOptions({
currentMaxBitrate: appSettings.maxChromecastBitrate(), currentMaxBitrate: appSettings.maxChromecastBitrate(),
isAutomaticBitrateEnabled: !appSettings.maxChromecastBitrate(), isAutomaticBitrateEnabled: !appSettings.maxChromecastBitrate(),
enableAuto: true enableAuto: true
}); });
select.innerHTML = options.map(function (i) { select.innerHTML = options.map(i => {
// render empty string instead of 0 for the auto option // render empty string instead of 0 for the auto option
return '<option value="' + (i.bitrate || '') + '">' + i.name + '</option>'; return `<option value="${i.bitrate || ''}">${i.name}</option>`;
}).join(''); }).join('');
select.value = appSettings.maxChromecastBitrate() || ''; select.value = appSettings.maxChromecastBitrate() || '';
} }
function setMaxBitrateFromField(select, isInNetwork, mediatype, value) { function setMaxBitrateFromField(select, isInNetwork, mediatype) {
if (select.value) { if (select.value) {
appSettings.maxStreamingBitrate(isInNetwork, mediatype, select.value); appSettings.maxStreamingBitrate(isInNetwork, mediatype, select.value);
@ -110,7 +121,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
return; return;
} }
apiClient.getEndpointInfo().then(function (endpointInfo) { apiClient.getEndpointInfo().then(endpointInfo => {
if (endpointInfo.IsInNetwork) { if (endpointInfo.IsInNetwork) {
@ -133,7 +144,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
}); });
} }
function showOrHideEpisodesField(context, user, apiClient) { function showOrHideEpisodesField(context) {
if (browser.tizen || browser.web0s) { if (browser.tizen || browser.web0s) {
context.querySelector('.fldEpisodeAutoPlay').classList.add('hide'); context.querySelector('.fldEpisodeAutoPlay').classList.add('hide');
@ -145,12 +156,12 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
function loadForm(context, user, userSettings, apiClient) { function loadForm(context, user, userSettings, apiClient) {
var loggedInUserId = apiClient.getCurrentUserId(); const loggedInUserId = apiClient.getCurrentUserId();
var userId = user.Id; const userId = user.Id;
showHideQualityFields(context, user, apiClient); showHideQualityFields(context, user, apiClient);
apiClient.getCultures().then(function (allCultures) { apiClient.getCultures().then(allCultures => {
populateLanguages(context.querySelector('#selectAudioLanguage'), allCultures); populateLanguages(context.querySelector('#selectAudioLanguage'), allCultures);
@ -159,7 +170,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
}); });
// hide cinema mode options if disabled at server level // hide cinema mode options if disabled at server level
apiClient.getNamedConfiguration('cinemamode').then(function (cinemaConfig) { apiClient.getNamedConfiguration('cinemamode').then(cinemaConfig => {
if (cinemaConfig.EnableIntrosForMovies || cinemaConfig.EnableIntrosForEpisodes) { if (cinemaConfig.EnableIntrosForMovies || cinemaConfig.EnableIntrosForEpisodes) {
context.querySelector('.cinemaModeOptions').classList.remove('hide'); context.querySelector('.cinemaModeOptions').classList.remove('hide');
@ -204,18 +215,18 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
fillChromecastQuality(context.querySelector('.selectChromecastVideoQuality')); fillChromecastQuality(context.querySelector('.selectChromecastVideoQuality'));
var selectChromecastVersion = context.querySelector('.selectChromecastVersion'); const selectChromecastVersion = context.querySelector('.selectChromecastVersion');
selectChromecastVersion.value = userSettings.chromecastVersion(); selectChromecastVersion.value = userSettings.chromecastVersion();
var selectSkipForwardLength = context.querySelector('.selectSkipForwardLength'); const selectSkipForwardLength = context.querySelector('.selectSkipForwardLength');
fillSkipLengths(selectSkipForwardLength); fillSkipLengths(selectSkipForwardLength);
selectSkipForwardLength.value = userSettings.skipForwardLength(); selectSkipForwardLength.value = userSettings.skipForwardLength();
var selectSkipBackLength = context.querySelector('.selectSkipBackLength'); const selectSkipBackLength = context.querySelector('.selectSkipBackLength');
fillSkipLengths(selectSkipBackLength); fillSkipLengths(selectSkipBackLength);
selectSkipBackLength.value = userSettings.skipBackLength(); selectSkipBackLength.value = userSettings.skipBackLength();
showOrHideEpisodesField(context, user, apiClient); showOrHideEpisodesField(context);
loading.hide(); loading.hide();
} }
@ -248,20 +259,20 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
loading.show(); loading.show();
apiClient.getUser(userId).then(function (user) { apiClient.getUser(userId).then(user => {
saveUser(context, user, userSettings, apiClient).then(function () { saveUser(context, user, userSettings, apiClient).then(() => {
loading.hide(); loading.hide();
if (enableSaveConfirmation) { if (enableSaveConfirmation) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('SettingsSaved')); toast(globalize.translate('SettingsSaved'));
}); });
} }
events.trigger(instance, 'saved'); events.trigger(instance, 'saved');
}, function () { }, () => {
loading.hide(); loading.hide();
}); });
}); });
@ -269,14 +280,14 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
function onSubmit(e) { function onSubmit(e) {
var self = this; const self = this;
var apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
var userId = self.options.userId; const userId = self.options.userId;
var userSettings = self.options.userSettings; const userSettings = self.options.userSettings;
userSettings.setUserInfo(userId, apiClient).then(function () { userSettings.setUserInfo(userId, apiClient).then(() => {
var enableSaveConfirmation = self.options.enableSaveConfirmation; const enableSaveConfirmation = self.options.enableSaveConfirmation;
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
}); });
@ -289,9 +300,9 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
function embed(options, self) { function embed(options, self) {
require(['text!./playbackSettings.template.html'], function (template) { return import('text!./playbackSettings.template.html').then(({default: template}) => {
options.element.innerHTML = globalize.translateDocument(template, 'core'); options.element.innerHTML = globalize.translateHtml(template, 'core');
options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
@ -307,43 +318,43 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality
}); });
} }
function PlaybackSettings(options) { class PlaybackSettings {
constructor(options) {
this.options = options; this.options = options;
embed(options, this); embed(options, this);
} }
PlaybackSettings.prototype.loadData = function () { loadData() {
var self = this; const self = this;
var context = self.options.element; const context = self.options.element;
loading.show(); loading.show();
var userId = self.options.userId; const userId = self.options.userId;
var apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
var userSettings = self.options.userSettings; const userSettings = self.options.userSettings;
apiClient.getUser(userId).then(function (user) { apiClient.getUser(userId).then(user => {
userSettings.setUserInfo(userId, apiClient).then(function () { userSettings.setUserInfo(userId, apiClient).then(() => {
self.dataLoaded = true; self.dataLoaded = true;
loadForm(context, user, userSettings, apiClient); loadForm(context, user, userSettings, apiClient);
}); });
}); });
}; }
PlaybackSettings.prototype.submit = function () { submit() {
onSubmit.call(this); onSubmit.call(this);
}; }
PlaybackSettings.prototype.destroy = function () { destroy() {
this.options = null; this.options = null;
}; }
}
return PlaybackSettings; /* eslint-enable indent */
}); export default PlaybackSettings;

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

@ -1,9 +1,19 @@
define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlayManager', 'playMethodHelper', 'layoutManager', 'serverNotifications', 'paper-icon-button-light', 'css!./playerstats'], function (events, globalize, playbackManager, connectionManager, syncPlayManager, playMethodHelper, layoutManager, serverNotifications) { import events from 'events';
'use strict'; import globalize from 'globalize';
import playbackManager from 'playbackManager';
import connectionManager from 'connectionManager';
import syncPlayManager from 'syncPlayManager';
import playMethodHelper from 'playMethodHelper';
import layoutManager from 'layoutManager';
import serverNotifications from 'serverNotifications';
import 'paper-icon-button-light';
import 'css!./playerstats';
/* eslint-disable indent */
function init(instance) { function init(instance) {
var parent = document.createElement('div'); const parent = document.createElement('div');
parent.classList.add('playerStats'); parent.classList.add('playerStats');
@ -13,7 +23,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
parent.classList.add('hide'); parent.classList.add('hide');
var button; let button;
if (layoutManager.tv) { if (layoutManager.tv) {
button = ''; button = '';
@ -21,7 +31,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
button = '<button type="button" is="paper-icon-button-light" class="playerStats-closeButton"><span class="material-icons close"></span></button>'; button = '<button type="button" is="paper-icon-button-light" class="playerStats-closeButton"><span class="material-icons close"></span></button>';
} }
var contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content'; const contentClass = layoutManager.tv ? 'playerStats-content playerStats-content-tv' : 'playerStats-content';
parent.innerHTML = '<div class="' + contentClass + '">' + button + '<div class="playerStats-stats"></div></div>'; parent.innerHTML = '<div class="' + contentClass + '">' + button + '<div class="playerStats-stats"></div></div>';
@ -44,9 +54,9 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
elem.querySelector('.playerStats-stats').innerHTML = categories.map(function (category) { elem.querySelector('.playerStats-stats').innerHTML = categories.map(function (category) {
var categoryHtml = ''; let categoryHtml = '';
var stats = category.stats; const stats = category.stats;
if (stats.length && category.name) { if (stats.length && category.name) {
categoryHtml += '<div class="playerStats-stat playerStats-stat-header">'; categoryHtml += '<div class="playerStats-stat playerStats-stat-header">';
@ -62,11 +72,11 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
categoryHtml += '</div>'; categoryHtml += '</div>';
} }
for (var i = 0, length = stats.length; i < length; i++) { for (let i = 0, length = stats.length; i < length; i++) {
categoryHtml += '<div class="playerStats-stat">'; categoryHtml += '<div class="playerStats-stat">';
var stat = stats[i]; const stat = stats[i];
categoryHtml += '<div class="playerStats-stat-label">'; categoryHtml += '<div class="playerStats-stat-label">';
categoryHtml += stat.label; categoryHtml += stat.label;
@ -86,13 +96,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
function getSession(instance, player) { function getSession(instance, player) {
var now = new Date().getTime(); const now = new Date().getTime();
if ((now - (instance.lastSessionTime || 0)) < 10000) { if ((now - (instance.lastSessionTime || 0)) < 10000) {
return Promise.resolve(instance.lastSession); return Promise.resolve(instance.lastSession);
} }
var apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId); const apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
return apiClient.getSessions({ return apiClient.getSessions({
deviceId: apiClient.deviceId() deviceId: apiClient.deviceId()
@ -114,12 +124,12 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
function getTranscodingStats(session, player, displayPlayMethod) { function getTranscodingStats(session, player, displayPlayMethod) {
var sessionStats = []; const sessionStats = [];
var videoCodec; let videoCodec;
var audioCodec; let audioCodec;
var totalBitrate; let totalBitrate;
var audioChannels; let audioChannels;
if (session.TranscodingInfo) { if (session.TranscodingInfo) {
@ -208,11 +218,11 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
function getMediaSourceStats(session, player, displayPlayMethod) { function getMediaSourceStats(session, player, displayPlayMethod) {
var sessionStats = []; const sessionStats = [];
var mediaSource = playbackManager.currentMediaSource(player) || {}; const mediaSource = playbackManager.currentMediaSource(player) || {};
var totalBitrate = mediaSource.Bitrate; const totalBitrate = mediaSource.Bitrate;
var mediaFileSize = mediaSource.Size; const mediaFileSize = mediaSource.Size;
if (mediaSource.Container) { if (mediaSource.Container) {
sessionStats.push({ sessionStats.push({
@ -236,26 +246,26 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
}); });
} }
var mediaStreams = mediaSource.MediaStreams || []; const mediaStreams = mediaSource.MediaStreams || [];
var videoStream = mediaStreams.filter(function (s) { const videoStream = mediaStreams.filter(function (s) {
return s.Type === 'Video'; return s.Type === 'Video';
})[0] || {}; })[0] || {};
var videoCodec = videoStream.Codec; const videoCodec = videoStream.Codec;
var audioStreamIndex = playbackManager.getAudioStreamIndex(player); const audioStreamIndex = playbackManager.getAudioStreamIndex(player);
var audioStream = playbackManager.audioTracks(player).filter(function (s) { const audioStream = playbackManager.audioTracks(player).filter(function (s) {
return s.Type === 'Audio' && s.Index === audioStreamIndex; return s.Type === 'Audio' && s.Index === audioStreamIndex;
})[0] || {}; })[0] || {};
var audioCodec = audioStream.Codec; const audioCodec = audioStream.Codec;
var audioChannels = audioStream.Channels; const audioChannels = audioStream.Channels;
var videoInfos = []; const videoInfos = [];
if (videoCodec) { if (videoCodec) {
videoInfos.push(videoCodec.toUpperCase()); videoInfos.push(videoCodec.toUpperCase());
@ -279,7 +289,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
}); });
} }
var audioInfos = []; const audioInfos = [];
if (audioCodec) { if (audioCodec) {
audioInfos.push(audioCodec.toUpperCase()); audioInfos.push(audioCodec.toUpperCase());
@ -328,8 +338,8 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
} }
function getSyncPlayStats() { function getSyncPlayStats() {
var syncStats = []; const syncStats = [];
var stats = syncPlayManager.getStats(); const stats = syncPlayManager.getStats();
syncStats.push({ syncStats.push({
label: globalize.translate('LabelSyncPlayTimeOffset'), label: globalize.translate('LabelSyncPlayTimeOffset'),
@ -351,18 +361,18 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
function getStats(instance, player) { function getStats(instance, player) {
var statsPromise = player.getStats ? player.getStats() : Promise.resolve({}); const statsPromise = player.getStats ? player.getStats() : Promise.resolve({});
var sessionPromise = getSession(instance, player); const sessionPromise = getSession(instance, player);
return Promise.all([statsPromise, sessionPromise]).then(function (responses) { return Promise.all([statsPromise, sessionPromise]).then(function (responses) {
var playerStatsResult = responses[0]; const playerStatsResult = responses[0];
var playerStats = playerStatsResult.categories || []; const playerStats = playerStatsResult.categories || [];
var session = responses[1]; const session = responses[1];
var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
var baseCategory = { const baseCategory = {
stats: [], stats: [],
name: 'Playback Info' name: 'Playback Info'
}; };
@ -377,13 +387,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
value: player.name value: player.name
}); });
var categories = []; const categories = [];
categories.push(baseCategory); categories.push(baseCategory);
for (var i = 0, length = playerStats.length; i < length; i++) { for (let i = 0, length = playerStats.length; i < length; i++) {
var category = playerStats[i]; const category = playerStats[i];
if (category.type === 'audio') { if (category.type === 'audio') {
category.name = 'Audio Info'; category.name = 'Audio Info';
} else if (category.type === 'video') { } else if (category.type === 'video') {
@ -405,7 +415,8 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
name: 'Original Media Info' name: 'Original Media Info'
}); });
if (syncPlayManager.isSyncPlayEnabled()) { var apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
if (syncPlayManager.isSyncPlayEnabled() && apiClient.isMinServerVersion('10.6.0')) {
categories.push({ categories.push({
stats: getSyncPlayStats(), stats: getSyncPlayStats(),
name: 'SyncPlay Info' name: 'SyncPlay Info'
@ -418,7 +429,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
function renderPlayerStats(instance, player) { function renderPlayerStats(instance, player) {
var now = new Date().getTime(); const now = new Date().getTime();
if ((now - (instance.lastRender || 0)) < 700) { if ((now - (instance.lastRender || 0)) < 700) {
return; return;
@ -428,7 +439,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
getStats(instance, player).then(function (stats) { getStats(instance, player).then(function (stats) {
var elem = instance.element; const elem = instance.element;
if (!elem) { if (!elem) {
return; return;
} }
@ -439,7 +450,7 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
function bindEvents(instance, player) { function bindEvents(instance, player) {
var localOnTimeUpdate = function () { const localOnTimeUpdate = function () {
renderPlayerStats(instance, player); renderPlayerStats(instance, player);
}; };
@ -449,14 +460,15 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
function unbindEvents(instance, player) { function unbindEvents(instance, player) {
var localOnTimeUpdate = instance.onTimeUpdate; const localOnTimeUpdate = instance.onTimeUpdate;
if (localOnTimeUpdate) { if (localOnTimeUpdate) {
events.off(player, 'timeupdate', localOnTimeUpdate); events.off(player, 'timeupdate', localOnTimeUpdate);
} }
} }
function PlayerStats(options) { class PlayerStats {
constructor(options) {
this.options = options; this.options = options;
@ -465,13 +477,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
this.enabled(true); this.enabled(true);
} }
PlayerStats.prototype.enabled = function (enabled) { enabled(enabled) {
if (enabled == null) { if (enabled == null) {
return this._enabled; return this._enabled;
} }
var options = this.options; const options = this.options;
if (!options) { if (!options) {
return; return;
@ -485,15 +497,15 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
this.element.classList.add('hide'); this.element.classList.add('hide');
unbindEvents(this, options.player); unbindEvents(this, options.player);
} }
}; }
PlayerStats.prototype.toggle = function () { toggle() {
this.enabled(!this.enabled()); this.enabled(!this.enabled());
}; }
PlayerStats.prototype.destroy = function () { destroy() {
var options = this.options; const options = this.options;
if (options) { if (options) {
@ -501,12 +513,14 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlay
unbindEvents(this, options.player); unbindEvents(this, options.player);
} }
var elem = this.element; const elem = this.element;
if (elem) { if (elem) {
elem.parentNode.removeChild(elem); elem.parentNode.removeChild(elem);
this.element = null; this.element = null;
} }
}; }
}
return PlayerStats; /* eslint-enable indent */
});
export default PlayerStats;

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

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

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

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

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

@ -156,7 +156,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
var html = ''; var html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;

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

@ -116,7 +116,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
var html = ''; var html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;

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

@ -219,7 +219,7 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
require(['text!./recordingfields.template.html'], function (template) { require(['text!./recordingfields.template.html'], function (template) {
var options = self.options; var options = self.options;
var context = options.parent; var context = options.parent;
context.innerHTML = globalize.translateDocument(template, 'core'); context.innerHTML = globalize.translateHtml(template, 'core');
context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self)); context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self));
context.querySelector('.seriesRecordingButton').addEventListener('click', onRecordSeriesChange.bind(self)); context.querySelector('.seriesRecordingButton').addEventListener('click', onRecordSeriesChange.bind(self));

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

@ -34,7 +34,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
require(['confirm'], function (confirm) { require(['confirm'], function (confirm) {
confirm({ confirm.default({
text: globalize.translate('MessageConfirmRecordingCancellation'), text: globalize.translate('MessageConfirmRecordingCancellation'),
primary: 'delete', primary: 'delete',
@ -59,7 +59,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
require(['confirm'], function (confirm) { require(['confirm'], function (confirm) {
confirm({ confirm.default({
text: globalize.translate('MessageConfirmRecordingCancellation'), text: globalize.translate('MessageConfirmRecordingCancellation'),
primary: 'delete', primary: 'delete',

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

@ -168,7 +168,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
var dlg = options.context; var dlg = options.context;
dlg.classList.add('hide'); dlg.classList.add('hide');
dlg.innerHTML = globalize.translateDocument(template, 'core'); dlg.innerHTML = globalize.translateHtml(template, 'core');
dlg.querySelector('.formDialogHeader').classList.add('hide'); dlg.querySelector('.formDialogHeader').classList.add('hide');
dlg.querySelector('.formDialogFooter').classList.add('hide'); dlg.querySelector('.formDialogFooter').classList.add('hide');
@ -221,7 +221,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
var html = ''; var html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateHtml(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;

4
src/components/remotecontrol/remotecontrol.css
View file

@ -278,6 +278,10 @@
flex-direction: column; flex-direction: column;
} }
.layout-desktop .nowPlayingPageUserDataButtons {
display: none;
}
.nowPlayingInfoContainer { .nowPlayingInfoContainer {
-webkit-box-orient: vertical !important; -webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important; -webkit-box-direction: normal !important;

21
src/components/remotecontrol/remotecontrol.js
View file

@ -215,7 +215,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>'; context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>';
}); });
} else { } else {
backdrop.clear(); backdrop.clearBackdrop();
context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
} }
} }
@ -359,7 +359,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function updateRepeatModeDisplay(repeatMode) { function updateRepeatModeDisplay(repeatMode) {
var context = dlg; var context = dlg;
let toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton'); let toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
const cssClass = 'repeatButton-active'; const cssClass = 'buttonActive';
let innHtml = '<span class="material-icons repeat"></span>'; let innHtml = '<span class="material-icons repeat"></span>';
let repeatOn = true; let repeatOn = true;
@ -494,7 +494,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
itemsContainer.innerHTML = html; itemsContainer.innerHTML = html;
if (focusedItemPlaylistId !== null) { if (focusedItemPlaylistId !== null) {
focusedItemPlaylistId = focusedItemPlaylistId.getAttribute('data-playlistitemid'); focusedItemPlaylistId = focusedItemPlaylistId.getAttribute('data-playlistitemid');
const newFocusedItem = itemsContainer.querySelector(`button[data-playlistitemid=${focusedItemPlaylistId}]`); const newFocusedItem = itemsContainer.querySelector(`button[data-playlistitemid="${focusedItemPlaylistId}"]`);
if (newFocusedItem !== null) { if (newFocusedItem !== null) {
newFocusedItem.focus(); newFocusedItem.focus();
} }
@ -503,7 +503,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
var playlistItemId = playbackManager.getCurrentPlaylistItemId(player); var playlistItemId = playbackManager.getCurrentPlaylistItemId(player);
if (playlistItemId) { if (playlistItemId) {
var img = itemsContainer.querySelector('.listItem[data-playlistItemId="' + playlistItemId + '"] .listItemImage'); var img = itemsContainer.querySelector(`.listItem[data-playlistItemId="${playlistItemId}"] .listItemImage`);
if (img) { if (img) {
img.classList.remove('lazy'); img.classList.remove('lazy');
@ -528,7 +528,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function onShuffleQueueModeChange(updateView = true) { function onShuffleQueueModeChange(updateView = true) {
let shuffleMode = playbackManager.getQueueShuffleMode(this); let shuffleMode = playbackManager.getQueueShuffleMode(this);
let context = dlg; let context = dlg;
const cssClass = 'shuffleQueue-active'; const cssClass = 'buttonActive';
let shuffleButtons = context.querySelectorAll('.btnShuffleQueue'); let shuffleButtons = context.querySelectorAll('.btnShuffleQueue');
for (let shuffleButton of shuffleButtons) { for (let shuffleButton of shuffleButtons) {
@ -674,7 +674,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
require(['playlistEditor'], function (playlistEditor) { require(['playlistEditor'], function (playlistEditor) {
getSaveablePlaylistItems().then(function (items) { getSaveablePlaylistItems().then(function (items) {
var serverId = items.length ? items[0].ServerId : ApiClient.serverId(); var serverId = items.length ? items[0].ServerId : ApiClient.serverId();
new playlistEditor().show({ new playlistEditor.showEditor({
items: items.map(function (i) { items: items.map(function (i) {
return i.Id; return i.Id;
}), }),
@ -788,13 +788,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
return datetime.getDisplayRunningTime(ticks); return datetime.getDisplayRunningTime(ticks);
}; };
function setVolume() { context.querySelector('.nowPlayingVolumeSlider').addEventListener('input', (e) => {
playbackManager.setVolume(this.value, currentPlayer); playbackManager.setVolume(e.target.value, currentPlayer);
} });
context.querySelector('.nowPlayingVolumeSlider').addEventListener('change', setVolume);
context.querySelector('.nowPlayingVolumeSlider').addEventListener('mousemove', setVolume);
context.querySelector('.nowPlayingVolumeSlider').addEventListener('touchmove', setVolume);
context.querySelector('.buttonMute').addEventListener('click', function () { context.querySelector('.buttonMute').addEventListener('click', function () {
playbackManager.toggleMute(currentPlayer); playbackManager.toggleMute(currentPlayer);
}); });

62
src/components/search/searchfields.js
View file

@ -1,10 +1,19 @@
define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPicker', 'emby-input', 'flexStyles', 'material-icons', 'css!./searchfields'], function (layoutManager, globalize, require, events, browser, AlphaPicker) { import layoutManager from 'layoutManager';
'use strict'; import globalize from 'globalize';
import events from 'events';
import browser from 'browser';
import AlphaPicker from 'alphaPicker';
import 'emby-input';
import 'flexStyles';
import 'material-icons';
import 'css!./searchfields';
/* eslint-disable indent */
function onSearchTimeout() { function onSearchTimeout() {
var instance = this; const instance = this;
var value = instance.nextSearchValue; let value = instance.nextSearchValue;
value = (value || '').trim(); value = (value || '').trim();
events.trigger(instance, 'search', [value]); events.trigger(instance, 'search', [value]);
@ -22,14 +31,14 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
function onAlphaValueClicked(e) { function onAlphaValueClicked(e) {
var value = e.detail.value; const value = e.detail.value;
var searchFieldsInstance = this; const searchFieldsInstance = this;
var txtSearch = searchFieldsInstance.options.element.querySelector('.searchfields-txtSearch'); const txtSearch = searchFieldsInstance.options.element.querySelector('.searchfields-txtSearch');
if (value === 'backspace') { if (value === 'backspace') {
var val = txtSearch.value; const val = txtSearch.value;
txtSearch.value = val.length ? val.substring(0, val.length - 1) : ''; txtSearch.value = val.length ? val.substring(0, val.length - 1) : '';
} else { } else {
@ -53,16 +62,16 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
function onSearchInput(e) { function onSearchInput(e) {
var value = e.target.value; const value = e.target.value;
var searchFieldsInstance = this; const searchFieldsInstance = this;
triggerSearch(searchFieldsInstance, value); triggerSearch(searchFieldsInstance, value);
} }
function embed(elem, instance, options) { function embed(elem, instance, options) {
require(['text!./searchfields.template.html'], function (template) { import('text!./searchfields.template.html').then(({default: template}) => {
var html = globalize.translateDocument(template, 'core'); let html = globalize.translateHtml(template, 'core');
if (browser.tizen || browser.orsay) { if (browser.tizen || browser.orsay) {
html = html.replace('<input ', '<input readonly '); html = html.replace('<input ', '<input readonly ');
@ -72,10 +81,10 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
elem.classList.add('searchFields'); elem.classList.add('searchFields');
var txtSearch = elem.querySelector('.searchfields-txtSearch'); const txtSearch = elem.querySelector('.searchfields-txtSearch');
if (layoutManager.tv) { if (layoutManager.tv) {
var alphaPickerElement = elem.querySelector('.alphaPicker'); const alphaPickerElement = elem.querySelector('.alphaPicker');
elem.querySelector('.alphaPicker').classList.remove('hide'); elem.querySelector('.alphaPicker').classList.remove('hide');
initAlphaPicker(alphaPickerElement, instance); initAlphaPicker(alphaPickerElement, instance);
@ -87,38 +96,39 @@ define(['layoutManager', 'globalize', 'require', 'events', 'browser', 'alphaPick
}); });
} }
function SearchFields(options) { class SearchFields {
constructor(options) {
this.options = options; this.options = options;
embed(options.element, this, options); embed(options.element, this, options);
} }
focus() {
SearchFields.prototype.focus = function () {
this.options.element.querySelector('.searchfields-txtSearch').focus(); this.options.element.querySelector('.searchfields-txtSearch').focus();
}; }
destroy() {
SearchFields.prototype.destroy = function () { const options = this.options;
var options = this.options;
if (options) { if (options) {
options.element.classList.remove('searchFields'); options.element.classList.remove('searchFields');
} }
this.options = null; this.options = null;
var alphaPicker = this.alphaPicker; const alphaPicker = this.alphaPicker;
if (alphaPicker) { if (alphaPicker) {
alphaPicker.destroy(); alphaPicker.destroy();
} }
this.alphaPicker = null; this.alphaPicker = null;
var searchTimeout = this.searchTimeout; const searchTimeout = this.searchTimeout;
if (searchTimeout) { if (searchTimeout) {
clearTimeout(searchTimeout); clearTimeout(searchTimeout);
} }
this.searchTimeout = null; this.searchTimeout = null;
this.nextSearchValue = null; this.nextSearchValue = null;
}; }
}
return SearchFields; export default SearchFields;
});
/* eslint-enable indent */

65
src/components/search/searchresults.js
View file

@ -1,9 +1,19 @@
define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager', 'cardBuilder', 'appRouter', 'emby-scroller', 'emby-itemscontainer', 'emby-button'], function (layoutManager, globalize, require, events, connectionManager, cardBuilder, appRouter) { import layoutManager from 'layoutManager';
'use strict'; import globalize from 'globalize';
import require from 'require';
import events from 'events';
import connectionManager from 'connectionManager';
import cardBuilder from 'cardBuilder';
import appRouter from 'appRouter';
import 'emby-scroller';
import 'emby-itemscontainer';
import 'emby-button';
/* eslint-disable indent */
function loadSuggestions(instance, context, apiClient) { function loadSuggestions(instance, context, apiClient) {
var options = { const options = {
SortBy: 'IsFavoriteOrLiked,Random', SortBy: 'IsFavoriteOrLiked,Random',
IncludeItemTypes: 'Movie,Series,MusicArtist', IncludeItemTypes: 'Movie,Series,MusicArtist',
@ -21,18 +31,18 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
result.Items = []; result.Items = [];
} }
var html = result.Items.map(function (i) { const html = result.Items.map(function (i) {
var href = appRouter.getRouteUrl(i); const href = appRouter.getRouteUrl(i);
var itemHtml = '<div><a is="emby-linkbutton" class="button-link" style="display:inline-block;padding:.5em 1em;" href="' + href + '">'; let itemHtml = '<div><a is="emby-linkbutton" class="button-link" style="display:inline-block;padding:.5em 1em;" href="' + href + '">';
itemHtml += i.Name; itemHtml += i.Name;
itemHtml += '</a></div>'; itemHtml += '</a></div>';
return itemHtml; return itemHtml;
}).join(''); }).join('');
var searchSuggestions = context.querySelector('.searchSuggestions'); const searchSuggestions = context.querySelector('.searchSuggestions');
searchSuggestions.querySelector('.searchSuggestionsList').innerHTML = html; searchSuggestions.querySelector('.searchSuggestionsList').innerHTML = html;
if (result.Items.length) { if (result.Items.length) {
@ -49,9 +59,9 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
}); });
} }
var allowSearch = true; let allowSearch = true;
var queryIncludeItemTypes = query.IncludeItemTypes; const queryIncludeItemTypes = query.IncludeItemTypes;
if (instance.options.collectionType === 'tvshows') { if (instance.options.collectionType === 'tvshows') {
if (query.IncludeArtists) { if (query.IncludeArtists) {
@ -127,7 +137,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
query.EnableTotalRecordCount = false; query.EnableTotalRecordCount = false;
query.ImageTypeLimit = 1; query.ImageTypeLimit = 1;
var methodName = 'getItems'; let methodName = 'getItems';
if (!query.IncludeMedia) { if (!query.IncludeMedia) {
if (query.IncludePeople) { if (query.IncludePeople) {
@ -464,7 +474,7 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
showTitle: true, showTitle: true,
overlayText: false, overlayText: false,
centerText: true, centerText: true,
action: 'play' overlayPlayButton: true
}); });
@ -566,9 +576,9 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
section = context.querySelector(section); section = context.querySelector(section);
var items = result.Items || result.SearchHints; const items = result.Items || result.SearchHints;
var itemsContainer = section.querySelector('.itemsContainer'); const itemsContainer = section.querySelector('.itemsContainer');
cardBuilder.buildCards(items, Object.assign({ cardBuilder.buildCards(items, Object.assign({
@ -588,20 +598,20 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
} }
function replaceAll(originalString, strReplace, strWith) { function replaceAll(originalString, strReplace, strWith) {
var reg = new RegExp(strReplace, 'ig'); const reg = new RegExp(strReplace, 'ig');
return originalString.replace(reg, strWith); return originalString.replace(reg, strWith);
} }
function embed(elem, instance, options) { function embed(elem, instance, options) {
require(['text!./searchresults.template.html'], function (template) { import('text!./searchresults.template.html').then(({default: template}) => {
if (!enableScrollX()) { if (!enableScrollX()) {
template = replaceAll(template, 'data-horizontal="true"', 'data-horizontal="false"'); template = replaceAll(template, 'data-horizontal="true"', 'data-horizontal="false"');
template = replaceAll(template, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap'); template = replaceAll(template, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap');
} }
var html = globalize.translateDocument(template, 'core'); const html = globalize.translateHtml(template, 'core');
elem.innerHTML = html; elem.innerHTML = html;
@ -610,28 +620,29 @@ define(['layoutManager', 'globalize', 'require', 'events', 'connectionManager',
}); });
} }
function SearchResults(options) { class SearchResults {
constructor(options) {
this.options = options; this.options = options;
embed(options.element, this, options); embed(options.element, this, options);
} }
search(value) {
SearchResults.prototype.search = function (value) { const apiClient = connectionManager.getApiClient(this.options.serverId);
var apiClient = connectionManager.getApiClient(this.options.serverId);
search(this, apiClient, this.options.element, value); search(this, apiClient, this.options.element, value);
}; }
destroy() {
SearchResults.prototype.destroy = function () { const options = this.options;
var options = this.options;
if (options) { if (options) {
options.element.classList.remove('searchFields'); options.element.classList.remove('searchFields');
} }
this.options = null; this.options = null;
}; }
}
return SearchResults; export default SearchResults;
});
/* eslint-enable indent */

22
src/components/settingshelper.js Normal file
View file

@ -0,0 +1,22 @@
import globalize from 'globalize';
/**
* Helper for handling settings.
* @module components/settingsHelper
*/
export function populateLanguages(select, languages) {
let html = '';
html += "<option value=''>" + globalize.translate('AnyLanguage') + '</option>';
for (let i = 0, length = languages.length; i < length; i++) {
const culture = languages[i];
html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
}
select.innerHTML = html;
}
export default {
populateLanguages: populateLanguages
};

139
src/components/shortcuts.js
View file

@ -1,18 +1,30 @@
define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'globalize', 'loading', 'dom', 'recordingHelper'], function (playbackManager, inputManager, connectionManager, appRouter, globalize, loading, dom, recordingHelper) { /* eslint-disable indent */
'use strict';
/**
* Module shortcuts.
* @module components/shortcuts
*/
import playbackManager from 'playbackManager';
import inputManager from 'inputManager';
import connectionManager from 'connectionManager';
import appRouter from 'appRouter';
import globalize from 'globalize';
import dom from 'dom';
import recordingHelper from 'recordingHelper';
function playAllFromHere(card, serverId, queue) { function playAllFromHere(card, serverId, queue) {
var parent = card.parentNode; const parent = card.parentNode;
var className = card.classList.length ? ('.' + card.classList[0]) : ''; const className = card.classList.length ? (`.${card.classList[0]}`) : '';
var cards = parent.querySelectorAll(className + '[data-id]'); const cards = parent.querySelectorAll(`${className}[data-id]`);
var ids = []; const ids = [];
var foundCard = false; let foundCard = false;
var startIndex; let startIndex;
for (var i = 0, length = cards.length; i < length; i++) { for (let i = 0, length = cards.length; i < length; i++) {
if (cards[i] === card) { if (cards[i] === card) {
foundCard = true; foundCard = true;
startIndex = i; startIndex = i;
@ -22,12 +34,12 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
} }
} }
var itemsContainer = dom.parentWithClass(card, 'itemsContainer'); const itemsContainer = dom.parentWithClass(card, 'itemsContainer');
if (itemsContainer && itemsContainer.fetchData) { if (itemsContainer && itemsContainer.fetchData) {
var queryOptions = queue ? { StartIndex: startIndex } : {}; const queryOptions = queue ? { StartIndex: startIndex } : {};
return itemsContainer.fetchData(queryOptions).then(function (result) { return itemsContainer.fetchData(queryOptions).then(result => {
if (queue) { if (queue) {
return playbackManager.queue({ return playbackManager.queue({
@ -64,7 +76,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
function showProgramDialog(item) { function showProgramDialog(item) {
require(['recordingCreator'], function (recordingCreator) { import('recordingCreator').then(({default:recordingCreator}) => {
recordingCreator.show(item.Id, item.ServerId); recordingCreator.show(item.Id, item.ServerId);
}); });
@ -73,11 +85,11 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
function getItem(button) { function getItem(button) {
button = dom.parentWithAttribute(button, 'data-id'); button = dom.parentWithAttribute(button, 'data-id');
var serverId = button.getAttribute('data-serverid'); const serverId = button.getAttribute('data-serverid');
var id = button.getAttribute('data-id'); const id = button.getAttribute('data-id');
var type = button.getAttribute('data-type'); const type = button.getAttribute('data-type');
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
if (type === 'Timer') { if (type === 'Timer') {
return apiClient.getLiveTvTimer(id); return apiClient.getLiveTvTimer(id);
@ -99,19 +111,19 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
function showContextMenu(card, options) { function showContextMenu(card, options) {
getItem(card).then(function (item) { getItem(card).then(item => {
var playlistId = card.getAttribute('data-playlistid'); const playlistId = card.getAttribute('data-playlistid');
var collectionId = card.getAttribute('data-collectionid'); const collectionId = card.getAttribute('data-collectionid');
if (playlistId) { if (playlistId) {
var elem = dom.parentWithAttribute(card, 'data-playlistitemid'); const elem = dom.parentWithAttribute(card, 'data-playlistitemid');
item.PlaylistItemId = elem ? elem.getAttribute('data-playlistitemid') : null; item.PlaylistItemId = elem ? elem.getAttribute('data-playlistitemid') : null;
} }
require(['itemContextMenu'], function (itemContextMenu) { import('itemContextMenu').then(({default: itemContextMenu}) => {
connectionManager.getApiClient(item.ServerId).getCurrentUser().then(function (user) { connectionManager.getApiClient(item.ServerId).getCurrentUser().then(user => {
itemContextMenu.show(Object.assign({ itemContextMenu.show(Object.assign({
item: item, item: item,
play: true, play: true,
@ -122,9 +134,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
collectionId: collectionId, collectionId: collectionId,
user: user user: user
}, options || {})).then(function (result) { }, options || {})).then(result => {
var itemsContainer;
if (result.command === 'playallfromhere' || result.command === 'queueallfromhere') { if (result.command === 'playallfromhere' || result.command === 'queueallfromhere') {
executeAction(card, options.positionTo, result.command); executeAction(card, options.positionTo, result.command);
@ -157,9 +167,9 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
function showPlayMenu(card, target) { function showPlayMenu(card, target) {
var item = getItemInfoFromCard(card); const item = getItemInfoFromCard(card);
require(['playMenu'], function (playMenu) { import('playMenu').then(({default: playMenu}) => {
playMenu.show({ playMenu.show({
@ -170,7 +180,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
} }
function sendToast(text) { function sendToast(text) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(text); toast(text);
}); });
} }
@ -179,19 +189,19 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
target = target || card; target = target || card;
var id = card.getAttribute('data-id'); let id = card.getAttribute('data-id');
if (!id) { if (!id) {
card = dom.parentWithAttribute(card, 'data-id'); card = dom.parentWithAttribute(card, 'data-id');
id = card.getAttribute('data-id'); id = card.getAttribute('data-id');
} }
var item = getItemInfoFromCard(card); const item = getItemInfoFromCard(card);
var serverId = item.ServerId; const serverId = item.ServerId;
var type = item.Type; const type = item.Type;
var playableItemId = type === 'Program' ? item.ChannelId : item.Id; const playableItemId = type === 'Program' ? item.ChannelId : item.Id;
if (item.MediaType === 'Photo' && action === 'link') { if (item.MediaType === 'Photo' && action === 'link') {
action = 'play'; action = 'play';
@ -213,7 +223,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
}); });
} else if (action === 'play' || action === 'resume') { } else if (action === 'play' || action === 'resume') {
var startPositionTicks = parseInt(card.getAttribute('data-positionticks') || '0'); const startPositionTicks = parseInt(card.getAttribute('data-positionticks') || '0');
playbackManager.play({ playbackManager.play({
ids: [playableItemId], ids: [playableItemId],
@ -244,7 +254,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
onRecordCommand(serverId, id, type, card.getAttribute('data-timerid'), card.getAttribute('data-seriestimerid')); onRecordCommand(serverId, id, type, card.getAttribute('data-timerid'), card.getAttribute('data-seriestimerid'));
} else if (action === 'menu') { } else if (action === 'menu') {
var options = target.getAttribute('data-playoptions') === 'false' ? const options = target.getAttribute('data-playoptions') === 'false' ?
{ {
shuffle: false, shuffle: false,
instantMix: false, instantMix: false,
@ -261,7 +271,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
} else if (action === 'playmenu') { } else if (action === 'playmenu') {
showPlayMenu(card, target); showPlayMenu(card, target);
} else if (action === 'edit') { } else if (action === 'edit') {
getItem(target).then(function (item) { getItem(target).then(item => {
editItem(item, serverId); editItem(item, serverId);
}); });
} else if (action === 'playtrailer') { } else if (action === 'playtrailer') {
@ -270,9 +280,9 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
getItem(target).then(addToPlaylist); getItem(target).then(addToPlaylist);
} else if (action === 'custom') { } else if (action === 'custom') {
var customAction = target.getAttribute('data-customaction'); const customAction = target.getAttribute('data-customaction');
card.dispatchEvent(new CustomEvent('action-' + customAction, { card.dispatchEvent(new CustomEvent(`action-${customAction}`, {
detail: { detail: {
playlistItemId: card.getAttribute('data-playlistitemid') playlistItemId: card.getAttribute('data-playlistitemid')
}, },
@ -283,7 +293,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
} }
function addToPlaylist(item) { function addToPlaylist(item) {
require(['playlistEditor'], function (playlistEditor) { import('playlistEditor').then(({default: playlistEditor}) => {
new playlistEditor().show({ new playlistEditor().show({
items: [item.Id], items: [item.Id],
@ -295,35 +305,35 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
function playTrailer(item) { function playTrailer(item) {
var apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
apiClient.getLocalTrailers(apiClient.getCurrentUserId(), item.Id).then(function (trailers) { apiClient.getLocalTrailers(apiClient.getCurrentUserId(), item.Id).then(trailers => {
playbackManager.play({ items: trailers }); playbackManager.play({ items: trailers });
}); });
} }
function editItem(item, serverId) { function editItem(item, serverId) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return new Promise(function (resolve, reject) { return new Promise((resolve, reject) => {
var serverId = apiClient.serverInfo().Id; const serverId = apiClient.serverInfo().Id;
if (item.Type === 'Timer') { if (item.Type === 'Timer') {
if (item.ProgramId) { if (item.ProgramId) {
require(['recordingCreator'], function (recordingCreator) { import('recordingCreator').then(({default: recordingCreator}) => {
recordingCreator.show(item.ProgramId, serverId).then(resolve, reject); recordingCreator.show(item.ProgramId, serverId).then(resolve, reject);
}); });
} else { } else {
require(['recordingEditor'], function (recordingEditor) { import('recordingEditor').then(({default: recordingEditor}) => {
recordingEditor.show(item.Id, serverId).then(resolve, reject); recordingEditor.show(item.Id, serverId).then(resolve, reject);
}); });
} }
} else { } else {
require(['metadataEditor'], function (metadataEditor) { import('metadataEditor').then(({default: metadataEditor}) => {
metadataEditor.show(item.Id, serverId).then(resolve, reject); metadataEditor.show(item.Id, serverId).then(resolve, reject);
}); });
@ -335,19 +345,19 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
if (type === 'Program' || timerId || seriesTimerId) { if (type === 'Program' || timerId || seriesTimerId) {
var programId = type === 'Program' ? id : null; const programId = type === 'Program' ? id : null;
recordingHelper.toggleRecording(serverId, programId, timerId, seriesTimerId); recordingHelper.toggleRecording(serverId, programId, timerId, seriesTimerId);
} }
} }
function onClick(e) { export function onClick(e) {
var card = dom.parentWithClass(e.target, 'itemAction'); const card = dom.parentWithClass(e.target, 'itemAction');
if (card) { if (card) {
var actionElement = card; let actionElement = card;
var action = actionElement.getAttribute('data-action'); let action = actionElement.getAttribute('data-action');
if (!action) { if (!action) {
actionElement = dom.parentWithAttribute(actionElement, 'data-action'); actionElement = dom.parentWithAttribute(actionElement, 'data-action');
@ -368,12 +378,12 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
function onCommand(e) { function onCommand(e) {
var cmd = e.detail.command; const cmd = e.detail.command;
if (cmd === 'play' || cmd === 'resume' || cmd === 'record' || cmd === 'menu' || cmd === 'info') { if (cmd === 'play' || cmd === 'resume' || cmd === 'record' || cmd === 'menu' || cmd === 'info') {
var target = e.target; const target = e.target;
var card = dom.parentWithClass(target, 'itemAction') || dom.parentWithAttribute(target, 'data-id'); const card = dom.parentWithClass(target, 'itemAction') || dom.parentWithAttribute(target, 'data-id');
if (card) { if (card) {
e.preventDefault(); e.preventDefault();
@ -383,7 +393,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
} }
} }
function on(context, options) { export function on(context, options) {
options = options || {}; options = options || {};
@ -396,7 +406,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
} }
} }
function off(context, options) { export function off(context, options) {
options = options || {}; options = options || {};
context.removeEventListener('click', onClick); context.removeEventListener('click', onClick);
@ -406,23 +416,24 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'appRouter', 'gl
} }
} }
function getShortcutAttributesHtml(item, serverId) { export function getShortcutAttributesHtml(item, serverId) {
var html = 'data-id="' + item.Id + '" data-serverid="' + (serverId || item.ServerId) + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '" data-channelid="' + item.ChannelId + '" data-isfolder="' + item.IsFolder + '"'; let html = `data-id="${item.Id}" data-serverid="${serverId || item.ServerId}" data-type="${item.Type}" data-mediatype="${item.MediaType}" data-channelid="${item.ChannelId}" data-isfolder="${item.IsFolder}"`;
var collectionType = item.CollectionType; const collectionType = item.CollectionType;
if (collectionType) { if (collectionType) {
html += ' data-collectiontype="' + collectionType + '"'; html += ` data-collectiontype="${collectionType}"`;
} }
return html; return html;
} }
return { /* eslint-enable indent */
export default {
on: on, on: on,
off: off, off: off,
onClick: onClick, onClick: onClick,
getShortcutAttributesHtml: getShortcutAttributesHtml getShortcutAttributesHtml: getShortcutAttributesHtml
}; };
});

2
src/components/skinManager.js
View file

@ -84,7 +84,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'backdrop', 'globalize',
currentSound = null; currentSound = null;
} }
backdrop.clear(); backdrop.clearBackdrop();
} }
function onThemeLoaded() { function onThemeLoaded() {

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

@ -73,7 +73,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
html += template; html += template;
dlg.innerHTML = globalize.translateDocument(html, 'core'); dlg.innerHTML = globalize.translateHtml(html, 'core');
fillSortBy(dlg, options.sortOptions); fillSortBy(dlg, options.sortOptions);
initEditor(dlg, options.settings); initEditor(dlg, options.settings);

4
src/components/subtitleeditor/subtitleeditor.js
View file

@ -69,7 +69,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
require(['confirm'], function (confirm) { require(['confirm'], function (confirm) {
confirm({ confirm.default({
title: globalize.translate('ConfirmDeletion'), title: globalize.translate('ConfirmDeletion'),
text: msg, text: msg,
@ -448,7 +448,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('subtitleEditorDialog'); dlg.classList.add('subtitleEditorDialog');
dlg.innerHTML = globalize.translateDocument(template, 'core'); dlg.innerHTML = globalize.translateHtml(template, 'core');
dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File'); dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File');

26
src/components/subtitlesettings/subtitleappearancehelper.js
View file

@ -1,9 +1,11 @@
define([], function () { /**
'use strict'; * Subtitle settings visual helper.
* @module components/subtitleSettings/subtitleAppearanceHelper
*/
function getTextStyles(settings, preview) { function getTextStyles(settings, preview) {
var list = []; let list = [];
switch (settings.textSize || '') { switch (settings.textSize || '') {
case 'smaller': case 'smaller':
@ -47,12 +49,12 @@ define([], function () {
break; break;
} }
var background = settings.textBackground || 'transparent'; const background = settings.textBackground || 'transparent';
if (background) { if (background) {
list.push({ name: 'background-color', value: background }); list.push({ name: 'background-color', value: background });
} }
var textColor = settings.textColor || '#ffffff'; const textColor = settings.textColor || '#ffffff';
if (textColor) { if (textColor) {
list.push({ name: 'color', value: textColor }); list.push({ name: 'color', value: textColor });
} }
@ -122,7 +124,7 @@ define([], function () {
return list; return list;
} }
function getStyles(settings, preview) { export function getStyles(settings, preview) {
return { return {
text: getTextStyles(settings, preview), text: getTextStyles(settings, preview),
@ -132,17 +134,17 @@ define([], function () {
function applyStyleList(styles, elem) { function applyStyleList(styles, elem) {
for (var i = 0, length = styles.length; i < length; i++) { for (let i = 0, length = styles.length; i < length; i++) {
var style = styles[i]; let style = styles[i];
elem.style[style.name] = style.value; elem.style[style.name] = style.value;
} }
} }
function applyStyles(elements, appearanceSettings) { export function applyStyles(elements, appearanceSettings) {
var styles = getStyles(appearanceSettings, !!elements.preview); let styles = getStyles(appearanceSettings, !!elements.preview);
if (elements.text) { if (elements.text) {
applyStyleList(styles.text, elements.text); applyStyleList(styles.text, elements.text);
@ -151,9 +153,7 @@ define([], function () {
applyStyleList(styles.window, elements.window); applyStyleList(styles.window, elements.window);
} }
} }
export default {
return {
getStyles: getStyles, getStyles: getStyles,
applyStyles: applyStyles applyStyles: applyStyles
}; };
});

134
src/components/subtitlesettings/subtitlesettings.js
View file

@ -1,20 +1,29 @@
define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loading', 'connectionManager', 'subtitleAppearanceHelper', 'dom', 'events', 'layoutManager', 'listViewStyle', 'emby-select', 'emby-input', 'emby-checkbox', 'emby-slider', 'flexStyles'], function (require, globalize, appSettings, appHost, focusManager, loading, connectionManager, subtitleAppearanceHelper, dom, events, layoutManager) { import require from 'require';
'use strict'; import globalize from 'globalize';
import appHost from 'apphost';
import appSettings from 'appSettings';
import focusManager from 'focusManager';
import layoutManager from 'layoutManager';
import loading from 'loading';
import connectionManager from 'connectionManager';
import subtitleAppearanceHelper from 'subtitleAppearanceHelper';
import settingsHelper from 'settingsHelper';
import dom from 'dom';
import events from 'events';
import 'listViewStyle';
import 'emby-select';
import 'emby-slider';
import 'emby-input';
import 'emby-checkbox';
import 'flexStyles';
function populateLanguages(select, languages) { /**
var html = ''; * Subtitle settings.
* @module components/subtitleSettings/subtitleSettings
html += "<option value=''>" + globalize.translate('AnyLanguage') + '</option>'; */
for (var i = 0, length = languages.length; i < length; i++) {
var culture = languages[i];
html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
}
select.innerHTML = html;
}
function getSubtitleAppearanceObject(context) { function getSubtitleAppearanceObject(context) {
var appearanceSettings = {}; let appearanceSettings = {};
appearanceSettings.textSize = context.querySelector('#selectTextSize').value; appearanceSettings.textSize = context.querySelector('#selectTextSize').value;
appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value; appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value;
@ -34,9 +43,9 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
context.querySelector('.fldBurnIn').classList.remove('hide'); context.querySelector('.fldBurnIn').classList.remove('hide');
} }
var selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage'); let selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage');
populateLanguages(selectSubtitleLanguage, allCultures); settingsHelper.populateLanguages(selectSubtitleLanguage, allCultures);
selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || ''; selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || '';
context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || ''; context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || '';
@ -62,7 +71,7 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) { function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) {
var appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey); let appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey);
appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context)); appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context));
userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey); userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey);
@ -85,7 +94,7 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
loading.hide(); loading.hide();
if (enableSaveConfirmation) { if (enableSaveConfirmation) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('SettingsSaved')); toast(globalize.translate('SettingsSaved'));
}); });
} }
@ -98,31 +107,12 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
}); });
} }
function onSubmit(e) {
var self = this;
var apiClient = connectionManager.getApiClient(self.options.serverId);
var userId = self.options.userId;
var userSettings = self.options.userSettings;
userSettings.setUserInfo(userId, apiClient).then(function () {
var enableSaveConfirmation = self.options.enableSaveConfirmation;
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
});
// Disable default form submission
if (e) {
e.preventDefault();
}
return false;
}
function onSubtitleModeChange(e) { function onSubtitleModeChange(e) {
var view = dom.parentWithClass(e.target, 'subtitlesettings'); let view = dom.parentWithClass(e.target, 'subtitlesettings');
var subtitlesHelp = view.querySelectorAll('.subtitlesHelp'); let subtitlesHelp = view.querySelectorAll('.subtitlesHelp');
for (var i = 0, length = subtitlesHelp.length; i < length; i++) { for (let i = 0, length = subtitlesHelp.length; i < length; i++) {
subtitlesHelp[i].classList.add('hide'); subtitlesHelp[i].classList.add('hide');
} }
view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide'); view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide');
@ -130,11 +120,11 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
function onAppearanceFieldChange(e) { function onAppearanceFieldChange(e) {
var view = dom.parentWithClass(e.target, 'subtitlesettings'); let view = dom.parentWithClass(e.target, 'subtitlesettings');
var appearanceSettings = getSubtitleAppearanceObject(view); let appearanceSettings = getSubtitleAppearanceObject(view);
var elements = { let elements = {
window: view.querySelector('.subtitleappearance-preview-window'), window: view.querySelector('.subtitleappearance-preview-window'),
text: view.querySelector('.subtitleappearance-preview-text'), text: view.querySelector('.subtitleappearance-preview-text'),
preview: true preview: true
@ -179,12 +169,12 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
function embed(options, self) { function embed(options, self) {
require(['text!./subtitlesettings.template.html'], function (template) { import('text!./subtitlesettings.template.html').then(({default: template}) => {
options.element.classList.add('subtitlesettings'); options.element.classList.add('subtitlesettings');
options.element.innerHTML = globalize.translateDocument(template, 'core'); options.element.innerHTML = globalize.translateHtml(template, 'core');
options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); options.element.querySelector('form').addEventListener('submit', self.onSubmit.bind(self));
options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange); options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange);
options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange);
@ -239,42 +229,62 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
}); });
} }
function SubtitleSettings(options) { export class SubtitleSettings {
constructor(options) {
this.options = options; this.options = options;
embed(options, this); embed(options, this);
} }
SubtitleSettings.prototype.loadData = function () { loadData() {
let self = this;
var self = this; let context = self.options.element;
var context = self.options.element;
loading.show(); loading.show();
var userId = self.options.userId; let userId = self.options.userId;
var apiClient = connectionManager.getApiClient(self.options.serverId); let apiClient = connectionManager.getApiClient(self.options.serverId);
var userSettings = self.options.userSettings; let userSettings = self.options.userSettings;
apiClient.getUser(userId).then(function (user) { apiClient.getUser(userId).then(function (user) {
userSettings.setUserInfo(userId, apiClient).then(function () { userSettings.setUserInfo(userId, apiClient).then(function () {
self.dataLoaded = true; self.dataLoaded = true;
var appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey); let appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);
loadForm(context, user, userSettings, appearanceSettings, apiClient); loadForm(context, user, userSettings, appearanceSettings, apiClient);
}); });
}); });
}; }
SubtitleSettings.prototype.submit = function () { submit() {
onSubmit.call(this); this.onSubmit(null);
}; }
SubtitleSettings.prototype.destroy = function () { destroy() {
this.options = null; this.options = null;
}; }
return SubtitleSettings; onSubmit(e) {
const self = this;
let apiClient = connectionManager.getApiClient(self.options.serverId);
let userId = self.options.userId;
let userSettings = self.options.userSettings;
userSettings.setUserInfo(userId, apiClient).then(function () {
let enableSaveConfirmation = self.options.enableSaveConfirmation;
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
}); });
// Disable default form submission
if (e) {
e.preventDefault();
}
return false;
}
}
export default SubtitleSettings;

10
src/components/syncPlay/groupSelectionMenu.js
View file

@ -37,7 +37,7 @@ function showNewJoinGroupSelection (button, user, apiClient) {
console.debug('No item is currently playing.'); console.debug('No item is currently playing.');
} }
apiClient.sendSyncPlayCommand('ListGroups').then(function (response) { apiClient.getSyncPlayGroups().then(function (response) {
response.json().then(function (groups) { response.json().then(function (groups) {
var menuItems = groups.map(function (group) { var menuItems = groups.map(function (group) {
return { return {
@ -83,9 +83,9 @@ function showNewJoinGroupSelection (button, user, apiClient) {
actionsheet.show(menuOptions).then(function (id) { actionsheet.show(menuOptions).then(function (id) {
if (id == 'new-group') { if (id == 'new-group') {
apiClient.sendSyncPlayCommand('NewGroup'); apiClient.createSyncPlayGroup();
} else { } else if (id) {
apiClient.sendSyncPlayCommand('JoinGroup', { apiClient.joinSyncPlayGroup({
GroupId: id, GroupId: id,
PlayingItemId: playingItemId PlayingItemId: playingItemId
}); });
@ -140,7 +140,7 @@ function showLeaveGroupSelection (button, user, apiClient) {
actionsheet.show(menuOptions).then(function (id) { actionsheet.show(menuOptions).then(function (id) {
if (id == 'leave-group') { if (id == 'leave-group') {
apiClient.sendSyncPlayCommand('LeaveGroup'); apiClient.leaveSyncPlayGroup();
} }
}).catch((error) => { }).catch((error) => {
console.error('SyncPlay: unexpected error showing group menu:', error); console.error('SyncPlay: unexpected error showing group menu:', error);

14
src/components/syncPlay/syncPlayManager.js
View file

@ -139,7 +139,7 @@ class SyncPlayManager {
return; return;
} }
apiClient.sendSyncPlayCommand('UpdatePing', { apiClient.sendSyncPlayPing({
Ping: ping Ping: ping
}); });
} }
@ -212,6 +212,7 @@ class SyncPlayManager {
if (!this.lastPlaybackWaiting) { if (!this.lastPlaybackWaiting) {
this.lastPlaybackWaiting = new Date(); this.lastPlaybackWaiting = new Date();
} }
events.trigger(this, 'waiting'); events.trigger(this, 'waiting');
} }
@ -288,6 +289,7 @@ class SyncPlayManager {
player.setPlaybackRate(this.localPlayerPlaybackRate); player.setPlaybackRate(this.localPlayerPlaybackRate);
this.localPlayerPlaybackRate = 1.0; this.localPlayerPlaybackRate = 1.0;
} }
this.currentPlayer = null; this.currentPlayer = null;
this.playbackRateSupported = false; this.playbackRateSupported = false;
} }
@ -433,6 +435,7 @@ class SyncPlayManager {
}); });
return; return;
} }
// Get playing item id // Get playing item id
let playingItemId; let playingItemId;
try { try {
@ -447,7 +450,7 @@ class SyncPlayManager {
if (!success) { if (!success) {
console.warning('Error reporting playback state to server. Joining group will fail.'); console.warning('Error reporting playback state to server. Joining group will fail.');
} }
apiClient.sendSyncPlayCommand('JoinGroup', { apiClient.joinSyncPlayGroup({
GroupId: groupId, GroupId: groupId,
PlayingItemId: playingItemId PlayingItemId: playingItemId
}); });
@ -619,6 +622,7 @@ class SyncPlayManager {
if (this.currentPlayer) { if (this.currentPlayer) {
this.currentPlayer.setPlaybackRate(1); this.currentPlayer.setPlaybackRate(1);
} }
this.clearSyncIcon(); this.clearSyncIcon();
} }
@ -658,7 +662,7 @@ class SyncPlayManager {
*/ */
playRequest (player) { playRequest (player) {
var apiClient = connectionManager.currentApiClient(); var apiClient = connectionManager.currentApiClient();
apiClient.sendSyncPlayCommand('PlayRequest'); apiClient.requestSyncPlayStart();
} }
/** /**
@ -666,7 +670,7 @@ class SyncPlayManager {
*/ */
pauseRequest (player) { pauseRequest (player) {
var apiClient = connectionManager.currentApiClient(); var apiClient = connectionManager.currentApiClient();
apiClient.sendSyncPlayCommand('PauseRequest'); apiClient.requestSyncPlayPause();
// Pause locally as well, to give the user some little control // Pause locally as well, to give the user some little control
playbackManager._localUnpause(player); playbackManager._localUnpause(player);
} }
@ -676,7 +680,7 @@ class SyncPlayManager {
*/ */
seekRequest (PositionTicks, player) { seekRequest (PositionTicks, player) {
var apiClient = connectionManager.currentApiClient(); var apiClient = connectionManager.currentApiClient();
apiClient.sendSyncPlayCommand('SeekRequest', { apiClient.requestSyncPlaySeek({
PositionTicks: PositionTicks PositionTicks: PositionTicks
}); });
} }

6
src/components/tabbedview/itemstab.js
View file

@ -51,7 +51,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
instance.itemsContainer = view.querySelector('.itemsContainer'); instance.itemsContainer = view.querySelector('.itemsContainer');
instance.alphaPicker = new AlphaPicker({ instance.alphaPicker = new AlphaPicker.default({
element: instance.alphaPickerElement, element: instance.alphaPickerElement,
itemsContainer: instance.itemsContainer, itemsContainer: instance.itemsContainer,
itemClass: 'card' itemClass: 'card'
@ -331,7 +331,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
} }
if (this.enableAlphaNumericShortcuts !== false) { if (this.enableAlphaNumericShortcuts !== false) {
this.alphaNumericShortcuts = new AlphaNumericShortcuts({ this.alphaNumericShortcuts = new AlphaNumericShortcuts.default({
itemsContainer: this.itemsContainer itemsContainer: this.itemsContainer
}); });
} }
@ -561,7 +561,7 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
var alphaNumericShortcuts = this.alphaNumericShortcuts; var alphaNumericShortcuts = this.alphaNumericShortcuts;
if (alphaNumericShortcuts) { if (alphaNumericShortcuts) {
alphaNumericShortcuts.destroy(); alphaNumericShortcuts.default.destroy();
this.alphaNumericShortcuts = null; this.alphaNumericShortcuts = null;
} }
}; };

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

@ -95,7 +95,7 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
TabbedView.prototype.onResume = function (options) { TabbedView.prototype.onResume = function (options) {
this.setTitle(); this.setTitle();
backdrop.clear(); backdrop.clearBackdrop();
var currentTabController = this.currentTabController; var currentTabController = this.currentTabController;

2
src/components/tvproviders/xmltv.js
View file

@ -139,7 +139,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
var page = $(e.target).parents('.xmltvForm')[0]; var page = $(e.target).parents('.xmltvForm')[0];
require(['directorybrowser'], function (directoryBrowser) { require(['directorybrowser'], function (directoryBrowser) {
var picker = new directoryBrowser(); var picker = new directoryBrowser.default();
picker.show({ picker.show({
includeFiles: true, includeFiles: true,
callback: function (path) { callback: function (path) {

8
src/components/viewContainer.js
View file

@ -43,14 +43,6 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
var newView = newViewInfo.elem; var newView = newViewInfo.elem;
var modulesToLoad = []; var modulesToLoad = [];
if (newViewInfo.hasjQuerySelect) {
modulesToLoad.push('legacySelectMenu');
}
if (newViewInfo.hasjQueryChecked) {
modulesToLoad.push('fnchecked');
}
return new Promise(function (resolve) { return new Promise(function (resolve) {
require(modulesToLoad, function () { require(modulesToLoad, function () {
var currentPage = allPages[pageIndex]; var currentPage = allPages[pageIndex];

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

@ -84,7 +84,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
html += template; html += template;
dlg.innerHTML = globalize.translateDocument(html, 'core'); dlg.innerHTML = globalize.translateHtml(html, 'core');
var settingElements = dlg.querySelectorAll('.viewSetting'); var settingElements = dlg.querySelectorAll('.viewSetting');
for (var i = 0, length = settingElements.length; i < length; i++) { for (var i = 0, length = settingElements.length; i < length; i++) {

27
src/controllers/auth/addserver.js
View file

@ -1,14 +1,20 @@
define(['appSettings', 'loading', 'browser', 'globalize', 'emby-button'], function(appSettings, loading, browser, globalize) { import appSettings from 'appSettings';
'use strict'; import loading from 'loading';
import browser from 'browser';
import globalize from 'globalize';
import 'emby-button';
/* eslint-disable indent */
function handleConnectionResult(page, result) { function handleConnectionResult(page, result) {
loading.hide(); loading.hide();
switch (result.State) { switch (result.State) {
case 'SignedIn': case 'SignedIn': {
var apiClient = result.ApiClient; const apiClient = result.ApiClient;
Dashboard.onServerChanged(apiClient.getCurrentUserId(), apiClient.accessToken(), apiClient); Dashboard.onServerChanged(apiClient.getCurrentUserId(), apiClient.accessToken(), apiClient);
Dashboard.navigate('home.html'); Dashboard.navigate('home.html');
break; break;
}
case 'ServerSignIn': case 'ServerSignIn':
Dashboard.navigate('login.html?serverid=' + result.Servers[0].Id, false, 'none'); Dashboard.navigate('login.html?serverid=' + result.Servers[0].Id, false, 'none');
break; break;
@ -30,7 +36,7 @@ define(['appSettings', 'loading', 'browser', 'globalize', 'emby-button'], functi
function submitServer(page) { function submitServer(page) {
loading.show(); loading.show();
var host = page.querySelector('#txtServerHost').value; const host = page.querySelector('#txtServerHost').value;
ConnectionManager.connectToAddress(host, { ConnectionManager.connectToAddress(host, {
enableAutoLogin: appSettings.enableAutoLogin() enableAutoLogin: appSettings.enableAutoLogin()
}).then(function(result) { }).then(function(result) {
@ -42,11 +48,11 @@ define(['appSettings', 'loading', 'browser', 'globalize', 'emby-button'], functi
}); });
} }
return function(view, params) { export default function(view, params) {
view.querySelector('.addServerForm').addEventListener('submit', onServerSubmit); view.querySelector('.addServerForm').addEventListener('submit', onServerSubmit);
view.querySelector('.btnCancel').addEventListener('click', goBack); view.querySelector('.btnCancel').addEventListener('click', goBack);
require(['autoFocuser'], function (autoFocuser) { import('autoFocuser').then(({default: autoFocuser}) => {
autoFocuser.autoFocus(view); autoFocuser.autoFocus(view);
}); });
@ -57,9 +63,10 @@ define(['appSettings', 'loading', 'browser', 'globalize', 'emby-button'], functi
} }
function goBack() { function goBack() {
require(['appRouter'], function(appRouter) { import('appRouter').then(({default: appRouter}) => {
appRouter.back(); appRouter.back();
}); });
} }
}; }
});
/* eslint-enable indent */

14
src/controllers/auth/forgotpassword.js
View file

@ -1,5 +1,6 @@
define(['globalize'], function (globalize) { import globalize from 'globalize';
'use strict';
/* eslint-disable indent */
function processForgotPasswordResult(result) { function processForgotPasswordResult(result) {
if ('ContactAdmin' == result.Action) { if ('ContactAdmin' == result.Action) {
@ -17,7 +18,7 @@ define(['globalize'], function (globalize) {
} }
if ('PinCode' == result.Action) { if ('PinCode' == result.Action) {
var msg = globalize.translate('MessageForgotPasswordFileCreated'); let msg = globalize.translate('MessageForgotPasswordFileCreated');
msg += '<br/>'; msg += '<br/>';
msg += '<br/>'; msg += '<br/>';
msg += 'Enter PIN here to finish Password Reset<br/>'; msg += 'Enter PIN here to finish Password Reset<br/>';
@ -34,7 +35,7 @@ define(['globalize'], function (globalize) {
} }
} }
return function (view, params) { export default function (view, params) {
function onSubmit(e) { function onSubmit(e) {
ApiClient.ajax({ ApiClient.ajax({
type: 'POST', type: 'POST',
@ -49,5 +50,6 @@ define(['globalize'], function (globalize) {
} }
view.querySelector('form').addEventListener('submit', onSubmit); view.querySelector('form').addEventListener('submit', onSubmit);
}; }
});
/* eslint-enable indent */

14
src/controllers/auth/forgotpasswordpin.js
View file

@ -1,9 +1,10 @@
define(['globalize'], function (globalize) { import globalize from 'globalize';
'use strict';
/* eslint-disable indent */
function processForgotPasswordResult(result) { function processForgotPasswordResult(result) {
if (result.Success) { if (result.Success) {
var msg = globalize.translate('MessagePasswordResetForUsers'); let msg = globalize.translate('MessagePasswordResetForUsers');
msg += '<br/>'; msg += '<br/>';
msg += '<br/>'; msg += '<br/>';
msg += result.UsersReset.join('<br/>'); msg += result.UsersReset.join('<br/>');
@ -22,7 +23,7 @@ define(['globalize'], function (globalize) {
}); });
} }
return function (view, params) { export default function (view, params) {
function onSubmit(e) { function onSubmit(e) {
ApiClient.ajax({ ApiClient.ajax({
type: 'POST', type: 'POST',
@ -37,5 +38,6 @@ define(['globalize'], function (globalize) {
} }
view.querySelector('form').addEventListener('submit', onSubmit); view.querySelector('form').addEventListener('submit', onSubmit);
}; }
});
/* eslint-enable indent */

86
src/controllers/auth/login.js
View file

@ -1,24 +1,27 @@
define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layoutManager', 'browser', 'globalize', 'cardStyle', 'emby-checkbox'], function (appHost, appSettings, dom, connectionManager, loading, layoutManager, browser, globalize) { import appHost from 'apphost';
'use strict'; import appSettings from 'appSettings';
import dom from 'dom';
import connectionManager from 'connectionManager';
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) { function authenticateUserByName(page, apiClient, username, password) {
loading.show(); loading.show();
apiClient.authenticateUserByName(username, password).then(function (result) { apiClient.authenticateUserByName(username, password).then(function (result) {
var user = result.User; var user = result.User;
var serverId = getParameterByName('serverid');
var newUrl;
if (user.Policy.IsAdministrator && !serverId) {
newUrl = 'dashboard.html';
} else {
newUrl = 'home.html';
}
loading.hide(); loading.hide();
Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient); Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
Dashboard.navigate(newUrl); Dashboard.navigate('home.html');
}, function (response) { }, function (response) {
page.querySelector('#txtManualName').value = ''; page.querySelector('#txtManualName').value = '';
page.querySelector('#txtManualPassword').value = ''; page.querySelector('#txtManualPassword').value = '';
@ -26,7 +29,7 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
const UnauthorizedOrForbidden = [401, 403]; const UnauthorizedOrForbidden = [401, 403];
if (UnauthorizedOrForbidden.includes(response.status)) { if (UnauthorizedOrForbidden.includes(response.status)) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
const messageKey = response.status === 401 ? 'MessageInvalidUser' : 'MessageUnauthorizedUser'; const messageKey = response.status === 401 ? 'MessageInvalidUser' : 'MessageUnauthorizedUser';
toast(globalize.translate(messageKey)); toast(globalize.translate(messageKey));
}); });
@ -58,23 +61,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() { function getRandomMetroColor() {
var index = Math.floor(Math.random() * (metroColors.length - 1)); const index = Math.floor(Math.random() * (metroColors.length - 1));
return metroColors[index]; return metroColors[index];
} }
function getMetroColor(str) { function getMetroColor(str) {
if (str) { if (str) {
var character = String(str.substr(0, 1).charCodeAt()); const character = String(str.substr(0, 1).charCodeAt());
var sum = 0; let sum = 0;
for (var i = 0; i < character.length; i++) { for (let i = 0; i < character.length; i++) {
sum += parseInt(character.charAt(i)); sum += parseInt(character.charAt(i));
} }
var index = String(sum).substr(-1); const index = String(sum).substr(-1);
return metroColors[index]; return metroColors[index];
} }
@ -82,13 +85,13 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
} }
function loadUserList(context, apiClient, users) { function loadUserList(context, apiClient, users) {
var html = ''; let html = '';
for (var i = 0; i < users.length; i++) { for (let i = 0; i < users.length; i++) {
var user = users[i]; const user = users[i];
// TODO move card creation code to Card component // 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) { if (layoutManager.tv) {
cssClass += ' show-focus'; cssClass += ' show-focus';
@ -98,13 +101,13 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
} }
} }
var cardBoxCssClass = 'cardBox cardBox-bottompadded'; const cardBoxCssClass = 'cardBox cardBox-bottompadded';
html += '<button type="button" class="' + cssClass + '">'; html += '<button type="button" class="' + cssClass + '">';
html += '<div class="' + cardBoxCssClass + '">'; html += '<div class="' + cardBoxCssClass + '">';
html += '<div class="cardScalable">'; html += '<div class="cardScalable">';
html += '<div class="cardPadder cardPadder-square"></div>'; html += '<div class="cardPadder cardPadder-square"></div>';
html += '<div class="cardContent" data-haspw="' + user.HasPassword + '" data-username="' + user.Name + '" data-userid="' + user.Id + '">'; html += '<div class="cardContent" data-haspw="' + user.HasPassword + '" data-username="' + user.Name + '" data-userid="' + user.Id + '">';
var imgUrl; let imgUrl;
if (user.PrimaryImageTag) { if (user.PrimaryImageTag) {
imgUrl = apiClient.getUserImageUrl(user.Id, { imgUrl = apiClient.getUserImageUrl(user.Id, {
@ -114,7 +117,7 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
}); });
html += '<div class="cardImageContainer coveredImage coveredImage-noScale" style="background-image:url(\'' + imgUrl + "');\"></div>"; html += '<div class="cardImageContainer coveredImage coveredImage-noScale" style="background-image:url(\'' + imgUrl + "');\"></div>";
} else { } else {
var background = getMetroColor(user.Id); const background = getMetroColor(user.Id);
imgUrl = 'assets/img/avatar.png'; imgUrl = 'assets/img/avatar.png';
html += '<div class="cardImageContainer coveredImage coveredImage-noScale" style="background-image:url(\'' + imgUrl + "');background-color:" + background + ';"></div>'; html += '<div class="cardImageContainer coveredImage coveredImage-noScale" style="background-image:url(\'' + imgUrl + "');background-color:" + background + ';"></div>';
} }
@ -131,9 +134,9 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
context.querySelector('#divUsers').innerHTML = html; context.querySelector('#divUsers').innerHTML = html;
} }
return function (view, params) { export default function (view, params) {
function getApiClient() { function getApiClient() {
var serverId = params.serverid; const serverId = params.serverid;
if (serverId) { if (serverId) {
return connectionManager.getOrCreateApiClient(serverId); return connectionManager.getOrCreateApiClient(serverId);
@ -147,20 +150,20 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
view.querySelector('.manualLoginForm').classList.add('hide'); view.querySelector('.manualLoginForm').classList.add('hide');
view.querySelector('.btnManual').classList.remove('hide'); view.querySelector('.btnManual').classList.remove('hide');
require(['autoFocuser'], function (autoFocuser) { import('autoFocuser').then(({default: autoFocuser}) => {
autoFocuser.autoFocus(view); autoFocuser.autoFocus(view);
}); });
} }
view.querySelector('#divUsers').addEventListener('click', function (e) { view.querySelector('#divUsers').addEventListener('click', function (e) {
var card = dom.parentWithClass(e.target, 'card'); const card = dom.parentWithClass(e.target, 'card');
var cardContent = card ? card.querySelector('.cardContent') : null; const cardContent = card ? card.querySelector('.cardContent') : null;
if (cardContent) { if (cardContent) {
var context = view; const context = view;
var id = cardContent.getAttribute('data-userid'); const id = cardContent.getAttribute('data-userid');
var name = cardContent.getAttribute('data-username'); const name = cardContent.getAttribute('data-username');
var haspw = cardContent.getAttribute('data-haspw'); const haspw = cardContent.getAttribute('data-haspw');
if (id === 'manual') { if (id === 'manual') {
context.querySelector('#txtManualName').value = ''; context.querySelector('#txtManualName').value = '';
@ -176,7 +179,7 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
}); });
view.querySelector('.manualLoginForm').addEventListener('submit', function (e) { view.querySelector('.manualLoginForm').addEventListener('submit', function (e) {
appSettings.enableAutoLogin(view.querySelector('.chkRememberLogin').checked); appSettings.enableAutoLogin(view.querySelector('.chkRememberLogin').checked);
var apiClient = getApiClient(); const apiClient = getApiClient();
authenticateUserByName(view, apiClient, view.querySelector('#txtManualName').value, view.querySelector('#txtManualPassword').value); authenticateUserByName(view, apiClient, view.querySelector('#txtManualName').value, view.querySelector('#txtManualPassword').value);
e.preventDefault(); e.preventDefault();
return false; return false;
@ -194,12 +197,13 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
}); });
view.addEventListener('viewshow', function (e) { view.addEventListener('viewshow', function (e) {
loading.show(); loading.show();
libraryMenu.setTransparentMenu(true);
if (!appHost.supports('multiserver')) { if (!appHost.supports('multiserver')) {
view.querySelector('.btnSelectServer').classList.add('hide'); view.querySelector('.btnSelectServer').classList.add('hide');
} }
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.getPublicUsers().then(function (users) { apiClient.getPublicUsers().then(function (users) {
if (users.length) { if (users.length) {
showVisualForm(); showVisualForm();
@ -215,5 +219,9 @@ define(['apphost', 'appSettings', 'dom', 'connectionManager', 'loading', 'layout
view.querySelector('.disclaimer').textContent = options.LoginDisclaimer || ''; view.querySelector('.disclaimer').textContent = options.LoginDisclaimer || '';
}); });
}); });
}; view.addEventListener('viewhide', function (e) {
libraryMenu.setTransparentMenu(false);
}); });
}
/* eslint-enable indent */

64
src/controllers/auth/selectserver.js
View file

@ -1,10 +1,28 @@
define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focusManager', 'connectionManager', 'globalize', 'actionsheet', 'dom', 'browser', 'material-icons', 'flexStyles', 'emby-scroller', 'emby-itemscontainer', 'cardStyle', 'emby-button'], function (loading, appRouter, layoutManager, appSettings, appHost, focusManager, connectionManager, globalize, actionSheet, dom, browser) { import loading from 'loading';
'use strict'; import appRouter from 'appRouter';
import layoutManager from 'layoutManager';
import libraryMenu from 'libraryMenu';
import appSettings from 'appSettings';
import appHost from 'apphost';
import focusManager from 'focusManager';
import connectionManager from 'connectionManager';
import globalize from 'globalize';
import actionSheet from 'actionsheet';
import dom from 'dom';
import browser from 'browser';
import 'material-icons';
import 'flexStyles';
import 'emby-scroller';
import 'emby-itemscontainer';
import 'cardStyle';
import 'emby-button';
var enableFocusTransform = !browser.slow && !browser.edge; /* eslint-disable indent */
const enableFocusTransform = !browser.slow && !browser.edge;
function renderSelectServerItems(view, servers) { function renderSelectServerItems(view, servers) {
var items = servers.map(function (server) { const items = servers.map(function (server) {
return { return {
name: server.Name, name: server.Name,
showIcon: true, showIcon: true,
@ -14,8 +32,8 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
server: server server: server
}; };
}); });
var html = items.map(function (item) { let html = items.map(function (item) {
var cardImageContainer; let cardImageContainer;
if (item.showIcon) { if (item.showIcon) {
cardImageContainer = '<span class="cardImageIcon material-icons ' + item.icon + '"></span>'; cardImageContainer = '<span class="cardImageIcon material-icons ' + item.icon + '"></span>';
@ -25,7 +43,7 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
// TODO move card creation code to Card component // TODO move card creation code to Card component
var cssClass = 'card overflowSquareCard loginSquareCard scalableCard overflowSquareCard-scalable'; let cssClass = 'card overflowSquareCard loginSquareCard scalableCard overflowSquareCard-scalable';
if (layoutManager.tv) { if (layoutManager.tv) {
cssClass += ' show-focus'; cssClass += ' show-focus';
@ -35,10 +53,10 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
} }
} }
var cardBoxCssClass = 'cardBox'; const cardBoxCssClass = 'cardBox';
var innerOpening = '<div class="' + cardBoxCssClass + '">'; const innerOpening = '<div class="' + cardBoxCssClass + '">';
var cardContainer = ''; let cardContainer = '';
cardContainer += '<button raised class="' + cssClass + '" style="display:inline-block;" data-id="' + item.id + '" data-url="' + (item.url || '') + '" data-cardtype="' + item.cardType + '">'; cardContainer += '<button raised class="' + cssClass + '" style="display:inline-block;" data-id="' + item.id + '" data-url="' + (item.url || '') + '" data-cardtype="' + item.cardType + '">';
cardContainer += innerOpening; cardContainer += innerOpening;
cardContainer += '<div class="cardScalable">'; cardContainer += '<div class="cardScalable">';
@ -55,7 +73,7 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
cardContainer += '</div></div></button>'; cardContainer += '</div></div></button>';
return cardContainer; return cardContainer;
}).join(''); }).join('');
var itemsContainer = view.querySelector('.servers'); const itemsContainer = view.querySelector('.servers');
if (!items.length) { if (!items.length) {
html = '<p>' + globalize.translate('MessageNoServersAvailable') + '</p>'; html = '<p>' + globalize.translate('MessageNoServersAvailable') + '</p>';
@ -89,7 +107,7 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
} }
function alertTextWithOptions(options) { function alertTextWithOptions(options) {
require(['alert'], function (alert) { import('alert').then(({default: alert}) => {
alert(options); alert(options);
}); });
} }
@ -98,14 +116,14 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
alertText(globalize.translate('MessageUnableToConnectToServer')); alertText(globalize.translate('MessageUnableToConnectToServer'));
} }
return function (view, params) { export default function (view, params) {
function connectToServer(server) { function connectToServer(server) {
loading.show(); loading.show();
connectionManager.connectToServer(server, { connectionManager.connectToServer(server, {
enableAutoLogin: appSettings.enableAutoLogin() enableAutoLogin: appSettings.enableAutoLogin()
}).then(function (result) { }).then(function (result) {
loading.hide(); loading.hide();
var apiClient = result.ApiClient; const apiClient = result.ApiClient;
switch (result.State) { switch (result.State) {
case 'SignedIn': case 'SignedIn':
@ -140,7 +158,7 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
} }
function onServerClick(server) { function onServerClick(server) {
var menuItems = []; const menuItems = [];
menuItems.push({ menuItems.push({
name: globalize.translate('Connect'), name: globalize.translate('Connect'),
id: 'connect' id: 'connect'
@ -178,31 +196,33 @@ define(['loading', 'appRouter', 'layoutManager', 'appSettings', 'apphost', 'focu
connectionManager.getAvailableServers().then(onServersRetrieved); connectionManager.getAvailableServers().then(onServersRetrieved);
} }
var servers; let servers;
updatePageStyle(view, params); updatePageStyle(view, params);
view.addEventListener('viewshow', function (e) { view.addEventListener('viewshow', function (e) {
var isRestored = e.detail.isRestored; const isRestored = e.detail.isRestored;
appRouter.setTitle(null); appRouter.setTitle(null);
libraryMenu.setTransparentMenu(true);
if (!isRestored) { if (!isRestored) {
loadServers(); loadServers();
} }
}); });
view.querySelector('.servers').addEventListener('click', function (e) { view.querySelector('.servers').addEventListener('click', function (e) {
var card = dom.parentWithClass(e.target, 'card'); const card = dom.parentWithClass(e.target, 'card');
if (card) { if (card) {
var url = card.getAttribute('data-url'); const url = card.getAttribute('data-url');
if (url) { if (url) {
appRouter.show(url); appRouter.show(url);
} else { } else {
var id = card.getAttribute('data-id'); const id = card.getAttribute('data-id');
onServerClick(servers.filter(function (s) { onServerClick(servers.filter(function (s) {
return s.Id === id; return s.Id === id;
})[0]); })[0]);
} }
} }
}); });
}; }
});
/* eslint-enable indent */

27
src/controllers/dashboard/apikeys.js
View file

@ -1,8 +1,14 @@
define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button'], function (datetime, loading, libraryMenu, dom, globalize) { import datetime from 'datetime';
'use strict'; import loading from 'loading';
import libraryMenu from 'libraryMenu';
import dom from 'dom';
import globalize from 'globalize';
import 'emby-button';
/* eslint-disable indent */
function revoke(page, key) { function revoke(page, key) {
require(['confirm'], function (confirm) { import('confirm').then(({default: confirm}) => {
confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () { confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () {
loading.show(); loading.show();
ApiClient.ajax({ ApiClient.ajax({
@ -16,8 +22,8 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
} }
function renderKeys(page, keys) { function renderKeys(page, keys) {
var rows = keys.map(function (item) { const rows = keys.map(function (item) {
var html = ''; let html = '';
html += '<tr class="detailTableBodyRow detailTableBodyRow-shaded">'; html += '<tr class="detailTableBodyRow detailTableBodyRow-shaded">';
html += '<td class="detailTableBodyCell">'; html += '<td class="detailTableBodyCell">';
html += '<button type="button" is="emby-button" data-token="' + item.AccessToken + '" class="raised raised-mini btnRevoke" data-mini="true" title="' + globalize.translate('ButtonRevoke') + '" style="margin:0;">' + globalize.translate('ButtonRevoke') + '</button>'; html += '<button type="button" is="emby-button" data-token="' + item.AccessToken + '" class="raised raised-mini btnRevoke" data-mini="true" title="' + globalize.translate('ButtonRevoke') + '" style="margin:0;">' + globalize.translate('ButtonRevoke') + '</button>';
@ -29,7 +35,7 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
html += item.AppName || ''; html += item.AppName || '';
html += '</td>'; html += '</td>';
html += '<td class="detailTableBodyCell" style="vertical-align:middle;">'; html += '<td class="detailTableBodyCell" style="vertical-align:middle;">';
var date = datetime.parseISO8601Date(item.DateCreated, true); const date = datetime.parseISO8601Date(item.DateCreated, true);
html += datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date); html += datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date);
html += '</td>'; html += '</td>';
return html += '</tr>'; return html += '</tr>';
@ -46,7 +52,7 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
} }
function showNewKeyPrompt(page) { function showNewKeyPrompt(page) {
require(['prompt'], function (prompt) { import('prompt').then(({default: prompt}) => {
prompt({ prompt({
title: globalize.translate('HeaderNewApiKey'), title: globalize.translate('HeaderNewApiKey'),
label: globalize.translate('LabelAppName'), label: globalize.translate('LabelAppName'),
@ -65,12 +71,12 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
} }
pageIdOn('pageinit', 'apiKeysPage', function () { pageIdOn('pageinit', 'apiKeysPage', function () {
var page = this; const page = this;
page.querySelector('.btnNewKey').addEventListener('click', function () { page.querySelector('.btnNewKey').addEventListener('click', function () {
showNewKeyPrompt(page); showNewKeyPrompt(page);
}); });
page.querySelector('.tblApiKeys').addEventListener('click', function (e) { page.querySelector('.tblApiKeys').addEventListener('click', function (e) {
var btnRevoke = dom.parentWithClass(e.target, 'btnRevoke'); const btnRevoke = dom.parentWithClass(e.target, 'btnRevoke');
if (btnRevoke) { if (btnRevoke) {
revoke(page, btnRevoke.getAttribute('data-token')); revoke(page, btnRevoke.getAttribute('data-token'));
@ -80,4 +86,5 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button']
pageIdOn('pagebeforeshow', 'apiKeysPage', function () { pageIdOn('pagebeforeshow', 'apiKeysPage', function () {
loadData(this); loadData(this);
}); });
});
/* eslint-enable indent */

185
src/controllers/dashboard/dashboard.js
View file

@ -1,11 +1,31 @@
define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'loading', 'connectionManager', 'playMethodHelper', 'cardBuilder', 'imageLoader', 'components/activitylog', 'scripts/imagehelper', 'indicators', 'listViewStyle', 'emby-button', 'flexStyles', 'emby-button', 'emby-itemscontainer'], function (datetime, events, itemHelper, serverNotifications, dom, globalize, datefns, dfnshelper, loading, connectionManager, playMethodHelper, cardBuilder, imageLoader, ActivityLog, imageHelper, indicators) { import datetime from 'datetime';
'use strict'; import events from 'events';
import itemHelper from 'itemHelper';
import serverNotifications from 'serverNotifications';
import dom from 'dom';
import globalize from 'globalize';
import * as datefns from 'date-fns';
import dfnshelper from 'dfnshelper';
import loading from 'loading';
import connectionManager from 'connectionManager';
import playMethodHelper from 'playMethodHelper';
import cardBuilder from 'cardBuilder';
import imageLoader from 'imageLoader';
import ActivityLog from 'components/activitylog';
import imageHelper from 'scripts/imagehelper';
import indicators from 'indicators';
import 'listViewStyle';
import 'emby-button';
import 'flexStyles';
import 'emby-itemscontainer';
/* eslint-disable indent */
function showPlaybackInfo(btn, session) { function showPlaybackInfo(btn, session) {
require(['alert'], function (alert) { import('alert').then(({default: alert}) => {
var title; let title;
var text = []; let text = [];
var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
if (displayPlayMethod === 'DirectStream') { if (displayPlayMethod === 'DirectStream') {
title = globalize.translate('DirectStreaming'); title = globalize.translate('DirectStreaming');
@ -33,7 +53,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
function showSendMessageForm(btn, session) { function showSendMessageForm(btn, session) {
require(['prompt'], function (prompt) { import('prompt').then(({default: prompt}) => {
prompt({ prompt({
title: globalize.translate('HeaderSendMessage'), title: globalize.translate('HeaderSendMessage'),
label: globalize.translate('LabelMessageText'), label: globalize.translate('LabelMessageText'),
@ -50,8 +70,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
function showOptionsMenu(btn, session) { function showOptionsMenu(btn, session) {
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({default: actionsheet}) => {
var menuItems = []; const menuItems = [];
if (session.ServerId && session.DeviceId !== connectionManager.deviceId()) { if (session.ServerId && session.DeviceId !== connectionManager.deviceId()) {
menuItems.push({ menuItems.push({
@ -84,14 +104,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
function onActiveDevicesClick(evt) { function onActiveDevicesClick(evt) {
var btn = dom.parentWithClass(evt.target, 'sessionCardButton'); const btn = dom.parentWithClass(evt.target, 'sessionCardButton');
if (btn) { if (btn) {
var card = dom.parentWithClass(btn, 'card'); const card = dom.parentWithClass(btn, 'card');
if (card) { if (card) {
var sessionId = card.id; const sessionId = card.id;
var session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) { const session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) {
return 'session' + dashboardSession.Id === sessionId; return 'session' + dashboardSession.Id === sessionId;
})[0]; })[0];
@ -113,11 +133,11 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
function filterSessions(sessions) { function filterSessions(sessions) {
var list = []; const list = [];
var minActiveDate = new Date().getTime() - 9e5; const minActiveDate = new Date().getTime() - 9e5;
for (var i = 0, length = sessions.length; i < length; i++) { for (let i = 0, length = sessions.length; i < length; i++) {
var session = sessions[i]; const session = sessions[i];
if (!session.NowPlayingItem && !session.UserId) { if (!session.NowPlayingItem && !session.UserId) {
continue; continue;
@ -139,7 +159,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
EnableTotalRecordCount: false, EnableTotalRecordCount: false,
EnableImageTypes: 'Primary,Thumb,Backdrop' EnableImageTypes: 'Primary,Thumb,Backdrop'
}).then(function (result) { }).then(function (result) {
var itemsContainer = view.querySelector('.activeRecordingItems'); const itemsContainer = view.querySelector('.activeRecordingItems');
if (!result.Items.length) { if (!result.Items.length) {
view.querySelector('.activeRecordingsSection').classList.add('hide'); view.querySelector('.activeRecordingsSection').classList.add('hide');
@ -169,13 +189,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
function reloadSystemInfo(view, apiClient) { function reloadSystemInfo(view, apiClient) {
apiClient.getSystemInfo().then(function (systemInfo) { apiClient.getSystemInfo().then(function (systemInfo) {
view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName); view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName);
var localizedVersion = globalize.translate('DashboardVersionNumber', systemInfo.Version); view.querySelector('#versionNumber').innerHTML = globalize.translate('DashboardVersionNumber', systemInfo.Version);
if (systemInfo.SystemUpdateLevel !== 'Release') {
localizedVersion += ' ' + systemInfo.SystemUpdateLevel;
}
view.querySelector('#versionNumber').innerHTML = localizedVersion;
view.querySelector('#operatingSystem').innerHTML = globalize.translate('DashboardOperatingSystem', systemInfo.OperatingSystem); view.querySelector('#operatingSystem').innerHTML = globalize.translate('DashboardOperatingSystem', systemInfo.OperatingSystem);
view.querySelector('#architecture').innerHTML = globalize.translate('DashboardArchitecture', systemInfo.SystemArchitecture); view.querySelector('#architecture').innerHTML = globalize.translate('DashboardArchitecture', systemInfo.SystemArchitecture);
@ -205,31 +219,31 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
function renderActiveConnections(view, sessions) { function renderActiveConnections(view, sessions) {
var html = ''; let html = '';
DashboardPage.sessionsList = sessions; DashboardPage.sessionsList = sessions;
var parentElement = view.querySelector('.activeDevices'); const parentElement = view.querySelector('.activeDevices');
var cardElem = parentElement.querySelector('.card'); const cardElem = parentElement.querySelector('.card');
if (cardElem) { if (cardElem) {
cardElem.classList.add('deadSession'); cardElem.classList.add('deadSession');
} }
for (var i = 0, length = sessions.length; i < length; i++) { for (let i = 0, length = sessions.length; i < length; i++) {
var session = sessions[i]; const session = sessions[i];
var rowId = 'session' + session.Id; const rowId = 'session' + session.Id;
var elem = view.querySelector('#' + rowId); const elem = view.querySelector('#' + rowId);
if (elem) { if (elem) {
DashboardPage.updateSession(elem, session); DashboardPage.updateSession(elem, session);
} else { } else {
var nowPlayingItem = session.NowPlayingItem; const nowPlayingItem = session.NowPlayingItem;
var className = 'scalableCard card activeSession backdropCard backdropCard-scalable'; const className = 'scalableCard card activeSession backdropCard backdropCard-scalable';
html += '<div class="' + className + '" id="' + rowId + '">'; html += '<div class="' + className + '" id="' + rowId + '">';
html += '<div class="cardBox visualCardBox">'; html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">'; html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>'; html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += '<div class="cardContent">'; html += '<div class="cardContent">';
var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem); const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
if (imgUrl) { if (imgUrl) {
html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"'; html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"';
@ -240,7 +254,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '<div class="sessionNowPlayingInnerContent">'; html += '<div class="sessionNowPlayingInnerContent">';
html += '<div class="sessionAppInfo">'; html += '<div class="sessionAppInfo">';
var clientImage = DashboardPage.getClientImage(session); const clientImage = DashboardPage.getClientImage(session);
if (clientImage) { if (clientImage) {
html += clientImage; html += clientImage;
@ -253,7 +267,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '</div>'; html += '</div>';
html += '<div class="sessionNowPlayingDetails">'; html += '<div class="sessionNowPlayingDetails">';
var nowPlayingName = DashboardPage.getNowPlayingName(session); const nowPlayingName = DashboardPage.getNowPlayingName(session);
html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">'; html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
html += nowPlayingName.html; html += nowPlayingName.html;
html += '</div>'; html += '</div>';
@ -261,7 +275,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '</div>'; html += '</div>';
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) { if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
var percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks; const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
html += indicators.getProgressHtml(percent, { html += indicators.getProgressHtml(percent, {
containerClass: 'playbackProgress' containerClass: 'playbackProgress'
}); });
@ -273,7 +287,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) { if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1); const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
html += indicators.getProgressHtml(percent, { html += indicators.getProgressHtml(percent, {
containerClass: 'transcodingProgress' containerClass: 'transcodingProgress'
}); });
@ -290,7 +304,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '<div class="sessionCardFooter cardFooter">'; html += '<div class="sessionCardFooter cardFooter">';
html += '<div class="sessionCardButtons flex align-items-center justify-content-center">'; html += '<div class="sessionCardButtons flex align-items-center justify-content-center">';
var btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? '' : ' hide'; let btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? '' : ' hide';
const playIcon = session.PlayState.IsPaused ? 'pause' : 'play_arrow'; const playIcon = session.PlayState.IsPaused ? 'pause' : 'play_arrow';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><span class="material-icons ' + playIcon + '"></span></button>'; html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><span class="material-icons ' + playIcon + '"></span></button>';
@ -308,7 +322,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
html += '</div>'; html += '</div>';
html += '<div class="flex align-items-center justify-content-center">'; html += '<div class="flex align-items-center justify-content-center">';
var userImage = DashboardPage.getUserImage(session); const userImage = DashboardPage.getUserImage(session);
html += userImage ? '<div class="activitylogUserPhoto" style="background-image:url(\'' + userImage + "');\"></div>" : '<div style="height:1.71em;"></div>'; html += userImage ? '<div class="activitylogUserPhoto" style="background-image:url(\'' + userImage + "');\"></div>" : '<div style="height:1.71em;"></div>';
html += '<div class="sessionUserName">'; html += '<div class="sessionUserName">';
html += DashboardPage.getUsersHtml(session); html += DashboardPage.getUsersHtml(session);
@ -322,7 +336,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
parentElement.insertAdjacentHTML('beforeend', html); parentElement.insertAdjacentHTML('beforeend', html);
var deadSessionElem = parentElement.querySelector('.deadSession'); const deadSessionElem = parentElement.querySelector('.deadSession');
if (deadSessionElem) { if (deadSessionElem) {
deadSessionElem.parentNode.removeChild(deadSessionElem); deadSessionElem.parentNode.removeChild(deadSessionElem);
@ -330,7 +344,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
function renderRunningTasks(view, tasks) { function renderRunningTasks(view, tasks) {
var html = ''; let html = '';
tasks = tasks.filter(function (task) { tasks = tasks.filter(function (task) {
if ('Idle' != task.State) { if ('Idle' != task.State) {
return !task.IsHidden; return !task.IsHidden;
@ -345,13 +359,13 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
view.querySelector('.runningTasksContainer').classList.add('hide'); view.querySelector('.runningTasksContainer').classList.add('hide');
} }
for (var i = 0, length = tasks.length; i < length; i++) { for (let i = 0, length = tasks.length; i < length; i++) {
var task = tasks[i]; const task = tasks[i];
html += '<p>'; html += '<p>';
html += task.Name + '<br/>'; html += task.Name + '<br/>';
if (task.State === 'Running') { if (task.State === 'Running') {
var progress = (task.CurrentProgressPercentage || 0).toFixed(1); const progress = (task.CurrentProgressPercentage || 0).toFixed(1);
html += '<progress max="100" value="' + progress + '" title="' + progress + '%">'; html += '<progress max="100" value="' + progress + '" title="' + progress + '%">';
html += progress + '%'; html += progress + '%';
html += '</progress>'; html += '</progress>';
@ -377,9 +391,9 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
apiClient.sendMessage('ScheduledTasksInfoStop'); apiClient.sendMessage('ScheduledTasksInfoStop');
}, },
getSessionNowPlayingStreamInfo: function (session) { getSessionNowPlayingStreamInfo: function (session) {
var html = ''; let html = '';
var showTranscodingInfo = false; let showTranscodingInfo = false;
var displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);
if (displayPlayMethod === 'DirectStream') { if (displayPlayMethod === 'DirectStream') {
html += globalize.translate('DirectStreaming'); html += globalize.translate('DirectStreaming');
@ -396,7 +410,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
if (showTranscodingInfo) { if (showTranscodingInfo) {
var line = []; const line = [];
if (session.TranscodingInfo) { if (session.TranscodingInfo) {
if (session.TranscodingInfo.Bitrate) { if (session.TranscodingInfo.Bitrate) {
@ -428,8 +442,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
return html; return html;
}, },
getSessionNowPlayingTime: function (session) { getSessionNowPlayingTime: function (session) {
var nowPlayingItem = session.NowPlayingItem; const nowPlayingItem = session.NowPlayingItem;
var html = ''; let html = '';
if (nowPlayingItem) { if (nowPlayingItem) {
if (session.PlayState.PositionTicks) { if (session.PlayState.PositionTicks) {
@ -453,8 +467,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
return session.Client + ' ' + session.ApplicationVersion; return session.Client + ' ' + session.ApplicationVersion;
}, },
getNowPlayingName: function (session) { getNowPlayingName: function (session) {
var imgUrl = ''; let imgUrl = '';
var nowPlayingItem = session.NowPlayingItem; const nowPlayingItem = session.NowPlayingItem;
// FIXME: It seems that, sometimes, server sends date in the future, so date-fns displays messages like 'in less than a minute'. We should fix // FIXME: It seems that, sometimes, server sends date in the future, so date-fns displays messages like 'in less than a minute'. We should fix
// how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences // how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences
if (!nowPlayingItem) { if (!nowPlayingItem) {
@ -464,8 +478,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}; };
} }
var topText = itemHelper.getDisplayName(nowPlayingItem); let topText = itemHelper.getDisplayName(nowPlayingItem);
var bottomText = ''; let bottomText = '';
if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) { if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
bottomText = topText; bottomText = topText;
@ -505,13 +519,13 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}; };
}, },
getUsersHtml: function (session) { getUsersHtml: function (session) {
var html = []; const html = [];
if (session.UserId) { if (session.UserId) {
html.push(session.UserName); html.push(session.UserName);
} }
for (var i = 0, length = session.AdditionalUsers.length; i < length; i++) { for (let i = 0, length = session.AdditionalUsers.length; i < length; i++) {
html.push(session.AdditionalUsers[i].UserName); html.push(session.AdditionalUsers[i].UserName);
} }
@ -529,7 +543,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}, },
updateSession: function (row, session) { updateSession: function (row, session) {
row.classList.remove('deadSession'); row.classList.remove('deadSession');
var nowPlayingItem = session.NowPlayingItem; const nowPlayingItem = session.NowPlayingItem;
if (nowPlayingItem) { if (nowPlayingItem) {
row.classList.add('playingSession'); row.classList.add('playingSession');
@ -549,7 +563,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
row.querySelector('.btnSessionInfo').classList.add('hide'); row.querySelector('.btnSessionInfo').classList.add('hide');
} }
var btnSessionPlayPause = row.querySelector('.btnSessionPlayPause'); const btnSessionPlayPause = row.querySelector('.btnSessionPlayPause');
if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== connectionManager.deviceId()) { if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== connectionManager.deviceId()) {
btnSessionPlayPause.classList.remove('hide'); btnSessionPlayPause.classList.remove('hide');
@ -567,18 +581,18 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
row.querySelector('.sessionNowPlayingTime').innerHTML = DashboardPage.getSessionNowPlayingTime(session); row.querySelector('.sessionNowPlayingTime').innerHTML = DashboardPage.getSessionNowPlayingTime(session);
row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session); row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session);
row.querySelector('.sessionAppSecondaryText').innerHTML = DashboardPage.getAppSecondaryText(session); row.querySelector('.sessionAppSecondaryText').innerHTML = DashboardPage.getAppSecondaryText(session);
var nowPlayingName = DashboardPage.getNowPlayingName(session); const nowPlayingName = DashboardPage.getNowPlayingName(session);
var nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo'); const nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo');
if (!(nowPlayingName.image && nowPlayingName.image == nowPlayingInfoElem.getAttribute('data-imgsrc'))) { if (!(nowPlayingName.image && nowPlayingName.image == nowPlayingInfoElem.getAttribute('data-imgsrc'))) {
nowPlayingInfoElem.innerHTML = nowPlayingName.html; nowPlayingInfoElem.innerHTML = nowPlayingName.html;
nowPlayingInfoElem.setAttribute('data-imgsrc', nowPlayingName.image || ''); nowPlayingInfoElem.setAttribute('data-imgsrc', nowPlayingName.image || '');
} }
var playbackProgressElem = row.querySelector('.playbackProgress'); const playbackProgressElem = row.querySelector('.playbackProgress');
if (nowPlayingItem && nowPlayingItem.RunTimeTicks) { if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
var percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks; const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
playbackProgressElem.outerHTML = indicators.getProgressHtml(percent, { playbackProgressElem.outerHTML = indicators.getProgressHtml(percent, {
containerClass: 'playbackProgress' containerClass: 'playbackProgress'
}); });
@ -588,10 +602,10 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}); });
} }
var transcodingProgress = row.querySelector('.transcodingProgress'); const transcodingProgress = row.querySelector('.transcodingProgress');
if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) { if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
var percent = session.TranscodingInfo.CompletionPercentage.toFixed(1); const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
transcodingProgress.outerHTML = indicators.getProgressHtml(percent, { transcodingProgress.outerHTML = indicators.getProgressHtml(percent, {
containerClass: 'transcodingProgress' containerClass: 'transcodingProgress'
}); });
@ -601,8 +615,8 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}); });
} }
var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || ''; const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
var imgElem = row.querySelector('.sessionNowPlayingContent'); const imgElem = row.querySelector('.sessionNowPlayingContent');
if (imgUrl != imgElem.getAttribute('data-src')) { if (imgUrl != imgElem.getAttribute('data-src')) {
imgElem.style.backgroundImage = imgUrl ? "url('" + imgUrl + "')" : ''; imgElem.style.backgroundImage = imgUrl ? "url('" + imgUrl + "')" : '';
@ -616,7 +630,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
}, },
getClientImage: function (connection) { getClientImage: function (connection) {
var iconUrl = imageHelper.getDeviceIcon(connection); const iconUrl = imageHelper.getDeviceIcon(connection);
return "<img src='" + iconUrl + "' />"; return "<img src='" + iconUrl + "' />";
}, },
getNowPlayingImageUrl: function (item) { getNowPlayingImageUrl: function (item) {
@ -646,7 +660,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}); });
} }
var imageTags = (item || {}).ImageTags || {}; const imageTags = (item || {}).ImageTags || {};
if (item && imageTags.Thumb) { if (item && imageTags.Thumb) {
return ApiClient.getScaledImageUrl(item.Id, { return ApiClient.getScaledImageUrl(item.Id, {
@ -700,20 +714,20 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}, },
systemUpdateTaskKey: 'SystemUpdateTask', systemUpdateTaskKey: 'SystemUpdateTask',
stopTask: function (btn, id) { stopTask: function (btn, id) {
var page = dom.parentWithClass(btn, 'page'); const page = dom.parentWithClass(btn, 'page');
ApiClient.stopScheduledTask(id).then(function () { ApiClient.stopScheduledTask(id).then(function () {
pollForInfo(page, ApiClient); pollForInfo(page, ApiClient);
}); });
}, },
restart: function (btn) { restart: function (btn) {
require(['confirm'], function (confirm) { import('confirm').then(({default: confirm}) => {
confirm({ confirm({
title: globalize.translate('HeaderRestart'), title: globalize.translate('HeaderRestart'),
text: globalize.translate('MessageConfirmRestart'), text: globalize.translate('MessageConfirmRestart'),
confirmText: globalize.translate('ButtonRestart'), confirmText: globalize.translate('ButtonRestart'),
primary: 'delete' primary: 'delete'
}).then(function () { }).then(function () {
var page = dom.parentWithClass(btn, 'page'); const page = dom.parentWithClass(btn, 'page');
page.querySelector('#btnRestartServer').disabled = true; page.querySelector('#btnRestartServer').disabled = true;
page.querySelector('#btnShutdown').disabled = true; page.querySelector('#btnShutdown').disabled = true;
ApiClient.restartServer(); ApiClient.restartServer();
@ -721,14 +735,14 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}); });
}, },
shutdown: function (btn) { shutdown: function (btn) {
require(['confirm'], function (confirm) { import('confirm').then(({default: confirm}) => {
confirm({ confirm({
title: globalize.translate('HeaderShutdown'), title: globalize.translate('HeaderShutdown'),
text: globalize.translate('MessageConfirmShutdown'), text: globalize.translate('MessageConfirmShutdown'),
confirmText: globalize.translate('ButtonShutdown'), confirmText: globalize.translate('ButtonShutdown'),
primary: 'delete' primary: 'delete'
}).then(function () { }).then(function () {
var page = dom.parentWithClass(btn, 'page'); const page = dom.parentWithClass(btn, 'page');
page.querySelector('#btnRestartServer').disabled = true; page.querySelector('#btnRestartServer').disabled = true;
page.querySelector('#btnShutdown').disabled = true; page.querySelector('#btnShutdown').disabled = true;
ApiClient.shutdownServer(); ApiClient.shutdownServer();
@ -736,7 +750,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
}); });
} }
}; };
return function (view, params) { export default function (view, params) {
function onRestartRequired(evt, apiClient) { function onRestartRequired(evt, apiClient) {
console.debug('onRestartRequired not implemented', evt, apiClient); console.debug('onRestartRequired not implemented', evt, apiClient);
} }
@ -775,11 +789,11 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
} }
var serverId = ApiClient.serverId(); const serverId = ApiClient.serverId();
view.querySelector('.activeDevices').addEventListener('click', onActiveDevicesClick); view.querySelector('.activeDevices').addEventListener('click', onActiveDevicesClick);
view.addEventListener('viewshow', function () { view.addEventListener('viewshow', function () {
var page = this; const page = this;
var apiClient = ApiClient; const apiClient = ApiClient;
if (apiClient) { if (apiClient) {
loading.show(); loading.show();
@ -816,7 +830,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
}); });
view.addEventListener('viewbeforehide', function () { view.addEventListener('viewbeforehide', function () {
var apiClient = ApiClient; const apiClient = ApiClient;
events.off(serverNotifications, 'RestartRequired', onRestartRequired); events.off(serverNotifications, 'RestartRequired', onRestartRequired);
events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown); events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown);
events.off(serverNotifications, 'ServerRestarting', onServerRestarting); events.off(serverNotifications, 'ServerRestarting', onServerRestarting);
@ -830,18 +844,19 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa
} }
}); });
view.addEventListener('viewdestroy', function () { view.addEventListener('viewdestroy', function () {
var page = this; const page = this;
var userActivityLog = page.userActivityLog; const userActivityLog = page.userActivityLog;
if (userActivityLog) { if (userActivityLog) {
userActivityLog.destroy(); userActivityLog.destroy();
} }
var serverActivityLog = page.serverActivityLog; const serverActivityLog = page.serverActivityLog;
if (serverActivityLog) { if (serverActivityLog) {
serverActivityLog.destroy(); serverActivityLog.destroy();
} }
}); });
}; }
});
/* eslint-enable indent */

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