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 fonts

Browse source
This commit is contained in:
nyanmisaka 2020-08-19 17:25:25 +08:00
commit f1804009e6
326 changed files with 21514 additions and 23576 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.eslintignore
View file

@ -2,4 +2,3 @@ node_modules
dist dist
.idea .idea
.vscode .vscode
src/libraries

16
.eslintrc.js
View file

@ -1,6 +1,7 @@
module.exports = { module.exports = {
root: true, root: true,
plugins: [ plugins: [
'@babel',
'promise', 'promise',
'import', 'import',
'eslint-comments' 'eslint-comments'
@ -28,7 +29,7 @@ module.exports = {
], ],
rules: { rules: {
'block-spacing': ['error'], 'block-spacing': ['error'],
'brace-style': ['error', "1tbs", { "allowSingleLine": true }], 'brace-style': ['error', '1tbs', { 'allowSingleLine': true }],
'comma-dangle': ['error', 'never'], 'comma-dangle': ['error', 'never'],
'comma-spacing': ['error'], 'comma-spacing': ['error'],
'eol-last': ['error'], 'eol-last': ['error'],
@ -39,21 +40,23 @@ module.exports = {
'no-multi-spaces': ['error'], 'no-multi-spaces': ['error'],
'no-multiple-empty-lines': ['error', { 'max': 1 }], 'no-multiple-empty-lines': ['error', { 'max': 1 }],
'no-trailing-spaces': ['error'], 'no-trailing-spaces': ['error'],
'no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }], '@babel/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
"no-unused-vars": ["error", { "vars": "all", "args": "none", "ignoreRestSiblings": true }], //'no-unused-vars': ['error', { 'vars': 'all', 'args': 'none', 'ignoreRestSiblings': true }],
'one-var': ['error', 'never'], 'one-var': ['error', 'never'],
'padded-blocks': ['error', 'never'], 'padded-blocks': ['error', 'never'],
//'prefer-const': ['error', {'destructuring': 'all'}],
'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }], 'quotes': ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }],
'semi': ['error'], '@babel/semi': ['error'],
'space-before-blocks': ['error'], 'space-before-blocks': ['error'],
'space-infix-ops': 'error' 'space-infix-ops': 'error',
'yoda': 'error'
}, },
overrides: [ overrides: [
{ {
files: [ files: [
'./src/**/*.js' './src/**/*.js'
], ],
parser: 'babel-eslint', parser: '@babel/eslint-parser',
env: { env: {
node: false, node: false,
amd: true, amd: true,
@ -103,6 +106,7 @@ module.exports = {
// TODO: Fix warnings and remove these rules // TODO: Fix warnings and remove these rules
'no-redeclare': ['off'], 'no-redeclare': ['off'],
'no-useless-escape': ['off'], 'no-useless-escape': ['off'],
'no-unused-vars': ['off'],
// TODO: Remove after ES6 migration is complete // TODO: Remove after ES6 migration is complete
'import/no-unresolved': ['off'] 'import/no-unresolved': ['off']
}, },

1
CONTRIBUTORS.md
View file

@ -35,6 +35,7 @@
- [Thibault Nocchi](https://github.com/ThibaultNocchi) - [Thibault Nocchi](https://github.com/ThibaultNocchi)
- [MrTimscampi](https://github.com/MrTimscampi) - [MrTimscampi](https://github.com/MrTimscampi)
- [Sarab Singh](https://github.com/sarab97) - [Sarab Singh](https://github.com/sarab97)
- [GuilhermeHideki](https://github.com/GuilhermeHideki)
- [Andrei Oanca](https://github.com/OancaAndrei) - [Andrei Oanca](https://github.com/OancaAndrei)
- [Cromefire_](https://github.com/cromefire) - [Cromefire_](https://github.com/cromefire)

114
package.json
View file

@ -5,21 +5,22 @@
"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.5", "@babel/core": "^7.11.1",
"@babel/eslint-parser": "^7.11.3",
"@babel/eslint-plugin": "^7.11.3",
"@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.10.5", "@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.11.0",
"autoprefixer": "^9.8.5", "autoprefixer": "^9.8.6",
"babel-eslint": "^11.0.0-beta.2",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"browser-sync": "^2.26.12", "browser-sync": "^2.26.12",
"copy-webpack-plugin": "^5.1.1", "copy-webpack-plugin": "^5.1.1",
"css-loader": "^4.0.0", "css-loader": "^4.2.1",
"cssnano": "^4.1.10", "cssnano": "^4.1.10",
"del": "^5.1.0", "del": "^5.1.0",
"eslint": "^6.8.0", "eslint": "^7.7.0",
"eslint-plugin-compat": "^3.5.1", "eslint-plugin-compat": "^3.5.1",
"eslint-plugin-eslint-comments": "^3.2.0", "eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-import": "^2.21.2", "eslint-plugin-import": "^2.21.2",
@ -37,7 +38,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.1", "gulp-terser": "^1.3.2",
"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 +49,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.44.0", "webpack": "^4.44.1",
"webpack-merge": "^4.2.2", "webpack-merge": "^4.2.2",
"webpack-stream": "^5.2.1" "webpack-stream": "^5.2.1"
}, },
@ -62,7 +63,7 @@
"fast-text-encoding": "^1.0.3", "fast-text-encoding": "^1.0.3",
"flv.js": "^1.5.0", "flv.js": "^1.5.0",
"headroom.js": "^0.11.0", "headroom.js": "^0.11.0",
"hls.js": "^0.14.6", "hls.js": "^0.14.8",
"howler": "^2.2.0", "howler": "^2.2.0",
"intersection-observer": "^0.11.0", "intersection-observer": "^0.11.0",
"jellyfin-apiclient": "^1.4.1", "jellyfin-apiclient": "^1.4.1",
@ -79,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.2.0" "whatwg-fetch": "^3.4.0"
}, },
"babel": { "babel": {
"presets": [ "presets": [
@ -94,6 +95,8 @@
"src/components/alert.js", "src/components/alert.js",
"src/components/alphaPicker/alphaPicker.js", "src/components/alphaPicker/alphaPicker.js",
"src/components/appFooter/appFooter.js", "src/components/appFooter/appFooter.js",
"src/components/apphost.js",
"src/components/appRouter.js",
"src/components/autoFocuser.js", "src/components/autoFocuser.js",
"src/components/backdrop/backdrop.js", "src/components/backdrop/backdrop.js",
"src/components/cardbuilder/cardBuilder.js", "src/components/cardbuilder/cardBuilder.js",
@ -106,9 +109,14 @@
"src/components/dialogHelper/dialogHelper.js", "src/components/dialogHelper/dialogHelper.js",
"src/components/directorybrowser/directorybrowser.js", "src/components/directorybrowser/directorybrowser.js",
"src/components/displaySettings/displaySettings.js", "src/components/displaySettings/displaySettings.js",
"src/components/favoriteitems.js",
"src/components/fetchhelper.js", "src/components/fetchhelper.js",
"src/components/filterdialog/filterdialog.js", "src/components/filterdialog/filterdialog.js",
"src/components/filtermenu/filtermenu.js",
"src/components/focusManager.js",
"src/components/groupedcards.js", "src/components/groupedcards.js",
"src/components/guide/guide.js",
"src/components/guide/guide-settings.js",
"src/components/homeScreenSettings/homeScreenSettings.js", "src/components/homeScreenSettings/homeScreenSettings.js",
"src/components/homesections/homesections.js", "src/components/homesections/homesections.js",
"src/components/htmlMediaHelper.js", "src/components/htmlMediaHelper.js",
@ -119,11 +127,15 @@
"src/components/imageUploader/imageUploader.js", "src/components/imageUploader/imageUploader.js",
"src/components/indicators/indicators.js", "src/components/indicators/indicators.js",
"src/components/itemContextMenu.js", "src/components/itemContextMenu.js",
"src/components/itemHelper.js",
"src/components/itemidentifier/itemidentifier.js", "src/components/itemidentifier/itemidentifier.js",
"src/components/itemMediaInfo/itemMediaInfo.js", "src/components/itemMediaInfo/itemMediaInfo.js",
"src/components/itemsrefresher.js",
"src/components/layoutManager.js",
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
"src/components/libraryoptionseditor/libraryoptionseditor.js", "src/components/libraryoptionseditor/libraryoptionseditor.js",
"src/components/listview/listview.js", "src/components/listview/listview.js",
"src/components/loading/loading.js",
"src/components/maintabsmanager.js", "src/components/maintabsmanager.js",
"src/components/mediainfo/mediainfo.js", "src/components/mediainfo/mediainfo.js",
"src/components/mediaLibraryCreator/mediaLibraryCreator.js", "src/components/mediaLibraryCreator/mediaLibraryCreator.js",
@ -131,34 +143,70 @@
"src/components/metadataEditor/metadataEditor.js", "src/components/metadataEditor/metadataEditor.js",
"src/components/metadataEditor/personEditor.js", "src/components/metadataEditor/personEditor.js",
"src/components/multiSelect/multiSelect.js", "src/components/multiSelect/multiSelect.js",
"src/components/notifications/notifications.js",
"src/components/nowPlayingBar/nowPlayingBar.js", "src/components/nowPlayingBar/nowPlayingBar.js",
"src/components/packageManager.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",
"src/components/playback/playbackorientation.js", "src/components/playback/playbackorientation.js",
"src/components/playback/playbackmanager.js",
"src/components/playback/playerSelectionMenu.js", "src/components/playback/playerSelectionMenu.js",
"src/components/playback/playersettingsmenu.js", "src/components/playback/playersettingsmenu.js",
"src/components/playback/playmethodhelper.js", "src/components/playback/playmethodhelper.js",
"src/components/playback/playqueuemanager.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/playbackSettings/playbackSettings.js",
"src/components/playerstats/playerstats.js", "src/components/playerstats/playerstats.js",
"src/components/playlisteditor/playlisteditor.js", "src/components/playlisteditor/playlisteditor.js",
"src/components/playmenu.js", "src/components/playmenu.js",
"src/components/pluginManager.js",
"src/components/prompt/prompt.js", "src/components/prompt/prompt.js",
"src/components/recordingcreator/recordingbutton.js",
"src/components/recordingcreator/recordingcreator.js",
"src/components/recordingcreator/seriesrecordingeditor.js",
"src/components/recordingcreator/recordinghelper.js",
"src/components/refreshdialog/refreshdialog.js",
"src/components/recordingcreator/recordingeditor.js",
"src/components/recordingcreator/recordingfields.js",
"src/components/qualityOptions.js",
"src/components/remotecontrol/remotecontrol.js",
"src/components/sanatizefilename.js", "src/components/sanatizefilename.js",
"src/components/scrollManager.js", "src/components/scrollManager.js",
"src/plugins/experimentalWarnings/plugin.js",
"src/plugins/sessionPlayer/plugin.js",
"src/plugins/htmlAudioPlayer/plugin.js",
"src/plugins/chromecastPlayer/plugin.js",
"src/components/slideshow/slideshow.js",
"src/components/sortmenu/sortmenu.js",
"src/plugins/htmlVideoPlayer/plugin.js", "src/plugins/htmlVideoPlayer/plugin.js",
"src/plugins/logoScreensaver/plugin.js",
"src/plugins/playAccessValidation/plugin.js",
"src/components/search/searchfields.js", "src/components/search/searchfields.js",
"src/components/search/searchresults.js", "src/components/search/searchresults.js",
"src/components/settingshelper.js", "src/components/settingshelper.js",
"src/components/shortcuts.js", "src/components/shortcuts.js",
"src/components/subtitleeditor/subtitleeditor.js",
"src/components/subtitlesync/subtitlesync.js",
"src/components/subtitlesettings/subtitleappearancehelper.js", "src/components/subtitlesettings/subtitleappearancehelper.js",
"src/components/subtitlesettings/subtitlesettings.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/components/themeMediaPlayer.js",
"src/components/tabbedview/tabbedview.js",
"src/components/viewManager/viewManager.js",
"src/components/tvproviders/schedulesdirect.js",
"src/components/tvproviders/xmltv.js",
"src/components/toast/toast.js",
"src/components/tunerPicker.js",
"src/components/upnextdialog/upnextdialog.js",
"src/components/userdatabuttons/userdatabuttons.js",
"src/components/viewContainer.js",
"src/components/viewSettings/viewSettings.js",
"src/components/castSenderApi.js",
"src/controllers/session/addServer/index.js", "src/controllers/session/addServer/index.js",
"src/controllers/session/forgotPassword/index.js", "src/controllers/session/forgotPassword/index.js",
"src/controllers/session/redeemPassword/index.js", "src/controllers/session/redeemPassword/index.js",
@ -181,11 +229,16 @@
"src/controllers/music/musicplaylists.js", "src/controllers/music/musicplaylists.js",
"src/controllers/music/musicrecommended.js", "src/controllers/music/musicrecommended.js",
"src/controllers/music/songs.js", "src/controllers/music/songs.js",
"src/controllers/dashboard/mediaLibrary.js", "src/controllers/dashboard/library.js",
"src/controllers/dashboard/metadataImages.js", "src/controllers/dashboard/metadataImages.js",
"src/controllers/dashboard/metadatanfo.js", "src/controllers/dashboard/metadatanfo.js",
"src/controllers/dashboard/networking.js", "src/controllers/dashboard/networking.js",
"src/controllers/dashboard/notifications/notification/index.js",
"src/controllers/dashboard/notifications/notifications/index.js",
"src/controllers/dashboard/playback.js", "src/controllers/dashboard/playback.js",
"src/controllers/dashboard/plugins/add/index.js",
"src/controllers/dashboard/plugins/installed/index.js",
"src/controllers/dashboard/plugins/available/index.js",
"src/controllers/dashboard/plugins/repositories/index.js", "src/controllers/dashboard/plugins/repositories/index.js",
"src/controllers/dashboard/scheduledtasks/scheduledtask.js", "src/controllers/dashboard/scheduledtasks/scheduledtask.js",
"src/controllers/dashboard/scheduledtasks/scheduledtasks.js", "src/controllers/dashboard/scheduledtasks/scheduledtasks.js",
@ -197,9 +250,32 @@
"src/controllers/dashboard/users/userparentalcontrol.js", "src/controllers/dashboard/users/userparentalcontrol.js",
"src/controllers/dashboard/users/userpasswordpage.js", "src/controllers/dashboard/users/userpasswordpage.js",
"src/controllers/dashboard/users/userprofilespage.js", "src/controllers/dashboard/users/userprofilespage.js",
"src/controllers/home.js",
"src/controllers/list.js",
"src/controllers/edititemmetadata.js",
"src/controllers/favorites.js",
"src/controllers/hometab.js",
"src/controllers/movies/moviecollections.js",
"src/controllers/movies/moviegenres.js",
"src/controllers/movies/movies.js",
"src/controllers/movies/moviesrecommended.js",
"src/controllers/movies/movietrailers.js",
"src/controllers/playback/nowplaying.js",
"src/controllers/playback/videoosd.js",
"src/controllers/itemDetails/index.js",
"src/controllers/playback/queue/index.js", "src/controllers/playback/queue/index.js",
"src/controllers/playback/video/index.js", "src/controllers/playback/video/index.js",
"src/controllers/searchpage.js", "src/controllers/searchpage.js",
"src/controllers/livetv/livetvguide.js",
"src/controllers/livetvtuner.js",
"src/controllers/livetv/livetvsuggested.js",
"src/controllers/livetvstatus.js",
"src/controllers/livetvguideprovider.js",
"src/controllers/livetvsettings.js",
"src/controllers/livetv/livetvrecordings.js",
"src/controllers/livetv/livetvschedule.js",
"src/controllers/livetv/livetvseriestimers.js",
"src/controllers/livetv/livetvchannels.js",
"src/controllers/shows/episodes.js", "src/controllers/shows/episodes.js",
"src/controllers/shows/tvgenres.js", "src/controllers/shows/tvgenres.js",
"src/controllers/shows/tvlatest.js", "src/controllers/shows/tvlatest.js",
@ -238,6 +314,9 @@
"src/elements/emby-tabs/emby-tabs.js", "src/elements/emby-tabs/emby-tabs.js",
"src/elements/emby-textarea/emby-textarea.js", "src/elements/emby-textarea/emby-textarea.js",
"src/elements/emby-toggle/emby-toggle.js", "src/elements/emby-toggle/emby-toggle.js",
"src/libraries/screensavermanager.js",
"src/libraries/navdrawer/navdrawer.js",
"src/libraries/scroller.js",
"src/plugins/backdropScreensaver/plugin.js", "src/plugins/backdropScreensaver/plugin.js",
"src/plugins/bookPlayer/plugin.js", "src/plugins/bookPlayer/plugin.js",
"src/plugins/bookPlayer/tableOfContents.js", "src/plugins/bookPlayer/tableOfContents.js",
@ -245,6 +324,8 @@
"src/plugins/youtubePlayer/plugin.js", "src/plugins/youtubePlayer/plugin.js",
"src/scripts/alphanumericshortcuts.js", "src/scripts/alphanumericshortcuts.js",
"src/scripts/autoBackdrops.js", "src/scripts/autoBackdrops.js",
"src/scripts/browser.js",
"src/scripts/clientUtils.js",
"src/scripts/datetime.js", "src/scripts/datetime.js",
"src/scripts/deleteHelper.js", "src/scripts/deleteHelper.js",
"src/scripts/dfnshelper.js", "src/scripts/dfnshelper.js",
@ -254,14 +335,24 @@
"src/scripts/filesystem.js", "src/scripts/filesystem.js",
"src/scripts/globalize.js", "src/scripts/globalize.js",
"src/scripts/imagehelper.js", "src/scripts/imagehelper.js",
"src/scripts/itembynamedetailpage.js",
"src/scripts/inputManager.js", "src/scripts/inputManager.js",
"src/scripts/autoThemes.js",
"src/scripts/themeManager.js",
"src/scripts/keyboardNavigation.js", "src/scripts/keyboardNavigation.js",
"src/scripts/libraryMenu.js",
"src/scripts/libraryBrowser.js", "src/scripts/libraryBrowser.js",
"src/scripts/livetvcomponents.js",
"src/scripts/mouseManager.js",
"src/scripts/multiDownload.js", "src/scripts/multiDownload.js",
"src/scripts/playlists.js", "src/scripts/playlists.js",
"src/scripts/scrollHelper.js",
"src/scripts/serverNotifications.js",
"src/scripts/routes.js",
"src/scripts/settings/appSettings.js", "src/scripts/settings/appSettings.js",
"src/scripts/settings/userSettings.js", "src/scripts/settings/userSettings.js",
"src/scripts/settings/webSettings.js", "src/scripts/settings/webSettings.js",
"src/scripts/shell.js",
"src/scripts/taskbutton.js", "src/scripts/taskbutton.js",
"src/scripts/themeLoader.js", "src/scripts/themeLoader.js",
"src/scripts/touchHelper.js" "src/scripts/touchHelper.js"
@ -291,6 +382,7 @@
"Firefox ESR" "Firefox ESR"
], ],
"scripts": { "scripts": {
"start": "yarn serve",
"serve": "gulp serve --development", "serve": "gulp serve --development",
"prepare": "gulp --production", "prepare": "gulp --production",
"build:development": "gulp --development", "build:development": "gulp --development",

33
scripts/duplicates.py Normal file
View file

@ -0,0 +1,33 @@
import sys
import os
import json
# load every string in the source language
# print all duplicate values to a file
cwd = os.getcwd()
source = cwd + '/../src/strings/en-us.json'
reverse = {}
duplicates = {}
with open(source) as en:
strings = json.load(en)
for key, value in strings.items():
if value not in reverse:
reverse[value] = [key]
else:
reverse[value].append(key)
for key, value in reverse.items():
if len(value) > 1:
duplicates[key] = value
print('LENGTH: ' + str(len(duplicates)))
with open('duplicates.txt', 'w') as out:
for item in duplicates:
out.write(json.dumps(item) + ': ')
out.write(json.dumps(duplicates[item]) + '\n')
out.close()
print('DONE')

2
scripts/scrm.py → scripts/remove.py
View file

@ -11,7 +11,7 @@ langlst = os.listdir(langdir)
keys = [] keys = []
with open('scout.txt', 'r') as f: with open('unused.txt', 'r') as f:
for line in f: for line in f:
keys.append(line.strip('\n')) keys.append(line.strip('\n'))

0
scripts/scdup.py → scripts/source.py
View file

0
scripts/scgen.py → scripts/unused.py
View file

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

@ -236,12 +236,6 @@
text-align: center; text-align: center;
} }
.layout-desktop .searchTabButton,
.layout-mobile .searchTabButton,
.layout-tv .headerSearchButton {
display: none !important;
}
.mainDrawer-scrollContainer { .mainDrawer-scrollContainer {
padding-bottom: 10vh; padding-bottom: 10vh;
} }
@ -646,7 +640,7 @@
.layout-desktop .detailRibbon, .layout-desktop .detailRibbon,
.layout-tv .detailRibbon { .layout-tv .detailRibbon {
margin-top: -7.2em; margin-top: -7.2em;
height: 7.18em; height: 7.2em;
} }
.layout-desktop .noBackdrop .detailRibbon, .layout-desktop .noBackdrop .detailRibbon,

6
src/assets/css/videoosd.css
View file

@ -7,7 +7,6 @@
} }
.osdPoster img, .osdPoster img,
.pageContainer,
.videoOsdBottom { .videoOsdBottom {
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -248,11 +247,6 @@
animation: spin 4s linear infinite; animation: spin 4s linear infinite;
} }
.pageContainer {
top: 0;
position: fixed;
}
@media all and (max-width: 30em) { @media all and (max-width: 30em) {
.btnFastForward, .btnFastForward,
.btnRewind, .btnRewind,

54
src/bundle.js
View file

@ -2,159 +2,159 @@
* require.js module definitions bundled by webpack * require.js module definitions bundled by webpack
*/ */
// Use define from require.js not webpack's define // Use define from require.js not webpack's define
var _define = window.define; const _define = window.define;
// fetch // fetch
var fetch = require('whatwg-fetch'); const fetch = require('whatwg-fetch');
_define('fetch', function() { _define('fetch', function() {
return fetch; return fetch;
}); });
// Blurhash // Blurhash
var blurhash = require('blurhash'); const blurhash = require('blurhash');
_define('blurhash', function() { _define('blurhash', function() {
return blurhash; return blurhash;
}); });
// query-string // query-string
var query = require('query-string'); const query = require('query-string');
_define('queryString', function() { _define('queryString', function() {
return query; return query;
}); });
// flvjs // flvjs
var flvjs = require('flv.js/dist/flv').default; const flvjs = require('flv.js/dist/flv').default;
_define('flvjs', function() { _define('flvjs', function() {
return flvjs; return flvjs;
}); });
// jstree // jstree
var jstree = require('jstree'); const jstree = require('jstree');
require('jstree/dist/themes/default/style.css'); require('jstree/dist/themes/default/style.css');
_define('jstree', function() { _define('jstree', function() {
return jstree; return jstree;
}); });
// jquery // jquery
var jquery = require('jquery'); const jquery = require('jquery');
_define('jQuery', function() { _define('jQuery', function() {
return jquery; return jquery;
}); });
// hlsjs // hlsjs
var hlsjs = require('hls.js'); const hlsjs = require('hls.js');
_define('hlsjs', function() { _define('hlsjs', function() {
return hlsjs; return hlsjs;
}); });
// howler // howler
var howler = require('howler'); const howler = require('howler');
_define('howler', function() { _define('howler', function() {
return howler; return howler;
}); });
// resize-observer-polyfill // resize-observer-polyfill
var resize = require('resize-observer-polyfill').default; const resize = require('resize-observer-polyfill').default;
_define('resize-observer-polyfill', function() { _define('resize-observer-polyfill', function() {
return resize; return resize;
}); });
// swiper // swiper
var swiper = require('swiper/js/swiper'); const swiper = require('swiper/js/swiper');
require('swiper/css/swiper.min.css'); require('swiper/css/swiper.min.css');
_define('swiper', function() { _define('swiper', function() {
return swiper; return swiper;
}); });
// sortable // sortable
var sortable = require('sortablejs').default; const sortable = require('sortablejs').default;
_define('sortable', function() { _define('sortable', function() {
return sortable; return sortable;
}); });
// webcomponents // webcomponents
var webcomponents = require('webcomponents.js/webcomponents-lite'); const webcomponents = require('webcomponents.js/webcomponents-lite');
_define('webcomponents', function() { _define('webcomponents', function() {
return webcomponents; return webcomponents;
}); });
// libass-wasm // libass-wasm
var libassWasm = require('libass-wasm'); const libassWasm = require('libass-wasm');
_define('JavascriptSubtitlesOctopus', function() { _define('JavascriptSubtitlesOctopus', function() {
return libassWasm; return libassWasm;
}); });
// material-icons // material-icons
var materialIcons = require('material-design-icons-iconfont/dist/material-design-icons.css'); const materialIcons = require('material-design-icons-iconfont/dist/material-design-icons.css');
_define('material-icons', function() { _define('material-icons', function() {
return materialIcons; return materialIcons;
}); });
// noto font // noto font
var noto = require('jellyfin-noto'); const noto = require('jellyfin-noto');
_define('jellyfin-noto', function () { _define('jellyfin-noto', function () {
return noto; return noto;
}); });
var epubjs = require('epubjs'); const epubjs = require('epubjs');
_define('epubjs', function () { _define('epubjs', function () {
return epubjs; return epubjs;
}); });
// page.js // page.js
var page = require('page'); const page = require('page');
_define('page', function() { _define('page', function() {
return page; return page;
}); });
// core-js // core-js
var polyfill = require('@babel/polyfill/dist/polyfill'); const polyfill = require('@babel/polyfill/dist/polyfill');
_define('polyfill', function () { _define('polyfill', function () {
return polyfill; return polyfill;
}); });
// domtokenlist-shim // domtokenlist-shim
var classlist = require('classlist.js'); const classlist = require('classlist.js');
_define('classlist-polyfill', function () { _define('classlist-polyfill', function () {
return classlist; return classlist;
}); });
// Date-FNS // Date-FNS
var dateFns = require('date-fns'); const dateFns = require('date-fns');
_define('date-fns', function () { _define('date-fns', function () {
return dateFns; return dateFns;
}); });
var dateFnsLocale = require('date-fns/locale'); const dateFnsLocale = require('date-fns/locale');
_define('date-fns/locale', function () { _define('date-fns/locale', function () {
return dateFnsLocale; return dateFnsLocale;
}); });
var fast_text_encoding = require('fast-text-encoding'); const fast_text_encoding = require('fast-text-encoding');
_define('fast-text-encoding', function () { _define('fast-text-encoding', function () {
return fast_text_encoding; return fast_text_encoding;
}); });
// intersection-observer // intersection-observer
var intersection_observer = require('intersection-observer'); const intersection_observer = require('intersection-observer');
_define('intersection-observer', function () { _define('intersection-observer', function () {
return intersection_observer; return intersection_observer;
}); });
// screenfull // screenfull
var screenfull = require('screenfull'); const screenfull = require('screenfull');
_define('screenfull', function () { _define('screenfull', function () {
return screenfull; return screenfull;
}); });
// headroom.js // headroom.js
var headroom = require('headroom.js/dist/headroom'); const headroom = require('headroom.js/dist/headroom');
_define('headroom', function () { _define('headroom', function () {
return headroom; return headroom;
}); });
// apiclient // apiclient
var apiclient = require('jellyfin-apiclient'); const apiclient = require('jellyfin-apiclient');
_define('apiclient', function () { _define('apiclient', function () {
return apiclient.ApiClient; return apiclient.ApiClient;

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

@ -49,7 +49,7 @@ import 'formDialogStyle';
}; };
if (parseFloat(updatedSchedule.StartHour) >= parseFloat(updatedSchedule.EndHour)) { if (parseFloat(updatedSchedule.StartHour) >= parseFloat(updatedSchedule.EndHour)) {
return void alert(globalize.translate('ErrorMessageStartHourGreaterThanEnd')); return void alert(globalize.translate('ErrorStartHourGreaterThanEnd'));
} }
context.submitted = true; context.submitted = true;

18
src/components/accessSchedule/accessSchedule.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" title="${LabelPrevious}" tabindex="-1"> <button is="paper-icon-button-light" class="btnCancel autoSize" title="${Previous}" tabindex="-1">
<span class="material-icons arrow_back" aria-hidden="true"></span> <span class="material-icons arrow_back" aria-hidden="true"></span>
</button> </button>
<h3 class="formDialogHeaderTitle"> <h3 class="formDialogHeaderTitle">
@ -12,13 +12,13 @@
<div class="selectContainer"> <div class="selectContainer">
<select is="emby-select" id="selectDay" label="${LabelAccessDay}"> <select is="emby-select" id="selectDay" label="${LabelAccessDay}">
<option value="Sunday">${OptionSunday}</option> <option value="Sunday">${Sunday}</option>
<option value="Monday">${OptionMonday}</option> <option value="Monday">${Monday}</option>
<option value="Tuesday">${OptionTuesday}</option> <option value="Tuesday">${Tuesday}</option>
<option value="Wednesday">${OptionWednesday}</option> <option value="Wednesday">${Wednesday}</option>
<option value="Thursday">${OptionThursday}</option> <option value="Thursday">${Thursday}</option>
<option value="Friday">${OptionFriday}</option> <option value="Friday">${Friday}</option>
<option value="Saturday">${OptionSaturday}</option> <option value="Saturday">${Saturday}</option>
<option value="Everyday">${OptionEveryday}</option> <option value="Everyday">${OptionEveryday}</option>
<option value="Weekday">${OptionWeekdays}</option> <option value="Weekday">${OptionWeekdays}</option>
<option value="Weekend">${OptionWeekends}</option> <option value="Weekend">${OptionWeekends}</option>
@ -33,7 +33,7 @@
<div class="formDialogFooter"> <div class="formDialogFooter">
<button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem"> <button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">
<span>${ButtonAdd}</span> <span>${Add}</span>
</button> </button>
</div> </div>
</form> </form>

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

@ -9,14 +9,14 @@ import 'scrollStyles';
import 'listViewStyle'; import 'listViewStyle';
function getOffsets(elems) { function getOffsets(elems) {
let results = []; const results = [];
if (!document) { if (!document) {
return results; return results;
} }
for (const elem of elems) { for (const elem of elems) {
let box = elem.getBoundingClientRect(); const box = elem.getBoundingClientRect();
results.push({ results.push({
top: box.top, top: box.top,
@ -34,7 +34,7 @@ function getPosition(options, dlg) {
const windowHeight = windowSize.innerHeight; const windowHeight = windowSize.innerHeight;
const windowWidth = windowSize.innerWidth; const windowWidth = windowSize.innerWidth;
let pos = getOffsets([options.positionTo])[0]; const pos = getOffsets([options.positionTo])[0];
if (options.positionY !== 'top') { if (options.positionY !== 'top') {
pos.top += (pos.height || 0) / 2; pos.top += (pos.height || 0) / 2;
@ -82,7 +82,7 @@ export function show(options) {
// positionTo // positionTo
// showCancel // showCancel
// title // title
let dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
enableHistory: options.enableHistory, enableHistory: options.enableHistory,
scrollY: false scrollY: false
@ -103,7 +103,7 @@ export function show(options) {
dialogOptions.autoFocus = false; dialogOptions.autoFocus = false;
} }
let dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
if (isFullscreen) { if (isFullscreen) {
dlg.classList.add('actionsheet-fullscreen'); dlg.classList.add('actionsheet-fullscreen');
@ -129,7 +129,7 @@ export function show(options) {
} }
let renderIcon = false; let renderIcon = false;
let icons = []; const icons = [];
let itemIcon; let itemIcon;
for (const item of options.items) { for (const item of options.items) {
itemIcon = item.icon || (item.selected ? 'check' : null); itemIcon = item.icon || (item.selected ? 'check' : null);
@ -241,7 +241,7 @@ export function show(options) {
centerFocus(dlg.querySelector('.actionSheetScroller'), false, true); centerFocus(dlg.querySelector('.actionSheetScroller'), false, true);
} }
let btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet'); const btnCloseActionSheet = dlg.querySelector('.btnCloseActionSheet');
if (btnCloseActionSheet) { if (btnCloseActionSheet) {
btnCloseActionSheet.addEventListener('click', function () { btnCloseActionSheet.addEventListener('click', function () {
dialogHelper.close(dlg); dialogHelper.close(dlg);

6
src/components/activitylog.js
View file

@ -16,7 +16,7 @@ import 'listViewStyle';
let color = '#00a4dc'; let color = '#00a4dc';
let icon = 'notifications'; let icon = 'notifications';
if ('Error' == entry.Severity || 'Fatal' == entry.Severity || 'Warn' == entry.Severity) { if (entry.Severity == 'Error' || entry.Severity == 'Fatal' || entry.Severity == 'Warn') {
color = '#cc0000'; color = '#cc0000';
icon = 'notification_important'; icon = 'notification_important';
} }
@ -60,13 +60,13 @@ import 'listViewStyle';
} }
function reloadData(instance, elem, apiClient, startIndex, limit) { function reloadData(instance, elem, apiClient, startIndex, limit) {
if (null == startIndex) { if (startIndex == null) {
startIndex = parseInt(elem.getAttribute('data-activitystartindex') || '0'); startIndex = parseInt(elem.getAttribute('data-activitystartindex') || '0');
} }
limit = limit || parseInt(elem.getAttribute('data-activitylimit') || '7'); limit = limit || parseInt(elem.getAttribute('data-activitylimit') || '7');
const minDate = new Date(); const minDate = new Date();
const hasUserId = 'false' !== elem.getAttribute('data-useractivity'); const hasUserId = elem.getAttribute('data-useractivity') !== 'false';
// TODO: Use date-fns // TODO: Use date-fns
if (hasUserId) { if (hasUserId) {

934
src/components/appRouter.js
View file

File diff suppressed because it is too large Load diff

204
src/components/apphost.js
View file

@ -1,8 +1,12 @@
define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'globalize'], function (appSettings, browser, events, htmlMediaHelper, webSettings, globalize) { import appSettings from 'appSettings';
'use strict'; import browser from 'browser';
import events from 'events';
import * as htmlMediaHelper from 'htmlMediaHelper';
import * as webSettings from 'webSettings';
import globalize from 'globalize';
function getBaseProfileOptions(item) { function getBaseProfileOptions(item) {
var disableHlsVideoAudioCodecs = []; const disableHlsVideoAudioCodecs = [];
if (item && htmlMediaHelper.enableHlsJsPlayer(item.RunTimeTicks, item.MediaType)) { if (item && htmlMediaHelper.enableHlsJsPlayer(item.RunTimeTicks, item.MediaType)) {
if (browser.edge) { if (browser.edge) {
@ -18,68 +22,50 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
enableMkvProgressive: false, enableMkvProgressive: false,
disableHlsVideoAudioCodecs: disableHlsVideoAudioCodecs disableHlsVideoAudioCodecs: disableHlsVideoAudioCodecs
}; };
} }
function getDeviceProfileForWindowsUwp(item) {
return new Promise(function (resolve, reject) {
require(['browserdeviceprofile', 'environments/windows-uwp/mediacaps'], function (profileBuilder, uwpMediaCaps) {
var profileOptions = getBaseProfileOptions(item);
profileOptions.supportsDts = uwpMediaCaps.supportsDTS();
profileOptions.supportsTrueHd = uwpMediaCaps.supportsDolby();
profileOptions.audioChannels = uwpMediaCaps.getAudioChannels();
resolve(profileBuilder(profileOptions));
});
});
}
function getDeviceProfile(item, options) {
options = options || {};
if (self.Windows) {
return getDeviceProfileForWindowsUwp(item);
}
function getDeviceProfile(item, options = {}) {
return new Promise(function (resolve) { return new Promise(function (resolve) {
require(['browserdeviceprofile'], function (profileBuilder) { import('browserdeviceprofile').then(({default: profileBuilder}) => {
var profile; let profile;
if (window.NativeShell) { if (window.NativeShell) {
profile = window.NativeShell.AppHost.getDeviceProfile(profileBuilder); profile = window.NativeShell.AppHost.getDeviceProfile(profileBuilder);
} else { } else {
var builderOpts = getBaseProfileOptions(item); const builderOpts = getBaseProfileOptions(item);
builderOpts.enableSsaRender = (item && !options.isRetry && 'allcomplexformats' !== appSettings.get('subtitleburnin')); builderOpts.enableSsaRender = (item && !options.isRetry && appSettings.get('subtitleburnin') !== 'allcomplexformats');
profile = profileBuilder(builderOpts); profile = profileBuilder(builderOpts);
} }
resolve(profile); resolve(profile);
}); });
}); });
} }
function escapeRegExp(str) { function escapeRegExp(str) {
return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, '\\$1'); return str.replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1');
} }
function replaceAll(originalString, strReplace, strWith) { function replaceAll(originalString, strReplace, strWith) {
var strReplace2 = escapeRegExp(strReplace); const strReplace2 = escapeRegExp(strReplace);
var reg = new RegExp(strReplace2, 'ig'); const reg = new RegExp(strReplace2, 'ig');
return originalString.replace(reg, strWith); return originalString.replace(reg, strWith);
} }
function generateDeviceId() { function generateDeviceId() {
var keys = []; const keys = [];
if (keys.push(navigator.userAgent), keys.push(new Date().getTime()), self.btoa) { if (keys.push(navigator.userAgent), keys.push(new Date().getTime()), self.btoa) {
var result = replaceAll(btoa(keys.join('|')), '=', '1'); const result = replaceAll(btoa(keys.join('|')), '=', '1');
return Promise.resolve(result); return Promise.resolve(result);
} }
return Promise.resolve(new Date().getTime()); return Promise.resolve(new Date().getTime());
} }
function getDeviceId() { function getDeviceId() {
var key = '_deviceId2'; const key = '_deviceId2';
var deviceId = appSettings.get(key); const deviceId = appSettings.get(key);
if (deviceId) { if (deviceId) {
return Promise.resolve(deviceId); return Promise.resolve(deviceId);
@ -89,9 +75,9 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
appSettings.set(key, deviceId); appSettings.set(key, deviceId);
return deviceId; return deviceId;
}); });
} }
function getDeviceName() { function getDeviceName() {
var deviceName; var deviceName;
if (browser.tizen) { if (browser.tizen) {
deviceName = 'Samsung Smart TV'; deviceName = 'Samsung Smart TV';
@ -128,47 +114,30 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
} }
return deviceName; return deviceName;
} }
function supportsVoiceInput() { function supportsVoiceInput() {
if (!browser.tv) { if (!browser.tv) {
return window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.oSpeechRecognition || window.msSpeechRecognition; return window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.oSpeechRecognition || window.msSpeechRecognition;
} }
return false; return false;
} }
function supportsFullscreen() { function supportsFullscreen() {
if (browser.tv) { if (browser.tv) {
return false; return false;
} }
var element = document.documentElement; const element = document.documentElement;
return (element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen || element.msRequestFullscreen) || document.createElement('video').webkitEnterFullscreen; return (element.requestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen || element.msRequestFullscreen) || document.createElement('video').webkitEnterFullscreen;
} }
function getSyncProfile() { function getDefaultLayout() {
return new Promise(function (resolve) {
require(['browserdeviceprofile', 'appSettings'], function (profileBuilder, appSettings) {
var profile;
if (window.NativeShell) {
profile = window.NativeShell.AppHost.getSyncProfile(profileBuilder, appSettings);
} else {
profile = profileBuilder();
profile.MaxStaticMusicBitrate = appSettings.maxStaticMusicBitrate();
}
resolve(profile);
});
});
}
function getDefaultLayout() {
return 'desktop'; return 'desktop';
} }
function supportsHtmlMediaAutoplay() { function supportsHtmlMediaAutoplay() {
if (browser.edgeUwp || browser.tizen || browser.web0s || browser.orsay || browser.operaTv || browser.ps4 || browser.xboxOne) { if (browser.edgeUwp || browser.tizen || browser.web0s || browser.orsay || browser.operaTv || browser.ps4 || browser.xboxOne) {
return true; return true;
} }
@ -178,18 +147,18 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
} }
return true; return true;
} }
function supportsCue() { function supportsCue() {
try { try {
var video = document.createElement('video'); const video = document.createElement('video');
var style = document.createElement('style'); const style = document.createElement('style');
style.textContent = 'video::cue {background: inherit}'; style.textContent = 'video::cue {background: inherit}';
document.body.appendChild(style); document.body.appendChild(style);
document.body.appendChild(video); document.body.appendChild(video);
var cue = window.getComputedStyle(video, '::cue').background; const cue = window.getComputedStyle(video, '::cue').background;
document.body.removeChild(style); document.body.removeChild(style);
document.body.removeChild(video); document.body.removeChild(video);
@ -198,25 +167,25 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
console.error('error detecting cue support: ' + err); console.error('error detecting cue support: ' + err);
return false; return false;
} }
} }
function onAppVisible() { function onAppVisible() {
if (isHidden) { if (isHidden) {
isHidden = false; isHidden = false;
console.debug('triggering app resume event'); console.debug('triggering app resume event');
events.trigger(appHost, 'resume'); events.trigger(appHost, 'resume');
} }
} }
function onAppHidden() { function onAppHidden() {
if (!isHidden) { if (!isHidden) {
isHidden = true; isHidden = true;
console.debug('app is hidden'); console.debug('app is hidden');
} }
} }
var supportedFeatures = function () { const supportedFeatures = function () {
var features = []; const features = [];
if (navigator.share) { if (navigator.share) {
features.push('sharing'); features.push('sharing');
@ -277,7 +246,7 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
features.push('targetblank'); features.push('targetblank');
features.push('screensaver'); features.push('screensaver');
webSettings.enableMultiServer().then(enabled => { webSettings.getMultiServer().then(enabled => {
if (enabled) features.push('multiserver'); if (enabled) features.push('multiserver');
}); });
@ -298,12 +267,12 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
} }
return features; return features;
}(); }();
/** /**
* Do exit according to platform * Do exit according to platform
*/ */
function doExit() { function doExit() {
try { try {
if (window.NativeShell) { if (window.NativeShell) {
window.NativeShell.AppHost.exit(); window.NativeShell.AppHost.exit();
@ -317,19 +286,19 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
} catch (err) { } catch (err) {
console.error('error closing application: ' + err); console.error('error closing application: ' + err);
} }
} }
var exitPromise; let exitPromise;
/** /**
* Ask user for exit * Ask user for exit
*/ */
function askForExit() { function askForExit() {
if (exitPromise) { if (exitPromise) {
return; return;
} }
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({default: actionsheet}) => {
exitPromise = actionsheet.show({ exitPromise = actionsheet.show({
title: globalize.translate('MessageConfirmAppExit'), title: globalize.translate('MessageConfirmAppExit'),
items: [ items: [
@ -344,18 +313,18 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
exitPromise = null; exitPromise = null;
}); });
}); });
} }
var deviceId; let deviceId;
var deviceName; let deviceName;
var appName = 'Jellyfin Web'; const appName = 'Jellyfin Web';
var appVersion = '10.7.0'; const appVersion = '10.7.0';
var appHost = { const appHost = {
getWindowState: function () { getWindowState: function () {
return document.windowState || 'Normal'; return document.windowState || 'Normal';
}, },
setWindowState: function (state) { setWindowState: function () {
alert('setWindowState is not supported and should not be called'); alert('setWindowState is not supported and should not be called');
}, },
exit: function () { exit: function () {
@ -370,10 +339,9 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
return window.NativeShell.AppHost.supports(command); return window.NativeShell.AppHost.supports(command);
} }
return -1 !== supportedFeatures.indexOf(command.toLowerCase()); return supportedFeatures.indexOf(command.toLowerCase()) !== -1;
}, },
preferVisualCards: browser.android || browser.chrome, preferVisualCards: browser.android || browser.chrome,
getSyncProfile: getSyncProfile,
getDefaultLayout: function () { getDefaultLayout: function () {
if (window.NativeShell) { if (window.NativeShell) {
return window.NativeShell.AppHost.getDefaultLayout(); return window.NativeShell.AppHost.getDefaultLayout();
@ -407,46 +375,38 @@ define(['appSettings', 'browser', 'events', 'htmlMediaHelper', 'webSettings', 'g
getPushTokenInfo: function () { getPushTokenInfo: function () {
return {}; return {};
}, },
setThemeColor: function (color) {
var metaThemeColor = document.querySelector('meta[name=theme-color]');
if (metaThemeColor) {
metaThemeColor.setAttribute('content', color);
}
},
setUserScalable: function (scalable) { setUserScalable: function (scalable) {
if (!browser.tv) { if (!browser.tv) {
var att = scalable ? 'width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes' : 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'; const att = scalable ? 'width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes' : 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no';
document.querySelector('meta[name=viewport]').setAttribute('content', att); document.querySelector('meta[name=viewport]').setAttribute('content', att);
} }
} }
}; };
var isHidden = false; let isHidden = false;
var hidden; let hidden;
var visibilityChange; let visibilityChange;
if (typeof document.hidden !== 'undefined') { /* eslint-disable-line compat/compat */ if (typeof document.hidden !== 'undefined') { /* eslint-disable-line compat/compat */
hidden = 'hidden'; hidden = 'hidden';
visibilityChange = 'visibilitychange'; visibilityChange = 'visibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') { } else if (typeof document.webkitHidden !== 'undefined') {
hidden = 'webkitHidden'; hidden = 'webkitHidden';
visibilityChange = 'webkitvisibilitychange'; visibilityChange = 'webkitvisibilitychange';
} }
document.addEventListener(visibilityChange, function () { document.addEventListener(visibilityChange, function () {
/* eslint-disable-next-line compat/compat */ /* eslint-disable-next-line compat/compat */
if (document[hidden]) { if (document[hidden]) {
onAppHidden(); onAppHidden();
} else { } else {
onAppVisible(); onAppVisible();
} }
}, false); }, false);
if (self.addEventListener) { if (self.addEventListener) {
self.addEventListener('focus', onAppVisible); self.addEventListener('focus', onAppVisible);
self.addEventListener('blur', onAppHidden); self.addEventListener('blur', onAppHidden);
} }
return appHost; export default appHost;
});

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

@ -277,7 +277,7 @@ import 'programStyles';
*/ */
function getImageWidth(shape, screenWidth, isOrientationLandscape) { function getImageWidth(shape, screenWidth, isOrientationLandscape) {
const imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape); const imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape);
return Math.round(screenWidth / imagesPerRow) * 2; return Math.round(screenWidth / imagesPerRow);
} }
/** /**
@ -362,12 +362,12 @@ import 'programStyles';
let hasOpenRow; let hasOpenRow;
let hasOpenSection; let hasOpenSection;
let sectionTitleTagName = options.sectionTitleTagName || 'div'; const sectionTitleTagName = options.sectionTitleTagName || 'div';
let apiClient; let apiClient;
let lastServerId; let lastServerId;
for (const [i, item] of items.entries()) { for (const [i, item] of items.entries()) {
let serverId = item.ServerId || options.serverId; const serverId = item.ServerId || options.serverId;
if (serverId !== lastServerId) { if (serverId !== lastServerId) {
lastServerId = serverId; lastServerId = serverId;
@ -621,7 +621,7 @@ import 'programStyles';
}); });
} }
let blurHashes = options.imageBlurhashes || item.ImageBlurHashes || {}; const blurHashes = options.imageBlurhashes || item.ImageBlurHashes || {};
return { return {
imgUrl: imgUrl, imgUrl: imgUrl,
@ -656,7 +656,7 @@ import 'programStyles';
for (let i = 0; i < character.length; i++) { for (let i = 0; i < character.length; i++) {
sum += parseInt(character.charAt(i)); sum += parseInt(character.charAt(i));
} }
let index = String(sum).substr(-1); const index = String(sum).substr(-1);
return (index % numRandomColors) + 1; return (index % numRandomColors) + 1;
} else { } else {
@ -682,7 +682,7 @@ import 'programStyles';
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
let currentCssClass = cssClass; let currentCssClass = cssClass;
let text = lines[i]; const text = lines[i];
if (valid > 0 && isOuterFooter) { if (valid > 0 && isOuterFooter) {
currentCssClass += ' cardText-secondary'; currentCssClass += ' cardText-secondary';
@ -707,7 +707,7 @@ import 'programStyles';
} }
if (forceLines) { if (forceLines) {
let linesLength = maxLines || Math.min(lines.length, maxLines || lines.length); const linesLength = maxLines || Math.min(lines.length, maxLines || lines.length);
while (valid < linesLength) { while (valid < linesLength) {
html += "<div class='" + cssClass + "'>&nbsp;</div>"; html += "<div class='" + cssClass + "'>&nbsp;</div>";
@ -1036,7 +1036,7 @@ import 'programStyles';
* @returns {string} HTML markup for the item count indicator. * @returns {string} HTML markup for the item count indicator.
*/ */
function getItemCountsHtml(options, item) { function getItemCountsHtml(options, item) {
let counts = []; const counts = [];
let childText; let childText;
if (item.Type === 'Playlist') { if (item.Type === 'Playlist') {
@ -1117,7 +1117,7 @@ import 'programStyles';
function importRefreshIndicator() { function importRefreshIndicator() {
if (!refreshIndicatorLoaded) { if (!refreshIndicatorLoaded) {
refreshIndicatorLoaded = true; refreshIndicatorLoaded = true;
/* eslint-disable-next-line no-unused-expressions */ /* eslint-disable-next-line @babel/no-unused-expressions */
import('emby-itemrefreshindicator'); import('emby-itemrefreshindicator');
} }
} }
@ -1318,7 +1318,7 @@ import 'programStyles';
let cardBoxClose = ''; let cardBoxClose = '';
let cardScalableClose = ''; let cardScalableClose = '';
let cardContentClass = 'cardContent'; const cardContentClass = 'cardContent';
let blurhashAttrib = ''; let blurhashAttrib = '';
if (blurhash && blurhash.length > 0) { if (blurhash && blurhash.length > 0) {
@ -1337,7 +1337,7 @@ import 'programStyles';
cardImageContainerClose = '</button>'; cardImageContainerClose = '</button>';
} }
let cardScalableClass = 'cardScalable'; const cardScalableClass = 'cardScalable';
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder cardPadder-' + shape + '"></div>' + cardImageContainerOpen; cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
cardBoxClose = '</div>'; cardBoxClose = '</div>';
@ -1449,7 +1449,7 @@ import 'programStyles';
const userData = item.UserData || {}; const userData = item.UserData || {};
if (itemHelper.canMarkPlayed(item)) { if (itemHelper.canMarkPlayed(item)) {
/* eslint-disable-next-line no-unused-expressions */ /* eslint-disable-next-line @babel/no-unused-expressions */
import('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>';
} }
@ -1457,7 +1457,7 @@ import 'programStyles';
if (itemHelper.canRate(item)) { if (itemHelper.canRate(item)) {
const likes = userData.Likes == null ? '' : userData.Likes; const likes = userData.Likes == null ? '' : userData.Likes;
/* eslint-disable-next-line no-unused-expressions */ /* eslint-disable-next-line @babel/no-unused-expressions */
import('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>';
} }
@ -1681,7 +1681,7 @@ import 'programStyles';
const cells = itemsContainer.querySelectorAll('.card[data-id="' + programId + '"]'); const cells = itemsContainer.querySelectorAll('.card[data-id="' + programId + '"]');
for (let i = 0, length = cells.length; i < length; i++) { for (let i = 0, length = cells.length; i < length; i++) {
let cell = cells[i]; const cell = cells[i];
const icon = cell.querySelector('.timerIndicator'); const icon = cell.querySelector('.timerIndicator');
if (!icon) { if (!icon) {
const indicatorsElem = ensureIndicators(cell); const indicatorsElem = ensureIndicators(cell);
@ -1700,8 +1700,8 @@ import 'programStyles';
const cells = itemsContainer.querySelectorAll('.card[data-timerid="' + timerId + '"]'); const cells = itemsContainer.querySelectorAll('.card[data-timerid="' + timerId + '"]');
for (let i = 0; i < cells.length; i++) { for (let i = 0; i < cells.length; i++) {
let cell = cells[i]; const cell = cells[i];
let icon = cell.querySelector('.timerIndicator'); const icon = cell.querySelector('.timerIndicator');
if (icon) { if (icon) {
icon.parentNode.removeChild(icon); icon.parentNode.removeChild(icon);
} }
@ -1718,8 +1718,8 @@ import 'programStyles';
const cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + cancelledTimerId + '"]'); const cells = itemsContainer.querySelectorAll('.card[data-seriestimerid="' + cancelledTimerId + '"]');
for (let i = 0; i < cells.length; i++) { for (let i = 0; i < cells.length; i++) {
let cell = cells[i]; const cell = cells[i];
let icon = cell.querySelector('.timerIndicator'); const icon = cell.querySelector('.timerIndicator');
if (icon) { if (icon) {
icon.parentNode.removeChild(icon); icon.parentNode.removeChild(icon);
} }

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

@ -73,7 +73,7 @@ import browser from 'browser';
if (ImageTag) { if (ImageTag) {
return apiClient.getScaledImageUrl(Id, { return apiClient.getScaledImageUrl(Id, {
maxWidth: maxWidth * 2, maxWidth: maxWidth,
tag: ImageTag, tag: ImageTag,
type: 'Chapter', type: 'Chapter',
index index
@ -104,9 +104,7 @@ import browser from 'browser';
const cardBoxCssClass = 'cardBox'; const cardBoxCssClass = 'cardBox';
const cardScalableClass = 'cardScalable'; const cardScalableClass = 'cardScalable';
const html = `<button type="button" class="${className}"${dataAttributes}><div class="${cardBoxCssClass}"><div class="${cardScalableClass}"><div class="cardPadder-${shape}"></div>${cardImageContainer}</div><div class="innerCardFooter">${nameHtml}</div></div></div></button>`; return `<button type="button" class="${className}"${dataAttributes}><div class="${cardBoxCssClass}"><div class="${cardScalableClass}"><div class="cardPadder-${shape}"></div>${cardImageContainer}</div><div class="innerCardFooter">${nameHtml}</div></div></div></button>`;
return html;
} }
export function buildChapterCards(item, chapters, options) { export function buildChapterCards(item, chapters, options) {

22
src/components/castSenderApi.js
View file

@ -1,23 +1,16 @@
define([], function() { class CastSenderApi {
'use strict'; load() {
if (window.appMode === 'cordova' || window.appMode === 'android') { if (window.appMode === 'cordova' || window.appMode === 'android') {
return {
load: function () {
window.chrome = window.chrome || {}; window.chrome = window.chrome || {};
return Promise.resolve(); return Promise.resolve();
}
};
} else { } else {
var ccLoaded = false; let ccLoaded = false;
return {
load: function () {
if (ccLoaded) { if (ccLoaded) {
return Promise.resolve(); return Promise.resolve();
} }
return new Promise(function (resolve, reject) { return new Promise(function (resolve) {
var fileref = document.createElement('script'); const fileref = document.createElement('script');
fileref.setAttribute('type', 'text/javascript'); fileref.setAttribute('type', 'text/javascript');
fileref.onload = function () { fileref.onload = function () {
@ -29,6 +22,7 @@ define([], function() {
document.querySelector('head').appendChild(fileref); document.querySelector('head').appendChild(fileref);
}); });
} }
};
} }
}); }
export default CastSenderApi;

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

@ -19,11 +19,11 @@ export default class channelMapper {
connectionManager.getApiClient(options.serverId).ajax({ connectionManager.getApiClient(options.serverId).ajax({
type: 'POST', type: 'POST',
url: ApiClient.getUrl('LiveTv/ChannelMappings'), url: ApiClient.getUrl('LiveTv/ChannelMappings'),
data: { data: JSON.stringify({
providerId: providerId, providerId: providerId,
tunerChannelId: channelId, tunerChannelId: channelId,
providerChannelId: providerChannelId providerChannelId: providerChannelId
}, }),
dataType: 'json' dataType: 'json'
}).then(mapping => { }).then(mapping => {
const listItem = dom.parentWithClass(button, 'listItem'); const listItem = dom.parentWithClass(button, 'listItem');
@ -93,7 +93,7 @@ export default class channelMapper {
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('Channels')}</h1>`;
html += '<div class="channels paperList">'; html += '<div class="channels paperList">';
html += '</div>'; html += '</div>';
html += '</form>'; html += '</form>';

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

@ -200,7 +200,7 @@ import 'flexStyles';
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
import('scrollHelper').then(scrollHelper => { import('scrollHelper').then((scrollHelper) => {
const fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });

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

@ -354,7 +354,7 @@ import 'scrollStyles';
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
import('scrollHelper').then(scrollHelper => { import('scrollHelper').then((scrollHelper) => {
const fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
@ -375,7 +375,7 @@ import 'scrollStyles';
dlg.setAttribute('data-lockscroll', 'true'); dlg.setAttribute('data-lockscroll', 'true');
} }
if (options.enableHistory !== false && appRouter.enableNativeHistory()) { if (options.enableHistory !== false) {
dlg.setAttribute('data-history', 'true'); dlg.setAttribute('data-history', 'true');
} }
@ -391,11 +391,8 @@ import 'scrollStyles';
dlg.setAttribute('data-autofocus', 'true'); dlg.setAttribute('data-autofocus', 'true');
} }
let defaultEntryAnimation; const defaultEntryAnimation = 'scaleup';
let defaultExitAnimation; const defaultExitAnimation = 'scaledown';
defaultEntryAnimation = 'scaleup';
defaultExitAnimation = 'scaledown';
const entryAnimation = options.entryAnimation || defaultEntryAnimation; const entryAnimation = options.entryAnimation || defaultEntryAnimation;
const exitAnimation = options.exitAnimation || defaultExitAnimation; const exitAnimation = options.exitAnimation || defaultExitAnimation;

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

@ -166,10 +166,10 @@ import 'emby-button';
return apiClient.ajax({ return apiClient.ajax({
type: 'POST', type: 'POST',
url: apiClient.getUrl('Environment/ValidatePath'), url: apiClient.getUrl('Environment/ValidatePath'),
data: { data: JSON.stringify({
ValidateWriteable: validateWriteable, ValidateWriteable: validateWriteable,
Path: path Path: path
} })
}).catch(response => { }).catch(response => {
if (response) { if (response) {
if (response.status === 404) { if (response.status === 404) {

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

@ -1,6 +1,5 @@
import browser from 'browser'; import browser from 'browser';
import layoutManager from 'layoutManager'; import layoutManager from 'layoutManager';
import appSettings from 'appSettings';
import pluginManager from 'pluginManager'; import pluginManager from 'pluginManager';
import appHost from 'apphost'; import appHost from 'apphost';
import focusManager from 'focusManager'; import focusManager from 'focusManager';
@ -16,17 +15,22 @@ import 'emby-button';
/* eslint-disable indent */ /* eslint-disable indent */
function fillThemes(select, isDashboard) { function fillThemes(context, userSettings) {
select.innerHTML = skinManager.getThemes().map(t => { const select = context.querySelector('#selectTheme');
let value = t.id;
if (t.isDefault && !isDashboard) {
value = '';
} else if (t.isDefaultServerDashboard && isDashboard) {
value = '';
}
return `<option value="${value}">${t.name}</option>`; skinManager.getThemes().then(themes => {
select.innerHTML = themes.map(t => {
return `<option value="${t.id}">${t.name}</option>`;
}).join(''); }).join('');
// get default theme
var defaultTheme = themes.find(theme => {
return theme.default;
});
// set the current theme
select.value = userSettings.theme() || defaultTheme.id;
});
} }
function loadScreensavers(context, userSettings) { function loadScreensavers(context, userSettings) {
@ -46,6 +50,7 @@ import 'emby-button';
selectScreensaver.innerHTML = options.map(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();
if (!selectScreensaver.value) { if (!selectScreensaver.value) {
@ -54,57 +59,6 @@ import 'emby-button';
} }
} }
function loadSoundEffects(context, userSettings) {
const selectSoundEffects = context.querySelector('.selectSoundEffects');
const options = pluginManager.ofType('soundeffects').map(plugin => {
return {
name: plugin.name,
value: plugin.id
};
});
options.unshift({
name: globalize.translate('None'),
value: 'none'
});
selectSoundEffects.innerHTML = options.map(o => {
return `<option value="${o.value}">${o.name}</option>`;
}).join('');
selectSoundEffects.value = userSettings.soundEffects();
if (!selectSoundEffects.value) {
// TODO: set the default instead of none
selectSoundEffects.value = 'none';
}
}
function loadSkins(context, userSettings) {
const selectSkin = context.querySelector('.selectSkin');
const options = pluginManager.ofType('skin').map(plugin => {
return {
name: plugin.name,
value: plugin.id
};
});
selectSkin.innerHTML = options.map(o => {
return `<option value="${o.value}">${o.name}</option>`;
}).join('');
selectSkin.value = userSettings.skin();
if (!selectSkin.value && options.length) {
selectSkin.value = options[0].value;
}
if (options.length > 1 && appHost.supports('skins')) {
context.querySelector('.selectSkinContainer').classList.remove('hide');
} else {
context.querySelector('.selectSkinContainer').classList.add('hide');
}
}
function showOrHideMissingEpisodesField(context) { 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');
@ -115,12 +69,6 @@ import 'emby-button';
} }
function loadForm(context, user, userSettings) { function loadForm(context, user, userSettings) {
if (user.Policy.IsAdministrator) {
context.querySelector('.selectDashboardThemeContainer').classList.remove('hide');
} else {
context.querySelector('.selectDashboardThemeContainer').classList.add('hide');
}
if (appHost.supports('displaylanguage')) { if (appHost.supports('displaylanguage')) {
context.querySelector('.languageSection').classList.remove('hide'); context.querySelector('.languageSection').classList.remove('hide');
} else { } else {
@ -139,18 +87,6 @@ import 'emby-button';
context.querySelector('.learnHowToContributeContainer').classList.add('hide'); context.querySelector('.learnHowToContributeContainer').classList.add('hide');
} }
if (appHost.supports('runatstartup')) {
context.querySelector('.fldAutorun').classList.remove('hide');
} else {
context.querySelector('.fldAutorun').classList.add('hide');
}
if (appHost.supports('soundeffects')) {
context.querySelector('.fldSoundEffects').classList.remove('hide');
} else {
context.querySelector('.fldSoundEffects').classList.add('hide');
}
if (appHost.supports('screensaver')) { if (appHost.supports('screensaver')) {
context.querySelector('.selectScreensaverContainer').classList.remove('hide'); context.querySelector('.selectScreensaverContainer').classList.remove('hide');
} else { } else {
@ -173,16 +109,8 @@ import 'emby-button';
context.querySelector('.fldThemeVideo').classList.add('hide'); context.querySelector('.fldThemeVideo').classList.add('hide');
} }
context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup(); fillThemes(context, userSettings);
const selectTheme = context.querySelector('#selectTheme');
const selectDashboardTheme = context.querySelector('#selectDashboardTheme');
fillThemes(selectTheme);
fillThemes(selectDashboardTheme, true);
loadScreensavers(context, userSettings); loadScreensavers(context, userSettings);
loadSoundEffects(context, userSettings);
loadSkins(context, userSettings);
context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false; context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
@ -198,9 +126,6 @@ import 'emby-button';
context.querySelector('#txtLibraryPageSize').value = userSettings.libraryPageSize(); context.querySelector('#txtLibraryPageSize').value = userSettings.libraryPageSize();
selectDashboardTheme.value = userSettings.dashboardTheme() || '';
selectTheme.value = userSettings.theme() || '';
context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || ''; context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || '';
showOrHideMissingEpisodesField(context); showOrHideMissingEpisodesField(context);
@ -209,8 +134,6 @@ import 'emby-button';
} }
function saveUser(context, user, userSettingsInstance, apiClient) { function saveUser(context, user, userSettingsInstance, apiClient) {
appSettings.runAtStartup(context.querySelector('.chkRunAtStartup').checked);
user.Configuration.DisplayMissingEpisodes = context.querySelector('.chkDisplayMissingEpisodes').checked; user.Configuration.DisplayMissingEpisodes = context.querySelector('.chkDisplayMissingEpisodes').checked;
if (appHost.supports('displaylanguage')) { if (appHost.supports('displaylanguage')) {
@ -221,15 +144,11 @@ import 'emby-button';
userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked); userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked);
userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked); userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked);
userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value);
userSettingsInstance.theme(context.querySelector('#selectTheme').value); userSettingsInstance.theme(context.querySelector('#selectTheme').value);
userSettingsInstance.soundEffects(context.querySelector('.selectSoundEffects').value);
userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value); userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value); userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);
userSettingsInstance.skin(context.querySelector('.selectSkin').value);
userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked); userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked);
userSettingsInstance.enableBlurhash(context.querySelector('#chkBlurhash').checked); userSettingsInstance.enableBlurhash(context.querySelector('#chkBlurhash').checked);
userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked); userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked);

26
src/components/displaySettings/displaySettings.template.html
View file

@ -1,5 +1,4 @@
<form style="margin: 0 auto;"> <form style="margin: 0 auto;">
<h2 class="sectionTitle"> <h2 class="sectionTitle">
${Display} ${Display}
</h2> </h2>
@ -123,26 +122,14 @@
<div class="fieldDescription">${LabelPleaseRestart}</div> <div class="fieldDescription">${LabelPleaseRestart}</div>
</div> </div>
<div class="selectContainer hide selectSkinContainer">
<select is="emby-select" class="selectSkin" label="${LabelSkin}"></select>
</div>
<div class="selectContainer"> <div class="selectContainer">
<select id="selectTheme" is="emby-select" label="${LabelTheme}"></select> <select id="selectTheme" is="emby-select" label="${LabelTheme}"></select>
</div> </div>
<div class="selectContainer selectDashboardThemeContainer hide">
<select id="selectDashboardTheme" is="emby-select" label="${LabelDashboardTheme}"></select>
</div>
<div class="selectContainer hide selectScreensaverContainer"> <div class="selectContainer hide selectScreensaverContainer">
<select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select> <select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select>
</div> </div>
<div class="selectContainer fldSoundEffects hide">
<select is="emby-select" class="selectSoundEffects" label="${LabelSoundEffects}"></select>
</div>
<div class="inputContainer inputContainer-withDescription"> <div class="inputContainer inputContainer-withDescription">
<input is="emby-input" type="number" id="txtLibraryPageSize" pattern="[0-9]*" required="required" min="0" max="1000" step="1" label="${LabelLibraryPageSize}" /> <input is="emby-input" type="number" id="txtLibraryPageSize" pattern="[0-9]*" required="required" min="0" max="1000" step="1" label="${LabelLibraryPageSize}" />
<div class="fieldDescription">${LabelLibraryPageSizeHelp}</div> <div class="fieldDescription">${LabelLibraryPageSizeHelp}</div>
@ -159,9 +146,9 @@
<div class="checkboxContainer checkboxContainer-withDescription"> <div class="checkboxContainer checkboxContainer-withDescription">
<label> <label>
<input type="checkbox" is="emby-checkbox" id="chkBlurhash" /> <input type="checkbox" is="emby-checkbox" id="chkBlurhash" />
<span>${EnableBlurhash}</span> <span>${EnableBlurHash}</span>
</label> </label>
<div class="fieldDescription checkboxFieldDescription">${EnableBlurhashHelp}</div> <div class="fieldDescription checkboxFieldDescription">${EnableBlurHashHelp}</div>
</div> </div>
<div class="checkboxContainer checkboxContainer-withDescription"> <div class="checkboxContainer checkboxContainer-withDescription">
@ -175,7 +162,7 @@
<div class="checkboxContainer checkboxContainer-withDescription fldBackdrops hide"> <div class="checkboxContainer checkboxContainer-withDescription fldBackdrops hide">
<label> <label>
<input type="checkbox" is="emby-checkbox" id="chkBackdrops" /> <input type="checkbox" is="emby-checkbox" id="chkBackdrops" />
<span>${EnableBackdrops}</span> <span>${Backdrops}</span>
</label> </label>
<div class="fieldDescription checkboxFieldDescription">${EnableBackdropsHelp}</div> <div class="fieldDescription checkboxFieldDescription">${EnableBackdropsHelp}</div>
</div> </div>
@ -196,13 +183,6 @@
<div class="fieldDescription checkboxFieldDescription">${EnableThemeVideosHelp}</div> <div class="fieldDescription checkboxFieldDescription">${EnableThemeVideosHelp}</div>
</div> </div>
<div class="checkboxContainer hide fldAutorun">
<label>
<input type="checkbox" is="emby-checkbox" class="chkRunAtStartup" />
<span>${RunAtStartup}</span>
</label>
</div>
<div class="checkboxContainer checkboxContainer-withDescription fldDisplayMissingEpisodes hide"> <div class="checkboxContainer checkboxContainer-withDescription fldDisplayMissingEpisodes hide">
<label> <label>
<input type="checkbox" is="emby-checkbox" class="chkDisplayMissingEpisodes" /> <input type="checkbox" is="emby-checkbox" class="chkDisplayMissingEpisodes" />

60
src/components/favoriteitems.js
View file

@ -1,5 +1,14 @@
define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoader', 'globalize', 'layoutManager', 'scrollStyles', 'emby-itemscontainer'], function (loading, libraryBrowser, cardBuilder, dom, appHost, imageLoader, globalize, layoutManager) { import loading from 'loading';
'use strict'; import cardBuilder from 'cardBuilder';
import dom from 'dom';
import appHost from 'apphost';
import imageLoader from 'imageLoader';
import globalize from 'globalize';
import layoutManager from 'layoutManager';
import 'scrollStyles';
import 'emby-itemscontainer';
/* eslint-disable indent */
function enableScrollX() { function enableScrollX() {
return !layoutManager.desktop; return !layoutManager.desktop;
@ -94,8 +103,8 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
} }
function loadSection(elem, userId, topParentId, section, isSingleSection) { function loadSection(elem, userId, topParentId, section, isSingleSection) {
var screenWidth = dom.getWindowSize().innerWidth; const screenWidth = dom.getWindowSize().innerWidth;
var options = { const options = {
SortBy: 'SortName', SortBy: 'SortName',
SortOrder: 'Ascending', SortOrder: 'Ascending',
Filters: 'IsFavorite', Filters: 'IsFavorite',
@ -118,9 +127,9 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
} }
} }
var promise; let promise;
if ('MusicArtist' === section.types) { if (section.types === 'MusicArtist') {
promise = ApiClient.getArtists(userId, options); promise = ApiClient.getArtists(userId, options);
} else { } else {
options.IncludeItemTypes = section.types; options.IncludeItemTypes = section.types;
@ -128,7 +137,7 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
} }
return promise.then(function (result) { return promise.then(function (result) {
var html = ''; let html = '';
if (result.Items.length) { if (result.Items.length) {
if (html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">', !layoutManager.tv && options.Limit && result.Items.length >= options.Limit) { if (html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">', !layoutManager.tv && options.Limit && result.Items.length >= options.Limit) {
@ -144,7 +153,7 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
html += '</div>'; html += '</div>';
if (enableScrollX()) { if (enableScrollX()) {
var scrollXClass = 'scrollX hiddenScrollX'; let scrollXClass = 'scrollX hiddenScrollX';
if (layoutManager.tv) { if (layoutManager.tv) {
scrollXClass += ' smoothScrollX'; scrollXClass += ' smoothScrollX';
} }
@ -154,13 +163,13 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">';
} }
var cardLayout = appHost.preferVisualCards && section.autoCardLayout && section.showTitle; let cardLayout = appHost.preferVisualCards && section.autoCardLayout && section.showTitle;
cardLayout = false; cardLayout = false;
html += cardBuilder.getCardsHtml(result.Items, { html += cardBuilder.getCardsHtml(result.Items, {
preferThumb: section.preferThumb, preferThumb: section.preferThumb,
shape: section.shape, shape: section.shape,
centerText: section.centerText && !cardLayout, centerText: section.centerText && !cardLayout,
overlayText: false !== section.overlayText, overlayText: section.overlayText !== false,
showTitle: section.showTitle, showTitle: section.showTitle,
showParentTitle: section.showParentTitle, showParentTitle: section.showParentTitle,
scalable: true, scalable: true,
@ -179,10 +188,10 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
}); });
} }
function loadSections(page, userId, topParentId, types) { export function loadSections(page, userId, topParentId, types) {
loading.show(); loading.show();
var sections = getSections(); let sections = getSections();
var sectionid = getParameterByName('sectionid'); const sectionid = getParameterByName('sectionid');
if (sectionid) { if (sectionid) {
sections = sections.filter(function (s) { sections = sections.filter(function (s) {
@ -192,30 +201,28 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
if (types) { if (types) {
sections = sections.filter(function (s) { sections = sections.filter(function (s) {
return -1 !== types.indexOf(s.id); return types.indexOf(s.id) !== -1;
}); });
} }
var i; let elem = page.querySelector('.favoriteSections');
var length;
var elem = page.querySelector('.favoriteSections');
if (!elem.innerHTML) { if (!elem.innerHTML) {
var html = ''; let html = '';
for (i = 0, length = sections.length; i < length; i++) { for (let i = 0, length = sections.length; i < length; i++) {
html += '<div class="verticalSection section' + sections[i].id + '"></div>'; html += '<div class="verticalSection section' + sections[i].id + '"></div>';
} }
elem.innerHTML = html; elem.innerHTML = html;
} }
var promises = []; const promises = [];
for (i = 0, length = sections.length; i < length; i++) { for (let i = 0, length = sections.length; i < length; i++) {
var section = sections[i]; const section = sections[i];
elem = page.querySelector('.section' + section.id); elem = page.querySelector('.section' + section.id);
promises.push(loadSection(elem, userId, topParentId, section, 1 === sections.length)); promises.push(loadSection(elem, userId, topParentId, section, sections.length === 1));
} }
Promise.all(promises).then(function () { Promise.all(promises).then(function () {
@ -223,7 +230,8 @@ define(['loading', 'libraryBrowser', 'cardBuilder', 'dom', 'apphost', 'imageLoad
}); });
} }
return { export default {
render: loadSections render: loadSections
}; };
});
/* eslint-enable indent */

8
src/components/filterdialog/filterdialog.template.html
View file

@ -1,6 +1,6 @@
<div style="margin: 0;padding:1.5em 2em;" class="filterDialogContent"> <div style="margin: 0;padding:1.5em 2em;" class="filterDialogContent">
<div is="emby-collapse" title="${HeaderFilters}"> <div is="emby-collapse" title="${Filters}">
<div class="collapseContent"> <div class="collapseContent">
<div class="checkboxList"> <div class="checkboxList">
<label> <label>
@ -63,7 +63,7 @@
</div> </div>
</div> </div>
<div is="emby-collapse" title="${HeaderFeatures}" class="features hide"> <div is="emby-collapse" title="${Features}" class="features hide">
<div class="collapseContent"> <div class="collapseContent">
<div class="checkboxList"> <div class="checkboxList">
<label> <label>
@ -90,7 +90,7 @@
</div> </div>
</div> </div>
<div is="emby-collapse" title="${HeaderGenres}" class="genreFilters hide"> <div is="emby-collapse" title="${Genres}" class="genreFilters hide">
<div class="collapseContent filterOptions"> <div class="collapseContent filterOptions">
</div> </div>
</div> </div>
@ -100,7 +100,7 @@
</div> </div>
</div> </div>
<div is="emby-collapse" title="${HeaderTags}" class="tagFilters hide"> <div is="emby-collapse" title="${Tags}" class="tagFilters hide">
<div class="collapseContent filterOptions"> <div class="collapseContent filterOptions">
</div> </div>
</div> </div>

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

@ -1,12 +1,25 @@
define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost', 'inputManager', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'userSettings', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dom, focusManager, dialogHelper, loading, appHost, inputManager, layoutManager, connectionManager, appRouter, globalize, userSettings) { import dom from 'dom';
'use strict'; import focusManager from 'focusManager';
import dialogHelper from 'dialogHelper';
import inputManager from 'inputManager';
import layoutManager from 'layoutManager';
import connectionManager from 'connectionManager';
import globalize from 'globalize';
import * as userSettings from 'userSettings';
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';
function onSubmit(e) { function onSubmit(e) {
e.preventDefault(); e.preventDefault();
return false; return false;
} }
function renderOptions(context, selector, cssClass, items, isCheckedFn) {
function renderOptions(context, selector, cssClass, items, isCheckedFn) {
var elem = context.querySelector(selector); var elem = context.querySelector(selector);
if (items.length) { if (items.length) {
@ -30,32 +43,116 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
}).join(''); }).join('');
elem.querySelector('.filterOptions').innerHTML = html; elem.querySelector('.filterOptions').innerHTML = html;
} }
function renderDynamicFilters(context, result, options) { function renderDynamicFilters(context, result, options) {
renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) { renderOptions(context, '.genreFilters', 'chkGenreFilter', result.Genres, function (i) {
// Switching from | to , // Switching from | to ,
var delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|'; var delimeter = (options.settings.GenreIds || '').indexOf('|') === -1 ? ',' : '|';
return (delimeter + (options.settings.GenreIds || '') + delimeter).indexOf(delimeter + i.Id + delimeter) !== -1; return (delimeter + (options.settings.GenreIds || '') + delimeter).indexOf(delimeter + i.Id + delimeter) !== -1;
}); });
}
function setBasicFilter(context, key, elem) {
var value = elem.checked;
value = value ? value : null;
userSettings.setFilter(key, value);
}
function moveCheckboxFocus(elem, offset) {
var parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap');
var elems = focusManager.getFocusableElements(parent);
var index = -1;
for (let i = 0, length = elems.length; i < length; i++) {
if (elems[i] === elem) {
index = i;
break;
}
} }
function loadDynamicFilters(context, options) { index += offset;
var apiClient = connectionManager.getApiClient(options.serverId);
var filterMenuOptions = Object.assign(options.filterMenuOptions, { index = Math.min(elems.length - 1, index);
index = Math.max(0, index);
UserId: apiClient.getCurrentUserId(), var newElem = elems[index];
ParentId: options.parentId, if (newElem) {
IncludeItemTypes: options.itemTypes.join(',') focusManager.focus(newElem);
}); }
}
apiClient.getFilters(filterMenuOptions).then(function (result) { function centerFocus(elem, horiz, on) {
renderDynamicFilters(context, result, options); import('scrollHelper').then(({ default: scrollHelper }) => {
var fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
}); });
}
function onInputCommand(e) {
switch (e.detail.command) {
case 'left':
moveCheckboxFocus(e.target, -1);
e.preventDefault();
break;
case 'right':
moveCheckboxFocus(e.target, 1);
e.preventDefault();
break;
default:
break;
}
}
function saveValues(context, settings, settingsKey) {
var elems = context.querySelectorAll('.simpleFilter');
for (let i = 0, length = elems.length; i < length; i++) {
if (elems[i].tagName === 'INPUT') {
setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
} else {
setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
}
} }
function initEditor(context, settings) { // Video type
var videoTypes = [];
elems = context.querySelectorAll('.chkVideoTypeFilter');
for (let i = 0, length = elems.length; i < length; i++) {
if (elems[i].checked) {
videoTypes.push(elems[i].getAttribute('data-filter'));
}
}
userSettings.setFilter(settingsKey + '-filter-VideoTypes', videoTypes.join(','));
// Series status
var seriesStatuses = [];
elems = context.querySelectorAll('.chkSeriesStatus');
for (let i = 0, length = elems.length; i < length; i++) {
if (elems[i].checked) {
seriesStatuses.push(elems[i].getAttribute('data-filter'));
}
}
// Genres
var genres = [];
elems = context.querySelectorAll('.chkGenreFilter');
for (let i = 0, length = elems.length; i < length; i++) {
if (elems[i].checked) {
genres.push(elems[i].getAttribute('data-filter'));
}
}
userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
}
function bindCheckboxInput(context, on) {
var elems = context.querySelectorAll('.checkboxList-verticalwrap');
for (let i = 0, length = elems.length; i < length; i++) {
if (on) {
inputManager.on(elems[i], onInputCommand);
} else {
inputManager.off(elems[i], onInputCommand);
}
}
}
function initEditor(context, settings) {
context.querySelector('form').addEventListener('submit', onSubmit); context.querySelector('form').addEventListener('submit', onSubmit);
var elems = context.querySelectorAll('.simpleFilter'); var elems = context.querySelectorAll('.simpleFilter');
@ -95,127 +192,29 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
} else { } else {
context.querySelector('.featureSection').classList.add('hide'); context.querySelector('.featureSection').classList.add('hide');
} }
} }
function loadDynamicFilters(context, options) {
var apiClient = connectionManager.getApiClient(options.serverId);
function saveValues(context, settings, settingsKey) { var filterMenuOptions = Object.assign(options.filterMenuOptions, {
var elems = context.querySelectorAll('.simpleFilter');
var i;
var length;
for (i = 0, length = elems.length; i < length; i++) {
if (elems[i].tagName === 'INPUT') {
setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
} else {
setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
}
}
// Video type UserId: apiClient.getCurrentUserId(),
var videoTypes = []; ParentId: options.parentId,
elems = context.querySelectorAll('.chkVideoTypeFilter'); IncludeItemTypes: options.itemTypes.join(',')
for (i = 0, length = elems.length; i < length; i++) {
if (elems[i].checked) {
videoTypes.push(elems[i].getAttribute('data-filter'));
}
}
userSettings.setFilter(settingsKey + '-filter-VideoTypes', videoTypes.join(','));
// Series status
var seriesStatuses = [];
elems = context.querySelectorAll('.chkSeriesStatus');
for (i = 0, length = elems.length; i < length; i++) {
if (elems[i].checked) {
seriesStatuses.push(elems[i].getAttribute('data-filter'));
}
}
// Genres
var genres = [];
elems = context.querySelectorAll('.chkGenreFilter');
for (i = 0, length = elems.length; i < length; i++) {
if (elems[i].checked) {
genres.push(elems[i].getAttribute('data-filter'));
}
}
userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
}
function setBasicFilter(context, key, elem) {
var value = elem.checked;
value = value ? value : null;
userSettings.setFilter(key, value);
}
function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) {
var fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
}); });
}
function moveCheckboxFocus(elem, offset) { apiClient.getFilters(filterMenuOptions).then((result) => {
var parent = dom.parentWithClass(elem, 'checkboxList-verticalwrap'); renderDynamicFilters(context, result, options);
var elems = focusManager.getFocusableElements(parent); });
}
var index = -1; class FilterMenu {
for (var i = 0, length = elems.length; i < length; i++) { show(options) {
if (elems[i] === elem) { return new Promise( (resolve, reject) => {
index = i; import('text!./filtermenu.template.html').then(({ default: template }) => {
break;
}
}
index += offset;
index = Math.min(elems.length - 1, index);
index = Math.max(0, index);
var newElem = elems[index];
if (newElem) {
focusManager.focus(newElem);
}
}
function onInputCommand(e) {
switch (e.detail.command) {
case 'left':
moveCheckboxFocus(e.target, -1);
e.preventDefault();
break;
case 'right':
moveCheckboxFocus(e.target, 1);
e.preventDefault();
break;
default:
break;
}
}
function FilterMenu() {
}
function bindCheckboxInput(context, on) {
var elems = context.querySelectorAll('.checkboxList-verticalwrap');
for (var i = 0, length = elems.length; i < length; i++) {
if (on) {
inputManager.on(elems[i], onInputCommand);
} else {
inputManager.off(elems[i], onInputCommand);
}
}
}
FilterMenu.prototype.show = function (options) {
return new Promise(function (resolve, reject) {
require(['text!./filtermenu.template.html'], function (template) {
var dialogOptions = { var dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} else { } else {
@ -239,7 +238,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
dlg.innerHTML = globalize.translateHtml(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 (let i = 0, length = settingElements.length; i < length; i++) {
if (options.visibleSettings.indexOf(settingElements[i].getAttribute('data-settingname')) === -1) { if (options.visibleSettings.indexOf(settingElements[i].getAttribute('data-settingname')) === -1) {
settingElements[i].classList.add('hide'); settingElements[i].classList.add('hide');
} else { } else {
@ -251,7 +250,6 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
loadDynamicFilters(dlg, options); loadDynamicFilters(dlg, options);
bindCheckboxInput(dlg, true); bindCheckboxInput(dlg, true);
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
@ -266,7 +264,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
submitted = true; submitted = true;
}, true); }, true);
dialogHelper.open(dlg).then(function () { dialogHelper.open(dlg).then( function() {
bindCheckboxInput(dlg, false); bindCheckboxInput(dlg, false);
if (layoutManager.tv) { if (layoutManager.tv) {
@ -276,16 +274,14 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
if (submitted) { if (submitted) {
//if (!options.onChange) { //if (!options.onChange) {
saveValues(dlg, options.settings, options.settingsKey); saveValues(dlg, options.settings, options.settingsKey);
resolve(); return resolve();
//} //}
return;
} }
return resolve();
});
});
});
}
}
reject(); export default FilterMenu;
});
});
});
};
return FilterMenu;
});

13
src/components/focusManager.js
View file

@ -1,5 +1,7 @@
define(['dom', 'scrollManager'], function (dom, scrollManager) { /* eslint-disable indent */
'use strict';
import dom from 'dom';
import scrollManager from 'scrollManager';
var scopes = []; var scopes = [];
function pushScope(elem) { function pushScope(elem) {
@ -472,7 +474,9 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
} }
} }
return { /* eslint-enable indent */
export default {
autoFocus: autoFocus, autoFocus: autoFocus,
focus: focus, focus: focus,
focusableParent: focusableParent, focusableParent: focusableParent,
@ -504,5 +508,4 @@ define(['dom', 'scrollManager'], function (dom, scrollManager) {
focusFirst: focusFirst, focusFirst: focusFirst,
focusLast: focusLast, focusLast: focusLast,
moveFocus: moveFocus moveFocus: moveFocus
}; };
});

2
src/components/groupedcards.js
View file

@ -21,7 +21,7 @@ import connectionManager from 'connectionManager';
if (!actionableParent || actionableParent.classList.contains('cardContent')) { if (!actionableParent || actionableParent.classList.contains('cardContent')) {
apiClient.getJSON(apiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) { apiClient.getJSON(apiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
if (1 === items.length) { if (items.length === 1) {
return void appRouter.showItem(items[0]); return void appRouter.showItem(items[0]);
} }

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

@ -1,14 +1,21 @@
define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) { import dialogHelper from 'dialogHelper';
'use strict'; import globalize from 'globalize';
import * as userSettings from 'userSettings';
import layoutManager from 'layoutManager';
import scrollHelper from 'scrollHelper';
import 'emby-checkbox';
import 'emby-radio';
import 'css!./../formdialog';
import 'material-icons';
function saveCategories(context, options) { function saveCategories(context, options) {
var categories = []; const categories = [];
var chkCategorys = context.querySelectorAll('.chkCategory'); const chkCategorys = context.querySelectorAll('.chkCategory');
for (var i = 0, length = chkCategorys.length; i < length; i++) { for (const chkCategory of chkCategorys) {
var type = chkCategorys[i].getAttribute('data-type'); const type = chkCategory.getAttribute('data-type');
if (chkCategorys[i].checked) { if (chkCategory.checked) {
categories.push(type); categories.push(type);
} }
} }
@ -20,73 +27,69 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
// differentiate between none and all // differentiate between none and all
categories.push('all'); categories.push('all');
options.categories = categories; options.categories = categories;
}
function loadCategories(context, options) {
const selectedCategories = options.categories || [];
const chkCategorys = context.querySelectorAll('.chkCategory');
for (const chkCategory of chkCategorys) {
const type = chkCategory.getAttribute('data-type');
chkCategory.checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
} }
}
function loadCategories(context, options) { function save(context) {
var selectedCategories = options.categories || []; const chkIndicators = context.querySelectorAll('.chkIndicator');
var chkCategorys = context.querySelectorAll('.chkCategory'); for (const chkIndicator of chkIndicators) {
for (var i = 0, length = chkCategorys.length; i < length; i++) { const type = chkIndicator.getAttribute('data-type');
var type = chkCategorys[i].getAttribute('data-type'); userSettings.set('guide-indicator-' + type, chkIndicator.checked);
chkCategorys[i].checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1;
}
}
function save(context) {
var i;
var length;
var chkIndicators = context.querySelectorAll('.chkIndicator');
for (i = 0, length = chkIndicators.length; i < length; i++) {
var type = chkIndicators[i].getAttribute('data-type');
userSettings.set('guide-indicator-' + type, chkIndicators[i].checked);
} }
userSettings.set('guide-colorcodedbackgrounds', context.querySelector('.chkColorCodedBackgrounds').checked); userSettings.set('guide-colorcodedbackgrounds', context.querySelector('.chkColorCodedBackgrounds').checked);
userSettings.set('livetv-favoritechannelsattop', context.querySelector('.chkFavoriteChannelsAtTop').checked); userSettings.set('livetv-favoritechannelsattop', context.querySelector('.chkFavoriteChannelsAtTop').checked);
var sortBys = context.querySelectorAll('.chkSortOrder'); const sortBys = context.querySelectorAll('.chkSortOrder');
for (i = 0, length = sortBys.length; i < length; i++) { for (const sortBy of sortBys) {
if (sortBys[i].checked) { if (sortBy.checked) {
userSettings.set('livetv-channelorder', sortBys[i].value); userSettings.set('livetv-channelorder', sortBy.value);
break; break;
} }
} }
} }
function load(context) { function load(context) {
var i; const chkIndicators = context.querySelectorAll('.chkIndicator');
var length;
var chkIndicators = context.querySelectorAll('.chkIndicator'); for (const chkIndicator of chkIndicators) {
for (i = 0, length = chkIndicators.length; i < length; i++) { const type = chkIndicator.getAttribute('data-type');
var type = chkIndicators[i].getAttribute('data-type');
if (chkIndicators[i].getAttribute('data-default') === 'true') { if (chkIndicator.getAttribute('data-default') === 'true') {
chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) !== 'false'; chkIndicator.checked = userSettings.get('guide-indicator-' + type) !== 'false';
} else { } else {
chkIndicators[i].checked = userSettings.get('guide-indicator-' + type) === 'true'; chkIndicator.checked = userSettings.get('guide-indicator-' + type) === 'true';
} }
} }
context.querySelector('.chkColorCodedBackgrounds').checked = userSettings.get('guide-colorcodedbackgrounds') === 'true'; context.querySelector('.chkColorCodedBackgrounds').checked = userSettings.get('guide-colorcodedbackgrounds') === 'true';
context.querySelector('.chkFavoriteChannelsAtTop').checked = userSettings.get('livetv-favoritechannelsattop') !== 'false'; context.querySelector('.chkFavoriteChannelsAtTop').checked = userSettings.get('livetv-favoritechannelsattop') !== 'false';
var sortByValue = userSettings.get('livetv-channelorder') || 'Number'; const sortByValue = userSettings.get('livetv-channelorder') || 'Number';
var sortBys = context.querySelectorAll('.chkSortOrder'); const sortBys = context.querySelectorAll('.chkSortOrder');
for (i = 0, length = sortBys.length; i < length; i++) { for (const sortBy of sortBys) {
sortBys[i].checked = sortBys[i].value === sortByValue; sortBy.checked = sortBy.value === sortByValue;
}
} }
}
function showEditor(options) { function showEditor(options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
var settingsChanged = false; let settingsChanged = false;
require(['text!./guide-settings.template.html'], function (template) { import('text!./guide-settings.template.html').then(({ default: template }) => {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -97,11 +100,11 @@ define(['dialogHelper', 'globalize', 'userSettings', '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 = '';
html += globalize.translateHtml(template, 'core'); html += globalize.translateHtml(template, 'core');
@ -139,9 +142,8 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectio
dialogHelper.open(dlg); dialogHelper.open(dlg);
}); });
}); });
} }
return { export default {
show: showEditor show: showEditor
}; };
});

2
src/components/guide/guide-settings.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" title="${LabelPrevious}" tabindex="-1"> <button is="paper-icon-button-light" class="btnCancel autoSize" title="${Previous}" tabindex="-1">
<span class="material-icons arrow_back" aria-hidden="true"></span> <span class="material-icons arrow_back" aria-hidden="true"></span>
</button> </button>
<h3 class="formDialogHeaderTitle"> <h3 class="formDialogHeaderTitle">

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

@ -1,39 +1,64 @@
define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', 'scrollHelper', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'playbackManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'dom', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-programcell', 'emby-button', 'paper-icon-button-light', 'emby-tabs', 'emby-scroller', 'flexStyles', 'webcomponents'], function (require, inputManager, browser, globalize, connectionManager, scrollHelper, serverNotifications, loading, datetime, focusManager, playbackManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, dom) { import inputManager from 'inputManager';
'use strict'; import browser from 'browser';
import globalize from 'globalize';
import connectionManager from 'connectionManager';
import scrollHelper from 'scrollHelper';
import serverNotifications from 'serverNotifications';
import loading from 'loading';
import datetime from 'datetime';
import focusManager from 'focusManager';
import playbackManager from 'playbackManager';
import * as userSettings from 'userSettings';
import imageLoader from 'imageLoader';
import events from 'events';
import layoutManager from 'layoutManager';
import itemShortcuts from 'itemShortcuts';
import dom from 'dom';
import 'css!./guide.css';
import 'programStyles';
import 'material-icons';
import 'scrollStyles';
import 'emby-programcell';
import 'emby-button';
import 'paper-icon-button-light';
import 'emby-tabs';
import 'emby-scroller';
import 'flexStyles';
import 'webcomponents';
function showViewSettings(instance) { function showViewSettings(instance) {
require(['guide-settings-dialog'], function (guideSettingsDialog) { import('guide-settings-dialog').then(({default: guideSettingsDialog}) => {
guideSettingsDialog.show(instance.categoryOptions).then(function () { guideSettingsDialog.show(instance.categoryOptions).then(function () {
instance.refresh(); instance.refresh();
}); });
}); });
} }
function updateProgramCellOnScroll(cell, scrollPct) { function updateProgramCellOnScroll(cell, scrollPct) {
var left = cell.posLeft; let left = cell.posLeft;
if (!left) { if (!left) {
left = parseFloat(cell.style.left.replace('%', '')); left = parseFloat(cell.style.left.replace('%', ''));
cell.posLeft = left; cell.posLeft = left;
} }
var width = cell.posWidth; let width = cell.posWidth;
if (!width) { if (!width) {
width = parseFloat(cell.style.width.replace('%', '')); width = parseFloat(cell.style.width.replace('%', ''));
cell.posWidth = width; cell.posWidth = width;
} }
var right = left + width; const right = left + width;
var newPct = Math.max(Math.min(scrollPct, right), left); const newPct = Math.max(Math.min(scrollPct, right), left);
var offset = newPct - left; const offset = newPct - left;
var pctOfWidth = (offset / width) * 100; const pctOfWidth = (offset / width) * 100;
var guideProgramName = cell.guideProgramName; let guideProgramName = cell.guideProgramName;
if (!guideProgramName) { if (!guideProgramName) {
guideProgramName = cell.querySelector('.guideProgramName'); guideProgramName = cell.querySelector('.guideProgramName');
cell.guideProgramName = guideProgramName; cell.guideProgramName = guideProgramName;
} }
var caret = cell.caret; let caret = cell.caret;
if (!caret) { if (!caret) {
caret = cell.querySelector('.guide-programNameCaret'); caret = cell.querySelector('.guide-programNameCaret');
cell.caret = caret; cell.caret = caret;
@ -48,10 +73,10 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
caret.classList.add('hide'); caret.classList.add('hide');
} }
} }
} }
var isUpdatingProgramCellScroll = false; let isUpdatingProgramCellScroll = false;
function updateProgramCellsOnScroll(programGrid, programCells) { function updateProgramCellsOnScroll(programGrid, programCells) {
if (isUpdatingProgramCellScroll) { if (isUpdatingProgramCellScroll) {
return; return;
} }
@ -59,34 +84,34 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
isUpdatingProgramCellScroll = true; isUpdatingProgramCellScroll = true;
requestAnimationFrame(function () { requestAnimationFrame(function () {
var scrollLeft = programGrid.scrollLeft; const scrollLeft = programGrid.scrollLeft;
var scrollPct = scrollLeft ? (scrollLeft / programGrid.scrollWidth) * 100 : 0; const scrollPct = scrollLeft ? (scrollLeft / programGrid.scrollWidth) * 100 : 0;
for (var i = 0, length = programCells.length; i < length; i++) { for (const programCell of programCells) {
updateProgramCellOnScroll(programCells[i], scrollPct); updateProgramCellOnScroll(programCell, scrollPct);
} }
isUpdatingProgramCellScroll = false; isUpdatingProgramCellScroll = false;
}); });
} }
function onProgramGridClick(e) { function onProgramGridClick(e) {
if (!layoutManager.tv) { if (!layoutManager.tv) {
return; return;
} }
var programCell = dom.parentWithClass(e.target, 'programCell'); const programCell = dom.parentWithClass(e.target, 'programCell');
if (programCell) { if (programCell) {
var startDate = programCell.getAttribute('data-startdate'); let startDate = programCell.getAttribute('data-startdate');
var endDate = programCell.getAttribute('data-enddate'); let endDate = programCell.getAttribute('data-enddate');
startDate = datetime.parseISO8601Date(startDate, { toLocal: true }).getTime(); startDate = datetime.parseISO8601Date(startDate, { toLocal: true }).getTime();
endDate = datetime.parseISO8601Date(endDate, { toLocal: true }).getTime(); endDate = datetime.parseISO8601Date(endDate, { toLocal: true }).getTime();
var now = new Date().getTime(); const now = new Date().getTime();
if (now >= startDate && now < endDate) { if (now >= startDate && now < endDate) {
var channelId = programCell.getAttribute('data-channelid'); const channelId = programCell.getAttribute('data-channelid');
var serverId = programCell.getAttribute('data-serverid'); const serverId = programCell.getAttribute('data-serverid');
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -97,27 +122,27 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
}); });
} }
} }
} }
function Guide(options) { function Guide(options) {
var self = this; const self = this;
var items = {}; let items = {};
self.options = options; self.options = options;
self.categoryOptions = { categories: [] }; self.categoryOptions = { categories: [] };
// 30 mins // 30 mins
var cellCurationMinutes = 30; const cellCurationMinutes = 30;
var cellDurationMs = cellCurationMinutes * 60 * 1000; const cellDurationMs = cellCurationMinutes * 60 * 1000;
var msPerDay = 86400000; const msPerDay = 86400000;
var currentDate; let currentDate;
var currentStartIndex = 0; let currentStartIndex = 0;
var currentChannelLimit = 0; let currentChannelLimit = 0;
var autoRefreshInterval; let autoRefreshInterval;
var programCells; let programCells;
var lastFocusDirection; let lastFocusDirection;
var programGrid; let programGrid;
self.refresh = function () { self.refresh = function () {
currentDate = null; currentDate = null;
@ -153,7 +178,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
function restartAutoRefresh() { function restartAutoRefresh() {
stopAutoRefresh(); stopAutoRefresh();
var intervalMs = 60000 * 15; // (minutes) const intervalMs = 60000 * 15; // (minutes)
autoRefreshInterval = setInterval(function () { autoRefreshInterval = setInterval(function () {
self.refresh(); self.refresh();
@ -168,7 +193,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function normalizeDateToTimeslot(date) { function normalizeDateToTimeslot(date) {
var minutesOffset = date.getMinutes() - cellCurationMinutes; const minutesOffset = date.getMinutes() - cellCurationMinutes;
if (minutesOffset >= 0) { if (minutesOffset >= 0) {
date.setHours(date.getHours(), cellCurationMinutes, 0, 0); date.setHours(date.getHours(), cellCurationMinutes, 0, 0);
@ -188,9 +213,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function reloadGuide(context, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) { function reloadGuide(context, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(options.serverId);
var channelQuery = { const channelQuery = {
StartIndex: 0, StartIndex: 0,
EnableFavoriteSorting: userSettings.get('livetv-favoritechannelsattop') !== 'false' EnableFavoriteSorting: userSettings.get('livetv-favoritechannelsattop') !== 'false'
@ -198,7 +223,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
channelQuery.UserId = apiClient.getCurrentUserId(); channelQuery.UserId = apiClient.getCurrentUserId();
var channelLimit = 500; const channelLimit = 500;
currentChannelLimit = channelLimit; currentChannelLimit = channelLimit;
showLoading(); showLoading();
@ -209,12 +234,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
channelQuery.EnableUserData = false; channelQuery.EnableUserData = false;
channelQuery.EnableImageTypes = 'Primary'; channelQuery.EnableImageTypes = 'Primary';
var categories = self.categoryOptions.categories || []; const categories = self.categoryOptions.categories || [];
var displayMovieContent = !categories.length || categories.indexOf('movies') !== -1; const displayMovieContent = !categories.length || categories.indexOf('movies') !== -1;
var displaySportsContent = !categories.length || categories.indexOf('sports') !== -1; const displaySportsContent = !categories.length || categories.indexOf('sports') !== -1;
var displayNewsContent = !categories.length || categories.indexOf('news') !== -1; const displayNewsContent = !categories.length || categories.indexOf('news') !== -1;
var displayKidsContent = !categories.length || categories.indexOf('kids') !== -1; const displayKidsContent = !categories.length || categories.indexOf('kids') !== -1;
var displaySeriesContent = !categories.length || categories.indexOf('series') !== -1; const displaySeriesContent = !categories.length || categories.indexOf('series') !== -1;
if (displayMovieContent && displaySportsContent && displayNewsContent && displayKidsContent) { if (displayMovieContent && displaySportsContent && displayNewsContent && displayKidsContent) {
channelQuery.IsMovie = null; channelQuery.IsMovie = null;
@ -248,19 +273,19 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
channelQuery.SortOrder = null; channelQuery.SortOrder = null;
} }
var date = newStartDate; let date = newStartDate;
// Add one second to avoid getting programs that are just ending // Add one second to avoid getting programs that are just ending
date = new Date(date.getTime() + 1000); date = new Date(date.getTime() + 1000);
// Subtract to avoid getting programs that are starting when the grid ends // Subtract to avoid getting programs that are starting when the grid ends
var nextDay = new Date(date.getTime() + msPerDay - 2000); const nextDay = new Date(date.getTime() + msPerDay - 2000);
// Normally we'd want to just let responsive css handle this, // Normally we'd want to just let responsive css handle this,
// but since mobile browsers are often underpowered, // but since mobile browsers are often underpowered,
// it can help performance to get them out of the markup // it can help performance to get them out of the markup
var allowIndicators = dom.getWindowSize().innerWidth >= 600; const allowIndicators = dom.getWindowSize().innerWidth >= 600;
var renderOptions = { const renderOptions = {
showHdIcon: allowIndicators && userSettings.get('guide-indicator-hd') === 'true', showHdIcon: allowIndicators && userSettings.get('guide-indicator-hd') === 'true',
showLiveIndicator: allowIndicators && userSettings.get('guide-indicator-live') !== 'false', showLiveIndicator: allowIndicators && userSettings.get('guide-indicator-live') !== 'false',
showPremiereIndicator: allowIndicators && userSettings.get('guide-indicator-premiere') !== 'false', showPremiereIndicator: allowIndicators && userSettings.get('guide-indicator-premiere') !== 'false',
@ -270,8 +295,8 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
}; };
apiClient.getLiveTvChannels(channelQuery).then(function (channelsResult) { apiClient.getLiveTvChannels(channelQuery).then(function (channelsResult) {
var btnPreviousPage = context.querySelector('.btnPreviousPage'); const btnPreviousPage = context.querySelector('.btnPreviousPage');
var btnNextPage = context.querySelector('.btnNextPage'); const btnNextPage = context.querySelector('.btnNextPage');
if (channelsResult.TotalRecordCount > channelLimit) { if (channelsResult.TotalRecordCount > channelLimit) {
context.querySelector('.guideOptions').classList.remove('hide'); context.querySelector('.guideOptions').classList.remove('hide');
@ -294,9 +319,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
context.querySelector('.guideOptions').classList.add('hide'); context.querySelector('.guideOptions').classList.add('hide');
} }
var programFields = []; const programFields = [];
var programQuery = { const programQuery = {
UserId: apiClient.getCurrentUserId(), UserId: apiClient.getCurrentUserId(),
MaxStartDate: nextDay.toISOString(), MaxStartDate: nextDay.toISOString(),
MinEndDate: date.toISOString(), MinEndDate: date.toISOString(),
@ -340,7 +365,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getTimeslotHeadersHtml(startDate, endDateTime) { function getTimeslotHeadersHtml(startDate, endDateTime) {
var html = ''; let html = '';
// clone // clone
startDate = new Date(startDate.getTime()); startDate = new Date(startDate.getTime());
@ -381,7 +406,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getTimerIndicator(item) { function getTimerIndicator(item) {
var status; let status;
if (item.Type === 'SeriesTimer') { if (item.Type === 'SeriesTimer') {
return '<span class="material-icons programIcon seriesTimerIcon fiber_smart_record"></span>'; return '<span class="material-icons programIcon seriesTimerIcon fiber_smart_record"></span>';
@ -405,30 +430,30 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) { function getChannelProgramsHtml(context, date, channel, programs, options, listInfo) {
var html = ''; let html = '';
var startMs = date.getTime(); const startMs = date.getTime();
var endMs = startMs + msPerDay - 1; const endMs = startMs + msPerDay - 1;
var outerCssClass = layoutManager.tv ? 'channelPrograms channelPrograms-tv' : 'channelPrograms'; const outerCssClass = layoutManager.tv ? 'channelPrograms channelPrograms-tv' : 'channelPrograms';
html += '<div class="' + outerCssClass + '" data-channelid="' + channel.Id + '">'; html += '<div class="' + outerCssClass + '" data-channelid="' + channel.Id + '">';
var clickAction = layoutManager.tv ? 'link' : 'programdialog'; const clickAction = layoutManager.tv ? 'link' : 'programdialog';
var categories = self.categoryOptions.categories || []; const categories = self.categoryOptions.categories || [];
var displayMovieContent = !categories.length || categories.indexOf('movies') !== -1; const displayMovieContent = !categories.length || categories.indexOf('movies') !== -1;
var displaySportsContent = !categories.length || categories.indexOf('sports') !== -1; const displaySportsContent = !categories.length || categories.indexOf('sports') !== -1;
var displayNewsContent = !categories.length || categories.indexOf('news') !== -1; const displayNewsContent = !categories.length || categories.indexOf('news') !== -1;
var displayKidsContent = !categories.length || categories.indexOf('kids') !== -1; const displayKidsContent = !categories.length || categories.indexOf('kids') !== -1;
var displaySeriesContent = !categories.length || categories.indexOf('series') !== -1; const displaySeriesContent = !categories.length || categories.indexOf('series') !== -1;
var enableColorCodedBackgrounds = userSettings.get('guide-colorcodedbackgrounds') === 'true'; const enableColorCodedBackgrounds = userSettings.get('guide-colorcodedbackgrounds') === 'true';
var programsFound; let programsFound;
var now = new Date().getTime(); const now = new Date().getTime();
for (var i = listInfo.startIndex, length = programs.length; i < length; i++) { for (let i = listInfo.startIndex, length = programs.length; i < length; i++) {
var program = programs[i]; const program = programs[i];
if (program.ChannelId !== channel.Id) { if (program.ChannelId !== channel.Id) {
if (programsFound) { if (programsFound) {
@ -443,8 +468,8 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
parseDates(program); parseDates(program);
var startDateLocalMs = program.StartDateLocal.getTime(); const startDateLocalMs = program.StartDateLocal.getTime();
var endDateLocalMs = program.EndDateLocal.getTime(); const endDateLocalMs = program.EndDateLocal.getTime();
if (endDateLocalMs < startMs) { if (endDateLocalMs < startMs) {
continue; continue;
@ -456,18 +481,18 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
items[program.Id] = program; items[program.Id] = program;
var renderStartMs = Math.max(startDateLocalMs, startMs); const renderStartMs = Math.max(startDateLocalMs, startMs);
var startPercent = (startDateLocalMs - startMs) / msPerDay; let startPercent = (startDateLocalMs - startMs) / msPerDay;
startPercent *= 100; startPercent *= 100;
startPercent = Math.max(startPercent, 0); startPercent = Math.max(startPercent, 0);
var renderEndMs = Math.min(endDateLocalMs, endMs); const renderEndMs = Math.min(endDateLocalMs, endMs);
var endPercent = (renderEndMs - renderStartMs) / msPerDay; let endPercent = (renderEndMs - renderStartMs) / msPerDay;
endPercent *= 100; endPercent *= 100;
var cssClass = 'programCell itemAction'; let cssClass = 'programCell itemAction';
var accentCssClass = null; let accentCssClass = null;
var displayInnerContent = true; let displayInnerContent = true;
if (program.IsKids) { if (program.IsKids) {
displayInnerContent = displayKidsContent; displayInnerContent = displayKidsContent;
@ -495,7 +520,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
cssClass += ' programCell-active'; cssClass += ' programCell-active';
} }
var timerAttributes = ''; let timerAttributes = '';
if (program.TimerId) { if (program.TimerId) {
timerAttributes += ' data-timerid="' + program.TimerId + '"'; timerAttributes += ' data-timerid="' + program.TimerId + '"';
} }
@ -503,12 +528,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
timerAttributes += ' data-seriestimerid="' + program.SeriesTimerId + '"'; timerAttributes += ' data-seriestimerid="' + program.SeriesTimerId + '"';
} }
var isAttribute = endPercent >= 2 ? ' is="emby-programcell"' : ''; const isAttribute = endPercent >= 2 ? ' is="emby-programcell"' : '';
html += '<button' + isAttribute + ' data-action="' + clickAction + '"' + timerAttributes + ' data-channelid="' + program.ChannelId + '" data-id="' + program.Id + '" data-serverid="' + program.ServerId + '" data-startdate="' + program.StartDate + '" data-enddate="' + program.EndDate + '" data-type="' + program.Type + '" class="' + cssClass + '" style="left:' + startPercent + '%;width:' + endPercent + '%;">'; html += '<button' + isAttribute + ' data-action="' + clickAction + '"' + timerAttributes + ' data-channelid="' + program.ChannelId + '" data-id="' + program.Id + '" data-serverid="' + program.ServerId + '" data-startdate="' + program.StartDate + '" data-enddate="' + program.EndDate + '" data-type="' + program.Type + '" class="' + cssClass + '" style="left:' + startPercent + '%;width:' + endPercent + '%;">';
if (displayInnerContent) { if (displayInnerContent) {
var guideProgramNameClass = 'guideProgramName'; const guideProgramNameClass = 'guideProgramName';
html += '<div class="' + guideProgramNameClass + '">'; html += '<div class="' + guideProgramNameClass + '">';
@ -516,13 +541,13 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
html += '<div class="guideProgramNameText">' + program.Name; html += '<div class="guideProgramNameText">' + program.Name;
var indicatorHtml = null; let indicatorHtml = null;
if (program.IsLive && options.showLiveIndicator) { if (program.IsLive && options.showLiveIndicator) {
indicatorHtml = '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('Live') + '</span>'; indicatorHtml = '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('Live') + '</span>';
} else if (program.IsPremiere && options.showPremiereIndicator) { } else if (program.IsPremiere && options.showPremiereIndicator) {
indicatorHtml = '<span class="premiereTvProgram guideProgramIndicator">' + globalize.translate('Premiere') + '</span>'; indicatorHtml = '<span class="premiereTvProgram guideProgramIndicator">' + globalize.translate('Premiere') + '</span>';
} else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) { } else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) {
indicatorHtml = '<span class="newTvProgram guideProgramIndicator">' + globalize.translate('AttributeNew') + '</span>'; indicatorHtml = '<span class="newTvProgram guideProgramIndicator">' + globalize.translate('New') + '</span>';
} else if (program.IsSeries && program.IsRepeat && options.showRepeatIndicator) { } else if (program.IsSeries && program.IsRepeat && options.showRepeatIndicator) {
indicatorHtml = '<span class="repeatTvProgram guideProgramIndicator">' + globalize.translate('Repeat') + '</span>'; indicatorHtml = '<span class="repeatTvProgram guideProgramIndicator">' + globalize.translate('Repeat') + '</span>';
} }
@ -561,19 +586,18 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function renderChannelHeaders(context, channels, apiClient) { function renderChannelHeaders(context, channels, apiClient) {
var html = ''; let html = '';
for (var i = 0, length = channels.length; i < length; i++) { for (const channel of channels) {
var channel = channels[i]; const hasChannelImage = channel.ImageTags.Primary;
var hasChannelImage = channel.ImageTags.Primary;
var cssClass = 'guide-channelHeaderCell itemAction'; let cssClass = 'guide-channelHeaderCell itemAction';
if (layoutManager.tv) { if (layoutManager.tv) {
cssClass += ' guide-channelHeaderCell-tv'; cssClass += ' guide-channelHeaderCell-tv';
} }
var title = []; const title = [];
if (channel.ChannelNumber) { if (channel.ChannelNumber) {
title.push(channel.ChannelNumber); title.push(channel.ChannelNumber);
} }
@ -584,7 +608,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
html += '<button title="' + title.join(' ') + '" type="button" class="' + cssClass + '"' + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">'; html += '<button title="' + title.join(' ') + '" type="button" class="' + cssClass + '"' + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">';
if (hasChannelImage) { if (hasChannelImage) {
var url = apiClient.getScaledImageUrl(channel.Id, { const url = apiClient.getScaledImageUrl(channel.Id, {
maxHeight: 220, maxHeight: 220,
tag: channel.ImageTags.Primary, tag: channel.ImageTags.Primary,
type: 'Primary' type: 'Primary'
@ -604,20 +628,20 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
html += '</button>'; html += '</button>';
} }
var channelList = context.querySelector('.channelsContainer'); const channelList = context.querySelector('.channelsContainer');
channelList.innerHTML = html; channelList.innerHTML = html;
imageLoader.lazyChildren(channelList); imageLoader.lazyChildren(channelList);
} }
function renderPrograms(context, date, channels, programs, options) { function renderPrograms(context, date, channels, programs, options) {
var listInfo = { const listInfo = {
startIndex: 0 startIndex: 0
}; };
var html = []; const html = [];
for (var i = 0, length = channels.length; i < length; i++) { for (const channel of channels) {
html.push(getChannelProgramsHtml(context, date, channels[i], programs, options, listInfo)); html.push(getChannelProgramsHtml(context, date, channel, programs, options, listInfo));
} }
programGrid.innerHTML = html.join(''); programGrid.innerHTML = html.join('');
@ -628,17 +652,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getProgramSortOrder(program, channels) { function getProgramSortOrder(program, channels) {
var channelId = program.ChannelId; const channelId = program.ChannelId;
var channelIndex = -1; let channelIndex = -1;
for (var i = 0, length = channels.length; i < length; i++) { for (let i = 0, length = channels.length; i < length; i++) {
if (channelId === channels[i].Id) { if (channelId === channels[i].Id) {
channelIndex = i; channelIndex = i;
break; break;
} }
} }
var start = datetime.parseISO8601Date(program.StartDate, { toLocal: true }); const start = datetime.parseISO8601Date(program.StartDate, { toLocal: true });
return (channelIndex * 10000000) + (start.getTime() / 60000); return (channelIndex * 10000000) + (start.getTime() / 60000);
} }
@ -648,9 +672,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
return getProgramSortOrder(a, channels) - getProgramSortOrder(b, channels); return getProgramSortOrder(a, channels) - getProgramSortOrder(b, channels);
}); });
var activeElement = document.activeElement; const activeElement = document.activeElement;
var itemId = activeElement && activeElement.getAttribute ? activeElement.getAttribute('data-id') : null; const itemId = activeElement && activeElement.getAttribute ? activeElement.getAttribute('data-id') : null;
var channelRowId = null; let channelRowId = null;
if (activeElement) { if (activeElement) {
channelRowId = dom.parentWithClass(activeElement, 'channelPrograms'); channelRowId = dom.parentWithClass(activeElement, 'channelPrograms');
@ -659,8 +683,8 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
renderChannelHeaders(context, channels, apiClient); renderChannelHeaders(context, channels, apiClient);
var startDate = date; const startDate = date;
var endDate = new Date(startDate.getTime() + msPerDay); const endDate = new Date(startDate.getTime() + msPerDay);
context.querySelector('.timeslotHeaders').innerHTML = getTimeslotHeadersHtml(startDate, endDate); context.querySelector('.timeslotHeaders').innerHTML = getTimeslotHeadersHtml(startDate, endDate);
items = {}; items = {};
renderPrograms(context, date, channels, programs, renderOptions); renderPrograms(context, date, channels, programs, renderOptions);
@ -675,17 +699,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
function scrollProgramGridToTimeMs(context, scrollToTimeMs, startTimeOfDayMs) { function scrollProgramGridToTimeMs(context, scrollToTimeMs, startTimeOfDayMs) {
scrollToTimeMs -= startTimeOfDayMs; scrollToTimeMs -= startTimeOfDayMs;
var pct = scrollToTimeMs / msPerDay; const pct = scrollToTimeMs / msPerDay;
programGrid.scrollTop = 0; programGrid.scrollTop = 0;
var scrollPos = pct * programGrid.scrollWidth; const scrollPos = pct * programGrid.scrollWidth;
nativeScrollTo(programGrid, scrollPos, true); nativeScrollTo(programGrid, scrollPos, true);
} }
function focusProgram(context, itemId, channelRowId, focusToTimeMs, startTimeOfDayMs) { function focusProgram(context, itemId, channelRowId, focusToTimeMs, startTimeOfDayMs) {
var focusElem; let focusElem;
if (itemId) { if (itemId) {
focusElem = context.querySelector('[data-id="' + itemId + '"]'); focusElem = context.querySelector('[data-id="' + itemId + '"]');
} }
@ -693,7 +717,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
if (focusElem) { if (focusElem) {
focusManager.focus(focusElem); focusManager.focus(focusElem);
} else { } else {
var autoFocusParent; let autoFocusParent;
if (channelRowId) { if (channelRowId) {
autoFocusParent = context.querySelector('[data-channelid="' + channelRowId + '"]'); autoFocusParent = context.querySelector('[data-channelid="' + channelRowId + '"]');
@ -705,14 +729,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
focusToTimeMs -= startTimeOfDayMs; focusToTimeMs -= startTimeOfDayMs;
var pct = (focusToTimeMs / msPerDay) * 100; const pct = (focusToTimeMs / msPerDay) * 100;
var programCell = autoFocusParent.querySelector('.programCell'); let programCell = autoFocusParent.querySelector('.programCell');
while (programCell) { while (programCell) {
var left = (programCell.style.left || '').replace('%', ''); let left = (programCell.style.left || '').replace('%', '');
left = left ? parseFloat(left) : 0; left = left ? parseFloat(left) : 0;
var width = (programCell.style.width || '').replace('%', ''); let width = (programCell.style.width || '').replace('%', '');
width = width ? parseFloat(width) : 0; width = width ? parseFloat(width) : 0;
if (left >= pct || (left + width) >= pct) { if (left >= pct || (left + width) >= pct) {
@ -745,14 +769,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
} }
var lastGridScroll = 0; let lastGridScroll = 0;
var lastHeaderScroll = 0; let lastHeaderScroll = 0;
var scrollXPct = 0; let scrollXPct = 0;
function onProgramGridScroll(context, elem, timeslotHeaders) { function onProgramGridScroll(context, elem, timeslotHeaders) {
if ((new Date().getTime() - lastHeaderScroll) >= 1000) { if ((new Date().getTime() - lastHeaderScroll) >= 1000) {
lastGridScroll = new Date().getTime(); lastGridScroll = new Date().getTime();
var scrollLeft = elem.scrollLeft; const scrollLeft = elem.scrollLeft;
scrollXPct = (scrollLeft * 100) / elem.scrollWidth; scrollXPct = (scrollLeft * 100) / elem.scrollWidth;
nativeScrollTo(timeslotHeaders, scrollLeft, true); nativeScrollTo(timeslotHeaders, scrollLeft, true);
} }
@ -768,17 +792,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) { function changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
var newStartDate = normalizeDateToTimeslot(date); const newStartDate = normalizeDateToTimeslot(date);
currentDate = newStartDate; currentDate = newStartDate;
reloadGuide(page, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender); reloadGuide(page, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender);
} }
function getDateTabText(date, isActive, tabIndex) { function getDateTabText(date, isActive, tabIndex) {
var cssClass = isActive ? 'emby-tab-button guide-date-tab-button emby-tab-button-active' : 'emby-tab-button guide-date-tab-button'; const cssClass = isActive ? 'emby-tab-button guide-date-tab-button emby-tab-button-active' : 'emby-tab-button guide-date-tab-button';
var html = '<button is="emby-button" class="' + cssClass + '" data-index="' + tabIndex + '" data-date="' + date.getTime() + '">'; let html = '<button is="emby-button" class="' + cssClass + '" data-index="' + tabIndex + '" data-date="' + date.getTime() + '">';
var tabText = datetime.toLocaleDateString(date, { weekday: 'short' }); let tabText = datetime.toLocaleDateString(date, { weekday: 'short' });
tabText += '<br/>'; tabText += '<br/>';
tabText += date.getDate(); tabText += date.getDate();
@ -789,12 +813,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function setDateRange(page, guideInfo) { function setDateRange(page, guideInfo) {
var today = new Date(); const today = new Date();
var nowHours = today.getHours(); const nowHours = today.getHours();
today.setHours(nowHours, 0, 0, 0); today.setHours(nowHours, 0, 0, 0);
var start = datetime.parseISO8601Date(guideInfo.StartDate, { toLocal: true }); let start = datetime.parseISO8601Date(guideInfo.StartDate, { toLocal: true });
var end = datetime.parseISO8601Date(guideInfo.EndDate, { toLocal: true }); const end = datetime.parseISO8601Date(guideInfo.EndDate, { toLocal: true });
start.setHours(nowHours, 0, 0, 0); start.setHours(nowHours, 0, 0, 0);
end.setHours(0, 0, 0, 0); end.setHours(0, 0, 0, 0);
@ -805,11 +829,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
start = new Date(Math.max(today, start)); start = new Date(Math.max(today, start));
var dateTabsHtml = ''; let dateTabsHtml = '';
var tabIndex = 0; let tabIndex = 0;
// TODO: Use date-fns // TODO: Use date-fns
var date = new Date(); const date = new Date();
if (currentDate) { if (currentDate) {
date.setTime(currentDate.getTime()); date.setTime(currentDate.getTime());
@ -817,11 +841,11 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
date.setHours(nowHours, 0, 0, 0); date.setHours(nowHours, 0, 0, 0);
var startTimeOfDayMs = (start.getHours() * 60 * 60 * 1000); let startTimeOfDayMs = (start.getHours() * 60 * 60 * 1000);
startTimeOfDayMs += start.getMinutes() * 60 * 1000; startTimeOfDayMs += start.getMinutes() * 60 * 1000;
while (start <= end) { while (start <= end) {
var isActive = date.getDate() === start.getDate() && date.getMonth() === start.getMonth() && date.getFullYear() === start.getFullYear(); const isActive = date.getDate() === start.getDate() && date.getMonth() === start.getMonth() && date.getFullYear() === start.getFullYear();
dateTabsHtml += getDateTabText(start, isActive, tabIndex); dateTabsHtml += getDateTabText(start, isActive, tabIndex);
@ -833,23 +857,23 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
page.querySelector('.emby-tabs-slider').innerHTML = dateTabsHtml; page.querySelector('.emby-tabs-slider').innerHTML = dateTabsHtml;
page.querySelector('.guideDateTabs').refresh(); page.querySelector('.guideDateTabs').refresh();
var newDate = new Date(); const newDate = new Date();
var newDateHours = newDate.getHours(); const newDateHours = newDate.getHours();
var scrollToTimeMs = newDateHours * 60 * 60 * 1000; let scrollToTimeMs = newDateHours * 60 * 60 * 1000;
var minutes = newDate.getMinutes(); const minutes = newDate.getMinutes();
if (minutes >= 30) { if (minutes >= 30) {
scrollToTimeMs += 30 * 60 * 1000; scrollToTimeMs += 30 * 60 * 1000;
} }
var focusToTimeMs = ((newDateHours * 60) + minutes) * 60 * 1000; const focusToTimeMs = ((newDateHours * 60) + minutes) * 60 * 1000;
changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, layoutManager.tv); changeDate(page, date, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, layoutManager.tv);
} }
function reloadPage(page) { function reloadPage(page) {
showLoading(); showLoading();
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(options.serverId);
apiClient.getLiveTvGuideInfo().then(function (guideInfo) { apiClient.getLiveTvGuideInfo().then(function (guideInfo) {
setDateRange(page, guideInfo); setDateRange(page, guideInfo);
@ -857,18 +881,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function getChannelProgramsFocusableElements(container) { function getChannelProgramsFocusableElements(container) {
var elements = container.querySelectorAll('.programCell'); const elements = container.querySelectorAll('.programCell');
var list = []; const list = [];
// add 1 to avoid programs that are out of view to the left // add 1 to avoid programs that are out of view to the left
var currentScrollXPct = scrollXPct + 1; const currentScrollXPct = scrollXPct + 1;
for (var i = 0, length = elements.length; i < length; i++) { for (const elem of elements) {
var elem = elements[i]; let left = (elem.style.left || '').replace('%', '');
var left = (elem.style.left || '').replace('%', '');
left = left ? parseFloat(left) : 0; left = left ? parseFloat(left) : 0;
var width = (elem.style.width || '').replace('%', '');
let width = (elem.style.width || '').replace('%', '');
width = width ? parseFloat(width) : 0; width = width ? parseFloat(width) : 0;
if ((left + width) >= currentScrollXPct) { if ((left + width) >= currentScrollXPct) {
@ -880,12 +903,12 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onInputCommand(e) { function onInputCommand(e) {
var target = e.target; const target = e.target;
var programCell = dom.parentWithClass(target, 'programCell'); const programCell = dom.parentWithClass(target, 'programCell');
var container; let container;
var channelPrograms; let channelPrograms;
var focusableElements; let focusableElements;
var newRow; let newRow;
switch (e.detail.command) { switch (e.detail.command) {
case 'up': case 'up':
@ -969,14 +992,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onScrollerFocus(e) { function onScrollerFocus(e) {
var target = e.target; const target = e.target;
var programCell = dom.parentWithClass(target, 'programCell'); const programCell = dom.parentWithClass(target, 'programCell');
if (programCell) { if (programCell) {
var focused = target; const focused = target;
var id = focused.getAttribute('data-id'); const id = focused.getAttribute('data-id');
var item = items[id]; const item = items[id];
if (item) { if (item) {
events.trigger(self, 'focus', [ events.trigger(self, 'focus', [
@ -995,9 +1018,9 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
scrollHelper.toCenter(programGrid, programCell, true, true); scrollHelper.toCenter(programGrid, programCell, true, true);
} }
} else if (lastFocusDirection === 'up' || lastFocusDirection === 'down') { } else if (lastFocusDirection === 'up' || lastFocusDirection === 'down') {
var verticalScroller = dom.parentWithClass(target, 'guideVerticalScroller'); const verticalScroller = dom.parentWithClass(target, 'guideVerticalScroller');
if (verticalScroller) { if (verticalScroller) {
var focusedElement = programCell || dom.parentWithTag(target, 'BUTTON'); const focusedElement = programCell || dom.parentWithTag(target, 'BUTTON');
verticalScroller.toCenter(focusedElement, true); verticalScroller.toCenter(focusedElement, true);
} }
} }
@ -1005,7 +1028,7 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
function setScrollEvents(view, enabled) { function setScrollEvents(view, enabled) {
if (layoutManager.tv) { if (layoutManager.tv) {
var guideVerticalScroller = view.querySelector('.guideVerticalScroller'); const guideVerticalScroller = view.querySelector('.guideVerticalScroller');
if (enabled) { if (enabled) {
inputManager.on(guideVerticalScroller, onInputCommand); inputManager.on(guideVerticalScroller, onInputCommand);
@ -1016,16 +1039,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onTimerCreated(e, apiClient, data) { function onTimerCreated(e, apiClient, data) {
var programId = data.ProgramId; const programId = data.ProgramId;
// This could be null, not supported by all tv providers // This could be null, not supported by all tv providers
var newTimerId = data.Id; const newTimerId = data.Id;
// find guide cells by program id, ensure timer icon // find guide cells by program id, ensure timer icon
var cells = options.element.querySelectorAll('.programCell[data-id="' + programId + '"]'); const cells = options.element.querySelectorAll('.programCell[data-id="' + programId + '"]');
for (var i = 0, length = cells.length; i < length; i++) { for (const cell of cells) {
var cell = cells[i]; const icon = cell.querySelector('.timerIcon');
var icon = cell.querySelector('.timerIcon');
if (!icon) { if (!icon) {
cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<span class="timerIcon material-icons programIcon fiber_manual_record"></span>'); cell.querySelector('.guideProgramName').insertAdjacentHTML('beforeend', '<span class="timerIcon material-icons programIcon fiber_manual_record"></span>');
} }
@ -1040,42 +1061,46 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
function onTimerCancelled(e, apiClient, data) { function onTimerCancelled(e, apiClient, data) {
var id = data.Id; const id = data.Id;
// find guide cells by timer id, remove timer icon // find guide cells by timer id, remove timer icon
var cells = options.element.querySelectorAll('.programCell[data-timerid="' + id + '"]'); const cells = options.element.querySelectorAll('.programCell[data-timerid="' + id + '"]');
for (var i = 0, length = cells.length; i < length; i++) {
var cell = cells[i]; for (const cell of cells) {
var icon = cell.querySelector('.timerIcon'); const icon = cell.querySelector('.timerIcon');
if (icon) { if (icon) {
icon.parentNode.removeChild(icon); icon.parentNode.removeChild(icon);
} }
cell.removeAttribute('data-timerid'); cell.removeAttribute('data-timerid');
} }
} }
function onSeriesTimerCancelled(e, apiClient, data) { function onSeriesTimerCancelled(e, apiClient, data) {
var id = data.Id; const id = data.Id;
// find guide cells by timer id, remove timer icon // find guide cells by timer id, remove timer icon
var cells = options.element.querySelectorAll('.programCell[data-seriestimerid="' + id + '"]'); const cells = options.element.querySelectorAll('.programCell[data-seriestimerid="' + id + '"]');
for (var i = 0, length = cells.length; i < length; i++) {
var cell = cells[i]; for (const cell of cells) {
var icon = cell.querySelector('.seriesTimerIcon'); const icon = cell.querySelector('.seriesTimerIcon');
if (icon) { if (icon) {
icon.parentNode.removeChild(icon); icon.parentNode.removeChild(icon);
} }
cell.removeAttribute('data-seriestimerid'); cell.removeAttribute('data-seriestimerid');
} }
} }
require(['text!./tvguide.template.html'], function (template) { import('text!./tvguide.template.html').then(({default: template}) => {
var context = options.element; const context = options.element;
context.classList.add('tvguide'); context.classList.add('tvguide');
context.innerHTML = globalize.translateHtml(template, 'core'); context.innerHTML = globalize.translateHtml(template, 'core');
programGrid = context.querySelector('.programGrid'); programGrid = context.querySelector('.programGrid');
var timeslotHeaders = context.querySelector('.timeslotHeaders'); const timeslotHeaders = context.querySelector('.timeslotHeaders');
if (layoutManager.tv) { if (layoutManager.tv) {
dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, { dom.addEventListener(context.querySelector('.guideVerticalScroller'), 'focus', onScrollerFocus, {
@ -1124,17 +1149,17 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
}); });
context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) { context.querySelector('.guideDateTabs').addEventListener('tabchange', function (e) {
var allTabButtons = e.target.querySelectorAll('.guide-date-tab-button'); const allTabButtons = e.target.querySelectorAll('.guide-date-tab-button');
var tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)]; const tabButton = allTabButtons[parseInt(e.detail.selectedTabIndex)];
if (tabButton) { if (tabButton) {
var previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)]; const previousButton = e.detail.previousIndex == null ? null : allTabButtons[parseInt(e.detail.previousIndex)];
var date = new Date(); const date = new Date();
date.setTime(parseInt(tabButton.getAttribute('data-date'))); date.setTime(parseInt(tabButton.getAttribute('data-date')));
var scrollWidth = programGrid.scrollWidth; const scrollWidth = programGrid.scrollWidth;
var scrollToTimeMs; let scrollToTimeMs;
if (scrollWidth) { if (scrollWidth) {
scrollToTimeMs = (programGrid.scrollLeft / scrollWidth) * msPerDay; scrollToTimeMs = (programGrid.scrollLeft / scrollWidth) * msPerDay;
} else { } else {
@ -1142,14 +1167,14 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
} }
if (previousButton) { if (previousButton) {
var previousDate = new Date(); const previousDate = new Date();
previousDate.setTime(parseInt(previousButton.getAttribute('data-date'))); previousDate.setTime(parseInt(previousButton.getAttribute('data-date')));
scrollToTimeMs += (previousDate.getHours() * 60 * 60 * 1000); scrollToTimeMs += (previousDate.getHours() * 60 * 60 * 1000);
scrollToTimeMs += (previousDate.getMinutes() * 60 * 1000); scrollToTimeMs += (previousDate.getMinutes() * 60 * 1000);
} }
var startTimeOfDayMs = (date.getHours() * 60 * 60 * 1000); let startTimeOfDayMs = (date.getHours() * 60 * 60 * 1000);
startTimeOfDayMs += (date.getMinutes() * 60 * 1000); startTimeOfDayMs += (date.getMinutes() * 60 * 1000);
changeDate(context, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false); changeDate(context, date, scrollToTimeMs, scrollToTimeMs, startTimeOfDayMs, false);
@ -1168,7 +1193,6 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
self.refresh(); self.refresh();
}); });
} }
return Guide; export default Guide;
});

4
src/components/guide/tvguide.template.html
View file

@ -29,10 +29,10 @@
</div> </div>
<div class="guideOptions hide"> <div class="guideOptions hide">
<button is="paper-icon-button-light" type="button" class="btnPreviousPage" title="${LabelPrevious}"> <button is="paper-icon-button-light" type="button" class="btnPreviousPage" title="${Previous}">
<span class="material-icons arrow_back" aria-hidden="true"></span> <span class="material-icons arrow_back" aria-hidden="true"></span>
</button> </button>
<button is="paper-icon-button-light" type="button" class="btnNextPage" title="${LabelNext}"> <button is="paper-icon-button-light" type="button" class="btnNextPage" title="${Next}">
<span class="material-icons arrow_forward" aria-hidden="true"></span> <span class="material-icons arrow_forward" aria-hidden="true"></span>
</button> </button>
</div> </div>

14
src/components/homeScreenSettings/homeScreenSettings.template.html
View file

@ -25,7 +25,7 @@
<option value="resume">${HeaderContinueWatching}</option> <option value="resume">${HeaderContinueWatching}</option>
<option value="resumeaudio">${HeaderContinueListening}</option> <option value="resumeaudio">${HeaderContinueListening}</option>
<option value="latestmedia">${HeaderLatestMedia}</option> <option value="latestmedia">${HeaderLatestMedia}</option>
<option value="nextup">${HeaderNextUp}</option> <option value="nextup">${NextUp}</option>
<option value="livetv">${LiveTV}</option> <option value="livetv">${LiveTV}</option>
<option value="none">${None}</option> <option value="none">${None}</option>
</select> </select>
@ -38,7 +38,7 @@
<option value="resume">${HeaderContinueWatching}</option> <option value="resume">${HeaderContinueWatching}</option>
<option value="resumeaudio">${HeaderContinueListening}</option> <option value="resumeaudio">${HeaderContinueListening}</option>
<option value="latestmedia">${HeaderLatestMedia}</option> <option value="latestmedia">${HeaderLatestMedia}</option>
<option value="nextup">${HeaderNextUp}</option> <option value="nextup">${NextUp}</option>
<option value="livetv">${LiveTV}</option> <option value="livetv">${LiveTV}</option>
<option value="none">${None}</option> <option value="none">${None}</option>
</select> </select>
@ -51,7 +51,7 @@
<option value="resume">${HeaderContinueWatching}</option> <option value="resume">${HeaderContinueWatching}</option>
<option value="resumeaudio">${HeaderContinueListening}</option> <option value="resumeaudio">${HeaderContinueListening}</option>
<option value="latestmedia">${HeaderLatestMedia}</option> <option value="latestmedia">${HeaderLatestMedia}</option>
<option value="nextup">${HeaderNextUp}</option> <option value="nextup">${NextUp}</option>
<option value="livetv">${LiveTV}</option> <option value="livetv">${LiveTV}</option>
<option value="none">${None}</option> <option value="none">${None}</option>
</select> </select>
@ -64,7 +64,7 @@
<option value="resume">${HeaderContinueWatching}</option> <option value="resume">${HeaderContinueWatching}</option>
<option value="resumeaudio">${HeaderContinueListening}</option> <option value="resumeaudio">${HeaderContinueListening}</option>
<option value="latestmedia">${HeaderLatestMedia}</option> <option value="latestmedia">${HeaderLatestMedia}</option>
<option value="nextup">${HeaderNextUp}</option> <option value="nextup">${NextUp}</option>
<option value="livetv">${LiveTV}</option> <option value="livetv">${LiveTV}</option>
<option value="none">${None}</option> <option value="none">${None}</option>
</select> </select>
@ -77,7 +77,7 @@
<option value="resume">${HeaderContinueWatching}</option> <option value="resume">${HeaderContinueWatching}</option>
<option value="resumeaudio">${HeaderContinueListening}</option> <option value="resumeaudio">${HeaderContinueListening}</option>
<option value="latestmedia">${HeaderLatestMedia}</option> <option value="latestmedia">${HeaderLatestMedia}</option>
<option value="nextup">${HeaderNextUp}</option> <option value="nextup">${NextUp}</option>
<option value="livetv">${LiveTV}</option> <option value="livetv">${LiveTV}</option>
<option value="none">${None}</option> <option value="none">${None}</option>
</select> </select>
@ -90,7 +90,7 @@
<option value="resume">${HeaderContinueWatching}</option> <option value="resume">${HeaderContinueWatching}</option>
<option value="resumeaudio">${HeaderContinueListening}</option> <option value="resumeaudio">${HeaderContinueListening}</option>
<option value="latestmedia">${HeaderLatestMedia}</option> <option value="latestmedia">${HeaderLatestMedia}</option>
<option value="nextup">${HeaderNextUp}</option> <option value="nextup">${NextUp}</option>
<option value="livetv">${LiveTV}</option> <option value="livetv">${LiveTV}</option>
<option value="none">${None}</option> <option value="none">${None}</option>
</select> </select>
@ -103,7 +103,7 @@
<option value="resume">${HeaderContinueWatching}</option> <option value="resume">${HeaderContinueWatching}</option>
<option value="resumeaudio">${HeaderContinueListening}</option> <option value="resumeaudio">${HeaderContinueListening}</option>
<option value="latestmedia">${HeaderLatestMedia}</option> <option value="latestmedia">${HeaderLatestMedia}</option>
<option value="nextup">${HeaderNextUp}</option> <option value="nextup">${NextUp}</option>
<option value="livetv">${LiveTV}</option> <option value="livetv">${LiveTV}</option>
<option value="none">${None}</option> <option value="none">${None}</option>
</select> </select>

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

@ -696,12 +696,12 @@ import 'css!./homesections';
serverId: apiClient.serverId() serverId: apiClient.serverId()
}) + '" class="button-flat button-flat-mini sectionTitleTextButton">'; }) + '" class="button-flat button-flat-mini sectionTitleTextButton">';
html += '<h2 class="sectionTitle sectionTitle-cards">'; html += '<h2 class="sectionTitle sectionTitle-cards">';
html += globalize.translate('HeaderNextUp'); html += globalize.translate('NextUp');
html += '</h2>'; html += '</h2>';
html += '<span class="material-icons chevron_right"></span>'; html += '<span class="material-icons chevron_right"></span>';
html += '</a>'; html += '</a>';
} else { } else {
html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderNextUp') + '</h2>'; html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('NextUp') + '</h2>';
} }
html += '</div>'; html += '</div>';

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

@ -8,7 +8,6 @@ import browser from 'browser';
import layoutManager from 'layoutManager'; import layoutManager from 'layoutManager';
import scrollHelper from 'scrollHelper'; import scrollHelper from 'scrollHelper';
import globalize from 'globalize'; import globalize from 'globalize';
import require from 'require';
import 'emby-checkbox'; import 'emby-checkbox';
import 'paper-icon-button-light'; import 'paper-icon-button-light';
import 'emby-button'; import 'emby-button';
@ -317,7 +316,7 @@ import 'cardStyle';
function showEditor(itemId, serverId, itemType) { function showEditor(itemId, serverId, itemType) {
loading.show(); loading.show();
require(['text!./imageDownloader.template.html'], function (template) { import('text!./imageDownloader.template.html').then(({default: template}) => {
const apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
currentItemId = itemId; currentItemId = itemId;

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

@ -16,7 +16,7 @@ import 'emby-input';
return { return {
Type: type, Type: type,
MinWidth: 0, MinWidth: 0,
Limit: 'Primary' === type ? 1 : 0 Limit: type === 'Primary' ? 1 : 0
}; };
} }

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

@ -59,8 +59,8 @@ import 'css!./imageeditor';
currentItem = item; currentItem = item;
apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) { apiClient.getRemoteImageProviders(getBaseRemoteOptions()).then(function (providers) {
const btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages'); var btnBrowseAllImages = page.querySelectorAll('.btnBrowseAllImages');
for (let i = 0, length = btnBrowseAllImages.length; i < length; i++) { for (var i = 0, length = btnBrowseAllImages.length; i < length; i++) {
if (providers.length) { if (providers.length) {
btnBrowseAllImages[i].classList.remove('hide'); btnBrowseAllImages[i].classList.remove('hide');
} else { } else {
@ -217,7 +217,7 @@ import 'css!./imageeditor';
reload(context, null, focusContext); reload(context, null, focusContext);
}, function () { }, function () {
import('alert').then(({default: alert}) => { import('alert').then(({default: alert}) => {
alert(globalize.translate('DefaultErrorMessage')); alert(globalize.translate('ErrorDefault'));
}); });
}); });
} }

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

@ -17,8 +17,8 @@ import 'css!./style';
// Although the default values recommended by Blurhash developers is 32x32, a size of 18x18 seems to be the sweet spot for us, // Although the default values recommended by Blurhash developers is 32x32, a size of 18x18 seems to be the sweet spot for us,
// improving the performance and reducing the memory usage, while retaining almost full blur quality. // improving the performance and reducing the memory usage, while retaining almost full blur quality.
// Lower values had more visible pixelation // Lower values had more visible pixelation
let width = 18; const width = 18;
let height = 18; const height = 18;
let pixels; let pixels;
try { try {
pixels = blurhash.decode(blurhashstr, width, height); pixels = blurhash.decode(blurhashstr, width, height);
@ -27,11 +27,11 @@ import 'css!./style';
target.classList.add('non-blurhashable'); target.classList.add('non-blurhashable');
return; return;
} }
let canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
let ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
let imgData = ctx.createImageData(width, height); const imgData = ctx.createImageData(width, height);
imgData.data.set(pixels); imgData.data.set(pixels);
ctx.putImageData(imgData, 0, 0); ctx.putImageData(imgData, 0, 0);
@ -55,7 +55,7 @@ import 'css!./style';
if (!entry) { if (!entry) {
throw new Error('entry cannot be null'); throw new Error('entry cannot be null');
} }
let target = entry.target; const target = entry.target;
var source = undefined; var source = undefined;
if (target) { if (target) {
@ -78,7 +78,7 @@ import 'css!./style';
throw new TypeError('url cannot be undefined'); throw new TypeError('url cannot be undefined');
} }
let preloaderImg = new Image(); const preloaderImg = new Image();
preloaderImg.src = url; preloaderImg.src = url;
elem.classList.add('lazy-hidden'); elem.classList.add('lazy-hidden');
@ -205,7 +205,7 @@ import 'css!./style';
/* eslint-enable indent */ /* eslint-enable indent */
export default { export default {
serLazyImage: setLazyImage, setLazyImage: setLazyImage,
fillImages: fillImages, fillImages: fillImages,
fillImage: fillImage, fillImage: fillImage,
lazyImage: lazyImage, lazyImage: lazyImage,

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

@ -82,7 +82,7 @@ export function enablePlayedIndicator(item) {
export function getPlayedIndicatorHtml(item) { export function getPlayedIndicatorHtml(item) {
if (enablePlayedIndicator(item)) { if (enablePlayedIndicator(item)) {
let userData = item.UserData || {}; const userData = item.UserData || {};
if (userData.UnplayedItemCount) { if (userData.UnplayedItemCount) {
return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>'; return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>';
} }

5
src/components/itemContextMenu.js
View file

@ -8,7 +8,6 @@ import browser from 'browser';
import actionsheet from 'actionsheet'; import actionsheet from 'actionsheet';
/* eslint-disable indent */ /* eslint-disable indent */
export function getCommands(options) { export function getCommands(options) {
const item = options.item; const item = options.item;
const user = options.user; const user = options.user;
@ -16,7 +15,7 @@ import actionsheet from 'actionsheet';
const canPlay = playbackManager.canPlay(item); const canPlay = playbackManager.canPlay(item);
const restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator; const restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
let commands = []; const commands = [];
if (canPlay && item.MediaType !== 'Photo') { if (canPlay && item.MediaType !== 'Photo') {
if (options.play !== false) { if (options.play !== false) {
@ -367,7 +366,7 @@ import actionsheet from 'actionsheet';
case 'copy-stream': { case 'copy-stream': {
const downloadHref = apiClient.getItemDownloadUrl(itemId); const downloadHref = apiClient.getItemDownloadUrl(itemId);
const textAreaCopy = function () { const textAreaCopy = function () {
let textArea = document.createElement('textarea'); const textArea = document.createElement('textarea');
textArea.value = downloadHref; textArea.value = downloadHref;
document.body.appendChild(textArea); document.body.appendChild(textArea);
textArea.focus(); textArea.focus();

116
src/components/itemHelper.js
View file

@ -1,7 +1,7 @@
define(['apphost', 'globalize'], function (appHost, globalize) { import appHost from 'apphost';
'use strict'; import globalize from 'globalize';
function getDisplayName(item, options = {}) { export function getDisplayName(item, options = {}) {
if (!item) { if (!item) {
throw new Error('null item passed into getDisplayName'); throw new Error('null item passed into getDisplayName');
} }
@ -10,7 +10,7 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
item = item.ProgramInfo || item; item = item.ProgramInfo || item;
} }
var name = ((item.Type === 'Program' || item.Type === 'Recording') && (item.IsSeries || item.EpisodeTitle) ? item.EpisodeTitle : item.Name) || ''; let name = ((item.Type === 'Program' || item.Type === 'Recording') && (item.IsSeries || item.EpisodeTitle) ? item.EpisodeTitle : item.Name) || '';
if (item.Type === 'TvChannel') { if (item.Type === 'TvChannel') {
if (item.ChannelNumber) { if (item.ChannelNumber) {
@ -21,10 +21,10 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
if (item.Type === 'Episode' && item.ParentIndexNumber === 0) { if (item.Type === 'Episode' && item.ParentIndexNumber === 0) {
name = globalize.translate('ValueSpecialEpisodeName', name); name = globalize.translate('ValueSpecialEpisodeName', name);
} else if ((item.Type === 'Episode' || item.Type === 'Program') && item.IndexNumber != null && item.ParentIndexNumber != null && options.includeIndexNumber !== false) { } else if ((item.Type === 'Episode' || item.Type === 'Program') && item.IndexNumber != null && item.ParentIndexNumber != null && options.includeIndexNumber !== false) {
var displayIndexNumber = item.IndexNumber; let displayIndexNumber = item.IndexNumber;
var number = displayIndexNumber; let number = displayIndexNumber;
var nameSeparator = ' - '; let nameSeparator = ' - ';
if (options.includeParentInfo !== false) { if (options.includeParentInfo !== false) {
number = 'S' + item.ParentIndexNumber + ':E' + number; number = 'S' + item.ParentIndexNumber + ':E' + number;
@ -43,10 +43,10 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
return name; return name;
} }
function supportsAddingToCollection(item) { export function supportsAddingToCollection(item) {
var invalidTypes = ['Genre', 'MusicGenre', 'Studio', 'UserView', 'CollectionFolder', 'Audio', 'Program', 'Timer', 'SeriesTimer']; const invalidTypes = ['Genre', 'MusicGenre', 'Studio', 'UserView', 'CollectionFolder', 'Audio', 'Program', 'Timer', 'SeriesTimer'];
if (item.Type === 'Recording') { if (item.Type === 'Recording') {
if (item.Status !== 'Completed') { if (item.Status !== 'Completed') {
@ -55,9 +55,9 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
return !item.CollectionType && invalidTypes.indexOf(item.Type) === -1 && item.MediaType !== 'Photo' && !isLocalItem(item); return !item.CollectionType && invalidTypes.indexOf(item.Type) === -1 && item.MediaType !== 'Photo' && !isLocalItem(item);
} }
function supportsAddingToPlaylist(item) { export function supportsAddingToPlaylist(item) {
if (item.Type === 'Program') { if (item.Type === 'Program') {
return false; return false;
} }
@ -88,10 +88,10 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
return item.MediaType || item.IsFolder || item.Type === 'Genre' || item.Type === 'MusicGenre' || item.Type === 'MusicArtist'; return item.MediaType || item.IsFolder || item.Type === 'Genre' || item.Type === 'MusicGenre' || item.Type === 'MusicArtist';
} }
function canEdit(user, item) { export function canEdit(user, item) {
var itemType = item.Type; const itemType = item.Type;
if (itemType === 'UserRootFolder' || itemType === 'UserView') { if (itemType === 'UserRootFolder' || itemType === 'UserView') {
return false; return false;
@ -120,24 +120,18 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
return user.Policy.IsAdministrator; return user.Policy.IsAdministrator;
} }
function isLocalItem(item) { export function isLocalItem(item) {
if (item && item.Id && item.Id.indexOf('local') === 0) { if (item && item.Id && item.Id.indexOf('local') === 0) {
return true; return true;
} }
return false; return false;
} }
return { export function canIdentify (user, item) {
getDisplayName: getDisplayName, const itemType = item.Type;
supportsAddingToCollection: supportsAddingToCollection,
supportsAddingToPlaylist: supportsAddingToPlaylist,
isLocalItem: isLocalItem,
canIdentify: function (user, item) {
var itemType = item.Type;
if (itemType === 'Movie' || if (itemType === 'Movie' ||
itemType === 'Trailer' || itemType === 'Trailer' ||
@ -156,12 +150,10 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
return false; return false;
}, }
canEdit: canEdit, export function canEditImages (user, item) {
const itemType = item.Type;
canEditImages: function (user, item) {
var itemType = item.Type;
if (item.MediaType === 'Photo') { if (item.MediaType === 'Photo') {
return false; return false;
@ -182,9 +174,9 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
return itemType !== 'Timer' && itemType !== 'SeriesTimer' && canEdit(user, item) && !isLocalItem(item); return itemType !== 'Timer' && itemType !== 'SeriesTimer' && canEdit(user, item) && !isLocalItem(item);
}, }
canSync: function (user, item) { export function canSync (user, item) {
if (user && !user.Policy.EnableContentDownloading) { if (user && !user.Policy.EnableContentDownloading) {
return false; return false;
} }
@ -194,9 +186,9 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
return item.SupportsSync; return item.SupportsSync;
}, }
canShare: function (item, user) { export function canShare (item, user) {
if (item.Type === 'Program') { if (item.Type === 'Program') {
return false; return false;
} }
@ -218,13 +210,13 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
return false; return false;
} }
return user.Policy.EnablePublicSharing && appHost.supports('sharing'); return user.Policy.EnablePublicSharing && appHost.supports('sharing');
}, }
enableDateAddedDisplay: function (item) { export function enableDateAddedDisplay (item) {
return !item.IsFolder && item.MediaType && item.Type !== 'Program' && item.Type !== 'TvChannel' && item.Type !== 'Trailer'; return !item.IsFolder && item.MediaType && item.Type !== 'Program' && item.Type !== 'TvChannel' && item.Type !== 'Trailer';
}, }
canMarkPlayed: function (item) { export function canMarkPlayed (item) {
if (item.Type === 'Program') { if (item.Type === 'Program') {
return false; return false;
} }
@ -251,9 +243,9 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
return false; return false;
}, }
canRate: function (item) { export function canRate (item) {
if (item.Type === 'Program' if (item.Type === 'Program'
|| item.Type === 'Timer' || item.Type === 'Timer'
|| item.Type === 'SeriesTimer' || item.Type === 'SeriesTimer'
@ -265,9 +257,9 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
return true; return true;
}, }
canConvert: function (item, user) { export function canConvert (item, user) {
if (!user.Policy.EnableMediaConversion) { if (!user.Policy.EnableMediaConversion) {
return false; return false;
} }
@ -276,17 +268,17 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
return false; return false;
} }
var mediaType = item.MediaType; const mediaType = item.MediaType;
if (mediaType === 'Book' || mediaType === 'Photo' || mediaType === 'Audio') { if (mediaType === 'Book' || mediaType === 'Photo' || mediaType === 'Audio') {
return false; return false;
} }
var collectionType = item.CollectionType; const collectionType = item.CollectionType;
if (collectionType === 'livetv') { if (collectionType === 'livetv') {
return false; return false;
} }
var type = item.Type; const type = item.Type;
if (type === 'Channel' || type === 'Person' || type === 'Year' || type === 'Program' || type === 'Timer' || type === 'SeriesTimer') { if (type === 'Channel' || type === 'Person' || type === 'Year' || type === 'Program' || type === 'Timer' || type === 'SeriesTimer') {
return false; return false;
} }
@ -300,11 +292,11 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
return true; return true;
}, }
canRefreshMetadata: function (item, user) { export function canRefreshMetadata (item, user) {
if (user.Policy.IsAdministrator) { if (user.Policy.IsAdministrator) {
var collectionType = item.CollectionType; const collectionType = item.CollectionType;
if (collectionType === 'livetv') { if (collectionType === 'livetv') {
return false; return false;
} }
@ -317,9 +309,9 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
return false; return false;
}, }
supportsMediaSourceSelection: function (item) { export function supportsMediaSourceSelection (item) {
if (item.MediaType !== 'Video') { if (item.MediaType !== 'Video') {
return false; return false;
} }
@ -337,6 +329,22 @@ define(['apphost', 'globalize'], function (appHost, globalize) {
} }
return true; return true;
} }
};
}); export default {
getDisplayName: getDisplayName,
supportsAddingToCollection: supportsAddingToCollection,
supportsAddingToPlaylist: supportsAddingToPlaylist,
isLocalItem: isLocalItem,
canIdentify: canIdentify,
canEdit: canEdit,
canEditImages: canEditImages,
canSync: canSync,
canShare: canShare,
enableDateAddedDisplay: enableDateAddedDisplay,
canMarkPlayed: canMarkPlayed,
canRate: canRate,
canConvert: canConvert,
canRefreshMetadata: canRefreshMetadata,
supportsMediaSourceSelection: supportsMediaSourceSelection
};

190
src/components/itemsrefresher.js
View file

@ -1,10 +1,11 @@
define(['playbackManager', 'serverNotifications', 'events'], function (playbackManager, serverNotifications, events) { import playbackManager from 'playbackManager';
'use strict'; import serverNotifications from 'serverNotifications';
import events from 'events';
function onUserDataChanged(e, apiClient, userData) { function onUserDataChanged(e, apiClient, userData) {
var instance = this; const instance = this;
var eventsToMonitor = getEventsToMonitor(instance); const eventsToMonitor = getEventsToMonitor(instance);
// TODO: Check user data change reason? // TODO: Check user data change reason?
if (eventsToMonitor.indexOf('markfavorite') !== -1) { if (eventsToMonitor.indexOf('markfavorite') !== -1) {
@ -12,72 +13,72 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} else if (eventsToMonitor.indexOf('markplayed') !== -1) { } else if (eventsToMonitor.indexOf('markplayed') !== -1) {
instance.notifyRefreshNeeded(); instance.notifyRefreshNeeded();
} }
} }
function getEventsToMonitor(instance) { function getEventsToMonitor(instance) {
var options = instance.options; const options = instance.options;
var monitor = options ? options.monitorEvents : null; const monitor = options ? options.monitorEvents : null;
if (monitor) { if (monitor) {
return monitor.split(','); return monitor.split(',');
} }
return []; return [];
} }
function onTimerCreated(e, apiClient, data) { function onTimerCreated(e, apiClient, data) {
var instance = this; const instance = this;
if (getEventsToMonitor(instance).indexOf('timers') !== -1) { if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
instance.notifyRefreshNeeded(); instance.notifyRefreshNeeded();
return; return;
} }
} }
function onSeriesTimerCreated(e, apiClient, data) { function onSeriesTimerCreated(e, apiClient, data) {
var instance = this; const instance = this;
if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) { if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
instance.notifyRefreshNeeded(); instance.notifyRefreshNeeded();
return; return;
} }
} }
function onTimerCancelled(e, apiClient, data) { function onTimerCancelled(e, apiClient, data) {
var instance = this; const instance = this;
if (getEventsToMonitor(instance).indexOf('timers') !== -1) { if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
instance.notifyRefreshNeeded(); instance.notifyRefreshNeeded();
return; return;
} }
} }
function onSeriesTimerCancelled(e, apiClient, data) { function onSeriesTimerCancelled(e, apiClient, data) {
var instance = this; const instance = this;
if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) { if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
instance.notifyRefreshNeeded(); instance.notifyRefreshNeeded();
return; return;
} }
} }
function onLibraryChanged(e, apiClient, data) { function onLibraryChanged(e, apiClient, data) {
var instance = this; const instance = this;
var eventsToMonitor = getEventsToMonitor(instance); const eventsToMonitor = getEventsToMonitor(instance);
if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) { if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
// yes this is an assumption // yes this is an assumption
return; return;
} }
var itemsAdded = data.ItemsAdded || []; const itemsAdded = data.ItemsAdded || [];
var itemsRemoved = data.ItemsRemoved || []; const itemsRemoved = data.ItemsRemoved || [];
if (!itemsAdded.length && !itemsRemoved.length) { if (!itemsAdded.length && !itemsRemoved.length) {
return; return;
} }
var options = instance.options || {}; const options = instance.options || {};
var parentId = options.parentId; const parentId = options.parentId;
if (parentId) { if (parentId) {
var foldersAddedTo = data.FoldersAddedTo || []; const foldersAddedTo = data.FoldersAddedTo || [];
var foldersRemovedFrom = data.FoldersRemovedFrom || []; const foldersRemovedFrom = data.FoldersRemovedFrom || [];
var collectionFolders = data.CollectionFolders || []; const collectionFolders = data.CollectionFolders || [];
if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) { if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) {
return; return;
@ -85,14 +86,14 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} }
instance.notifyRefreshNeeded(); instance.notifyRefreshNeeded();
} }
function onPlaybackStopped(e, stopInfo) { function onPlaybackStopped(e, stopInfo) {
var instance = this; const instance = this;
var state = stopInfo.state; const state = stopInfo.state;
var eventsToMonitor = getEventsToMonitor(instance); const eventsToMonitor = getEventsToMonitor(instance);
if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') { if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
if (eventsToMonitor.indexOf('videoplayback') !== -1) { if (eventsToMonitor.indexOf('videoplayback') !== -1) {
instance.notifyRefreshNeeded(true); instance.notifyRefreshNeeded(true);
@ -104,25 +105,26 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
return; return;
} }
} }
} }
function addNotificationEvent(instance, name, handler, owner) { function addNotificationEvent(instance, name, handler, owner) {
var localHandler = handler.bind(instance); const localHandler = handler.bind(instance);
owner = owner || serverNotifications; owner = owner || serverNotifications;
events.on(owner, name, localHandler); events.on(owner, name, localHandler);
instance['event_' + name] = localHandler; instance['event_' + name] = localHandler;
} }
function removeNotificationEvent(instance, name, owner) { function removeNotificationEvent(instance, name, owner) {
var handler = instance['event_' + name]; const handler = instance['event_' + name];
if (handler) { if (handler) {
owner = owner || serverNotifications; owner = owner || serverNotifications;
events.off(owner, name, handler); events.off(owner, name, handler);
instance['event_' + name] = null; instance['event_' + name] = null;
} }
} }
function ItemsRefresher(options) { class ItemsRefresher {
constructor(options) {
this.options = options || {}; this.options = options || {};
addNotificationEvent(this, 'UserDataChanged', onUserDataChanged); addNotificationEvent(this, 'UserDataChanged', onUserDataChanged);
@ -134,18 +136,18 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
addNotificationEvent(this, 'playbackstop', onPlaybackStopped, playbackManager); addNotificationEvent(this, 'playbackstop', onPlaybackStopped, playbackManager);
} }
ItemsRefresher.prototype.pause = function () { pause() {
clearRefreshInterval(this, true); clearRefreshInterval(this, true);
this.paused = true; this.paused = true;
}; }
ItemsRefresher.prototype.resume = function (options) { resume(options) {
this.paused = false; this.paused = false;
var refreshIntervalEndTime = this.refreshIntervalEndTime; const refreshIntervalEndTime = this.refreshIntervalEndTime;
if (refreshIntervalEndTime) { if (refreshIntervalEndTime) {
var remainingMs = refreshIntervalEndTime - new Date().getTime(); const remainingMs = refreshIntervalEndTime - new Date().getTime();
if (remainingMs > 0 && !this.needsRefresh) { if (remainingMs > 0 && !this.needsRefresh) {
resetRefreshInterval(this, remainingMs); resetRefreshInterval(this, remainingMs);
} else { } else {
@ -159,9 +161,9 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} }
return Promise.resolve(); return Promise.resolve();
}; }
ItemsRefresher.prototype.refreshItems = function () { refreshItems() {
if (!this.fetchData) { if (!this.fetchData) {
return Promise.resolve(); return Promise.resolve();
} }
@ -174,15 +176,15 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
this.needsRefresh = false; this.needsRefresh = false;
return this.fetchData().then(onDataFetched.bind(this)); return this.fetchData().then(onDataFetched.bind(this));
}; }
ItemsRefresher.prototype.notifyRefreshNeeded = function (isInForeground) { notifyRefreshNeeded(isInForeground) {
if (this.paused) { if (this.paused) {
this.needsRefresh = true; this.needsRefresh = true;
return; return;
} }
var timeout = this.refreshTimeout; const timeout = this.refreshTimeout;
if (timeout) { if (timeout) {
clearTimeout(timeout); clearTimeout(timeout);
} }
@ -192,44 +194,9 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
} else { } else {
this.refreshTimeout = setTimeout(this.refreshItems.bind(this), 10000); this.refreshTimeout = setTimeout(this.refreshItems.bind(this), 10000);
} }
};
function clearRefreshInterval(instance, isPausing) {
if (instance.refreshInterval) {
clearInterval(instance.refreshInterval);
instance.refreshInterval = null;
if (!isPausing) {
instance.refreshIntervalEndTime = null;
}
}
} }
function resetRefreshInterval(instance, intervalMs) { destroy() {
clearRefreshInterval(instance);
if (!intervalMs) {
var options = instance.options;
if (options) {
intervalMs = options.refreshIntervalMs;
}
}
if (intervalMs) {
instance.refreshInterval = setInterval(instance.notifyRefreshNeeded.bind(instance), intervalMs);
instance.refreshIntervalEndTime = new Date().getTime() + intervalMs;
}
}
function onDataFetched(result) {
resetRefreshInterval(this);
if (this.afterRefresh) {
this.afterRefresh(result);
}
}
ItemsRefresher.prototype.destroy = function () {
clearRefreshInterval(this); clearRefreshInterval(this);
removeNotificationEvent(this, 'UserDataChanged'); removeNotificationEvent(this, 'UserDataChanged');
@ -242,7 +209,42 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
this.fetchData = null; this.fetchData = null;
this.options = null; this.options = null;
}; }
}
return ItemsRefresher; function clearRefreshInterval(instance, isPausing) {
}); if (instance.refreshInterval) {
clearInterval(instance.refreshInterval);
instance.refreshInterval = null;
if (!isPausing) {
instance.refreshIntervalEndTime = null;
}
}
}
function resetRefreshInterval(instance, intervalMs) {
clearRefreshInterval(instance);
if (!intervalMs) {
const options = instance.options;
if (options) {
intervalMs = options.refreshIntervalMs;
}
}
if (intervalMs) {
instance.refreshInterval = setInterval(instance.notifyRefreshNeeded.bind(instance), intervalMs);
instance.refreshIntervalEndTime = new Date().getTime() + intervalMs;
}
}
function onDataFetched(result) {
resetRefreshInterval(this);
if (this.afterRefresh) {
this.afterRefresh(result);
}
}
export default ItemsRefresher;

36
src/components/layoutManager.js
View file

@ -1,7 +1,8 @@
define(['browser', 'appSettings', 'events'], function (browser, appSettings, events) { import browser from 'browser';
'use strict'; import appSettings from 'appSettings';
import events from 'events';
function setLayout(instance, layout, selectedLayout) { function setLayout(instance, layout, selectedLayout) {
if (layout === selectedLayout) { if (layout === selectedLayout) {
instance[layout] = true; instance[layout] = true;
document.documentElement.classList.add('layout-' + layout); document.documentElement.classList.add('layout-' + layout);
@ -9,13 +10,10 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
instance[layout] = false; instance[layout] = false;
document.documentElement.classList.remove('layout-' + layout); document.documentElement.classList.remove('layout-' + layout);
} }
} }
function LayoutManager() { class LayoutManager {
setLayout(layout, save) {
}
LayoutManager.prototype.setLayout = function (layout, save) {
if (!layout || layout === 'auto') { if (!layout || layout === 'auto') {
this.autoLayout(); this.autoLayout();
@ -33,13 +31,13 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
} }
events.trigger(this, 'modechange'); events.trigger(this, 'modechange');
}; }
LayoutManager.prototype.getSavedLayout = function (layout) { getSavedLayout(layout) {
return appSettings.get('layout'); return appSettings.get('layout');
}; }
LayoutManager.prototype.autoLayout = function () { autoLayout() {
// Take a guess at initial layout. The consuming app can override // Take a guess at initial layout. The consuming app can override
if (browser.mobile) { if (browser.mobile) {
this.setLayout('mobile', false); this.setLayout('mobile', false);
@ -48,16 +46,16 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
} else { } else {
this.setLayout(this.defaultLayout || 'tv', false); this.setLayout(this.defaultLayout || 'tv', false);
} }
}; }
LayoutManager.prototype.init = function () { init() {
var saved = this.getSavedLayout(); const saved = this.getSavedLayout();
if (saved) { if (saved) {
this.setLayout(saved, false); this.setLayout(saved, false);
} else { } else {
this.autoLayout(); this.autoLayout();
} }
}; }
}
return new LayoutManager(); export default new LayoutManager();
});

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

@ -75,9 +75,9 @@ import 'emby-input';
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('Up')}" 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('Down')}" class="btnSortableMoveDown btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_down"></span></button>`;
} }
html += '</div>'; html += '</div>';
} }
@ -131,9 +131,9 @@ import 'emby-input';
html += '</h3>'; html += '</h3>';
html += '</div>'; html += '</div>';
if (index > 0) { if (index > 0) {
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonUp') + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + index + '"><span class="material-icons keyboard_arrow_up"></span></button>'; html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('Up') + '" class="btnSortableMoveUp btnSortable" data-pluginindex="' + index + '"><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="' + index + '"><span class="material-icons keyboard_arrow_down"></span></button>'; html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('Down') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + index + '"><span class="material-icons keyboard_arrow_down"></span></button>';
} }
html += '</div>'; html += '</div>';
}); });
@ -197,9 +197,9 @@ import 'emby-input';
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('Up')}" 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('Down')}" class="btnSortableMoveDown btnSortable" data-pluginindex="${i}"><span class="material-icons keyboard_arrow_down"></span></button>`;
} }
html += '</div>'; html += '</div>';
} }
@ -219,7 +219,7 @@ import 'emby-input';
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>';
const supportedImageTypes = availableTypeOptions.SupportedImageTypes || []; const supportedImageTypes = availableTypeOptions.SupportedImageTypes || [];
if (supportedImageTypes.length > 1 || 1 === supportedImageTypes.length && 'Primary' !== supportedImageTypes[0]) { if (supportedImageTypes.length > 1 || supportedImageTypes.length === 1 && supportedImageTypes[0] !== 'Primary') {
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>';
@ -236,9 +236,9 @@ import 'emby-input';
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('Up') + '" 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('Down') + '" class="btnSortableMoveDown btnSortable" data-pluginindex="' + i + '"><span class="material-icons keyboard_arrow_down"></span></button>';
} }
html += '</div>'; html += '</div>';
} }
@ -291,13 +291,13 @@ import 'emby-input';
const btnSortable = elem.querySelector('.btnSortable'); const btnSortable = elem.querySelector('.btnSortable');
const 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('Up');
btnSortable.classList.add('btnSortableMoveUp'); btnSortable.classList.add('btnSortableMoveUp');
btnSortable.classList.remove('btnSortableMoveDown'); btnSortable.classList.remove('btnSortableMoveDown');
inner.classList.remove('keyboard_arrow_down'); inner.classList.remove('keyboard_arrow_down');
inner.classList.add('keyboard_arrow_up'); inner.classList.add('keyboard_arrow_up');
} else { } else {
btnSortable.title = globalize.translate('ButtonDown'); btnSortable.title = globalize.translate('Down');
btnSortable.classList.remove('btnSortableMoveUp'); btnSortable.classList.remove('btnSortableMoveUp');
btnSortable.classList.add('btnSortableMoveDown'); btnSortable.classList.add('btnSortableMoveDown');
inner.classList.remove('keyboard_arrow_up'); inner.classList.remove('keyboard_arrow_up');
@ -362,7 +362,7 @@ import 'emby-input';
TypeOptions: [] TypeOptions: []
}; };
currentAvailableOptions = null; currentAvailableOptions = null;
const isNewLibrary = null === libraryOptions; const isNewLibrary = libraryOptions === null;
isNewLibrary && parent.classList.add('newlibrary'); isNewLibrary && parent.classList.add('newlibrary');
const response = await fetch('components/libraryoptionseditor/libraryoptionseditor.template.html'); const response = await fetch('components/libraryoptionseditor/libraryoptionseditor.template.html');
const template = await response.text(); const template = await response.text();
@ -578,7 +578,7 @@ import 'emby-input';
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'), elem => { Array.prototype.forEach.call(parent.querySelectorAll('.chkMetadataSaver'), elem => {
elem.checked = options.MetadataSavers ? options.MetadataSavers.includes(elem.getAttribute('data-pluginname')) : 'true' === elem.getAttribute('data-defaultenabled'); elem.checked = options.MetadataSavers ? options.MetadataSavers.includes(elem.getAttribute('data-pluginname')) : elem.getAttribute('data-defaultenabled') === 'true';
}); });
Array.prototype.forEach.call(parent.querySelectorAll('.chkSubtitleLanguage'), elem => { Array.prototype.forEach.call(parent.querySelectorAll('.chkSubtitleLanguage'), elem => {
elem.checked = !!options.SubtitleDownloadLanguages && options.SubtitleDownloadLanguages.includes(elem.getAttribute('data-lang')); elem.checked = !!options.SubtitleDownloadLanguages && options.SubtitleDownloadLanguages.includes(elem.getAttribute('data-lang'));

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

@ -81,7 +81,7 @@ import 'emby-playstatebutton';
let itemId; let itemId;
const options = { const options = {
maxWidth: width * 2, maxWidth: width,
type: 'Primary' type: 'Primary'
}; };
@ -108,7 +108,7 @@ import 'emby-playstatebutton';
function getChannelImageUrl(item, width) { function getChannelImageUrl(item, width) {
const apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
const options = { const options = {
maxWidth: width * 2, maxWidth: width,
type: 'Primary' type: 'Primary'
}; };

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

@ -1,17 +1,15 @@
define(['css!./loading'], function () { import 'css!./loading';
'use strict';
var loadingElem; let loadingElem;
var layer1; let layer1;
var layer2; let layer2;
var layer3; let layer3;
var layer4; let layer4;
var circleLefts; let circleLefts;
var circleRights; let circleRights;
return { export function show() {
show: function () { let elem = loadingElem;
var elem = loadingElem;
if (!elem) { if (!elem) {
elem = document.createElement('div'); elem = document.createElement('div');
@ -40,19 +38,17 @@ define(['css!./loading'], function () {
layer3.classList.add('mdl-spinner__layer-3-active'); layer3.classList.add('mdl-spinner__layer-3-active');
layer4.classList.add('mdl-spinner__layer-4-active'); layer4.classList.add('mdl-spinner__layer-4-active');
var i; for (let i = 0, length = circleLefts.length; i < length; i++) {
var length;
for (i = 0, length = circleLefts.length; i < length; i++) {
circleLefts[i].classList.add('mdl-spinner__circleLeft-active'); circleLefts[i].classList.add('mdl-spinner__circleLeft-active');
} }
for (i = 0, length = circleRights.length; i < length; i++) { for (let i = 0, length = circleRights.length; i < length; i++) {
circleRights[i].classList.add('mdl-spinner__circleRight-active'); circleRights[i].classList.add('mdl-spinner__circleRight-active');
} }
}, }
hide: function () {
var elem = loadingElem; export function hide() {
const elem = loadingElem;
if (elem) { if (elem) {
elem.classList.remove('mdlSpinnerActive'); elem.classList.remove('mdlSpinnerActive');
@ -62,17 +58,17 @@ define(['css!./loading'], function () {
elem.classList.remove('mdl-spinner__layer-3-active'); elem.classList.remove('mdl-spinner__layer-3-active');
elem.classList.remove('mdl-spinner__layer-4-active'); elem.classList.remove('mdl-spinner__layer-4-active');
var i; for (let i = 0, length = circleLefts.length; i < length; i++) {
var length;
for (i = 0, length = circleLefts.length; i < length; i++) {
circleLefts[i].classList.remove('mdl-spinner__circleLeft-active'); circleLefts[i].classList.remove('mdl-spinner__circleLeft-active');
} }
for (i = 0, length = circleRights.length; i < length; i++) { for (let i = 0, length = circleRights.length; i < length; i++) {
circleRights[i].classList.remove('mdl-spinner__circleRight-active'); circleRights[i].classList.remove('mdl-spinner__circleRight-active');
} }
} }
} }
};
}); export default {
show: show,
hide: hide
};

4
src/components/mediaLibraryCreator/mediaLibraryCreator.template.html
View file

@ -24,8 +24,8 @@
<div class="folders"> <div class="folders">
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<h1 style="margin: .5em 0;">${HeadersFolders}</h1> <h1 style="margin: .5em 0;">${Folders}</h1>
<button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}"> <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${Add}">
<span class="material-icons add"></span> <span class="material-icons add"></span>
</button> </button>
</div> </div>

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

@ -76,7 +76,7 @@ import 'flexStyles';
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('Delete'),
primary: 'delete' primary: 'delete'
}).then(() => { }).then(() => {
const refreshAfterChange = currentOptions.refresh; const refreshAfterChange = currentOptions.refresh;
@ -85,7 +85,7 @@ import 'flexStyles';
refreshLibraryFromServer(dom.parentWithClass(button, 'dlg-libraryeditor')); refreshLibraryFromServer(dom.parentWithClass(button, 'dlg-libraryeditor'));
}, () => { }, () => {
import('toast').then(({default: toast}) => { import('toast').then(({default: toast}) => {
toast(globalize.translate('DefaultErrorMessage')); toast(globalize.translate('ErrorDefault'));
}); });
}); });
}); });
@ -98,8 +98,8 @@ import 'flexStyles';
if (listItem) { if (listItem) {
const index = parseInt(listItem.getAttribute('data-index')); const index = parseInt(listItem.getAttribute('data-index'));
const pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || []; const pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
const pathInfo = null == index ? {} : pathInfos[index] || {}; const pathInfo = index == null ? {} : pathInfos[index] || {};
const originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]); const originalPath = pathInfo.Path || (index == null ? null : currentOptions.library.Locations[index]);
const btnRemovePath = dom.parentWithClass(e.target, 'btnRemovePath'); const btnRemovePath = dom.parentWithClass(e.target, 'btnRemovePath');
if (btnRemovePath) { if (btnRemovePath) {
@ -171,7 +171,7 @@ import 'flexStyles';
const picker = new directoryBrowser(); const picker = new directoryBrowser();
picker.show({ picker.show({
enableNetworkSharePath: true, enableNetworkSharePath: true,
pathReadOnly: null != originalPath, pathReadOnly: originalPath != null,
path: originalPath, path: originalPath,
networkSharePath: networkPath, networkSharePath: networkPath,
callback: function (path, networkSharePath) { callback: function (path, networkSharePath) {

4
src/components/mediaLibraryEditor/mediaLibraryEditor.template.html
View file

@ -18,8 +18,8 @@
<div class="folders hide"> <div class="folders hide">
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<h1 style="margin: .5em 0;">${HeadersFolders}</h1> <h1 style="margin: .5em 0;">${Folders}</h1>
<button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${ButtonAdd}"> <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${Add}">
<span class="material-icons add"></span> <span class="material-icons add"></span>
</button> </button>
</div> </div>

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

@ -9,7 +9,6 @@ import 'programStyles';
import 'emby-button'; import 'emby-button';
/* eslint-disable indent */ /* eslint-disable indent */
function getTimerIndicator(item) { function getTimerIndicator(item) {
let status; let status;
@ -208,7 +207,7 @@ import 'emby-button';
}); });
} 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('New')}</div>`
}); });
} else if (item.IsSeries && item.IsRepeat) { } else if (item.IsSeries && item.IsRepeat) {
miscInfo.push({ miscInfo.push({

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

@ -6,7 +6,6 @@ import loading from 'loading';
import focusManager from 'focusManager'; import focusManager from 'focusManager';
import connectionManager from 'connectionManager'; import connectionManager from 'connectionManager';
import globalize from 'globalize'; import globalize from 'globalize';
import require from 'require';
import shell from 'shell'; import shell from 'shell';
import 'emby-checkbox'; import 'emby-checkbox';
import 'emby-input'; import 'emby-input';
@ -37,7 +36,7 @@ import 'flexStyles';
function submitUpdatedItem(form, item) { function submitUpdatedItem(form, item) {
function afterContentTypeUpdated() { function afterContentTypeUpdated() {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageItemSaved')); toast(globalize.translate('MessageItemSaved'));
}); });
@ -227,7 +226,7 @@ import 'flexStyles';
} }
function editPerson(context, person, index) { function editPerson(context, person, index) {
require(['personEditor'], function (personEditor) { import('personEditor').then(({default: personEditor}) => {
personEditor.show(person).then(function (updatedPerson) { personEditor.show(person).then(function (updatedPerson) {
const isNew = index === -1; const isNew = index === -1;
@ -246,14 +245,14 @@ import 'flexStyles';
if (parentId) { if (parentId) {
reload(context, parentId, item.ServerId); reload(context, parentId, item.ServerId);
} else { } else {
require(['appRouter'], function (appRouter) { import('appRouter').then(({default: appRouter}) => {
appRouter.goHome(); appRouter.goHome();
}); });
} }
} }
function showMoreMenu(context, button, user) { function showMoreMenu(context, button, user) {
require(['itemContextMenu'], function (itemContextMenu) { import('itemContextMenu').then(({default: itemContextMenu}) => {
var item = currentItem; var item = currentItem;
itemContextMenu.show({ itemContextMenu.show({
@ -907,7 +906,7 @@ import 'flexStyles';
} }
function populatePeople(context, people) { function populatePeople(context, people) {
let lastType = ''; const lastType = '';
let html = ''; let html = '';
const elem = context.querySelector('#peopleList'); const elem = context.querySelector('#peopleList');

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

@ -198,7 +198,7 @@ import 'css!./multiSelect';
if (user.Policy.EnableContentDownloading && appHost.supports('filedownload')) { if (user.Policy.EnableContentDownloading && appHost.supports('filedownload')) {
menuItems.push({ menuItems.push({
name: globalize.translate('ButtonDownload'), name: globalize.translate('Download'),
id: 'download', id: 'download',
icon: 'file_download' icon: 'file_download'
}); });

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

@ -1,7 +1,9 @@
define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'require'], function (serverNotifications, playbackManager, events, globalize, require) { import serverNotifications from 'serverNotifications';
'use strict'; import playbackManager from 'playbackManager';
import events from 'events';
import globalize from 'globalize';
function onOneDocumentClick() { function onOneDocumentClick() {
document.removeEventListener('click', onOneDocumentClick); document.removeEventListener('click', onOneDocumentClick);
document.removeEventListener('keydown', onOneDocumentClick); document.removeEventListener('keydown', onOneDocumentClick);
@ -10,14 +12,14 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
/* eslint-disable-next-line compat/compat */ /* eslint-disable-next-line compat/compat */
Notification.requestPermission(); Notification.requestPermission();
} }
} }
document.addEventListener('click', onOneDocumentClick); document.addEventListener('click', onOneDocumentClick);
document.addEventListener('keydown', onOneDocumentClick); document.addEventListener('keydown', onOneDocumentClick);
var serviceWorkerRegistration; let serviceWorkerRegistration;
function closeAfter(notification, timeoutMs) { function closeAfter(notification, timeoutMs) {
setTimeout(function () { setTimeout(function () {
if (notification.close) { if (notification.close) {
notification.close(); notification.close();
@ -25,27 +27,27 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
notification.cancel(); notification.cancel();
} }
}, timeoutMs); }, timeoutMs);
} }
function resetRegistration() { function resetRegistration() {
/* eslint-disable-next-line compat/compat */ /* eslint-disable-next-line compat/compat */
var serviceWorker = navigator.serviceWorker; let serviceWorker = navigator.serviceWorker;
if (serviceWorker) { if (serviceWorker) {
serviceWorker.ready.then(function (registration) { serviceWorker.ready.then(function (registration) {
serviceWorkerRegistration = registration; serviceWorkerRegistration = registration;
}); });
} }
} }
resetRegistration(); resetRegistration();
function showPersistentNotification(title, options, timeoutMs) { function showPersistentNotification(title, options, timeoutMs) {
serviceWorkerRegistration.showNotification(title, options); serviceWorkerRegistration.showNotification(title, options);
} }
function showNonPersistentNotification(title, options, timeoutMs) { function showNonPersistentNotification(title, options, timeoutMs) {
try { try {
var notif = new Notification(title, options); /* eslint-disable-line compat/compat */ let notif = new Notification(title, options); /* eslint-disable-line compat/compat */
if (notif.show) { if (notif.show) {
notif.show(); notif.show();
@ -62,10 +64,10 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
throw err; throw err;
} }
} }
} }
function showNotification(options, timeoutMs, apiClient) { function showNotification(options, timeoutMs, apiClient) {
var title = options.title; let title = options.title;
options.data = options.data || {}; options.data = options.data || {};
options.data.serverId = apiClient.serverInfo().Id; options.data.serverId = apiClient.serverInfo().Id;
@ -80,20 +82,20 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
} }
showNonPersistentNotification(title, options, timeoutMs); showNonPersistentNotification(title, options, timeoutMs);
} }
function showNewItemNotification(item, apiClient) { function showNewItemNotification(item, apiClient) {
if (playbackManager.isPlayingLocally(['Video'])) { if (playbackManager.isPlayingLocally(['Video'])) {
return; return;
} }
var body = item.Name; let body = item.Name;
if (item.SeriesName) { if (item.SeriesName) {
body = item.SeriesName + ' - ' + body; body = item.SeriesName + ' - ' + body;
} }
var notification = { let notification = {
title: 'New ' + item.Type, title: 'New ' + item.Type,
body: body, body: body,
vibrate: true, vibrate: true,
@ -101,7 +103,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
data: {} data: {}
}; };
var imageTags = item.ImageTags || {}; let imageTags = item.ImageTags || {};
if (imageTags.Primary) { if (imageTags.Primary) {
notification.icon = apiClient.getScaledImageUrl(item.Id, { notification.icon = apiClient.getScaledImageUrl(item.Id, {
@ -112,10 +114,10 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
} }
showNotification(notification, 15000, apiClient); showNotification(notification, 15000, apiClient);
} }
function onLibraryChanged(data, apiClient) { function onLibraryChanged(data, apiClient) {
var newItems = data.ItemsAdded; let newItems = data.ItemsAdded;
if (!newItems.length) { if (!newItems.length) {
return; return;
@ -138,26 +140,26 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
EnableTotalRecordCount: false EnableTotalRecordCount: false
}).then(function (result) { }).then(function (result) {
var items = result.Items; let items = result.Items;
for (var i = 0, length = items.length ; i < length; i++) { for (const item of items) {
showNewItemNotification(items[i], apiClient); showNewItemNotification(item, apiClient);
} }
}); });
} }
function getIconUrl(name) { function getIconUrl(name) {
name = name || 'notificationicon.png'; name = name || 'notificationicon.png';
return require.toUrl('.').split('?')[0] + '/' + name; return './components/notifications/' + name;
} }
function showPackageInstallNotification(apiClient, installation, status) { function showPackageInstallNotification(apiClient, installation, status) {
apiClient.getCurrentUser().then(function (user) { apiClient.getCurrentUser().then(function (user) {
if (!user.Policy.IsAdministrator) { if (!user.Policy.IsAdministrator) {
return; return;
} }
var notification = { let notification = {
tag: 'install' + installation.Id, tag: 'install' + installation.Id,
data: {} data: {}
}; };
@ -186,58 +188,58 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
} }
if (status === 'progress') { if (status === 'progress') {
var percentComplete = Math.round(installation.PercentComplete || 0); let percentComplete = Math.round(installation.PercentComplete || 0);
notification.body = percentComplete + '% complete.'; notification.body = percentComplete + '% complete.';
} }
var timeout = status === 'cancelled' ? 5000 : 0; let timeout = status === 'cancelled' ? 5000 : 0;
showNotification(notification, timeout, apiClient); showNotification(notification, timeout, apiClient);
}); });
} }
events.on(serverNotifications, 'LibraryChanged', function (e, apiClient, data) { events.on(serverNotifications, 'LibraryChanged', function (e, apiClient, data) {
onLibraryChanged(data, apiClient); onLibraryChanged(data, apiClient);
}); });
events.on(serverNotifications, 'PackageInstallationCompleted', function (e, apiClient, data) { events.on(serverNotifications, 'PackageInstallationCompleted', function (e, apiClient, data) {
showPackageInstallNotification(apiClient, data, 'completed'); showPackageInstallNotification(apiClient, data, 'completed');
}); });
events.on(serverNotifications, 'PackageInstallationFailed', function (e, apiClient, data) { events.on(serverNotifications, 'PackageInstallationFailed', function (e, apiClient, data) {
showPackageInstallNotification(apiClient, data, 'failed'); showPackageInstallNotification(apiClient, data, 'failed');
}); });
events.on(serverNotifications, 'PackageInstallationCancelled', function (e, apiClient, data) { events.on(serverNotifications, 'PackageInstallationCancelled', function (e, apiClient, data) {
showPackageInstallNotification(apiClient, data, 'cancelled'); showPackageInstallNotification(apiClient, data, 'cancelled');
}); });
events.on(serverNotifications, 'PackageInstalling', function (e, apiClient, data) { events.on(serverNotifications, 'PackageInstalling', function (e, apiClient, data) {
showPackageInstallNotification(apiClient, data, 'progress'); showPackageInstallNotification(apiClient, data, 'progress');
}); });
events.on(serverNotifications, 'ServerShuttingDown', function (e, apiClient, data) { events.on(serverNotifications, 'ServerShuttingDown', function (e, apiClient, data) {
var serverId = apiClient.serverInfo().Id; let serverId = apiClient.serverInfo().Id;
var notification = { let notification = {
tag: 'restart' + serverId, tag: 'restart' + serverId,
title: globalize.translate('ServerNameIsShuttingDown', apiClient.serverInfo().Name) title: globalize.translate('ServerNameIsShuttingDown', apiClient.serverInfo().Name)
}; };
showNotification(notification, 0, apiClient); showNotification(notification, 0, apiClient);
}); });
events.on(serverNotifications, 'ServerRestarting', function (e, apiClient, data) { events.on(serverNotifications, 'ServerRestarting', function (e, apiClient, data) {
var serverId = apiClient.serverInfo().Id; let serverId = apiClient.serverInfo().Id;
var notification = { let notification = {
tag: 'restart' + serverId, tag: 'restart' + serverId,
title: globalize.translate('ServerNameIsRestarting', apiClient.serverInfo().Name) title: globalize.translate('ServerNameIsRestarting', apiClient.serverInfo().Name)
}; };
showNotification(notification, 0, apiClient); showNotification(notification, 0, apiClient);
}); });
events.on(serverNotifications, 'RestartRequired', function (e, apiClient) { events.on(serverNotifications, 'RestartRequired', function (e, apiClient) {
var serverId = apiClient.serverInfo().Id; let serverId = apiClient.serverInfo().Id;
var notification = { let notification = {
tag: 'restart' + serverId, tag: 'restart' + serverId,
title: globalize.translate('PleaseRestartServerName', apiClient.serverInfo().Name) title: globalize.translate('PleaseRestartServerName', apiClient.serverInfo().Name)
}; };
@ -252,5 +254,5 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
]; ];
showNotification(notification, 0, apiClient); showNotification(notification, 0, apiClient);
});
}); });

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

@ -500,20 +500,20 @@ import 'emby-ratingbutton';
const textLines = nowPlayingItem ? nowPlayingHelper.getNowPlayingNames(nowPlayingItem) : []; const textLines = nowPlayingItem ? nowPlayingHelper.getNowPlayingNames(nowPlayingItem) : [];
nowPlayingTextElement.innerHTML = ''; nowPlayingTextElement.innerHTML = '';
if (textLines) { if (textLines) {
let itemText = document.createElement('div'); const itemText = document.createElement('div');
let secondaryText = document.createElement('div'); const secondaryText = document.createElement('div');
secondaryText.classList.add('nowPlayingBarSecondaryText'); secondaryText.classList.add('nowPlayingBarSecondaryText');
if (textLines.length > 1) { if (textLines.length > 1) {
textLines[1].secondary = true; textLines[1].secondary = true;
if (textLines[1].text) { if (textLines[1].text) {
let text = document.createElement('a'); const text = document.createElement('a');
text.innerHTML = textLines[1].text; text.innerHTML = textLines[1].text;
secondaryText.appendChild(text); secondaryText.appendChild(text);
} }
} }
if (textLines[0].text) { if (textLines[0].text) {
let text = document.createElement('a'); const text = document.createElement('a');
text.innerHTML = textLines[0].text; text.innerHTML = textLines[0].text;
itemText.appendChild(text); itemText.appendChild(text);
} }
@ -555,10 +555,10 @@ import 'emby-ratingbutton';
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
let contextButtonClone = contextButton.cloneNode(true); const contextButtonClone = contextButton.cloneNode(true);
contextButton.parentNode.replaceChild(contextButtonClone, contextButton); contextButton.parentNode.replaceChild(contextButtonClone, contextButton);
contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu'); contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu');
let options = { const options = {
play: false, play: false,
queue: false, queue: false,
clearQueue: true, clearQueue: true,
@ -600,10 +600,10 @@ import 'emby-ratingbutton';
return; return;
} }
let shuffleMode = playbackManager.getQueueShuffleMode(); const shuffleMode = playbackManager.getQueueShuffleMode();
let context = nowPlayingBarElement; const context = nowPlayingBarElement;
const cssClass = 'buttonActive'; const cssClass = 'buttonActive';
let toggleShuffleButton = context.querySelector('.btnShuffleQueue'); const toggleShuffleButton = context.querySelector('.btnShuffleQueue');
switch (shuffleMode) { switch (shuffleMode) {
case 'Shuffle': case 'Shuffle':
toggleShuffleButton.classList.add(cssClass); toggleShuffleButton.classList.add(cssClass);

172
src/components/packageManager.js
View file

@ -1,28 +1,97 @@
define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) { import appSettings from 'appSettings';
'use strict'; import pluginManager from 'pluginManager';
/* eslint-disable indent */
var settingsKey = 'installedpackages1'; class PackageManager {
#packagesList = [];
#settingsKey = 'installedpackages1';
function addPackage(packageManager, pkg) { init() {
packageManager.packagesList = packageManager.packagesList.filter(function (p) { console.groupCollapsed('loading packages');
var manifestUrls = JSON.parse(appSettings.get(this.#settingsKey) || '[]');
return Promise.all(manifestUrls.map((url) => {
return this.loadPackage(url);
}))
.then(() => {
console.debug('finished loading packages');
return Promise.resolve();
})
.catch(() => {
return Promise.resolve();
}).finally(() => {
console.groupEnd('loading packages');
});
}
get packages() {
return this.#packagesList.slice(0);
}
install(url) {
return this.loadPackage(url, true).then((pkg) => {
var manifestUrls = JSON.parse(appSettings.get(this.#settingsKey) || '[]');
if (!manifestUrls.includes(url)) {
manifestUrls.push(url);
appSettings.set(this.#settingsKey, JSON.stringify(manifestUrls));
}
return pkg;
});
}
uninstall(name) {
var pkg = this.#packagesList.filter((p) => {
return p.name === name;
})[0];
if (pkg) {
this.#packagesList = this.#packagesList.filter((p) => {
return p.name !== name;
});
this.removeUrl(pkg.url);
}
return Promise.resolve();
}
mapPath(pkg, pluginUrl) {
var urlLower = pluginUrl.toLowerCase();
if (urlLower.startsWith('http:') || urlLower.startsWith('https:') || urlLower.startsWith('file:')) {
return pluginUrl;
}
var packageUrl = pkg.url;
packageUrl = packageUrl.substring(0, packageUrl.lastIndexOf('/'));
packageUrl += '/';
packageUrl += pluginUrl;
return packageUrl;
}
addPackage(pkg) {
this.#packagesList = this.#packagesList.filter((p) => {
return p.name !== pkg.name; return p.name !== pkg.name;
}); });
packageManager.packagesList.push(pkg); this.#packagesList.push(pkg);
} }
function removeUrl(url) { removeUrl(url) {
var manifestUrls = JSON.parse(appSettings.get(settingsKey) || '[]'); var manifestUrls = JSON.parse(appSettings.get(this.#settingsKey) || '[]');
manifestUrls = manifestUrls.filter(function (i) { manifestUrls = manifestUrls.filter((i) => {
return i !== url; return i !== url;
}); });
appSettings.set(settingsKey, JSON.stringify(manifestUrls)); appSettings.set(this.#settingsKey, JSON.stringify(manifestUrls));
} }
function loadPackage(packageManager, url, throwError) { loadPackage(url, throwError = false) {
return new Promise(function (resolve, reject) { return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
var originalUrl = url; var originalUrl = url;
url += url.indexOf('?') === -1 ? '?' : '&'; url += url.indexOf('?') === -1 ? '?' : '&';
@ -30,28 +99,28 @@ define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) {
xhr.open('GET', url, true); xhr.open('GET', url, true);
var onError = function () { var onError = () => {
if (throwError === true) { if (throwError === true) {
reject(); reject();
} else { } else {
removeUrl(originalUrl); this.removeUrl(originalUrl);
resolve(); resolve();
} }
}; };
xhr.onload = function (e) { xhr.onload = () => {
if (this.status < 400) { if (this.status < 400) {
var pkg = JSON.parse(this.response); var pkg = JSON.parse(this.response);
pkg.url = originalUrl; pkg.url = originalUrl;
addPackage(packageManager, pkg); this.addPackage(pkg);
var plugins = pkg.plugins || []; var plugins = pkg.plugins || [];
if (pkg.plugin) { if (pkg.plugin) {
plugins.push(pkg.plugin); plugins.push(pkg.plugin);
} }
var promises = plugins.map(function (pluginUrl) { var promises = plugins.map((pluginUrl) => {
return pluginManager.loadPlugin(packageManager.mapPath(pkg, pluginUrl)); return pluginManager.loadPlugin(this.mapPath(pkg, pluginUrl));
}); });
Promise.all(promises).then(resolve, resolve); Promise.all(promises).then(resolve, resolve);
} else { } else {
@ -64,71 +133,8 @@ define(['appSettings', 'pluginManager'], function (appSettings, pluginManager) {
xhr.send(); xhr.send();
}); });
} }
function PackageManager() {
this.packagesList = [];
} }
PackageManager.prototype.init = function () { /* eslint-enable indent */
var manifestUrls = JSON.parse(appSettings.get(settingsKey) || '[]');
var instance = this; export default new PackageManager();
return Promise.all(manifestUrls.map(function (u) {
return loadPackage(instance, u);
})).then(function () {
return Promise.resolve();
}, function () {
return Promise.resolve();
});
};
PackageManager.prototype.packages = function () {
return this.packagesList.slice(0);
};
PackageManager.prototype.install = function (url) {
return loadPackage(this, url, true).then(function (pkg) {
var manifestUrls = JSON.parse(appSettings.get(settingsKey) || '[]');
if (manifestUrls.indexOf(url) === -1) {
manifestUrls.push(url);
appSettings.set(settingsKey, JSON.stringify(manifestUrls));
}
return pkg;
});
};
PackageManager.prototype.uninstall = function (name) {
var pkg = this.packagesList.filter(function (p) {
return p.name === name;
})[0];
if (pkg) {
this.packagesList = this.packagesList.filter(function (p) {
return p.name !== name;
});
removeUrl(pkg.url);
}
return Promise.resolve();
};
PackageManager.prototype.mapPath = function (pkg, pluginUrl) {
var urlLower = pluginUrl.toLowerCase();
if (urlLower.indexOf('http:') === 0 || urlLower.indexOf('https:') === 0 || urlLower.indexOf('file:') === 0) {
return pluginUrl;
}
var packageUrl = pkg.url;
packageUrl = packageUrl.substring(0, packageUrl.lastIndexOf('/'));
packageUrl += '/';
packageUrl += pluginUrl;
return packageUrl;
};
return new PackageManager();
});

8
src/components/playback/mediasession.js
View file

@ -127,7 +127,7 @@ import connectionManager from 'connectionManager';
artwork: getImageUrls(item) artwork: getImageUrls(item)
}); });
} else { } else {
let itemImageUrl = seriesImageUrl(item, { maxHeight: 3000 }) || imageUrl(item, { maxHeight: 3000 }); const itemImageUrl = seriesImageUrl(item, { maxHeight: 3000 }) || imageUrl(item, { maxHeight: 3000 });
window.NativeShell.updateMediaSession({ window.NativeShell.updateMediaSession({
action: eventName, action: eventName,
@ -244,10 +244,10 @@ import connectionManager from 'connectionManager';
/* eslint-disable-next-line compat/compat */ /* eslint-disable-next-line compat/compat */
navigator.mediaSession.setActionHandler('seekto', function (object) { navigator.mediaSession.setActionHandler('seekto', function (object) {
let item = playbackManager.getPlayerState(currentPlayer).NowPlayingItem; const item = playbackManager.getPlayerState(currentPlayer).NowPlayingItem;
// Convert to ms // Convert to ms
let duration = parseInt(item.RunTimeTicks ? (item.RunTimeTicks / 10000) : 0); const duration = parseInt(item.RunTimeTicks ? (item.RunTimeTicks / 10000) : 0);
let wantedTime = object.seekTime * 1000; const wantedTime = object.seekTime * 1000;
playbackManager.seekPercent(wantedTime / duration * 100, currentPlayer); playbackManager.seekPercent(wantedTime / duration * 100, currentPlayer);
}); });
} }

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

File diff suppressed because it is too large Load diff

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

@ -149,6 +149,28 @@ function showAspectRatioMenu(player, btn) {
}); });
} }
function showPlaybackRateMenu(player, btn) {
// each has a name and id
const currentId = playbackManager.getPlaybackRate(player);
const menuItems = playbackManager.getSupportedPlaybackRates(player).map(i => ({
id: i.id,
name: i.name,
selected: i.id === currentId
}));
return actionsheet.show({
items: menuItems,
positionTo: btn
}).then(function (id) {
if (id) {
playbackManager.setPlaybackRate(id, player);
return Promise.resolve();
}
return Promise.reject();
});
}
function showWithUser(options, player, user) { function showWithUser(options, player, user) {
var supportedCommands = playbackManager.getSupportedCommands(player); var supportedCommands = playbackManager.getSupportedCommands(player);
@ -166,6 +188,17 @@ function showWithUser(options, player, user) {
}); });
} }
if (supportedCommands.indexOf('PlaybackRate') !== -1) {
const currentPlaybackRateId = playbackManager.getPlaybackRate(player);
const currentPlaybackRate = playbackManager.getSupportedPlaybackRates(player).filter(i => i.id === currentPlaybackRateId)[0];
menuItems.push({
name: globalize.translate('PlaybackRate'),
id: 'playbackrate',
asideText: currentPlaybackRate ? currentPlaybackRate.name : null
});
}
if (user && user.Policy.EnableVideoPlaybackTranscoding) { if (user && user.Policy.EnableVideoPlaybackTranscoding) {
var secondaryQualityText = getQualitySecondaryText(player); var secondaryQualityText = getQualitySecondaryText(player);
@ -230,6 +263,8 @@ function handleSelectedOption(id, options, player) {
return showQualityMenu(player, options.positionTo); return showQualityMenu(player, options.positionTo);
case 'aspectratio': case 'aspectratio':
return showAspectRatioMenu(player, options.positionTo); return showAspectRatioMenu(player, options.positionTo);
case 'playbackrate':
return showPlaybackRateMenu(player, options.positionTo);
case 'repeatmode': case 'repeatmode':
return showRepeatModeMenu(player, options.positionTo); return showRepeatModeMenu(player, options.positionTo);
case 'stats': case 'stats':

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

@ -1,56 +1,56 @@
define([], function () { /*eslint prefer-const: "error"*/
'use strict';
var currentId = 0; let currentId = 0;
function addUniquePlaylistItemId(item) { function addUniquePlaylistItemId(item) {
if (!item.PlaylistItemId) { if (!item.PlaylistItemId) {
item.PlaylistItemId = 'playlistItem' + currentId; item.PlaylistItemId = 'playlistItem' + currentId;
currentId++; currentId++;
} }
} }
function findPlaylistIndex(playlistItemId, list) { function findPlaylistIndex(playlistItemId, list) {
for (var i = 0, length = list.length; i < length; i++) { for (let i = 0, length = list.length; i < length; i++) {
if (list[i].PlaylistItemId === playlistItemId) { if (list[i].PlaylistItemId === playlistItemId) {
return i; return i;
} }
} }
return -1; return -1;
} }
function PlayQueueManager() { class PlayQueueManager {
constructor() {
this._sortedPlaylist = []; this._sortedPlaylist = [];
this._playlist = []; this._playlist = [];
this._repeatMode = 'RepeatNone'; this._repeatMode = 'RepeatNone';
this._shuffleMode = 'Sorted'; this._shuffleMode = 'Sorted';
} }
PlayQueueManager.prototype.getPlaylist = function () { getPlaylist() {
return this._playlist.slice(0); return this._playlist.slice(0);
}; }
PlayQueueManager.prototype.setPlaylist = function (items) { setPlaylist(items) {
items = items.slice(0); items = items.slice(0);
for (var i = 0, length = items.length; i < length; i++) { for (let i = 0, length = items.length; i < length; i++) {
addUniquePlaylistItemId(items[i]); addUniquePlaylistItemId(items[i]);
} }
this._currentPlaylistItemId = null; this._currentPlaylistItemId = null;
this._playlist = items; this._playlist = items;
this._repeatMode = 'RepeatNone'; this._repeatMode = 'RepeatNone';
}; }
PlayQueueManager.prototype.queue = function (items) { queue(items) {
for (var i = 0, length = items.length; i < length; i++) { for (let i = 0, length = items.length; i < length; i++) {
addUniquePlaylistItemId(items[i]); addUniquePlaylistItemId(items[i]);
this._playlist.push(items[i]); this._playlist.push(items[i]);
} }
}; }
PlayQueueManager.prototype.shufflePlaylist = function () { shufflePlaylist() {
this._sortedPlaylist = []; this._sortedPlaylist = [];
for (const item of this._playlist) { for (const item of this._playlist) {
this._sortedPlaylist.push(item); this._sortedPlaylist.push(item);
@ -65,42 +65,31 @@ define([], function () {
} }
this._playlist.unshift(currentPlaylistItem); this._playlist.unshift(currentPlaylistItem);
this._shuffleMode = 'Shuffle'; this._shuffleMode = 'Shuffle';
}; }
PlayQueueManager.prototype.sortShuffledPlaylist = function () { sortShuffledPlaylist() {
this._playlist = []; this._playlist = [];
for (let item of this._sortedPlaylist) { for (const item of this._sortedPlaylist) {
this._playlist.push(item); this._playlist.push(item);
} }
this._sortedPlaylist = []; this._sortedPlaylist = [];
this._shuffleMode = 'Sorted'; this._shuffleMode = 'Sorted';
}; }
PlayQueueManager.prototype.clearPlaylist = function (clearCurrentItem = false) { clearPlaylist(clearCurrentItem = false) {
const currentPlaylistItem = this._playlist.splice(this.getCurrentPlaylistIndex(), 1)[0]; const currentPlaylistItem = this._playlist.splice(this.getCurrentPlaylistIndex(), 1)[0];
this._playlist = []; this._playlist = [];
if (!clearCurrentItem) { if (!clearCurrentItem) {
this._playlist.push(currentPlaylistItem); this._playlist.push(currentPlaylistItem);
} }
};
function arrayInsertAt(destArray, pos, arrayToInsert) {
var args = [];
args.push(pos); // where to insert
args.push(0); // nothing to remove
args = args.concat(arrayToInsert); // add on array to insert
destArray.splice.apply(destArray, args); // splice it in
} }
PlayQueueManager.prototype.queueNext = function (items) { queueNext(items) {
var i; for (let i = 0, length = items.length; i < length; i++) {
var length;
for (i = 0, length = items.length; i < length; i++) {
addUniquePlaylistItemId(items[i]); addUniquePlaylistItemId(items[i]);
} }
var currentIndex = this.getCurrentPlaylistIndex(); let currentIndex = this.getCurrentPlaylistIndex();
if (currentIndex === -1) { if (currentIndex === -1) {
currentIndex = this._playlist.length; currentIndex = this._playlist.length;
@ -109,43 +98,43 @@ define([], function () {
} }
arrayInsertAt(this._playlist, currentIndex, items); arrayInsertAt(this._playlist, currentIndex, items);
}; }
PlayQueueManager.prototype.getCurrentPlaylistIndex = function () { getCurrentPlaylistIndex() {
return findPlaylistIndex(this.getCurrentPlaylistItemId(), this._playlist); return findPlaylistIndex(this.getCurrentPlaylistItemId(), this._playlist);
}; }
PlayQueueManager.prototype.getCurrentItem = function () { getCurrentItem() {
var index = findPlaylistIndex(this.getCurrentPlaylistItemId(), this._playlist); const index = findPlaylistIndex(this.getCurrentPlaylistItemId(), this._playlist);
return index === -1 ? null : this._playlist[index]; return index === -1 ? null : this._playlist[index];
}; }
PlayQueueManager.prototype.getCurrentPlaylistItemId = function () { getCurrentPlaylistItemId() {
return this._currentPlaylistItemId; return this._currentPlaylistItemId;
}; }
PlayQueueManager.prototype.setPlaylistState = function (playlistItemId, playlistIndex) { setPlaylistState(playlistItemId, playlistIndex) {
this._currentPlaylistItemId = playlistItemId; this._currentPlaylistItemId = playlistItemId;
}; }
PlayQueueManager.prototype.setPlaylistIndex = function (playlistIndex) { setPlaylistIndex(playlistIndex) {
if (playlistIndex < 0) { if (playlistIndex < 0) {
this.setPlaylistState(null); this.setPlaylistState(null);
} else { } else {
this.setPlaylistState(this._playlist[playlistIndex].PlaylistItemId); this.setPlaylistState(this._playlist[playlistIndex].PlaylistItemId);
} }
}; }
PlayQueueManager.prototype.removeFromPlaylist = function (playlistItemIds) { removeFromPlaylist(playlistItemIds) {
if (this._playlist.length <= playlistItemIds.length) { if (this._playlist.length <= playlistItemIds.length) {
return { return {
result: 'empty' result: 'empty'
}; };
} }
var currentPlaylistItemId = this.getCurrentPlaylistItemId(); const currentPlaylistItemId = this.getCurrentPlaylistItemId();
var isCurrentIndex = playlistItemIds.indexOf(currentPlaylistItemId) !== -1; const isCurrentIndex = playlistItemIds.indexOf(currentPlaylistItemId) !== -1;
this._sortedPlaylist = this._sortedPlaylist.filter(function (item) { this._sortedPlaylist = this._sortedPlaylist.filter(function (item) {
return !playlistItemIds.includes(item.PlaylistItemId); return !playlistItemIds.includes(item.PlaylistItemId);
@ -159,17 +148,13 @@ define([], function () {
result: 'removed', result: 'removed',
isCurrentIndex: isCurrentIndex isCurrentIndex: isCurrentIndex
}; };
};
function moveInArray(array, from, to) {
array.splice(to, 0, array.splice(from, 1)[0]);
} }
PlayQueueManager.prototype.movePlaylistItem = function (playlistItemId, newIndex) { movePlaylistItem(playlistItemId, newIndex) {
var playlist = this.getPlaylist(); const playlist = this.getPlaylist();
var oldIndex; let oldIndex;
for (var i = 0, length = playlist.length; i < length; i++) { for (let i = 0, length = playlist.length; i < length; i++) {
if (playlist[i].PlaylistItemId === playlistItemId) { if (playlist[i].PlaylistItemId === playlistItemId) {
oldIndex = i; oldIndex = i;
break; break;
@ -195,30 +180,30 @@ define([], function () {
playlistItemId: playlistItemId, playlistItemId: playlistItemId,
newIndex: newIndex newIndex: newIndex
}; };
}; }
PlayQueueManager.prototype.reset = function () { reset() {
this._sortedPlaylist = []; this._sortedPlaylist = [];
this._playlist = []; this._playlist = [];
this._currentPlaylistItemId = null; this._currentPlaylistItemId = null;
this._repeatMode = 'RepeatNone'; this._repeatMode = 'RepeatNone';
this._shuffleMode = 'Sorted'; this._shuffleMode = 'Sorted';
}; }
PlayQueueManager.prototype.setRepeatMode = function (value) { setRepeatMode(value) {
const repeatModes = ['RepeatOne', 'RepeatAll', 'RepeatNone']; const repeatModes = ['RepeatOne', 'RepeatAll', 'RepeatNone'];
if (repeatModes.includes(value)) { if (repeatModes.includes(value)) {
this._repeatMode = value; this._repeatMode = value;
} else { } else {
throw new TypeError('invalid value provided for setRepeatMode'); throw new TypeError('invalid value provided for setRepeatMode');
} }
}; }
PlayQueueManager.prototype.getRepeatMode = function () { getRepeatMode() {
return this._repeatMode; return this._repeatMode;
}; }
PlayQueueManager.prototype.setShuffleMode = function (value) { setShuffleMode(value) {
switch (value) { switch (value) {
case 'Shuffle': case 'Shuffle':
this.shufflePlaylist(); this.shufflePlaylist();
@ -229,9 +214,9 @@ define([], function () {
default: default:
throw new TypeError('invalid value provided to setShuffleMode'); throw new TypeError('invalid value provided to setShuffleMode');
} }
}; }
PlayQueueManager.prototype.toggleShuffleMode = function () { toggleShuffleMode() {
switch (this._shuffleMode) { switch (this._shuffleMode) {
case 'Shuffle': case 'Shuffle':
this.setShuffleMode('Sorted'); this.setShuffleMode('Sorted');
@ -242,16 +227,16 @@ define([], function () {
default: default:
throw new TypeError('current value for shufflequeue is invalid'); throw new TypeError('current value for shufflequeue is invalid');
} }
}; }
PlayQueueManager.prototype.getShuffleMode = function () { getShuffleMode() {
return this._shuffleMode; return this._shuffleMode;
}; }
PlayQueueManager.prototype.getNextItemInfo = function () { getNextItemInfo() {
var newIndex; let newIndex;
var playlist = this.getPlaylist(); const playlist = this.getPlaylist();
var playlistLength = playlist.length; const playlistLength = playlist.length;
switch (this.getRepeatMode()) { switch (this.getRepeatMode()) {
case 'RepeatOne': case 'RepeatOne':
@ -272,7 +257,7 @@ define([], function () {
return null; return null;
} }
var item = playlist[newIndex]; const item = playlist[newIndex];
if (!item) { if (!item) {
return null; return null;
@ -282,7 +267,19 @@ define([], function () {
item: item, item: item,
index: newIndex index: newIndex
}; };
}; }
}
return PlayQueueManager; function arrayInsertAt(destArray, pos, arrayToInsert) {
}); let args = [];
args.push(pos); // where to insert
args.push(0); // nothing to remove
args = args.concat(arrayToInsert); // add on array to insert
destArray.splice.apply(destArray, args); // splice it in
}
function moveInArray(array, from, to) {
array.splice(to, 0, array.splice(from, 1)[0]);
}
export default PlayQueueManager;

4
src/components/playbackSettings/playbackSettings.template.html
View file

@ -85,7 +85,7 @@
<div class="selectContainer"> <div class="selectContainer">
<select is="emby-select" class="selectChromecastVersion" label="${LabelChromecastVersion}"> <select is="emby-select" class="selectChromecastVersion" label="${LabelChromecastVersion}">
<option value="stable">${LabelStable}</option> <option value="stable">${LabelStable}</option>
<option value="nightly">${LabelNightly}</option> <option value="unstable">${LabelUnstable}</option>
</select> </select>
</div> </div>
@ -99,6 +99,6 @@
</div> </div>
<button is="emby-button" type="submit" class="raised button-submit block btnSave hide"> <button is="emby-button" type="submit" class="raised button-submit block btnSave hide">
<span>${ButtonSave}</span> <span>${Save}</span>
</button> </button>
</form> </form>

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

@ -210,7 +210,7 @@ import 'emby-button';
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
import('scrollHelper').then(scrollHelper => { import('scrollHelper').then((scrollHelper) => {
const fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });

88
src/components/pluginManager.js
View file

@ -1,10 +1,18 @@
define(['events', 'globalize'], function (events, globalize) { import events from 'events';
'use strict'; import globalize from 'globalize';
/* eslint-disable indent */
// TODO: replace with each plugin version // TODO: replace with each plugin version
var cacheParam = new Date().getTime(); var cacheParam = new Date().getTime();
function loadStrings(plugin) { class PluginManager {
pluginsList = [];
get plugins() {
return this.pluginsList;
}
#loadStrings(plugin) {
var strings = plugin.getTranslations ? plugin.getTranslations() : []; var strings = plugin.getTranslations ? plugin.getTranslations() : [];
return globalize.loadStrings({ return globalize.loadStrings({
name: plugin.id || plugin.packageName, name: plugin.id || plugin.packageName,
@ -12,26 +20,19 @@ define(['events', 'globalize'], function (events, globalize) {
}); });
} }
function definePluginRoute(pluginManager, route, plugin) { #definePluginRoute(route, plugin) {
route.contentPath = pluginManager.mapPath(plugin, route.path); route.contentPath = this.mapPath(plugin, route.path);
route.path = pluginManager.mapRoute(plugin, route); route.path = this.#mapRoute(plugin, route);
Emby.App.defineRoute(route, plugin.id); Emby.App.defineRoute(route, plugin.id);
} }
function PluginManager() { #registerPlugin(plugin) {
this.pluginsList = []; this.#register(plugin);
}
PluginManager.prototype.loadPlugin = function(pluginSpec) {
var instance = this;
function registerPlugin(plugin) {
instance.register(plugin);
if (plugin.getRoutes) { if (plugin.getRoutes) {
plugin.getRoutes().forEach(function (route) { plugin.getRoutes().forEach((route) => {
definePluginRoute(instance, route, plugin); this.#definePluginRoute(route, plugin);
}); });
} }
@ -40,7 +41,7 @@ define(['events', 'globalize'], function (events, globalize) {
return Promise.resolve(plugin); return Promise.resolve(plugin);
} else { } else {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
loadStrings(plugin) this.#loadStrings(plugin)
.then(function () { .then(function () {
resolve(plugin); resolve(plugin);
}) })
@ -49,15 +50,16 @@ define(['events', 'globalize'], function (events, globalize) {
} }
} }
loadPlugin(pluginSpec) {
if (typeof pluginSpec === 'string') { if (typeof pluginSpec === 'string') {
console.debug('Loading plugin (via deprecated requirejs method): ' + pluginSpec); console.debug('Loading plugin (via deprecated requirejs method): ' + pluginSpec);
return new Promise(function (resolve, reject) { return new Promise((resolve, reject) => {
require([pluginSpec], (pluginFactory) => { require([pluginSpec], (pluginFactory) => {
var plugin = pluginFactory.default ? new pluginFactory.default() : new pluginFactory(); var plugin = pluginFactory.default ? new pluginFactory.default() : new pluginFactory();
// See if it's already installed // See if it's already installed
var existing = instance.pluginsList.filter(function (p) { var existing = this.pluginsList.filter(function (p) {
return p.id === plugin.id; return p.id === plugin.id;
})[0]; })[0];
@ -78,61 +80,57 @@ define(['events', 'globalize'], function (events, globalize) {
paths: paths paths: paths
}); });
registerPlugin(plugin).then(resolve).catch(reject); this.#registerPlugin(plugin).then(resolve).catch(reject);
}); });
}); });
} else if (pluginSpec.then) { } else if (pluginSpec.then) {
return pluginSpec.then(pluginBuilder => { return pluginSpec.then(pluginBuilder => {
return pluginBuilder(); return pluginBuilder();
}).then(plugin => { }).then((plugin) => {
console.debug(`Plugin loaded: ${plugin.id}`); console.debug(`Plugin loaded: ${plugin.id}`);
return registerPlugin(plugin); return this.#registerPlugin(plugin);
}); });
} else { } else {
const err = new Error('Plugins have to be a Promise that resolves to a plugin builder function or a requirejs urls (deprecated)'); const err = new TypeError('Plugins have to be a Promise that resolves to a plugin builder function or a RequireJS url (deprecated)');
console.error(err); console.error(err);
return Promise.reject(err); return Promise.reject(err);
} }
}; }
// In lieu of automatic discovery, plugins will register dynamic objects // In lieu of automatic discovery, plugins will register dynamic objects
// Each object will have the following properties: // Each object will have the following properties:
// name // name
// type (skin, screensaver, etc) // type (skin, screensaver, etc)
PluginManager.prototype.register = function (obj) { #register(obj) {
this.pluginsList.push(obj); this.pluginsList.push(obj);
events.trigger(this, 'registered', [obj]); events.trigger(this, 'registered', [obj]);
}; }
PluginManager.prototype.ofType = function (type) { ofType(type) {
return this.pluginsList.filter(function (o) { return this.pluginsList.filter((o) => {
return o.type === type; return o.type === type;
}); });
}; }
PluginManager.prototype.plugins = function () { #mapRoute(plugin, route) {
return this.pluginsList;
};
PluginManager.prototype.mapRoute = function (plugin, route) {
if (typeof plugin === 'string') { if (typeof plugin === 'string') {
plugin = this.pluginsList.filter(function (p) { plugin = this.pluginsList.filter((p) => {
return (p.id || p.packageName) === plugin; return (p.id || p.packageName) === plugin;
})[0]; })[0];
} }
route = route.path || route; route = route.path || route;
if (route.toLowerCase().indexOf('http') === 0) { if (route.toLowerCase().startsWith('http')) {
return route; return route;
} }
return '/plugins/' + plugin.id + '/' + route; return '/plugins/' + plugin.id + '/' + route;
}; }
PluginManager.prototype.mapPath = function (plugin, path, addCacheParam) { mapPath(plugin, path, addCacheParam) {
if (typeof plugin === 'string') { if (typeof plugin === 'string') {
plugin = this.pluginsList.filter(function (p) { plugin = this.pluginsList.filter((p) => {
return (p.id || p.packageName) === plugin; return (p.id || p.packageName) === plugin;
})[0]; })[0];
} }
@ -140,12 +138,14 @@ define(['events', 'globalize'], function (events, globalize) {
var url = plugin.baseUrl + '/' + path; var url = plugin.baseUrl + '/' + path;
if (addCacheParam) { if (addCacheParam) {
url += url.indexOf('?') === -1 ? '?' : '&'; url += url.includes('?') ? '&' : '?';
url += 'v=' + cacheParam; url += 'v=' + cacheParam;
} }
return url; return url;
}; }
}
return new PluginManager(); /* eslint-enable indent */
});
export default new PluginManager();

20
src/components/qualityOptions.js
View file

@ -1,7 +1,6 @@
define(['globalize'], function (globalize) { import globalize from 'globalize';
'use strict';
function getVideoQualityOptions(options) { export function getVideoQualityOptions(options) {
var maxStreamingBitrate = options.currentMaxBitrate; var maxStreamingBitrate = options.currentMaxBitrate;
var videoWidth = options.videoWidth; var videoWidth = options.videoWidth;
var videoHeight = options.videoHeight; var videoHeight = options.videoHeight;
@ -100,9 +99,9 @@ define(['globalize'], function (globalize) {
} }
return qualityOptions; return qualityOptions;
} }
function getAudioQualityOptions(options) { export function getAudioQualityOptions(options) {
var maxStreamingBitrate = options.currentMaxBitrate; var maxStreamingBitrate = options.currentMaxBitrate;
var qualityOptions = []; var qualityOptions = [];
@ -151,10 +150,9 @@ define(['globalize'], function (globalize) {
} }
return qualityOptions; return qualityOptions;
} }
return { export default {
getVideoQualityOptions: getVideoQualityOptions, getVideoQualityOptions,
getAudioQualityOptions: getAudioQualityOptions getAudioQualityOptions
}; };
});

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

@ -1,35 +1,40 @@
define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields'], function (globalize, connectionManager, require, loading, appHost, dom, recordingHelper, events) { import connectionManager from 'connectionManager';
'use strict'; import dom from 'dom';
import recordingHelper from 'recordingHelper';
import 'paper-icon-button-light';
import 'emby-button';
import 'css!./recordingfields';
function onRecordingButtonClick(e) { function onRecordingButtonClick(e) {
var item = this.item; const item = this.item;
if (item) { if (item) {
var serverId = item.ServerId; const serverId = item.ServerId;
var programId = item.Id; const programId = item.Id;
var timerId = item.TimerId; const timerId = item.TimerId;
var timerStatus = item.Status; const timerStatus = item.Status;
var seriesTimerId = item.SeriesTimerId; const seriesTimerId = item.SeriesTimerId;
var instance = this; const instance = this;
recordingHelper.toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId).then(function () { recordingHelper.toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId).then(function () {
instance.refresh(serverId, programId); instance.refresh(serverId, programId);
}); });
} }
} }
function setButtonIcon(button, icon) { function setButtonIcon(button, icon) {
var inner = button.querySelector('.material-icons'); const inner = button.querySelector('.material-icons');
inner.classList.remove('fiber_smart_record'); inner.classList.remove('fiber_smart_record');
inner.classList.remove('fiber_manual_record'); inner.classList.remove('fiber_manual_record');
inner.classList.add(icon); inner.classList.add(icon);
} }
function RecordingButton(options) { class RecordingButton {
constructor(options) {
this.options = options; this.options = options;
var button = options.button; const button = options.button;
setButtonIcon(button, 'fiber_manual_record'); setButtonIcon(button, 'fiber_manual_record');
@ -39,7 +44,7 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
this.refresh(options.itemId, options.serverId); this.refresh(options.itemId, options.serverId);
} }
var clickFn = onRecordingButtonClick.bind(this); const clickFn = onRecordingButtonClick.bind(this);
this.clickFn = clickFn; this.clickFn = clickFn;
dom.addEventListener(button, 'click', clickFn, { dom.addEventListener(button, 'click', clickFn, {
@ -47,8 +52,49 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
}); });
} }
function getIndicatorIcon(item) { refresh(serverId, itemId) {
var status; const apiClient = connectionManager.getApiClient(serverId);
const self = this;
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
self.refreshItem(item);
});
}
refreshItem(item) {
const options = this.options;
const button = options.button;
this.item = item;
setButtonIcon(button, getIndicatorIcon(item));
if (item.TimerId && (item.Status || 'Cancelled') !== 'Cancelled') {
button.classList.add('recordingIcon-active');
} else {
button.classList.remove('recordingIcon-active');
}
}
destroy() {
const options = this.options;
if (options) {
const button = options.button;
const clickFn = this.clickFn;
if (clickFn) {
dom.removeEventListener(button, 'click', clickFn, {
passive: true
});
}
}
this.options = null;
this.item = null;
}
}
function getIndicatorIcon(item) {
let status;
if (item.Type === 'SeriesTimer') { if (item.Type === 'SeriesTimer') {
return 'fiber_smart_record'; return 'fiber_smart_record';
@ -67,47 +113,6 @@ define(['globalize', 'connectionManager', 'require', 'loading', 'apphost', 'dom'
} }
return 'fiber_manual_record'; return 'fiber_manual_record';
} }
RecordingButton.prototype.refresh = function (serverId, itemId) { export default RecordingButton;
var apiClient = connectionManager.getApiClient(serverId);
var self = this;
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
self.refreshItem(item);
});
};
RecordingButton.prototype.refreshItem = function (item) {
var options = this.options;
var button = options.button;
this.item = item;
setButtonIcon(button, getIndicatorIcon(item));
if (item.TimerId && (item.Status || 'Cancelled') !== 'Cancelled') {
button.classList.add('recordingIcon-active');
} else {
button.classList.remove('recordingIcon-active');
}
};
RecordingButton.prototype.destroy = function () {
var options = this.options;
if (options) {
var button = options.button;
var clickFn = this.clickFn;
if (clickFn) {
dom.removeEventListener(button, 'click', clickFn, {
passive: true
});
}
}
this.options = null;
this.item = null;
};
return RecordingButton;
});

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

@ -1,15 +1,33 @@
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'datetime', 'imageLoader', 'recordingFields', 'events', 'emby-checkbox', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, datetime, imageLoader, recordingFields, events) { import dialogHelper from 'dialogHelper';
'use strict'; import globalize from 'globalize';
import layoutManager from 'layoutManager';
import mediaInfo from 'mediaInfo';
import connectionManager from 'connectionManager';
import require from 'require';
import loading from 'loading';
import scrollHelper from 'scrollHelper';
import datetime from 'datetime';
import imageLoader from 'imageLoader';
import recordingFields from 'recordingFields';
import events from 'events';
import 'emby-checkbox';
import 'emby-button';
import 'emby-collapse';
import 'emby-input';
import 'paper-icon-button-light';
import 'css!./../formdialog';
import 'css!./recordingcreator';
import 'material-icons';
var currentDialog; let currentDialog;
var closeAction; let closeAction;
var currentRecordingFields; let currentRecordingFields;
function closeDialog() { function closeDialog() {
dialogHelper.close(currentDialog); dialogHelper.close(currentDialog);
} }
function init(context) { function init(context) {
context.querySelector('.btnPlay').addEventListener('click', function () { context.querySelector('.btnPlay').addEventListener('click', function () {
closeAction = 'play'; closeAction = 'play';
closeDialog(); closeDialog();
@ -19,10 +37,10 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
closeAction = null; closeAction = null;
closeDialog(); closeDialog();
}); });
} }
function getImageUrl(item, apiClient, imageHeight) { function getImageUrl(item, apiClient, imageHeight) {
var imageTags = item.ImageTags || {}; const imageTags = item.ImageTags || {};
if (item.PrimaryImageTag) { if (item.PrimaryImageTag) {
imageTags.Primary = item.PrimaryImageTag; imageTags.Primary = item.PrimaryImageTag;
@ -43,12 +61,12 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
return null; return null;
} }
function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) { function renderRecording(context, defaultTimer, program, apiClient, refreshRecordingStateOnly) {
if (!refreshRecordingStateOnly) { if (!refreshRecordingStateOnly) {
var imgUrl = getImageUrl(program, apiClient, 200); const imgUrl = getImageUrl(program, apiClient, 200);
var imageContainer = context.querySelector('.recordingDialog-imageContainer'); const imageContainer = context.querySelector('.recordingDialog-imageContainer');
if (imgUrl) { if (imgUrl) {
imageContainer.innerHTML = '<img src="' + require.toUrl('.').split('?')[0] + '/empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />'; imageContainer.innerHTML = '<img src="' + require.toUrl('.').split('?')[0] + '/empty.png" data-src="' + imgUrl + '" class="recordingDialog-img lazy" />';
@ -65,8 +83,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / '); context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
context.querySelector('.itemOverview').innerHTML = program.Overview || ''; context.querySelector('.itemOverview').innerHTML = program.Overview || '';
var formDialogFooter = context.querySelector('.formDialogFooter'); const formDialogFooter = context.querySelector('.formDialogFooter');
var now = new Date(); const now = new Date();
if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) { if (now >= datetime.parseISO8601Date(program.StartDate, true) && now < datetime.parseISO8601Date(program.EndDate, true)) {
formDialogFooter.classList.remove('hide'); formDialogFooter.classList.remove('hide');
} else { } else {
@ -80,28 +98,28 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
}); });
loading.hide(); loading.hide();
} }
function reload(context, programId, serverId, refreshRecordingStateOnly) { function reload(context, programId, serverId, refreshRecordingStateOnly) {
loading.show(); loading.show();
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
var promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId }); const promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
var promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()); const promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
Promise.all([promise1, promise2]).then(function (responses) { Promise.all([promise1, promise2]).then(function (responses) {
var defaults = responses[0]; const defaults = responses[0];
var program = responses[1]; const program = responses[1];
renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly); renderRecording(context, defaults, program, apiClient, refreshRecordingStateOnly);
}); });
} }
function executeCloseAction(action, programId, serverId) { function executeCloseAction(action, programId, serverId) {
if (action === 'play') { if (action === 'play') {
require(['playbackManager'], function (playbackManager) { import('playbackManager').then(({ default: playbackManager }) => {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) { apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
playbackManager.play({ playbackManager.play({
@ -112,16 +130,16 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
}); });
return; return;
} }
} }
function showEditor(itemId, serverId) { function showEditor(itemId, serverId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
closeAction = null; closeAction = null;
loading.show(); loading.show();
require(['text!./recordingcreator.template.html'], function (template) { import('text!./recordingcreator.template.html').then(({ default: template }) => {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -132,12 +150,12 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
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('recordingDialog'); dlg.classList.add('recordingDialog');
var html = ''; let html = '';
html += globalize.translateHtml(template, 'core'); html += globalize.translateHtml(template, 'core');
@ -179,9 +197,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
dialogHelper.open(dlg); dialogHelper.open(dlg);
}); });
}); });
} }
return { export default {
show: showEditor show: showEditor
}; };
});

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

@ -1,37 +1,47 @@
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader) { import dialogHelper from 'dialogHelper';
'use strict'; import globalize from 'globalize';
import layoutManager from 'layoutManager';
import connectionManager from 'connectionManager';
import loading from 'loading';
import scrollHelper from 'scrollHelper';
import 'scrollStyles';
import 'emby-button';
import 'emby-collapse';
import 'emby-input';
import 'paper-icon-button-light';
import 'css!./../formdialog';
import 'css!./recordingcreator';
import 'material-icons';
import 'flexStyles';
var currentDialog; let currentDialog;
var recordingDeleted = false; let recordingDeleted = false;
var currentItemId; let currentItemId;
var currentServerId; let currentServerId;
var currentResolve; let currentResolve;
function deleteTimer(apiClient, timerId) { function deleteTimer(apiClient, timerId) {
return new Promise(function (resolve, reject) { return import('recordingHelper').then(({ default: recordingHelper }) => {
require(['recordingHelper'], function (recordingHelper) { recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId());
recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
}); });
}); }
}
function renderTimer(context, item, apiClient) { function renderTimer(context, item, apiClient) {
context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60; context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60; context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
loading.hide(); loading.hide();
} }
function closeDialog(isDeleted) { function closeDialog(isDeleted) {
recordingDeleted = isDeleted; recordingDeleted = isDeleted;
dialogHelper.close(currentDialog); dialogHelper.close(currentDialog);
} }
function onSubmit(e) { function onSubmit(e) {
var form = this; const form = this;
var apiClient = connectionManager.getApiClient(currentServerId); const apiClient = connectionManager.getApiClient(currentServerId);
apiClient.getLiveTvTimer(currentItemId).then(function (item) { apiClient.getLiveTvTimer(currentItemId).then(function (item) {
item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60; item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
@ -43,35 +53,36 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
// Disable default form submission // Disable default form submission
return false; return false;
} }
function init(context) { function init(context) {
context.querySelector('.btnCancel').addEventListener('click', function () { context.querySelector('.btnCancel').addEventListener('click', function () {
closeDialog(false); closeDialog(false);
}); });
context.querySelector('.btnCancelRecording').addEventListener('click', function () { context.querySelector('.btnCancelRecording').addEventListener('click', function () {
var apiClient = connectionManager.getApiClient(currentServerId); const apiClient = connectionManager.getApiClient(currentServerId);
deleteTimer(apiClient, currentItemId).then(function () { deleteTimer(apiClient, currentItemId).then(function () {
closeDialog(true); closeDialog(true);
}); });
}); });
context.querySelector('form').addEventListener('submit', onSubmit); context.querySelector('form').addEventListener('submit', onSubmit);
} }
function reload(context, id) { function reload(context, id) {
loading.show(); loading.show();
currentItemId = id; currentItemId = id;
var apiClient = connectionManager.getApiClient(currentServerId); const apiClient = connectionManager.getApiClient(currentServerId);
apiClient.getLiveTvTimer(id).then(function (result) { apiClient.getLiveTvTimer(id).then(function (result) {
renderTimer(context, result, apiClient); renderTimer(context, result, apiClient);
loading.hide(); loading.hide();
}); });
} }
function showEditor(itemId, serverId, options) { function showEditor(itemId, serverId, options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
recordingDeleted = false; recordingDeleted = false;
currentServerId = serverId; currentServerId = serverId;
@ -79,8 +90,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
options = options || {}; options = options || {};
currentResolve = resolve; currentResolve = resolve;
require(['text!./recordingeditor.template.html'], function (template) { import('text!./recordingeditor.template.html').then(({default: template}) => {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -89,7 +100,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
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');
@ -99,7 +110,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
dlg.classList.add('dialog-fullscreen-lowres'); dlg.classList.add('dialog-fullscreen-lowres');
} }
var html = ''; let html = '';
html += globalize.translateHtml(template, 'core'); html += globalize.translateHtml(template, 'core');
@ -137,9 +148,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
dialogHelper.open(dlg); dialogHelper.open(dlg);
}); });
}); });
} }
return { export default {
show: showEditor show: showEditor
}; };
});

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

@ -1,7 +1,18 @@
define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields', 'flexStyles'], function (globalize, connectionManager, serverNotifications, require, loading, appHost, dom, recordingHelper, events) { import globalize from 'globalize';
'use strict'; import connectionManager from 'connectionManager';
import serverNotifications from 'serverNotifications';
import loading from 'loading';
import dom from 'dom';
import recordingHelper from 'recordingHelper';
import events from 'events';
import 'paper-icon-button-light';
import 'emby-button';
import 'css!./recordingfields';
import 'flexStyles';
function loadData(parent, program, apiClient) { /*eslint prefer-const: "error"*/
function loadData(parent, program, apiClient) {
if (program.IsSeries) { if (program.IsSeries) {
parent.querySelector('.recordSeriesContainer').classList.remove('hide'); parent.querySelector('.recordSeriesContainer').classList.remove('hide');
} else { } else {
@ -31,11 +42,11 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
parent.querySelector('.singleRecordingButton .recordingIcon').classList.remove('recordingIcon-active'); parent.querySelector('.singleRecordingButton .recordingIcon').classList.remove('recordingIcon-active');
parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('Record'); parent.querySelector('.singleRecordingButton .buttonText').innerHTML = globalize.translate('Record');
} }
} }
function fetchData(instance) { function fetchData(instance) {
var options = instance.options; const options = instance.options;
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(options.serverId);
options.parent.querySelector('.recordingFields').classList.remove('hide'); options.parent.querySelector('.recordingFields').classList.remove('hide');
return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) { return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
@ -44,11 +55,11 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
instance.SeriesTimerId = program.SeriesTimerId; instance.SeriesTimerId = program.SeriesTimerId;
loadData(options.parent, program, apiClient); loadData(options.parent, program, apiClient);
}); });
} }
function onTimerChangedExternally(e, apiClient, data) { function onTimerChangedExternally(e, apiClient, data) {
var options = this.options; const options = this.options;
var refresh = false; let refresh = false;
if (data.Id) { if (data.Id) {
if (this.TimerId === data.Id) { if (this.TimerId === data.Id) {
@ -64,11 +75,11 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
if (refresh) { if (refresh) {
this.refresh(); this.refresh();
} }
} }
function onSeriesTimerChangedExternally(e, apiClient, data) { function onSeriesTimerChangedExternally(e, apiClient, data) {
var options = this.options; const options = this.options;
var refresh = false; let refresh = false;
if (data.Id) { if (data.Id) {
if (this.SeriesTimerId === data.Id) { if (this.SeriesTimerId === data.Id) {
@ -84,51 +95,93 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
if (refresh) { if (refresh) {
this.refresh(); this.refresh();
} }
} }
function RecordingEditor(options) { class RecordingEditor {
constructor(options) {
this.options = options; this.options = options;
this.embed(); this.embed();
var timerChangedHandler = onTimerChangedExternally.bind(this); const timerChangedHandler = onTimerChangedExternally.bind(this);
this.timerChangedHandler = timerChangedHandler; this.timerChangedHandler = timerChangedHandler;
events.on(serverNotifications, 'TimerCreated', timerChangedHandler); events.on(serverNotifications, 'TimerCreated', timerChangedHandler);
events.on(serverNotifications, 'TimerCancelled', timerChangedHandler); events.on(serverNotifications, 'TimerCancelled', timerChangedHandler);
var seriesTimerChangedHandler = onSeriesTimerChangedExternally.bind(this); const seriesTimerChangedHandler = onSeriesTimerChangedExternally.bind(this);
this.seriesTimerChangedHandler = seriesTimerChangedHandler; this.seriesTimerChangedHandler = seriesTimerChangedHandler;
events.on(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler); events.on(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
events.on(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler); events.on(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
} }
function onManageRecordingClick(e) { embed() {
var options = this.options; const self = this;
return new Promise(function (resolve, reject) {
import('text!./recordingfields.template.html').then(({default: template}) => {
const options = self.options;
const context = options.parent;
context.innerHTML = globalize.translateHtml(template, 'core');
context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self));
context.querySelector('.seriesRecordingButton').addEventListener('click', onRecordSeriesChange.bind(self));
context.querySelector('.btnManageRecording').addEventListener('click', onManageRecordingClick.bind(self));
context.querySelector('.btnManageSeriesRecording').addEventListener('click', onManageSeriesRecordingClick.bind(self));
fetchData(self).then(resolve);
});
});
}
hasChanged() {
return this.changed;
}
refresh() {
fetchData(this);
}
destroy() {
const timerChangedHandler = this.timerChangedHandler;
this.timerChangedHandler = null;
events.off(serverNotifications, 'TimerCreated', timerChangedHandler);
events.off(serverNotifications, 'TimerCancelled', timerChangedHandler);
const seriesTimerChangedHandler = this.seriesTimerChangedHandler;
this.seriesTimerChangedHandler = null;
events.off(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
events.off(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
}
}
function onManageRecordingClick(e) {
const options = this.options;
if (!this.TimerId || this.Status === 'Cancelled') { if (!this.TimerId || this.Status === 'Cancelled') {
return; return;
} }
var self = this; const self = this;
require(['recordingEditor'], function (recordingEditor) { import('recordingEditor').then(({default: recordingEditor}) => {
recordingEditor.show(self.TimerId, options.serverId, { recordingEditor.show(self.TimerId, options.serverId, {
enableCancel: false enableCancel: false
}).then(function () { }).then(function () {
self.changed = true; self.changed = true;
}); });
}); });
} }
function onManageSeriesRecordingClick(e) { function onManageSeriesRecordingClick(e) {
var options = this.options; const options = this.options;
if (!this.SeriesTimerId) { if (!this.SeriesTimerId) {
return; return;
} }
var self = this; const self = this;
require(['seriesRecordingEditor'], function (seriesRecordingEditor) { import('seriesRecordingEditor').then(({default: seriesRecordingEditor}) => {
seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, { seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, {
enableCancel: false enableCancel: false
@ -137,19 +190,19 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
self.changed = true; self.changed = true;
}); });
}); });
} }
function onRecordChange(e) { function onRecordChange(e) {
this.changed = true; this.changed = true;
var self = this; const self = this;
var options = this.options; const options = this.options;
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(options.serverId);
var button = dom.parentWithTag(e.target, 'BUTTON'); const button = dom.parentWithTag(e.target, 'BUTTON');
var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active'); const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
var hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled'; const hasEnabledTimer = this.TimerId && this.Status !== 'Cancelled';
if (isChecked) { if (isChecked) {
if (!hasEnabledTimer) { if (!hasEnabledTimer) {
@ -170,28 +223,28 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
}); });
} }
} }
} }
function sendToast(msg) { function sendToast(msg) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(msg); toast(msg);
}); });
} }
function onRecordSeriesChange(e) { function onRecordSeriesChange(e) {
this.changed = true; this.changed = true;
var self = this; const self = this;
var options = this.options; const options = this.options;
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(options.serverId);
var button = dom.parentWithTag(e.target, 'BUTTON'); const button = dom.parentWithTag(e.target, 'BUTTON');
var isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active'); const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
if (isChecked) { if (isChecked) {
options.parent.querySelector('.recordSeriesContainer').classList.remove('hide'); options.parent.querySelector('.recordSeriesContainer').classList.remove('hide');
if (!this.SeriesTimerId) { if (!this.SeriesTimerId) {
var promise = this.TimerId ? const promise = this.TimerId ?
recordingHelper.changeRecordingToSeries(apiClient, this.TimerId, options.programId) : recordingHelper.changeRecordingToSeries(apiClient, this.TimerId, options.programId) :
recordingHelper.createRecording(apiClient, options.programId, true); recordingHelper.createRecording(apiClient, options.programId, true);
promise.then(function () { promise.then(function () {
@ -206,47 +259,6 @@ define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loa
}); });
} }
} }
} }
RecordingEditor.prototype.embed = function () { export default RecordingEditor;
var self = this;
return new Promise(function (resolve, reject) {
require(['text!./recordingfields.template.html'], function (template) {
var options = self.options;
var context = options.parent;
context.innerHTML = globalize.translateHtml(template, 'core');
context.querySelector('.singleRecordingButton').addEventListener('click', onRecordChange.bind(self));
context.querySelector('.seriesRecordingButton').addEventListener('click', onRecordSeriesChange.bind(self));
context.querySelector('.btnManageRecording').addEventListener('click', onManageRecordingClick.bind(self));
context.querySelector('.btnManageSeriesRecording').addEventListener('click', onManageSeriesRecordingClick.bind(self));
fetchData(self).then(resolve);
});
});
};
RecordingEditor.prototype.hasChanged = function () {
return this.changed;
};
RecordingEditor.prototype.refresh = function () {
fetchData(this);
};
RecordingEditor.prototype.destroy = function () {
var timerChangedHandler = this.timerChangedHandler;
this.timerChangedHandler = null;
events.off(serverNotifications, 'TimerCreated', timerChangedHandler);
events.off(serverNotifications, 'TimerCancelled', timerChangedHandler);
var seriesTimerChangedHandler = this.seriesTimerChangedHandler;
this.seriesTimerChangedHandler = null;
events.off(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler);
events.off(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler);
};
return RecordingEditor;
});

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

@ -1,7 +1,10 @@
define(['globalize', 'loading', 'connectionManager'], function (globalize, loading, connectionManager) { import globalize from 'globalize';
'use strict'; import loading from 'loading';
import connectionManager from 'connectionManager';
function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCancellation) { /*eslint prefer-const: "error"*/
function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCancellation) {
loading.show(); loading.show();
return apiClient.getItem(apiClient.getCurrentUserId(), programId).then(function (item) { return apiClient.getItem(apiClient.getCurrentUserId(), programId).then(function (item) {
@ -22,11 +25,11 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
return cancelTimer(apiClient.serverId(), timerId, true); return cancelTimer(apiClient.serverId(), timerId, true);
} }
}); });
} }
function cancelTimerWithConfirmation(timerId, serverId) { function cancelTimerWithConfirmation(timerId, serverId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['confirm'], function (confirm) { import('confirm').then(({ default: confirm }) => {
confirm.default({ confirm.default({
text: globalize.translate('MessageConfirmRecordingCancellation'), text: globalize.translate('MessageConfirmRecordingCancellation'),
@ -37,16 +40,16 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
}).then(function () { }).then(function () {
loading.show(); loading.show();
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
cancelTimer(apiClient, timerId, true).then(resolve, reject); cancelTimer(apiClient, timerId, true).then(resolve, reject);
}, reject); }, reject);
}); });
}); });
} }
function cancelSeriesTimerWithConfirmation(timerId, serverId) { function cancelSeriesTimerWithConfirmation(timerId, serverId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['confirm'], function (confirm) { import('confirm').then(({ default: confirm }) => {
confirm.default({ confirm.default({
text: globalize.translate('MessageConfirmRecordingCancellation'), text: globalize.translate('MessageConfirmRecordingCancellation'),
@ -57,9 +60,9 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
}).then(function () { }).then(function () {
loading.show(); loading.show();
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
apiClient.cancelLiveTvSeriesTimer(timerId).then(function () { apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('SeriesCancelled')); toast(globalize.translate('SeriesCancelled'));
}); });
@ -69,9 +72,9 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
}, reject); }, reject);
}); });
}); });
} }
function cancelTimer(apiClient, timerId, hideLoading) { function cancelTimer(apiClient, timerId, hideLoading) {
loading.show(); loading.show();
return apiClient.cancelLiveTvTimer(timerId).then(function () { return apiClient.cancelLiveTvTimer(timerId).then(function () {
if (hideLoading !== false) { if (hideLoading !== false) {
@ -79,12 +82,12 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
sendToast(globalize.translate('RecordingCancelled')); sendToast(globalize.translate('RecordingCancelled'));
} }
}); });
} }
function createRecording(apiClient, programId, isSeries) { function createRecording(apiClient, programId, isSeries) {
loading.show(); loading.show();
return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) { return apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) {
var promise = isSeries ? const promise = isSeries ?
apiClient.createLiveTvSeriesTimer(item) : apiClient.createLiveTvSeriesTimer(item) :
apiClient.createLiveTvTimer(item); apiClient.createLiveTvTimer(item);
@ -93,18 +96,18 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
sendToast(globalize.translate('RecordingScheduled')); sendToast(globalize.translate('RecordingScheduled'));
}); });
}); });
} }
function sendToast(msg) { function sendToast(msg) {
require(['toast'], function (toast) { import('toast').then(({ default: toast }) => {
toast(msg); toast(msg);
}); });
} }
function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) { function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['dialog'], function (dialog) { import('dialog').then(({ default: dialog }) => {
var items = []; const items = [];
items.push({ items.push({
name: globalize.translate('HeaderKeepRecording'), name: globalize.translate('HeaderKeepRecording'),
@ -138,7 +141,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
buttons: items buttons: items
}).then(function (result) { }).then(function (result) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
if (result === 'canceltimer') { if (result === 'canceltimer') {
loading.show(); loading.show();
@ -148,7 +151,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
loading.show(); loading.show();
apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () { apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () {
require(['toast'], function (toast) { import('toast').then(({ default: toast }) => {
toast(globalize.translate('SeriesCancelled')); toast(globalize.translate('SeriesCancelled'));
}); });
@ -161,11 +164,11 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
}, reject); }, reject);
}); });
}); });
} }
function toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId) { function toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
var hasTimer = timerId && timerStatus !== 'Cancelled'; const hasTimer = timerId && timerStatus !== 'Cancelled';
if (seriesTimerId && hasTimer) { if (seriesTimerId && hasTimer) {
// cancel // cancel
return showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId); return showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId);
@ -179,14 +182,14 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi
} else { } else {
return Promise.reject(); return Promise.reject();
} }
} }
return { export default {
cancelTimer: cancelTimer, cancelTimer: cancelTimer,
createRecording: createRecording, createRecording: createRecording,
changeRecordingToSeries: changeRecordingToSeries, changeRecordingToSeries: changeRecordingToSeries,
toggleRecording: toggleRecording, toggleRecording: toggleRecording,
cancelTimerWithConfirmation: cancelTimerWithConfirmation, cancelTimerWithConfirmation: cancelTimerWithConfirmation,
cancelSeriesTimerWithConfirmation: cancelSeriesTimerWithConfirmation cancelSeriesTimerWithConfirmation: cancelSeriesTimerWithConfirmation
}; };
});

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

@ -1,21 +1,38 @@
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'datetime', 'scrollStyles', 'emby-button', 'emby-checkbox', 'emby-input', 'emby-select', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader, datetime) { import dialogHelper from 'dialogHelper';
'use strict'; import globalize from 'globalize';
import layoutManager from 'layoutManager';
import connectionManager from 'connectionManager';
import loading from 'loading';
import scrollHelper from 'scrollHelper';
import datetime from 'datetime';
import 'scrollStyles';
import 'emby-button';
import 'emby-checkbox';
import 'emby-input';
import 'emby-select';
import 'paper-icon-button-light';
import 'css!./../formdialog';
import 'css!./recordingcreator';
import 'material-icons';
import 'flexStyles';
var currentDialog; /*eslint prefer-const: "error"*/
var recordingUpdated = false;
var recordingDeleted = false;
var currentItemId;
var currentServerId;
function deleteTimer(apiClient, timerId) { let currentDialog;
let recordingUpdated = false;
let recordingDeleted = false;
let currentItemId;
let currentServerId;
function deleteTimer(apiClient, timerId) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['recordingHelper'], function (recordingHelper) { import('recordingHelper').then(({ default: recordingHelper }) => {
recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject); recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject);
}); });
}); });
} }
function renderTimer(context, item, apiClient) { function renderTimer(context, item) {
context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60; context.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60; context.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
@ -35,19 +52,19 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
context.querySelector('.optionAroundTime').innerHTML = globalize.translate('AroundTime', datetime.getDisplayTime(datetime.parseISO8601Date(item.StartDate))); context.querySelector('.optionAroundTime').innerHTML = globalize.translate('AroundTime', datetime.getDisplayTime(datetime.parseISO8601Date(item.StartDate)));
loading.hide(); loading.hide();
} }
function closeDialog(isDeleted) { function closeDialog(isDeleted) {
recordingUpdated = true; recordingUpdated = true;
recordingDeleted = isDeleted; recordingDeleted = isDeleted;
dialogHelper.close(currentDialog); dialogHelper.close(currentDialog);
} }
function onSubmit(e) { function onSubmit(e) {
var form = this; const form = this;
var apiClient = connectionManager.getApiClient(currentServerId); const apiClient = connectionManager.getApiClient(currentServerId);
apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) { apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) {
item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60; item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
@ -65,9 +82,9 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
// Disable default form submission // Disable default form submission
return false; return false;
} }
function init(context) { function init(context) {
fillKeepUpTo(context); fillKeepUpTo(context);
context.querySelector('.btnCancel').addEventListener('click', function () { context.querySelector('.btnCancel').addEventListener('click', function () {
@ -75,39 +92,39 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
}); });
context.querySelector('.btnCancelRecording').addEventListener('click', function () { context.querySelector('.btnCancelRecording').addEventListener('click', function () {
var apiClient = connectionManager.getApiClient(currentServerId); const apiClient = connectionManager.getApiClient(currentServerId);
deleteTimer(apiClient, currentItemId).then(function () { deleteTimer(apiClient, currentItemId).then(function () {
closeDialog(true); closeDialog(true);
}); });
}); });
context.querySelector('form').addEventListener('submit', onSubmit); context.querySelector('form').addEventListener('submit', onSubmit);
} }
function reload(context, id) { function reload(context, id) {
var apiClient = connectionManager.getApiClient(currentServerId); const apiClient = connectionManager.getApiClient(currentServerId);
loading.show(); loading.show();
if (typeof id === 'string') { if (typeof id === 'string') {
currentItemId = id; currentItemId = id;
apiClient.getLiveTvSeriesTimer(id).then(function (result) { apiClient.getLiveTvSeriesTimer(id).then(function (result) {
renderTimer(context, result, apiClient); renderTimer(context, result);
loading.hide(); loading.hide();
}); });
} else if (id) { } else if (id) {
currentItemId = id.Id; currentItemId = id.Id;
renderTimer(context, id, apiClient); renderTimer(context, id);
loading.hide(); loading.hide();
} }
} }
function fillKeepUpTo(context) { function fillKeepUpTo(context) {
var html = ''; let html = '';
for (var i = 0; i <= 50; i++) { for (let i = 0; i <= 50; i++) {
var text; let text;
if (i === 0) { if (i === 0) {
text = globalize.translate('AsManyAsPossible'); text = globalize.translate('AsManyAsPossible');
@ -121,21 +138,21 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
} }
context.querySelector('.selectKeepUpTo').innerHTML = html; context.querySelector('.selectKeepUpTo').innerHTML = html;
} }
function onFieldChange(e) { function onFieldChange() {
this.querySelector('.btnSubmit').click(); this.querySelector('.btnSubmit').click();
} }
function embed(itemId, serverId, options) { function embed(itemId, serverId, options) {
recordingUpdated = false; recordingUpdated = false;
recordingDeleted = false; recordingDeleted = false;
currentServerId = serverId; currentServerId = serverId;
loading.show(); loading.show();
options = options || {}; options = options || {};
require(['text!./seriesrecordingeditor.template.html'], function (template) { import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -146,7 +163,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = options.context; const dlg = options.context;
dlg.classList.add('hide'); dlg.classList.add('hide');
dlg.innerHTML = globalize.translateHtml(template, 'core'); dlg.innerHTML = globalize.translateHtml(template, 'core');
@ -166,9 +183,9 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
reload(dlg, itemId); reload(dlg, itemId);
}); });
} }
function showEditor(itemId, serverId, options) { function showEditor(itemId, serverId, options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
recordingUpdated = false; recordingUpdated = false;
recordingDeleted = false; recordingDeleted = false;
@ -176,8 +193,8 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
loading.show(); loading.show();
options = options || {}; options = options || {};
require(['text!./seriesrecordingeditor.template.html'], function (template) { import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -188,7 +205,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
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('recordingDialog'); dlg.classList.add('recordingDialog');
@ -197,7 +214,7 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
dlg.style['min-width'] = '20%'; dlg.style['min-width'] = '20%';
} }
var html = ''; let html = '';
html += globalize.translateHtml(template, 'core'); html += globalize.translateHtml(template, 'core');
@ -237,10 +254,9 @@ define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'c
dialogHelper.open(dlg); dialogHelper.open(dlg);
}); });
}); });
} }
return { export default {
show: showEditor, show: showEditor,
embed: embed embed: embed
}; };
});

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

@ -1,8 +1,21 @@
define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-input', 'emby-checkbox', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (dom, shell, dialogHelper, loading, layoutManager, connectionManager, appRouter, globalize) { import dom from 'dom';
'use strict'; import dialogHelper from 'dialogHelper';
import loading from 'loading';
import layoutManager from 'layoutManager';
import connectionManager from 'connectionManager';
import globalize from 'globalize';
import 'emby-input';
import 'emby-checkbox';
import 'paper-icon-button-light';
import 'emby-select';
import 'material-icons';
import 'css!./../formdialog';
import 'emby-button';
function getEditorHtml() { /*eslint prefer-const: "error"*/
var html = '';
function getEditorHtml() {
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">';
@ -37,28 +50,28 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
html += '</div>'; html += '</div>';
return html; return html;
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(({default: scrollHelper}) => {
var fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
function onSubmit(e) { function onSubmit(e) {
loading.show(); loading.show();
var instance = this; const instance = this;
var dlg = dom.parentWithClass(e.target, 'dialog'); const dlg = dom.parentWithClass(e.target, 'dialog');
var options = instance.options; const options = instance.options;
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(options.serverId);
var replaceAllMetadata = dlg.querySelector('#selectMetadataRefreshMode').value === 'all'; const replaceAllMetadata = dlg.querySelector('#selectMetadataRefreshMode').value === 'all';
var mode = dlg.querySelector('#selectMetadataRefreshMode').value === 'scan' ? 'Default' : 'FullRefresh'; const mode = dlg.querySelector('#selectMetadataRefreshMode').value === 'scan' ? 'Default' : 'FullRefresh';
var replaceAllImages = mode === 'FullRefresh' && dlg.querySelector('.chkReplaceImages').checked; const replaceAllImages = mode === 'FullRefresh' && dlg.querySelector('.chkReplaceImages').checked;
options.itemIds.forEach(function (itemId) { options.itemIds.forEach(function (itemId) {
apiClient.refreshItem(itemId, { apiClient.refreshItem(itemId, {
@ -73,7 +86,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
dialogHelper.close(dlg); dialogHelper.close(dlg);
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('RefreshQueued')); toast(globalize.translate('RefreshQueued'));
}); });
@ -81,14 +94,15 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
e.preventDefault(); e.preventDefault();
return false; return false;
} }
function RefreshDialog(options) { class RefreshDialog {
constructor(options) {
this.options = options; this.options = options;
} }
RefreshDialog.prototype.show = function () { show() {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -99,12 +113,12 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
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('RefreshMetadata'); const title = globalize.translate('RefreshMetadata');
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>';
@ -150,7 +164,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
dlg.addEventListener('close', resolve); dlg.addEventListener('close', resolve);
dialogHelper.open(dlg); dialogHelper.open(dlg);
}); });
}; }
}
return RefreshDialog; export default RefreshDialog;
});

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

@ -1,13 +1,32 @@
define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'connectionManager', 'apphost', 'globalize', 'layoutManager', 'userSettings', 'cardBuilder', 'itemContextMenu', 'cardStyle', 'emby-itemscontainer', 'css!./remotecontrol.css', 'emby-ratingbutton'], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings, cardBuilder, itemContextMenu) { import datetime from 'datetime';
'use strict'; import backdrop from 'backdrop';
var showMuteButton = true; import listView from 'listView';
var showVolumeSlider = true; import imageLoader from 'imageLoader';
import playbackManager from 'playbackManager';
import nowPlayingHelper from 'nowPlayingHelper';
import events from 'events';
import connectionManager from 'connectionManager';
import appHost from 'apphost';
import globalize from 'globalize';
import layoutManager from 'layoutManager';
import * as userSettings from 'userSettings';
import cardBuilder from 'cardBuilder';
import itemContextMenu from 'itemContextMenu';
import 'cardStyle';
import 'emby-itemscontainer';
import 'css!./remotecontrol.css';
import 'emby-ratingbutton';
function showAudioMenu(context, player, button, item) { /*eslint prefer-const: "error"*/
var currentIndex = playbackManager.getAudioStreamIndex(player);
var streams = playbackManager.audioTracks(player); let showMuteButton = true;
var menuItems = streams.map(function (s) { let showVolumeSlider = true;
var menuItem = {
function showAudioMenu(context, player, button, item) {
const currentIndex = playbackManager.getAudioStreamIndex(player);
const streams = playbackManager.audioTracks(player);
const menuItems = streams.map(function (s) {
const menuItem = {
name: s.DisplayTitle, name: s.DisplayTitle,
id: s.Index id: s.Index
}; };
@ -19,7 +38,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
return menuItem; return menuItem;
}); });
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({ default: actionsheet }) => {
actionsheet.show({ actionsheet.show({
items: menuItems, items: menuItems,
positionTo: button, positionTo: button,
@ -28,13 +47,13 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
}); });
}); });
} }
function showSubtitleMenu(context, player, button, item) { function showSubtitleMenu(context, player, button, item) {
var currentIndex = playbackManager.getSubtitleStreamIndex(player); const currentIndex = playbackManager.getSubtitleStreamIndex(player);
var streams = playbackManager.subtitleTracks(player); const streams = playbackManager.subtitleTracks(player);
var menuItems = streams.map(function (s) { const menuItems = streams.map(function (s) {
var menuItem = { const menuItem = {
name: s.DisplayTitle, name: s.DisplayTitle,
id: s.Index id: s.Index
}; };
@ -48,10 +67,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
menuItems.unshift({ menuItems.unshift({
id: -1, id: -1,
name: globalize.translate('ButtonOff'), name: globalize.translate('ButtonOff'),
selected: null == currentIndex selected: currentIndex == null
}); });
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({ default: actionsheet }) => {
actionsheet.show({ actionsheet.show({
items: menuItems, items: menuItems,
positionTo: button, positionTo: button,
@ -60,27 +79,27 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
}); });
}); });
} }
function getNowPlayingNameHtml(nowPlayingItem, includeNonNameInfo) { function getNowPlayingNameHtml(nowPlayingItem, includeNonNameInfo) {
return nowPlayingHelper.getNowPlayingNames(nowPlayingItem, includeNonNameInfo).map(function (i) { return nowPlayingHelper.getNowPlayingNames(nowPlayingItem, includeNonNameInfo).map(function (i) {
return i.text; return i.text;
}).join('<br/>'); }).join('<br/>');
} }
function seriesImageUrl(item, options) { function seriesImageUrl(item, options) {
if ('Episode' !== item.Type) { if (item.Type !== 'Episode') {
return null; return null;
} }
options = options || {}; options = options || {};
options.type = options.type || 'Primary'; options.type = options.type || 'Primary';
if ('Primary' === options.type && item.SeriesPrimaryImageTag) { if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
options.tag = item.SeriesPrimaryImageTag; options.tag = item.SeriesPrimaryImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
} }
if ('Thumb' === options.type) { if (options.type === 'Thumb') {
if (item.SeriesThumbImageTag) { if (item.SeriesThumbImageTag) {
options.tag = item.SeriesThumbImageTag; options.tag = item.SeriesThumbImageTag;
return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
@ -93,9 +112,9 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
return null; return null;
} }
function imageUrl(item, options) { function imageUrl(item, options) {
options = options || {}; options = options || {};
options.type = options.type || 'Primary'; options.type = options.type || 'Primary';
@ -110,22 +129,22 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
return null; return null;
} }
function updateNowPlayingInfo(context, state, serverId) { function updateNowPlayingInfo(context, state, serverId) {
var item = state.NowPlayingItem; const item = state.NowPlayingItem;
var displayName = item ? getNowPlayingNameHtml(item).replace('<br/>', ' - ') : ''; const displayName = item ? getNowPlayingNameHtml(item).replace('<br/>', ' - ') : '';
if (typeof item !== 'undefined') { if (typeof item !== 'undefined') {
var nowPlayingServerId = (item.ServerId || serverId); const nowPlayingServerId = (item.ServerId || serverId);
if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') { if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') {
var songName = item.Name; const songName = item.Name;
if (item.Album != null && item.Artists != null) { let artistsSeries = '';
var artistsSeries = ''; let albumName = '';
var albumName = item.Album; if (item.Artists != null) {
if (item.ArtistItems != null) { if (item.ArtistItems != null) {
for (const artist of item.ArtistItems) { for (const artist of item.ArtistItems) {
let artistName = artist.Name; const artistName = artist.Name;
let artistId = artist.Id; const artistId = artist.Id;
artistsSeries += `<a class="button-link emby-button" is="emby-linkbutton" href="details?id=${artistId}&serverId=${nowPlayingServerId}">${artistName}</a>`; artistsSeries += `<a class="button-link emby-button" is="emby-linkbutton" href="details?id=${artistId}&serverId=${nowPlayingServerId}">${artistName}</a>`;
if (artist !== item.ArtistItems.slice(-1)[0]) { if (artist !== item.ArtistItems.slice(-1)[0]) {
artistsSeries += ', '; artistsSeries += ', ';
@ -142,17 +161,20 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
} }
} }
context.querySelector('.nowPlayingArtist').innerHTML = artistsSeries;
context.querySelector('.nowPlayingAlbum').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.AlbumId + `&serverId=${nowPlayingServerId}">${albumName}</a>`;
} }
if (item.Album != null) {
albumName = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.AlbumId + `&serverId=${nowPlayingServerId}">` + item.Album + '</a>';
}
context.querySelector('.nowPlayingAlbum').innerHTML = albumName;
context.querySelector('.nowPlayingArtist').innerHTML = artistsSeries;
context.querySelector('.nowPlayingSongName').innerHTML = songName; context.querySelector('.nowPlayingSongName').innerHTML = songName;
} else if (item.Type == 'Episode') { } else if (item.Type == 'Episode') {
if (item.SeasonName != null) { if (item.SeasonName != null) {
var seasonName = item.SeasonName; const seasonName = item.SeasonName;
context.querySelector('.nowPlayingSeason').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeasonId + `&serverId=${nowPlayingServerId}">${seasonName}</a>`; context.querySelector('.nowPlayingSeason').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeasonId + `&serverId=${nowPlayingServerId}">${seasonName}</a>`;
} }
if (item.SeriesName != null) { if (item.SeriesName != null) {
var seriesName = item.SeriesName; const seriesName = item.SeriesName;
if (item.SeriesId != null) { if (item.SeriesId != null) {
context.querySelector('.nowPlayingSerie').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeriesId + `&serverId=${nowPlayingServerId}">${seriesName}</a>`; context.querySelector('.nowPlayingSerie').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeriesId + `&serverId=${nowPlayingServerId}">${seriesName}</a>`;
} else { } else {
@ -170,23 +192,23 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
context.querySelector('.nowPlayingPageTitle').classList.add('hide'); context.querySelector('.nowPlayingPageTitle').classList.add('hide');
} }
var url = item ? seriesImageUrl(item, { const url = item ? seriesImageUrl(item, {
maxHeight: 300 * 2 maxHeight: 300
}) || imageUrl(item, { }) || imageUrl(item, {
maxHeight: 300 * 2 maxHeight: 300
}) : null; }) : null;
let contextButton = context.querySelector('.btnToggleContextMenu'); let contextButton = context.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
const autoFocusContextButton = document.activeElement === contextButton; const autoFocusContextButton = document.activeElement === contextButton;
let contextButtonClone = contextButton.cloneNode(true); const contextButtonClone = contextButton.cloneNode(true);
contextButton.parentNode.replaceChild(contextButtonClone, contextButton); contextButton.parentNode.replaceChild(contextButtonClone, contextButton);
contextButton = context.querySelector('.btnToggleContextMenu'); contextButton = context.querySelector('.btnToggleContextMenu');
if (autoFocusContextButton) { if (autoFocusContextButton) {
contextButton.focus(); contextButton.focus();
} }
const stopPlayback = !!layoutManager.mobile; const stopPlayback = !!layoutManager.mobile;
var options = { const options = {
play: false, play: false,
queue: false, queue: false,
stopPlayback: stopPlayback, stopPlayback: stopPlayback,
@ -194,7 +216,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
openAlbum: false, openAlbum: false,
positionTo: contextButton positionTo: contextButton
}; };
var apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
apiClient.getCurrentUser().then(function (user) { apiClient.getCurrentUser().then(function (user) {
contextButton.addEventListener('click', function () { contextButton.addEventListener('click', function () {
@ -209,8 +231,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
if (item) { if (item) {
backdrop.setBackdrops([item]); backdrop.setBackdrops([item]);
apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
var userData = fullItem.UserData || {}; const userData = fullItem.UserData || {};
var likes = null == userData.Likes ? '' : userData.Likes; const likes = userData.Likes == null ? '' : userData.Likes;
context.querySelector('.nowPlayingPageUserDataButtonsTitle').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('.nowPlayingPageUserDataButtonsTitle').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>'; 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>';
}); });
@ -219,11 +241,11 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
} }
} }
} }
function setImageUrl(context, state, url) { function setImageUrl(context, state, url) {
var item = state.NowPlayingItem; const item = state.NowPlayingItem;
var imgContainer = context.querySelector('.nowPlayingPageImageContainer'); const imgContainer = context.querySelector('.nowPlayingPageImageContainer');
if (url) { if (url) {
imgContainer.innerHTML = '<img class="nowPlayingPageImage" src="' + url + '" />'; imgContainer.innerHTML = '<img class="nowPlayingPageImage" src="' + url + '" />';
@ -237,26 +259,26 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} else { } else {
imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album"></span></button></div>'; imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album"></span></button></div>';
} }
} }
function buttonVisible(btn, enabled) { function buttonVisible(btn, enabled) {
if (enabled) { if (enabled) {
btn.classList.remove('hide'); btn.classList.remove('hide');
} else { } else {
btn.classList.add('hide'); btn.classList.add('hide');
} }
} }
function updateSupportedCommands(context, commands) { function updateSupportedCommands(context, commands) {
var all = context.querySelectorAll('.btnCommand'); const all = context.querySelectorAll('.btnCommand');
for (var i = 0, length = all.length; i < length; i++) { for (let i = 0, length = all.length; i < length; i++) {
var enableButton = -1 !== commands.indexOf(all[i].getAttribute('data-command')); const enableButton = commands.indexOf(all[i].getAttribute('data-command')) !== -1;
all[i].disabled = !enableButton; all[i].disabled = !enableButton;
} }
} }
return function () { export default function () {
function toggleRepeat() { function toggleRepeat() {
switch (playbackManager.getRepeatMode()) { switch (playbackManager.getRepeatMode()) {
case 'RepeatAll': case 'RepeatAll':
@ -272,13 +294,13 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function updatePlayerState(player, context, state) { function updatePlayerState(player, context, state) {
lastPlayerState = state; lastPlayerState = state;
var item = state.NowPlayingItem; const item = state.NowPlayingItem;
var playerInfo = playbackManager.getPlayerInfo(); const playerInfo = playbackManager.getPlayerInfo();
var supportedCommands = playerInfo.supportedCommands; const supportedCommands = playerInfo.supportedCommands;
currentPlayerSupportedCommands = supportedCommands; currentPlayerSupportedCommands = supportedCommands;
var playState = state.PlayState || {}; const playState = state.PlayState || {};
var isSupportedCommands = supportedCommands.includes('DisplayMessage') || supportedCommands.includes('SendString') || supportedCommands.includes('Select'); const isSupportedCommands = supportedCommands.includes('DisplayMessage') || supportedCommands.includes('SendString') || supportedCommands.includes('Select');
buttonVisible(context.querySelector('.btnToggleFullscreen'), item && 'Video' == item.MediaType && supportedCommands.includes('ToggleFullscreen')); buttonVisible(context.querySelector('.btnToggleFullscreen'), item && item.MediaType == 'Video' && supportedCommands.includes('ToggleFullscreen'));
updateAudioTracksDisplay(player, context); updateAudioTracksDisplay(player, context);
updateSubtitleTracksDisplay(player, context); updateSubtitleTracksDisplay(player, context);
@ -306,17 +328,17 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
context.querySelector('.remoteControlSection').classList.add('hide'); context.querySelector('.remoteControlSection').classList.add('hide');
} }
buttonVisible(context.querySelector('.btnStop'), null != item); buttonVisible(context.querySelector('.btnStop'), item != null);
buttonVisible(context.querySelector('.btnNextTrack'), null != item); buttonVisible(context.querySelector('.btnNextTrack'), item != null);
buttonVisible(context.querySelector('.btnPreviousTrack'), null != item); buttonVisible(context.querySelector('.btnPreviousTrack'), item != null);
if (layoutManager.mobile) { if (layoutManager.mobile) {
buttonVisible(context.querySelector('.btnRewind'), false); buttonVisible(context.querySelector('.btnRewind'), false);
buttonVisible(context.querySelector('.btnFastForward'), false); buttonVisible(context.querySelector('.btnFastForward'), false);
} else { } else {
buttonVisible(context.querySelector('.btnRewind'), null != item); buttonVisible(context.querySelector('.btnRewind'), item != null);
buttonVisible(context.querySelector('.btnFastForward'), null != item); buttonVisible(context.querySelector('.btnFastForward'), item != null);
} }
var positionSlider = context.querySelector('.nowPlayingPositionSlider'); const positionSlider = context.querySelector('.nowPlayingPositionSlider');
if (positionSlider && item && item.RunTimeTicks) { if (positionSlider && item && item.RunTimeTicks) {
positionSlider.setKeyboardSteps(userSettings.skipBackLength() * 1000000 / item.RunTimeTicks, positionSlider.setKeyboardSteps(userSettings.skipBackLength() * 1000000 / item.RunTimeTicks,
@ -325,15 +347,15 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
if (positionSlider && !positionSlider.dragging) { if (positionSlider && !positionSlider.dragging) {
positionSlider.disabled = !playState.CanSeek; positionSlider.disabled = !playState.CanSeek;
var isProgressClear = state.MediaSource && null == state.MediaSource.RunTimeTicks; const isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null;
positionSlider.setIsClear(isProgressClear); positionSlider.setIsClear(isProgressClear);
} }
updatePlayPauseState(playState.IsPaused, null != item); updatePlayPauseState(playState.IsPaused, item != null);
updateTimeDisplay(playState.PositionTicks, item ? item.RunTimeTicks : null); updateTimeDisplay(playState.PositionTicks, item ? item.RunTimeTicks : null);
updatePlayerVolumeState(context, playState.IsMuted, playState.VolumeLevel); updatePlayerVolumeState(context, playState.IsMuted, playState.VolumeLevel);
if (item && 'Video' == item.MediaType) { if (item && item.MediaType == 'Video') {
context.classList.remove('hideVideoButtons'); context.classList.remove('hideVideoButtons');
} else { } else {
context.classList.add('hideVideoButtons'); context.classList.add('hideVideoButtons');
@ -345,18 +367,18 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function updateAudioTracksDisplay(player, context) { function updateAudioTracksDisplay(player, context) {
var supportedCommands = currentPlayerSupportedCommands; const supportedCommands = currentPlayerSupportedCommands;
buttonVisible(context.querySelector('.btnAudioTracks'), playbackManager.audioTracks(player).length > 1 && -1 != supportedCommands.indexOf('SetAudioStreamIndex')); buttonVisible(context.querySelector('.btnAudioTracks'), playbackManager.audioTracks(player).length > 1 && supportedCommands.indexOf('SetAudioStreamIndex') != -1);
} }
function updateSubtitleTracksDisplay(player, context) { function updateSubtitleTracksDisplay(player, context) {
var supportedCommands = currentPlayerSupportedCommands; const supportedCommands = currentPlayerSupportedCommands;
buttonVisible(context.querySelector('.btnSubtitles'), playbackManager.subtitleTracks(player).length && -1 != supportedCommands.indexOf('SetSubtitleStreamIndex')); buttonVisible(context.querySelector('.btnSubtitles'), playbackManager.subtitleTracks(player).length && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1);
} }
function updateRepeatModeDisplay(repeatMode) { function updateRepeatModeDisplay(repeatMode) {
var context = dlg; const context = dlg;
let toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton'); const toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
const cssClass = 'buttonActive'; 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;
@ -380,14 +402,14 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function updatePlayerVolumeState(context, isMuted, volumeLevel) { function updatePlayerVolumeState(context, isMuted, volumeLevel) {
var view = context; const view = context;
var supportedCommands = currentPlayerSupportedCommands; const supportedCommands = currentPlayerSupportedCommands;
if (-1 === supportedCommands.indexOf('Mute')) { if (supportedCommands.indexOf('Mute') === -1) {
showMuteButton = false; showMuteButton = false;
} }
if (-1 === supportedCommands.indexOf('SetVolume')) { if (supportedCommands.indexOf('SetVolume') === -1) {
showVolumeSlider = false; showVolumeSlider = false;
} }
@ -414,8 +436,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} else { } else {
buttonMute.classList.toggle('hide', !showMuteButton); buttonMute.classList.toggle('hide', !showMuteButton);
var nowPlayingVolumeSlider = context.querySelector('.nowPlayingVolumeSlider'); const nowPlayingVolumeSlider = context.querySelector('.nowPlayingVolumeSlider');
var nowPlayingVolumeSliderContainer = context.querySelector('.nowPlayingVolumeSliderContainer'); const nowPlayingVolumeSliderContainer = context.querySelector('.nowPlayingVolumeSliderContainer');
if (nowPlayingVolumeSlider) { if (nowPlayingVolumeSlider) {
nowPlayingVolumeSliderContainer.classList.toggle('hide', !showVolumeSlider); nowPlayingVolumeSliderContainer.classList.toggle('hide', !showVolumeSlider);
@ -428,8 +450,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function updatePlayPauseState(isPaused, isActive) { function updatePlayPauseState(isPaused, isActive) {
var context = dlg; const context = dlg;
var btnPlayPause = context.querySelector('.btnPlayPause'); const btnPlayPause = context.querySelector('.btnPlayPause');
const btnPlayPauseIcon = btnPlayPause.querySelector('.material-icons'); const btnPlayPauseIcon = btnPlayPause.querySelector('.material-icons');
btnPlayPauseIcon.classList.remove('play_circle_filled', 'pause_circle_filled'); btnPlayPauseIcon.classList.remove('play_circle_filled', 'pause_circle_filled');
@ -439,12 +461,12 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function updateTimeDisplay(positionTicks, runtimeTicks) { function updateTimeDisplay(positionTicks, runtimeTicks) {
var context = dlg; const context = dlg;
var positionSlider = context.querySelector('.nowPlayingPositionSlider'); const positionSlider = context.querySelector('.nowPlayingPositionSlider');
if (positionSlider && !positionSlider.dragging) { if (positionSlider && !positionSlider.dragging) {
if (runtimeTicks) { if (runtimeTicks) {
var pct = positionTicks / runtimeTicks; let pct = positionTicks / runtimeTicks;
pct *= 100; pct *= 100;
positionSlider.value = pct; positionSlider.value = pct;
} else { } else {
@ -452,8 +474,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
} }
context.querySelector('.positionTime').innerHTML = null == positionTicks ? '--:--' : datetime.getDisplayRunningTime(positionTicks); context.querySelector('.positionTime').innerHTML = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
context.querySelector('.runtime').innerHTML = null != runtimeTicks ? datetime.getDisplayRunningTime(runtimeTicks) : '--:--'; context.querySelector('.runtime').innerHTML = runtimeTicks != null ? datetime.getDisplayRunningTime(runtimeTicks) : '--:--';
} }
function getPlaylistItems(player) { function getPlaylistItems(player) {
@ -462,7 +484,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function loadPlaylist(context, player) { function loadPlaylist(context, player) {
getPlaylistItems(player).then(function (items) { getPlaylistItems(player).then(function (items) {
var html = ''; let html = '';
let favoritesEnabled = true; let favoritesEnabled = true;
if (layoutManager.mobile) { if (layoutManager.mobile) {
if (items.length > 0) { if (items.length > 0) {
@ -486,7 +508,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
dragHandle: true dragHandle: true
}); });
var itemsContainer = context.querySelector('.playlist'); const itemsContainer = context.querySelector('.playlist');
let focusedItemPlaylistId = itemsContainer.querySelector('button:focus'); let focusedItemPlaylistId = itemsContainer.querySelector('button:focus');
itemsContainer.innerHTML = html; itemsContainer.innerHTML = html;
if (focusedItemPlaylistId !== null) { if (focusedItemPlaylistId !== null) {
@ -497,10 +519,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
} }
var playlistItemId = playbackManager.getCurrentPlaylistItemId(player); const playlistItemId = playbackManager.getCurrentPlaylistItemId(player);
if (playlistItemId) { if (playlistItemId) {
var img = itemsContainer.querySelector(`.listItem[data-playlistItemId="${playlistItemId}"] .listItemImage`); const img = itemsContainer.querySelector(`.listItem[data-playlistItemId="${playlistItemId}"] .listItemImage`);
if (img) { if (img) {
img.classList.remove('lazy'); img.classList.remove('lazy');
@ -514,7 +536,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function onPlaybackStart(e, state) { function onPlaybackStart(e, state) {
console.debug('remotecontrol event: ' + e.type); console.debug('remotecontrol event: ' + e.type);
var player = this; const player = this;
onStateChanged.call(player, e, state); onStateChanged.call(player, e, state);
} }
@ -523,12 +545,12 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function onShuffleQueueModeChange(updateView = true) { function onShuffleQueueModeChange(updateView = true) {
let shuffleMode = playbackManager.getQueueShuffleMode(this); const shuffleMode = playbackManager.getQueueShuffleMode(this);
let context = dlg; const context = dlg;
const cssClass = 'buttonActive'; const cssClass = 'buttonActive';
let shuffleButtons = context.querySelectorAll('.btnShuffleQueue'); const shuffleButtons = context.querySelectorAll('.btnShuffleQueue');
for (let shuffleButton of shuffleButtons) { for (const shuffleButton of shuffleButtons) {
switch (shuffleMode) { switch (shuffleMode) {
case 'Shuffle': case 'Shuffle':
shuffleButton.classList.add(cssClass); shuffleButton.classList.add(cssClass);
@ -550,12 +572,12 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function onPlaylistItemRemoved(e, info) { function onPlaylistItemRemoved(e, info) {
var context = dlg; const context = dlg;
if (info !== undefined) { if (info !== undefined) {
var playlistItemIds = info.playlistItemIds; const playlistItemIds = info.playlistItemIds;
for (var i = 0, length = playlistItemIds.length; i < length; i++) { for (let i = 0, length = playlistItemIds.length; i < length; i++) {
var listItem = context.querySelector('.listItem[data-playlistItemId="' + playlistItemIds[i] + '"]'); const listItem = context.querySelector('.listItem[data-playlistItemId="' + playlistItemIds[i] + '"]');
if (listItem) { if (listItem) {
listItem.parentNode.removeChild(listItem); listItem.parentNode.removeChild(listItem);
@ -568,7 +590,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function onPlaybackStopped(e, state) { function onPlaybackStopped(e, state) {
console.debug('remotecontrol event: ' + e.type); console.debug('remotecontrol event: ' + e.type);
var player = this; const player = this;
if (!state.NextMediaType) { if (!state.NextMediaType) {
updatePlayerState(player, dlg, {}); updatePlayerState(player, dlg, {});
@ -581,29 +603,29 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function onStateChanged(event, state) { function onStateChanged(event, state) {
var player = this; const player = this;
updatePlayerState(player, dlg, state); updatePlayerState(player, dlg, state);
onPlaylistUpdate(); onPlaylistUpdate();
} }
function onTimeUpdate(e) { function onTimeUpdate(e) {
var now = new Date().getTime(); const now = new Date().getTime();
if (!(now - lastUpdateTime < 700)) { if (!(now - lastUpdateTime < 700)) {
lastUpdateTime = now; lastUpdateTime = now;
var player = this; const player = this;
currentRuntimeTicks = playbackManager.duration(player); currentRuntimeTicks = playbackManager.duration(player);
updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks); updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks);
} }
} }
function onVolumeChanged(e) { function onVolumeChanged(e) {
var player = this; const player = this;
updatePlayerVolumeState(dlg, player.isMuted(), player.getVolume()); updatePlayerVolumeState(dlg, player.isMuted(), player.getVolume());
} }
function releaseCurrentPlayer() { function releaseCurrentPlayer() {
var player = currentPlayer; const player = currentPlayer;
if (player) { if (player) {
events.off(player, 'playbackstart', onPlaybackStart); events.off(player, 'playbackstart', onPlaybackStart);
@ -624,7 +646,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function bindToPlayer(context, player) { function bindToPlayer(context, player) {
if (releaseCurrentPlayer(), currentPlayer = player, player) { if (releaseCurrentPlayer(), currentPlayer = player, player) {
var state = playbackManager.getPlayerState(player); const state = playbackManager.getPlayerState(player);
onStateChanged.call(player, { onStateChanged.call(player, {
type: 'init' type: 'init'
}, state); }, state);
@ -640,8 +662,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
events.on(player, 'pause', onPlayPauseStateChanged); events.on(player, 'pause', onPlayPauseStateChanged);
events.on(player, 'unpause', onPlayPauseStateChanged); events.on(player, 'unpause', onPlayPauseStateChanged);
events.on(player, 'timeupdate', onTimeUpdate); events.on(player, 'timeupdate', onTimeUpdate);
var playerInfo = playbackManager.getPlayerInfo(); const playerInfo = playbackManager.getPlayerInfo();
var supportedCommands = playerInfo.supportedCommands; const supportedCommands = playerInfo.supportedCommands;
currentPlayerSupportedCommands = supportedCommands; currentPlayerSupportedCommands = supportedCommands;
updateSupportedCommands(context, supportedCommands); updateSupportedCommands(context, supportedCommands);
} }
@ -668,10 +690,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function savePlaylist() { function savePlaylist() {
require(['playlistEditor'], function (playlistEditor) { import('playlistEditor').then(({ default: playlistEditor }) => {
getSaveablePlaylistItems().then(function (items) { getSaveablePlaylistItems().then(function (items) {
var serverId = items.length ? items[0].ServerId : ApiClient.serverId(); const serverId = items.length ? items[0].ServerId : ApiClient.serverId();
new playlistEditor.showEditor({ new playlistEditor({
items: items.map(function (i) { items: items.map(function (i) {
return i.Id; return i.Id;
}), }),
@ -684,10 +706,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function bindEvents(context) { function bindEvents(context) {
var btnCommand = context.querySelectorAll('.btnCommand'); const btnCommand = context.querySelectorAll('.btnCommand');
var positionSlider = context.querySelector('.nowPlayingPositionSlider'); const positionSlider = context.querySelector('.nowPlayingPositionSlider');
for (var i = 0, length = btnCommand.length; i < length; i++) { for (let i = 0, length = btnCommand.length; i < length; i++) {
btnCommand[i].addEventListener('click', onBtnCommandClick); btnCommand[i].addEventListener('click', onBtnCommandClick);
} }
@ -764,22 +786,22 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
}); });
positionSlider.addEventListener('change', function () { positionSlider.addEventListener('change', function () {
var value = this.value; const value = this.value;
if (currentPlayer) { if (currentPlayer) {
var newPercent = parseFloat(value); const newPercent = parseFloat(value);
playbackManager.seekPercent(newPercent, currentPlayer); playbackManager.seekPercent(newPercent, currentPlayer);
} }
}); });
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;
return datetime.getDisplayRunningTime(ticks); return datetime.getDisplayRunningTime(ticks);
@ -792,13 +814,13 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
context.querySelector('.buttonMute').addEventListener('click', function () { context.querySelector('.buttonMute').addEventListener('click', function () {
playbackManager.toggleMute(currentPlayer); playbackManager.toggleMute(currentPlayer);
}); });
var playlistContainer = context.querySelector('.playlist'); const playlistContainer = context.querySelector('.playlist');
playlistContainer.addEventListener('action-remove', function (e) { playlistContainer.addEventListener('action-remove', function (e) {
playbackManager.removeFromPlaylist([e.detail.playlistItemId], currentPlayer); playbackManager.removeFromPlaylist([e.detail.playlistItemId], currentPlayer);
}); });
playlistContainer.addEventListener('itemdrop', function (e) { playlistContainer.addEventListener('itemdrop', function (e) {
var newIndex = e.detail.newIndex; const newIndex = e.detail.newIndex;
var playlistItemId = e.detail.playlistItemId; const playlistItemId = e.detail.playlistItemId;
playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer); playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer);
}); });
context.querySelector('.btnSavePlaylist').addEventListener('click', savePlaylist); context.querySelector('.btnSavePlaylist').addEventListener('click', savePlaylist);
@ -828,7 +850,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function onMessageSubmit(e) { function onMessageSubmit(e) {
var form = e.target; const form = e.target;
playbackManager.sendCommand({ playbackManager.sendCommand({
Name: 'DisplayMessage', Name: 'DisplayMessage',
Arguments: { Arguments: {
@ -838,7 +860,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
}, currentPlayer); }, currentPlayer);
form.querySelector('input').value = ''; form.querySelector('input').value = '';
require(['toast'], function (toast) { import('toast').then(({ default: toast }) => {
toast('Message sent.'); toast('Message sent.');
}); });
@ -848,7 +870,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function onSendStringSubmit(e) { function onSendStringSubmit(e) {
var form = e.target; const form = e.target;
playbackManager.sendCommand({ playbackManager.sendCommand({
Name: 'SendString', Name: 'SendString',
Arguments: { Arguments: {
@ -857,7 +879,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
}, currentPlayer); }, currentPlayer);
form.querySelector('input').value = ''; form.querySelector('input').value = '';
require(['toast'], function (toast) { import('toast').then(({ default: toast }) => {
toast('Text sent.'); toast('Text sent.');
}); });
@ -871,7 +893,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><span class="xlargePaperIconButton material-icons volume_up"></span></button>`; volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><span class="xlargePaperIconButton material-icons volume_up"></span></button>`;
volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>'; volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
volumecontrolHtml += '</div>'; volumecontrolHtml += '</div>';
let optionsSection = context.querySelector('.playlistSectionButton'); const optionsSection = context.querySelector('.playlistSectionButton');
if (!layoutManager.mobile) { if (!layoutManager.mobile) {
context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml); context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml);
optionsSection.classList.remove('align-items-center', 'justify-content-center'); optionsSection.classList.remove('align-items-center', 'justify-content-center');
@ -893,7 +915,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
events.on(playbackManager, 'playerchange', onPlayerChange); events.on(playbackManager, 'playerchange', onPlayerChange);
if (layoutManager.tv) { if (layoutManager.tv) {
var positionSlider = context.querySelector('.nowPlayingPositionSlider'); const positionSlider = context.querySelector('.nowPlayingPositionSlider');
positionSlider.classList.add('focusable'); positionSlider.classList.add('focusable');
positionSlider.enableKeyboardDragging(); positionSlider.enableKeyboardDragging();
} }
@ -909,13 +931,13 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
bindToPlayer(context, playbackManager.getCurrentPlayer()); bindToPlayer(context, playbackManager.getCurrentPlayer());
} }
var dlg; let dlg;
var currentPlayer; let currentPlayer;
var lastPlayerState; let lastPlayerState;
var currentPlayerSupportedCommands = []; let currentPlayerSupportedCommands = [];
var lastUpdateTime = 0; let lastUpdateTime = 0;
var currentRuntimeTicks = 0; let currentRuntimeTicks = 0;
var self = this; const self = this;
self.init = function (ownerView, context) { self.init = function (ownerView, context) {
dlg = context; dlg = context;
@ -929,5 +951,4 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
self.destroy = function () { self.destroy = function () {
onDialogClosed(); onDialogClosed();
}; };
}; }
});

2
src/components/scrollManager.js
View file

@ -251,7 +251,7 @@ import layoutManager from 'layoutManager';
* @return {ScrollerData} Scroller data. * @return {ScrollerData} Scroller data.
*/ */
function getScrollerData(scroller, vertical) { function getScrollerData(scroller, vertical) {
let data = {}; const data = {};
if (!vertical) { if (!vertical) {
data.scrollPos = scroller.scrollLeft; data.scrollPos = scroller.scrollLeft;

184
src/components/skinManager.js
View file

@ -1,184 +0,0 @@
define(['apphost', 'userSettings', 'browser', 'events', 'backdrop', 'globalize', 'require', 'appSettings'], function (appHost, userSettings, browser, events, backdrop, globalize, require, appSettings) {
'use strict';
var themeStyleElement;
var currentThemeId;
function unloadTheme() {
var elem = themeStyleElement;
if (elem) {
elem.parentNode.removeChild(elem);
themeStyleElement = null;
currentThemeId = null;
}
}
function loadUserSkin(options) {
options = options || {};
if (options.start) {
Emby.Page.invokeShortcut(options.start);
} else {
Emby.Page.goHome();
}
}
function getThemes() {
return [{
name: 'Apple TV',
id: 'appletv'
}, {
name: 'Blue Radiance',
id: 'blueradiance'
}, {
name: 'Dark',
id: 'dark',
isDefault: true,
isDefaultServerDashboard: true
}, {
name: 'Light',
id: 'light'
}, {
name: 'Purple Haze',
id: 'purplehaze'
}, {
name: 'Windows Media Center',
id: 'wmc'
}];
}
var skinManager = {
getThemes: getThemes,
loadUserSkin: loadUserSkin
};
function getThemeStylesheetInfo(id, isDefaultProperty) {
var themes = skinManager.getThemes();
var defaultTheme;
var selectedTheme;
for (var i = 0, length = themes.length; i < length; i++) {
var theme = themes[i];
if (theme[isDefaultProperty]) {
defaultTheme = theme;
}
if (id === theme.id) {
selectedTheme = theme;
}
}
selectedTheme = selectedTheme || defaultTheme;
return {
stylesheetPath: require.toUrl('themes/' + selectedTheme.id + '/theme.css'),
themeId: selectedTheme.id
};
}
var themeResources = {};
var lastSound = 0;
var currentSound;
function loadThemeResources(id) {
lastSound = 0;
if (currentSound) {
currentSound.stop();
currentSound = null;
}
backdrop.clearBackdrop();
}
function onThemeLoaded() {
document.documentElement.classList.remove('preload');
try {
var color = getComputedStyle(document.querySelector('.skinHeader')).getPropertyValue('background-color');
if (color) {
appHost.setThemeColor(color);
}
} catch (err) {
console.error('error setting theme color: ' + err);
}
}
skinManager.setTheme = function (id, context) {
return new Promise(function (resolve, reject) {
if (currentThemeId && currentThemeId === id) {
resolve();
return;
}
var isDefaultProperty = context === 'serverdashboard' ? 'isDefaultServerDashboard' : 'isDefault';
var info = getThemeStylesheetInfo(id, isDefaultProperty);
if (currentThemeId && currentThemeId === info.themeId) {
resolve();
return;
}
var linkUrl = info.stylesheetPath;
unloadTheme();
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.onload = function () {
onThemeLoaded();
resolve();
};
link.setAttribute('href', linkUrl);
document.head.appendChild(link);
themeStyleElement = link;
currentThemeId = info.themeId;
loadThemeResources(info.themeId);
onViewBeforeShow({});
});
};
function onViewBeforeShow(e) {
if (e.detail && e.detail.type === 'video-osd') {
// This removes the space that the scrollbar takes while playing a video
document.body.classList.remove('force-scroll');
return;
}
if (themeResources.backdrop) {
backdrop.setBackdrop(themeResources.backdrop);
}
if (!browser.mobile && userSettings.enableThemeSongs()) {
if (lastSound === 0) {
if (themeResources.themeSong) {
playSound(themeResources.themeSong);
}
} else if ((new Date().getTime() - lastSound) > 30000) {
if (themeResources.effect) {
playSound(themeResources.effect);
}
}
}
// This keeps the scrollbar always present in all pages, so we avoid clipping while switching between pages
// that need the scrollbar and pages that don't.
document.body.classList.add('force-scroll');
}
document.addEventListener('viewshow', onViewBeforeShow);
function playSound(path, volume) {
lastSound = new Date().getTime();
require(['howler'], function (howler) {
/* globals Howl */
try {
var sound = new Howl({
src: [path],
volume: volume || 0.1
});
sound.play();
currentSound = sound;
} catch (err) {
console.error('error playing sound: ' + err);
}
});
}
return skinManager;
});

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

@ -2,28 +2,37 @@
* Image viewer component * Image viewer component
* @module components/slideshow/slideshow * @module components/slideshow/slideshow
*/ */
define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'focusManager', 'browser', 'apphost', 'dom', 'css!./style', 'material-icons', 'paper-icon-button-light'], function (dialogHelper, inputManager, connectionManager, layoutManager, focusManager, browser, appHost, dom) { import dialogHelper from 'dialogHelper';
'use strict'; import inputManager from 'inputManager';
import connectionManager from 'connectionManager';
import layoutManager from 'layoutManager';
import focusManager from 'focusManager';
import browser from 'browser';
import appHost from 'apphost';
import dom from 'dom';
import 'css!./style';
import 'material-icons';
import 'paper-icon-button-light';
/** /**
* Name of transition event. * Name of transition event.
*/ */
const transitionEndEventName = dom.whichTransitionEvent(); const transitionEndEventName = dom.whichTransitionEvent();
/** /**
* Flag to use fake image to fix blurry zoomed image. * Flag to use fake image to fix blurry zoomed image.
* At least WebKit doesn't restore quality for zoomed images. * At least WebKit doesn't restore quality for zoomed images.
*/ */
const useFakeZoomImage = browser.safari; const useFakeZoomImage = browser.safari;
/** /**
* Retrieves an item's image URL from the API. * Retrieves an item's image URL from the API.
* @param {object|string} item - Item used to generate the image URL. * @param {object|string} item - Item used to generate the image URL.
* @param {object} options - Options of the image. * @param {object} options - Options of the image.
* @param {object} apiClient - API client instance used to retrieve the image. * @param {object} apiClient - API client instance used to retrieve the image.
* @returns {null|string} URL of the item's image. * @returns {null|string} URL of the item's image.
*/ */
function getImageUrl(item, options, apiClient) { function getImageUrl(item, options, apiClient) {
options = options || {}; options = options || {};
options.type = options.type || 'Primary'; options.type = options.type || 'Primary';
@ -44,16 +53,16 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
return null; return null;
} }
/** /**
* Retrieves a backdrop's image URL from the API. * Retrieves a backdrop's image URL from the API.
* @param {object} item - Item used to generate the image URL. * @param {object} item - Item used to generate the image URL.
* @param {object} options - Options of the image. * @param {object} options - Options of the image.
* @param {object} apiClient - API client instance used to retrieve the image. * @param {object} apiClient - API client instance used to retrieve the image.
* @returns {null|string} URL of the item's backdrop. * @returns {null|string} URL of the item's backdrop.
*/ */
function getBackdropImageUrl(item, options, apiClient) { function getBackdropImageUrl(item, options, apiClient) {
options = options || {}; options = options || {};
options.type = options.type || 'Backdrop'; options.type = options.type || 'Backdrop';
@ -68,16 +77,16 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
return null; return null;
} }
/** /**
* Dispatches a request for an item's image to its respective handler. * Dispatches a request for an item's image to its respective handler.
* @param {object} item - Item used to generate the image URL. * @param {object} item - Item used to generate the image URL.
* @returns {string} URL of the item's image. * @returns {string} URL of the item's image.
*/ */
function getImgUrl(item, user) { function getImgUrl(item, user) {
var apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
var imageOptions = {}; const imageOptions = {};
if (item.BackdropImageTags && item.BackdropImageTags.length) { if (item.BackdropImageTags && item.BackdropImageTags.length) {
return getBackdropImageUrl(item, imageOptions, apiClient); return getBackdropImageUrl(item, imageOptions, apiClient);
@ -88,9 +97,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
imageOptions.type = 'Primary'; imageOptions.type = 'Primary';
return getImageUrl(item, imageOptions, apiClient); return getImageUrl(item, imageOptions, apiClient);
} }
} }
/** /**
* Generates a button using the specified icon, classes and properties. * Generates a button using the specified icon, classes and properties.
* @param {string} icon - Name of the material icon on the button * @param {string} icon - Name of the material icon on the button
* @param {string} cssClass - CSS classes to assign to the button * @param {string} cssClass - CSS classes to assign to the button
@ -98,36 +107,36 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* @param {boolean} autoFocus - Flag to set the autofocus attribute on the button. * @param {boolean} autoFocus - Flag to set the autofocus attribute on the button.
* @returns {string} The HTML markup of the button. * @returns {string} The HTML markup of the button.
*/ */
function getIcon(icon, cssClass, canFocus, autoFocus) { function getIcon(icon, cssClass, canFocus, autoFocus) {
var tabIndex = canFocus ? '' : ' tabindex="-1"'; const tabIndex = canFocus ? '' : ' tabindex="-1"';
autoFocus = autoFocus ? ' autofocus' : ''; autoFocus = autoFocus ? ' autofocus' : '';
return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><span class="material-icons slideshowButtonIcon ' + icon + '"></span></button>'; return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><span class="material-icons slideshowButtonIcon ' + icon + '"></span></button>';
} }
/** /**
* Sets the viewport meta tag to enable or disable scaling by the user. * Sets the viewport meta tag to enable or disable scaling by the user.
* @param {boolean} scalable - Flag to set the scalability of the viewport. * @param {boolean} scalable - Flag to set the scalability of the viewport.
*/ */
function setUserScalable(scalable) { function setUserScalable(scalable) {
try { try {
appHost.setUserScalable(scalable); appHost.setUserScalable(scalable);
} catch (err) { } catch (err) {
console.error('error in appHost.setUserScalable: ' + err); console.error('error in appHost.setUserScalable: ' + err);
} }
} }
return function (options) { export default function (options) {
var self = this; const self = this;
/** Initialized instance of Swiper. */ /** Initialized instance of Swiper. */
var swiperInstance; let swiperInstance;
/** Initialized instance of the dialog containing the Swiper instance. */ /** Initialized instance of the dialog containing the Swiper instance. */
var dialog; let dialog;
/** Options of the slideshow components */ /** Options of the slideshow components */
var currentOptions; let currentOptions;
/** ID of the timeout used to hide the OSD. */ /** ID of the timeout used to hide the OSD. */
var hideTimeout; let hideTimeout;
/** Last coordinates of the mouse pointer. */ /** Last coordinates of the mouse pointer. */
var lastMouseMoveData; let lastMouseMoveData;
/** /**
* Creates the HTML markup for the dialog and the OSD. * Creates the HTML markup for the dialog and the OSD.
@ -147,12 +156,12 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
dialog.classList.add('slideshowDialog'); dialog.classList.add('slideshowDialog');
var html = ''; let html = '';
html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>'; html += '<div class="slideshowSwiperContainer"><div class="swiper-wrapper"></div></div>';
if (options.interactive && !layoutManager.tv) { if (options.interactive && !layoutManager.tv) {
var actionButtonsOnTop = layoutManager.mobile; const actionButtonsOnTop = layoutManager.mobile;
html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton hide-mouse-idle-tv', false); html += getIcon('keyboard_arrow_left', 'btnSlideshowPrevious slideshowButton hide-mouse-idle-tv', false);
html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false); html += getIcon('keyboard_arrow_right', 'btnSlideshowNext slideshowButton hide-mouse-idle-tv', false);
@ -193,17 +202,17 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
dialogHelper.close(dialog); dialogHelper.close(dialog);
}); });
var btnPause = dialog.querySelector('.btnSlideshowPause'); const btnPause = dialog.querySelector('.btnSlideshowPause');
if (btnPause) { if (btnPause) {
btnPause.addEventListener('click', playPause); btnPause.addEventListener('click', playPause);
} }
var btnDownload = dialog.querySelector('.btnDownload'); const btnDownload = dialog.querySelector('.btnDownload');
if (btnDownload) { if (btnDownload) {
btnDownload.addEventListener('click', download); btnDownload.addEventListener('click', download);
} }
var btnShare = dialog.querySelector('.btnShare'); const btnShare = dialog.querySelector('.btnShare');
if (btnShare) { if (btnShare) {
btnShare.addEventListener('click', share); btnShare.addEventListener('click', share);
} }
@ -228,7 +237,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Handles OSD changes when the autoplay is started. * Handles OSD changes when the autoplay is started.
*/ */
function onAutoplayStart() { function onAutoplayStart() {
var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons'); const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
if (btnSlideshowPause) { if (btnSlideshowPause) {
btnSlideshowPause.classList.replace('play_arrow', 'pause'); btnSlideshowPause.classList.replace('play_arrow', 'pause');
} }
@ -238,7 +247,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Handles OSD changes when the autoplay is stopped. * Handles OSD changes when the autoplay is stopped.
*/ */
function onAutoplayStop() { function onAutoplayStop() {
var btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons'); const btnSlideshowPause = dialog.querySelector('.btnSlideshowPause .material-icons');
if (btnSlideshowPause) { if (btnSlideshowPause) {
btnSlideshowPause.classList.replace('pause', 'play_arrow'); btnSlideshowPause.classList.replace('pause', 'play_arrow');
} }
@ -285,14 +294,14 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* @param {Object} options - Options used to initialize the Swiper instance. * @param {Object} options - Options used to initialize the Swiper instance.
*/ */
function loadSwiper(dialog, options) { function loadSwiper(dialog, options) {
var slides; let slides;
if (currentOptions.slides) { if (currentOptions.slides) {
slides = currentOptions.slides; slides = currentOptions.slides;
} else { } else {
slides = currentOptions.items; slides = currentOptions.items;
} }
require(['swiper'], function (Swiper) { import('swiper').then(({default: Swiper}) => {
swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), { swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), {
direction: 'horizontal', direction: 'horizontal',
// Loop is disabled due to the virtual slides option not supporting it. // Loop is disabled due to the virtual slides option not supporting it.
@ -366,7 +375,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* @returns {string} The HTML markup of the slide. * @returns {string} The HTML markup of the slide.
*/ */
function getSwiperSlideHtmlFromSlide(item) { function getSwiperSlideHtmlFromSlide(item) {
var html = ''; let html = '';
html += '<div class="swiper-slide" data-original="' + item.originalImage + '" data-itemid="' + item.Id + '" data-serverid="' + item.ServerId + '">'; html += '<div class="swiper-slide" data-original="' + item.originalImage + '" data-itemid="' + item.Id + '" data-serverid="' + item.ServerId + '">';
html += '<div class="swiper-zoom-container">'; html += '<div class="swiper-zoom-container">';
if (useFakeZoomImage) { if (useFakeZoomImage) {
@ -401,7 +410,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
*/ */
function getCurrentImageInfo() { function getCurrentImageInfo() {
if (swiperInstance) { if (swiperInstance) {
var slide = document.querySelector('.swiper-slide-active'); const slide = document.querySelector('.swiper-slide-active');
if (slide) { if (slide) {
return { return {
@ -421,9 +430,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Starts a download for the currently displayed slide. * Starts a download for the currently displayed slide.
*/ */
function download() { function download() {
var imageInfo = getCurrentImageInfo(); const imageInfo = getCurrentImageInfo();
require(['fileDownloader'], function (fileDownloader) { import('fileDownloader').then(({default: fileDownloader}) => {
fileDownloader.download([imageInfo]); fileDownloader.download([imageInfo]);
}); });
} }
@ -432,7 +441,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Shares the currently displayed slide using the browser's built-in sharing feature. * Shares the currently displayed slide using the browser's built-in sharing feature.
*/ */
function share() { function share() {
var imageInfo = getCurrentImageInfo(); const imageInfo = getCurrentImageInfo();
navigator.share({ navigator.share({
url: imageInfo.shareUrl url: imageInfo.shareUrl
@ -461,7 +470,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Toggles the autoplay feature of the Swiper instance. * Toggles the autoplay feature of the Swiper instance.
*/ */
function playPause() { function playPause() {
var paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause'); const paused = !dialog.querySelector('.btnSlideshowPause .material-icons').classList.contains('pause');
if (paused) { if (paused) {
play(); play();
} else { } else {
@ -473,7 +482,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Closes the dialog and destroys the Swiper instance. * Closes the dialog and destroys the Swiper instance.
*/ */
function onDialogClosed() { function onDialogClosed() {
var swiper = swiperInstance; const swiper = swiperInstance;
if (swiper) { if (swiper) {
swiper.destroy(true, true); swiper.destroy(true, true);
swiperInstance = null; swiperInstance = null;
@ -491,7 +500,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Shows the OSD. * Shows the OSD.
*/ */
function showOsd() { function showOsd() {
var bottom = dialog.querySelector('.slideshowBottomBar'); const bottom = dialog.querySelector('.slideshowBottomBar');
if (bottom) { if (bottom) {
slideUpToShow(bottom); slideUpToShow(bottom);
startHideTimer(); startHideTimer();
@ -502,7 +511,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* Hides the OSD. * Hides the OSD.
*/ */
function hideOsd() { function hideOsd() {
var bottom = dialog.querySelector('.slideshowBottomBar'); const bottom = dialog.querySelector('.slideshowBottomBar');
if (bottom) { if (bottom) {
slideDownToHide(bottom); slideDownToHide(bottom);
} }
@ -537,7 +546,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
element.classList.remove('hide'); element.classList.remove('hide');
var onFinish = function () { const onFinish = function () {
focusManager.focus(element.querySelector('.btnSlideshowPause')); focusManager.focus(element.querySelector('.btnSlideshowPause'));
}; };
@ -547,11 +556,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
requestAnimationFrame(function () { requestAnimationFrame(function () {
var keyframes = [ const keyframes = [
{ transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 0 }, { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 0 },
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 } { transform: 'translate3d(0,0,0)', opacity: '1', offset: 1 }
]; ];
var timing = { duration: 300, iterations: 1, easing: 'ease-out' }; const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
element.animate(keyframes, timing).onfinish = onFinish; element.animate(keyframes, timing).onfinish = onFinish;
}); });
} }
@ -565,7 +574,7 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
return; return;
} }
var onFinish = function () { const onFinish = function () {
element.classList.add('hide'); element.classList.add('hide');
}; };
@ -575,11 +584,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
} }
requestAnimationFrame(function () { requestAnimationFrame(function () {
var keyframes = [ const keyframes = [
{ transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 }, { transform: 'translate3d(0,0,0)', opacity: '1', offset: 0 },
{ transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 1 } { transform: 'translate3d(0,' + element.offsetHeight + 'px,0)', opacity: '.3', offset: 1 }
]; ];
var timing = { duration: 300, iterations: 1, easing: 'ease-out' }; const timing = { duration: 300, iterations: 1, easing: 'ease-out' };
element.animate(keyframes, timing).onfinish = onFinish; element.animate(keyframes, timing).onfinish = onFinish;
}); });
} }
@ -589,13 +598,13 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
* @param {Event} event - Pointer movement event. * @param {Event} event - Pointer movement event.
*/ */
function onPointerMove(event) { function onPointerMove(event) {
var pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'); const pointerType = event.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
if (pointerType === 'mouse') { if (pointerType === 'mouse') {
var eventX = event.screenX || 0; const eventX = event.screenX || 0;
var eventY = event.screenY || 0; const eventY = event.screenY || 0;
var obj = lastMouseMoveData; const obj = lastMouseMoveData;
if (!obj) { if (!obj) {
lastMouseMoveData = { lastMouseMoveData = {
x: eventX, x: eventX,
@ -661,5 +670,4 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
dialogHelper.close(dialog); dialogHelper.close(dialog);
} }
}; };
}; }
});

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

@ -1,46 +1,51 @@
define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'globalize', 'userSettings', 'emby-select', 'paper-icon-button-light', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dom, focusManager, dialogHelper, loading, layoutManager, connectionManager, globalize, userSettings) { import dialogHelper from 'dialogHelper';
'use strict'; import layoutManager from 'layoutManager';
import globalize from 'globalize';
import * as userSettings from 'userSettings';
import 'emby-select';
import 'paper-icon-button-light';
import 'material-icons';
import 'css!./../formdialog';
import 'emby-button';
import 'flexStyles';
function onSubmit(e) { function onSubmit(e) {
e.preventDefault(); e.preventDefault();
return false; return false;
} }
function initEditor(context, settings) { function initEditor(context, settings) {
context.querySelector('form').addEventListener('submit', onSubmit); context.querySelector('form').addEventListener('submit', onSubmit);
context.querySelector('.selectSortOrder').value = settings.sortOrder; context.querySelector('.selectSortOrder').value = settings.sortOrder;
context.querySelector('.selectSortBy').value = settings.sortBy; context.querySelector('.selectSortBy').value = settings.sortBy;
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(({default: scrollHelper}) => {
var fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
function fillSortBy(context, options) { function fillSortBy(context, options) {
var selectSortBy = context.querySelector('.selectSortBy'); const selectSortBy = context.querySelector('.selectSortBy');
selectSortBy.innerHTML = options.map(function (o) { selectSortBy.innerHTML = options.map(function (o) {
return '<option value="' + o.value + '">' + o.name + '</option>'; return '<option value="' + o.value + '">' + o.name + '</option>';
}).join(''); }).join('');
} }
function saveValues(context, settings, settingsKey) { function saveValues(context, settingsKey) {
userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value); userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value); userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
} }
function SortMenu() { class SortMenu {
show(options) {
}
SortMenu.prototype.show = function (options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['text!./sortmenu.template.html'], function (template) { import('text!./sortmenu.template.html').then(({default: template}) => {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -51,11 +56,11 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
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 += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>'; html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
@ -78,7 +83,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
centerFocus(dlg.querySelector('.formDialogContent'), false, true); centerFocus(dlg.querySelector('.formDialogContent'), false, true);
} }
var submitted; let submitted;
dlg.querySelector('form').addEventListener('change', function () { dlg.querySelector('form').addEventListener('change', function () {
submitted = true; submitted = true;
@ -90,7 +95,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
} }
if (submitted) { if (submitted) {
saveValues(dlg, options.settings, options.settingsKey); saveValues(dlg, options.settingsKey);
resolve(); resolve();
return; return;
} }
@ -99,7 +104,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
}); });
}); });
}); });
}; }
}
return SortMenu; export default SortMenu;
});

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

@ -1,13 +1,27 @@
define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', 'connectionManager', 'loading', 'focusManager', 'dom', 'apphost', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'css!./subtitleeditor', 'emby-button', 'flexStyles'], function (dialogHelper, require, layoutManager, globalize, userSettings, connectionManager, loading, focusManager, dom, appHost) { import dialogHelper from 'dialogHelper';
'use strict'; import layoutManager from 'layoutManager';
import globalize from 'globalize';
import * as userSettings from 'userSettings';
import connectionManager from 'connectionManager';
import loading from 'loading';
import focusManager from 'focusManager';
import dom from 'dom';
import 'emby-select';
import 'listViewStyle';
import 'paper-icon-button-light';
import 'css!./../formdialog';
import 'material-icons';
import 'css!./subtitleeditor';
import 'emby-button';
import 'flexStyles';
var currentItem; let currentItem;
var hasChanges; let hasChanges;
function downloadRemoteSubtitles(context, id) { function downloadRemoteSubtitles(context, id) {
var url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id; let url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
var apiClient = connectionManager.getApiClient(currentItem.ServerId); let apiClient = connectionManager.getApiClient(currentItem.ServerId);
apiClient.ajax({ apiClient.ajax({
type: 'POST', type: 'POST',
@ -16,19 +30,19 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}).then(function () { }).then(function () {
hasChanges = true; hasChanges = true;
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageDownloadQueued')); toast(globalize.translate('MessageDownloadQueued'));
}); });
focusManager.autoFocus(context); focusManager.autoFocus(context);
}); });
} }
function deleteLocalSubtitle(context, index) { function deleteLocalSubtitle(context, index) {
var msg = globalize.translate('MessageAreYouSureDeleteSubtitles'); let msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
require(['confirm'], function (confirm) { import('confirm').then(({default: confirm}) => {
confirm.default({ confirm({
title: globalize.translate('ConfirmDeletion'), title: globalize.translate('ConfirmDeletion'),
text: msg, text: msg,
@ -38,10 +52,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}).then(function () { }).then(function () {
loading.show(); loading.show();
var itemId = currentItem.Id; let itemId = currentItem.Id;
var url = 'Videos/' + itemId + '/Subtitles/' + index; let url = 'Videos/' + itemId + '/Subtitles/' + index;
var apiClient = connectionManager.getApiClient(currentItem.ServerId); let apiClient = connectionManager.getApiClient(currentItem.ServerId);
apiClient.ajax({ apiClient.ajax({
@ -54,16 +68,16 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}); });
}); });
}); });
} }
function fillSubtitleList(context, item) { function fillSubtitleList(context, item) {
var streams = item.MediaStreams || []; let streams = item.MediaStreams || [];
var subs = streams.filter(function (s) { let subs = streams.filter(function (s) {
return s.Type === 'Subtitle'; return s.Type === 'Subtitle';
}); });
var html = ''; let html = '';
if (subs.length) { if (subs.length) {
html += '<h2>' + globalize.translate('MySubtitles') + '</h2>'; html += '<h2>' + globalize.translate('MySubtitles') + '</h2>';
@ -71,10 +85,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '<div>'; html += '<div>';
html += subs.map(function (s) { html += subs.map(function (s) {
var itemHtml = ''; let itemHtml = '';
var tagName = layoutManager.tv ? 'button' : 'div'; let tagName = layoutManager.tv ? 'button' : 'div';
var className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border'; let className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
if (layoutManager.tv) { if (layoutManager.tv) {
className += ' listItem-focusscale listItem-button'; className += ' listItem-focusscale listItem-button';
@ -113,7 +127,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '</div>'; html += '</div>';
} }
var elem = context.querySelector('.subtitleList'); let elem = context.querySelector('.subtitleList');
if (subs.length) { if (subs.length) {
elem.classList.remove('hide'); elem.classList.remove('hide');
@ -121,32 +135,32 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
elem.classList.add('hide'); elem.classList.add('hide');
} }
elem.innerHTML = html; elem.innerHTML = html;
} }
function fillLanguages(context, apiClient, languages) { function fillLanguages(context, apiClient, languages) {
var selectLanguage = context.querySelector('#selectLanguage'); let selectLanguage = context.querySelector('#selectLanguage');
selectLanguage.innerHTML = languages.map(function (l) { selectLanguage.innerHTML = languages.map(function (l) {
return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>'; return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
}); });
var lastLanguage = userSettings.get('subtitleeditor-language'); let lastLanguage = userSettings.get('subtitleeditor-language');
if (lastLanguage) { if (lastLanguage) {
selectLanguage.value = lastLanguage; selectLanguage.value = lastLanguage;
} else { } else {
apiClient.getCurrentUser().then(function (user) { apiClient.getCurrentUser().then(function (user) {
var lang = user.Configuration.SubtitleLanguagePreference; let lang = user.Configuration.SubtitleLanguagePreference;
if (lang) { if (lang) {
selectLanguage.value = lang; selectLanguage.value = lang;
} }
}); });
} }
} }
function renderSearchResults(context, results) { function renderSearchResults(context, results) {
var lastProvider = ''; let lastProvider = '';
var html = ''; let html = '';
if (!results.length) { if (!results.length) {
context.querySelector('.noSearchResults').classList.remove('hide'); context.querySelector('.noSearchResults').classList.remove('hide');
@ -157,10 +171,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
context.querySelector('.noSearchResults').classList.add('hide'); context.querySelector('.noSearchResults').classList.add('hide');
for (var i = 0, length = results.length; i < length; i++) { for (let i = 0, length = results.length; i < length; i++) {
var result = results[i]; let result = results[i];
var provider = result.ProviderName; let provider = result.ProviderName;
if (provider !== lastProvider) { if (provider !== lastProvider) {
if (i > 0) { if (i > 0) {
@ -171,8 +185,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
lastProvider = provider; lastProvider = provider;
} }
var tagName = layoutManager.tv ? 'button' : 'div'; let tagName = layoutManager.tv ? 'button' : 'div';
var className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border'; let className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
if (layoutManager.tv) { if (layoutManager.tv) {
className += ' listItem-focusscale listItem-button'; className += ' listItem-focusscale listItem-button';
} }
@ -181,7 +195,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '<span class="listItemIcon material-icons closed_caption"></span>'; html += '<span class="listItemIcon material-icons closed_caption"></span>';
var bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line'; let bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
html += '<div class="listItemBody ' + bodyClass + '">'; html += '<div class="listItemBody ' + bodyClass + '">';
@ -218,34 +232,34 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '</div>'; html += '</div>';
} }
var elem = context.querySelector('.subtitleResults'); let elem = context.querySelector('.subtitleResults');
elem.innerHTML = html; elem.innerHTML = html;
loading.hide(); loading.hide();
} }
function searchForSubtitles(context, language) { function searchForSubtitles(context, language) {
userSettings.set('subtitleeditor-language', language); userSettings.set('subtitleeditor-language', language);
loading.show(); loading.show();
var apiClient = connectionManager.getApiClient(currentItem.ServerId); let apiClient = connectionManager.getApiClient(currentItem.ServerId);
var url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language); let url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
apiClient.getJSON(url).then(function (results) { apiClient.getJSON(url).then(function (results) {
renderSearchResults(context, results); renderSearchResults(context, results);
}); });
} }
function reload(context, apiClient, itemId) { function reload(context, apiClient, itemId) {
context.querySelector('.noSearchResults').classList.add('hide'); context.querySelector('.noSearchResults').classList.add('hide');
function onGetItem(item) { function onGetItem(item) {
currentItem = item; currentItem = item;
fillSubtitleList(context, item); fillSubtitleList(context, item);
var file = item.Path || ''; let file = item.Path || '';
var index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\')); let index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
if (index > -1) { if (index > -1) {
file = file.substring(index + 1); file = file.substring(index + 1);
} }
@ -266,56 +280,56 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
} else { } else {
onGetItem(itemId); onGetItem(itemId);
} }
} }
function onSearchSubmit(e) { function onSearchSubmit(e) {
var form = this; let form = this;
var lang = form.querySelector('#selectLanguage', form).value; let lang = form.querySelector('#selectLanguage', form).value;
searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang); searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
e.preventDefault(); e.preventDefault();
return false; return false;
} }
function onSubtitleListClick(e) { function onSubtitleListClick(e) {
var btnDelete = dom.parentWithClass(e.target, 'btnDelete'); let btnDelete = dom.parentWithClass(e.target, 'btnDelete');
if (btnDelete) { if (btnDelete) {
var index = btnDelete.getAttribute('data-index'); let index = btnDelete.getAttribute('data-index');
var context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog'); let context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
deleteLocalSubtitle(context, index); deleteLocalSubtitle(context, index);
} }
} }
function onSubtitleResultsClick(e) { function onSubtitleResultsClick(e) {
var subtitleId; let subtitleId;
var context; let context;
var btnOptions = dom.parentWithClass(e.target, 'btnOptions'); let btnOptions = dom.parentWithClass(e.target, 'btnOptions');
if (btnOptions) { if (btnOptions) {
subtitleId = btnOptions.getAttribute('data-subid'); subtitleId = btnOptions.getAttribute('data-subid');
context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog'); context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
showDownloadOptions(btnOptions, context, subtitleId); showDownloadOptions(btnOptions, context, subtitleId);
} }
var btnDownload = dom.parentWithClass(e.target, 'btnDownload'); let btnDownload = dom.parentWithClass(e.target, 'btnDownload');
if (btnDownload) { if (btnDownload) {
subtitleId = btnDownload.getAttribute('data-subid'); subtitleId = btnDownload.getAttribute('data-subid');
context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog'); context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
downloadRemoteSubtitles(context, subtitleId); downloadRemoteSubtitles(context, subtitleId);
} }
} }
function showDownloadOptions(button, context, subtitleId) { function showDownloadOptions(button, context, subtitleId) {
var items = []; let items = [];
items.push({ items.push({
name: globalize.translate('Download'), name: globalize.translate('Download'),
id: 'download' id: 'download'
}); });
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({ actionsheet.show({
items: items, items: items,
positionTo: button positionTo: button
@ -330,21 +344,21 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
} }
}); });
}); });
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(({default: scrollHelper}) => {
var fn = on ? 'on' : 'off'; let fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
function showEditorInternal(itemId, serverId, template) { function showEditorInternal(itemId, serverId, template) {
hasChanges = false; hasChanges = false;
var apiClient = connectionManager.getApiClient(serverId); let apiClient = connectionManager.getApiClient(serverId);
return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
var dialogOptions = { let dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -355,7 +369,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); let dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('subtitleEditorDialog'); dlg.classList.add('subtitleEditorDialog');
@ -366,7 +380,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit); dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
var btnSubmit = dlg.querySelector('.btnSubmit'); let btnSubmit = dlg.querySelector('.btnSubmit');
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.formDialogContent'), false, true); centerFocus(dlg.querySelector('.formDialogContent'), false, true);
@ -375,7 +389,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
btnSubmit.classList.add('hide'); btnSubmit.classList.add('hide');
} }
var editorContent = dlg.querySelector('.formDialogContent'); let editorContent = dlg.querySelector('.formDialogContent');
dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick); dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick); dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
@ -406,19 +420,18 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
reload(editorContent, apiClient, item); reload(editorContent, apiClient, item);
}); });
}); });
} }
function showEditor(itemId, serverId) { function showEditor(itemId, serverId) {
loading.show(); loading.show();
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['text!./subtitleeditor.template.html'], function (template) { import('text!./subtitleeditor.template.html').then(({default: template}) => {
showEditorInternal(itemId, serverId, template).then(resolve, reject); showEditorInternal(itemId, serverId, template).then(resolve, reject);
}); });
}); });
} }
return { export default {
show: showEditor show: showEditor
}; };
});

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

@ -3,31 +3,9 @@
* @module components/subtitleSettings/subtitleAppearanceHelper * @module components/subtitleSettings/subtitleAppearanceHelper
*/ */
function getTextStyles(settings, isCue) { function getTextStyles(settings, preview) {
let list = []; const list = [];
if (isCue) {
switch (settings.textSize || '') {
case 'smaller':
list.push({ name: 'font-size', value: '.5em' });
break;
case 'small':
list.push({ name: 'font-size', value: '.7em' });
break;
case 'large':
list.push({ name: 'font-size', value: '1.3em' });
break;
case 'larger':
list.push({ name: 'font-size', value: '1.72em' });
break;
case 'extralarge':
list.push({ name: 'font-size', value: '2em' });
break;
default:
case 'medium':
break;
}
} else {
switch (settings.textSize || '') { switch (settings.textSize || '') {
case 'smaller': case 'smaller':
list.push({ name: 'font-size', value: '.8em' }); list.push({ name: 'font-size', value: '.8em' });
@ -49,7 +27,6 @@ function getTextStyles(settings, isCue) {
list.push({ name: 'font-size', value: '1.36em' }); list.push({ name: 'font-size', value: '1.36em' });
break; break;
} }
}
switch (settings.dropShadow || '') { switch (settings.dropShadow || '') {
case 'raised': case 'raised':
@ -111,26 +88,56 @@ function getTextStyles(settings, isCue) {
break; break;
} }
if (!preview) {
const pos = parseInt(settings.verticalPosition, 10);
const lineHeight = 1.35; // FIXME: It is better to read this value from element
const line = Math.abs(pos * lineHeight);
if (pos < 0) {
list.push({ name: 'min-height', value: `${line}em` });
list.push({ name: 'margin-top', value: '' });
} else {
list.push({ name: 'min-height', value: '' });
list.push({ name: 'margin-top', value: `${line}em` });
}
}
return list; return list;
} }
export function getStyles(settings, isCue) { function getWindowStyles(settings, preview) {
const list = [];
if (!preview) {
const pos = parseInt(settings.verticalPosition, 10);
if (pos < 0) {
list.push({ name: 'top', value: '' });
list.push({ name: 'bottom', value: '0' });
} else {
list.push({ name: 'top', value: '0' });
list.push({ name: 'bottom', value: '' });
}
}
return list;
}
export function getStyles(settings, preview) {
return { return {
text: getTextStyles(settings, isCue), text: getTextStyles(settings, preview),
window: [] window: getWindowStyles(settings, preview)
}; };
} }
function applyStyleList(styles, elem) { function applyStyleList(styles, elem) {
for (let i = 0, length = styles.length; i < length; i++) { for (let i = 0, length = styles.length; i < length; i++) {
let style = styles[i]; const style = styles[i];
elem.style[style.name] = style.value; elem.style[style.name] = style.value;
} }
} }
export function applyStyles(elements, appearanceSettings) { export function applyStyles(elements, appearanceSettings) {
let styles = getStyles(appearanceSettings); const styles = getStyles(appearanceSettings, !!elements.preview);
if (elements.text) { if (elements.text) {
applyStyleList(styles.text, elements.text); applyStyleList(styles.text, elements.text);

26
src/components/subtitlesettings/subtitlesettings.css Normal file
View file

@ -0,0 +1,26 @@
.subtitleappearance-fullpreview {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
pointer-events: none;
transition: 0.2s;
}
.subtitleappearance-fullpreview-hide {
opacity: 0;
}
.subtitleappearance-fullpreview-window {
position: absolute;
width: 100%;
font-size: 170%;
text-align: center;
}
.subtitleappearance-fullpreview-text {
display: inline-block;
max-width: 70%;
}

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

@ -2,6 +2,7 @@ import globalize from 'globalize';
import appHost from 'apphost'; import appHost from 'apphost';
import appSettings from 'appSettings'; import appSettings from 'appSettings';
import focusManager from 'focusManager'; import focusManager from 'focusManager';
import layoutManager from 'layoutManager';
import loading from 'loading'; import loading from 'loading';
import connectionManager from 'connectionManager'; import connectionManager from 'connectionManager';
import subtitleAppearanceHelper from 'subtitleAppearanceHelper'; import subtitleAppearanceHelper from 'subtitleAppearanceHelper';
@ -10,9 +11,11 @@ import dom from 'dom';
import events from 'events'; import events from 'events';
import 'listViewStyle'; import 'listViewStyle';
import 'emby-select'; import 'emby-select';
import 'emby-slider';
import 'emby-input'; import 'emby-input';
import 'emby-checkbox'; import 'emby-checkbox';
import 'flexStyles'; import 'flexStyles';
import 'css!./subtitlesettings';
/** /**
* Subtitle settings. * Subtitle settings.
@ -20,13 +23,14 @@ import 'flexStyles';
*/ */
function getSubtitleAppearanceObject(context) { function getSubtitleAppearanceObject(context) {
let appearanceSettings = {}; const 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;
appearanceSettings.font = context.querySelector('#selectFont').value; appearanceSettings.font = context.querySelector('#selectFont').value;
appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value; appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value;
appearanceSettings.textColor = context.querySelector('#inputTextColor').value; appearanceSettings.textColor = context.querySelector('#inputTextColor').value;
appearanceSettings.verticalPosition = context.querySelector('#sliderVerticalPosition').value;
return appearanceSettings; return appearanceSettings;
} }
@ -37,7 +41,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
context.querySelector('.fldBurnIn').classList.remove('hide'); context.querySelector('.fldBurnIn').classList.remove('hide');
} }
let selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage'); const selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage');
settingsHelper.populateLanguages(selectSubtitleLanguage, allCultures); settingsHelper.populateLanguages(selectSubtitleLanguage, allCultures);
@ -51,6 +55,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent'; context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent';
context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff'; context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff';
context.querySelector('#selectFont').value = appearanceSettings.font || ''; context.querySelector('#selectFont').value = appearanceSettings.font || '';
context.querySelector('#sliderVerticalPosition').value = appearanceSettings.verticalPosition;
context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || ''; context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || '';
@ -96,9 +101,9 @@ function save(instance, context, userId, userSettings, apiClient, enableSaveConf
} }
function onSubtitleModeChange(e) { function onSubtitleModeChange(e) {
let view = dom.parentWithClass(e.target, 'subtitlesettings'); const view = dom.parentWithClass(e.target, 'subtitlesettings');
let subtitlesHelp = view.querySelectorAll('.subtitlesHelp'); const subtitlesHelp = view.querySelectorAll('.subtitlesHelp');
for (let 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');
} }
@ -106,16 +111,51 @@ function onSubtitleModeChange(e) {
} }
function onAppearanceFieldChange(e) { function onAppearanceFieldChange(e) {
let view = dom.parentWithClass(e.target, 'subtitlesettings'); const view = dom.parentWithClass(e.target, 'subtitlesettings');
let appearanceSettings = getSubtitleAppearanceObject(view); const appearanceSettings = getSubtitleAppearanceObject(view);
let elements = { const 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
}; };
subtitleAppearanceHelper.applyStyles(elements, appearanceSettings); subtitleAppearanceHelper.applyStyles(elements, appearanceSettings);
subtitleAppearanceHelper.applyStyles({
window: view.querySelector('.subtitleappearance-fullpreview-window'),
text: view.querySelector('.subtitleappearance-fullpreview-text')
}, appearanceSettings);
}
const subtitlePreviewDelay = 1000;
let subtitlePreviewTimer;
function showSubtitlePreview(persistent) {
clearTimeout(subtitlePreviewTimer);
this._fullPreview.classList.remove('subtitleappearance-fullpreview-hide');
if (persistent) {
this._refFullPreview++;
}
if (this._refFullPreview === 0) {
subtitlePreviewTimer = setTimeout(hideSubtitlePreview.bind(this), subtitlePreviewDelay);
}
}
function hideSubtitlePreview(persistent) {
clearTimeout(subtitlePreviewTimer);
if (persistent) {
this._refFullPreview--;
}
if (this._refFullPreview === 0) {
this._fullPreview.classList.add('subtitleappearance-fullpreview-hide');
}
} }
function embed(options, self) { function embed(options, self) {
@ -138,6 +178,36 @@ function embed(options, self) {
if (appHost.supports('subtitleappearancesettings')) { if (appHost.supports('subtitleappearancesettings')) {
options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide'); options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide');
self._fullPreview = options.element.querySelector('.subtitleappearance-fullpreview');
self._refFullPreview = 0;
const sliderVerticalPosition = options.element.querySelector('#sliderVerticalPosition');
sliderVerticalPosition.addEventListener('input', onAppearanceFieldChange);
sliderVerticalPosition.addEventListener('input', () => showSubtitlePreview.call(self));
const eventPrefix = window.PointerEvent ? 'pointer' : 'mouse';
sliderVerticalPosition.addEventListener(`${eventPrefix}enter`, () => showSubtitlePreview.call(self, true));
sliderVerticalPosition.addEventListener(`${eventPrefix}leave`, () => hideSubtitlePreview.call(self, true));
if (layoutManager.tv) {
sliderVerticalPosition.addEventListener('focus', () => showSubtitlePreview.call(self, true));
sliderVerticalPosition.addEventListener('blur', () => hideSubtitlePreview.call(self, true));
// Give CustomElements time to attach
setTimeout(() => {
sliderVerticalPosition.classList.add('focusable');
sliderVerticalPosition.enableKeyboardDragging();
}, 0);
}
options.element.querySelector('.chkPreview').addEventListener('change', (e) => {
if (e.target.checked) {
showSubtitlePreview.call(self, true);
} else {
hideSubtitlePreview.call(self, true);
}
});
} }
self.loadData(); self.loadData();
@ -156,20 +226,20 @@ export class SubtitleSettings {
} }
loadData() { loadData() {
let self = this; const self = this;
let context = self.options.element; const context = self.options.element;
loading.show(); loading.show();
let userId = self.options.userId; const userId = self.options.userId;
let apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
let userSettings = self.options.userSettings; const 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;
let appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey); const appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);
loadForm(context, user, userSettings, appearanceSettings, apiClient); loadForm(context, user, userSettings, appearanceSettings, apiClient);
}); });
@ -186,12 +256,12 @@ export class SubtitleSettings {
onSubmit(e) { onSubmit(e) {
const self = this; const self = this;
let apiClient = connectionManager.getApiClient(self.options.serverId); const apiClient = connectionManager.getApiClient(self.options.serverId);
let userId = self.options.userId; const userId = self.options.userId;
let userSettings = self.options.userSettings; const userSettings = self.options.userSettings;
userSettings.setUserInfo(userId, apiClient).then(function () { userSettings.setUserInfo(userId, apiClient).then(function () {
let 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);
}); });

26
src/components/subtitlesettings/subtitlesettings.template.html
View file

@ -14,7 +14,7 @@
<option value="Smart">${Smart}</option> <option value="Smart">${Smart}</option>
<option value="OnlyForced">${OnlyForcedSubtitles}</option> <option value="OnlyForced">${OnlyForcedSubtitles}</option>
<option value="Always">${AlwaysPlaySubtitles}</option> <option value="Always">${AlwaysPlaySubtitles}</option>
<option value="None">${NoSubtitles}</option> <option value="None">${None}</option>
</select> </select>
<div class="fieldDescription subtitlesDefaultHelp subtitlesHelp hide">${DefaultSubtitlesHelp}</div> <div class="fieldDescription subtitlesDefaultHelp subtitlesHelp hide">${DefaultSubtitlesHelp}</div>
<div class="fieldDescription subtitlesSmartHelp subtitlesHelp hide">${SmartSubtitlesHelp}</div> <div class="fieldDescription subtitlesSmartHelp subtitlesHelp hide">${SmartSubtitlesHelp}</div>
@ -38,6 +38,16 @@
${HeaderSubtitleAppearance} ${HeaderSubtitleAppearance}
</h2> </h2>
<div class="subtitleappearance-fullpreview subtitleappearance-fullpreview-hide">
<div class="subtitleappearance-fullpreview-window">
<div class="subtitleappearance-fullpreview-text">
${HeaderSubtitleAppearance}
<br>
${TheseSettingsAffectSubtitlesOnThisDevice}
</div>
</div>
</div>
<div style="margin: 2em 0 2em;"> <div style="margin: 2em 0 2em;">
<div class="subtitleappearance-preview flex align-items-center justify-content-center" style="margin:2em 0;padding:1.6em;color:black;background:linear-gradient(140deg,#aa5cc3,#00a4dc);"> <div class="subtitleappearance-preview flex align-items-center justify-content-center" style="margin:2em 0;padding:1.6em;color:black;background:linear-gradient(140deg,#aa5cc3,#00a4dc);">
<div class="subtitleappearance-preview-window flex align-items-center justify-content-center" style="width: 90%; padding: .25em;"> <div class="subtitleappearance-preview-window flex align-items-center justify-content-center" style="width: 90%; padding: .25em;">
@ -89,6 +99,20 @@
<option value="">${DropShadow}</option> <option value="">${DropShadow}</option>
</select> </select>
</div> </div>
<div class="sliderContainer-settings">
<div class="sliderContainer">
<input is="emby-slider" id="sliderVerticalPosition" label="${LabelSubtitleVerticalPosition}" type="range" min="-16" max="16" />
</div>
<div class="fieldDescription">${SubtitleVerticalPositionHelp}</div>
</div>
<div class="checkboxContainer">
<label>
<input is="emby-checkbox" type="checkbox" class="chkPreview" />
<span>${Preview}</span>
</label>
</div>
</div> </div>
<button is="emby-button" type="submit" class="raised button-submit block btnSave hide"> <button is="emby-button" type="submit" class="raised button-submit block btnSave hide">

65
src/components/subtitlesync/subtitlesync.js
View file

@ -1,14 +1,16 @@
define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html', 'css!./subtitlesync'], function (playbackManager, layoutManager, template, css) { import playbackManager from 'playbackManager';
'use strict'; import layoutManager from 'layoutManager';
import template from 'text!./subtitlesync.template.html';
import 'css!./subtitlesync';
var player; let player;
var subtitleSyncSlider; let subtitleSyncSlider;
var subtitleSyncTextField; let subtitleSyncTextField;
var subtitleSyncCloseButton; let subtitleSyncCloseButton;
var subtitleSyncContainer; let subtitleSyncContainer;
function init(instance) { function init(instance) {
var parent = document.createElement('div'); const parent = document.createElement('div');
document.body.appendChild(parent); document.body.appendChild(parent);
parent.innerHTML = template; parent.innerHTML = template;
@ -27,7 +29,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
subtitleSyncContainer.classList.add('hide'); subtitleSyncContainer.classList.add('hide');
subtitleSyncTextField.updateOffset = function(offset) { subtitleSyncTextField.updateOffset = function (offset) {
this.textContent = offset + 's'; this.textContent = offset + 's';
}; };
@ -36,10 +38,10 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
this.hasFocus = true; this.hasFocus = true;
}); });
subtitleSyncTextField.addEventListener('keydown', function(event) { subtitleSyncTextField.addEventListener('keydown', function (event) {
if (event.key === 'Enter') { if (event.key === 'Enter') {
// if input key is enter search for float pattern // if input key is enter search for float pattern
var inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent); let inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
if (inputOffset) { if (inputOffset) {
inputOffset = inputOffset[0]; inputOffset = inputOffset[0];
@ -69,14 +71,14 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
event.stopPropagation(); event.stopPropagation();
}); });
subtitleSyncTextField.blur = function() { subtitleSyncTextField.blur = function () {
// prevent textfield to blur while element has focus // prevent textfield to blur while element has focus
if (!this.hasFocus && this.prototype) { if (!this.hasFocus && this.prototype) {
this.prototype.blur(); this.prototype.blur();
} }
}; };
subtitleSyncSlider.updateOffset = function(percent) { subtitleSyncSlider.updateOffset = function (percent) {
// default value is 0s = 50% // default value is 0s = 50%
this.value = percent === undefined ? 50 : percent; this.value = percent === undefined ? 50 : percent;
}; };
@ -90,56 +92,57 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
}); });
subtitleSyncSlider.getBubbleHtml = function (value) { subtitleSyncSlider.getBubbleHtml = function (value) {
var newOffset = getOffsetFromPercentage(value); const newOffset = getOffsetFromPercentage(value);
return '<h1 class="sliderBubbleText">' + return '<h1 class="sliderBubbleText">' +
(newOffset > 0 ? '+' : '') + parseFloat(newOffset) + 's' + (newOffset > 0 ? '+' : '') + parseFloat(newOffset) + 's' +
'</h1>'; '</h1>';
}; };
subtitleSyncCloseButton.addEventListener('click', function() { subtitleSyncCloseButton.addEventListener('click', function () {
playbackManager.disableShowingSubtitleOffset(player); playbackManager.disableShowingSubtitleOffset(player);
SubtitleSync.prototype.toggle('forceToHide'); SubtitleSync.prototype.toggle('forceToHide');
}); });
instance.element = parent; instance.element = parent;
} }
function getOffsetFromPercentage(value) { function getOffsetFromPercentage(value) {
// convert percent to fraction // convert percent to fraction
var offset = (value - 50) / 50; let offset = (value - 50) / 50;
// multiply by offset min/max range value (-x to +x) : // multiply by offset min/max range value (-x to +x) :
offset *= 30; offset *= 30;
return offset.toFixed(1); return offset.toFixed(1);
} }
function getPercentageFromOffset(value) { function getPercentageFromOffset(value) {
// divide by offset min/max range value (-x to +x) : // divide by offset min/max range value (-x to +x) :
var percentValue = value / 30; let percentValue = value / 30;
// convert fraction to percent // convert fraction to percent
percentValue *= 50; percentValue *= 50;
percentValue += 50; percentValue += 50;
return Math.min(100, Math.max(0, percentValue.toFixed())); return Math.min(100, Math.max(0, percentValue.toFixed()));
} }
function SubtitleSync(currentPlayer) { class SubtitleSync {
constructor(currentPlayer) {
player = currentPlayer; player = currentPlayer;
init(this); init(this);
} }
SubtitleSync.prototype.destroy = function() { destroy() {
SubtitleSync.prototype.toggle('forceToHide'); SubtitleSync.prototype.toggle('forceToHide');
if (player) { if (player) {
playbackManager.disableShowingSubtitleOffset(player); playbackManager.disableShowingSubtitleOffset(player);
playbackManager.setSubtitleOffset(0, player); playbackManager.setSubtitleOffset(0, 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;
} }
}; }
SubtitleSync.prototype.toggle = function(action) { toggle(action) {
if (player && playbackManager.supportSubtitleOffset(player)) { if (player && playbackManager.supportSubtitleOffset(player)) {
/* eslint-disable no-fallthrough */ /* eslint-disable no-fallthrough */
switch (action) { switch (action) {
@ -168,7 +171,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
} }
/* eslint-enable no-fallthrough */ /* eslint-enable no-fallthrough */
} }
}; }
}
return SubtitleSync; export default SubtitleSync;
});

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

@ -1,7 +1,9 @@
define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (backdrop, mainTabsManager, layoutManager) { import backdrop from 'backdrop';
'use strict'; import * as mainTabsManager from 'mainTabsManager';
import layoutManager from 'layoutManager';
import 'emby-tabs';
function onViewDestroy(e) { function onViewDestroy(e) {
var tabControllers = this.tabControllers; var tabControllers = this.tabControllers;
if (tabControllers) { if (tabControllers) {
@ -18,13 +20,14 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
this.params = null; this.params = null;
this.currentTabController = null; this.currentTabController = null;
this.initialTabIndex = null; this.initialTabIndex = null;
} }
function onBeforeTabChange() { function onBeforeTabChange() {
} }
function TabbedView(view, params) { class TabbedView {
constructor(view, params) {
this.tabControllers = []; this.tabControllers = [];
this.view = view; this.view = view;
this.params = params; this.params = params;
@ -85,7 +88,7 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
view.addEventListener('viewdestroy', onViewDestroy.bind(this)); view.addEventListener('viewdestroy', onViewDestroy.bind(this));
} }
TabbedView.prototype.onResume = function (options) { onResume(options) {
this.setTitle(); this.setTitle();
backdrop.clearBackdrop(); backdrop.clearBackdrop();
@ -96,19 +99,18 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
} else if (currentTabController && currentTabController.onResume) { } else if (currentTabController && currentTabController.onResume) {
currentTabController.onResume({}); currentTabController.onResume({});
} }
}; }
TabbedView.prototype.onPause = function () { onPause() {
var currentTabController = this.currentTabController; var currentTabController = this.currentTabController;
if (currentTabController && currentTabController.onPause) { if (currentTabController && currentTabController.onPause) {
currentTabController.onPause(); currentTabController.onPause();
} }
}; }
setTitle() {
TabbedView.prototype.setTitle = function () {
Emby.Page.setTitle(''); Emby.Page.setTitle('');
}; }
}
return TabbedView; export default TabbedView;
});

50
src/components/themeMediaPlayer.js
View file

@ -1,11 +1,12 @@
define(['playbackManager', 'userSettings', 'connectionManager'], function (playbackManager, userSettings, connectionManager) { import playbackManager from 'playbackManager';
'use strict'; import * as userSettings from 'userSettings';
import connectionManager from 'connectionManager';
var currentOwnerId; let currentOwnerId;
var currentThemeIds = []; let currentThemeIds = [];
function playThemeMedia(items, ownerId) { function playThemeMedia(items, ownerId) {
var currentThemeItems = items.filter(function (i) { const currentThemeItems = items.filter(function (i) {
return enabled(i.MediaType); return enabled(i.MediaType);
}); });
@ -30,27 +31,27 @@ define(['playbackManager', 'userSettings', 'connectionManager'], function (playb
} else { } else {
stopIfPlaying(); stopIfPlaying();
} }
} }
function stopIfPlaying() { function stopIfPlaying() {
if (currentOwnerId) { if (currentOwnerId) {
playbackManager.stop(); playbackManager.stop();
} }
currentOwnerId = null; currentOwnerId = null;
} }
function enabled(mediaType) { function enabled(mediaType) {
if (mediaType === 'Video') { if (mediaType === 'Video') {
return userSettings.enableThemeVideos(); return userSettings.enableThemeVideos();
} }
return userSettings.enableThemeSongs(); return userSettings.enableThemeSongs();
} }
var excludeTypes = ['CollectionFolder', 'UserView', 'Program', 'SeriesTimer', 'Person', 'TvChannel', 'Channel']; const excludeTypes = ['CollectionFolder', 'UserView', 'Program', 'SeriesTimer', 'Person', 'TvChannel', 'Channel'];
function loadThemeMedia(item) { function loadThemeMedia(item) {
if (item.CollectionType) { if (item.CollectionType) {
stopIfPlaying(); stopIfPlaying();
return; return;
@ -61,41 +62,40 @@ define(['playbackManager', 'userSettings', 'connectionManager'], function (playb
return; return;
} }
var apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
apiClient.getThemeMedia(apiClient.getCurrentUserId(), item.Id, true).then(function (themeMediaResult) { apiClient.getThemeMedia(apiClient.getCurrentUserId(), item.Id, true).then(function (themeMediaResult) {
var ownerId = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.OwnerId : themeMediaResult.ThemeSongsResult.OwnerId; const ownerId = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.OwnerId : themeMediaResult.ThemeSongsResult.OwnerId;
if (ownerId !== currentOwnerId) { if (ownerId !== currentOwnerId) {
var items = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.Items : themeMediaResult.ThemeSongsResult.Items; const items = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.Items : themeMediaResult.ThemeSongsResult.Items;
playThemeMedia(items, ownerId); playThemeMedia(items, ownerId);
} }
}); });
} }
document.addEventListener('viewshow', function (e) { document.addEventListener('viewshow', function (e) {
var state = e.detail.state || {}; const state = e.detail.state || {};
var item = state.item; const item = state.item;
if (item && item.ServerId) { if (item && item.ServerId) {
loadThemeMedia(item); loadThemeMedia(item);
return; return;
} }
var viewOptions = e.detail.options || {}; const viewOptions = e.detail.options || {};
if (viewOptions.supportsThemeMedia) { if (viewOptions.supportsThemeMedia) {
// Do nothing here, allow it to keep playing // Do nothing here, allow it to keep playing
} else { } else {
playThemeMedia([], null); playThemeMedia([], null);
} }
}, true); }, true);
Events.on(playbackManager, 'playbackstart', function (e, player) { Events.on(playbackManager, 'playbackstart', function (e, player) {
var item = playbackManager.currentItem(player); const item = playbackManager.currentItem(player);
// User played something manually // User played something manually
if (currentThemeIds.indexOf(item.Id) == -1) { if (currentThemeIds.indexOf(item.Id) == -1) {
currentOwnerId = null; currentOwnerId = null;
} }
});
}); });

18
src/components/toast/toast.js
View file

@ -1,27 +1,26 @@
define(['css!./toast'], function () { import 'css!./toast';
'use strict';
function remove(elem) { function remove(elem) {
setTimeout(function () { setTimeout(function () {
elem.parentNode.removeChild(elem); elem.parentNode.removeChild(elem);
}, 300); }, 300);
} }
function animateRemove(elem) { function animateRemove(elem) {
setTimeout(function () { setTimeout(function () {
elem.classList.remove('toastVisible'); elem.classList.remove('toastVisible');
remove(elem); remove(elem);
}, 3300); }, 3300);
} }
return function (options) { export default function (options) {
if (typeof options === 'string') { if (typeof options === 'string') {
options = { options = {
text: options text: options
}; };
} }
var elem = document.createElement('div'); const elem = document.createElement('div');
elem.classList.add('toast'); elem.classList.add('toast');
elem.innerHTML = options.text; elem.innerHTML = options.text;
@ -32,5 +31,4 @@ define(['css!./toast'], function () {
animateRemove(elem); animateRemove(elem);
}, 300); }, 300);
}; }
});

82
src/components/tunerPicker.js
View file

@ -1,10 +1,22 @@
define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize', 'loading', 'browser', 'focusManager', 'scrollHelper', 'material-icons', 'formDialogStyle', 'emby-button', 'emby-itemscontainer', 'cardStyle'], function (dialogHelper, dom, layoutManager, connectionManager, globalize, loading, browser, focusManager, scrollHelper) { import dialogHelper from 'dialogHelper';
'use strict'; import dom from 'dom';
import layoutManager from 'layoutManager';
import connectionManager from 'connectionManager';
import globalize from 'globalize';
import loading from 'loading';
import browser from 'browser';
import focusManager from 'focusManager';
import scrollHelper from 'scrollHelper';
import 'material-icons';
import 'formDialogStyle';
import 'emby-button';
import 'emby-itemscontainer';
import 'cardStyle';
var enableFocusTransform = !browser.slow && !browser.edge; const enableFocusTransform = !browser.slow && !browser.edge;
function getEditorHtml() { function getEditorHtml() {
var html = ''; let html = '';
html += '<div class="formDialogContent scrollY">'; html += '<div class="formDialogContent scrollY">';
html += '<div class="dialogContentInner dialog-content-centered">'; html += '<div class="dialogContentInner dialog-content-centered">';
html += '<div class="loadingContent hide">'; html += '<div class="loadingContent hide">';
@ -16,15 +28,13 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
return html += '</div>'; return html += '</div>';
} }
function getDeviceHtml(device) { function getDeviceHtml(device) {
var padderClass; let html = '';
var html = ''; let cssClass = 'card scalableCard backdropCard backdropCard-scalable';
var cssClass = 'card scalableCard'; const cardBoxCssClass = 'cardBox visualCardBox';
var cardBoxCssClass = 'cardBox visualCardBox'; const padderClass = 'cardPadder-backdrop';
cssClass += ' backdropCard backdropCard-scalable';
padderClass = 'cardPadder-backdrop';
// TODO move card creation code to Card component // TODO move card creation code to Card component
@ -53,9 +63,9 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
return html += '</button>'; return html += '</button>';
} }
function getTunerName(providerId) { function getTunerName(providerId) {
switch (providerId = providerId.toLowerCase()) { switch (providerId = providerId.toLowerCase()) {
case 'm3u': case 'm3u':
return 'M3U'; return 'M3U';
@ -72,14 +82,12 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
default: default:
return 'Unknown'; return 'Unknown';
} }
} }
function renderDevices(view, devices) { function renderDevices(view, devices) {
var i; let html = '';
var length;
var html = '';
for (i = 0, length = devices.length; i < length; i++) { for (let i = 0, length = devices.length; i < length; i++) {
html += getDeviceHtml(devices[i]); html += getDeviceHtml(devices[i]);
} }
@ -90,15 +98,15 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
view.querySelector('.devicesHeader').classList.add('hide'); view.querySelector('.devicesHeader').classList.add('hide');
} }
var elem = view.querySelector('.results'); const elem = view.querySelector('.results');
elem.innerHTML = html; elem.innerHTML = html;
if (layoutManager.tv) { if (layoutManager.tv) {
focusManager.autoFocus(elem); focusManager.autoFocus(elem);
} }
} }
function discoverDevices(view, apiClient) { function discoverDevices(view, apiClient) {
loading.show(); loading.show();
view.querySelector('.loadingContent').classList.remove('hide'); view.querySelector('.loadingContent').classList.remove('hide');
return ApiClient.getJSON(ApiClient.getUrl('LiveTv/Tuners/Discvover', { return ApiClient.getJSON(ApiClient.getUrl('LiveTv/Tuners/Discvover', {
@ -109,11 +117,11 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
view.querySelector('.loadingContent').classList.add('hide'); view.querySelector('.loadingContent').classList.add('hide');
loading.hide(); loading.hide();
}); });
} }
function tunerPicker() { function tunerPicker() {
this.show = function (options) { this.show = function (options) {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -124,9 +132,9 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
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 += '<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">';
@ -138,12 +146,12 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
var deviceResult; let deviceResult;
dlg.querySelector('.results').addEventListener('click', function (e) { dlg.querySelector('.results').addEventListener('click', function (e) {
var tunerCard = dom.parentWithClass(e.target, 'card'); const tunerCard = dom.parentWithClass(e.target, 'card');
if (tunerCard) { if (tunerCard) {
var deviceId = tunerCard.getAttribute('data-id'); const deviceId = tunerCard.getAttribute('data-id');
deviceResult = currentDevices.filter(function (d) { deviceResult = currentDevices.filter(function (d) {
return d.DeviceId === deviceId; return d.DeviceId === deviceId;
})[0]; })[0];
@ -155,7 +163,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
} }
var apiClient = connectionManager.getApiClient(options.serverId); const apiClient = connectionManager.getApiClient(options.serverId);
discoverDevices(dlg, apiClient); discoverDevices(dlg, apiClient);
if (layoutManager.tv) { if (layoutManager.tv) {
@ -170,8 +178,8 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
return Promise.reject(); return Promise.reject();
}); });
}; };
} }
var currentDevices = []; let currentDevices = [];
return tunerPicker;
}); export default tunerPicker;

75
src/components/tvproviders/schedulesdirect.js
View file

@ -1,11 +1,19 @@
define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emby-input', 'emby-select', 'emby-button', 'flexStyles'], function ($, loading, globalize) { import $ from 'jQuery';
'use strict'; import loading from 'loading';
import globalize from 'globalize';
import 'emby-checkbox';
import 'emby-input';
import 'listViewStyle';
import 'paper-icon-button-light';
import 'emby-select';
import 'emby-button';
import 'flexStyles';
return function (page, providerId, options) { export default function (page, providerId, options) {
function reload() { function reload() {
loading.show(); loading.show();
ApiClient.getNamedConfiguration('livetv').then(function (config) { ApiClient.getNamedConfiguration('livetv').then(function (config) {
var info = config.ListingProviders.filter(function (i) { const info = config.ListingProviders.filter(function (i) {
return i.Id === providerId; return i.Id === providerId;
})[0] || {}; })[0] || {};
listingsId = info.ListingsId; listingsId = info.ListingsId;
@ -35,14 +43,14 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
function setCountry(info) { function setCountry(info) {
ApiClient.getJSON(ApiClient.getUrl('LiveTv/ListingProviders/SchedulesDirect/Countries')).then(function (result) { ApiClient.getJSON(ApiClient.getUrl('LiveTv/ListingProviders/SchedulesDirect/Countries')).then(function (result) {
var i; let i;
var length; let length;
var countryList = []; const countryList = [];
for (var region in result) { for (const region in result) {
var countries = result[region]; const countries = result[region];
if (countries.length && 'ZZZ' !== region) { if (countries.length && region !== 'ZZZ') {
for (i = 0, length = countries.length; i < length; i++) { for (i = 0, length = countries.length; i < length; i++) {
countryList.push({ countryList.push({
name: countries[i].fullName, name: countries[i].fullName,
@ -80,20 +88,20 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
return Promise.resolve(''); return Promise.resolve('');
} }
var buffer = new TextEncoder('utf-8').encode(str); const buffer = new TextEncoder('utf-8').encode(str);
return crypto.subtle.digest('SHA-256', buffer).then(function (hash) { return crypto.subtle.digest('SHA-256', buffer).then(function (hash) {
return hex(hash); return hex(hash);
}); });
} }
function hex(buffer) { function hex(buffer) {
var hexCodes = []; const hexCodes = [];
var view = new DataView(buffer); const view = new DataView(buffer);
for (var i = 0; i < view.byteLength; i += 4) { for (let i = 0; i < view.byteLength; i += 4) {
var value = view.getUint32(i); const value = view.getUint32(i);
var stringValue = value.toString(16); const stringValue = value.toString(16);
var paddedValue = ('00000000' + stringValue).slice(-'00000000'.length); const paddedValue = ('00000000' + stringValue).slice(-'00000000'.length);
hexCodes.push(paddedValue); hexCodes.push(paddedValue);
} }
@ -103,14 +111,14 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
function submitLoginForm() { function submitLoginForm() {
loading.show(); loading.show();
sha256(page.querySelector('.txtPass').value).then(function (passwordHash) { sha256(page.querySelector('.txtPass').value).then(function (passwordHash) {
var info = { const info = {
Type: 'SchedulesDirect', Type: 'SchedulesDirect',
Username: page.querySelector('.txtUser').value, Username: page.querySelector('.txtUser').value,
EnableAllTuners: true, EnableAllTuners: true,
Password: passwordHash, Password: passwordHash,
Pw: page.querySelector('.txtPass').value Pw: page.querySelector('.txtPass').value
}; };
var id = providerId; const id = providerId;
if (id) { if (id) {
info.Id = id; info.Id = id;
@ -137,7 +145,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
} }
function submitListingsForm() { function submitListingsForm() {
var selectedListingsId = $('#selectListing', page).val(); const selectedListingsId = $('#selectListing', page).val();
if (!selectedListingsId) { if (!selectedListingsId) {
return void Dashboard.alert({ return void Dashboard.alert({
@ -146,9 +154,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
} }
loading.show(); loading.show();
var id = providerId; const id = providerId;
ApiClient.getNamedConfiguration('livetv').then(function (config) { ApiClient.getNamedConfiguration('livetv').then(function (config) {
var info = config.ListingProviders.filter(function (i) { const info = config.ListingProviders.filter(function (i) {
return i.Id === id; return i.Id === id;
})[0]; })[0];
info.ZipCode = page.querySelector('.txtZipCode').value; info.ZipCode = page.querySelector('.txtZipCode').value;
@ -231,14 +239,14 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
} }
function refreshTunerDevices(page, providerInfo, devices) { function refreshTunerDevices(page, providerInfo, devices) {
var html = ''; let html = '';
for (var i = 0, length = devices.length; i < length; i++) { for (let i = 0, length = devices.length; i < length; i++) {
var device = devices[i]; const device = devices[i];
html += '<div class="listItem">'; html += '<div class="listItem">';
var enabledTuners = providerInfo.EnabledTuners || []; const enabledTuners = providerInfo.EnabledTuners || [];
var isChecked = providerInfo.EnableAllTuners || -1 !== enabledTuners.indexOf(device.Id); const isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
var checkedAttribute = isChecked ? ' checked' : ''; const checkedAttribute = isChecked ? ' checked' : '';
html += '<label class="checkboxContainer listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" data-id="' + device.Id + '" class="chkTuner" ' + checkedAttribute + '/><span></span></label>'; html += '<label class="checkboxContainer listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" data-id="' + device.Id + '" class="chkTuner" ' + checkedAttribute + '/><span></span></label>';
html += '<div class="listItemBody two-line">'; html += '<div class="listItemBody two-line">';
html += '<div class="listItemBodyText">'; html += '<div class="listItemBodyText">';
@ -254,8 +262,8 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
page.querySelector('.tunerList').innerHTML = html; page.querySelector('.tunerList').innerHTML = html;
} }
var listingsId; let listingsId;
var self = this; const self = this;
self.submit = function () { self.submit = function () {
page.querySelector('.btnSubmitListingsContainer').click(); page.querySelector('.btnSubmitListingsContainer').click();
@ -266,10 +274,10 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
// Only hide the buttons if explicitly set to false; default to showing if undefined or null // Only hide the buttons if explicitly set to false; default to showing if undefined or null
// FIXME: rename this option to clarify logic // FIXME: rename this option to clarify logic
var hideCancelButton = options.showCancelButton === false; const hideCancelButton = options.showCancelButton === false;
page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton); page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton);
var hideSubmitButton = options.showSubmitButton === false; const hideSubmitButton = options.showSubmitButton === false;
page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton); page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton);
$('.formLogin', page).on('submit', function () { $('.formLogin', page).on('submit', function () {
@ -293,5 +301,4 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'listViewStyle', 'emb
$('.createAccountHelp', page).html(globalize.translate('MessageCreateAccountAt', '<a is="emby-linkbutton" class="button-link" href="http://www.schedulesdirect.org" target="_blank">http://www.schedulesdirect.org</a>')); $('.createAccountHelp', page).html(globalize.translate('MessageCreateAccountAt', '<a is="emby-linkbutton" class="button-link" href="http://www.schedulesdirect.org" target="_blank">http://www.schedulesdirect.org</a>'));
reload(); reload();
}; };
}; }
});

4
src/components/tvproviders/schedulesdirect.template.html
View file

@ -27,7 +27,7 @@
<input is="emby-input" class="txtPass" label="${LabelPassword}" required="required" autocomplete="off" type="password" /> <input is="emby-input" class="txtPass" label="${LabelPassword}" required="required" autocomplete="off" type="password" />
</div> </div>
<div> <div>
<button is="emby-button" type="submit" class="raised button-submit block"><span>${ButtonSave}</span></button> <button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button>
</div> </div>
</div> </div>
</form> </form>
@ -65,7 +65,7 @@
</div> </div>
<br /> <br />
<div> <div>
<button is="emby-button" type="submit" class="raised button-submit block btnSubmitListingsContainer btnSubmitListings hide"><span>${ButtonSave}</span></button> <button is="emby-button" type="submit" class="raised button-submit block btnSubmitListingsContainer btnSubmitListings hide"><span>${Save}</span></button>
<button is="emby-button" type="button" class="raised button-cancel block btnCancel hide" onclick="history.back();"><span>${ButtonCancel}</span></button> <button is="emby-button" type="button" class="raised button-cancel block btnCancel hide" onclick="history.back();"><span>${ButtonCancel}</span></button>
</div> </div>
</div> </div>

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

@ -1,10 +1,15 @@
define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listViewStyle', 'paper-icon-button-light'], function ($, loading, globalize) { import $ from 'jQuery';
'use strict'; import loading from 'loading';
import globalize from 'globalize';
import 'emby-checkbox';
import 'emby-input';
import 'listViewStyle';
import 'paper-icon-button-light';
return function (page, providerId, options) { export default function (page, providerId, options) {
function getListingProvider(config, id) { function getListingProvider(config, id) {
if (config && id) { if (config && id) {
var result = config.ListingProviders.filter(function (provider) { const result = config.ListingProviders.filter(function (provider) {
return provider.Id === id; return provider.Id === id;
})[0]; })[0];
@ -44,7 +49,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
} }
function getCategories(txtInput) { function getCategories(txtInput) {
var value = txtInput.value; const value = txtInput.value;
if (value) { if (value) {
return value.split('|'); return value.split('|');
@ -55,9 +60,9 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
function submitListingsForm() { function submitListingsForm() {
loading.show(); loading.show();
var id = providerId; const id = providerId;
ApiClient.getNamedConfiguration('livetv').then(function (config) { ApiClient.getNamedConfiguration('livetv').then(function (config) {
var info = config.ListingProviders.filter(function (provider) { const info = config.ListingProviders.filter(function (provider) {
return provider.Id === id; return provider.Id === id;
})[0] || {}; })[0] || {};
info.Type = 'xmltv'; info.Type = 'xmltv';
@ -84,7 +89,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
}).then(function (result) { }).then(function (result) {
loading.hide(); loading.hide();
if (false !== options.showConfirmation) { if (options.showConfirmation !== false) {
Dashboard.processServerConfigurationUpdateResult(); Dashboard.processServerConfigurationUpdateResult();
} }
@ -112,14 +117,14 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
} }
function refreshTunerDevices(page, providerInfo, devices) { function refreshTunerDevices(page, providerInfo, devices) {
var html = ''; let html = '';
for (var i = 0, length = devices.length; i < length; i++) { for (let i = 0, length = devices.length; i < length; i++) {
var device = devices[i]; const device = devices[i];
html += '<div class="listItem">'; html += '<div class="listItem">';
var enabledTuners = providerInfo.EnabledTuners || []; const enabledTuners = providerInfo.EnabledTuners || [];
var isChecked = providerInfo.EnableAllTuners || -1 !== enabledTuners.indexOf(device.Id); const isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) !== -1;
var checkedAttribute = isChecked ? ' checked' : ''; const checkedAttribute = isChecked ? ' checked' : '';
html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkTuner" data-id="' + device.Id + '" ' + checkedAttribute + '><span></span></label>'; html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkTuner" data-id="' + device.Id + '" ' + checkedAttribute + '><span></span></label>';
html += '<div class="listItemBody two-line">'; html += '<div class="listItemBody two-line">';
html += '<div class="listItemBodyText">'; html += '<div class="listItemBodyText">';
@ -136,15 +141,15 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
} }
function onSelectPathClick(e) { function onSelectPathClick(e) {
var page = $(e.target).parents('.xmltvForm')[0]; const page = $(e.target).parents('.xmltvForm')[0];
require(['directorybrowser'], function (directoryBrowser) { import('directorybrowser').then(({default: directoryBrowser}) => {
var picker = new directoryBrowser.default(); const picker = new directoryBrowser();
picker.show({ picker.show({
includeFiles: true, includeFiles: true,
callback: function (path) { callback: function (path) {
if (path) { if (path) {
var txtPath = page.querySelector('.txtPath'); const txtPath = page.querySelector('.txtPath');
txtPath.value = path; txtPath.value = path;
txtPath.focus(); txtPath.focus();
} }
@ -154,7 +159,7 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
}); });
} }
var self = this; const self = this;
self.submit = function () { self.submit = function () {
page.querySelector('.btnSubmitListings').click(); page.querySelector('.btnSubmitListings').click();
@ -165,10 +170,10 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
// Only hide the buttons if explicitly set to false; default to showing if undefined or null // Only hide the buttons if explicitly set to false; default to showing if undefined or null
// FIXME: rename this option to clarify logic // FIXME: rename this option to clarify logic
var hideCancelButton = options.showCancelButton === false; const hideCancelButton = options.showCancelButton === false;
page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton); page.querySelector('.btnCancel').classList.toggle('hide', hideCancelButton);
var hideSubmitButton = options.showSubmitButton === false; const hideSubmitButton = options.showSubmitButton === false;
page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton); page.querySelector('.btnSubmitListings').classList.toggle('hide', hideSubmitButton);
$('form', page).on('submit', function () { $('form', page).on('submit', function () {
@ -185,5 +190,4 @@ define(['jQuery', 'loading', 'globalize', 'emby-checkbox', 'emby-input', 'listVi
}); });
reload(); reload();
}; };
}; }
});

2
src/components/tvproviders/xmltv.template.html
View file

@ -56,7 +56,7 @@
</div> </div>
</div> </div>
<div> <div>
<button is="emby-button" type="submit" class="raised button-submit block btnSubmitListings hide"><span>${ButtonSave}</span></button> <button is="emby-button" type="submit" class="raised button-submit block btnSubmitListings hide"><span>${Save}</span></button>
<button is="emby-button" type="button" class="raised button-cancel block btnCancel hide" onclick="history.back();"><span>${ButtonCancel}</span></button> <button is="emby-button" type="button" class="raised button-cancel block btnCancel hide" onclick="history.back();"><span>${ButtonCancel}</span></button>
</div> </div>
</form> </form>

88
src/components/upnextdialog/upnextdialog.js
View file

@ -1,7 +1,19 @@
define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'layoutManager', 'focusManager', 'globalize', 'itemHelper', 'css!./upnextdialog', 'emby-button', 'flexStyles'], function (dom, playbackManager, connectionManager, events, mediaInfo, layoutManager, focusManager, globalize, itemHelper) { import dom from 'dom';
'use strict'; import playbackManager from 'playbackManager';
import connectionManager from 'connectionManager';
import events from 'events';
import mediaInfo from 'mediaInfo';
import layoutManager from 'layoutManager';
import focusManager from 'focusManager';
import globalize from 'globalize';
import itemHelper from 'itemHelper';
import 'css!./upnextdialog';
import 'emby-button';
import 'flexStyles';
var transitionEndEventName = dom.whichTransitionEvent(); /* eslint-disable indent */
const transitionEndEventName = dom.whichTransitionEvent();
function seriesImageUrl(item, options) { function seriesImageUrl(item, options) {
if (item.Type !== 'Episode') { if (item.Type !== 'Episode') {
@ -56,7 +68,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
function setPoster(osdPoster, item, secondaryItem) { function setPoster(osdPoster, item, secondaryItem) {
if (item) { if (item) {
var imgUrl = seriesImageUrl(item, { type: 'Primary' }) || let imgUrl = seriesImageUrl(item, { type: 'Primary' }) ||
seriesImageUrl(item, { type: 'Thumb' }) || seriesImageUrl(item, { type: 'Thumb' }) ||
imageUrl(item, { type: 'Primary' }); imageUrl(item, { type: 'Primary' });
@ -76,7 +88,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
} }
function getHtml() { function getHtml() {
var html = ''; let html = '';
html += '<div class="upNextDialog-poster">'; html += '<div class="upNextDialog-poster">';
html += '</div>'; html += '</div>';
@ -112,17 +124,17 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
} }
function setNextVideoText() { function setNextVideoText() {
var instance = this; const instance = this;
var elem = instance.options.parent; const elem = instance.options.parent;
var secondsRemaining = Math.max(Math.round(getTimeRemainingMs(instance) / 1000), 0); const secondsRemaining = Math.max(Math.round(getTimeRemainingMs(instance) / 1000), 0);
console.debug('up next seconds remaining: ' + secondsRemaining); console.debug('up next seconds remaining: ' + secondsRemaining);
var timeText = '<span class="upNextDialog-countdownText">' + globalize.translate('HeaderSecondsValue', secondsRemaining) + '</span>'; const timeText = '<span class="upNextDialog-countdownText">' + globalize.translate('HeaderSecondsValue', secondsRemaining) + '</span>';
var nextVideoText = instance.itemType === 'Episode' ? const nextVideoText = instance.itemType === 'Episode' ?
globalize.translate('HeaderNextEpisodePlayingInValue', timeText) : globalize.translate('HeaderNextEpisodePlayingInValue', timeText) :
globalize.translate('HeaderNextVideoPlayingInValue', timeText); globalize.translate('HeaderNextVideoPlayingInValue', timeText);
@ -130,9 +142,9 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
} }
function fillItem(item) { function fillItem(item) {
var instance = this; const instance = this;
var elem = instance.options.parent; const elem = instance.options.parent;
setPoster(elem.querySelector('.upNextDialog-poster'), item); setPoster(elem.querySelector('.upNextDialog-poster'), item);
@ -141,7 +153,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
elem.querySelector('.upNextDialog-mediainfo').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(item, { elem.querySelector('.upNextDialog-mediainfo').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(item, {
}); });
var title = itemHelper.getDisplayName(item); let title = itemHelper.getDisplayName(item);
if (item.SeriesName) { if (item.SeriesName) {
title = item.SeriesName + ' - ' + title; title = item.SeriesName + ' - ' + title;
} }
@ -161,10 +173,10 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
} }
function onStartNowClick() { function onStartNowClick() {
var options = this.options; const options = this.options;
if (options) { if (options) {
var player = options.player; const player = options.player;
this.hide(); this.hide();
@ -186,7 +198,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
} }
function clearHideAnimationEventListeners(instance, elem) { function clearHideAnimationEventListeners(instance, elem) {
var fn = instance._onHideAnimationComplete; const fn = instance._onHideAnimationComplete;
if (fn) { if (fn) {
dom.removeEventListener(elem, transitionEndEventName, fn, { dom.removeEventListener(elem, transitionEndEventName, fn, {
@ -196,8 +208,8 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
} }
function onHideAnimationComplete(e) { function onHideAnimationComplete(e) {
var instance = this; const instance = this;
var elem = e.target; const elem = e.target;
elem.classList.add('hide'); elem.classList.add('hide');
@ -206,14 +218,14 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
} }
function hideComingUpNext() { function hideComingUpNext() {
var instance = this; const instance = this;
clearCountdownTextTimeout(this); clearCountdownTextTimeout(this);
if (!instance.options) { if (!instance.options) {
return; return;
} }
var elem = instance.options.parent; const elem = instance.options.parent;
if (!elem) { if (!elem) {
return; return;
@ -230,7 +242,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
elem.classList.add('upNextDialog-hidden'); elem.classList.add('upNextDialog-hidden');
var fn = onHideAnimationComplete.bind(instance); const fn = onHideAnimationComplete.bind(instance);
instance._onHideAnimationComplete = fn; instance._onHideAnimationComplete = fn;
dom.addEventListener(elem, transitionEndEventName, fn, { dom.addEventListener(elem, transitionEndEventName, fn, {
@ -239,12 +251,12 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
} }
function getTimeRemainingMs(instance) { function getTimeRemainingMs(instance) {
var options = instance.options; const options = instance.options;
if (options) { if (options) {
var runtimeTicks = playbackManager.duration(options.player); const runtimeTicks = playbackManager.duration(options.player);
if (runtimeTicks) { if (runtimeTicks) {
var timeRemainingTicks = runtimeTicks - playbackManager.currentTime(options.player); const timeRemainingTicks = runtimeTicks - playbackManager.currentTime(options.player);
return Math.round(timeRemainingTicks / 10000); return Math.round(timeRemainingTicks / 10000);
} }
@ -254,7 +266,7 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
} }
function startComingUpNextHideTimer(instance) { function startComingUpNextHideTimer(instance) {
var timeRemainingMs = getTimeRemainingMs(instance); const timeRemainingMs = getTimeRemainingMs(instance);
if (timeRemainingMs <= 0) { if (timeRemainingMs <= 0) {
return; return;
@ -266,14 +278,14 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
instance._countdownTextTimeout = setInterval(setNextVideoText.bind(instance), 400); instance._countdownTextTimeout = setInterval(setNextVideoText.bind(instance), 400);
} }
function UpNextDialog(options) { class UpNextDialog {
constructor(options) {
this.options = options; this.options = options;
init(this, options); init(this, options);
} }
show() {
UpNextDialog.prototype.show = function () { const elem = this.options.parent;
var elem = this.options.parent;
clearHideAnimationEventListeners(this, elem); clearHideAnimationEventListeners(this, elem);
@ -291,18 +303,18 @@ define(['dom', 'playbackManager', 'connectionManager', 'events', 'mediaInfo', 'l
} }
startComingUpNextHideTimer(this); startComingUpNextHideTimer(this);
}; }
hide() {
UpNextDialog.prototype.hide = function () {
hideComingUpNext.call(this); hideComingUpNext.call(this);
}; }
destroy() {
UpNextDialog.prototype.destroy = function () {
hideComingUpNext.call(this); hideComingUpNext.call(this);
this.options = null; this.options = null;
this.itemType = null; this.itemType = null;
}; }
}
return UpNextDialog; export default UpNextDialog;
});
/* eslint-enable indent */

133
src/components/userdatabuttons/userdatabuttons.js
View file

@ -1,21 +1,27 @@
define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-button-light', 'material-icons', 'emby-button', 'css!./userdatabuttons'], function (connectionManager, globalize, dom, itemHelper) { import connectionManager from 'connectionManager';
'use strict'; import globalize from 'globalize';
import dom from 'dom';
import itemHelper from 'itemHelper';
import 'paper-icon-button-light';
import 'material-icons';
import 'emby-button';
import 'css!./userdatabuttons';
var userDataMethods = { const userDataMethods = {
markPlayed: markPlayed, markPlayed: markPlayed,
markDislike: markDislike, markDislike: markDislike,
markLike: markLike, markLike: markLike,
markFavorite: markFavorite markFavorite: markFavorite
}; };
function getUserDataButtonHtml(method, itemId, serverId, buttonCssClass, iconCssClass, icon, tooltip, style) { function getUserDataButtonHtml(method, itemId, serverId, buttonCssClass, iconCssClass, icon, tooltip, style) {
if (style === 'fab-mini') { if (style === 'fab-mini') {
style = 'fab'; style = 'fab';
buttonCssClass = buttonCssClass ? (buttonCssClass + ' mini') : 'mini'; buttonCssClass = buttonCssClass ? (buttonCssClass + ' mini') : 'mini';
} }
var is = style === 'fab' ? 'emby-button' : 'paper-icon-button-light'; const is = style === 'fab' ? 'emby-button' : 'paper-icon-button-light';
var className = style === 'fab' ? 'autoSize fab' : 'autoSize'; let className = style === 'fab' ? 'autoSize fab' : 'autoSize';
if (buttonCssClass) { if (buttonCssClass) {
className += ' ' + buttonCssClass; className += ' ' + buttonCssClass;
@ -30,21 +36,21 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
iconCssClass += 'material-icons'; iconCssClass += 'material-icons';
return '<button title="' + tooltip + '" data-itemid="' + itemId + '" data-serverid="' + serverId + '" is="' + is + '" data-method="' + method + '" class="' + className + '"><span class="' + iconCssClass + ' ' + icon + '"></span></button>'; return '<button title="' + tooltip + '" data-itemid="' + itemId + '" data-serverid="' + serverId + '" is="' + is + '" data-method="' + method + '" class="' + className + '"><span class="' + iconCssClass + ' ' + icon + '"></span></button>';
} }
function onContainerClick(e) { function onContainerClick(e) {
var btnUserData = dom.parentWithClass(e.target, 'btnUserData'); const btnUserData = dom.parentWithClass(e.target, 'btnUserData');
if (!btnUserData) { if (!btnUserData) {
return; return;
} }
var method = btnUserData.getAttribute('data-method'); const method = btnUserData.getAttribute('data-method');
userDataMethods[method](btnUserData); userDataMethods[method](btnUserData);
} }
function fill(options) { function fill(options) {
var html = getIconsHtml(options); const html = getIconsHtml(options);
if (options.fillMode === 'insertAdjacent') { if (options.fillMode === 'insertAdjacent') {
options.element.insertAdjacentHTML(options.insertLocation || 'beforeend', html); options.element.insertAdjacentHTML(options.insertLocation || 'beforeend', html);
@ -59,44 +65,44 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
dom.addEventListener(options.element, 'click', onContainerClick, { dom.addEventListener(options.element, 'click', onContainerClick, {
passive: true passive: true
}); });
} }
function destroy(options) { function destroy(options) {
options.element.innerHTML = ''; options.element.innerHTML = '';
dom.removeEventListener(options.element, 'click', onContainerClick, { dom.removeEventListener(options.element, 'click', onContainerClick, {
passive: true passive: true
}); });
} }
function getIconsHtml(options) { function getIconsHtml(options) {
var item = options.item; const item = options.item;
var includePlayed = options.includePlayed; const includePlayed = options.includePlayed;
var cssClass = options.cssClass; const cssClass = options.cssClass;
var style = options.style; const style = options.style;
var html = ''; let html = '';
var userData = item.UserData || {}; const userData = item.UserData || {};
var itemId = item.Id; const itemId = item.Id;
if (itemHelper.isLocalItem(item)) { if (itemHelper.isLocalItem(item)) {
return html; return html;
} }
var btnCssClass = 'btnUserData'; let btnCssClass = 'btnUserData';
if (cssClass) { if (cssClass) {
btnCssClass += ' ' + cssClass; btnCssClass += ' ' + cssClass;
} }
var iconCssClass = options.iconCssClass; const iconCssClass = options.iconCssClass;
var serverId = item.ServerId; const serverId = item.ServerId;
if (includePlayed !== false) { if (includePlayed !== false) {
var tooltipPlayed = globalize.translate('MarkPlayed'); const tooltipPlayed = globalize.translate('MarkPlayed');
if (itemHelper.canMarkPlayed(item)) { if (itemHelper.canMarkPlayed(item)) {
if (userData.Played) { if (userData.Played) {
@ -107,7 +113,7 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
} }
} }
var tooltipFavorite = globalize.translate('Favorite'); const tooltipFavorite = globalize.translate('Favorite');
if (userData.IsFavorite) { if (userData.IsFavorite) {
html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData btnUserDataOn', iconCssClass, 'favorite', tooltipFavorite, style); html += getUserDataButtonHtml('markFavorite', itemId, serverId, btnCssClass + ' btnUserData btnUserDataOn', iconCssClass, 'favorite', tooltipFavorite, style);
} else { } else {
@ -115,13 +121,13 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
} }
return html; return html;
} }
function markFavorite(link) { function markFavorite(link) {
var id = link.getAttribute('data-itemid'); const id = link.getAttribute('data-itemid');
var serverId = link.getAttribute('data-serverid'); const serverId = link.getAttribute('data-serverid');
var markAsFavorite = !link.classList.contains('btnUserDataOn'); const markAsFavorite = !link.classList.contains('btnUserDataOn');
favorite(id, serverId, markAsFavorite); favorite(id, serverId, markAsFavorite);
@ -130,11 +136,11 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
} else { } else {
link.classList.remove('btnUserDataOn'); link.classList.remove('btnUserDataOn');
} }
} }
function markLike(link) { function markLike(link) {
var id = link.getAttribute('data-itemid'); const id = link.getAttribute('data-itemid');
var serverId = link.getAttribute('data-serverid'); const serverId = link.getAttribute('data-serverid');
if (!link.classList.contains('btnUserDataOn')) { if (!link.classList.contains('btnUserDataOn')) {
likes(id, serverId, true); likes(id, serverId, true);
@ -147,11 +153,11 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
} }
link.parentNode.querySelector('.btnDislike').classList.remove('btnUserDataOn'); link.parentNode.querySelector('.btnDislike').classList.remove('btnUserDataOn');
} }
function markDislike(link) { function markDislike(link) {
var id = link.getAttribute('data-itemid'); const id = link.getAttribute('data-itemid');
var serverId = link.getAttribute('data-serverid'); const serverId = link.getAttribute('data-serverid');
if (!link.classList.contains('btnUserDataOn')) { if (!link.classList.contains('btnUserDataOn')) {
likes(id, serverId, false); likes(id, serverId, false);
@ -164,11 +170,11 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
} }
link.parentNode.querySelector('.btnLike').classList.remove('btnUserDataOn'); link.parentNode.querySelector('.btnLike').classList.remove('btnUserDataOn');
} }
function markPlayed(link) { function markPlayed(link) {
var id = link.getAttribute('data-itemid'); const id = link.getAttribute('data-itemid');
var serverId = link.getAttribute('data-serverid'); const serverId = link.getAttribute('data-serverid');
if (!link.classList.contains('btnUserDataOn')) { if (!link.classList.contains('btnUserDataOn')) {
played(id, serverId, true); played(id, serverId, true);
@ -179,36 +185,35 @@ define(['connectionManager', 'globalize', 'dom', 'itemHelper', 'paper-icon-butto
link.classList.remove('btnUserDataOn'); link.classList.remove('btnUserDataOn');
} }
} }
function likes(id, serverId, isLiked) { function likes(id, serverId, isLiked) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked); return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked);
} }
function played(id, serverId, isPlayed) { function played(id, serverId, isPlayed) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
var method = isPlayed ? 'markPlayed' : 'markUnplayed'; const method = isPlayed ? 'markPlayed' : 'markUnplayed';
return apiClient[method](apiClient.getCurrentUserId(), id, new Date()); return apiClient[method](apiClient.getCurrentUserId(), id, new Date());
} }
function favorite(id, serverId, isFavorite) { function favorite(id, serverId, isFavorite) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite); return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite);
} }
function clearLike(id, serverId) { function clearLike(id, serverId) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id); return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id);
} }
return { export default {
fill: fill, fill: fill,
destroy: destroy, destroy: destroy,
getIconsHtml: getIconsHtml getIconsHtml: getIconsHtml
}; };
});

118
src/components/viewContainer.js
View file

@ -1,20 +1,20 @@
define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewContainer'], function (browser, dom, layoutManager) { import 'css!components/viewManager/viewContainer';
'use strict'; /* eslint-disable indent */
function setControllerClass(view, options) { function setControllerClass(view, options) {
if (options.controllerFactory) { if (options.controllerFactory) {
return Promise.resolve(); return Promise.resolve();
} }
var controllerUrl = view.getAttribute('data-controller'); let controllerUrl = view.getAttribute('data-controller');
if (controllerUrl) { if (controllerUrl) {
if (0 === controllerUrl.indexOf('__plugin/')) { if (controllerUrl.indexOf('__plugin/') === 0) {
controllerUrl = controllerUrl.substring('__plugin/'.length); controllerUrl = controllerUrl.substring('__plugin/'.length);
} }
controllerUrl = Dashboard.getConfigurationResourceUrl(controllerUrl); controllerUrl = Dashboard.getConfigurationResourceUrl(controllerUrl);
return getRequirePromise([controllerUrl]).then(function (ControllerFactory) { return import(controllerUrl).then((ControllerFactory) => {
options.controllerFactory = ControllerFactory; options.controllerFactory = ControllerFactory;
}); });
} }
@ -22,38 +22,30 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
return Promise.resolve(); return Promise.resolve();
} }
function getRequirePromise(deps) { export function loadView(options) {
return new Promise(function (resolve, reject) {
require(deps, resolve);
});
}
function loadView(options) {
if (!options.cancel) { if (!options.cancel) {
var selected = selectedPageIndex; const selected = selectedPageIndex;
var previousAnimatable = -1 === selected ? null : allPages[selected]; const previousAnimatable = selected === -1 ? null : allPages[selected];
var pageIndex = selected + 1; let pageIndex = selected + 1;
if (pageIndex >= pageContainerCount) { if (pageIndex >= pageContainerCount) {
pageIndex = 0; pageIndex = 0;
} }
var isPluginpage = -1 !== options.url.toLowerCase().indexOf('/configurationpage'); const isPluginpage = options.url.toLowerCase().indexOf('/configurationpage') !== -1;
var newViewInfo = normalizeNewView(options, isPluginpage); const newViewInfo = normalizeNewView(options, isPluginpage);
var newView = newViewInfo.elem; const newView = newViewInfo.elem;
var modulesToLoad = [];
return new Promise(function (resolve) { return new Promise((resolve) => {
require(modulesToLoad, function () { const currentPage = allPages[pageIndex];
var currentPage = allPages[pageIndex];
if (currentPage) { if (currentPage) {
triggerDestroy(currentPage); triggerDestroy(currentPage);
} }
var view = newView; let view = newView;
if ('string' == typeof view) { if (typeof view == 'string') {
view = document.createElement('div'); view = document.createElement('div');
view.innerHTML = newView; view.innerHTML = newView;
} }
@ -62,8 +54,8 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
if (currentPage) { if (currentPage) {
if (newViewInfo.hasScript && window.$) { if (newViewInfo.hasScript && window.$) {
view = $(view).appendTo(mainAnimatedPages)[0];
mainAnimatedPages.removeChild(currentPage); mainAnimatedPages.removeChild(currentPage);
view = $(view).appendTo(mainAnimatedPages)[0];
} else { } else {
mainAnimatedPages.replaceChild(view, currentPage); mainAnimatedPages.replaceChild(view, currentPage);
} }
@ -79,7 +71,7 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
view.setAttribute('data-type', options.type); view.setAttribute('data-type', options.type);
} }
var properties = []; const properties = [];
if (options.fullscreen) { if (options.fullscreen) {
properties.push('fullscreen'); properties.push('fullscreen');
@ -90,7 +82,7 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
} }
allPages[pageIndex] = view; allPages[pageIndex] = view;
setControllerClass(view, options).then(function () { setControllerClass(view, options).then(() => {
if (onBeforeChange) { if (onBeforeChange) {
onBeforeChange(view, false, options); onBeforeChange(view, false, options);
} }
@ -111,7 +103,6 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
resolve(view); resolve(view);
}); });
}); });
});
} }
} }
@ -125,33 +116,33 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
html = replaceAll(html, '<\/script>--\x3e', '<\/script>'); html = replaceAll(html, '<\/script>--\x3e', '<\/script>');
} }
var wrapper = document.createElement('div'); const wrapper = document.createElement('div');
wrapper.innerHTML = html; wrapper.innerHTML = html;
return wrapper.querySelector('div[data-role="page"]'); return wrapper.querySelector('div[data-role="page"]');
} }
function normalizeNewView(options, isPluginpage) { function normalizeNewView(options, isPluginpage) {
var viewHtml = options.view; const viewHtml = options.view;
if (-1 === viewHtml.indexOf('data-role="page"')) { if (viewHtml.indexOf('data-role="page"') === -1) {
return viewHtml; return viewHtml;
} }
var hasScript = -1 !== viewHtml.indexOf('<script'); let hasScript = viewHtml.indexOf('<script') !== -1;
var elem = parseHtml(viewHtml, hasScript); const elem = parseHtml(viewHtml, hasScript);
if (hasScript) { if (hasScript) {
hasScript = null != elem.querySelector('script'); hasScript = elem.querySelector('script') != null;
} }
var hasjQuery = false; let hasjQuery = false;
var hasjQuerySelect = false; let hasjQuerySelect = false;
var hasjQueryChecked = false; let hasjQueryChecked = false;
if (isPluginpage) { if (isPluginpage) {
hasjQuery = -1 != viewHtml.indexOf('jQuery') || -1 != viewHtml.indexOf('$(') || -1 != viewHtml.indexOf('$.'); hasjQuery = viewHtml.indexOf('jQuery') != -1 || viewHtml.indexOf('$(') != -1 || viewHtml.indexOf('$.') != -1;
hasjQueryChecked = -1 != viewHtml.indexOf('.checked('); hasjQueryChecked = viewHtml.indexOf('.checked(') != -1;
hasjQuerySelect = -1 != viewHtml.indexOf('.selectmenu('); hasjQuerySelect = viewHtml.indexOf('.selectmenu(') != -1;
} }
return { return {
@ -164,7 +155,7 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
} }
function beforeAnimate(allPages, newPageIndex, oldPageIndex) { function beforeAnimate(allPages, newPageIndex, oldPageIndex) {
for (var index = 0, length = allPages.length; index < length; index++) { for (let index = 0, length = allPages.length; index < length; index++) {
if (newPageIndex !== index && oldPageIndex !== index) { if (newPageIndex !== index && oldPageIndex !== index) {
allPages[index].classList.add('hide'); allPages[index].classList.add('hide');
} }
@ -172,33 +163,33 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
} }
function afterAnimate(allPages, newPageIndex) { function afterAnimate(allPages, newPageIndex) {
for (var index = 0, length = allPages.length; index < length; index++) { for (let index = 0, length = allPages.length; index < length; index++) {
if (newPageIndex !== index) { if (newPageIndex !== index) {
allPages[index].classList.add('hide'); allPages[index].classList.add('hide');
} }
} }
} }
function setOnBeforeChange(fn) { export function setOnBeforeChange(fn) {
onBeforeChange = fn; onBeforeChange = fn;
} }
function tryRestoreView(options) { export function tryRestoreView(options) {
var url = options.url; const url = options.url;
var index = currentUrls.indexOf(url); const index = currentUrls.indexOf(url);
if (-1 !== index) { if (index !== -1) {
var animatable = allPages[index]; const animatable = allPages[index];
var view = animatable; const view = animatable;
if (view) { if (view) {
if (options.cancel) { if (options.cancel) {
return; return;
} }
var selected = selectedPageIndex; const selected = selectedPageIndex;
var previousAnimatable = -1 === selected ? null : allPages[selected]; const previousAnimatable = selected === -1 ? null : allPages[selected];
return setControllerClass(view, options).then(function () { return setControllerClass(view, options).then(() => {
if (onBeforeChange) { if (onBeforeChange) {
onBeforeChange(view, true, options); onBeforeChange(view, true, options);
} }
@ -228,25 +219,28 @@ define(['browser', 'dom', 'layoutManager', 'css!components/viewManager/viewConta
view.dispatchEvent(new CustomEvent('viewdestroy', {})); view.dispatchEvent(new CustomEvent('viewdestroy', {}));
} }
function reset() { export function reset() {
allPages = []; allPages = [];
currentUrls = []; currentUrls = [];
mainAnimatedPages.innerHTML = ''; mainAnimatedPages.innerHTML = '';
selectedPageIndex = -1; selectedPageIndex = -1;
} }
var onBeforeChange; let onBeforeChange;
var mainAnimatedPages = document.querySelector('.mainAnimatedPages'); const mainAnimatedPages = document.querySelector('.mainAnimatedPages');
var allPages = []; let allPages = [];
var currentUrls = []; let currentUrls = [];
var pageContainerCount = 3; const pageContainerCount = 3;
var selectedPageIndex = -1; let selectedPageIndex = -1;
reset(); reset();
mainAnimatedPages.classList.remove('hide'); mainAnimatedPages.classList.remove('hide');
return {
/* eslint-enable indent */
export default {
loadView: loadView, loadView: loadView,
tryRestoreView: tryRestoreView, tryRestoreView: tryRestoreView,
reset: reset, reset: reset,
setOnBeforeChange: setOnBeforeChange setOnBeforeChange: setOnBeforeChange
}; };
});

82
src/components/viewManager/viewManager.js
View file

@ -1,20 +1,22 @@
define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], function (viewContainer, focusManager, queryString, layoutManager) { import viewContainer from 'viewContainer';
'use strict'; import focusManager from 'focusManager';
import queryString from 'queryString';
import layoutManager from 'layoutManager';
var currentView; let currentView;
var dispatchPageEvents; let dispatchPageEvents;
viewContainer.setOnBeforeChange(function (newView, isRestored, options) { viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
var lastView = currentView; const lastView = currentView;
if (lastView) { if (lastView) {
var beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true); const beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true);
if (!beforeHideResult) { if (!beforeHideResult) {
// todo: cancel // todo: cancel
} }
} }
var eventDetail = getViewEventDetail(newView, options, isRestored); const eventDetail = getViewEventDetail(newView, options, isRestored);
if (!newView.initComplete) { if (!newView.initComplete) {
newView.initComplete = true; newView.initComplete = true;
@ -31,17 +33,17 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
} }
dispatchViewEvent(newView, eventDetail, 'viewbeforeshow'); dispatchViewEvent(newView, eventDetail, 'viewbeforeshow');
}); });
function onViewChange(view, options, isRestore) { function onViewChange(view, options, isRestore) {
var lastView = currentView; const lastView = currentView;
if (lastView) { if (lastView) {
dispatchViewEvent(lastView, null, 'viewhide'); dispatchViewEvent(lastView, null, 'viewhide');
} }
currentView = view; currentView = view;
var eventDetail = getViewEventDetail(view, options, isRestore); const eventDetail = getViewEventDetail(view, options, isRestore);
if (!isRestore) { if (!isRestore) {
if (options.autoFocus !== false) { if (options.autoFocus !== false) {
@ -60,19 +62,19 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
if (dispatchPageEvents) { if (dispatchPageEvents) {
view.dispatchEvent(new CustomEvent('pageshow', eventDetail)); view.dispatchEvent(new CustomEvent('pageshow', eventDetail));
} }
} }
function getProperties(view) { function getProperties(view) {
var props = view.getAttribute('data-properties'); const props = view.getAttribute('data-properties');
if (props) { if (props) {
return props.split(','); return props.split(',');
} }
return []; return [];
} }
function dispatchViewEvent(view, eventInfo, eventName, isCancellable) { function dispatchViewEvent(view, eventInfo, eventName, isCancellable) {
if (!eventInfo) { if (!eventInfo) {
eventInfo = { eventInfo = {
detail: { detail: {
@ -86,7 +88,7 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
eventInfo.cancelable = isCancellable || false; eventInfo.cancelable = isCancellable || false;
var eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo)); const eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo));
if (dispatchPageEvents) { if (dispatchPageEvents) {
eventInfo.cancelable = false; eventInfo.cancelable = false;
@ -94,12 +96,12 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
} }
return eventResult; return eventResult;
} }
function getViewEventDetail(view, options, isRestore) { function getViewEventDetail(view, options, isRestore) {
var url = options.url; const url = options.url;
var index = url.indexOf('?'); const index = url.indexOf('?');
var params = index === -1 ? {} : queryString.parse(url.substring(index + 1)); const params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
return { return {
detail: { detail: {
@ -115,20 +117,18 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
bubbles: true, bubbles: true,
cancelable: false cancelable: false
}; };
} }
function resetCachedViews() { function resetCachedViews() {
// Reset all cached views whenever the skin changes // Reset all cached views whenever the skin changes
viewContainer.reset(); viewContainer.reset();
} }
document.addEventListener('skinunload', resetCachedViews); document.addEventListener('skinunload', resetCachedViews);
function ViewManager() { class ViewManager {
} loadView(options) {
const lastView = currentView;
ViewManager.prototype.loadView = function (options) {
var lastView = currentView;
// Record the element that has focus // Record the element that has focus
if (lastView) { if (lastView) {
@ -142,9 +142,9 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
viewContainer.loadView(options).then(function (view) { viewContainer.loadView(options).then(function (view) {
onViewChange(view, options); onViewChange(view, options);
}); });
}; }
ViewManager.prototype.tryRestoreView = function (options, onViewChanging) { tryRestoreView(options, onViewChanging) {
if (options.cancel) { if (options.cancel) {
return Promise.reject({ cancelled: true }); return Promise.reject({ cancelled: true });
} }
@ -158,15 +158,15 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
onViewChanging(); onViewChanging();
onViewChange(view, options, true); onViewChange(view, options, true);
}); });
}; }
ViewManager.prototype.currentView = function () { currentView() {
return currentView; return currentView;
}; }
ViewManager.prototype.dispatchPageEvents = function (value) { dispatchPageEvents(value) {
dispatchPageEvents = value; dispatchPageEvents = value;
}; }
}
return new ViewManager(); export default new ViewManager();
});

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

@ -1,57 +1,66 @@
define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'userSettings', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize, userSettings) { import dialogHelper from 'dialogHelper';
'use strict'; import layoutManager from 'layoutManager';
import globalize from 'globalize';
import * as userSettings from 'userSettings';
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';
function onSubmit(e) { function onSubmit(e) {
e.preventDefault(); e.preventDefault();
return false; return false;
} }
function initEditor(context, settings) { function initEditor(context, settings) {
context.querySelector('form').addEventListener('submit', onSubmit); context.querySelector('form').addEventListener('submit', onSubmit);
var elems = context.querySelectorAll('.viewSetting-checkboxContainer'); const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
for (var i = 0, length = elems.length; i < length; i++) { for (const elem of elems) {
elems[i].querySelector('input').checked = settings[elems[i].getAttribute('data-settingname')] || false; elem.querySelector('input').checked = settings[elem.getAttribute('data-settingname')] || false;
} }
context.querySelector('.selectImageType').value = settings.imageType || 'primary'; context.querySelector('.selectImageType').value = settings.imageType || 'primary';
} }
function saveValues(context, settings, settingsKey) { function saveValues(context, settings, settingsKey) {
var elems = context.querySelectorAll('.viewSetting-checkboxContainer'); const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
for (var i = 0, length = elems.length; i < length; i++) { for (const elem of elems) {
userSettings.set(settingsKey + '-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input').checked); userSettings.set(settingsKey + '-' + elem.getAttribute('data-settingname'), elem.querySelector('input').checked);
} }
userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value); userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value);
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(({default: scrollHelper}) => {
var fn = on ? 'on' : 'off'; const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
function showIfAllowed(context, selector, visible) { function showIfAllowed(context, selector, visible) {
var elem = context.querySelector(selector); const elem = context.querySelector(selector);
if (visible && !elem.classList.contains('hiddenFromViewSettings')) { if (visible && !elem.classList.contains('hiddenFromViewSettings')) {
elem.classList.remove('hide'); elem.classList.remove('hide');
} else { } else {
elem.classList.add('hide'); elem.classList.add('hide');
} }
}
class ViewSettings {
constructor() {
} }
show(options) {
function ViewSettings() {
}
ViewSettings.prototype.show = function (options) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['text!./viewSettings.template.html'], function (template) { import('text!./viewSettings.template.html').then(({default: template}) => {
var dialogOptions = { const dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -62,11 +71,11 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
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 += '<div class="formDialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>'; html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
@ -78,14 +87,14 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
dlg.innerHTML = globalize.translateHtml(html, 'core'); dlg.innerHTML = globalize.translateHtml(html, 'core');
var settingElements = dlg.querySelectorAll('.viewSetting'); const settingElements = dlg.querySelectorAll('.viewSetting');
for (var i = 0, length = settingElements.length; i < length; i++) { for (const settingElement of settingElements) {
if (options.visibleSettings.indexOf(settingElements[i].getAttribute('data-settingname')) === -1) { if (options.visibleSettings.indexOf(settingElement.getAttribute('data-settingname')) === -1) {
settingElements[i].classList.add('hide'); settingElement.classList.add('hide');
settingElements[i].classList.add('hiddenFromViewSettings'); settingElement.classList.add('hiddenFromViewSettings');
} else { } else {
settingElements[i].classList.remove('hide'); settingElement.classList.remove('hide');
settingElements[i].classList.remove('hiddenFromViewSettings'); settingElement.classList.remove('hiddenFromViewSettings');
} }
} }
@ -104,7 +113,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
centerFocus(dlg.querySelector('.formDialogContent'), false, true); centerFocus(dlg.querySelector('.formDialogContent'), false, true);
} }
var submitted; let submitted;
dlg.querySelector('.selectImageType').dispatchEvent(new CustomEvent('change', {})); dlg.querySelector('.selectImageType').dispatchEvent(new CustomEvent('change', {}));
@ -127,7 +136,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
}); });
}); });
}); });
}; }
}
return ViewSettings; export default ViewSettings;
});

37
src/config.template.json
View file

@ -1,3 +1,38 @@
{ {
"multiserver": false "multiserver": false,
"themes": [
{
"name": "Apple TV",
"id": "appletv"
}, {
"name": "Blue Radiance",
"id": "blueradiance"
}, {
"name": "Dark",
"id": "dark",
"default": true
}, {
"name": "Light",
"id": "light"
}, {
"name": "Purple Haze",
"id": "purplehaze"
}, {
"name": "WMC",
"id": "wmc"
}
],
"plugins": [
"plugins/playAccessValidation/plugin",
"plugins/experimentalWarnings/plugin",
"plugins/htmlAudioPlayer/plugin",
"plugins/htmlVideoPlayer/plugin",
"plugins/photoPlayer/plugin",
"plugins/bookPlayer/plugin",
"plugins/youtubePlayer/plugin",
"plugins/backdropScreensaver/plugin",
"plugins/logoScreensaver/plugin",
"plugins/sessionPlayer/plugin",
"plugins/chromecastPlayer/plugin"
]
} }

2
src/apikeys.html → src/controllers/dashboard/apikeys.html
View file

@ -3,7 +3,7 @@
<div class="content-primary"> <div class="content-primary">
<div class="detailSectionHeader"> <div class="detailSectionHeader">
<h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">${HeaderApiKeys}</h2> <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">${HeaderApiKeys}</h2>
<button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${ButtonAdd}"> <button is="emby-button" type="button" class="fab btnNewKey submit" style="margin-left:1em;" title="${Add}">
<span class="material-icons add" aria-hidden="true"></span> <span class="material-icons add" aria-hidden="true"></span>
</button> </button>
</div> </div>

0
src/dashboard.html → src/controllers/dashboard/dashboard.html
View file

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