diff --git a/.ci/azure-pipelines-build.yml b/.ci/azure-pipelines-build.yml index 128fe54605..026afe76a6 100644 --- a/.ci/azure-pipelines-build.yml +++ b/.ci/azure-pipelines-build.yml @@ -8,8 +8,6 @@ jobs: BuildConfiguration: development Production: BuildConfiguration: production - Standalone: - BuildConfiguration: standalone pool: vmImage: 'ubuntu-latest' @@ -39,10 +37,6 @@ jobs: displayName: 'Build Production' condition: eq(variables['BuildConfiguration'], 'production') - - script: 'yarn build:standalone' - displayName: 'Build Standalone' - condition: eq(variables['BuildConfiguration'], 'standalone') - - script: 'test -d dist' displayName: 'Check Build' diff --git a/.eslintrc.js b/.eslintrc.js index e5ee2dfe86..aabfd633f8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -25,7 +25,6 @@ module.exports = { 'eslint:recommended', // 'plugin:promise/recommended', 'plugin:import/errors', - 'plugin:import/warnings', 'plugin:eslint-comments/recommended', 'plugin:compat/recommended' ], @@ -79,16 +78,12 @@ module.exports = { // Dependency globals '$': 'readonly', 'jQuery': 'readonly', - 'requirejs': 'readonly', // Jellyfin globals 'ApiClient': 'writable', - 'AppInfo': 'writable', 'chrome': 'writable', 'DlnaProfilePage': 'writable', - 'Dashboard': 'writable', 'DashboardPage': 'writable', 'Emby': 'readonly', - 'Events': 'writable', 'getParameterByName': 'writable', 'getWindowLocationSearch': 'writable', 'Globalize': 'writable', @@ -98,8 +93,6 @@ module.exports = { 'LinkParser': 'writable', 'LiveTvHelpers': 'writable', 'MetadataEditor': 'writable', - 'pageClassOn': 'writable', - 'pageIdOn': 'writable', 'PlaylistViewer': 'writable', 'UserParentalControlPage': 'writable', 'Windows': 'readonly' diff --git a/debian/conffiles b/debian/conffiles new file mode 100644 index 0000000000..a4b2c557e9 --- /dev/null +++ b/debian/conffiles @@ -0,0 +1 @@ +/usr/share/jellyfin/web/config.json diff --git a/package.json b/package.json index 399fb4700e..bb1440bea2 100644 --- a/package.json +++ b/package.json @@ -10,23 +10,23 @@ "@babel/eslint-plugin": "^7.12.1", "@babel/plugin-proposal-class-properties": "^7.10.1", "@babel/plugin-proposal-private-methods": "^7.12.1", - "@babel/plugin-transform-modules-amd": "^7.12.1", - "@babel/polyfill": "^7.12.1", "@babel/preset-env": "^7.12.1", "autoprefixer": "^9.8.6", - "babel-loader": "^8.0.6", + "babel-loader": "^8.2.1", "browser-sync": "^2.26.13", + "clean-webpack-plugin": "^3.0.0", "confusing-browser-globals": "^1.0.10", - "copy-webpack-plugin": "^5.1.1", - "css-loader": "^5.0.0", + "copy-webpack-plugin": "^6.0.3", + "css-loader": "^5.0.1", "cssnano": "^4.1.10", "del": "^6.0.0", - "eslint": "^7.12.0", + "eslint": "^7.13.0", "eslint-plugin-compat": "^3.5.1", "eslint-plugin-eslint-comments": "^3.2.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-promise": "^4.2.1", - "file-loader": "^6.1.1", + "expose-loader": "^1.0.1", + "file-loader": "^6.2.0", "gulp": "^4.0.2", "gulp-babel": "^8.0.0", "gulp-cli": "^2.3.0", @@ -38,28 +38,33 @@ "gulp-mode": "^1.0.2", "gulp-postcss": "^8.0.0", "gulp-sass": "^4.0.2", - "gulp-sourcemaps": "^2.6.5", - "gulp-terser": "^1.4.0", + "gulp-sourcemaps": "^3.0.0", + "gulp-terser": "^1.4.1", + "html-loader": "^1.1.0", "html-webpack-plugin": "^4.5.0", "lazypipe": "^1.0.2", - "node-sass": "^4.13.1", + "node-sass": "^5.0.0", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", + "source-map-loader": "^1.1.1", "style-loader": "^2.0.0", "stylelint": "^13.7.2", "stylelint-config-rational-order": "^0.1.2", "stylelint-no-browser-hacks": "^1.2.1", "stylelint-order": "^4.1.0", - "webpack": "^5.2.0", + "webpack": "^5.4.0", + "webpack-cli": "^4.0.0", + "webpack-dev-server": "^3.11.0", "webpack-merge": "^4.2.2", - "webpack-stream": "^6.1.0", + "webpack-stream": "^6.1.1", + "workbox-webpack-plugin": "^5.1.4", "worker-plugin": "^5.0.0" }, "dependencies": { "alameda": "^1.4.0", "blurhash": "^1.1.3", "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz", - "core-js": "^3.6.5", + "core-js": "^3.7.0", "date-fns": "^2.16.1", "epubjs": "^0.3.85", "fast-text-encoding": "^1.0.3", @@ -77,301 +82,31 @@ "material-design-icons-iconfont": "^6.1.0", "native-promise-only": "^0.8.0-a", "page": "^1.11.6", - "query-string": "^6.13.6", + "pdfjs-dist": "2.5.207", "resize-observer-polyfill": "^1.5.1", + "sass": "^1.29.0", + "sass-loader": "^10.0.5", "screenfull": "^5.0.2", "sortablejs": "^1.12.0", - "swiper": "^6.3.4", + "swiper": "^6.3.5", "webcomponents.js": "^0.7.24", - "whatwg-fetch": "^3.4.1" + "whatwg-fetch": "^3.5.0", + "workbox-core": "^5.1.4", + "workbox-precaching": "^5.1.4" }, "babel": { "presets": [ - "@babel/preset-env" + [ + "@babel/preset-env", + { + "useBuiltIns": "usage", + "corejs": 3 + } + ] ], - "overrides": [ - { - "test": [ - "src/components/accessSchedule/accessSchedule.js", - "src/components/actionSheet/actionSheet.js", - "src/components/activitylog.js", - "src/components/alert.js", - "src/components/alphaPicker/alphaPicker.js", - "src/components/appFooter/appFooter.js", - "src/components/apphost.js", - "src/components/appRouter.js", - "src/components/autoFocuser.js", - "src/components/backdrop/backdrop.js", - "src/components/cardbuilder/cardBuilder.js", - "src/components/cardbuilder/chaptercardbuilder.js", - "src/components/cardbuilder/peoplecardbuilder.js", - "src/components/channelMapper/channelMapper.js", - "src/components/collectionEditor/collectionEditor.js", - "src/components/confirm/confirm.js", - "src/components/dialog/dialog.js", - "src/components/dialogHelper/dialogHelper.js", - "src/components/directorybrowser/directorybrowser.js", - "src/components/displaySettings/displaySettings.js", - "src/components/favoriteitems.js", - "src/components/fetchhelper.js", - "src/components/filterdialog/filterdialog.js", - "src/components/filtermenu/filtermenu.js", - "src/components/focusManager.js", - "src/components/groupedcards.js", - "src/components/guide/guide.js", - "src/components/guide/guide-settings.js", - "src/components/homeScreenSettings/homeScreenSettings.js", - "src/components/homesections/homesections.js", - "src/components/htmlMediaHelper.js", - "src/components/imageOptionsEditor/imageOptionsEditor.js", - "src/components/images/imageLoader.js", - "src/components/imageDownloader/imageDownloader.js", - "src/components/imageeditor/imageeditor.js", - "src/components/imageUploader/imageUploader.js", - "src/components/indicators/indicators.js", - "src/components/itemContextMenu.js", - "src/components/itemHelper.js", - "src/components/itemidentifier/itemidentifier.js", - "src/components/itemMediaInfo/itemMediaInfo.js", - "src/components/itemsrefresher.js", - "src/components/layoutManager.js", - "src/components/lazyLoader/lazyLoaderIntersectionObserver.js", - "src/components/libraryoptionseditor/libraryoptionseditor.js", - "src/components/listview/listview.js", - "src/components/loading/loading.js", - "src/components/maintabsmanager.js", - "src/components/mediainfo/mediainfo.js", - "src/components/mediaLibraryCreator/mediaLibraryCreator.js", - "src/components/mediaLibraryEditor/mediaLibraryEditor.js", - "src/components/metadataEditor/metadataEditor.js", - "src/components/metadataEditor/personEditor.js", - "src/components/multiSelect/multiSelect.js", - "src/components/notifications/notifications.js", - "src/components/nowPlayingBar/nowPlayingBar.js", - "src/components/packageManager.js", - "src/components/playback/brightnessosd.js", - "src/components/playback/mediasession.js", - "src/components/playback/nowplayinghelper.js", - "src/components/playback/playbackorientation.js", - "src/components/playback/playbackmanager.js", - "src/components/playback/playerSelectionMenu.js", - "src/components/playback/playersettingsmenu.js", - "src/components/playback/playmethodhelper.js", - "src/components/playback/playqueuemanager.js", - "src/components/playback/remotecontrolautoplay.js", - "src/components/playback/volumeosd.js", - "src/components/playbackSettings/playbackSettings.js", - "src/components/playerstats/playerstats.js", - "src/components/playlisteditor/playlisteditor.js", - "src/components/playmenu.js", - "src/components/pluginManager.js", - "src/components/prompt/prompt.js", - "src/components/qualityOptions.js", - "src/components/quickConnectSettings/quickConnectSettings.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/remotecontrol/remotecontrol.js", - "src/components/sanatizefilename.js", - "src/components/scrollManager.js", - "src/plugins/experimentalWarnings/plugin.js", - "src/plugins/sessionPlayer/plugin.js", - "src/plugins/htmlAudioPlayer/plugin.js", - "src/plugins/comicsPlayer/plugin.js", - "src/plugins/chromecastPlayer/plugin.js", - "src/components/slideshow/slideshow.js", - "src/components/sortmenu/sortmenu.js", - "src/plugins/htmlVideoPlayer/plugin.js", - "src/plugins/logoScreensaver/plugin.js", - "src/plugins/playAccessValidation/plugin.js", - "src/components/search/searchfields.js", - "src/components/search/searchresults.js", - "src/components/settingshelper.js", - "src/components/shortcuts.js", - "src/components/subtitleeditor/subtitleeditor.js", - "src/components/subtitlesync/subtitlesync.js", - "src/components/subtitlesettings/subtitleappearancehelper.js", - "src/components/subtitlesettings/subtitlesettings.js", - "src/components/syncPlay/groupSelectionMenu.js", - "src/components/syncPlay/playbackPermissionManager.js", - "src/components/syncPlay/syncPlayManager.js", - "src/components/syncPlay/timeSyncManager.js", - "src/components/themeMediaPlayer.js", - "src/components/tabbedview/tabbedview.js", - "src/components/viewManager/viewManager.js", - "src/components/tvproviders/schedulesdirect.js", - "src/components/tvproviders/xmltv.js", - "src/components/toast/toast.js", - "src/components/tunerPicker.js", - "src/components/upnextdialog/upnextdialog.js", - "src/components/userdatabuttons/userdatabuttons.js", - "src/components/viewContainer.js", - "src/components/viewSettings/viewSettings.js", - "src/components/castSenderApi.js", - "src/controllers/session/addServer/index.js", - "src/controllers/session/forgotPassword/index.js", - "src/controllers/session/resetPassword/index.js", - "src/controllers/session/login/index.js", - "src/controllers/session/selectServer/index.js", - "src/controllers/dashboard/apikeys.js", - "src/controllers/dashboard/dashboard.js", - "src/controllers/dashboard/devices/device.js", - "src/controllers/dashboard/devices/devices.js", - "src/controllers/dashboard/dlna/profile.js", - "src/controllers/dashboard/dlna/profiles.js", - "src/controllers/dashboard/dlna/settings.js", - "src/controllers/dashboard/encodingsettings.js", - "src/controllers/dashboard/general.js", - "src/controllers/dashboard/librarydisplay.js", - "src/controllers/dashboard/logs.js", - "src/controllers/music/musicalbums.js", - "src/controllers/music/musicartists.js", - "src/controllers/music/musicgenres.js", - "src/controllers/music/musicplaylists.js", - "src/controllers/music/musicrecommended.js", - "src/controllers/music/songs.js", - "src/controllers/dashboard/library.js", - "src/controllers/dashboard/metadataImages.js", - "src/controllers/dashboard/metadatanfo.js", - "src/controllers/dashboard/networking.js", - "src/controllers/dashboard/notifications/notification/index.js", - "src/controllers/dashboard/notifications/notifications/index.js", - "src/controllers/dashboard/playback.js", - "src/controllers/dashboard/plugins/add/index.js", - "src/controllers/dashboard/plugins/installed/index.js", - "src/controllers/dashboard/plugins/available/index.js", - "src/controllers/dashboard/plugins/repositories/index.js", - "src/controllers/dashboard/quickConnect.js", - "src/controllers/dashboard/scheduledtasks/scheduledtask.js", - "src/controllers/dashboard/scheduledtasks/scheduledtasks.js", - "src/controllers/dashboard/serveractivity.js", - "src/controllers/dashboard/streaming.js", - "src/controllers/dashboard/users/useredit.js", - "src/controllers/dashboard/users/userlibraryaccess.js", - "src/controllers/dashboard/users/usernew.js", - "src/controllers/dashboard/users/userparentalcontrol.js", - "src/controllers/dashboard/users/userpasswordpage.js", - "src/controllers/dashboard/users/userprofilespage.js", - "src/controllers/home.js", - "src/controllers/list.js", - "src/controllers/edititemmetadata.js", - "src/controllers/favorites.js", - "src/controllers/hometab.js", - "src/controllers/movies/moviecollections.js", - "src/controllers/movies/moviegenres.js", - "src/controllers/movies/movies.js", - "src/controllers/movies/moviesrecommended.js", - "src/controllers/movies/movietrailers.js", - "src/controllers/playback/nowplaying.js", - "src/controllers/playback/videoosd.js", - "src/controllers/itemDetails/index.js", - "src/controllers/playback/queue/index.js", - "src/controllers/playback/video/index.js", - "src/controllers/searchpage.js", - "src/controllers/livetv/livetvguide.js", - "src/controllers/livetvtuner.js", - "src/controllers/livetv/livetvsuggested.js", - "src/controllers/livetvstatus.js", - "src/controllers/livetvguideprovider.js", - "src/controllers/livetvsettings.js", - "src/controllers/livetv/livetvrecordings.js", - "src/controllers/livetv/livetvschedule.js", - "src/controllers/livetv/livetvseriestimers.js", - "src/controllers/livetv/livetvchannels.js", - "src/controllers/shows/episodes.js", - "src/controllers/shows/tvgenres.js", - "src/controllers/shows/tvlatest.js", - "src/controllers/shows/tvrecommended.js", - "src/controllers/shows/tvshows.js", - "src/controllers/shows/tvstudios.js", - "src/controllers/shows/tvupcoming.js", - "src/controllers/user/display/index.js", - "src/controllers/user/home/index.js", - "src/controllers/user/menu/index.js", - "src/controllers/user/playback/index.js", - "src/controllers/user/profile/index.js", - "src/controllers/user/quickConnect/index.js", - "src/controllers/user/subtitles/index.js", - "src/controllers/wizard/finish/index.js", - "src/controllers/wizard/remote/index.js", - "src/controllers/wizard/settings/index.js", - "src/controllers/wizard/start/index.js", - "src/controllers/wizard/user/index.js", - "src/elements/emby-button/emby-button.js", - "src/elements/emby-button/paper-icon-button-light.js", - "src/elements/emby-checkbox/emby-checkbox.js", - "src/elements/emby-collapse/emby-collapse.js", - "src/elements/emby-input/emby-input.js", - "src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js", - "src/elements/emby-itemscontainer/emby-itemscontainer.js", - "src/elements/emby-playstatebutton/emby-playstatebutton.js", - "src/elements/emby-programcell/emby-programcell.js", - "src/elements/emby-progressbar/emby-progressbar.js", - "src/elements/emby-progressring/emby-progressring.js", - "src/elements/emby-radio/emby-radio.js", - "src/elements/emby-ratingbutton/emby-ratingbutton.js", - "src/elements/emby-scrollbuttons/emby-scrollbuttons.js", - "src/elements/emby-scroller/emby-scroller.js", - "src/elements/emby-select/emby-select.js", - "src/elements/emby-slider/emby-slider.js", - "src/elements/emby-tabs/emby-tabs.js", - "src/elements/emby-textarea/emby-textarea.js", - "src/elements/emby-toggle/emby-toggle.js", - "src/libraries/screensavermanager.js", - "src/libraries/navdrawer/navdrawer.js", - "src/libraries/scroller.js", - "src/plugins/backdropScreensaver/plugin.js", - "src/plugins/bookPlayer/plugin.js", - "src/plugins/bookPlayer/tableOfContents.js", - "src/plugins/chromecastPlayer/chromecastHelper.js", - "src/plugins/photoPlayer/plugin.js", - "src/plugins/youtubePlayer/plugin.js", - "src/scripts/alphanumericshortcuts.js", - "src/scripts/autoBackdrops.js", - "src/scripts/autocast.js", - "src/scripts/browser.js", - "src/scripts/clientUtils.js", - "src/scripts/datetime.js", - "src/scripts/deleteHelper.js", - "src/scripts/dfnshelper.js", - "src/scripts/dom.js", - "src/scripts/editorsidebar.js", - "src/scripts/fileDownloader.js", - "src/scripts/filesystem.js", - "src/scripts/globalize.js", - "src/scripts/imagehelper.js", - "src/scripts/itembynamedetailpage.js", - "src/scripts/inputManager.js", - "src/scripts/autoThemes.js", - "src/scripts/themeManager.js", - "src/scripts/keyboardNavigation.js", - "src/scripts/libraryMenu.js", - "src/scripts/libraryBrowser.js", - "src/scripts/livetvcomponents.js", - "src/scripts/mouseManager.js", - "src/scripts/multiDownload.js", - "src/scripts/playlists.js", - "src/scripts/scrollHelper.js", - "src/scripts/serverNotifications.js", - "src/scripts/routes.js", - "src/scripts/settings/appSettings.js", - "src/scripts/settings/userSettings.js", - "src/scripts/settings/webSettings.js", - "src/scripts/shell.js", - "src/scripts/taskbutton.js", - "src/scripts/themeLoader.js", - "src/scripts/touchHelper.js" - ], - "plugins": [ - "@babel/plugin-transform-modules-amd", - "@babel/plugin-proposal-class-properties", - "@babel/plugin-proposal-private-methods" - ] - } + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-proposal-private-methods" ] }, "browserslist": [ @@ -392,11 +127,10 @@ ], "scripts": { "start": "yarn serve", - "serve": "gulp serve --development", - "prepare": "gulp --production", - "build:development": "gulp --development", - "build:production": "gulp --production", - "build:standalone": "gulp standalone --development", + "serve": "webpack serve --config webpack.dev.js", + "prepare": "webpack --config webpack.prod.js", + "build:development": "webpack --config webpack.dev.js", + "build:production": "webpack --config webpack.prod.js", "lint": "eslint \".\"", "stylelint": "stylelint \"src/**/*.css\"" } diff --git a/src/assets/css/clearbutton.css b/src/assets/css/clearbutton.scss similarity index 100% rename from src/assets/css/clearbutton.css rename to src/assets/css/clearbutton.scss diff --git a/src/assets/css/detailtable.css b/src/assets/css/detailtable.scss similarity index 100% rename from src/assets/css/detailtable.css rename to src/assets/css/detailtable.scss diff --git a/src/assets/css/flexstyles.css b/src/assets/css/flexstyles.scss similarity index 100% rename from src/assets/css/flexstyles.css rename to src/assets/css/flexstyles.scss diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.scss similarity index 66% rename from src/assets/css/fonts.css rename to src/assets/css/fonts.scss index 6e87f11d9d..32dc2e7bd6 100644 --- a/src/assets/css/fonts.css +++ b/src/assets/css/fonts.scss @@ -1,29 +1,26 @@ -html { +@mixin font($weight: null, $size: null) { font-family: "Noto Sans", sans-serif; + font-weight: $weight; + font-size: $size; +} + +html { + @include font; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } -h1, -h2, -h3 { - font-family: "Noto Sans", sans-serif; -} - h1 { - font-weight: 400; - font-size: 1.8em; + @include font(400, 1.8em); } h2 { - font-weight: 400; - font-size: 1.5em; + @include font(400, 1.5em); } h3 { - font-weight: 400; - font-size: 1.17em; + @include font(400, 1.17em); } .layout-tv { diff --git a/src/assets/css/fonts.sized.css b/src/assets/css/fonts.sized.css deleted file mode 100644 index f60a94f236..0000000000 --- a/src/assets/css/fonts.sized.css +++ /dev/null @@ -1,31 +0,0 @@ -h1 { - font-weight: 400; - font-size: 1.8em; -} - -.layout-desktop h1 { - font-size: 2em; -} - -h2 { - font-weight: 400; - font-size: 1.5em; -} - -h3 { - font-weight: 400; - font-size: 1.17em; -} - -@media all and (min-height: 720px) { - html { - font-size: 20px; - } -} - -/* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */ -@media all and (min-height: 1000px) { - html { - font-size: 27px; - } -} diff --git a/src/assets/css/fonts.sized.scss b/src/assets/css/fonts.sized.scss new file mode 100644 index 0000000000..1cec58a4a6 --- /dev/null +++ b/src/assets/css/fonts.sized.scss @@ -0,0 +1,31 @@ +@mixin header-font($size: null) { + font-weight: 400; + font-size: $size; +} + +html { + @media all and (min-height: 720px) { + font-size: 20px; + } + + /* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */ + @media all and (min-height: 1000px) { + font-size: 27px; + } +} + +h1 { + @include header-font(1.8em); + + .layout-desktop & { + font-size: 2em; + } +} + +h2 { + @include header-font(1.8em); +} + +h3 { + @include header-font(1.17em); +} diff --git a/src/assets/css/ios.css b/src/assets/css/ios.scss similarity index 100% rename from src/assets/css/ios.css rename to src/assets/css/ios.scss diff --git a/src/assets/css/livetv.css b/src/assets/css/livetv.scss similarity index 63% rename from src/assets/css/livetv.css rename to src/assets/css/livetv.scss index 695adff8c5..032bcddf48 100644 --- a/src/assets/css/livetv.css +++ b/src/assets/css/livetv.scss @@ -2,8 +2,8 @@ padding-bottom: 15em; } -@media all and (min-width: 62.5em) { - #guideTab { +#guideTab { + @media all and (min-width: 62.5em) { padding-left: 0.5em; } } diff --git a/src/assets/css/site.css b/src/assets/css/site.scss similarity index 83% rename from src/assets/css/site.css rename to src/assets/css/site.scss index 38e056df89..3d4ea7da0e 100644 --- a/src/assets/css/site.css +++ b/src/assets/css/site.scss @@ -1,14 +1,19 @@ -body, -html { +@mixin fullpage { margin: 0; padding: 0; height: 100%; } -.layout-mobile, -.layout-tv { - -webkit-touch-callout: none; - user-select: none; +html { + @include fullpage; + line-height: 1.35; +} + +body { + @include fullpage; + overflow-x: hidden; + background-color: transparent !important; + -webkit-font-smoothing: antialiased; } .clipForScreenReader { @@ -36,14 +41,10 @@ html { contain: strict; } -html { - line-height: 1.35; -} - -body { - overflow-x: hidden; - background-color: transparent !important; - -webkit-font-smoothing: antialiased; +.layout-mobile, +.layout-tv { + -webkit-touch-callout: none; + user-select: none; } .mainAnimatedPage { @@ -58,7 +59,7 @@ body { overflow-y: hidden !important; } -div[data-role=page] { +div[data-role="page"] { outline: 0; } @@ -71,10 +72,10 @@ div[data-role=page] { padding-left: 0.15em; font-weight: 400; white-space: normal !important; -} -.fieldDescription + .fieldDescription { - margin-top: 0.3em; + + .fieldDescription { + margin-top: 0.3em; + } } .content-primary, @@ -85,9 +86,14 @@ div[data-role=page] { padding-bottom: 5em !important; } -@media all and (min-width: 50em) { - .readOnlyContent, - form { +.readOnlyContent { + @media all and (min-width: 50em) { + max-width: 54em; + } +} + +form { + @media all and (min-width: 50em) { max-width: 54em; } } @@ -107,14 +113,14 @@ div[data-role=page] { .headroom { will-change: transform; transition: transform 200ms linear; -} -.headroom--pinned { - transform: translateY(0%); -} + &--pinned { + transform: translateY(0%); + } -.headroom--unpinned { - transform: translateY(-100%); + &--unpinned { + transform: translateY(-100%); + } } .drawerContent { diff --git a/src/bundle.js b/src/bundle.js deleted file mode 100644 index 3d1d600a9f..0000000000 --- a/src/bundle.js +++ /dev/null @@ -1,183 +0,0 @@ -/** - * require.js module definitions bundled by webpack - */ -// Use define from require.js not webpack's define -const _define = window.define; - -// fetch -const fetch = require('whatwg-fetch'); -_define('fetch', function() { - return fetch; -}); - -// Blurhash -const blurhash = require('blurhash'); -_define('blurhash', function() { - return blurhash; -}); - -// query-string -const query = require('query-string'); -_define('queryString', function() { - return query; -}); - -// flvjs -const flvjs = require('flv.js/dist/flv').default; -_define('flvjs', function() { - return flvjs; -}); - -// jstree -const jstree = require('jstree'); -require('jstree/dist/themes/default/style.css'); -_define('jstree', function() { - return jstree; -}); - -// jquery -const jquery = require('jquery'); -_define('jQuery', function() { - return jquery; -}); - -// hlsjs -const hlsjs = require('hls.js'); -_define('hlsjs', function() { - return hlsjs; -}); - -// howler -const howler = require('howler'); -_define('howler', function() { - return howler; -}); - -// resize-observer-polyfill -const resize = require('resize-observer-polyfill').default; -_define('resize-observer-polyfill', function() { - return resize; -}); - -// swiper -const swiper = require('swiper/swiper-bundle'); -require('swiper/swiper-bundle.css'); -_define('swiper', function() { - return swiper; -}); - -// sortable -const sortable = require('sortablejs').default; -_define('sortable', function() { - return sortable; -}); - -// webcomponents -const webcomponents = require('webcomponents.js/webcomponents-lite'); -_define('webcomponents', function() { - return webcomponents; -}); - -// libass-wasm -const libassWasm = require('libass-wasm'); -_define('JavascriptSubtitlesOctopus', function() { - return libassWasm; -}); - -// material-icons -const materialIcons = require('material-design-icons-iconfont/dist/material-design-icons.css'); -_define('material-icons', function() { - return materialIcons; -}); - -// noto font -const noto = require('jellyfin-noto'); -_define('jellyfin-noto', function () { - return noto; -}); - -const epubjs = require('epubjs'); -_define('epubjs', function () { - return epubjs; -}); - -// page.js -const page = require('page'); -_define('page', function() { - return page; -}); - -// core-js -const polyfill = require('@babel/polyfill/dist/polyfill'); -_define('polyfill', function () { - return polyfill; -}); - -// domtokenlist-shim -const classlist = require('classlist.js'); -_define('classlist-polyfill', function () { - return classlist; -}); - -// Date-FNS -const dateFns = require('date-fns'); -_define('date-fns', function () { - return dateFns; -}); - -const dateFnsLocale = require('date-fns/locale'); -_define('date-fns/locale', function () { - return dateFnsLocale; -}); - -const fast_text_encoding = require('fast-text-encoding'); -_define('fast-text-encoding', function () { - return fast_text_encoding; -}); - -// intersection-observer -const intersection_observer = require('intersection-observer'); -_define('intersection-observer', function () { - return intersection_observer; -}); - -// screenfull -const screenfull = require('screenfull'); -_define('screenfull', function () { - return screenfull; -}); - -// headroom.js -const headroom = require('headroom.js/dist/headroom'); -_define('headroom', function () { - return headroom; -}); - -// apiclient -const apiclient = require('jellyfin-apiclient'); - -_define('apiclient', function () { - return apiclient.ApiClient; -}); - -_define('events', function () { - return apiclient.Events; -}); - -_define('credentialprovider', function () { - return apiclient.Credentials; -}); - -_define('connectionManagerFactory', function () { - return apiclient.ConnectionManager; -}); - -_define('appStorage', function () { - return apiclient.AppStorage; -}); - -// libarchive.js -const libarchive = require('libarchive.js'); -_define('libarchive', function () { - return libarchive; -}); diff --git a/src/components/AppInfo.js b/src/components/AppInfo.js new file mode 100644 index 0000000000..a89c55d0b1 --- /dev/null +++ b/src/components/AppInfo.js @@ -0,0 +1,4 @@ + +export default { + isNativeApp: false +}; diff --git a/src/components/ServerConnections.js b/src/components/ServerConnections.js new file mode 100644 index 0000000000..316f42558d --- /dev/null +++ b/src/components/ServerConnections.js @@ -0,0 +1,82 @@ +import { ConnectionManager, Credentials, ApiClient, Events } from 'jellyfin-apiclient'; +import { appHost } from './apphost'; +import Dashboard from '../scripts/clientUtils'; +import AppInfo from './AppInfo'; +import { setUserInfo } from '../scripts/settings/userSettings'; + +class ServerConnections extends ConnectionManager { + constructor() { + super(...arguments); + this.localApiClient = null; + + Events.on(this, 'localusersignedout', function () { + setUserInfo(null, null); + }); + } + + initApiClient() { + if (!AppInfo.isNativeApp) { + console.debug('creating ApiClient singleton'); + + const apiClient = new ApiClient( + Dashboard.serverAddress(), + appHost.appName(), + appHost.appVersion(), + appHost.deviceName(), + appHost.deviceId() + ); + + apiClient.enableAutomaticNetworking = false; + apiClient.manualAddressOnly = true; + + this.addApiClient(apiClient); + + this.setLocalApiClient(apiClient); + + console.debug('loaded ApiClient singleton'); + } + } + + setLocalApiClient(apiClient) { + if (apiClient) { + this.localApiClient = apiClient; + window.ApiClient = apiClient; + } + } + + getLocalApiClient() { + return this.localApiClient; + } + + currentApiClient() { + let apiClient = this.getLocalApiClient(); + + if (!apiClient) { + const server = this.getLastUsedServer(); + + if (server) { + apiClient = this.getApiClient(server.Id); + } + } + + return apiClient; + } + + onLocalUserSignedIn(user) { + const apiClient = this.getApiClient(user.ServerId); + this.setLocalApiClient(apiClient); + return setUserInfo(user.Id, apiClient); + } +} + +const credentials = new Credentials(); + +const capabilities = Dashboard.capabilities(appHost); + +export default new ServerConnections( + credentials, + appHost.appName(), + appHost.appVersion(), + appHost.deviceName(), + appHost.deviceId(), + capabilities); diff --git a/src/components/accessSchedule/accessSchedule.js b/src/components/accessSchedule/accessSchedule.js index b513766d0b..9e0e3d5cf9 100644 --- a/src/components/accessSchedule/accessSchedule.js +++ b/src/components/accessSchedule/accessSchedule.js @@ -1,3 +1,4 @@ + /* eslint-disable indent */ /** @@ -5,12 +6,12 @@ * @module components/accessSchedule/accessSchedule */ -import dialogHelper from 'dialogHelper'; -import datetime from 'datetime'; -import globalize from 'globalize'; -import 'emby-select'; -import 'paper-icon-button-light'; -import 'formDialogStyle'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import datetime from '../../scripts/datetime'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-select/emby-select'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../formdialog.css'; function getDisplayTime(hours) { let minutes = 0; @@ -59,7 +60,7 @@ import 'formDialogStyle'; export function show(options) { return new Promise((resolve, reject) => { - import('text!./accessSchedule.template.html').then(({default: template}) => { + import('./accessSchedule.template.html').then(({default: template}) => { const dlg = dialogHelper.createDialog({ removeOnClose: true, size: 'small' diff --git a/src/components/actionSheet/actionSheet.js b/src/components/actionSheet/actionSheet.js index be84cf0a06..85df1b2c60 100644 --- a/src/components/actionSheet/actionSheet.js +++ b/src/components/actionSheet/actionSheet.js @@ -1,12 +1,12 @@ -import dialogHelper from 'dialogHelper'; -import layoutManager from 'layoutManager'; -import globalize from 'globalize'; -import dom from 'dom'; -import 'emby-button'; -import 'css!./actionSheet'; -import 'material-icons'; -import 'scrollStyles'; -import 'listViewStyle'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import layoutManager from '../layoutManager'; +import globalize from '../../scripts/globalize'; +import dom from '../../scripts/dom'; +import '../../elements/emby-button/emby-button'; +import './actionSheet.css'; +import 'material-design-icons-iconfont'; +import '../../assets/css/scrollstyles.css'; +import '../../components/listview/listview.css'; function getOffsets(elems) { const results = []; @@ -71,7 +71,7 @@ function getPosition(options, dlg) { } function centerFocus(elem, horiz, on) { - import('scrollHelper').then(({default: scrollHelper}) => { + import('../../scripts/scrollHelper').then((scrollHelper) => { const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); diff --git a/src/components/activitylog.js b/src/components/activitylog.js index 3878d03355..78967b3a34 100644 --- a/src/components/activitylog.js +++ b/src/components/activitylog.js @@ -1,11 +1,13 @@ -import events from 'events'; -import globalize from 'globalize'; -import dom from 'dom'; +import { Events } from 'jellyfin-apiclient'; +import globalize from '../scripts/globalize'; +import dom from '../scripts/dom'; import * as datefns from 'date-fns'; -import dfnshelper from 'dfnshelper'; -import serverNotifications from 'serverNotifications'; -import 'emby-button'; -import 'listViewStyle'; +import dfnshelper from '../scripts/dfnshelper'; +import serverNotifications from '../scripts/serverNotifications'; +import '../elements/emby-button/emby-button'; +import './listview/listview.css'; +import ServerConnections from './ServerConnections'; +import alert from './alert'; /* eslint-disable indent */ @@ -127,10 +129,8 @@ import 'listViewStyle'; } function showItemOverview(item) { - import('alert').then(({default: alert}) => { - alert({ - text: item.Overview - }); + alert({ + text: item.Overview }); } @@ -140,11 +140,11 @@ class ActivityLog { const element = options.element; element.classList.add('activityLogListWidget'); element.addEventListener('click', onListClick.bind(this)); - const apiClient = window.connectionManager.getApiClient(options.serverId); + const apiClient = ServerConnections.getApiClient(options.serverId); reloadData(this, element, apiClient); const onUpdate = onActivityLogUpdate.bind(this); this.updateFn = onUpdate; - events.on(serverNotifications, 'ActivityLogEntry', onUpdate); + Events.on(serverNotifications, 'ActivityLogEntry', onUpdate); apiClient.sendMessage('ActivityLogEntryStart', '0,1500'); } destroy() { @@ -152,13 +152,13 @@ class ActivityLog { if (options) { options.element.classList.remove('activityLogListWidget'); - window.connectionManager.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500'); + ServerConnections.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500'); } const onUpdate = this.updateFn; if (onUpdate) { - events.off(serverNotifications, 'ActivityLogEntry', onUpdate); + Events.off(serverNotifications, 'ActivityLogEntry', onUpdate); } this.items = null; diff --git a/src/components/alert.js b/src/components/alert.js index 1420c7f428..2938cb7c70 100644 --- a/src/components/alert.js +++ b/src/components/alert.js @@ -1,6 +1,7 @@ -import browser from 'browser'; -import dialog from 'dialog'; -import globalize from 'globalize'; + +import browser from '../scripts/browser'; +import dialog from './dialog/dialog'; +import globalize from '../scripts/globalize'; /* eslint-disable indent */ diff --git a/src/components/alphaPicker/alphaPicker.js b/src/components/alphaPicker/alphaPicker.js index 95b5881677..9caa1b015c 100644 --- a/src/components/alphaPicker/alphaPicker.js +++ b/src/components/alphaPicker/alphaPicker.js @@ -5,12 +5,12 @@ * @module components/alphaPicker/alphaPicker */ -import focusManager from 'focusManager'; -import layoutManager from 'layoutManager'; -import dom from 'dom'; -import 'css!./style.css'; -import 'paper-icon-button-light'; -import 'material-icons'; +import focusManager from '../focusManager'; +import layoutManager from '../layoutManager'; +import dom from '../../scripts/dom'; +import './style.css'; +import '../../elements/emby-button/paper-icon-button-light'; +import 'material-design-icons-iconfont'; const selectedButtonClass = 'alphaPickerButton-selected'; diff --git a/src/components/appFooter/appFooter.js b/src/components/appFooter/appFooter.js index 260aea8280..3b65824490 100644 --- a/src/components/appFooter/appFooter.js +++ b/src/components/appFooter/appFooter.js @@ -1,4 +1,4 @@ -import 'css!./appFooter'; +import './appFooter.css'; function render(options) { const elem = document.createElement('div'); @@ -33,4 +33,4 @@ class appFooter { } } -export default appFooter; +export default new appFooter({}); diff --git a/src/components/appRouter.js b/src/components/appRouter.js index a6bb6da618..76a76e516a 100644 --- a/src/components/appRouter.js +++ b/src/components/appRouter.js @@ -1,13 +1,17 @@ -import appHost from 'apphost'; -import appSettings from 'appSettings'; -import backdrop from 'backdrop'; -import browser from 'browser'; -import events from 'events'; -import globalize from 'globalize'; -import itemHelper from 'itemHelper'; -import loading from 'loading'; +import { appHost } from './apphost'; +import appSettings from '../scripts/settings/appSettings'; +import backdrop from './backdrop/backdrop'; +import browser from '../scripts/browser'; +import { Events } from 'jellyfin-apiclient'; +import globalize from '../scripts/globalize'; +import itemHelper from './itemHelper'; +import loading from './loading/loading'; import page from 'page'; -import viewManager from 'viewManager'; +import viewManager from './viewManager/viewManager'; +import AppInfo from './AppInfo'; +import Dashboard from '../scripts/clientUtils'; +import ServerConnections from './ServerConnections'; +import alert from './alert'; class AppRouter { allRoutes = []; @@ -94,7 +98,7 @@ class AppRouter { beginConnectionWizard() { backdrop.clearBackdrop(); loading.show(); - window.connectionManager.connect({ + ServerConnections.connect({ enableAutoLogin: appSettings.enableAutoLogin() }).then((result) => { this.handleConnectionResult(result); @@ -150,10 +154,10 @@ class AppRouter { loading.show(); this.initApiClients(); - events.on(appHost, 'beforeexit', this.onBeforeExit); - events.on(appHost, 'resume', this.onAppResume); + Events.on(appHost, 'beforeexit', this.onBeforeExit); + Events.on(appHost, 'resume', this.onAppResume); - window.connectionManager.connect({ + ServerConnections.connect({ enableAutoLogin: appSettings.enableAutoLogin() }).then((result) => { this.firstConnectionResult = result; @@ -209,7 +213,7 @@ class AppRouter { showItem(item, serverId, options) { // TODO: Refactor this so it only gets items, not strings. if (typeof (item) === 'string') { - const apiClient = serverId ? window.connectionManager.getApiClient(serverId) : window.connectionManager.currentApiClient(); + const apiClient = serverId ? ServerConnections.getApiClient(serverId) : ServerConnections.currentApiClient(); apiClient.getItem(apiClient.getCurrentUserId(), item).then((itemObject) => { this.showItem(itemObject, options); }); @@ -268,7 +272,7 @@ class AppRouter { switch (result.State) { case 'SignedIn': loading.hide(); - Emby.Page.goHome(); + this.goHome(); break; case 'ServerSignIn': result.ApiClient.getPublicUsers().then((users) => { @@ -286,13 +290,11 @@ class AppRouter { this.showWelcome(); break; case 'ServerUpdateNeeded': - import('alert').then(({default: alert}) =>{ - alert({ - text: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin'), - html: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin') - }).then(() => { - this.showSelectServer(); - }); + alert({ + text: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin'), + html: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin') + }).then(() => { + this.showSelectServer(); }); break; default: @@ -308,22 +310,20 @@ class AppRouter { url = route.contentPath || route.path; } - if (url.includes('configurationpage')) { - url = ApiClient.getUrl('/web' + url); - } else if (url.indexOf('://') === -1) { - // Put a slash at the beginning but make sure to avoid a double slash - if (url.indexOf('/') !== 0) { - url = '/' + url; - } - - url = this.baseUrl() + url; - } - if (ctx.querystring && route.enableContentQueryString) { url += '?' + ctx.querystring; } - import('text!' + url).then(({default: html}) => { + let promise; + if (route.serverRequest) { + const apiClient = ServerConnections.currentApiClient(); + url = apiClient.getUrl(`/web${url}`); + promise = apiClient.get(url); + } else { + promise = import(/* webpackChunkName: "[request]" */ `../controllers/${url}`); + } + + promise.then((html) => { this.loadContent(ctx, route, html, request); }); } @@ -340,7 +340,7 @@ class AppRouter { }; if (route.controller) { - import('controllers/' + route.controller).then(onInitComplete); + import('../controllers/' + route.controller).then(onInitComplete); } else { onInitComplete(); } @@ -407,9 +407,7 @@ class AppRouter { this.forcedLogoutMsg = null; if (msg) { - import('alert').then((alert) => { - alert(msg); - }); + alert(msg); } } @@ -484,8 +482,8 @@ class AppRouter { newApiClient.getMaxBandwidth = this.getMaxBandwidth; } - events.off(newApiClient, 'requestfail', this.onRequestFail); - events.on(newApiClient, 'requestfail', this.onRequestFail); + Events.off(newApiClient, 'requestfail', this.onRequestFail); + Events.on(newApiClient, 'requestfail', this.onRequestFail); } initApiClient(apiClient, instance) { @@ -493,15 +491,15 @@ class AppRouter { } initApiClients() { - window.connectionManager.getApiClients().forEach((apiClient) => { + ServerConnections.getApiClients().forEach((apiClient) => { this.initApiClient(apiClient, this); }); - events.on(window.connectionManager, 'apiclientcreated', this.onApiClientCreated); + Events.on(ServerConnections, 'apiclientcreated', this.onApiClientCreated); } onAppResume() { - const apiClient = window.connectionManager.currentApiClient(); + const apiClient = ServerConnections.currentApiClient(); if (apiClient) { apiClient.ensureWebSocket(); @@ -519,7 +517,7 @@ class AppRouter { } } - const apiClient = window.connectionManager.currentApiClient(); + const apiClient = ServerConnections.currentApiClient(); const pathname = ctx.pathname.toLowerCase(); console.debug('appRouter - processing path request ' + pathname); @@ -546,7 +544,7 @@ class AppRouter { if (route.isDefaultRoute) { console.debug('appRouter - loading skin home page'); - Emby.Page.goHome(); + this.goHome(); return; } else if (route.roles) { this.validateRoles(apiClient, route.roles).then(() => { @@ -846,4 +844,8 @@ class AppRouter { } } -export default new AppRouter(); +export const appRouter = new AppRouter(); + +window.Emby = window.Emby || {}; + +window.Emby.Page = appRouter; diff --git a/src/components/apphost.js b/src/components/apphost.js index 875c7907e6..c99f5aa9c3 100644 --- a/src/components/apphost.js +++ b/src/components/apphost.js @@ -1,9 +1,11 @@ -import appSettings from 'appSettings'; -import browser from 'browser'; -import events from 'events'; -import * as htmlMediaHelper from 'htmlMediaHelper'; -import * as webSettings from 'webSettings'; -import globalize from 'globalize'; + +import appSettings from '../scripts/settings/appSettings'; +import browser from '../scripts/browser'; +import { Events } from 'jellyfin-apiclient'; +import * as htmlMediaHelper from '../components/htmlMediaHelper'; +import * as webSettings from '../scripts/settings/webSettings'; +import globalize from '../scripts/globalize'; +import profileBuilder from '../scripts/browserDeviceProfile'; function getBaseProfileOptions(item) { const disableHlsVideoAudioCodecs = []; @@ -26,19 +28,17 @@ function getBaseProfileOptions(item) { function getDeviceProfile(item, options = {}) { return new Promise(function (resolve) { - import('browserdeviceprofile').then(({default: profileBuilder}) => { - let profile; + let profile; - if (window.NativeShell) { - profile = window.NativeShell.AppHost.getDeviceProfile(profileBuilder); - } else { - const builderOpts = getBaseProfileOptions(item); - builderOpts.enableSsaRender = (item && !options.isRetry && appSettings.get('subtitleburnin') !== 'allcomplexformats'); - profile = profileBuilder(builderOpts); - } + if (window.NativeShell) { + profile = window.NativeShell.AppHost.getDeviceProfile(profileBuilder); + } else { + const builderOpts = getBaseProfileOptions(item); + builderOpts.enableSsaRender = (item && !options.isRetry && appSettings.get('subtitleburnin') !== 'allcomplexformats'); + profile = profileBuilder(builderOpts); + } - resolve(profile); - }); + resolve(profile); }); } @@ -57,60 +57,62 @@ function generateDeviceId() { if (keys.push(navigator.userAgent), keys.push(new Date().getTime()), window.btoa) { const result = replaceAll(btoa(keys.join('|')), '=', '1'); - return Promise.resolve(result); + return result; } - return Promise.resolve(new Date().getTime()); + return new Date().getTime(); } function getDeviceId() { - const key = '_deviceId2'; - const deviceId = appSettings.get(key); + if (!deviceId) { + const key = '_deviceId2'; - if (deviceId) { - return Promise.resolve(deviceId); + deviceId = appSettings.get(key); + + if (!deviceId) { + deviceId = generateDeviceId(); + appSettings.set(key, deviceId); + } } - return generateDeviceId().then(function (deviceId) { - appSettings.set(key, deviceId); - return deviceId; - }); + return deviceId; } function getDeviceName() { - let deviceName; - if (browser.tizen) { - deviceName = 'Samsung Smart TV'; - } else if (browser.web0s) { - deviceName = 'LG Smart TV'; - } else if (browser.operaTv) { - deviceName = 'Opera TV'; - } else if (browser.xboxOne) { - deviceName = 'Xbox One'; - } else if (browser.ps4) { - deviceName = 'Sony PS4'; - } else if (browser.chrome) { - deviceName = 'Chrome'; - } else if (browser.edgeChromium) { - deviceName = 'Edge Chromium'; - } else if (browser.edge) { - deviceName = 'Edge'; - } else if (browser.firefox) { - deviceName = 'Firefox'; - } else if (browser.opera) { - deviceName = 'Opera'; - } else if (browser.safari) { - deviceName = 'Safari'; - } else { - deviceName = 'Web Browser'; - } + if (!deviceName) { + if (browser.tizen) { + deviceName = 'Samsung Smart TV'; + } else if (browser.web0s) { + deviceName = 'LG Smart TV'; + } else if (browser.operaTv) { + deviceName = 'Opera TV'; + } else if (browser.xboxOne) { + deviceName = 'Xbox One'; + } else if (browser.ps4) { + deviceName = 'Sony PS4'; + } else if (browser.chrome) { + deviceName = 'Chrome'; + } else if (browser.edgeChromium) { + deviceName = 'Edge Chromium'; + } else if (browser.edge) { + deviceName = 'Edge'; + } else if (browser.firefox) { + deviceName = 'Firefox'; + } else if (browser.opera) { + deviceName = 'Opera'; + } else if (browser.safari) { + deviceName = 'Safari'; + } else { + deviceName = 'Web Browser'; + } - if (browser.ipad) { - deviceName += ' iPad'; - } else if (browser.iphone) { - deviceName += ' iPhone'; - } else if (browser.android) { - deviceName += ' Android'; + if (browser.ipad) { + deviceName += ' iPad'; + } else if (browser.iphone) { + deviceName += ' iPhone'; + } else if (browser.android) { + deviceName += ' Android'; + } } return deviceName; @@ -172,15 +174,13 @@ function supportsCue() { function onAppVisible() { if (isHidden) { isHidden = false; - console.debug('triggering app resume event'); - events.trigger(appHost, 'resume'); + Events.trigger(appHost, 'resume'); } } function onAppHidden() { if (!isHidden) { isHidden = true; - console.debug('app is hidden'); } } @@ -298,7 +298,7 @@ function askForExit() { return; } - import('actionsheet').then(({default: actionsheet}) => { + import('../components/actionSheet/actionSheet').then((actionsheet) => { exitPromise = actionsheet.show({ title: globalize.translate('MessageConfirmAppExit'), items: [ @@ -320,7 +320,7 @@ let deviceName; const appName = 'Jellyfin Web'; const appVersion = '10.7.0'; -const appHost = { +export const appHost = { getWindowState: function () { return document.windowState || 'Normal'; }, @@ -355,16 +355,16 @@ const appHost = { return window.NativeShell.AppHost.init(); } - deviceName = getDeviceName(); - getDeviceId().then(function (id) { - deviceId = id; - }); + return { + deviceId: getDeviceId(), + deviceName: getDeviceName() + }; }, deviceName: function () { - return window.NativeShell ? window.NativeShell.AppHost.deviceName() : deviceName; + return window.NativeShell ? window.NativeShell.AppHost.deviceName() : getDeviceName(); }, deviceId: function () { - return window.NativeShell ? window.NativeShell.AppHost.deviceId() : deviceId; + return window.NativeShell ? window.NativeShell.AppHost.deviceId() : getDeviceId(); }, appName: function () { return window.NativeShell ? window.NativeShell.AppHost.appName() : appName; @@ -409,4 +409,5 @@ if (window.addEventListener) { window.addEventListener('blur', onAppHidden); } -export default appHost; +// load app host on module load +appHost.init(); diff --git a/src/components/autoFocuser.js b/src/components/autoFocuser.js index 0a10cabd2f..aa88e0c294 100644 --- a/src/components/autoFocuser.js +++ b/src/components/autoFocuser.js @@ -5,8 +5,8 @@ * @module components/autoFocuser */ -import focusManager from 'focusManager'; -import layoutManager from 'layoutManager'; +import focusManager from './focusManager'; +import layoutManager from './layoutManager'; /** * Previously selected element. diff --git a/src/components/backdrop/backdrop.js b/src/components/backdrop/backdrop.js index 83888b81b9..a2fe54de19 100644 --- a/src/components/backdrop/backdrop.js +++ b/src/components/backdrop/backdrop.js @@ -1,8 +1,9 @@ -import browser from 'browser'; -import playbackManager from 'playbackManager'; -import dom from 'dom'; -import * as userSettings from 'userSettings'; -import 'css!./backdrop'; +import browser from '../../scripts/browser'; +import { playbackManager } from '../playback/playbackmanager'; +import dom from '../../scripts/dom'; +import * as userSettings from '../../scripts/settings/userSettings'; +import './backdrop.css'; +import ServerConnections from '../ServerConnections'; /* eslint-disable indent */ @@ -176,7 +177,7 @@ import 'css!./backdrop'; function getItemImageUrls(item, imageOptions) { imageOptions = imageOptions || {}; - const apiClient = window.connectionManager.getApiClient(item.ServerId); + const apiClient = ServerConnections.getApiClient(item.ServerId); if (item.BackdropImageTags && item.BackdropImageTags.length > 0) { return item.BackdropImageTags.map((imgTag, index) => { return apiClient.getScaledImageUrl(item.BackdropItemId || item.Id, Object.assign(imageOptions, { diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index 63b2e26adb..4095bea48f 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -5,21 +5,22 @@ * @module components/cardBuilder/cardBuilder */ -import datetime from 'datetime'; -import imageLoader from 'imageLoader'; -import itemHelper from 'itemHelper'; -import focusManager from 'focusManager'; -import indicators from 'indicators'; -import globalize from 'globalize'; -import layoutManager from 'layoutManager'; -import dom from 'dom'; -import browser from 'browser'; -import playbackManager from 'playbackManager'; -import itemShortcuts from 'itemShortcuts'; -import imageHelper from 'scripts/imagehelper'; -import 'css!./card'; -import 'paper-icon-button-light'; -import 'programStyles'; +import datetime from '../../scripts/datetime'; +import imageLoader from '../images/imageLoader'; +import itemHelper from '../itemHelper'; +import focusManager from '../focusManager'; +import indicators from '../indicators/indicators'; +import globalize from '../../scripts/globalize'; +import layoutManager from '../layoutManager'; +import dom from '../../scripts/dom'; +import browser from '../../scripts/browser'; +import { playbackManager } from '../playback/playbackmanager'; +import itemShortcuts from '../shortcuts'; +import imageHelper from '../../scripts/imagehelper'; +import './card.css'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../guide/programs.css'; +import ServerConnections from '../ServerConnections'; const enableFocusTransform = !browser.slow && !browser.edge; @@ -370,7 +371,7 @@ import 'programStyles'; if (serverId !== lastServerId) { lastServerId = serverId; - apiClient = window.connectionManager.getApiClient(lastServerId); + apiClient = ServerConnections.getApiClient(lastServerId); } if (options.indexBy) { @@ -1121,7 +1122,7 @@ import 'programStyles'; if (!refreshIndicatorLoaded) { refreshIndicatorLoaded = true; /* eslint-disable-next-line @babel/no-unused-expressions */ - import('emby-itemrefreshindicator'); + import('../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator'); } } @@ -1453,7 +1454,7 @@ import 'programStyles'; if (itemHelper.canMarkPlayed(item)) { /* eslint-disable-next-line @babel/no-unused-expressions */ - import('emby-playstatebutton'); + import('../../elements/emby-playstatebutton/emby-playstatebutton'); html += ''; } @@ -1461,7 +1462,7 @@ import 'programStyles'; const likes = userData.Likes == null ? '' : userData.Likes; /* eslint-disable-next-line @babel/no-unused-expressions */ - import('emby-ratingbutton'); + import('../../elements/emby-ratingbutton/emby-ratingbutton'); html += ''; } diff --git a/src/components/cardbuilder/chaptercardbuilder.js b/src/components/cardbuilder/chaptercardbuilder.js index 35ae2b0cdd..e364056e14 100644 --- a/src/components/cardbuilder/chaptercardbuilder.js +++ b/src/components/cardbuilder/chaptercardbuilder.js @@ -5,10 +5,11 @@ * @module components/cardBuilder/chaptercardbuilder */ -import datetime from 'datetime'; -import imageLoader from 'imageLoader'; -import layoutManager from 'layoutManager'; -import browser from 'browser'; +import datetime from '../../scripts/datetime'; +import imageLoader from '../images/imageLoader'; +import layoutManager from '../layoutManager'; +import browser from '../../scripts/browser'; +import ServerConnections from '../ServerConnections'; const enableFocusTransform = !browser.slow && !browser.edge; @@ -47,7 +48,7 @@ import browser from 'browser'; let html = ''; let itemsInRow = 0; - const apiClient = window.connectionManager.getApiClient(item.ServerId); + const apiClient = ServerConnections.getApiClient(item.ServerId); for (let i = 0, length = chapters.length; i < length; i++) { if (options.rows && itemsInRow === 0) { diff --git a/src/components/cardbuilder/peoplecardbuilder.js b/src/components/cardbuilder/peoplecardbuilder.js index 5fc9e8ade5..00b8f0fb89 100644 --- a/src/components/cardbuilder/peoplecardbuilder.js +++ b/src/components/cardbuilder/peoplecardbuilder.js @@ -5,7 +5,7 @@ * @module components/cardBuilder/peoplecardbuilder */ -import cardBuilder from 'cardBuilder'; +import cardBuilder from './cardBuilder'; export function buildPeopleCards(items, options) { options = Object.assign(options || {}, { diff --git a/src/components/channelMapper/channelMapper.js b/src/components/channelMapper/channelMapper.js index 294f9e223a..bedab5421b 100644 --- a/src/components/channelMapper/channelMapper.js +++ b/src/components/channelMapper/channelMapper.js @@ -1,21 +1,22 @@ -import dom from 'dom'; -import dialogHelper from 'dialogHelper'; -import loading from 'loading'; -import globalize from 'globalize'; -import actionsheet from 'actionsheet'; -import 'emby-input'; -import 'paper-icon-button-light'; -import 'emby-button'; -import 'listViewStyle'; -import 'material-icons'; -import 'formDialogStyle'; +import dom from '../../scripts/dom'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import loading from '../loading/loading'; +import globalize from '../../scripts/globalize'; +import actionsheet from '../actionSheet/actionSheet'; +import '../../elements/emby-input/emby-input'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-button/emby-button'; +import '../listview/listview.css'; +import 'material-design-icons-iconfont'; +import '../formdialog.css'; +import ServerConnections from '../ServerConnections'; export default class channelMapper { constructor(options) { function mapChannel(button, channelId, providerChannelId) { loading.show(); const providerId = options.providerId; - window.connectionManager.getApiClient(options.serverId).ajax({ + ServerConnections.getApiClient(options.serverId).ajax({ type: 'POST', url: ApiClient.getUrl('LiveTv/ChannelMappings'), data: JSON.stringify({ @@ -58,7 +59,7 @@ export default class channelMapper { } function getChannelMappingOptions(serverId, providerId) { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); return apiClient.getJSON(apiClient.getUrl('LiveTv/ChannelMappingOptions', { providerId: providerId })); diff --git a/src/components/collectionEditor/collectionEditor.js b/src/components/collectionEditor/collectionEditor.js index 2d0d025929..33e6fdecca 100644 --- a/src/components/collectionEditor/collectionEditor.js +++ b/src/components/collectionEditor/collectionEditor.js @@ -1,17 +1,19 @@ -import dom from 'dom'; -import dialogHelper from 'dialogHelper'; -import loading from 'loading'; -import layoutManager from 'layoutManager'; -import appRouter from 'appRouter'; -import globalize from 'globalize'; -import 'emby-checkbox'; -import 'emby-input'; -import 'paper-icon-button-light'; -import 'emby-select'; -import 'material-icons'; -import 'css!./../formdialog'; -import 'emby-button'; -import 'flexStyles'; +import dom from '../../scripts/dom'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import loading from '../loading/loading'; +import layoutManager from '../layoutManager'; +import { appRouter } from '../appRouter'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-input/emby-input'; +import '../../elements/emby-select/emby-select'; +import 'material-design-icons-iconfont'; +import '../formdialog.css'; +import '../../assets/css/flexstyles.scss'; +import ServerConnections from '../ServerConnections'; +import toast from '../toast/toast'; /* eslint-disable indent */ @@ -24,7 +26,7 @@ import 'flexStyles'; const collectionId = panel.querySelector('#selectCollectionToAddTo').value; - const apiClient = window.connectionManager.getApiClient(currentServerId); + const apiClient = ServerConnections.getApiClient(currentServerId); if (collectionId) { addToCollection(apiClient, panel, collectionId); @@ -80,9 +82,7 @@ import 'flexStyles'; dlg.submitted = true; dialogHelper.close(dlg); - import('toast').then(({default: toast}) => { - toast(globalize.translate('MessageItemsAdded')); - }); + toast(globalize.translate('MessageItemsAdded')); }); } @@ -105,7 +105,7 @@ import 'flexStyles'; EnableTotalRecordCount: false }; - const apiClient = window.connectionManager.getApiClient(currentServerId); + const apiClient = ServerConnections.getApiClient(currentServerId); apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => { let html = ''; @@ -199,7 +199,7 @@ import 'flexStyles'; } function centerFocus(elem, horiz, on) { - import('scrollHelper').then((scrollHelper) => { + import('../../scripts/scrollHelper').then((scrollHelper) => { const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); diff --git a/src/components/confirm/confirm.js b/src/components/confirm/confirm.js index eca612ccb8..1978324e7c 100644 --- a/src/components/confirm/confirm.js +++ b/src/components/confirm/confirm.js @@ -1,69 +1,65 @@ -import browser from 'browser'; -import dialog from 'dialog'; -import globalize from 'globalize'; +import browser from '../../scripts/browser'; +import dialog from '../dialog/dialog'; +import globalize from '../../scripts/globalize'; -/* eslint-disable indent */ -export default (() => { - function replaceAll(str, find, replace) { - return str.split(find).join(replace); +function replaceAll(str, find, replace) { + return str.split(find).join(replace); +} + +function nativeConfirm(options) { + if (typeof options === 'string') { + options = { + title: '', + text: options + }; } - if (browser.tv && window.confirm) { - // Use the native confirm dialog - return options => { - if (typeof options === 'string') { - options = { - title: '', - text: options - }; - } + const text = replaceAll(options.text || '', '
', '\n'); + const result = window.confirm(text); - const text = replaceAll(options.text || '', '
', '\n'); - const result = window.confirm(text); + if (result) { + return Promise.resolve(); + } else { + return Promise.reject(); + } +} - if (result) { - return Promise.resolve(); - } else { - return Promise.reject(); - } +function customConfirm(text, title) { + let options; + if (typeof text === 'string') { + options = { + title: title, + text: text }; } else { - // Use our own dialog - return (text, title) => { - let options; - if (typeof text === 'string') { - options = { - title: title, - text: text - }; - } else { - options = text; - } - - const items = []; - - items.push({ - name: options.cancelText || globalize.translate('ButtonCancel'), - id: 'cancel', - type: 'cancel' - }); - - items.push({ - name: options.confirmText || globalize.translate('ButtonOk'), - id: 'ok', - type: options.primary === 'delete' ? 'delete' : 'submit' - }); - - options.buttons = items; - - return dialog.show(options).then(result => { - if (result === 'ok') { - return Promise.resolve(); - } - - return Promise.reject(); - }); - }; + options = text; } -})(); -/* eslint-enable indent */ + + const items = []; + + items.push({ + name: options.cancelText || globalize.translate('ButtonCancel'), + id: 'cancel', + type: 'cancel' + }); + + items.push({ + name: options.confirmText || globalize.translate('ButtonOk'), + id: 'ok', + type: options.primary === 'delete' ? 'delete' : 'submit' + }); + + options.buttons = items; + + return dialog.show(options).then(result => { + if (result === 'ok') { + return Promise.resolve(); + } + + return Promise.reject(); + }); +} + +const confirm = browser.tv && window.confirm ? nativeConfirm : customConfirm; + +export default confirm; diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js index 1b13900d85..ee97fff8a1 100644 --- a/src/components/dialog/dialog.js +++ b/src/components/dialog/dialog.js @@ -1,14 +1,14 @@ -import dialogHelper from 'dialogHelper'; -import dom from 'dom'; -import layoutManager from 'layoutManager'; -import scrollHelper from 'scrollHelper'; -import globalize from 'globalize'; -import 'material-icons'; -import 'emby-button'; -import 'paper-icon-button-light'; -import 'emby-input'; -import 'formDialogStyle'; -import 'flexStyles'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import dom from '../../scripts/dom'; +import layoutManager from '../layoutManager'; +import scrollHelper from '../../scripts/scrollHelper'; +import globalize from '../../scripts/globalize'; +import 'material-design-icons-iconfont'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-input/emby-input'; +import '../formdialog.css'; +import '../../assets/css/flexstyles.scss'; /* eslint-disable indent */ @@ -128,7 +128,7 @@ import 'flexStyles'; options = text; } - const { default: template } = await import('text!./dialog.template.html'); + const { default: template } = await import('./dialog.template.html'); return new Promise((resolve, reject) => { showDialog(options, template).then(resolve, reject); }); diff --git a/src/components/dialogHelper/dialogHelper.js b/src/components/dialogHelper/dialogHelper.js index eb46d98b12..20c658df4e 100644 --- a/src/components/dialogHelper/dialogHelper.js +++ b/src/components/dialogHelper/dialogHelper.js @@ -1,11 +1,11 @@ -import appRouter from 'appRouter'; -import focusManager from 'focusManager'; -import browser from 'browser'; -import layoutManager from 'layoutManager'; -import inputManager from 'inputManager'; -import dom from 'dom'; -import 'css!./dialoghelper.css'; -import 'scrollStyles'; +import { appRouter } from '../appRouter'; +import focusManager from '../focusManager'; +import browser from '../../scripts/browser'; +import layoutManager from '../layoutManager'; +import inputManager from '../../scripts/inputManager'; +import dom from '../../scripts/dom'; +import './dialoghelper.css'; +import '../../assets/css/scrollstyles.css'; /* eslint-disable indent */ @@ -354,7 +354,7 @@ import 'scrollStyles'; } function centerFocus(elem, horiz, on) { - import('scrollHelper').then((scrollHelper) => { + import('../../scripts/scrollHelper').then((scrollHelper) => { const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js index 3dd3302b28..2f8a2cadd1 100644 --- a/src/components/directorybrowser/directorybrowser.js +++ b/src/components/directorybrowser/directorybrowser.js @@ -1,13 +1,14 @@ -import loading from 'loading'; -import dialogHelper from 'dialogHelper'; -import dom from 'dom'; -import globalize from 'globalize'; -import 'listViewStyle'; -import 'emby-input'; -import 'paper-icon-button-light'; -import 'css!./directorybrowser'; -import 'formDialogStyle'; -import 'emby-button'; +import loading from '../loading/loading'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import dom from '../../scripts/dom'; +import globalize from '../../scripts/globalize'; +import '../listview/listview.css'; +import '../../elements/emby-input/emby-input'; +import '../../elements/emby-button/paper-icon-button-light'; +import './directorybrowser.css'; +import '../formdialog.css'; +import '../../elements/emby-button/emby-button'; +import alert from '../alert'; /* eslint-disable indent */ @@ -157,9 +158,7 @@ import 'emby-button'; } function alertTextWithOptions(options) { - import('alert').then(({default: alert}) => { - alert(options); - }); + alert(options); } function validatePath(path, validateWriteable, apiClient) { diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js index efaab16b3f..9d7292547d 100644 --- a/src/components/displaySettings/displaySettings.js +++ b/src/components/displaySettings/displaySettings.js @@ -1,16 +1,18 @@ -import browser from 'browser'; -import layoutManager from 'layoutManager'; -import pluginManager from 'pluginManager'; -import appHost from 'apphost'; -import focusManager from 'focusManager'; -import datetime from 'datetime'; -import globalize from 'globalize'; -import loading from 'loading'; -import skinManager from 'skinManager'; -import events from 'events'; -import 'emby-select'; -import 'emby-checkbox'; -import 'emby-button'; +import browser from '../../scripts/browser'; +import layoutManager from '../layoutManager'; +import { pluginManager } from '../pluginManager'; +import { appHost } from '../apphost'; +import focusManager from '../focusManager'; +import datetime from '../../scripts/datetime'; +import globalize from '../../scripts/globalize'; +import loading from '../loading/loading'; +import skinManager from '../../scripts/themeManager'; +import { Events } from 'jellyfin-apiclient'; +import '../../elements/emby-select/emby-select'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-button/emby-button'; +import ServerConnections from '../ServerConnections'; +import toast from '../toast/toast'; /* eslint-disable indent */ @@ -168,11 +170,9 @@ import 'emby-button'; saveUser(context, user, userSettings, apiClient).then(() => { loading.hide(); if (enableSaveConfirmation) { - import('toast').then(({default: toast}) => { - toast(globalize.translate('SettingsSaved')); - }); + toast(globalize.translate('SettingsSaved')); } - events.trigger(instance, 'saved'); + Events.trigger(instance, 'saved'); }, () => { loading.hide(); }); @@ -181,7 +181,7 @@ import 'emby-button'; function onSubmit(e) { const self = this; - const apiClient = window.connectionManager.getApiClient(self.options.serverId); + const apiClient = ServerConnections.getApiClient(self.options.serverId); const userId = self.options.userId; const userSettings = self.options.userSettings; @@ -198,7 +198,7 @@ import 'emby-button'; } async function embed(options, self) { - const { default: template } = await import('text!./displaySettings.template.html'); + const { default: template } = await import('./displaySettings.template.html'); options.element.innerHTML = globalize.translateHtml(template, 'core'); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); if (options.enableSaveButton) { @@ -220,7 +220,7 @@ import 'emby-button'; loading.show(); const userId = self.options.userId; - const apiClient = window.connectionManager.getApiClient(self.options.serverId); + const apiClient = ServerConnections.getApiClient(self.options.serverId); const userSettings = self.options.userSettings; return apiClient.getUser(userId).then(user => { diff --git a/src/components/favoriteitems.js b/src/components/favoriteitems.js index 86cd050216..cb1b61c43f 100644 --- a/src/components/favoriteitems.js +++ b/src/components/favoriteitems.js @@ -1,12 +1,12 @@ -import loading from 'loading'; -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'; +import loading from './loading/loading'; +import cardBuilder from './cardbuilder/cardBuilder'; +import dom from '../scripts/dom'; +import { appHost } from './apphost'; +import imageLoader from './images/imageLoader'; +import globalize from '../scripts/globalize'; +import layoutManager from './layoutManager'; +import '../assets/css/scrollstyles.css'; +import '../elements/emby-itemscontainer/emby-itemscontainer'; /* eslint-disable indent */ diff --git a/src/components/filterdialog/filterdialog.js b/src/components/filterdialog/filterdialog.js index d11edb40a2..c8b81066d2 100644 --- a/src/components/filterdialog/filterdialog.js +++ b/src/components/filterdialog/filterdialog.js @@ -1,10 +1,11 @@ -import dom from 'dom'; -import dialogHelper from 'dialogHelper'; -import globalize from 'globalize'; -import events from 'events'; -import 'emby-checkbox'; -import 'emby-collapse'; -import 'css!./style.css'; +import dom from '../../scripts/dom'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import globalize from '../../scripts/globalize'; +import { Events } from 'jellyfin-apiclient'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-collapse/emby-collapse'; +import './style.css'; +import ServerConnections from '../ServerConnections'; /* eslint-disable indent */ function renderOptions(context, selector, cssClass, items, isCheckedFn) { @@ -108,7 +109,7 @@ import 'css!./style.css'; * @param instance {FilterDialog} An instance of FilterDialog */ function triggerChange(instance) { - events.trigger(instance, 'filterchange'); + Events.trigger(instance, 'filterchange'); } function setVisibility(context, options) { @@ -401,7 +402,7 @@ import 'css!./style.css'; } show() { - return import('text!./filterdialog.template.html').then(({default: template}) => { + return import('./filterdialog.template.html').then(({default: template}) => { return new Promise((resolve) => { const dlg = dialogHelper.createDialog({ removeOnClose: true, @@ -419,7 +420,7 @@ import 'css!./style.css'; this.bindEvents(dlg); if (enableDynamicFilters(this.options.mode)) { dlg.classList.add('dynamicFilterDialog'); - const apiClient = window.connectionManager.getApiClient(this.options.serverId); + const apiClient = ServerConnections.getApiClient(this.options.serverId); loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), this.options.query); } }); diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js index 7cef08303d..f4f6ef2d9b 100644 --- a/src/components/filtermenu/filtermenu.js +++ b/src/components/filtermenu/filtermenu.js @@ -1,18 +1,19 @@ -import dom from 'dom'; -import focusManager from 'focusManager'; -import dialogHelper from 'dialogHelper'; -import inputManager from 'inputManager'; -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'; +import dom from '../../scripts/dom'; +import focusManager from '../focusManager'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import inputManager from '../../scripts/inputManager'; +import layoutManager from '../layoutManager'; +import globalize from '../../scripts/globalize'; +import * as userSettings from '../../scripts/settings/userSettings'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-input/emby-input'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-select/emby-select'; +import 'material-design-icons-iconfont'; +import '../formdialog.css'; +import '../../assets/css/flexstyles.scss'; +import ServerConnections from '../ServerConnections'; function onSubmit(e) { e.preventDefault(); @@ -80,7 +81,7 @@ function moveCheckboxFocus(elem, offset) { } } function centerFocus(elem, horiz, on) { - import('scrollHelper').then(({ default: scrollHelper }) => { + import('../../scripts/scrollHelper').then((scrollHelper) => { const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); @@ -193,7 +194,7 @@ function initEditor(context, settings) { } } function loadDynamicFilters(context, options) { - const apiClient = window.connectionManager.getApiClient(options.serverId); + const apiClient = ServerConnections.getApiClient(options.serverId); const filterMenuOptions = Object.assign(options.filterMenuOptions, { @@ -209,7 +210,7 @@ function loadDynamicFilters(context, options) { class FilterMenu { show(options) { return new Promise( (resolve, reject) => { - import('text!./filtermenu.template.html').then(({ default: template }) => { + import('./filtermenu.template.html').then(({ default: template }) => { const dialogOptions = { removeOnClose: true, scrollY: false diff --git a/src/components/focusManager.js b/src/components/focusManager.js index d45984bf58..b0fc188516 100644 --- a/src/components/focusManager.js +++ b/src/components/focusManager.js @@ -1,7 +1,7 @@ /* eslint-disable indent */ -import dom from 'dom'; -import scrollManager from 'scrollManager'; +import dom from '../scripts/dom'; +import scrollManager from './scrollManager'; const scopes = []; function pushScope(elem) { diff --git a/src/components/groupedcards.js b/src/components/groupedcards.js index 947b3b8569..13158016ac 100644 --- a/src/components/groupedcards.js +++ b/src/components/groupedcards.js @@ -1,12 +1,14 @@ /* eslint-disable indent */ -import dom from 'dom'; -import appRouter from 'appRouter'; +import dom from '../scripts/dom'; +import { appRouter } from './appRouter'; +import Dashboard from '../scripts/clientUtils'; +import ServerConnections from './ServerConnections'; function onGroupedCardClick(e, card) { const itemId = card.getAttribute('data-id'); const serverId = card.getAttribute('data-serverid'); - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); const userId = apiClient.getCurrentUserId(); const playedIndicator = card.querySelector('.playedIndicator'); const playedIndicatorHtml = playedIndicator ? playedIndicator.innerHTML : null; diff --git a/src/components/guide/guide-settings.js b/src/components/guide/guide-settings.js index 35f0d3e06e..8132ac3bb3 100644 --- a/src/components/guide/guide-settings.js +++ b/src/components/guide/guide-settings.js @@ -1,12 +1,12 @@ -import dialogHelper from 'dialogHelper'; -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'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import globalize from '../../scripts/globalize'; +import * as userSettings from '../../scripts/settings/userSettings'; +import layoutManager from '../layoutManager'; +import scrollHelper from '../../scripts/scrollHelper'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-radio/emby-radio'; +import '../formdialog.css'; +import 'material-design-icons-iconfont'; function saveCategories(context, options) { const categories = []; @@ -88,7 +88,7 @@ function showEditor(options) { return new Promise(function (resolve, reject) { let settingsChanged = false; - import('text!./guide-settings.template.html').then(({ default: template }) => { + import('./guide-settings.template.html').then(({ default: template }) => { const dialogOptions = { removeOnClose: true, scrollY: false diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js index a5ed55e67c..7ae0b8409f 100644 --- a/src/components/guide/guide.js +++ b/src/components/guide/guide.js @@ -1,32 +1,33 @@ -import inputManager from 'inputManager'; -import browser from 'browser'; -import globalize from 'globalize'; -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'; +import inputManager from '../../scripts/inputManager'; +import browser from '../../scripts/browser'; +import globalize from '../../scripts/globalize'; +import { Events } from 'jellyfin-apiclient'; +import scrollHelper from '../../scripts/scrollHelper'; +import serverNotifications from '../../scripts/serverNotifications'; +import loading from '../loading/loading'; +import datetime from '../../scripts/datetime'; +import focusManager from '../focusManager'; +import { playbackManager } from '../playback/playbackmanager'; +import * as userSettings from '../../scripts/settings/userSettings'; +import imageLoader from '../images/imageLoader'; +import layoutManager from '../layoutManager'; +import itemShortcuts from '../shortcuts'; +import dom from '../../scripts/dom'; +import './guide.css'; +import './programs.css'; +import 'material-design-icons-iconfont'; +import '../../assets/css/scrollstyles.css'; +import '../../elements/emby-programcell/emby-programcell'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-tabs/emby-tabs'; +import '../../elements/emby-scroller/emby-scroller'; +import '../../assets/css/flexstyles.scss'; +import 'webcomponents.js/webcomponents-lite'; +import ServerConnections from '../ServerConnections'; function showViewSettings(instance) { - import('guide-settings-dialog').then(({default: guideSettingsDialog}) => { + import('./guide-settings').then(({default: guideSettingsDialog}) => { guideSettingsDialog.show(instance.categoryOptions).then(function () { instance.refresh(); }); @@ -164,10 +165,10 @@ function Guide(options) { self.destroy = function () { stopAutoRefresh(); - events.off(serverNotifications, 'TimerCreated', onTimerCreated); - events.off(serverNotifications, 'SeriesTimerCreated', onSeriesTimerCreated); - events.off(serverNotifications, 'TimerCancelled', onTimerCancelled); - events.off(serverNotifications, 'SeriesTimerCancelled', onSeriesTimerCancelled); + Events.off(serverNotifications, 'TimerCreated', onTimerCreated); + Events.off(serverNotifications, 'SeriesTimerCreated', onSeriesTimerCreated); + Events.off(serverNotifications, 'TimerCancelled', onTimerCancelled); + Events.off(serverNotifications, 'SeriesTimerCancelled', onSeriesTimerCancelled); setScrollEvents(options.element, false); itemShortcuts.off(options.element); @@ -212,7 +213,7 @@ function Guide(options) { } function reloadGuide(context, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) { - const apiClient = window.connectionManager.getApiClient(options.serverId); + const apiClient = ServerConnections.getApiClient(options.serverId); const channelQuery = { @@ -872,7 +873,7 @@ function Guide(options) { function reloadPage(page) { showLoading(); - const apiClient = window.connectionManager.getApiClient(options.serverId); + const apiClient = ServerConnections.getApiClient(options.serverId); apiClient.getLiveTvGuideInfo().then(function (guideInfo) { setDateRange(page, guideInfo); @@ -1001,7 +1002,7 @@ function Guide(options) { const item = items[id]; if (item) { - events.trigger(self, 'focus', [ + Events.trigger(self, 'focus', [ { item: item }]); @@ -1091,7 +1092,7 @@ function Guide(options) { } } - import('text!./tvguide.template.html').then(({default: template}) => { + import('./tvguide.template.html').then(({default: template}) => { const context = options.element; context.classList.add('tvguide'); @@ -1183,12 +1184,12 @@ function Guide(options) { setScrollEvents(context, true); itemShortcuts.on(context); - events.trigger(self, 'load'); + Events.trigger(self, 'load'); - events.on(serverNotifications, 'TimerCreated', onTimerCreated); - events.on(serverNotifications, 'SeriesTimerCreated', onSeriesTimerCreated); - events.on(serverNotifications, 'TimerCancelled', onTimerCancelled); - events.on(serverNotifications, 'SeriesTimerCancelled', onSeriesTimerCancelled); + Events.on(serverNotifications, 'TimerCreated', onTimerCreated); + Events.on(serverNotifications, 'SeriesTimerCreated', onSeriesTimerCreated); + Events.on(serverNotifications, 'TimerCancelled', onTimerCancelled); + Events.on(serverNotifications, 'SeriesTimerCancelled', onSeriesTimerCancelled); self.refresh(); }); diff --git a/src/components/homeScreenSettings/homeScreenSettings.js b/src/components/homeScreenSettings/homeScreenSettings.js index 5138935408..89edf29486 100644 --- a/src/components/homeScreenSettings/homeScreenSettings.js +++ b/src/components/homeScreenSettings/homeScreenSettings.js @@ -1,13 +1,16 @@ -import layoutManager from 'layoutManager'; -import focusManager from 'focusManager'; -import globalize from 'globalize'; -import loading from 'loading'; -import homeSections from 'homeSections'; -import dom from 'dom'; -import events from 'events'; -import 'listViewStyle'; -import 'emby-select'; -import 'emby-checkbox'; + +import layoutManager from '../layoutManager'; +import focusManager from '../focusManager'; +import globalize from '../../scripts/globalize'; +import loading from '../loading/loading'; +import { Events } from 'jellyfin-apiclient'; +import homeSections from '../homesections/homesections'; +import dom from '../../scripts/dom'; +import '../listview/listview.css'; +import '../../elements/emby-select/emby-select'; +import '../../elements/emby-checkbox/emby-checkbox'; +import ServerConnections from '../ServerConnections'; +import toast from '../toast/toast'; /* eslint-disable indent */ @@ -369,12 +372,10 @@ import 'emby-checkbox'; saveUser(context, user, userSettings, apiClient).then(() => { loading.hide(); if (enableSaveConfirmation) { - import('toast').then(({default: toast}) => { - toast(globalize.translate('SettingsSaved')); - }); + toast(globalize.translate('SettingsSaved')); } - events.trigger(instance, 'saved'); + Events.trigger(instance, 'saved'); }, () => { loading.hide(); }); @@ -383,7 +384,7 @@ import 'emby-checkbox'; function onSubmit(e) { const self = this; - const apiClient = window.connectionManager.getApiClient(self.options.serverId); + const apiClient = ServerConnections.getApiClient(self.options.serverId); const userId = self.options.userId; const userSettings = self.options.userSettings; @@ -417,7 +418,7 @@ import 'emby-checkbox'; } function embed(options, self) { - return import('text!./homeScreenSettings.template.html').then(({default: template}) => { + return import('./homeScreenSettings.template.html').then(({default: template}) => { for (let i = 1; i <= numConfigurableSections; i++) { template = template.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i)); } @@ -455,7 +456,7 @@ import 'emby-checkbox'; loading.show(); const userId = self.options.userId; - const apiClient = window.connectionManager.getApiClient(self.options.serverId); + const apiClient = ServerConnections.getApiClient(self.options.serverId); const userSettings = self.options.userSettings; apiClient.getUser(userId).then(user => { diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js index 758773689b..6561b8a9e0 100644 --- a/src/components/homesections/homesections.js +++ b/src/components/homesections/homesections.js @@ -1,15 +1,17 @@ -import cardBuilder from 'cardBuilder'; -import dom from 'dom'; -import layoutManager from 'layoutManager'; -import imageLoader from 'imageLoader'; -import globalize from 'globalize'; -import appRouter from 'appRouter'; -import imageHelper from 'scripts/imagehelper'; -import 'paper-icon-button-light'; -import 'emby-itemscontainer'; -import 'emby-scroller'; -import 'emby-button'; -import 'css!./homesections'; +import cardBuilder from '../cardbuilder/cardBuilder'; +import dom from '../../scripts/dom'; +import layoutManager from '../layoutManager'; +import imageLoader from '../images/imageLoader'; +import globalize from '../../scripts/globalize'; +import { appRouter } from '../appRouter'; +import imageHelper from '../../scripts/imagehelper'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import '../../elements/emby-scroller/emby-scroller'; +import '../../elements/emby-button/emby-button'; +import './homesections.css'; +import Dashboard from '../../scripts/clientUtils'; +import ServerConnections from '../ServerConnections'; /* eslint-disable indent */ @@ -211,7 +213,7 @@ import 'css!./homesections'; function getFetchLatestItemsFn(serverId, parentId, collectionType) { return function () { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); let limit = 16; if (enableScrollX()) { @@ -367,7 +369,7 @@ import 'css!./homesections'; function getContinueWatchingFetchFn(serverId) { return function () { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); const screenWidth = dom.getWindowSize().innerWidth; let limit; @@ -440,7 +442,7 @@ import 'css!./homesections'; function getContinueListeningFetchFn(serverId) { return function () { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); const screenWidth = dom.getWindowSize().innerWidth; let limit; @@ -513,7 +515,7 @@ import 'css!./homesections'; function getOnNowFetchFn(serverId) { return function () { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); return apiClient.getLiveTvRecommendedPrograms({ userId: apiClient.getCurrentUserId(), IsAiring: true, @@ -656,7 +658,7 @@ import 'css!./homesections'; function getNextUpFetchFn(serverId) { return function () { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); return apiClient.getNextUpEpisodes({ Limit: enableScrollX() ? 24 : 15, Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo,Path', @@ -727,7 +729,7 @@ import 'css!./homesections'; function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) { return function () { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); return apiClient.getLiveTvRecordings({ userId: apiClient.getCurrentUserId(), Limit: enableScrollX() ? 12 : 5, diff --git a/src/components/htmlMediaHelper.js b/src/components/htmlMediaHelper.js index be506b449d..4f803aa4b6 100644 --- a/src/components/htmlMediaHelper.js +++ b/src/components/htmlMediaHelper.js @@ -1,8 +1,9 @@ + /* eslint-disable indent */ -import appSettings from 'appSettings' ; -import browser from 'browser'; -import events from 'events'; +import appSettings from '../scripts/settings/appSettings' ; +import browser from '../scripts/browser'; +import { Events } from 'jellyfin-apiclient'; export function getSavedVolume() { return appSettings.get('volume') || 1; @@ -114,7 +115,7 @@ import events from 'events'; instance.destroyCustomTrack(instance._mediaElement); } - events.trigger(instance, 'error', [ + Events.trigger(instance, 'error', [ { type: type } @@ -359,7 +360,7 @@ import events from 'events'; src: instance._currentSrc }; - events.trigger(instance, 'stopped', [stopInfo]); + Events.trigger(instance, 'stopped', [stopInfo]); instance._currentTime = null; instance._currentSrc = null; diff --git a/src/components/imageDownloader/imageDownloader.js b/src/components/imageDownloader/imageDownloader.js index 1ec459ff83..18dd849aec 100644 --- a/src/components/imageDownloader/imageDownloader.js +++ b/src/components/imageDownloader/imageDownloader.js @@ -1,17 +1,18 @@ -import dom from 'dom'; -import loading from 'loading'; -import appHost from 'apphost'; -import dialogHelper from 'dialogHelper'; -import imageLoader from 'imageLoader'; -import browser from 'browser'; -import layoutManager from 'layoutManager'; -import scrollHelper from 'scrollHelper'; -import globalize from 'globalize'; -import 'emby-checkbox'; -import 'paper-icon-button-light'; -import 'emby-button'; -import 'formDialogStyle'; -import 'cardStyle'; +import dom from '../../scripts/dom'; +import loading from '../loading/loading'; +import { appHost } from '../apphost'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import imageLoader from '../images/imageLoader'; +import browser from '../../scripts/browser'; +import layoutManager from '../layoutManager'; +import scrollHelper from '../../scripts/scrollHelper'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-button/emby-button'; +import '../formdialog.css'; +import '../cardbuilder/card.css'; +import ServerConnections from '../ServerConnections'; /* eslint-disable indent */ @@ -315,8 +316,8 @@ import 'cardStyle'; function showEditor(itemId, serverId, itemType) { loading.show(); - import('text!./imageDownloader.template.html').then(({default: template}) => { - const apiClient = window.connectionManager.getApiClient(serverId); + import('./imageDownloader.template.html').then(({default: template}) => { + const apiClient = ServerConnections.getApiClient(serverId); currentItemId = itemId; currentItemType = itemType; diff --git a/src/components/imageOptionsEditor/imageOptionsEditor.js b/src/components/imageOptionsEditor/imageOptionsEditor.js index d112dd65cc..a220a65c5d 100644 --- a/src/components/imageOptionsEditor/imageOptionsEditor.js +++ b/src/components/imageOptionsEditor/imageOptionsEditor.js @@ -5,12 +5,12 @@ * @module components/imageOptionsEditor/imageOptionsEditor */ -import globalize from 'globalize'; -import dom from 'dom'; -import dialogHelper from 'dialogHelper'; -import 'emby-checkbox'; -import 'emby-select'; -import 'emby-input'; +import globalize from '../../scripts/globalize'; +import dom from '../../scripts/dom'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-select/emby-select'; +import '../../elements/emby-input/emby-input'; function getDefaultImageConfig(itemType, type) { return { diff --git a/src/components/imageUploader/imageUploader.js b/src/components/imageUploader/imageUploader.js index e89cbda2ae..10beff5cab 100644 --- a/src/components/imageUploader/imageUploader.js +++ b/src/components/imageUploader/imageUploader.js @@ -5,16 +5,18 @@ * @module components/imageUploader/imageUploader */ -import dialogHelper from 'dialogHelper'; -import dom from 'dom'; -import loading from 'loading'; -import scrollHelper from 'scrollHelper'; -import layoutManager from 'layoutManager'; -import globalize from 'globalize'; -import 'emby-button'; -import 'emby-select'; -import 'formDialogStyle'; -import 'css!./style'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import dom from '../../scripts/dom'; +import loading from '../loading/loading'; +import scrollHelper from '../../scripts/scrollHelper'; +import layoutManager from '../layoutManager'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-select/emby-select'; +import '../formdialog.css'; +import './style.css'; +import ServerConnections from '../ServerConnections'; +import toast from '../toast/toast'; let currentItemId; let currentServerId; @@ -26,16 +28,12 @@ import 'css!./style'; switch (evt.target.error.code) { case evt.target.error.NOT_FOUND_ERR: - import('toast').then(({default: toast}) => { - toast(globalize.translate('MessageFileReadError')); - }); + toast(globalize.translate('MessageFileReadError')); break; case evt.target.error.ABORT_ERR: break; // noop default: - import('toast').then(({default: toast}) => { - toast(globalize.translate('MessageFileReadError')); - }); + toast(globalize.translate('MessageFileReadError')); break; } } @@ -87,9 +85,7 @@ import 'css!./style'; } if (!file.type.startsWith('image/')) { - import('toast').then(({default: toast}) => { - toast(globalize.translate('MessageImageFileTypeAllowed')); - }); + toast(globalize.translate('MessageImageFileTypeAllowed')); e.preventDefault(); return false; } @@ -100,14 +96,12 @@ import 'css!./style'; const imageType = dlg.querySelector('#selectImageType').value; if (imageType === 'None') { - import('toast').then(({default: toast}) => { - toast(globalize.translate('MessageImageTypeNotSelected')); - }); + toast(globalize.translate('MessageImageTypeNotSelected')); e.preventDefault(); return false; } - window.connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => { + ServerConnections.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => { dlg.querySelector('#uploadImage').value = ''; loading.hide(); @@ -134,7 +128,7 @@ import 'css!./style'; function showEditor(options, resolve) { options = options || {}; - return import('text!./imageUploader.template.html').then(({default: template}) => { + return import('./imageUploader.template.html').then(({default: template}) => { currentItemId = options.itemId; currentServerId = options.serverId; diff --git a/src/components/imageeditor/imageeditor.js b/src/components/imageeditor/imageeditor.js index e5b59cfb22..69e9bcb8c7 100644 --- a/src/components/imageeditor/imageeditor.js +++ b/src/components/imageeditor/imageeditor.js @@ -1,18 +1,21 @@ -import dialogHelper from 'dialogHelper'; -import loading from 'loading'; -import dom from 'dom'; -import layoutManager from 'layoutManager'; -import focusManager from 'focusManager'; -import globalize from 'globalize'; -import scrollHelper from 'scrollHelper'; -import imageLoader from 'imageLoader'; -import browser from 'browser'; -import appHost from 'apphost'; -import 'cardStyle'; -import 'formDialogStyle'; -import 'emby-button'; -import 'paper-icon-button-light'; -import 'css!./imageeditor'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import loading from '../loading/loading'; +import dom from '../../scripts/dom'; +import layoutManager from '../layoutManager'; +import focusManager from '../focusManager'; +import globalize from '../../scripts/globalize'; +import scrollHelper from '../../scripts/scrollHelper'; +import imageLoader from '../images/imageLoader'; +import browser from '../../scripts/browser'; +import { appHost } from '../apphost'; +import '../cardbuilder/card.css'; +import '../formdialog.css'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-button/paper-icon-button-light'; +import './imageeditor.css'; +import ServerConnections from '../ServerConnections'; +import alert from '../alert'; +import confirm from '../confirm/confirm'; /* eslint-disable indent */ @@ -35,10 +38,10 @@ import 'css!./imageeditor'; let apiClient; if (item) { - apiClient = window.connectionManager.getApiClient(item.ServerId); + apiClient = ServerConnections.getApiClient(item.ServerId); reloadItem(page, item, apiClient, focusContext); } else { - apiClient = window.connectionManager.getApiClient(currentItem.ServerId); + apiClient = ServerConnections.getApiClient(currentItem.ServerId); apiClient.getItem(apiClient.getCurrentUserId(), currentItem.Id).then(function (item) { reloadItem(page, item, apiClient, focusContext); }); @@ -199,15 +202,11 @@ import 'css!./imageeditor'; return; } - import('confirm').then(({default: confirm}) => { - confirm({ - - text: globalize.translate('ConfirmDeleteImage'), - confirmText: globalize.translate('Delete'), - primary: 'delete' - - }).then(afterConfirm); - }); + confirm({ + text: globalize.translate('ConfirmDeleteImage'), + confirmText: globalize.translate('Delete'), + primary: 'delete' + }).then(afterConfirm); } function moveImage(context, apiClient, itemId, type, index, newIndex, focusContext) { @@ -215,9 +214,7 @@ import 'css!./imageeditor'; hasChanges = true; reload(context, null, focusContext); }, function () { - import('alert').then(({default: alert}) => { - alert(globalize.translate('ErrorDefault')); - }); + alert(globalize.translate('ErrorDefault')); }); } @@ -281,7 +278,7 @@ import 'css!./imageeditor'; } function showImageDownloader(page, imageType) { - import('imageDownloader').then(({default: ImageDownloader}) => { + import('../imageDownloader/imageDownloader').then((ImageDownloader) => { ImageDownloader.show(currentItem.Id, currentItem.ServerId, currentItem.Type, imageType).then(function () { hasChanges = true; reload(page); @@ -292,14 +289,14 @@ import 'css!./imageeditor'; function showActionSheet(context, imageCard) { const itemId = imageCard.getAttribute('data-id'); const serverId = imageCard.getAttribute('data-serverid'); - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); const type = imageCard.getAttribute('data-imagetype'); const index = parseInt(imageCard.getAttribute('data-index')); const providerCount = parseInt(imageCard.getAttribute('data-providers')); const numImages = parseInt(imageCard.getAttribute('data-numimages')); - import('actionsheet').then(({default: actionSheet}) => { + import('../actionSheet/actionSheet').then(({default: actionSheet}) => { const commands = []; commands.push({ @@ -370,7 +367,7 @@ import 'css!./imageeditor'; addListeners(context, 'btnOpenUploadMenu', 'click', function () { const imageType = this.getAttribute('data-imagetype'); - import('imageUploader').then(({default: imageUploader}) => { + import('../imageUploader/imageUploader').then(({default: imageUploader}) => { imageUploader.show({ theme: options.theme, @@ -403,7 +400,7 @@ import 'css!./imageeditor'; const type = this.getAttribute('data-imagetype'); let index = this.getAttribute('data-index'); index = index === 'null' ? null : parseInt(index); - const apiClient = window.connectionManager.getApiClient(currentItem.ServerId); + const apiClient = ServerConnections.getApiClient(currentItem.ServerId); deleteImage(context, currentItem.Id, type, index, apiClient, true); }); @@ -411,7 +408,7 @@ import 'css!./imageeditor'; const type = this.getAttribute('data-imagetype'); const index = this.getAttribute('data-index'); const newIndex = this.getAttribute('data-newindex'); - const apiClient = window.connectionManager.getApiClient(currentItem.ServerId); + const apiClient = ServerConnections.getApiClient(currentItem.ServerId); moveImage(context, apiClient, currentItem.Id, type, index, newIndex, dom.parentWithClass(this, 'itemsContainer')); }); } @@ -422,8 +419,8 @@ import 'css!./imageeditor'; loading.show(); - import('text!./imageeditor.template.html').then(({default: template}) => { - const apiClient = window.connectionManager.getApiClient(serverId); + import('./imageeditor.template.html').then(({default: template}) => { + const apiClient = ServerConnections.getApiClient(serverId); apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { const dialogOptions = { removeOnClose: true diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js index 9dc708098d..1811b117e1 100644 --- a/src/components/images/imageLoader.js +++ b/src/components/images/imageLoader.js @@ -1,7 +1,7 @@ -import * as lazyLoader from 'lazyLoader'; -import * as userSettings from 'userSettings'; -import * as blurhash from 'blurhash'; -import 'css!./style'; +import * as lazyLoader from '../lazyLoader/lazyLoaderIntersectionObserver'; +import * as userSettings from '../../scripts/settings/userSettings'; +import { decode, isBlurhashValid } from 'blurhash'; +import './style.css'; /* eslint-disable indent */ export function lazyImage(elem, source = elem.getAttribute('data-src')) { @@ -13,7 +13,7 @@ import 'css!./style'; } function itemBlurhashing(target, blurhashstr) { - if (blurhash.isBlurhashValid(blurhashstr)) { + if (isBlurhashValid(blurhashstr)) { // 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. // Lower values had more visible pixelation @@ -21,7 +21,7 @@ import 'css!./style'; const height = 18; let pixels; try { - pixels = blurhash.decode(blurhashstr, width, height); + pixels = decode(blurhashstr, width, height); } catch (err) { console.error('Blurhash decode error: ', err); target.classList.add('non-blurhashable'); @@ -133,6 +133,7 @@ import 'css!./style'; } } } + lazyLoader.lazyChildren(elem, fillImage); } diff --git a/src/components/indicators/indicators.js b/src/components/indicators/indicators.js index bbd672ef72..5f8a8691d1 100644 --- a/src/components/indicators/indicators.js +++ b/src/components/indicators/indicators.js @@ -1,8 +1,8 @@ -import datetime from 'datetime'; -import itemHelper from 'itemHelper'; -import 'emby-progressbar'; -import 'css!./indicators.css'; -import 'material-icons'; +import datetime from '../../scripts/datetime'; +import itemHelper from '../itemHelper'; +import '../../elements/emby-progressbar/emby-progressbar'; +import './indicators.css'; +import 'material-design-icons-iconfont'; export function enableProgressIndicator(item) { if (item.MediaType === 'Video' && item.Type !== 'TvChannel') { diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js index f36f623d9f..c8664512ef 100644 --- a/src/components/itemContextMenu.js +++ b/src/components/itemContextMenu.js @@ -1,10 +1,12 @@ -import appHost from 'apphost'; -import globalize from 'globalize'; -import itemHelper from 'itemHelper'; -import appRouter from 'appRouter'; -import playbackManager from 'playbackManager'; -import browser from 'browser'; -import actionsheet from 'actionsheet'; +import browser from '../scripts/browser'; +import globalize from '../scripts/globalize'; +import actionsheet from './actionSheet/actionSheet'; +import { appHost } from './apphost'; +import { appRouter } from './appRouter'; +import itemHelper from './itemHelper'; +import { playbackManager } from './playback/playbackmanager'; +import ServerConnections from './ServerConnections'; +import toast from './toast/toast'; /* eslint-disable indent */ export function getCommands(options) { @@ -329,12 +331,12 @@ import actionsheet from 'actionsheet'; function executeCommand(item, id, options) { const itemId = item.Id; const serverId = item.ServerId; - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); return new Promise(function (resolve, reject) { switch (id) { case 'addtocollection': - import('collectionEditor').then(({default: collectionEditor}) => { + import('./collectionEditor/collectionEditor').then(({default: collectionEditor}) => { new collectionEditor({ items: [itemId], serverId: serverId @@ -342,7 +344,7 @@ import actionsheet from 'actionsheet'; }); break; case 'addtoplaylist': - import('playlistEditor').then(({default: playlistEditor}) => { + import('./playlisteditor/playlisteditor').then(({default: playlistEditor}) => { new playlistEditor({ items: [itemId], serverId: serverId @@ -350,7 +352,7 @@ import actionsheet from 'actionsheet'; }); break; case 'download': - import('fileDownloader').then((fileDownloader) => { + import('../scripts/fileDownloader').then((fileDownloader) => { const downloadHref = apiClient.getItemDownloadUrl(itemId); fileDownloader.download([{ url: downloadHref, @@ -372,9 +374,7 @@ import actionsheet from 'actionsheet'; textArea.select(); if (document.execCommand('copy')) { - import('toast').then(({default: toast}) => { - toast(globalize.translate('CopyStreamURLSuccess')); - }); + toast(globalize.translate('CopyStreamURLSuccess')); } else { prompt(globalize.translate('CopyStreamURL'), downloadHref); } @@ -387,9 +387,7 @@ import actionsheet from 'actionsheet'; } else { /* eslint-disable-next-line compat/compat */ navigator.clipboard.writeText(downloadHref).then(function () { - import('toast').then(({default: toast}) => { - toast(globalize.translate('CopyStreamURLSuccess')); - }); + toast(globalize.translate('CopyStreamURLSuccess')); }).catch(function () { textAreaCopy(); }); @@ -398,7 +396,7 @@ import actionsheet from 'actionsheet'; break; } case 'editsubtitles': - import('subtitleEditor').then(({default: subtitleEditor}) => { + import('./subtitleeditor/subtitleeditor').then(({default: subtitleEditor}) => { subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; @@ -406,7 +404,7 @@ import actionsheet from 'actionsheet'; editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); break; case 'editimages': - import('imageEditor').then(({default: imageEditor}) => { + import('./imageeditor/imageeditor').then((imageEditor) => { imageEditor.show({ itemId: itemId, serverId: serverId @@ -414,12 +412,12 @@ import actionsheet from 'actionsheet'; }); break; case 'identify': - import('itemIdentifier').then(({default: itemIdentifier}) => { + import('./itemidentifier/itemidentifier').then((itemIdentifier) => { itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; case 'moremediainfo': - import('itemMediaInfo').then(({default: itemMediaInfo}) => { + import('./itemMediaInfo/itemMediaInfo').then((itemMediaInfo) => { itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id)); }); break; @@ -454,7 +452,7 @@ import actionsheet from 'actionsheet'; playbackManager.clearQueue(); break; case 'record': - import('recordingCreator').then(({default: recordingCreator}) => { + import('./recordingcreator/recordingcreator').then(({default: recordingCreator}) => { recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; @@ -525,7 +523,7 @@ import actionsheet from 'actionsheet'; } function deleteTimer(apiClient, item, resolve, command) { - import('recordingHelper').then(({default: recordingHelper}) => { + import('./recordingcreator/recordinghelper').then(({default: recordingHelper}) => { const timerId = item.TimerId || item.Id; recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () { getResolveFunction(resolve, command, true)(); @@ -534,7 +532,7 @@ import actionsheet from 'actionsheet'; } function deleteSeriesTimer(apiClient, item, resolve, command) { - import('recordingHelper').then(({default: recordingHelper}) => { + import('./recordingcreator/recordinghelper').then(({default: recordingHelper}) => { recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () { getResolveFunction(resolve, command, true)(); }); @@ -568,15 +566,15 @@ import actionsheet from 'actionsheet'; const serverId = apiClient.serverInfo().Id; if (item.Type === 'Timer') { - import('recordingEditor').then(({default: recordingEditor}) => { + import('./recordingcreator/recordingeditor').then(({default: recordingEditor}) => { recordingEditor.show(item.Id, serverId).then(resolve, reject); }); } else if (item.Type === 'SeriesTimer') { - import('seriesRecordingEditor').then(({default: recordingEditor}) => { + import('./recordingcreator/seriesrecordingeditor').then(({default: recordingEditor}) => { recordingEditor.show(item.Id, serverId).then(resolve, reject); }); } else { - import('metadataEditor').then(({default: metadataEditor}) => { + import('./metadataEditor/metadataEditor').then(({default: metadataEditor}) => { metadataEditor.show(item.Id, serverId).then(resolve, reject); }); } @@ -585,7 +583,7 @@ import actionsheet from 'actionsheet'; function deleteItem(apiClient, item) { return new Promise(function (resolve, reject) { - import('deleteHelper').then(({default: deleteHelper}) => { + import('../scripts/deleteHelper').then((deleteHelper) => { deleteHelper.deleteItem({ item: item, navigate: false @@ -597,7 +595,7 @@ import actionsheet from 'actionsheet'; } function refresh(apiClient, item) { - import('refreshDialog').then(({default: refreshDialog}) => { + import('./refreshdialog/refreshdialog').then(({default: refreshDialog}) => { new refreshDialog({ itemIds: [item.Id], serverId: apiClient.serverInfo().Id, diff --git a/src/components/itemHelper.js b/src/components/itemHelper.js index 7d1ac0e110..de771546b0 100644 --- a/src/components/itemHelper.js +++ b/src/components/itemHelper.js @@ -1,5 +1,5 @@ -import appHost from 'apphost'; -import globalize from 'globalize'; +import { appHost } from './apphost'; +import globalize from '../scripts/globalize'; export function getDisplayName(item, options = {}) { if (!item) { diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js index bd3a157dab..2094bcdacc 100644 --- a/src/components/itemMediaInfo/itemMediaInfo.js +++ b/src/components/itemMediaInfo/itemMediaInfo.js @@ -5,17 +5,18 @@ * @module components/itemMediaInfo/itemMediaInfo */ -import dialogHelper from 'dialogHelper'; -import layoutManager from 'layoutManager'; -import globalize from 'globalize'; -import loading from 'loading'; -import 'emby-select'; -import 'listViewStyle'; -import 'paper-icon-button-light'; -import 'css!./../formdialog'; -import 'material-icons'; -import 'emby-button'; -import 'flexStyles'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import layoutManager from '../layoutManager'; +import globalize from '../../scripts/globalize'; +import loading from '../loading/loading'; +import '../../elements/emby-select/emby-select'; +import '../listview/listview.css'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../formdialog.css'; +import 'material-design-icons-iconfont'; +import '../../assets/css/flexstyles.scss'; +import ServerConnections from '../ServerConnections'; function setMediaInfo(user, page, item) { let html = item.MediaSources.map(version => { @@ -162,7 +163,7 @@ import 'flexStyles'; } function loadMediaInfo(itemId, serverId, template) { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => { const dialogOptions = { size: 'small', @@ -193,7 +194,7 @@ import 'flexStyles'; export function show(itemId, serverId) { loading.show(); - return import('text!./itemMediaInfo.template.html').then(({default: template}) => { + return import('./itemMediaInfo.template.html').then(({default: template}) => { return new Promise((resolve, reject) => { loadMediaInfo(itemId, serverId, template).then(resolve, reject); }); diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js index 956cbb4f64..382226478f 100644 --- a/src/components/itemidentifier/itemidentifier.js +++ b/src/components/itemidentifier/itemidentifier.js @@ -5,19 +5,21 @@ * @module components/itemidentifier/itemidentifier */ -import dialogHelper from 'dialogHelper'; -import loading from 'loading'; -import globalize from 'globalize'; -import scrollHelper from 'scrollHelper'; -import layoutManager from 'layoutManager'; -import focusManager from 'focusManager'; -import browser from 'browser'; -import 'emby-input'; -import 'emby-checkbox'; -import 'paper-icon-button-light'; -import 'css!./../formdialog'; -import 'material-icons'; -import 'cardStyle'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import loading from '../loading/loading'; +import globalize from '../../scripts/globalize'; +import scrollHelper from '../../scripts/scrollHelper'; +import layoutManager from '../layoutManager'; +import focusManager from '../focusManager'; +import browser from '../../scripts/browser'; +import '../../elements/emby-input/emby-input'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../formdialog.css'; +import 'material-design-icons-iconfont'; +import '../cardbuilder/card.css'; +import ServerConnections from '../ServerConnections'; +import toast from '../toast/toast'; const enableFocusTransform = !browser.slow && !browser.edge; @@ -30,7 +32,7 @@ import 'cardStyle'; let currentSearchResult; function getApiClient() { - return window.connectionManager.getApiClient(currentServerId); + return ServerConnections.getApiClient(currentServerId); } function searchForIdentificationResults(page) { @@ -67,9 +69,7 @@ import 'cardStyle'; } if (!hasId && !lookupInfo.Name) { - import('toast').then(({default: toast}) => { - toast(globalize.translate('PleaseEnterNameOrId')); - }); + toast(globalize.translate('PleaseEnterNameOrId')); return; } @@ -334,7 +334,7 @@ import 'cardStyle'; function showEditor(itemId) { loading.show(); - return import('text!./itemidentifier.template.html').then(({default: template}) => { + return import('./itemidentifier.template.html').then(({default: template}) => { const apiClient = getApiClient(); apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => { @@ -416,7 +416,7 @@ import 'cardStyle'; currentItem = null; currentItemType = itemType; - return import('text!./itemidentifier.template.html').then(({default: template}) => { + return import('./itemidentifier.template.html').then(({default: template}) => { const dialogOptions = { size: 'small', removeOnClose: true, diff --git a/src/components/itemsrefresher.js b/src/components/itemsrefresher.js index 3883e6e490..b5a73f5c45 100644 --- a/src/components/itemsrefresher.js +++ b/src/components/itemsrefresher.js @@ -1,6 +1,6 @@ -import playbackManager from 'playbackManager'; -import serverNotifications from 'serverNotifications'; -import events from 'events'; +import { playbackManager } from './playback/playbackmanager'; +import serverNotifications from '../scripts/serverNotifications'; +import { Events } from 'jellyfin-apiclient'; function onUserDataChanged(e, apiClient, userData) { const instance = this; @@ -110,7 +110,7 @@ function onPlaybackStopped(e, stopInfo) { function addNotificationEvent(instance, name, handler, owner) { const localHandler = handler.bind(instance); owner = owner || serverNotifications; - events.on(owner, name, localHandler); + Events.on(owner, name, localHandler); instance['event_' + name] = localHandler; } @@ -118,7 +118,7 @@ function removeNotificationEvent(instance, name, owner) { const handler = instance['event_' + name]; if (handler) { owner = owner || serverNotifications; - events.off(owner, name, handler); + Events.off(owner, name, handler); instance['event_' + name] = null; } } diff --git a/src/components/layoutManager.js b/src/components/layoutManager.js index 88a7265f8b..7268b3914b 100644 --- a/src/components/layoutManager.js +++ b/src/components/layoutManager.js @@ -1,6 +1,8 @@ -import browser from 'browser'; -import appSettings from 'appSettings'; -import events from 'events'; + +import { appHost } from './apphost'; +import browser from '../scripts/browser'; +import appSettings from '../scripts/settings/appSettings'; +import { Events } from 'jellyfin-apiclient'; function setLayout(instance, layout, selectedLayout) { if (layout === selectedLayout) { @@ -30,10 +32,10 @@ class LayoutManager { } } - events.trigger(this, 'modechange'); + Events.trigger(this, 'modechange'); } - getSavedLayout(layout) { + getSavedLayout() { return appSettings.get('layout'); } @@ -58,4 +60,12 @@ class LayoutManager { } } -export default new LayoutManager(); +const layoutManager = new LayoutManager(); + +if (appHost.getDefaultLayout) { + layoutManager.defaultLayout = appHost.getDefaultLayout(); +} + +layoutManager.init(); + +export default layoutManager; diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js index 91dbe5ab9e..b84eb67bf6 100644 --- a/src/components/libraryoptionseditor/libraryoptionseditor.js +++ b/src/components/libraryoptionseditor/libraryoptionseditor.js @@ -5,11 +5,11 @@ * @module components/libraryoptionseditor/libraryoptionseditor */ -import globalize from 'globalize'; -import dom from 'dom'; -import 'emby-checkbox'; -import 'emby-select'; -import 'emby-input'; +import globalize from '../../scripts/globalize'; +import dom from '../../scripts/dom'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-select/emby-select'; +import '../../elements/emby-input/emby-input'; function populateLanguages(parent) { return ApiClient.getCultures().then(languages => { @@ -258,11 +258,9 @@ import 'emby-input'; elem.innerHTML = html; if (html) { elem.classList.remove('hide'); - page.querySelector('.chkDownloadImagesInAdvanceContainer').classList.remove('hide'); page.querySelector('.chkSaveLocalContainer').classList.remove('hide'); } else { elem.classList.add('hide'); - page.querySelector('.chkDownloadImagesInAdvanceContainer').classList.add('hide'); page.querySelector('.chkSaveLocalContainer').classList.add('hide'); } return true; @@ -306,7 +304,7 @@ import 'emby-input'; } function showImageOptionsForType(type) { - import('imageoptionseditor').then(({default: ImageOptionsEditor}) => { + import('../imageOptionsEditor/imageOptionsEditor').then(({default: ImageOptionsEditor}) => { let typeOptions = getTypeOptions(currentLibraryOptions, type); if (!typeOptions) { typeOptions = { @@ -364,8 +362,9 @@ import 'emby-input'; currentAvailableOptions = null; const isNewLibrary = libraryOptions === null; isNewLibrary && parent.classList.add('newlibrary'); - const response = await fetch('components/libraryoptionseditor/libraryoptionseditor.template.html'); - const template = await response.text(); + + const { default: template } = await import('./libraryoptionseditor.template.html'); + parent.innerHTML = globalize.translateHtml(template); populateRefreshInterval(parent.querySelector('#selectAutoRefreshInterval')); const promises = [populateLanguages(parent), populateCountries(parent.querySelector('#selectCountry'))]; @@ -507,7 +506,6 @@ import 'emby-input'; EnableRealtimeMonitor: parent.querySelector('.chkEnableRealtimeMonitor').checked, ExtractChapterImagesDuringLibraryScan: parent.querySelector('.chkExtractChaptersDuringLibraryScan').checked, EnableChapterImageExtraction: parent.querySelector('.chkExtractChapterImages').checked, - DownloadImagesInAdvance: parent.querySelector('#chkDownloadImagesInAdvance').checked, EnableInternetProviders: true, SaveLocalMetadata: parent.querySelector('#chkSaveLocal').checked, EnableAutomaticSeriesGrouping: parent.querySelector('.chkAutomaticallyGroupSeries').checked, @@ -564,7 +562,6 @@ import 'emby-input'; parent.querySelector('.chkEnableRealtimeMonitor').checked = options.EnableRealtimeMonitor; parent.querySelector('.chkExtractChaptersDuringLibraryScan').checked = options.ExtractChapterImagesDuringLibraryScan; parent.querySelector('.chkExtractChapterImages').checked = options.EnableChapterImageExtraction; - parent.querySelector('#chkDownloadImagesInAdvance').checked = options.DownloadImagesInAdvance; parent.querySelector('#chkSaveLocal').checked = options.SaveLocalMetadata; parent.querySelector('.chkAutomaticallyGroupSeries').checked = options.EnableAutomaticSeriesGrouping; parent.querySelector('#chkEnableEmbeddedTitles').checked = options.EnableEmbeddedTitles; diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.template.html b/src/components/libraryoptionseditor/libraryoptionseditor.template.html index 9f704e13e8..5bf162478d 100644 --- a/src/components/libraryoptionseditor/libraryoptionseditor.template.html +++ b/src/components/libraryoptionseditor/libraryoptionseditor.template.html @@ -69,14 +69,6 @@
${LabelSaveLocalMetadataHelp}
-
- -
${OptionDownloadImagesInAdvanceHelp}
-
-
'; - if (autocast.supported()) { + if (supported()) { html += '
'; @@ -285,7 +280,7 @@ function onMirrorChange() { } function onAutoCastChange() { - autocast.enable(this.checked); + enable(this.checked); } document.addEventListener('viewshow', function (e) { @@ -300,21 +295,21 @@ document.addEventListener('viewshow', function (e) { } }); -events.on(appSettings, 'change', function (e, name) { +Events.on(appSettings, 'change', function (e, name) { if (name === 'displaymirror') { mirrorIfEnabled(); } }); -events.on(playbackManager, 'pairing', function (e) { +Events.on(playbackManager, 'pairing', function (e) { loading.show(); }); -events.on(playbackManager, 'paired', function (e) { +Events.on(playbackManager, 'paired', function (e) { loading.hide(); }); -events.on(playbackManager, 'pairerror', function (e) { +Events.on(playbackManager, 'pairerror', function (e) { loading.hide(); }); diff --git a/src/components/playback/playersettingsmenu.js b/src/components/playback/playersettingsmenu.js index 40819f62ea..cc05d6e704 100644 --- a/src/components/playback/playersettingsmenu.js +++ b/src/components/playback/playersettingsmenu.js @@ -1,7 +1,8 @@ -import actionsheet from 'actionsheet'; -import playbackManager from 'playbackManager'; -import globalize from 'globalize'; -import qualityoptions from 'qualityoptions'; +import actionsheet from '../actionSheet/actionSheet'; +import { playbackManager } from '../playback/playbackmanager'; +import globalize from '../../scripts/globalize'; +import qualityoptions from '../qualityOptions'; +import ServerConnections from '../ServerConnections'; function showQualityMenu(player, btn) { const videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) { @@ -32,18 +33,18 @@ function showQualityMenu(player, btn) { return opt; }); - let selectedId = options.filter(function (o) { + const selectedId = options.filter(function (o) { return o.selected; }); - selectedId = selectedId.length ? selectedId[0].bitrate : null; + const selectedBitrate = selectedId.length ? selectedId[0].bitrate : null; return actionsheet.show({ items: menuItems, positionTo: btn }).then(function (id) { const bitrate = parseInt(id); - if (bitrate !== selectedId) { + if (bitrate !== selectedBitrate) { playbackManager.setMaxStreamingBitrate({ enableAutomaticBitrateDetection: bitrate ? false : true, maxBitrate: bitrate @@ -250,7 +251,7 @@ export function show(options) { return showWithUser(options, player, null); } - const apiClient = window.connectionManager.getApiClient(currentItem.ServerId); + const apiClient = ServerConnections.getApiClient(currentItem.ServerId); return apiClient.getCurrentUser().then(function (user) { return showWithUser(options, player, user); }); diff --git a/src/components/playback/playmethodhelper.js b/src/components/playback/playmethodhelper.js index 50210aa2f2..1e7002b45d 100644 --- a/src/components/playback/playmethodhelper.js +++ b/src/components/playback/playmethodhelper.js @@ -3,7 +3,9 @@ export function getDisplayPlayMethod(session) { return null; } - if (session.TranscodingInfo && session.TranscodingInfo.IsVideoDirect) { + if (session.TranscodingInfo && session.TranscodingInfo.IsVideoDirect && session.TranscodingInfo.IsAudioDirect) { + return 'Remux'; + } else if (session.TranscodingInfo && session.TranscodingInfo.IsVideoDirect) { return 'DirectStream'; } else if (session.PlayState.PlayMethod === 'Transcode') { return 'Transcode'; diff --git a/src/components/playback/remotecontrolautoplay.js b/src/components/playback/remotecontrolautoplay.js index c0adb57a45..6d862a5491 100644 --- a/src/components/playback/remotecontrolautoplay.js +++ b/src/components/playback/remotecontrolautoplay.js @@ -1,5 +1,5 @@ -import events from 'events'; -import playbackManager from 'playbackManager'; +import { Events } from 'jellyfin-apiclient'; +import { playbackManager } from '../playback/playbackmanager'; function transferPlayback(oldPlayer, newPlayer) { const state = playbackManager.getPlayerState(oldPlayer); @@ -26,7 +26,7 @@ function transferPlayback(oldPlayer, newPlayer) { }); } -events.on(playbackManager, 'playerchange', (e, newPlayer, newTarget, oldPlayer) => { +Events.on(playbackManager, 'playerchange', (e, newPlayer, newTarget, oldPlayer) => { if (!oldPlayer || !newPlayer) { return; } diff --git a/src/components/playback/volumeosd.js b/src/components/playback/volumeosd.js index c35914b192..3269b289d0 100644 --- a/src/components/playback/volumeosd.js +++ b/src/components/playback/volumeosd.js @@ -1,9 +1,10 @@ -import events from 'events'; -import playbackManager from 'playbackManager'; -import dom from 'dom'; -import browser from 'browser'; -import 'css!./iconosd'; -import 'material-icons'; + +import { Events } from 'jellyfin-apiclient'; +import { playbackManager } from './playbackmanager'; +import dom from '../../scripts/dom'; +import browser from '../../scripts/browser'; +import './iconosd.css'; +import 'material-design-icons-iconfont'; let currentPlayer; let osdElement; @@ -111,8 +112,8 @@ function releaseCurrentPlayer() { const player = currentPlayer; if (player) { - events.off(player, 'volumechange', onVolumeChanged); - events.off(player, 'playbackstop', hideOsd); + Events.off(player, 'volumechange', onVolumeChanged); + Events.off(player, 'playbackstop', hideOsd); currentPlayer = null; } } @@ -141,11 +142,11 @@ function bindToPlayer(player) { } hideOsd(); - events.on(player, 'volumechange', onVolumeChanged); - events.on(player, 'playbackstop', hideOsd); + Events.on(player, 'volumechange', onVolumeChanged); + Events.on(player, 'playbackstop', hideOsd); } -events.on(playbackManager, 'playerchange', function () { +Events.on(playbackManager, 'playerchange', function () { bindToPlayer(playbackManager.getCurrentPlayer()); }); diff --git a/src/components/playbackSettings/playbackSettings.js b/src/components/playbackSettings/playbackSettings.js index 782e3d38e1..bef8e5b0aa 100644 --- a/src/components/playbackSettings/playbackSettings.js +++ b/src/components/playbackSettings/playbackSettings.js @@ -1,13 +1,15 @@ -import browser from 'browser'; -import appSettings from 'appSettings'; -import appHost from 'apphost'; -import focusManager from 'focusManager'; -import qualityoptions from 'qualityoptions'; -import globalize from 'globalize'; -import loading from 'loading'; -import events from 'events'; -import 'emby-select'; -import 'emby-checkbox'; +import browser from '../../scripts/browser'; +import appSettings from '../../scripts/settings/appSettings'; +import { appHost } from '../apphost'; +import focusManager from '../focusManager'; +import qualityoptions from '../qualityOptions'; +import globalize from '../../scripts/globalize'; +import loading from '../loading/loading'; +import { Events } from 'jellyfin-apiclient'; +import '../../elements/emby-select/emby-select'; +import '../../elements/emby-checkbox/emby-checkbox'; +import ServerConnections from '../ServerConnections'; +import toast from '../toast/toast'; /* eslint-disable indent */ @@ -243,12 +245,10 @@ import 'emby-checkbox'; saveUser(context, user, userSettings, apiClient).then(() => { loading.hide(); if (enableSaveConfirmation) { - import('toast').then(({default: toast}) => { - toast(globalize.translate('SettingsSaved')); - }); + toast(globalize.translate('SettingsSaved')); } - events.trigger(instance, 'saved'); + Events.trigger(instance, 'saved'); }, () => { loading.hide(); }); @@ -257,7 +257,7 @@ import 'emby-checkbox'; function onSubmit(e) { const self = this; - const apiClient = window.connectionManager.getApiClient(self.options.serverId); + const apiClient = ServerConnections.getApiClient(self.options.serverId); const userId = self.options.userId; const userSettings = self.options.userSettings; @@ -274,7 +274,7 @@ import 'emby-checkbox'; } function embed(options, self) { - return import('text!./playbackSettings.template.html').then(({default: template}) => { + return import('./playbackSettings.template.html').then(({default: template}) => { options.element.innerHTML = globalize.translateHtml(template, 'core'); options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); @@ -304,7 +304,7 @@ import 'emby-checkbox'; loading.show(); const userId = self.options.userId; - const apiClient = window.connectionManager.getApiClient(self.options.serverId); + const apiClient = ServerConnections.getApiClient(self.options.serverId); const userSettings = self.options.userSettings; apiClient.getUser(userId).then(user => { diff --git a/src/components/playerstats/playerstats.js b/src/components/playerstats/playerstats.js index e100dee594..b4969c62e0 100644 --- a/src/components/playerstats/playerstats.js +++ b/src/components/playerstats/playerstats.js @@ -1,11 +1,12 @@ -import events from 'events'; -import globalize from 'globalize'; -import playbackManager from 'playbackManager'; -import syncPlayManager from 'syncPlayManager'; -import playMethodHelper from 'playMethodHelper'; -import layoutManager from 'layoutManager'; -import 'paper-icon-button-light'; -import 'css!./playerstats'; +import { Events } from 'jellyfin-apiclient'; +import '../../elements/emby-button/paper-icon-button-light'; +import globalize from '../../scripts/globalize'; +import layoutManager from '../layoutManager'; +import { playbackManager } from '../playback/playbackmanager'; +import playMethodHelper from '../playback/playmethodhelper'; +import syncPlayManager from '../syncPlay/syncPlayManager'; +import './playerstats.css'; +import ServerConnections from '../ServerConnections'; /* eslint-disable indent */ @@ -94,7 +95,7 @@ import 'css!./playerstats'; return Promise.resolve(instance.lastSession); } - const apiClient = window.connectionManager.getApiClient(playbackManager.currentItem(player).ServerId); + const apiClient = ServerConnections.getApiClient(playbackManager.currentItem(player).ServerId); return apiClient.getSessions({ deviceId: apiClient.deviceId() @@ -413,7 +414,7 @@ import 'css!./playerstats'; name: 'Original Media Info' }); - const apiClient = window.connectionManager.getApiClient(playbackManager.currentItem(player).ServerId); + const apiClient = ServerConnections.getApiClient(playbackManager.currentItem(player).ServerId); if (syncPlayManager.isSyncPlayEnabled() && apiClient.isMinServerVersion('10.6.0')) { categories.push({ stats: getSyncPlayStats(), @@ -450,14 +451,14 @@ import 'css!./playerstats'; }; instance.onTimeUpdate = localOnTimeUpdate; - events.on(player, 'timeupdate', localOnTimeUpdate); + Events.on(player, 'timeupdate', localOnTimeUpdate); } function unbindEvents(instance, player) { const localOnTimeUpdate = instance.onTimeUpdate; if (localOnTimeUpdate) { - events.off(player, 'timeupdate', localOnTimeUpdate); + Events.off(player, 'timeupdate', localOnTimeUpdate); } } diff --git a/src/components/playlisteditor/playlisteditor.js b/src/components/playlisteditor/playlisteditor.js index dda9436a29..72bc5ec0cb 100644 --- a/src/components/playlisteditor/playlisteditor.js +++ b/src/components/playlisteditor/playlisteditor.js @@ -1,17 +1,18 @@ -import dom from 'dom'; -import dialogHelper from 'dialogHelper'; -import loading from 'loading'; -import layoutManager from 'layoutManager'; -import playbackManager from 'playbackManager'; -import * as userSettings from 'userSettings'; -import appRouter from 'appRouter'; -import globalize from 'globalize'; -import 'emby-input'; -import 'paper-icon-button-light'; -import 'emby-select'; -import 'material-icons'; -import 'css!./../formdialog'; -import 'emby-button'; +import dom from '../../scripts/dom'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import loading from '../loading/loading'; +import layoutManager from '../layoutManager'; +import { playbackManager } from '../playback/playbackmanager'; +import * as userSettings from '../../scripts/settings/userSettings'; +import { appRouter } from '../appRouter'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-input/emby-input'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-select/emby-select'; +import 'material-design-icons-iconfont'; +import '../formdialog.css'; +import ServerConnections from '../ServerConnections'; /* eslint-disable indent */ @@ -21,7 +22,7 @@ import 'emby-button'; const panel = dom.parentWithClass(this, 'dialog'); const playlistId = panel.querySelector('#selectPlaylistToAddTo').value; - const apiClient = window.connectionManager.getApiClient(currentServerId); + const apiClient = ServerConnections.getApiClient(currentServerId); if (playlistId) { userSettings.set('playlisteditor-lastplaylistid', playlistId); @@ -112,7 +113,7 @@ import 'emby-button'; EnableTotalRecordCount: false }; - const apiClient = window.connectionManager.getApiClient(currentServerId); + const apiClient = ServerConnections.getApiClient(currentServerId); apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => { let html = ''; @@ -209,7 +210,7 @@ import 'emby-button'; } function centerFocus(elem, horiz, on) { - import('scrollHelper').then((scrollHelper) => { + import('../../scripts/scrollHelper').then((scrollHelper) => { const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); diff --git a/src/components/playmenu.js b/src/components/playmenu.js index 57ee5ca6e3..412c5375e0 100644 --- a/src/components/playmenu.js +++ b/src/components/playmenu.js @@ -1,7 +1,7 @@ -import actionsheet from 'actionsheet'; -import datetime from 'datetime'; -import playbackManager from 'playbackManager'; -import globalize from 'globalize'; +import actionsheet from './actionSheet/actionSheet'; +import datetime from '../scripts/datetime'; +import { playbackManager } from './playback/playbackmanager'; +import globalize from '../scripts/globalize'; export function show(options) { const item = options.item; diff --git a/src/components/pluginManager.js b/src/components/pluginManager.js index c07c77b736..ea76d30eea 100644 --- a/src/components/pluginManager.js +++ b/src/components/pluginManager.js @@ -1,5 +1,9 @@ -import events from 'events'; -import globalize from 'globalize'; +import { Events } from 'jellyfin-apiclient'; +import globalize from '../scripts/globalize'; +import loading from './loading/loading'; +import appSettings from '../scripts/settings/appSettings'; +import { playbackManager } from './playback/playbackmanager'; + /* eslint-disable indent */ // TODO: replace with each plugin version @@ -27,7 +31,7 @@ import globalize from 'globalize'; Emby.App.defineRoute(route, plugin.id); } - #registerPlugin(plugin) { + async #registerPlugin(plugin) { this.#register(plugin); if (plugin.getRoutes) { @@ -38,63 +42,62 @@ import globalize from 'globalize'; if (plugin.type === 'skin') { // translations won't be loaded for skins until needed - return Promise.resolve(plugin); + return plugin; } else { - return new Promise((resolve, reject) => { - this.#loadStrings(plugin) - .then(function () { - resolve(plugin); - }) - .catch(reject); - }); + return await this.#loadStrings(plugin); } } - loadPlugin(pluginSpec) { + async #preparePlugin(pluginSpec, plugin) { if (typeof pluginSpec === 'string') { - console.debug('Loading plugin (via deprecated requirejs method): ' + pluginSpec); + // See if it's already installed + const existing = this.plugins.filter(function (p) { + return p.id === plugin.id; + })[0]; - return new Promise((resolve, reject) => { - require([pluginSpec], (pluginFactory) => { - const plugin = pluginFactory.default ? new pluginFactory.default() : new pluginFactory(); + if (existing) { + return pluginSpec; + } - // See if it's already installed - const existing = this.pluginsList.filter(function (p) { - return p.id === plugin.id; - })[0]; + plugin.installUrl = pluginSpec; - if (existing) { - resolve(pluginSpec); - } - - plugin.installUrl = pluginSpec; - - const separatorIndex = Math.max(pluginSpec.lastIndexOf('/'), pluginSpec.lastIndexOf('\\')); - plugin.baseUrl = pluginSpec.substring(0, separatorIndex); - - const paths = {}; - paths[plugin.id] = plugin.baseUrl; - - requirejs.config({ - waitSeconds: 0, - paths: paths - }); - - this.#registerPlugin(plugin).then(resolve).catch(reject); - }); - }); - } else if (pluginSpec.then) { - return pluginSpec.then(pluginBuilder => { - return pluginBuilder(); - }).then((plugin) => { - console.debug(`Plugin loaded: ${plugin.id}`); - return this.#registerPlugin(plugin); - }); - } else { - 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); - return Promise.reject(err); + const separatorIndex = Math.max(pluginSpec.lastIndexOf('/'), pluginSpec.lastIndexOf('\\')); + plugin.baseUrl = pluginSpec.substring(0, separatorIndex); } + + return this.#registerPlugin(plugin); + } + + async loadPlugin(pluginSpec) { + let plugin; + + if (typeof pluginSpec === 'string') { + if (pluginSpec in window) { + console.log(`Loading plugin (via window): ${pluginSpec}`); + + // init plugin and pass basic dependencies + plugin = new window[pluginSpec]({ + events: Events, + loading, + appSettings, + playbackManager + }); + } else { + console.debug(`Loading plugin (via dynamic import): ${pluginSpec}`); + plugin = await import(/* webpackChunkName: "[request]" */ `../plugins/${pluginSpec}`); + } + } else if (pluginSpec.then) { + console.debug('Loading plugin (via promise/async function)'); + + const pluginResult = await pluginSpec; + plugin = new pluginResult.default; + } else { + const err = new TypeError('Plugins have to be a Promise that resolves to a plugin builder function'); + console.error(err); + throw err; + } + + return this.#preparePlugin(pluginSpec, plugin); } // In lieu of automatic discovery, plugins will register dynamic objects @@ -103,7 +106,7 @@ import globalize from 'globalize'; // type (skin, screensaver, etc) #register(obj) { this.pluginsList.push(obj); - events.trigger(this, 'registered', [obj]); + Events.trigger(this, 'registered', [obj]); } ofType(type) { @@ -148,4 +151,4 @@ import globalize from 'globalize'; /* eslint-enable indent */ -export default new PluginManager(); +export const pluginManager = new PluginManager(); diff --git a/src/components/prompt/prompt.js b/src/components/prompt/prompt.js index 868f1d865c..c2c52bd41c 100644 --- a/src/components/prompt/prompt.js +++ b/src/components/prompt/prompt.js @@ -1,14 +1,14 @@ -import browser from 'browser'; -import dialogHelper from 'dialogHelper'; -import layoutManager from 'layoutManager'; -import scrollHelper from 'scrollHelper'; -import globalize from 'globalize'; -import dom from 'dom'; -import 'material-icons'; -import 'emby-button'; -import 'paper-icon-button-light'; -import 'emby-input'; -import 'formDialogStyle'; +import browser from '../../scripts/browser'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import layoutManager from '../layoutManager'; +import scrollHelper from '../../scripts/scrollHelper'; +import globalize from '../../scripts/globalize'; +import dom from '../../scripts/dom'; +import 'material-design-icons-iconfont'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-input/emby-input'; +import '../formdialog.css'; /* eslint-disable indent */ export default (() => { @@ -117,7 +117,7 @@ export default (() => { } else { return options => { return new Promise((resolve, reject) => { - import('text!./prompt.template.html').then(({default: template}) => { + import('./prompt.template.html').then(({default: template}) => { if (typeof options === 'string') { options = { title: '', diff --git a/src/components/qualityOptions.js b/src/components/qualityOptions.js index 93a8d5fe73..2037cb8ccf 100644 --- a/src/components/qualityOptions.js +++ b/src/components/qualityOptions.js @@ -1,4 +1,4 @@ -import globalize from 'globalize'; +import globalize from '../scripts/globalize'; export function getVideoQualityOptions(options) { const maxStreamingBitrate = options.currentMaxBitrate; diff --git a/src/components/quickConnectSettings/quickConnectSettings.js b/src/components/quickConnectSettings/quickConnectSettings.js index 522684fe53..d91bc07295 100644 --- a/src/components/quickConnectSettings/quickConnectSettings.js +++ b/src/components/quickConnectSettings/quickConnectSettings.js @@ -1,5 +1,6 @@ -import globalize from 'globalize'; -import toast from 'toast'; +import globalize from '../../scripts/globalize'; +import toast from '../toast/toast'; +import Dashboard from '../../scripts/clientUtils'; export class QuickConnectSettings { constructor() { } diff --git a/src/components/recordingcreator/recordingbutton.js b/src/components/recordingcreator/recordingbutton.js index dc7da836da..393e7bea96 100644 --- a/src/components/recordingcreator/recordingbutton.js +++ b/src/components/recordingcreator/recordingbutton.js @@ -1,8 +1,9 @@ -import dom from 'dom'; -import recordingHelper from 'recordingHelper'; -import 'paper-icon-button-light'; -import 'emby-button'; -import 'css!./recordingfields'; +import dom from '../../scripts/dom'; +import recordingHelper from './recordinghelper'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-button/emby-button'; +import './recordingfields.css'; +import ServerConnections from '../ServerConnections'; function onRecordingButtonClick(e) { const item = this.item; @@ -52,7 +53,7 @@ class RecordingButton { } refresh(serverId, itemId) { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); const self = this; apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { self.refreshItem(item); diff --git a/src/components/recordingcreator/recordingcreator.js b/src/components/recordingcreator/recordingcreator.js index 27ad0584d5..a1545348ae 100644 --- a/src/components/recordingcreator/recordingcreator.js +++ b/src/components/recordingcreator/recordingcreator.js @@ -1,22 +1,23 @@ -import dialogHelper from 'dialogHelper'; -import globalize from 'globalize'; -import layoutManager from 'layoutManager'; -import mediaInfo from 'mediaInfo'; -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'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import globalize from '../../scripts/globalize'; +import layoutManager from '../layoutManager'; +import mediaInfo from '../mediainfo/mediainfo'; +import loading from '../loading/loading'; +import scrollHelper from '../../scripts/scrollHelper'; +import datetime from '../../scripts/datetime'; +import imageLoader from '../images/imageLoader'; +import recordingFields from './recordingfields'; +import { Events } from 'jellyfin-apiclient'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-collapse/emby-collapse'; +import '../../elements/emby-input/emby-input'; +import '../formdialog.css'; +import './recordingcreator.css'; +import 'material-design-icons-iconfont'; +import ServerConnections from '../ServerConnections'; +import { playbackManager } from '../playback/playbackmanager'; let currentDialog; let closeAction; @@ -68,7 +69,7 @@ function renderRecording(context, defaultTimer, program, apiClient, refreshRecor const imageContainer = context.querySelector('.recordingDialog-imageContainer'); if (imgUrl) { - imageContainer.innerHTML = ''; + imageContainer.innerHTML = ''; imageContainer.classList.remove('hide'); imageLoader.lazyChildren(imageContainer); @@ -102,7 +103,7 @@ function renderRecording(context, defaultTimer, program, apiClient, refreshRecor function reload(context, programId, serverId, refreshRecordingStateOnly) { loading.show(); - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); const promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId }); const promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()); @@ -117,14 +118,12 @@ function reload(context, programId, serverId, refreshRecordingStateOnly) { function executeCloseAction(action, programId, serverId) { if (action === 'play') { - import('playbackManager').then(({ default: playbackManager }) => { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); - apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) { - playbackManager.play({ - ids: [item.ChannelId], - serverId: serverId - }); + apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) { + playbackManager.play({ + ids: [item.ChannelId], + serverId: serverId }); }); return; @@ -137,7 +136,7 @@ function showEditor(itemId, serverId) { loading.show(); - import('text!./recordingcreator.template.html').then(({ default: template }) => { + import('./recordingcreator.template.html').then(({ default: template }) => { const dialogOptions = { removeOnClose: true, scrollY: false @@ -167,7 +166,7 @@ function showEditor(itemId, serverId) { } dlg.addEventListener('close', function () { - events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged); + Events.off(currentRecordingFields, 'recordingchanged', onRecordingChanged); executeCloseAction(closeAction, itemId, serverId); if (currentRecordingFields && currentRecordingFields.hasChanged()) { @@ -191,7 +190,7 @@ function showEditor(itemId, serverId) { serverId: serverId }); - events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged); + Events.on(currentRecordingFields, 'recordingchanged', onRecordingChanged); dialogHelper.open(dlg); }); diff --git a/src/components/recordingcreator/recordingeditor.js b/src/components/recordingcreator/recordingeditor.js index 37b55e4eec..740321fa45 100644 --- a/src/components/recordingcreator/recordingeditor.js +++ b/src/components/recordingcreator/recordingeditor.js @@ -1,17 +1,19 @@ -import dialogHelper from 'dialogHelper'; -import globalize from 'globalize'; -import layoutManager from 'layoutManager'; -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'; + +import dialogHelper from '../dialogHelper/dialogHelper'; +import globalize from '../../scripts/globalize'; +import layoutManager from '../layoutManager'; +import loading from '../loading/loading'; +import scrollHelper from '../../scripts/scrollHelper'; +import '../../assets/css/scrollstyles.css'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-collapse/emby-collapse'; +import '../../elements/emby-input/emby-input'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../formdialog.css'; +import './recordingcreator.css'; +import 'material-design-icons-iconfont'; +import '../../assets/css/flexstyles.scss'; +import ServerConnections from '../ServerConnections'; let currentDialog; let recordingDeleted = false; @@ -20,7 +22,7 @@ let currentServerId; let currentResolve; function deleteTimer(apiClient, timerId) { - return import('recordingHelper').then(({ default: recordingHelper }) => { + return import('./recordinghelper').then(({ default: recordingHelper }) => { recordingHelper.cancelTimerWithConfirmation(timerId, apiClient.serverId()); }); } @@ -40,7 +42,7 @@ function closeDialog(isDeleted) { function onSubmit(e) { const form = this; - const apiClient = window.connectionManager.getApiClient(currentServerId); + const apiClient = ServerConnections.getApiClient(currentServerId); apiClient.getLiveTvTimer(currentItemId).then(function (item) { item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60; @@ -60,7 +62,7 @@ function init(context) { }); context.querySelector('.btnCancelRecording').addEventListener('click', function () { - const apiClient = window.connectionManager.getApiClient(currentServerId); + const apiClient = ServerConnections.getApiClient(currentServerId); deleteTimer(apiClient, currentItemId).then(function () { closeDialog(true); @@ -74,7 +76,7 @@ function reload(context, id) { loading.show(); currentItemId = id; - const apiClient = window.connectionManager.getApiClient(currentServerId); + const apiClient = ServerConnections.getApiClient(currentServerId); apiClient.getLiveTvTimer(id).then(function (result) { renderTimer(context, result, apiClient); loading.hide(); @@ -89,7 +91,7 @@ function showEditor(itemId, serverId, options) { options = options || {}; currentResolve = resolve; - import('text!./recordingeditor.template.html').then(({default: template}) => { + import('./recordingeditor.template.html').then(({default: template}) => { const dialogOptions = { removeOnClose: true, scrollY: false diff --git a/src/components/recordingcreator/recordingfields.js b/src/components/recordingcreator/recordingfields.js index 9b3f0d16a3..49843fec81 100644 --- a/src/components/recordingcreator/recordingfields.js +++ b/src/components/recordingcreator/recordingfields.js @@ -1,13 +1,15 @@ -import globalize from 'globalize'; -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'; +import globalize from '../../scripts/globalize'; +import { Events } from 'jellyfin-apiclient'; +import serverNotifications from '../../scripts/serverNotifications'; +import loading from '../loading/loading'; +import dom from '../../scripts/dom'; +import recordingHelper from './recordinghelper'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-button/paper-icon-button-light'; +import './recordingfields.css'; +import '../../assets/css/flexstyles.scss'; +import ServerConnections from '../ServerConnections'; +import toast from '../toast/toast'; /*eslint prefer-const: "error"*/ @@ -45,7 +47,7 @@ function loadData(parent, program, apiClient) { function fetchData(instance) { const options = instance.options; - const apiClient = window.connectionManager.getApiClient(options.serverId); + const apiClient = ServerConnections.getApiClient(options.serverId); options.parent.querySelector('.recordingFields').classList.remove('hide'); return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) { @@ -104,20 +106,20 @@ class RecordingEditor { const timerChangedHandler = onTimerChangedExternally.bind(this); this.timerChangedHandler = timerChangedHandler; - events.on(serverNotifications, 'TimerCreated', timerChangedHandler); - events.on(serverNotifications, 'TimerCancelled', timerChangedHandler); + Events.on(serverNotifications, 'TimerCreated', timerChangedHandler); + Events.on(serverNotifications, 'TimerCancelled', timerChangedHandler); const seriesTimerChangedHandler = onSeriesTimerChangedExternally.bind(this); this.seriesTimerChangedHandler = seriesTimerChangedHandler; - events.on(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler); - events.on(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler); + Events.on(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler); + Events.on(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler); } embed() { const self = this; return new Promise(function (resolve, reject) { - import('text!./recordingfields.template.html').then(({default: template}) => { + import('./recordingfields.template.html').then(({default: template}) => { const options = self.options; const context = options.parent; context.innerHTML = globalize.translateHtml(template, 'core'); @@ -144,14 +146,14 @@ class RecordingEditor { const timerChangedHandler = this.timerChangedHandler; this.timerChangedHandler = null; - events.off(serverNotifications, 'TimerCreated', timerChangedHandler); - events.off(serverNotifications, 'TimerCancelled', timerChangedHandler); + 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); + Events.off(serverNotifications, 'SeriesTimerCreated', seriesTimerChangedHandler); + Events.off(serverNotifications, 'SeriesTimerCancelled', seriesTimerChangedHandler); } } @@ -162,7 +164,7 @@ function onManageRecordingClick(e) { } const self = this; - import('recordingEditor').then(({default: recordingEditor}) => { + import('./recordingeditor').then(({default: recordingEditor}) => { recordingEditor.show(self.TimerId, options.serverId, { enableCancel: false }).then(function () { @@ -180,7 +182,7 @@ function onManageSeriesRecordingClick(e) { const self = this; - import('seriesRecordingEditor').then(({default: seriesRecordingEditor}) => { + import('./seriesrecordingeditor').then(({default: seriesRecordingEditor}) => { seriesRecordingEditor.show(self.SeriesTimerId, options.serverId, { enableCancel: false @@ -196,7 +198,7 @@ function onRecordChange(e) { const self = this; const options = this.options; - const apiClient = window.connectionManager.getApiClient(options.serverId); + const apiClient = ServerConnections.getApiClient(options.serverId); const button = dom.parentWithTag(e.target, 'BUTTON'); const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active'); @@ -207,7 +209,7 @@ function onRecordChange(e) { if (!hasEnabledTimer) { loading.show(); recordingHelper.createRecording(apiClient, options.programId, false).then(function () { - events.trigger(self, 'recordingchanged'); + Events.trigger(self, 'recordingchanged'); fetchData(self); loading.hide(); }); @@ -216,7 +218,7 @@ function onRecordChange(e) { if (hasEnabledTimer) { loading.show(); recordingHelper.cancelTimer(apiClient, this.TimerId, true).then(function () { - events.trigger(self, 'recordingchanged'); + Events.trigger(self, 'recordingchanged'); fetchData(self); loading.hide(); }); @@ -225,9 +227,7 @@ function onRecordChange(e) { } function sendToast(msg) { - import('toast').then(({default: toast}) => { - toast(msg); - }); + toast(msg); } function onRecordSeriesChange(e) { @@ -235,7 +235,7 @@ function onRecordSeriesChange(e) { const self = this; const options = this.options; - const apiClient = window.connectionManager.getApiClient(options.serverId); + const apiClient = ServerConnections.getApiClient(options.serverId); const button = dom.parentWithTag(e.target, 'BUTTON'); const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active'); diff --git a/src/components/recordingcreator/recordinghelper.js b/src/components/recordingcreator/recordinghelper.js index 495378106c..1e999ce35c 100644 --- a/src/components/recordingcreator/recordinghelper.js +++ b/src/components/recordingcreator/recordinghelper.js @@ -1,5 +1,9 @@ -import globalize from 'globalize'; -import loading from 'loading'; +import globalize from '../../scripts/globalize'; +import loading from '../loading/loading'; +import ServerConnections from '../ServerConnections'; +import toast from '../toast/toast'; +import confirm from '../confirm/confirm'; +import dialog from '../dialog/dialog'; /*eslint prefer-const: "error"*/ @@ -28,48 +32,42 @@ function changeRecordingToSeries(apiClient, timerId, programId, confirmTimerCanc function cancelTimerWithConfirmation(timerId, serverId) { return new Promise(function (resolve, reject) { - import('confirm').then(({ default: confirm }) => { - confirm.default({ + confirm({ - text: globalize.translate('MessageConfirmRecordingCancellation'), - primary: 'delete', - confirmText: globalize.translate('HeaderCancelRecording'), - cancelText: globalize.translate('HeaderKeepRecording') + text: globalize.translate('MessageConfirmRecordingCancellation'), + primary: 'delete', + confirmText: globalize.translate('HeaderCancelRecording'), + cancelText: globalize.translate('HeaderKeepRecording') - }).then(function () { - loading.show(); + }).then(function () { + loading.show(); - const apiClient = window.connectionManager.getApiClient(serverId); - cancelTimer(apiClient, timerId, true).then(resolve, reject); - }, reject); - }); + const apiClient = ServerConnections.getApiClient(serverId); + cancelTimer(apiClient, timerId, true).then(resolve, reject); + }, reject); }); } function cancelSeriesTimerWithConfirmation(timerId, serverId) { return new Promise(function (resolve, reject) { - import('confirm').then(({ default: confirm }) => { - confirm.default({ + confirm({ - text: globalize.translate('MessageConfirmRecordingCancellation'), - primary: 'delete', - confirmText: globalize.translate('HeaderCancelSeries'), - cancelText: globalize.translate('HeaderKeepSeries') + text: globalize.translate('MessageConfirmRecordingCancellation'), + primary: 'delete', + confirmText: globalize.translate('HeaderCancelSeries'), + cancelText: globalize.translate('HeaderKeepSeries') - }).then(function () { - loading.show(); + }).then(function () { + loading.show(); - const apiClient = window.connectionManager.getApiClient(serverId); - apiClient.cancelLiveTvSeriesTimer(timerId).then(function () { - import('toast').then(({default: toast}) => { - toast(globalize.translate('SeriesCancelled')); - }); + const apiClient = ServerConnections.getApiClient(serverId); + apiClient.cancelLiveTvSeriesTimer(timerId).then(function () { + toast(globalize.translate('SeriesCancelled')); - loading.hide(); - resolve(); - }, reject); + loading.hide(); + resolve(); }, reject); - }); + }, reject); }); } @@ -98,75 +96,66 @@ function createRecording(apiClient, programId, isSeries) { } function sendToast(msg) { - import('toast').then(({ default: toast }) => { - toast(msg); - }); + toast(msg); } function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus, seriesTimerId) { return new Promise(function (resolve, reject) { - import('dialog').then(({ default: dialog }) => { - const items = []; + const items = []; + items.push({ + name: globalize.translate('HeaderKeepRecording'), + id: 'cancel', + type: 'submit' + }); + + if (timerStatus === 'InProgress') { items.push({ - name: globalize.translate('HeaderKeepRecording'), - id: 'cancel', - type: 'submit' - }); - - if (timerStatus === 'InProgress') { - items.push({ - name: globalize.translate('HeaderStopRecording'), - id: 'canceltimer', - type: 'cancel' - }); - } else { - items.push({ - name: globalize.translate('HeaderCancelRecording'), - id: 'canceltimer', - type: 'cancel' - }); - } - - items.push({ - name: globalize.translate('HeaderCancelSeries'), - id: 'cancelseriestimer', + name: globalize.translate('HeaderStopRecording'), + id: 'canceltimer', type: 'cancel' }); + } else { + items.push({ + name: globalize.translate('HeaderCancelRecording'), + id: 'canceltimer', + type: 'cancel' + }); + } - dialog({ - - text: globalize.translate('MessageConfirmRecordingCancellation'), - buttons: items - - }).then(function (result) { - const apiClient = window.connectionManager.getApiClient(serverId); - - if (result === 'canceltimer') { - loading.show(); - - cancelTimer(apiClient, timerId, true).then(resolve, reject); - } else if (result === 'cancelseriestimer') { - loading.show(); - - apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () { - import('toast').then(({ default: toast }) => { - toast(globalize.translate('SeriesCancelled')); - }); - - loading.hide(); - resolve(); - }, reject); - } else { - resolve(); - } - }, reject); + items.push({ + name: globalize.translate('HeaderCancelSeries'), + id: 'cancelseriestimer', + type: 'cancel' }); + + dialog.show({ + text: globalize.translate('MessageConfirmRecordingCancellation'), + buttons: items + }).then(function (result) { + const apiClient = ServerConnections.getApiClient(serverId); + + if (result === 'canceltimer') { + loading.show(); + + cancelTimer(apiClient, timerId, true).then(resolve, reject); + } else if (result === 'cancelseriestimer') { + loading.show(); + + apiClient.cancelLiveTvSeriesTimer(seriesTimerId).then(function () { + toast(globalize.translate('SeriesCancelled')); + loading.hide(); + resolve(); + }, reject); + } else { + resolve(); + } + }, reject); }); } function toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId) { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); const hasTimer = timerId && timerStatus !== 'Cancelled'; if (seriesTimerId && hasTimer) { // cancel diff --git a/src/components/recordingcreator/seriesrecordingeditor.js b/src/components/recordingcreator/seriesrecordingeditor.js index e3a6ae6853..c0dbd74a62 100644 --- a/src/components/recordingcreator/seriesrecordingeditor.js +++ b/src/components/recordingcreator/seriesrecordingeditor.js @@ -1,19 +1,20 @@ -import dialogHelper from 'dialogHelper'; -import globalize from 'globalize'; -import layoutManager from 'layoutManager'; -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'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import globalize from '../../scripts/globalize'; +import layoutManager from '../layoutManager'; +import loading from '../loading/loading'; +import scrollHelper from '../../scripts/scrollHelper'; +import datetime from '../../scripts/datetime'; +import '../../assets/css/scrollstyles.css'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-input/emby-input'; +import '../../elements/emby-select/emby-select'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../formdialog.css'; +import './recordingcreator.css'; +import 'material-design-icons-iconfont'; +import '../../assets/css/flexstyles.scss'; +import ServerConnections from '../ServerConnections'; /*eslint prefer-const: "error"*/ @@ -25,7 +26,7 @@ let currentServerId; function deleteTimer(apiClient, timerId) { return new Promise(function (resolve, reject) { - import('recordingHelper').then(({ default: recordingHelper }) => { + import('./recordinghelper').then(({ default: recordingHelper }) => { recordingHelper.cancelSeriesTimerWithConfirmation(timerId, apiClient.serverId()).then(resolve, reject); }); }); @@ -63,7 +64,7 @@ function closeDialog(isDeleted) { function onSubmit(e) { const form = this; - const apiClient = window.connectionManager.getApiClient(currentServerId); + const apiClient = ServerConnections.getApiClient(currentServerId); apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) { item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60; @@ -91,7 +92,7 @@ function init(context) { }); context.querySelector('.btnCancelRecording').addEventListener('click', function () { - const apiClient = window.connectionManager.getApiClient(currentServerId); + const apiClient = ServerConnections.getApiClient(currentServerId); deleteTimer(apiClient, currentItemId).then(function () { closeDialog(true); }); @@ -101,7 +102,7 @@ function init(context) { } function reload(context, id) { - const apiClient = window.connectionManager.getApiClient(currentServerId); + const apiClient = ServerConnections.getApiClient(currentServerId); loading.show(); if (typeof id === 'string') { @@ -150,7 +151,7 @@ function embed(itemId, serverId, options) { loading.show(); options = options || {}; - import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => { + import('./seriesrecordingeditor.template.html').then(({ default: template }) => { const dialogOptions = { removeOnClose: true, scrollY: false @@ -192,7 +193,7 @@ function showEditor(itemId, serverId, options) { loading.show(); options = options || {}; - import('text!./seriesrecordingeditor.template.html').then(({ default: template }) => { + import('./seriesrecordingeditor.template.html').then(({ default: template }) => { const dialogOptions = { removeOnClose: true, scrollY: false diff --git a/src/components/refreshdialog/refreshdialog.js b/src/components/refreshdialog/refreshdialog.js index e5ceb1e6e0..3b31b023f9 100644 --- a/src/components/refreshdialog/refreshdialog.js +++ b/src/components/refreshdialog/refreshdialog.js @@ -1,15 +1,17 @@ -import dom from 'dom'; -import dialogHelper from 'dialogHelper'; -import loading from 'loading'; -import layoutManager from 'layoutManager'; -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'; +import dom from '../../scripts/dom'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import loading from '../loading/loading'; +import layoutManager from '../layoutManager'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-input/emby-input'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-select/emby-select'; +import 'material-design-icons-iconfont'; +import '../formdialog.css'; +import ServerConnections from '../ServerConnections'; +import toast from '../toast/toast'; /*eslint prefer-const: "error"*/ @@ -52,7 +54,7 @@ function getEditorHtml() { } function centerFocus(elem, horiz, on) { - import('scrollHelper').then(({default: scrollHelper}) => { + import('../../scripts/scrollHelper').then((scrollHelper) => { const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); @@ -65,7 +67,7 @@ function onSubmit(e) { const dlg = dom.parentWithClass(e.target, 'dialog'); const options = instance.options; - const apiClient = window.connectionManager.getApiClient(options.serverId); + const apiClient = ServerConnections.getApiClient(options.serverId); const replaceAllMetadata = dlg.querySelector('#selectMetadataRefreshMode').value === 'all'; @@ -85,9 +87,7 @@ function onSubmit(e) { dialogHelper.close(dlg); - import('toast').then(({default: toast}) => { - toast(globalize.translate('RefreshQueued')); - }); + toast(globalize.translate('RefreshQueued')); loading.hide(); diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js index ac9ceaae00..3ed0444651 100644 --- a/src/components/remotecontrol/remotecontrol.js +++ b/src/components/remotecontrol/remotecontrol.js @@ -1,20 +1,23 @@ -import datetime from 'datetime'; -import backdrop from 'backdrop'; -import listView from 'listView'; -import imageLoader from 'imageLoader'; -import playbackManager from 'playbackManager'; -import nowPlayingHelper from 'nowPlayingHelper'; -import events from 'events'; -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'; +import datetime from '../../scripts/datetime'; +import backdrop from '../backdrop/backdrop'; +import listView from '../listview/listview'; +import imageLoader from '../images/imageLoader'; +import { playbackManager } from '../playback/playbackmanager'; +import nowPlayingHelper from '../playback/nowplayinghelper'; +import { Events } from 'jellyfin-apiclient'; +import { appHost } from '../apphost'; +import globalize from '../../scripts/globalize'; +import layoutManager from '../layoutManager'; +import * as userSettings from '../../scripts/settings/userSettings'; +import cardBuilder from '../cardbuilder/cardBuilder'; +import itemContextMenu from '../itemContextMenu'; +import '../cardbuilder/card.css'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import './remotecontrol.css'; +import '../../elements/emby-ratingbutton/emby-ratingbutton'; +import ServerConnections from '../ServerConnections'; +import toast from '../toast/toast'; +import { appRouter } from '../appRouter'; /*eslint prefer-const: "error"*/ @@ -37,7 +40,7 @@ function showAudioMenu(context, player, button, item) { return menuItem; }); - import('actionsheet').then(({ default: actionsheet }) => { + import('../actionSheet/actionSheet').then((actionsheet) => { actionsheet.show({ items: menuItems, positionTo: button, @@ -69,7 +72,7 @@ function showSubtitleMenu(context, player, button, item) { selected: currentIndex == null }); - import('actionsheet').then(({ default: actionsheet }) => { + import('../actionSheet/actionSheet').then((actionsheet) => { actionsheet.show({ items: menuItems, positionTo: button, @@ -95,18 +98,18 @@ function seriesImageUrl(item, options) { options.type = options.type || 'Primary'; if (options.type === 'Primary' && item.SeriesPrimaryImageTag) { options.tag = item.SeriesPrimaryImageTag; - return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); + return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); } if (options.type === 'Thumb') { if (item.SeriesThumbImageTag) { options.tag = item.SeriesThumbImageTag; - return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); + return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); } if (item.ParentThumbImageTag) { options.tag = item.ParentThumbImageTag; - return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); + return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); } } @@ -119,12 +122,12 @@ function imageUrl(item, options) { if (item.ImageTags && item.ImageTags[options.type]) { options.tag = item.ImageTags[options.type]; - return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); + return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); } if (item.AlbumId && item.AlbumPrimaryImageTag) { options.tag = item.AlbumPrimaryImageTag; - return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); + return ServerConnections.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); } return null; @@ -215,7 +218,7 @@ function updateNowPlayingInfo(context, state, serverId) { openAlbum: false, positionTo: contextButton }; - const apiClient = window.connectionManager.getApiClient(item.ServerId); + const apiClient = ServerConnections.getApiClient(item.ServerId); apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { apiClient.getCurrentUser().then(function (user) { contextButton.addEventListener('click', function () { @@ -597,7 +600,7 @@ export default function () { if (!state.NextMediaType) { updatePlayerState(player, dlg, {}); - Emby.Page.back(); + appRouter.back(); } } @@ -631,18 +634,18 @@ export default function () { const player = currentPlayer; if (player) { - events.off(player, 'playbackstart', onPlaybackStart); - events.off(player, 'statechange', onStateChanged); - events.off(player, 'repeatmodechange', onRepeatModeChange); - events.off(player, 'shufflequeuemodechange', onShuffleQueueModeChange); - events.off(player, 'playlistitemremove', onPlaylistItemRemoved); - events.off(player, 'playlistitemmove', onPlaylistUpdate); - events.off(player, 'playlistitemadd', onPlaylistUpdate); - events.off(player, 'playbackstop', onPlaybackStopped); - events.off(player, 'volumechange', onVolumeChanged); - events.off(player, 'pause', onPlayPauseStateChanged); - events.off(player, 'unpause', onPlayPauseStateChanged); - events.off(player, 'timeupdate', onTimeUpdate); + Events.off(player, 'playbackstart', onPlaybackStart); + Events.off(player, 'statechange', onStateChanged); + Events.off(player, 'repeatmodechange', onRepeatModeChange); + Events.off(player, 'shufflequeuemodechange', onShuffleQueueModeChange); + Events.off(player, 'playlistitemremove', onPlaylistItemRemoved); + Events.off(player, 'playlistitemmove', onPlaylistUpdate); + Events.off(player, 'playlistitemadd', onPlaylistUpdate); + Events.off(player, 'playbackstop', onPlaybackStopped); + Events.off(player, 'volumechange', onVolumeChanged); + Events.off(player, 'pause', onPlayPauseStateChanged); + Events.off(player, 'unpause', onPlayPauseStateChanged); + Events.off(player, 'timeupdate', onTimeUpdate); currentPlayer = null; } } @@ -653,18 +656,18 @@ export default function () { onStateChanged.call(player, { type: 'init' }, state); - events.on(player, 'playbackstart', onPlaybackStart); - events.on(player, 'statechange', onStateChanged); - events.on(player, 'repeatmodechange', onRepeatModeChange); - events.on(player, 'shufflequeuemodechange', onShuffleQueueModeChange); - events.on(player, 'playlistitemremove', onPlaylistItemRemoved); - events.on(player, 'playlistitemmove', onPlaylistUpdate); - events.on(player, 'playlistitemadd', onPlaylistUpdate); - events.on(player, 'playbackstop', onPlaybackStopped); - events.on(player, 'volumechange', onVolumeChanged); - events.on(player, 'pause', onPlayPauseStateChanged); - events.on(player, 'unpause', onPlayPauseStateChanged); - events.on(player, 'timeupdate', onTimeUpdate); + Events.on(player, 'playbackstart', onPlaybackStart); + Events.on(player, 'statechange', onStateChanged); + Events.on(player, 'repeatmodechange', onRepeatModeChange); + Events.on(player, 'shufflequeuemodechange', onShuffleQueueModeChange); + Events.on(player, 'playlistitemremove', onPlaylistItemRemoved); + Events.on(player, 'playlistitemmove', onPlaylistUpdate); + Events.on(player, 'playlistitemadd', onPlaylistUpdate); + Events.on(player, 'playbackstop', onPlaybackStopped); + Events.on(player, 'volumechange', onVolumeChanged); + Events.on(player, 'pause', onPlayPauseStateChanged); + Events.on(player, 'unpause', onPlayPauseStateChanged); + Events.on(player, 'timeupdate', onTimeUpdate); const playerInfo = playbackManager.getPlayerInfo(); const supportedCommands = playerInfo.supportedCommands; currentPlayerSupportedCommands = supportedCommands; @@ -693,7 +696,7 @@ export default function () { } function savePlaylist() { - import('playlistEditor').then(({ default: playlistEditor }) => { + import('../playlisteditor/playlisteditor').then(({ default: playlistEditor }) => { getSaveablePlaylistItems().then(function (items) { const serverId = items.length ? items[0].ServerId : ApiClient.serverId(); new playlistEditor({ @@ -863,9 +866,7 @@ export default function () { }, currentPlayer); form.querySelector('input').value = ''; - import('toast').then(({ default: toast }) => { - toast('Message sent.'); - }); + toast('Message sent.'); e.preventDefault(); e.stopPropagation(); @@ -882,9 +883,7 @@ export default function () { }, currentPlayer); form.querySelector('input').value = ''; - import('toast').then(({ default: toast }) => { - toast('Text sent.'); - }); + toast('Text sent.'); e.preventDefault(); e.stopPropagation(); @@ -915,7 +914,7 @@ export default function () { bindEvents(context); context.querySelector('.sendMessageForm').addEventListener('submit', onMessageSubmit); context.querySelector('.typeTextForm').addEventListener('submit', onSendStringSubmit); - events.on(playbackManager, 'playerchange', onPlayerChange); + Events.on(playbackManager, 'playerchange', onPlayerChange); if (layoutManager.tv) { const positionSlider = context.querySelector('.nowPlayingPositionSlider'); @@ -926,7 +925,7 @@ export default function () { function onDialogClosed(e) { releaseCurrentPlayer(); - events.off(playbackManager, 'playerchange', onPlayerChange); + Events.off(playbackManager, 'playerchange', onPlayerChange); lastPlayerState = null; } diff --git a/src/components/require/requirecss.js b/src/components/require/requirecss.js deleted file mode 100644 index ca6910e319..0000000000 --- a/src/components/require/requirecss.js +++ /dev/null @@ -1,72 +0,0 @@ -define(function () { - 'use strict'; - - const requireCss = {}; - - requireCss.normalize = function (name, normalize) { - if (name.substr(name.length - 4, 4) === '.css') { - name = name.substr(0, name.length - 4); - } - - return normalize(name); - }; - - let importedCss = []; - - function isLoaded(url) { - return importedCss.indexOf(url) !== -1; - } - - function removeFromLoadHistory(url) { - url = url.toLowerCase(); - - importedCss = importedCss.filter(function (c) { - return url.indexOf(c.toLowerCase()) === -1; - }); - } - - requireCss.load = function (cssId, req, load, config) { - // Somehow if the url starts with /css, require will get all screwed up since this extension is also called css - const srch = 'components/require/requirecss'; - const index = cssId.indexOf(srch); - - if (index !== -1) { - cssId = 'css' + cssId.substring(index + srch.length); - } - - let url = cssId + '.css'; - - if (url.indexOf('://') === -1) { - url = config.baseUrl + url; - } - - if (!isLoaded(url)) { - importedCss.push(url); - - const link = document.createElement('link'); - - link.setAttribute('rel', 'stylesheet'); - link.setAttribute('type', 'text/css'); - link.onload = load; - - let linkUrl = url; - - if (config.urlArgs) { - linkUrl += config.urlArgs(cssId, url); - } - link.setAttribute('href', linkUrl); - document.head.appendChild(link); - } else { - load(); - } - }; - - window.requireCss = { - removeStylesheet: function (stylesheet) { - stylesheet.parentNode.removeChild(stylesheet); - removeFromLoadHistory(stylesheet.href); - } - }; - - return requireCss; -}); diff --git a/src/components/require/requiretext.js b/src/components/require/requiretext.js deleted file mode 100644 index 12822a29e7..0000000000 --- a/src/components/require/requiretext.js +++ /dev/null @@ -1,42 +0,0 @@ -define(function () { - 'use strict'; - - // hack to work around the server's auto-redirection feature - const addRedirectPrevention = window.dashboardVersion != null && window.Dashboard && !window.AppInfo.isNativeApp; - - return { - - load: function (url, req, load, config) { - if (url.indexOf('://') === -1) { - url = config.baseUrl + url; - } - - if (config.urlArgs) { - url += config.urlArgs(url, url); - } - - if (addRedirectPrevention) { - if (url.indexOf('?') === -1) { - url += '?'; - } else { - url += '&'; - } - - url += 'r=0'; - } - - const xhr = new XMLHttpRequest(); - xhr.open('GET', url, true); - - xhr.onload = function (e) { - load(this.response); - }; - - xhr.send(); - }, - - normalize: function (name, normalize) { - return normalize(name); - } - }; -}); diff --git a/src/components/scrollManager.js b/src/components/scrollManager.js index 549cb9445c..a11f1448eb 100644 --- a/src/components/scrollManager.js +++ b/src/components/scrollManager.js @@ -5,9 +5,9 @@ * @module components/scrollManager */ -import dom from 'dom'; -import browser from 'browser'; -import layoutManager from 'layoutManager'; +import dom from '../scripts/dom'; +import browser from '../scripts/browser'; +import layoutManager from './layoutManager'; /** * Scroll time in ms. diff --git a/src/components/search/searchfields.js b/src/components/search/searchfields.js index b3cb3cf4c4..2bf5c03051 100644 --- a/src/components/search/searchfields.js +++ b/src/components/search/searchfields.js @@ -1,12 +1,12 @@ -import layoutManager from 'layoutManager'; -import globalize from 'globalize'; -import events from 'events'; -import browser from 'browser'; -import AlphaPicker from 'alphaPicker'; -import 'emby-input'; -import 'flexStyles'; -import 'material-icons'; -import 'css!./searchfields'; +import layoutManager from '../layoutManager'; +import globalize from '../../scripts/globalize'; +import { Events } from 'jellyfin-apiclient'; +import browser from '../../scripts/browser'; +import AlphaPicker from '../alphaPicker/alphaPicker'; +import '../../elements/emby-input/emby-input'; +import '../../assets/css/flexstyles.scss'; +import 'material-design-icons-iconfont'; +import './searchfields.css'; /* eslint-disable indent */ @@ -15,7 +15,7 @@ import 'css!./searchfields'; let value = instance.nextSearchValue; value = (value || '').trim(); - events.trigger(instance, 'search', [value]); + Events.trigger(instance, 'search', [value]); } function triggerSearch(instance, value) { @@ -61,7 +61,7 @@ import 'css!./searchfields'; } function embed(elem, instance, options) { - import('text!./searchfields.template.html').then(({default: template}) => { + import('./searchfields.template.html').then(({default: template}) => { let html = globalize.translateHtml(template, 'core'); if (browser.tizen || browser.orsay) { diff --git a/src/components/search/searchresults.js b/src/components/search/searchresults.js index d35868d433..db598a742d 100644 --- a/src/components/search/searchresults.js +++ b/src/components/search/searchresults.js @@ -1,10 +1,11 @@ -import layoutManager from 'layoutManager'; -import globalize from 'globalize'; -import cardBuilder from 'cardBuilder'; -import appRouter from 'appRouter'; -import 'emby-scroller'; -import 'emby-itemscontainer'; -import 'emby-button'; +import layoutManager from '../layoutManager'; +import globalize from '../../scripts/globalize'; +import cardBuilder from '../cardbuilder/cardBuilder'; +import { appRouter } from '../appRouter'; +import '../../elements/emby-scroller/emby-scroller'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import '../../elements/emby-button/emby-button'; +import ServerConnections from '../ServerConnections'; /* eslint-disable indent */ @@ -584,7 +585,7 @@ import 'emby-button'; } function embed(elem, instance, options) { - import('text!./searchresults.template.html').then(({default: template}) => { + import('./searchresults.template.html').then(({default: template}) => { if (!enableScrollX()) { template = replaceAll(template, 'data-horizontal="true"', 'data-horizontal="false"'); template = replaceAll(template, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap'); @@ -605,7 +606,7 @@ class SearchResults { embed(options.element, this, options); } search(value) { - const apiClient = window.connectionManager.getApiClient(this.options.serverId); + const apiClient = ServerConnections.getApiClient(this.options.serverId); search(this, apiClient, this.options.element, value); } diff --git a/src/components/serviceworker/notifications.js b/src/components/serviceworker/notifications.js deleted file mode 100644 index 51623b56f7..0000000000 --- a/src/components/serviceworker/notifications.js +++ /dev/null @@ -1,45 +0,0 @@ -/* eslint-env serviceworker */ -(function () { - 'use strict'; - - let connectionManager; - - function getApiClient(serverId) { - if (connectionManager) { - return Promise.resolve(connectionManager.getApiClient(serverId)); - } - return Promise.reject(); - } - - function executeAction(action, data, serverId) { - return getApiClient(serverId).then(function (apiClient) { - switch (action) { - case 'cancel-install': - return apiClient.cancelPackageInstallation(data.id); - case 'restart': - return apiClient.restartServer(); - default: - clients.openWindow('/'); - return Promise.resolve(); - } - }); - } - - /* eslint-disable-next-line no-restricted-globals -- self is valid in a serviceworker environment */ - self.addEventListener('notificationclick', function (event) { - const notification = event.notification; - notification.close(); - - const data = notification.data; - const serverId = data.serverId; - const action = event.action; - - if (!action) { - clients.openWindow('/'); - event.waitUntil(Promise.resolve()); - return; - } - - event.waitUntil(executeAction(action, data, serverId)); - }, false); -})(); diff --git a/src/components/settingshelper.js b/src/components/settingshelper.js index 3db638c7ad..ca78369ed9 100644 --- a/src/components/settingshelper.js +++ b/src/components/settingshelper.js @@ -1,4 +1,4 @@ -import globalize from 'globalize'; +import globalize from '../scripts/globalize'; /** * Helper for handling settings. diff --git a/src/components/shortcuts.js b/src/components/shortcuts.js index 2959fd3372..fe7bfefc90 100644 --- a/src/components/shortcuts.js +++ b/src/components/shortcuts.js @@ -5,12 +5,14 @@ * @module components/shortcuts */ -import playbackManager from 'playbackManager'; -import inputManager from 'inputManager'; -import appRouter from 'appRouter'; -import globalize from 'globalize'; -import dom from 'dom'; -import recordingHelper from 'recordingHelper'; +import { playbackManager } from './playback/playbackmanager'; +import inputManager from '../scripts/inputManager'; +import { appRouter } from './appRouter'; +import globalize from '../scripts/globalize'; +import dom from '../scripts/dom'; +import recordingHelper from './recordingcreator/recordinghelper'; +import ServerConnections from './ServerConnections'; +import toast from './toast/toast'; function playAllFromHere(card, serverId, queue) { const parent = card.parentNode; @@ -69,7 +71,7 @@ import recordingHelper from 'recordingHelper'; } function showProgramDialog(item) { - import('recordingCreator').then(({default:recordingCreator}) => { + import('./recordingcreator/recordingcreator').then(({default:recordingCreator}) => { recordingCreator.show(item.Id, item.ServerId); }); } @@ -80,7 +82,7 @@ import recordingHelper from 'recordingHelper'; const id = button.getAttribute('data-id'); const type = button.getAttribute('data-type'); - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); if (type === 'Timer') { return apiClient.getLiveTvTimer(id); @@ -109,8 +111,8 @@ import recordingHelper from 'recordingHelper'; item.PlaylistItemId = elem ? elem.getAttribute('data-playlistitemid') : null; } - import('itemContextMenu').then(({default: itemContextMenu}) => { - window.connectionManager.getApiClient(item.ServerId).getCurrentUser().then(user => { + import('./itemContextMenu').then((itemContextMenu) => { + ServerConnections.getApiClient(item.ServerId).getCurrentUser().then(user => { itemContextMenu.show(Object.assign({ item: item, play: true, @@ -153,7 +155,7 @@ import recordingHelper from 'recordingHelper'; function showPlayMenu(card, target) { const item = getItemInfoFromCard(card); - import('playMenu').then(({default: playMenu}) => { + import('./playmenu').then((playMenu) => { playMenu.show({ item: item, @@ -163,9 +165,7 @@ import recordingHelper from 'recordingHelper'; } function sendToast(text) { - import('toast').then(({default: toast}) => { - toast(text); - }); + toast(text); } function executeAction(card, target, action) { @@ -269,7 +269,7 @@ import recordingHelper from 'recordingHelper'; } function addToPlaylist(item) { - import('playlistEditor').then(({default: playlistEditor}) => { + import('./playlisteditor/playlisteditor').then(({default: playlistEditor}) => { new playlistEditor().show({ items: [item.Id], serverId: item.ServerId @@ -279,7 +279,7 @@ import recordingHelper from 'recordingHelper'; } function playTrailer(item) { - const apiClient = window.connectionManager.getApiClient(item.ServerId); + const apiClient = ServerConnections.getApiClient(item.ServerId); apiClient.getLocalTrailers(apiClient.getCurrentUserId(), item.Id).then(trailers => { playbackManager.play({ items: trailers }); @@ -287,23 +287,23 @@ import recordingHelper from 'recordingHelper'; } function editItem(item, serverId) { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); return new Promise((resolve, reject) => { const serverId = apiClient.serverInfo().Id; if (item.Type === 'Timer') { if (item.ProgramId) { - import('recordingCreator').then(({default: recordingCreator}) => { + import('./recordingcreator/recordingcreator').then(({default: recordingCreator}) => { recordingCreator.show(item.ProgramId, serverId).then(resolve, reject); }); } else { - import('recordingEditor').then(({default: recordingEditor}) => { + import('./recordingcreator/recordingeditor').then(({default: recordingEditor}) => { recordingEditor.show(item.Id, serverId).then(resolve, reject); }); } } else { - import('metadataEditor').then(({default: metadataEditor}) => { + import('./metadataEditor/metadataEditor').then(({default: metadataEditor}) => { metadataEditor.show(item.Id, serverId).then(resolve, reject); }); } @@ -397,4 +397,3 @@ export default { onClick: onClick, getShortcutAttributesHtml: getShortcutAttributesHtml }; - diff --git a/src/components/slideshow/slideshow.js b/src/components/slideshow/slideshow.js index 028c21b221..b27f8af11d 100644 --- a/src/components/slideshow/slideshow.js +++ b/src/components/slideshow/slideshow.js @@ -2,16 +2,20 @@ * Image viewer component * @module components/slideshow/slideshow */ -import dialogHelper from 'dialogHelper'; -import inputManager from 'inputManager'; -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'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import inputManager from '../../scripts/inputManager'; +import layoutManager from '../layoutManager'; +import focusManager from '../focusManager'; +import browser from '../../scripts/browser'; +import { appHost } from '../apphost'; +import dom from '../../scripts/dom'; +import './style.css'; +import 'material-design-icons-iconfont'; +import '../../elements/emby-button/paper-icon-button-light'; +import ServerConnections from '../ServerConnections'; +// eslint-disable-next-line import/named, import/namespace +import { Swiper } from 'swiper/swiper-bundle.esm'; +import 'swiper/swiper-bundle.css'; /** * Name of transition event. @@ -84,7 +88,7 @@ function getBackdropImageUrl(item, options, apiClient) { * @returns {string} URL of the item's image. */ function getImgUrl(item, user) { - const apiClient = window.connectionManager.getApiClient(item.ServerId); + const apiClient = ServerConnections.getApiClient(item.ServerId); const imageOptions = {}; if (item.BackdropImageTags && item.BackdropImageTags.length) { @@ -300,45 +304,43 @@ export default function (options) { slides = currentOptions.items; } - import('swiper').then(({default: Swiper}) => { - swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), { - direction: 'horizontal', - // Loop is disabled due to the virtual slides option not supporting it. - loop: false, - zoom: { - minRatio: 1, - toggle: true - }, - autoplay: !options.interactive, - keyboard: { - enabled: true - }, - preloadImages: true, - slidesPerView: 1, - slidesPerColumn: 1, - initialSlide: options.startIndex || 0, - speed: 240, - navigation: { - nextEl: '.btnSlideshowNext', - prevEl: '.btnSlideshowPrevious' - }, - // Virtual slides reduce memory consumption for large libraries while allowing preloading of images; - virtual: { - slides: slides, - cache: true, - renderSlide: getSwiperSlideHtml, - addSlidesBefore: 1, - addSlidesAfter: 1 - } - }); - - swiperInstance.on('autoplayStart', onAutoplayStart); - swiperInstance.on('autoplayStop', onAutoplayStop); - - if (useFakeZoomImage) { - swiperInstance.on('zoomChange', onZoomChange); + swiperInstance = new Swiper(dialog.querySelector('.slideshowSwiperContainer'), { + direction: 'horizontal', + // Loop is disabled due to the virtual slides option not supporting it. + loop: false, + zoom: { + minRatio: 1, + toggle: true + }, + autoplay: !options.interactive, + keyboard: { + enabled: true + }, + preloadImages: true, + slidesPerView: 1, + slidesPerColumn: 1, + initialSlide: options.startIndex || 0, + speed: 240, + navigation: { + nextEl: '.btnSlideshowNext', + prevEl: '.btnSlideshowPrevious' + }, + // Virtual slides reduce memory consumption for large libraries while allowing preloading of images; + virtual: { + slides: slides, + cache: true, + renderSlide: getSwiperSlideHtml, + addSlidesBefore: 1, + addSlidesAfter: 1 } }); + + swiperInstance.on('autoplayStart', onAutoplayStart); + swiperInstance.on('autoplayStop', onAutoplayStop); + + if (useFakeZoomImage) { + swiperInstance.on('zoomChange', onZoomChange); + } } /** @@ -431,7 +433,7 @@ export default function (options) { function download() { const imageInfo = getCurrentImageInfo(); - import('fileDownloader').then(({default: fileDownloader}) => { + import('../../scripts/fileDownloader').then((fileDownloader) => { fileDownloader.download([imageInfo]); }); } diff --git a/src/components/sortmenu/sortmenu.js b/src/components/sortmenu/sortmenu.js index d38d98c090..0ec21d3b77 100644 --- a/src/components/sortmenu/sortmenu.js +++ b/src/components/sortmenu/sortmenu.js @@ -1,13 +1,13 @@ -import dialogHelper from 'dialogHelper'; -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'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import layoutManager from '../layoutManager'; +import globalize from '../../scripts/globalize'; +import * as userSettings from '../../scripts/settings/userSettings'; +import '../../elements/emby-select/emby-select'; +import '../../elements/emby-button/paper-icon-button-light'; +import 'material-design-icons-iconfont'; +import '../formdialog.css'; +import '../../elements/emby-button/emby-button'; +import '../../assets/css/flexstyles.scss'; function onSubmit(e) { e.preventDefault(); @@ -22,7 +22,7 @@ function initEditor(context, settings) { } function centerFocus(elem, horiz, on) { - import('scrollHelper').then(({default: scrollHelper}) => { + import('../../scripts/scrollHelper').then((scrollHelper) => { const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); @@ -44,7 +44,7 @@ function saveValues(context, settingsKey) { class SortMenu { show(options) { return new Promise(function (resolve, reject) { - import('text!./sortmenu.template.html').then(({default: template}) => { + import('./sortmenu.template.html').then(({default: template}) => { const dialogOptions = { removeOnClose: true, scrollY: false diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js index 8697a9a747..cd1e5ca8e2 100644 --- a/src/components/subtitleeditor/subtitleeditor.js +++ b/src/components/subtitleeditor/subtitleeditor.js @@ -1,18 +1,22 @@ -import dialogHelper from 'dialogHelper'; -import layoutManager from 'layoutManager'; -import globalize from 'globalize'; -import * as userSettings from 'userSettings'; -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'; +import { appHost } from '../apphost'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import layoutManager from '../layoutManager'; +import globalize from '../../scripts/globalize'; +import * as userSettings from '../../scripts/settings/userSettings'; +import loading from '../loading/loading'; +import focusManager from '../focusManager'; +import dom from '../../scripts/dom'; +import '../../elements/emby-select/emby-select'; +import '../listview/listview.css'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../formdialog.css'; +import 'material-design-icons-iconfont'; +import './subtitleeditor.css'; +import '../../elements/emby-button/emby-button'; +import '../../assets/css/flexstyles.scss'; +import ServerConnections from '../ServerConnections'; +import toast from '../toast/toast'; +import confirm from '../confirm/confirm'; let currentItem; let hasChanges; @@ -20,7 +24,7 @@ let hasChanges; function downloadRemoteSubtitles(context, id) { const url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id; - const apiClient = window.connectionManager.getApiClient(currentItem.ServerId); + const apiClient = ServerConnections.getApiClient(currentItem.ServerId); apiClient.ajax({ type: 'POST', @@ -29,9 +33,7 @@ function downloadRemoteSubtitles(context, id) { }).then(function () { hasChanges = true; - import('toast').then(({default: toast}) => { - toast(globalize.translate('MessageDownloadQueued')); - }); + toast(globalize.translate('MessageDownloadQueued')); focusManager.autoFocus(context); }); @@ -40,31 +42,29 @@ function downloadRemoteSubtitles(context, id) { function deleteLocalSubtitle(context, index) { const msg = globalize.translate('MessageAreYouSureDeleteSubtitles'); - import('confirm').then(({default: confirm}) => { - confirm({ + confirm({ - title: globalize.translate('ConfirmDeletion'), - text: msg, - confirmText: globalize.translate('Delete'), - primary: 'delete' + title: globalize.translate('ConfirmDeletion'), + text: msg, + confirmText: globalize.translate('Delete'), + primary: 'delete' + + }).then(function () { + loading.show(); + + const itemId = currentItem.Id; + const url = 'Videos/' + itemId + '/Subtitles/' + index; + + const apiClient = ServerConnections.getApiClient(currentItem.ServerId); + + apiClient.ajax({ + + type: 'DELETE', + url: apiClient.getUrl(url) }).then(function () { - loading.show(); - - const itemId = currentItem.Id; - const url = 'Videos/' + itemId + '/Subtitles/' + index; - - const apiClient = window.connectionManager.getApiClient(currentItem.ServerId); - - apiClient.ajax({ - - type: 'DELETE', - url: apiClient.getUrl(url) - - }).then(function () { - hasChanges = true; - reload(context, apiClient, itemId); - }); + hasChanges = true; + reload(context, apiClient, itemId); }); }); } @@ -242,7 +242,7 @@ function searchForSubtitles(context, language) { loading.show(); - const apiClient = window.connectionManager.getApiClient(currentItem.ServerId); + const apiClient = ServerConnections.getApiClient(currentItem.ServerId); const url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language); apiClient.getJSON(url).then(function (results) { @@ -328,7 +328,7 @@ function showDownloadOptions(button, context, subtitleId) { id: 'download' }); - import('actionsheet').then(({default: actionsheet}) => { + import('../actionSheet/actionSheet').then((actionsheet) => { actionsheet.show({ items: items, positionTo: button @@ -346,7 +346,7 @@ function showDownloadOptions(button, context, subtitleId) { } function centerFocus(elem, horiz, on) { - import('scrollHelper').then(({default: scrollHelper}) => { + import('../../scripts/scrollHelper').then(({default: scrollHelper}) => { const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); @@ -355,7 +355,7 @@ function centerFocus(elem, horiz, on) { function showEditorInternal(itemId, serverId, template) { hasChanges = false; - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { const dialogOptions = { removeOnClose: true, @@ -388,6 +388,11 @@ function showEditorInternal(itemId, serverId, template) { btnSubmit.classList.add('hide'); } + // Don't allow redirection to other websites from the TV layout + if (layoutManager.tv || !appHost.supports('externallinks')) { + dlg.querySelector('.btnHelp').remove(); + } + const editorContent = dlg.querySelector('.formDialogContent'); dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick); @@ -425,7 +430,7 @@ function showEditor(itemId, serverId) { loading.show(); return new Promise(function (resolve, reject) { - import('text!./subtitleeditor.template.html').then(({default: template}) => { + import('./subtitleeditor.template.html').then(({default: template}) => { showEditorInternal(itemId, serverId, template).then(resolve, reject); }); }); diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js index 0e2c4e3661..f49734b143 100644 --- a/src/components/subtitlesettings/subtitlesettings.js +++ b/src/components/subtitlesettings/subtitlesettings.js @@ -1,20 +1,22 @@ -import globalize from 'globalize'; -import appHost from 'apphost'; -import appSettings from 'appSettings'; -import focusManager from 'focusManager'; -import layoutManager from 'layoutManager'; -import loading from 'loading'; -import subtitleAppearanceHelper from 'subtitleAppearanceHelper'; -import settingsHelper from 'settingsHelper'; -import dom from 'dom'; -import events from 'events'; -import 'listViewStyle'; -import 'emby-select'; -import 'emby-slider'; -import 'emby-input'; -import 'emby-checkbox'; -import 'flexStyles'; -import 'css!./subtitlesettings'; +import globalize from '../../scripts/globalize'; +import { appHost } from '../apphost'; +import appSettings from '../../scripts/settings/appSettings'; +import focusManager from '../focusManager'; +import layoutManager from '../layoutManager'; +import loading from '../loading/loading'; +import subtitleAppearanceHelper from './subtitleappearancehelper'; +import settingsHelper from '../settingshelper'; +import dom from '../../scripts/dom'; +import { Events } from 'jellyfin-apiclient'; +import '../listview/listview.css'; +import '../../elements/emby-select/emby-select'; +import '../../elements/emby-slider/emby-slider'; +import '../../elements/emby-input/emby-input'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../assets/css/flexstyles.scss'; +import './subtitlesettings.css'; +import ServerConnections from '../ServerConnections'; +import toast from '../toast/toast'; /** * Subtitle settings. @@ -87,12 +89,10 @@ function save(instance, context, userId, userSettings, apiClient, enableSaveConf saveUser(context, user, userSettings, instance.appearanceKey, apiClient).then(function () { loading.hide(); if (enableSaveConfirmation) { - import('toast').then(({default: toast}) => { - toast(globalize.translate('SettingsSaved')); - }); + toast(globalize.translate('SettingsSaved')); } - events.trigger(instance, 'saved'); + Events.trigger(instance, 'saved'); }, function () { loading.hide(); }); @@ -158,7 +158,7 @@ function hideSubtitlePreview(persistent) { } function embed(options, self) { - import('text!./subtitlesettings.template.html').then(({default: template}) => { + import('./subtitlesettings.template.html').then(({default: template}) => { options.element.classList.add('subtitlesettings'); options.element.innerHTML = globalize.translateHtml(template, 'core'); @@ -231,7 +231,7 @@ export class SubtitleSettings { loading.show(); const userId = self.options.userId; - const apiClient = window.connectionManager.getApiClient(self.options.serverId); + const apiClient = ServerConnections.getApiClient(self.options.serverId); const userSettings = self.options.userSettings; apiClient.getUser(userId).then(function (user) { @@ -255,7 +255,7 @@ export class SubtitleSettings { onSubmit(e) { const self = this; - const apiClient = window.connectionManager.getApiClient(self.options.serverId); + const apiClient = ServerConnections.getApiClient(self.options.serverId); const userId = self.options.userId; const userSettings = self.options.userSettings; diff --git a/src/components/subtitlesync/subtitlesync.js b/src/components/subtitlesync/subtitlesync.js index efb2087a1b..d3477932c3 100644 --- a/src/components/subtitlesync/subtitlesync.js +++ b/src/components/subtitlesync/subtitlesync.js @@ -1,7 +1,8 @@ -import playbackManager from 'playbackManager'; -import layoutManager from 'layoutManager'; -import template from 'text!./subtitlesync.template.html'; -import 'css!./subtitlesync'; + +import { playbackManager } from '../playback/playbackmanager'; +import layoutManager from '../layoutManager'; +import template from './subtitlesync.template.html'; +import './subtitlesync.css'; let player; let subtitleSyncSlider; diff --git a/src/components/syncPlay/groupSelectionMenu.js b/src/components/syncPlay/groupSelectionMenu.js index b554817b8c..5168558bb2 100644 --- a/src/components/syncPlay/groupSelectionMenu.js +++ b/src/components/syncPlay/groupSelectionMenu.js @@ -1,11 +1,12 @@ -import events from 'events'; -import playbackManager from 'playbackManager'; -import syncPlayManager from 'syncPlayManager'; -import loading from 'loading'; -import toast from 'toast'; -import actionsheet from 'actionsheet'; -import globalize from 'globalize'; -import playbackPermissionManager from 'playbackPermissionManager'; +import { Events } from 'jellyfin-apiclient'; +import { playbackManager } from '../playback/playbackmanager'; +import syncPlayManager from './syncPlayManager'; +import loading from '../loading/loading'; +import toast from '../toast/toast'; +import actionsheet from '../actionSheet/actionSheet'; +import globalize from '../../scripts/globalize'; +import playbackPermissionManager from './playbackPermissionManager'; +import ServerConnections from '../ServerConnections'; /** * Gets active player id. @@ -150,7 +151,7 @@ function showLeaveGroupSelection (button, user, apiClient) { // Register to SyncPlay events let syncPlayEnabled = false; -events.on(syncPlayManager, 'enabled', function (e, enabled) { +Events.on(syncPlayManager, 'enabled', function (e, enabled) { syncPlayEnabled = enabled; }); @@ -171,8 +172,8 @@ export function show (button) { }); }); - const apiClient = window.connectionManager.currentApiClient(); - window.connectionManager.user(apiClient).then((user) => { + const apiClient = ServerConnections.currentApiClient(); + ServerConnections.user(apiClient).then((user) => { if (syncPlayEnabled) { showLeaveGroupSelection(button, user, apiClient); } else { diff --git a/src/components/syncPlay/syncPlayManager.js b/src/components/syncPlay/syncPlayManager.js index c72d20a111..2db5f3817b 100644 --- a/src/components/syncPlay/syncPlayManager.js +++ b/src/components/syncPlay/syncPlayManager.js @@ -3,11 +3,12 @@ * @module components/syncPlay/syncPlayManager */ -import events from 'events'; -import playbackManager from 'playbackManager'; -import timeSyncManager from 'timeSyncManager'; -import toast from 'toast'; -import globalize from 'globalize'; +import { Events } from 'jellyfin-apiclient'; +import { playbackManager } from '../playback/playbackmanager'; +import timeSyncManager from './timeSyncManager'; +import toast from '../toast/toast'; +import globalize from '../../scripts/globalize'; +import ServerConnections from '../ServerConnections'; /** * Waits for an event to be triggered on an object. An optional timeout can specified after which the promise is rejected. @@ -25,13 +26,13 @@ function waitForEventOnce(emitter, eventType, timeout) { }, timeout); } const callback = () => { - events.off(emitter, eventType, callback); + Events.off(emitter, eventType, callback); if (rejectTimeout) { clearTimeout(rejectTimeout); } resolve(arguments); }; - events.on(emitter, eventType, callback); + Events.on(emitter, eventType, callback); }); } @@ -92,25 +93,25 @@ class SyncPlayManager { this.roundTripDuration = 0; this.notifySyncPlayReady = false; - events.on(playbackManager, 'playbackstart', (player, state) => { + Events.on(playbackManager, 'playbackstart', (player, state) => { this.onPlaybackStart(player, state); }); - events.on(playbackManager, 'playbackstop', (stopInfo) => { + Events.on(playbackManager, 'playbackstop', (stopInfo) => { this.onPlaybackStop(stopInfo); }); - events.on(playbackManager, 'playerchange', () => { + Events.on(playbackManager, 'playerchange', () => { this.onPlayerChange(); }); this.bindToPlayer(playbackManager.getCurrentPlayer()); - events.on(this, 'timeupdate', (event) => { + Events.on(this, 'timeupdate', (event) => { this.syncPlaybackTime(); }); - events.on(timeSyncManager, 'update', (event, error, timeOffset, ping) => { + Events.on(timeSyncManager, 'update', (event, error, timeOffset, ping) => { if (error) { console.debug('SyncPlay, time update issue', error); return; @@ -121,13 +122,13 @@ class SyncPlayManager { if (this.notifySyncPlayReady) { this.syncPlayReady = true; - events.trigger(this, 'ready'); + Events.trigger(this, 'ready'); this.notifySyncPlayReady = false; } // Report ping if (this.syncEnabled) { - const apiClient = window.connectionManager.currentApiClient(); + const apiClient = ServerConnections.currentApiClient(); const sessionId = getActivePlayerId(); if (!sessionId) { @@ -149,14 +150,14 @@ class SyncPlayManager { * Called when playback starts. */ onPlaybackStart (player, state) { - events.trigger(this, 'playbackstart', [player, state]); + Events.trigger(this, 'playbackstart', [player, state]); } /** * Called when playback stops. */ onPlaybackStop (stopInfo) { - events.trigger(this, 'playbackstop', [stopInfo]); + Events.trigger(this, 'playbackstop', [stopInfo]); if (this.isSyncPlayEnabled()) { this.disableSyncPlay(false); } @@ -167,21 +168,21 @@ class SyncPlayManager { */ onPlayerChange () { this.bindToPlayer(playbackManager.getCurrentPlayer()); - events.trigger(this, 'playerchange', [this.currentPlayer]); + Events.trigger(this, 'playerchange', [this.currentPlayer]); } /** * Called when playback unpauses. */ onPlayerUnpause () { - events.trigger(this, 'unpause', [this.currentPlayer]); + Events.trigger(this, 'unpause', [this.currentPlayer]); } /** * Called when playback pauses. */ onPlayerPause() { - events.trigger(this, 'pause', [this.currentPlayer]); + Events.trigger(this, 'pause', [this.currentPlayer]); } /** @@ -191,7 +192,7 @@ class SyncPlayManager { onTimeUpdate (e) { // NOTICE: this event is unreliable, at least in Safari // which just stops firing the event after a while. - events.trigger(this, 'timeupdate', [e]); + Events.trigger(this, 'timeupdate', [e]); } /** @@ -200,7 +201,7 @@ class SyncPlayManager { onPlaying () { // TODO: implement group wait this.lastPlaybackWaiting = null; - events.trigger(this, 'playing'); + Events.trigger(this, 'playing'); } /** @@ -212,7 +213,7 @@ class SyncPlayManager { this.lastPlaybackWaiting = new Date(); } - events.trigger(this, 'waiting'); + Events.trigger(this, 'waiting'); } /** @@ -260,11 +261,11 @@ class SyncPlayManager { self.onWaiting(); }; - events.on(player, 'unpause', this._onPlayerUnpause); - events.on(player, 'pause', this._onPlayerPause); - events.on(player, 'timeupdate', this._onTimeUpdate); - events.on(player, 'playing', this._onPlaying); - events.on(player, 'waiting', this._onWaiting); + Events.on(player, 'unpause', this._onPlayerUnpause); + Events.on(player, 'pause', this._onPlayerPause); + Events.on(player, 'timeupdate', this._onTimeUpdate); + Events.on(player, 'playing', this._onPlaying); + Events.on(player, 'waiting', this._onWaiting); // Save player current PlaybackRate value if (player.supports && player.supports('PlaybackRate')) { @@ -278,11 +279,11 @@ class SyncPlayManager { releaseCurrentPlayer () { const player = this.currentPlayer; if (player) { - events.off(player, 'unpause', this._onPlayerUnpause); - events.off(player, 'pause', this._onPlayerPause); - events.off(player, 'timeupdate', this._onTimeUpdate); - events.off(player, 'playing', this._onPlaying); - events.off(player, 'waiting', this._onWaiting); + Events.off(player, 'unpause', this._onPlayerUnpause); + Events.off(player, 'pause', this._onPlayerPause); + Events.off(player, 'timeupdate', this._onTimeUpdate); + Events.off(player, 'playing', this._onPlaying); + Events.off(player, 'waiting', this._onWaiting); // Restore player original PlaybackRate value if (this.playbackRateSupported) { player.setPlaybackRate(this.localPlayerPlaybackRate); @@ -486,7 +487,7 @@ class SyncPlayManager { enableSyncPlay (apiClient, enabledAt, showMessage = false) { this.syncPlayEnabledAt = enabledAt; this.injectPlaybackManager(); - events.trigger(this, 'enabled', [true]); + Events.trigger(this, 'enabled', [true]); waitForEventOnce(this, 'ready').then(() => { this.processCommand(this.queuedCommand, apiClient); @@ -515,7 +516,7 @@ class SyncPlayManager { this.lastCommand = null; this.queuedCommand = null; this.syncEnabled = false; - events.trigger(this, 'enabled', [false]); + Events.trigger(this, 'enabled', [false]); this.restorePlaybackManager(); if (showMessage) { @@ -659,7 +660,7 @@ class SyncPlayManager { * Overrides PlaybackManager's unpause method. */ playRequest (player) { - const apiClient = window.connectionManager.currentApiClient(); + const apiClient = ServerConnections.currentApiClient(); apiClient.requestSyncPlayStart(); } @@ -667,7 +668,7 @@ class SyncPlayManager { * Overrides PlaybackManager's pause method. */ pauseRequest (player) { - const apiClient = window.connectionManager.currentApiClient(); + const apiClient = ServerConnections.currentApiClient(); apiClient.requestSyncPlayPause(); // Pause locally as well, to give the user some little control playbackManager._localUnpause(player); @@ -677,7 +678,7 @@ class SyncPlayManager { * Overrides PlaybackManager's seek method. */ seekRequest (PositionTicks, player) { - const apiClient = window.connectionManager.currentApiClient(); + const apiClient = ServerConnections.currentApiClient(); apiClient.requestSyncPlaySeek({ PositionTicks: PositionTicks }); @@ -814,7 +815,7 @@ class SyncPlayManager { */ showSyncIcon (syncMethod) { this.syncMethod = syncMethod; - events.trigger(this, 'syncing', [true, this.syncMethod]); + Events.trigger(this, 'syncing', [true, this.syncMethod]); } /** @@ -822,7 +823,7 @@ class SyncPlayManager { */ clearSyncIcon () { this.syncMethod = 'None'; - events.trigger(this, 'syncing', [false, this.syncMethod]); + Events.trigger(this, 'syncing', [false, this.syncMethod]); } /** diff --git a/src/components/syncPlay/timeSyncManager.js b/src/components/syncPlay/timeSyncManager.js index 6ded631de3..78c160824d 100644 --- a/src/components/syncPlay/timeSyncManager.js +++ b/src/components/syncPlay/timeSyncManager.js @@ -3,7 +3,8 @@ * @module components/syncPlay/timeSyncManager */ -import events from 'events'; +import { Events } from 'jellyfin-apiclient'; +import ServerConnections from '../ServerConnections'; /** * Time estimation @@ -113,7 +114,7 @@ class TimeSyncManager { if (!this.poller) { this.poller = setTimeout(() => { this.poller = null; - const apiClient = window.connectionManager.currentApiClient(); + const apiClient = ServerConnections.currentApiClient(); const requestSent = new Date(); apiClient.getServerTime().then((response) => { const responseReceived = new Date(); @@ -131,11 +132,11 @@ class TimeSyncManager { this.pings++; } - events.trigger(this, 'update', [null, this.getTimeOffset(), this.getPing()]); + Events.trigger(this, 'update', [null, this.getTimeOffset(), this.getPing()]); }); }).catch((error) => { console.error(error); - events.trigger(this, 'update', [error, null, null]); + Events.trigger(this, 'update', [error, null, null]); }).finally(() => { this.requestPing(); }); diff --git a/src/components/tabbedview/tabbedview.js b/src/components/tabbedview/tabbedview.js index 4e7ccb6529..efc9fb37c5 100644 --- a/src/components/tabbedview/tabbedview.js +++ b/src/components/tabbedview/tabbedview.js @@ -1,7 +1,8 @@ -import backdrop from 'backdrop'; -import * as mainTabsManager from 'mainTabsManager'; -import layoutManager from 'layoutManager'; -import 'emby-tabs'; +import backdrop from '../backdrop/backdrop'; +import * as mainTabsManager from '../maintabsmanager'; +import layoutManager from '../layoutManager'; +import '../../elements/emby-tabs/emby-tabs'; +import { appRouter } from '../appRouter'; function onViewDestroy(e) { const tabControllers = this.tabControllers; @@ -109,7 +110,7 @@ class TabbedView { } } setTitle() { - Emby.Page.setTitle(''); + appRouter.setTitle(''); } } diff --git a/src/components/themeMediaPlayer.js b/src/components/themeMediaPlayer.js index 8f288a5348..5a07b219d8 100644 --- a/src/components/themeMediaPlayer.js +++ b/src/components/themeMediaPlayer.js @@ -1,5 +1,7 @@ -import playbackManager from 'playbackManager'; -import * as userSettings from 'userSettings'; +import { playbackManager } from './playback/playbackmanager'; +import * as userSettings from '../scripts/settings/userSettings'; +import { Events } from 'jellyfin-apiclient'; +import ServerConnections from './ServerConnections'; let currentOwnerId; let currentThemeIds = []; @@ -61,7 +63,7 @@ function loadThemeMedia(item) { return; } - const apiClient = window.connectionManager.getApiClient(item.ServerId); + const apiClient = ServerConnections.getApiClient(item.ServerId); apiClient.getThemeMedia(apiClient.getCurrentUserId(), item.Id, true).then(function (themeMediaResult) { const ownerId = themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult.OwnerId : themeMediaResult.ThemeSongsResult.OwnerId; diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js index d971880672..75bb5ed2ed 100644 --- a/src/components/toast/toast.js +++ b/src/components/toast/toast.js @@ -1,4 +1,4 @@ -import 'css!./toast'; +import './toast.css'; function remove(elem) { setTimeout(function () { diff --git a/src/components/tunerPicker.js b/src/components/tunerPicker.js index 2e7629a3c5..b85df66ac8 100644 --- a/src/components/tunerPicker.js +++ b/src/components/tunerPicker.js @@ -1,16 +1,17 @@ -import dialogHelper from 'dialogHelper'; -import dom from 'dom'; -import layoutManager from 'layoutManager'; -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'; +import dialogHelper from './dialogHelper/dialogHelper'; +import dom from '../scripts/dom'; +import layoutManager from './layoutManager'; +import globalize from '../scripts/globalize'; +import loading from './loading/loading'; +import browser from '../scripts/browser'; +import focusManager from './focusManager'; +import scrollHelper from '../scripts/scrollHelper'; +import 'material-design-icons-iconfont'; +import './formdialog.css'; +import '../elements/emby-button/emby-button'; +import '../elements/emby-itemscontainer/emby-itemscontainer'; +import './cardbuilder/card.css'; +import ServerConnections from './ServerConnections'; const enableFocusTransform = !browser.slow && !browser.edge; @@ -162,7 +163,7 @@ function tunerPicker() { scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); } - const apiClient = window.connectionManager.getApiClient(options.serverId); + const apiClient = ServerConnections.getApiClient(options.serverId); discoverDevices(dlg, apiClient); if (layoutManager.tv) { diff --git a/src/components/tvproviders/schedulesdirect.js b/src/components/tvproviders/schedulesdirect.js index de469e1845..8b386566b2 100644 --- a/src/components/tvproviders/schedulesdirect.js +++ b/src/components/tvproviders/schedulesdirect.js @@ -1,13 +1,15 @@ -import $ from 'jQuery'; -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'; +import 'jquery'; +import loading from '../loading/loading'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-input/emby-input'; +import '../listview/listview.css'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-select/emby-select'; +import '../../elements/emby-button/emby-button'; +import '../../assets/css/flexstyles.scss'; +import Dashboard from '../../scripts/clientUtils'; +import { Events } from 'jellyfin-apiclient'; export default function (page, providerId, options) { function reload() { @@ -83,63 +85,35 @@ export default function (page, providerId, options) { loading.hide(); } - function sha256(str) { - if (!self.TextEncoder) { - return Promise.resolve(''); - } - - const buffer = new TextEncoder('utf-8').encode(str); - return crypto.subtle.digest('SHA-256', buffer).then(function (hash) { - return hex(hash); - }); - } - - function hex(buffer) { - const hexCodes = []; - const view = new DataView(buffer); - - for (let i = 0; i < view.byteLength; i += 4) { - const value = view.getUint32(i); - const stringValue = value.toString(16); - const paddedValue = ('00000000' + stringValue).slice(-'00000000'.length); - hexCodes.push(paddedValue); - } - - return hexCodes.join(''); - } - function submitLoginForm() { loading.show(); - sha256(page.querySelector('.txtPass').value).then(function (passwordHash) { - const info = { - Type: 'SchedulesDirect', - Username: page.querySelector('.txtUser').value, - EnableAllTuners: true, - Password: passwordHash, - Pw: page.querySelector('.txtPass').value - }; - const id = providerId; + const info = { + Type: 'SchedulesDirect', + Username: page.querySelector('.txtUser').value, + EnableAllTuners: true, + Password: page.querySelector('.txtPass').value + }; + const id = providerId; - if (id) { - info.Id = id; - } + if (id) { + info.Id = id; + } - ApiClient.ajax({ - type: 'POST', - url: ApiClient.getUrl('LiveTv/ListingProviders', { - ValidateLogin: true - }), - data: JSON.stringify(info), - contentType: 'application/json', - dataType: 'json' - }).then(function (result) { - Dashboard.processServerConfigurationUpdateResult(); - providerId = result.Id; - reload(); - }, function () { - Dashboard.alert({ // ApiClient.ajax() error handler - message: globalize.translate('ErrorSavingTvProvider') - }); + ApiClient.ajax({ + type: 'POST', + url: ApiClient.getUrl('LiveTv/ListingProviders', { + ValidateLogin: true + }), + data: JSON.stringify(info), + contentType: 'application/json', + dataType: 'json' + }).then(function (result) { + Dashboard.processServerConfigurationUpdateResult(); + providerId = result.Id; + reload(); + }, function () { + Dashboard.alert({ // ApiClient.ajax() error handler + message: globalize.translate('ErrorSavingTvProvider') }); }); } diff --git a/src/components/tvproviders/xmltv.js b/src/components/tvproviders/xmltv.js index a75b29eeb3..0220aba611 100644 --- a/src/components/tvproviders/xmltv.js +++ b/src/components/tvproviders/xmltv.js @@ -1,10 +1,12 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import globalize from 'globalize'; -import 'emby-checkbox'; -import 'emby-input'; -import 'listViewStyle'; -import 'paper-icon-button-light'; +import 'jquery'; +import loading from '../loading/loading'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-input/emby-input'; +import '../listview/listview.css'; +import '../../elements/emby-button/paper-icon-button-light'; +import Dashboard from '../../scripts/clientUtils'; +import { Events } from 'jellyfin-apiclient'; export default function (page, providerId, options) { function getListingProvider(config, id) { @@ -143,7 +145,7 @@ export default function (page, providerId, options) { function onSelectPathClick(e) { const page = $(e.target).parents('.xmltvForm')[0]; - import('directorybrowser').then(({default: directoryBrowser}) => { + import('../directorybrowser/directorybrowser').then(({default: directoryBrowser}) => { const picker = new directoryBrowser(); picker.show({ includeFiles: true, diff --git a/src/components/upnextdialog/upnextdialog.js b/src/components/upnextdialog/upnextdialog.js index 45ac72b139..702fe4dcf6 100644 --- a/src/components/upnextdialog/upnextdialog.js +++ b/src/components/upnextdialog/upnextdialog.js @@ -1,14 +1,14 @@ -import dom from 'dom'; -import playbackManager from 'playbackManager'; -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'; +import dom from '../../scripts/dom'; +import { playbackManager } from '../playback/playbackmanager'; +import { Events } from 'jellyfin-apiclient'; +import mediaInfo from '../mediainfo/mediainfo'; +import layoutManager from '../layoutManager'; +import focusManager from '../focusManager'; +import globalize from '../../scripts/globalize'; +import itemHelper from '../itemHelper'; +import './upnextdialog.css'; +import '../../elements/emby-button/emby-button'; +import '../../assets/css/flexstyles.scss'; /* eslint-disable indent */ @@ -136,7 +136,7 @@ import 'flexStyles'; elem.classList.add('hide'); clearHideAnimationEventListeners(instance, elem); - events.trigger(instance, 'hide'); + Events.trigger(instance, 'hide'); } function hideComingUpNext() { diff --git a/src/components/userdatabuttons/userdatabuttons.js b/src/components/userdatabuttons/userdatabuttons.js index 6c0cbb8a29..9fe5546fcb 100644 --- a/src/components/userdatabuttons/userdatabuttons.js +++ b/src/components/userdatabuttons/userdatabuttons.js @@ -1,10 +1,11 @@ -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'; +import globalize from '../../scripts/globalize'; +import dom from '../../scripts/dom'; +import itemHelper from '../itemHelper'; +import '../../elements/emby-button/paper-icon-button-light'; +import 'material-design-icons-iconfont'; +import '../../elements/emby-button/emby-button'; +import './userdatabuttons.css'; +import ServerConnections from '../ServerConnections'; const userDataMethods = { markPlayed: markPlayed, @@ -187,12 +188,12 @@ function markPlayed(link) { } function likes(id, serverId, isLiked) { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked); } function played(id, serverId, isPlayed) { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); const method = isPlayed ? 'markPlayed' : 'markUnplayed'; @@ -200,13 +201,13 @@ function played(id, serverId, isPlayed) { } function favorite(id, serverId, isFavorite) { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite); } function clearLike(id, serverId) { - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id); } diff --git a/src/components/viewContainer.js b/src/components/viewContainer.js index 6f9059cb10..7bec82ee75 100644 --- a/src/components/viewContainer.js +++ b/src/components/viewContainer.js @@ -1,4 +1,6 @@ -import 'css!components/viewManager/viewContainer'; +import './viewManager/viewContainer.css'; +import Dashboard from '../scripts/clientUtils'; + /* eslint-disable indent */ function setControllerClass(view, options) { @@ -15,7 +17,7 @@ import 'css!components/viewManager/viewContainer'; controllerUrl = Dashboard.getPluginUrl(controllerUrl); const apiUrl = ApiClient.getUrl('/web/' + controllerUrl); - return import(apiUrl).then((ControllerFactory) => { + return import(/* webpackIgnore: true */ apiUrl).then((ControllerFactory) => { options.controllerFactory = ControllerFactory; }); } diff --git a/src/components/viewManager/viewManager.js b/src/components/viewManager/viewManager.js index 00c3018590..22faa3a3bd 100644 --- a/src/components/viewManager/viewManager.js +++ b/src/components/viewManager/viewManager.js @@ -1,7 +1,6 @@ -import viewContainer from 'viewContainer'; -import focusManager from 'focusManager'; -import queryString from 'queryString'; -import layoutManager from 'layoutManager'; +import viewContainer from '../viewContainer'; +import focusManager from '../focusManager'; +import layoutManager from '../layoutManager'; let currentView; let dispatchPageEvents; @@ -98,21 +97,25 @@ function dispatchViewEvent(view, eventInfo, eventName, isCancellable) { return eventResult; } -function getViewEventDetail(view, options, isRestore) { - const url = options.url; +function getViewEventDetail(view, {state, url, options = {}}, isRestored) { const index = url.indexOf('?'); - const params = index === -1 ? {} : queryString.parse(url.substring(index + 1)); + // eslint-disable-next-line compat/compat + const searchParams = new URLSearchParams(url.substring(index + 1)); + const params = {}; + + searchParams.forEach((value, key) => + params[key] = value + ); return { detail: { type: view.getAttribute('data-type'), properties: getProperties(view), - params: params, - isRestored: isRestore, - state: options.state, - + params, + isRestored, + state, // The route options - options: options.options || {} + options }, bubbles: true, cancelable: false @@ -169,4 +172,7 @@ class ViewManager { } } -export default new ViewManager(); +const viewManager = new ViewManager(); +viewManager.dispatchPageEvents(true); + +export default viewManager; diff --git a/src/components/viewSettings/viewSettings.js b/src/components/viewSettings/viewSettings.js index fd5b5c3f9e..0f32f4f6ac 100644 --- a/src/components/viewSettings/viewSettings.js +++ b/src/components/viewSettings/viewSettings.js @@ -1,15 +1,15 @@ -import dialogHelper from 'dialogHelper'; -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'; +import dialogHelper from '../dialogHelper/dialogHelper'; +import layoutManager from '../layoutManager'; +import globalize from '../../scripts/globalize'; +import * as userSettings from '../../scripts/settings/userSettings'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-input/emby-input'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-select/emby-select'; +import 'material-design-icons-iconfont'; +import '../formdialog.css'; +import '../../assets/css/flexstyles.scss'; function onSubmit(e) { e.preventDefault(); @@ -38,7 +38,7 @@ function saveValues(context, settings, settingsKey) { } function centerFocus(elem, horiz, on) { - import('scrollHelper').then(({default: scrollHelper}) => { + import('../../scripts/scrollHelper').then((scrollHelper) => { const fn = on ? 'on' : 'off'; scrollHelper.centerFocus[fn](elem, horiz); }); @@ -59,7 +59,7 @@ class ViewSettings { } show(options) { return new Promise(function (resolve, reject) { - import('text!./viewSettings.template.html').then(({default: template}) => { + import('./viewSettings.template.html').then(({default: template}) => { const dialogOptions = { removeOnClose: true, scrollY: false diff --git a/src/config.json b/src/config.json index 864e1f3656..ef7a6a99f1 100644 --- a/src/config.json +++ b/src/config.json @@ -23,17 +23,18 @@ } ], "plugins": [ - "plugins/playAccessValidation/plugin", - "plugins/experimentalWarnings/plugin", - "plugins/htmlAudioPlayer/plugin", - "plugins/htmlVideoPlayer/plugin", - "plugins/photoPlayer/plugin", - "plugins/comicsPlayer/plugin", - "plugins/bookPlayer/plugin", - "plugins/youtubePlayer/plugin", - "plugins/backdropScreensaver/plugin", - "plugins/logoScreensaver/plugin", - "plugins/sessionPlayer/plugin", - "plugins/chromecastPlayer/plugin" + "playAccessValidation/plugin", + "experimentalWarnings/plugin", + "htmlAudioPlayer/plugin", + "htmlVideoPlayer/plugin", + "photoPlayer/plugin", + "comicsPlayer/plugin", + "bookPlayer/plugin", + "youtubePlayer/plugin", + "backdropScreensaver/plugin", + "pdfPlayer/plugin", + "logoScreensaver/plugin", + "sessionPlayer/plugin", + "chromecastPlayer/plugin" ] } diff --git a/src/controllers/dashboard/apikeys.js b/src/controllers/dashboard/apikeys.js index 2b526aa8cc..fcee86f827 100644 --- a/src/controllers/dashboard/apikeys.js +++ b/src/controllers/dashboard/apikeys.js @@ -1,21 +1,21 @@ -import datetime from 'datetime'; -import loading from 'loading'; -import dom from 'dom'; -import globalize from 'globalize'; -import 'emby-button'; +import datetime from '../../scripts/datetime'; +import loading from '../../components/loading/loading'; +import dom from '../../scripts/dom'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-button/emby-button'; +import confirm from '../../components/confirm/confirm'; +import { pageIdOn } from '../../scripts/clientUtils'; /* eslint-disable indent */ function revoke(page, key) { - import('confirm').then(({default: confirm}) => { - confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () { - loading.show(); - ApiClient.ajax({ - type: 'DELETE', - url: ApiClient.getUrl('Auth/Keys/' + key) - }).then(function () { - loadData(page); - }); + confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () { + loading.show(); + ApiClient.ajax({ + type: 'DELETE', + url: ApiClient.getUrl('Auth/Keys/' + key) + }).then(function () { + loadData(page); }); }); } @@ -51,7 +51,7 @@ import 'emby-button'; } function showNewKeyPrompt(page) { - import('prompt').then(({default: prompt}) => { + import('../../components/prompt/prompt').then(({default: prompt}) => { prompt({ title: globalize.translate('HeaderNewApiKey'), label: globalize.translate('LabelAppName'), diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js index 855ce3ff03..99739ad038 100644 --- a/src/controllers/dashboard/dashboard.js +++ b/src/controllers/dashboard/dashboard.js @@ -1,66 +1,68 @@ -import datetime from 'datetime'; -import events from 'events'; -import itemHelper from 'itemHelper'; -import serverNotifications from 'serverNotifications'; -import dom from 'dom'; -import taskButton from 'scripts/taskbutton'; -import globalize from 'globalize'; -import * as datefns from 'date-fns'; -import dfnshelper from 'dfnshelper'; -import loading from 'loading'; -import playMethodHelper from 'playMethodHelper'; -import cardBuilder from 'cardBuilder'; -import imageLoader from 'imageLoader'; -import ActivityLog from 'components/activitylog'; -import imageHelper from 'scripts/imagehelper'; -import indicators from 'indicators'; -import 'listViewStyle'; -import 'emby-button'; -import 'flexStyles'; -import 'emby-itemscontainer'; +import datetime from '../../scripts/datetime'; +import { Events } from 'jellyfin-apiclient'; +import itemHelper from '../../components/itemHelper'; +import serverNotifications from '../../scripts/serverNotifications'; +import dom from '../../scripts/dom'; +import globalize from '../../scripts/globalize'; +import { formatDistanceToNow } from 'date-fns'; +import { localeWithSuffix } from '../../scripts/dfnshelper'; +import loading from '../../components/loading/loading'; +import playMethodHelper from '../../components/playback/playmethodhelper'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import imageLoader from '../../components/images/imageLoader'; +import ActivityLog from '../../components/activitylog'; +import imageHelper from '../../scripts/imagehelper'; +import indicators from '../../components/indicators/indicators'; +import '../../components/listview/listview.css'; +import '../../elements/emby-button/emby-button'; +import '../../assets/css/flexstyles.scss'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import taskButton from '../../scripts/taskbutton'; +import Dashboard from '../../scripts/clientUtils'; +import ServerConnections from '../../components/ServerConnections'; +import alert from '../../components/alert'; +import confirm from '../../components/confirm/confirm'; /* eslint-disable indent */ function showPlaybackInfo(btn, session) { - import('alert').then(({default: alert}) => { - let title; - const text = []; - const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); + let title; + const text = []; + const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session); - if (displayPlayMethod === 'DirectStream') { - title = globalize.translate('DirectStreaming'); - text.push(globalize.translate('DirectStreamHelp1')); + if (displayPlayMethod === 'DirectStream') { + title = globalize.translate('DirectStreaming'); + text.push(globalize.translate('DirectStreamHelp1')); + text.push('
'); + text.push(globalize.translate('DirectStreamHelp2')); + } else if (displayPlayMethod === 'Transcode') { + title = globalize.translate('Transcoding'); + text.push(globalize.translate('MediaIsBeingConverted')); + + if (session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length) { text.push('
'); - text.push(globalize.translate('DirectStreamHelp2')); - } else if (displayPlayMethod === 'Transcode') { - title = globalize.translate('Transcoding'); - text.push(globalize.translate('MediaIsBeingConverted')); - - if (session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length) { - text.push('
'); - text.push(globalize.translate('LabelReasonForTranscoding')); - session.TranscodingInfo.TranscodeReasons.forEach(function (transcodeReason) { - text.push(globalize.translate(transcodeReason)); - }); - } + text.push(globalize.translate('LabelReasonForTranscoding')); + session.TranscodingInfo.TranscodeReasons.forEach(function (transcodeReason) { + text.push(globalize.translate(transcodeReason)); + }); } + } - alert({ - text: text.join('
'), - title: title - }); + alert({ + text: text.join('
'), + title: title }); } function showSendMessageForm(btn, session) { - import('prompt').then(({default: prompt}) => { + import('../../components/prompt/prompt').then(({default: prompt}) => { prompt({ title: globalize.translate('HeaderSendMessage'), label: globalize.translate('LabelMessageText'), confirmText: globalize.translate('ButtonSend') }).then(function (text) { if (text) { - window.connectionManager.getApiClient(session.ServerId).sendMessageCommand(session.Id, { + ServerConnections.getApiClient(session.ServerId).sendMessageCommand(session.Id, { Text: text, TimeoutMs: 5e3 }); @@ -70,10 +72,10 @@ import 'emby-itemscontainer'; } function showOptionsMenu(btn, session) { - import('actionsheet').then(({default: actionsheet}) => { + import('../../components/actionSheet/actionSheet').then(({default: actionsheet}) => { const menuItems = []; - if (session.ServerId && session.DeviceId !== window.connectionManager.deviceId()) { + if (session.ServerId && session.DeviceId !== ServerConnections.deviceId()) { menuItems.push({ name: globalize.translate('SendMessage'), id: 'sendmessage' @@ -123,9 +125,9 @@ import 'emby-itemscontainer'; } else if (btn.classList.contains('btnSessionSendMessage')) { showSendMessageForm(btn, session); } else if (btn.classList.contains('btnSessionStop')) { - window.connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'Stop'); + ServerConnections.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'Stop'); } else if (btn.classList.contains('btnSessionPlayPause') && session.PlayState) { - window.connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'PlayPause'); + ServerConnections.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'PlayPause'); } } } @@ -313,7 +315,7 @@ import 'emby-itemscontainer'; btnCssClass = session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length ? '' : ' hide'; html += ''; - btnCssClass = session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== window.connectionManager.deviceId() ? '' : ' hide'; + btnCssClass = session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== ServerConnections.deviceId() ? '' : ' hide'; html += ''; html += ''; @@ -473,7 +475,7 @@ import 'emby-itemscontainer'; // how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences if (!nowPlayingItem) { return { - html: globalize.translate('LastSeen', datefns.formatDistanceToNow(Date.parse(session.LastActivityDate), dfnshelper.localeWithSuffix)), + html: globalize.translate('LastSeen', formatDistanceToNow(Date.parse(session.LastActivityDate), localeWithSuffix)), image: imgUrl }; } @@ -720,33 +722,29 @@ import 'emby-itemscontainer'; }); }, restart: function (btn) { - import('confirm').then(({default: confirm}) => { - confirm({ - title: globalize.translate('Restart'), - text: globalize.translate('MessageConfirmRestart'), - confirmText: globalize.translate('Restart'), - primary: 'delete' - }).then(function () { - const page = dom.parentWithClass(btn, 'page'); - page.querySelector('#btnRestartServer').disabled = true; - page.querySelector('#btnShutdown').disabled = true; - ApiClient.restartServer(); - }); + confirm({ + title: globalize.translate('Restart'), + text: globalize.translate('MessageConfirmRestart'), + confirmText: globalize.translate('Restart'), + primary: 'delete' + }).then(function () { + const page = dom.parentWithClass(btn, 'page'); + page.querySelector('#btnRestartServer').disabled = true; + page.querySelector('#btnShutdown').disabled = true; + ApiClient.restartServer(); }); }, shutdown: function (btn) { - import('confirm').then(({default: confirm}) => { - confirm({ - title: globalize.translate('ButtonShutdown'), - text: globalize.translate('MessageConfirmShutdown'), - confirmText: globalize.translate('ButtonShutdown'), - primary: 'delete' - }).then(function () { - const page = dom.parentWithClass(btn, 'page'); - page.querySelector('#btnRestartServer').disabled = true; - page.querySelector('#btnShutdown').disabled = true; - ApiClient.shutdownServer(); - }); + confirm({ + title: globalize.translate('ButtonShutdown'), + text: globalize.translate('MessageConfirmShutdown'), + confirmText: globalize.translate('ButtonShutdown'), + primary: 'delete' + }).then(function () { + const page = dom.parentWithClass(btn, 'page'); + page.querySelector('#btnRestartServer').disabled = true; + page.querySelector('#btnShutdown').disabled = true; + ApiClient.shutdownServer(); }); } }; @@ -799,13 +797,13 @@ import 'emby-itemscontainer'; loading.show(); pollForInfo(page, apiClient); DashboardPage.startInterval(apiClient); - events.on(serverNotifications, 'RestartRequired', onRestartRequired); - events.on(serverNotifications, 'ServerShuttingDown', onServerShuttingDown); - events.on(serverNotifications, 'ServerRestarting', onServerRestarting); - events.on(serverNotifications, 'PackageInstalling', onPackageInstalling); - events.on(serverNotifications, 'PackageInstallationCompleted', onPackageInstallationCompleted); - events.on(serverNotifications, 'Sessions', onSessionsUpdate); - events.on(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate); + Events.on(serverNotifications, 'RestartRequired', onRestartRequired); + Events.on(serverNotifications, 'ServerShuttingDown', onServerShuttingDown); + Events.on(serverNotifications, 'ServerRestarting', onServerRestarting); + Events.on(serverNotifications, 'PackageInstalling', onPackageInstalling); + Events.on(serverNotifications, 'PackageInstallationCompleted', onPackageInstallationCompleted); + Events.on(serverNotifications, 'Sessions', onSessionsUpdate); + Events.on(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate); DashboardPage.lastAppUpdateCheck = null; reloadSystemInfo(page, ApiClient); @@ -839,13 +837,13 @@ import 'emby-itemscontainer'; const apiClient = ApiClient; const page = this; - events.off(serverNotifications, 'RestartRequired', onRestartRequired); - events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown); - events.off(serverNotifications, 'ServerRestarting', onServerRestarting); - events.off(serverNotifications, 'PackageInstalling', onPackageInstalling); - events.off(serverNotifications, 'PackageInstallationCompleted', onPackageInstallationCompleted); - events.off(serverNotifications, 'Sessions', onSessionsUpdate); - events.off(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate); + Events.off(serverNotifications, 'RestartRequired', onRestartRequired); + Events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown); + Events.off(serverNotifications, 'ServerRestarting', onServerRestarting); + Events.off(serverNotifications, 'PackageInstalling', onPackageInstalling); + Events.off(serverNotifications, 'PackageInstallationCompleted', onPackageInstallationCompleted); + Events.off(serverNotifications, 'Sessions', onSessionsUpdate); + Events.off(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate); if (apiClient) { DashboardPage.stopInterval(apiClient); diff --git a/src/controllers/dashboard/devices/device.js b/src/controllers/dashboard/devices/device.js index 17e28b9bdb..18404d605f 100644 --- a/src/controllers/dashboard/devices/device.js +++ b/src/controllers/dashboard/devices/device.js @@ -1,7 +1,8 @@ -import loading from 'loading'; -import dom from 'dom'; -import 'emby-input'; -import 'emby-button'; +import loading from '../../../components/loading/loading'; +import dom from '../../../scripts/dom'; +import '../../../elements/emby-input/emby-input'; +import '../../../elements/emby-button/emby-button'; +import Dashboard from '../../../scripts/clientUtils'; /* eslint-disable indent */ diff --git a/src/controllers/dashboard/devices/devices.html b/src/controllers/dashboard/devices/devices.html index 63c348c900..e2504cd3e7 100644 --- a/src/controllers/dashboard/devices/devices.html +++ b/src/controllers/dashboard/devices/devices.html @@ -5,6 +5,7 @@

${HeaderDevices}

${Help} +
diff --git a/src/controllers/dashboard/devices/devices.js b/src/controllers/dashboard/devices/devices.js index 1178a0f1bd..e1eb99e677 100644 --- a/src/controllers/dashboard/devices/devices.js +++ b/src/controllers/dashboard/devices/devices.js @@ -1,39 +1,53 @@ -import loading from 'loading'; -import dom from 'dom'; -import globalize from 'globalize'; -import imageHelper from 'scripts/imagehelper'; -import * as datefns from 'date-fns'; -import dfnshelper from 'dfnshelper'; -import 'emby-button'; -import 'emby-itemscontainer'; -import 'cardStyle'; +import loading from '../../../components/loading/loading'; +import dom from '../../../scripts/dom'; +import globalize from '../../../scripts/globalize'; +import imageHelper from '../../../scripts/imagehelper'; +import { formatDistanceToNow } from 'date-fns'; +import { localeWithSuffix } from '../../../scripts/dfnshelper'; +import '../../../elements/emby-button/emby-button'; +import '../../../elements/emby-itemscontainer/emby-itemscontainer'; +import '../../../components/cardbuilder/card.css'; +import Dashboard from '../../../scripts/clientUtils'; +import confirm from '../../../components/confirm/confirm'; /* eslint-disable indent */ + // Local cache of loaded + let deviceIds = []; + function canDelete(deviceId) { return deviceId !== ApiClient.deviceId(); } + function deleteAllDevices(page) { + const msg = globalize.translate('DeleteDevicesConfirmation'); + + confirm({ + text: msg, + title: globalize.translate('HeaderDeleteDevices'), + confirmText: globalize.translate('ButtonDelete'), + primary: 'delete' + }).then(async () => { + loading.show(); + await Promise.all( + deviceIds.filter(canDelete).map((id) => ApiClient.deleteDevice(id)) + ); + loadData(page); + }); + } + function deleteDevice(page, id) { const msg = globalize.translate('DeleteDeviceConfirmation'); - import('confirm').then(({default: confirm}) => { - confirm({ - text: msg, - title: globalize.translate('HeaderDeleteDevice'), - confirmText: globalize.translate('Delete'), - primary: 'delete' - }).then(function () { - loading.show(); - ApiClient.ajax({ - type: 'DELETE', - url: ApiClient.getUrl('Devices', { - Id: id - }) - }).then(function () { - loadData(page); - }); - }); + confirm({ + text: msg, + title: globalize.translate('HeaderDeleteDevice'), + confirmText: globalize.translate('Delete'), + primary: 'delete' + }).then(async () => { + loading.show(); + await ApiClient.deleteDevice(id); + loadData(page); }); } @@ -56,7 +70,7 @@ import 'cardStyle'; }); } - import('actionsheet').then(({default: actionsheet}) => { + import('../../../components/actionSheet/actionSheet').then(({default: actionsheet}) => { actionsheet.show({ items: menuItems, positionTo: btn, @@ -112,7 +126,7 @@ import 'cardStyle'; if (device.LastUserName) { deviceHtml += device.LastUserName; - deviceHtml += ', ' + datefns.formatDistanceToNow(Date.parse(device.DateLastActivity), dfnshelper.localeWithSuffix); + deviceHtml += ', ' + formatDistanceToNow(Date.parse(device.DateLastActivity), localeWithSuffix); } deviceHtml += ' '; @@ -129,6 +143,7 @@ import 'cardStyle'; loading.show(); ApiClient.getJSON(ApiClient.getUrl('Devices')).then(function (result) { load(page, result.Items); + deviceIds = result.Items.map((device) => device.Id); loading.hide(); }); } @@ -145,6 +160,9 @@ import 'cardStyle'; view.addEventListener('viewshow', function () { loadData(this); }); - } + view.querySelector('#deviceDeleteAll').addEventListener('click', function() { + deleteAllDevices(view); + }); + } /* eslint-enable indent */ diff --git a/src/controllers/dashboard/dlna/profile.js b/src/controllers/dashboard/dlna/profile.js index 478b5ca878..74b4f2a25c 100644 --- a/src/controllers/dashboard/dlna/profile.js +++ b/src/controllers/dashboard/dlna/profile.js @@ -1,11 +1,13 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import globalize from 'globalize'; -import 'emby-select'; -import 'emby-button'; -import 'emby-input'; -import 'emby-checkbox'; -import 'listViewStyle'; +import 'jquery'; +import loading from '../../../components/loading/loading'; +import globalize from '../../../scripts/globalize'; +import '../../../elements/emby-select/emby-select'; +import '../../../elements/emby-button/emby-button'; +import '../../../elements/emby-input/emby-input'; +import '../../../elements/emby-checkbox/emby-checkbox'; +import '../../../components/listview/listview.css'; +import Dashboard from '../../../scripts/clientUtils'; +import toast from '../../../components/toast/toast'; /* eslint-disable indent */ @@ -633,9 +635,7 @@ import 'listViewStyle'; data: JSON.stringify(profile), contentType: 'application/json' }).then(function () { - import('toast').then(({default: toast}) => { - toast('Settings saved.'); - }); + toast('Settings saved.'); }, Dashboard.processErrorResponse); } else { ApiClient.ajax({ diff --git a/src/controllers/dashboard/dlna/profiles.js b/src/controllers/dashboard/dlna/profiles.js index 4eb830df6f..e507fc4e7c 100644 --- a/src/controllers/dashboard/dlna/profiles.js +++ b/src/controllers/dashboard/dlna/profiles.js @@ -1,9 +1,10 @@ -import $ from 'jQuery'; -import globalize from 'globalize'; -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import 'listViewStyle'; -import 'emby-button'; +import 'jquery'; +import globalize from '../../../scripts/globalize'; +import loading from '../../../components/loading/loading'; +import libraryMenu from '../../../scripts/libraryMenu'; +import '../../../components/listview/listview.css'; +import '../../../elements/emby-button/emby-button'; +import confirm from '../../../components/confirm/confirm'; /* eslint-disable indent */ @@ -64,16 +65,14 @@ import 'emby-button'; } function deleteProfile(page, id) { - import('confirm').then(({default: confirm}) => { - confirm(globalize.translate('MessageConfirmProfileDeletion'), globalize.translate('HeaderConfirmProfileDeletion')).then(function () { - loading.show(); - ApiClient.ajax({ - type: 'DELETE', - url: ApiClient.getUrl('Dlna/Profiles/' + id) - }).then(function () { - loading.hide(); - loadProfiles(page); - }); + confirm(globalize.translate('MessageConfirmProfileDeletion'), globalize.translate('HeaderConfirmProfileDeletion')).then(function () { + loading.show(); + ApiClient.ajax({ + type: 'DELETE', + url: ApiClient.getUrl('Dlna/Profiles/' + id) + }).then(function () { + loading.hide(); + loadProfiles(page); }); }); } diff --git a/src/controllers/dashboard/dlna/settings.js b/src/controllers/dashboard/dlna/settings.js index fb93441a55..33c35b9644 100644 --- a/src/controllers/dashboard/dlna/settings.js +++ b/src/controllers/dashboard/dlna/settings.js @@ -1,7 +1,8 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import globalize from 'globalize'; +import 'jquery'; +import loading from '../../../components/loading/loading'; +import libraryMenu from '../../../scripts/libraryMenu'; +import globalize from '../../../scripts/globalize'; +import Dashboard from '../../../scripts/clientUtils'; /* eslint-disable indent */ diff --git a/src/controllers/dashboard/encodingsettings.html b/src/controllers/dashboard/encodingsettings.html index 5afbdad24f..7a43d67e46 100644 --- a/src/controllers/dashboard/encodingsettings.html +++ b/src/controllers/dashboard/encodingsettings.html @@ -178,6 +178,22 @@
${LabelTranscodingTempPathHelp}
+
+
+
+ +
+ +
+
${LabelFallbackFontPathHelp}
+
+
+ +
${EnableFallbackFontHelp}
+
${LabelDownMixAudioScaleHelp}
diff --git a/src/controllers/dashboard/encodingsettings.js b/src/controllers/dashboard/encodingsettings.js index 6a54e8105d..19aa66654d 100644 --- a/src/controllers/dashboard/encodingsettings.js +++ b/src/controllers/dashboard/encodingsettings.js @@ -1,8 +1,10 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import globalize from 'globalize'; -import dom from 'dom'; -import libraryMenu from 'libraryMenu'; +import 'jquery'; +import loading from '../../components/loading/loading'; +import globalize from '../../scripts/globalize'; +import dom from '../../scripts/dom'; +import libraryMenu from '../../scripts/libraryMenu'; +import Dashboard from '../../scripts/clientUtils'; +import alert from '../../components/alert'; /* eslint-disable indent */ @@ -19,6 +21,8 @@ import libraryMenu from 'libraryMenu'; page.querySelector('#txtMaxMuxingQueueSize').value = config.MaxMuxingQueueSize || ''; page.querySelector('.txtEncoderPath').value = config.EncoderAppPathDisplay || ''; $('#txtTranscodingTempPath', page).val(systemInfo.TranscodingTempPath || ''); + page.querySelector('#txtFallbackFontPath').value = config.FallbackFontPath || ''; + page.querySelector('#chkEnableFallbackFont').checked = config.EnableFallbackFont; $('#txtVaapiDevice', page).val(config.VaapiDevice || ''); page.querySelector('#chkTonemapping').checked = config.EnableTonemapping; page.querySelector('#txtOpenclDevice').value = config.OpenclDevice || ''; @@ -42,12 +46,7 @@ import libraryMenu from 'libraryMenu'; function onSaveEncodingPathFailure(response) { loading.hide(); - let msg = ''; - msg = globalize.translate('FFmpegSavePathNotFound'); - - import('alert').then(({default: alert}) => { - alert(msg); - }); + alert(globalize.translate('FFmpegSavePathNotFound')); } function updateEncoder(form) { @@ -73,6 +72,8 @@ import libraryMenu from 'libraryMenu'; config.DownMixAudioBoost = $('#txtDownMixAudioBoost', form).val(); config.MaxMuxingQueueSize = form.querySelector('#txtMaxMuxingQueueSize').value; config.TranscodingTempPath = $('#txtTranscodingTempPath', form).val(); + config.FallbackFontPath = form.querySelector('#txtFallbackFontPath').value; + config.EnableFallbackFont = form.querySelector('#txtFallbackFontPath').value ? form.querySelector('#chkEnableFallbackFont').checked : false; config.EncodingThreadCount = $('#selectThreadCount', form).val(); config.HardwareAccelerationType = $('#selectVideoDecoder', form).val(); config.VaapiDevice = $('#txtVaapiDevice', form).val(); @@ -101,22 +102,17 @@ import libraryMenu from 'libraryMenu'; ApiClient.updateNamedConfiguration('encoding', config).then(function () { updateEncoder(form); }, function () { - import('alert').then(({default: alert}) => { - alert(globalize.translate('ErrorDefault')); - }); - + alert(globalize.translate('ErrorDefault')); Dashboard.processServerConfigurationUpdateResult(); }); }); }; if ($('#selectVideoDecoder', form).val()) { - import('alert').then(({default: alert}) => { - alert({ - title: globalize.translate('TitleHardwareAcceleration'), - text: globalize.translate('HardwareAccelerationWarning') - }).then(onDecoderConfirmed); - }); + alert({ + title: globalize.translate('TitleHardwareAcceleration'), + text: globalize.translate('HardwareAccelerationWarning') + }).then(onDecoderConfirmed); } else { onDecoderConfirmed(); } @@ -186,7 +182,7 @@ import libraryMenu from 'libraryMenu'; setDecodingCodecsVisible(page, this.value); }); $('#btnSelectEncoderPath', page).on('click.selectDirectory', function () { - import('directorybrowser').then(({default: directoryBrowser}) => { + import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => { const picker = new directoryBrowser(); picker.show({ includeFiles: true, @@ -201,7 +197,7 @@ import libraryMenu from 'libraryMenu'; }); }); $('#btnSelectTranscodingTempPath', page).on('click.selectDirectory', function () { - import('directorybrowser').then(({default: directoryBrowser}) => { + import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => { const picker = new directoryBrowser(); picker.show({ callback: function (path) { @@ -217,6 +213,23 @@ import libraryMenu from 'libraryMenu'; }); }); }); + $('#btnSelectFallbackFontPath', page).on('click.selectDirectory', function () { + import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => { + const picker = new directoryBrowser(); + picker.show({ + includeDirectories: true, + callback: function (path) { + if (path) { + page.querySelector('#txtFallbackFontPath').value = path; + } + + picker.close(); + }, + header: globalize.translate('HeaderSelectFallbackFontPath'), + instruction: globalize.translate('HeaderSelectFallbackFontPathHelp') + }); + }); + }); $('.encodingSettingsForm').off('submit', onSubmit).on('submit', onSubmit); }).on('pageshow', '#encodingSettingsPage', function () { loading.show(); diff --git a/src/controllers/dashboard/general.js b/src/controllers/dashboard/general.js index eb819dc415..bdb99c7108 100644 --- a/src/controllers/dashboard/general.js +++ b/src/controllers/dashboard/general.js @@ -1,11 +1,14 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import globalize from 'globalize'; -import 'emby-checkbox'; -import 'emby-textarea'; -import 'emby-input'; -import 'emby-select'; -import 'emby-button'; +import 'jquery'; +import loading from '../../components/loading/loading'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-textarea/emby-textarea'; +import '../../elements/emby-input/emby-input'; +import '../../elements/emby-select/emby-select'; +import '../../elements/emby-button/emby-button'; +import AppInfo from '../../components/AppInfo'; +import Dashboard from '../../scripts/clientUtils'; +import alert from '../../components/alert'; /* eslint-disable indent */ @@ -51,10 +54,7 @@ import 'emby-button'; }); }); }, function () { - import('alert').then(({default: alert}) => { - alert(globalize.translate('ErrorDefault')); - }); - + alert(globalize.translate('ErrorDefault')); Dashboard.processServerConfigurationUpdateResult(); }); }); @@ -66,7 +66,7 @@ import 'emby-button'; const brandingConfigKey = 'branding'; export default function (view, params) { $('#btnSelectCachePath', view).on('click.selectDirectory', function () { - import('directorybrowser').then(({default: directoryBrowser}) => { + import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => { const picker = new directoryBrowser(); picker.show({ callback: function (path) { @@ -83,7 +83,7 @@ import 'emby-button'; }); }); $('#btnSelectMetadataPath', view).on('click.selectDirectory', function () { - import('directorybrowser').then(({default: directoryBrowser}) => { + import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => { const picker = new directoryBrowser(); picker.show({ path: $('#txtMetadataPath', view).val(), diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js index 0abda33b6e..8bac92d5d1 100644 --- a/src/controllers/dashboard/library.js +++ b/src/controllers/dashboard/library.js @@ -1,17 +1,19 @@ -import $ from 'jQuery'; -import taskButton from 'scripts/taskbutton'; -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import globalize from 'globalize'; -import dom from 'dom'; -import imageHelper from 'scripts/imagehelper'; -import 'cardStyle'; -import 'emby-itemrefreshindicator'; +import 'jquery'; +import taskButton from '../../scripts/taskbutton'; +import loading from '../../components/loading/loading'; +import libraryMenu from '../../scripts/libraryMenu'; +import globalize from '../../scripts/globalize'; +import dom from '../../scripts/dom'; +import imageHelper from '../../scripts/imagehelper'; +import '../../components/cardbuilder/card.css'; +import '../../elements/emby-itemrefreshindicator/emby-itemrefreshindicator'; +import Dashboard, { pageClassOn, pageIdOn } from '../../scripts/clientUtils'; +import confirm from '../../components/confirm/confirm'; /* eslint-disable indent */ function addVirtualFolder(page) { - import('medialibrarycreator').then(({default: medialibrarycreator}) => { + import('../../components/mediaLibraryCreator/mediaLibraryCreator').then(({default: medialibrarycreator}) => { new medialibrarycreator({ collectionTypeOptions: getCollectionTypeOptions().filter(function (f) { return !f.hidden; @@ -26,7 +28,7 @@ import 'emby-itemrefreshindicator'; } function editVirtualFolder(page, virtualFolder) { - import('medialibraryeditor').then(({default: medialibraryeditor}) => { + import('../../components/mediaLibraryEditor/mediaLibraryEditor').then(({default: medialibraryeditor}) => { new medialibraryeditor({ refresh: shouldRefreshLibraryAfterChanges(page), library: virtualFolder @@ -46,23 +48,21 @@ import 'emby-itemrefreshindicator'; msg += virtualFolder.Locations.join('
'); } - import('confirm').then(({default: confirm}) => { - confirm({ - text: msg, - title: globalize.translate('HeaderRemoveMediaFolder'), - confirmText: globalize.translate('Delete'), - primary: 'delete' - }).then(function () { - const refreshAfterChange = shouldRefreshLibraryAfterChanges(page); - ApiClient.removeVirtualFolder(virtualFolder.Name, refreshAfterChange).then(function () { - reloadLibrary(page); - }); + confirm({ + text: msg, + title: globalize.translate('HeaderRemoveMediaFolder'), + confirmText: globalize.translate('Delete'), + primary: 'delete' + }).then(function () { + const refreshAfterChange = shouldRefreshLibraryAfterChanges(page); + ApiClient.removeVirtualFolder(virtualFolder.Name, refreshAfterChange).then(function () { + reloadLibrary(page); }); }); } function refreshVirtualFolder(page, virtualFolder) { - import('refreshDialog').then(({default: refreshDialog}) => { + import('../../components/refreshdialog/refreshdialog').then(({default: refreshDialog}) => { new refreshDialog({ itemIds: [virtualFolder.ItemId], serverId: ApiClient.serverId(), @@ -72,7 +72,7 @@ import 'emby-itemrefreshindicator'; } function renameVirtualFolder(page, virtualFolder) { - import('prompt').then(({default: prompt}) => { + import('../../components/prompt/prompt').then(({default: prompt}) => { prompt({ label: globalize.translate('LabelNewName'), confirmText: globalize.translate('ButtonRename') @@ -118,7 +118,7 @@ import 'emby-itemrefreshindicator'; icon: 'refresh' }); - import('actionsheet').then(({default: actionsheet}) => { + import('../../components/actionSheet/actionSheet').then((actionsheet) => { actionsheet.show({ items: menuItems, positionTo: elem, @@ -199,7 +199,7 @@ import 'emby-itemrefreshindicator'; } function editImages(page, virtualFolder) { - import('imageEditor').then(({default: imageEditor}) => { + import('../../components/imageeditor/imageeditor').then((imageEditor) => { imageEditor.show({ itemId: virtualFolder.ItemId, serverId: ApiClient.serverId() diff --git a/src/controllers/dashboard/librarydisplay.js b/src/controllers/dashboard/librarydisplay.js index 06e366b988..7e7bbb7cf8 100644 --- a/src/controllers/dashboard/librarydisplay.js +++ b/src/controllers/dashboard/librarydisplay.js @@ -1,8 +1,9 @@ -import globalize from 'globalize'; -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import 'emby-checkbox'; -import 'emby-button'; +import globalize from '../../scripts/globalize'; +import loading from '../../components/loading/loading'; +import libraryMenu from '../../scripts/libraryMenu'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-button/emby-button'; +import Dashboard from '../../scripts/clientUtils'; /* eslint-disable indent */ diff --git a/src/controllers/dashboard/logs.js b/src/controllers/dashboard/logs.js index e28c2ac12f..06d317a8a4 100644 --- a/src/controllers/dashboard/logs.js +++ b/src/controllers/dashboard/logs.js @@ -1,8 +1,8 @@ -import datetime from 'datetime'; -import loading from 'loading'; -import 'emby-button'; -import 'listViewStyle'; -import 'flexStyles'; +import datetime from '../../scripts/datetime'; +import loading from '../../components/loading/loading'; +import '../../elements/emby-button/emby-button'; +import '../../components/listview/listview.css'; +import '../../assets/css/flexstyles.scss'; /* eslint-disable indent */ diff --git a/src/controllers/dashboard/metadataImages.js b/src/controllers/dashboard/metadataImages.js index 649ca9ac31..6dda2f1ee6 100644 --- a/src/controllers/dashboard/metadataImages.js +++ b/src/controllers/dashboard/metadataImages.js @@ -1,8 +1,9 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import globalize from 'globalize'; -import 'listViewStyle'; +import 'jquery'; +import loading from '../../components/loading/loading'; +import libraryMenu from '../../scripts/libraryMenu'; +import globalize from '../../scripts/globalize'; +import '../../components/listview/listview.css'; +import Dashboard from '../../scripts/clientUtils'; /* eslint-disable indent */ diff --git a/src/controllers/dashboard/metadatanfo.js b/src/controllers/dashboard/metadatanfo.js index 16e1018e44..d3777e4787 100644 --- a/src/controllers/dashboard/metadatanfo.js +++ b/src/controllers/dashboard/metadatanfo.js @@ -1,7 +1,9 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import globalize from 'globalize'; +import 'jquery'; +import loading from '../../components/loading/loading'; +import libraryMenu from '../../scripts/libraryMenu'; +import globalize from '../../scripts/globalize'; +import Dashboard from '../../scripts/clientUtils'; +import alert from '../../components/alert'; /* eslint-disable indent */ @@ -38,11 +40,8 @@ import globalize from 'globalize'; function showConfirmMessage(config) { const msg = []; msg.push(globalize.translate('MetadataSettingChangeHelp')); - - import('alert').then(({default: alert}) => { - alert({ - text: msg.join('

') - }); + alert({ + text: msg.join('

') }); } diff --git a/src/controllers/dashboard/networking.js b/src/controllers/dashboard/networking.js index 7fc161a90b..3507ff494e 100644 --- a/src/controllers/dashboard/networking.js +++ b/src/controllers/dashboard/networking.js @@ -1,7 +1,9 @@ -import loading from 'loading'; -import globalize from 'globalize'; -import 'emby-checkbox'; -import 'emby-select'; +import loading from '../../components/loading/loading'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-select/emby-select'; +import Dashboard from '../../scripts/clientUtils'; +import alert from '../../components/alert'; /* eslint-disable indent */ @@ -89,9 +91,7 @@ import 'emby-select'; function showAlertText(options) { return new Promise(function (resolve, reject) { - import('alert').then(({default: alert}) => { - alert(options).then(resolve, reject); - }); + alert(options).then(resolve, reject); }); } @@ -145,7 +145,7 @@ import 'emby-select'; } }); view.querySelector('#btnSelectCertPath').addEventListener('click', function () { - import('directorybrowser').then(({default: directoryBrowser}) => { + import('../../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => { const picker = new directoryBrowser(); picker.show({ includeFiles: true, diff --git a/src/controllers/dashboard/notifications/notification/index.js b/src/controllers/dashboard/notifications/notification/index.js index 2ab3720ccb..eda0004420 100644 --- a/src/controllers/dashboard/notifications/notification/index.js +++ b/src/controllers/dashboard/notifications/notification/index.js @@ -1,5 +1,6 @@ -import $ from 'jQuery'; -import 'emby-checkbox'; +import 'jquery'; +import '../../../../elements/emby-checkbox/emby-checkbox'; +import Dashboard from '../../../../scripts/clientUtils'; function fillItems(elem, items, cssClass, idPrefix, currentList, isEnabledList) { let html = '
'; diff --git a/src/controllers/dashboard/notifications/notifications/index.js b/src/controllers/dashboard/notifications/notifications/index.js index b97403f8eb..1e0575df88 100644 --- a/src/controllers/dashboard/notifications/notifications/index.js +++ b/src/controllers/dashboard/notifications/notifications/index.js @@ -1,7 +1,7 @@ -import loading from 'loading'; -import globalize from 'globalize'; -import 'listViewStyle'; -import 'emby-button'; +import loading from '../../../../components/loading/loading'; +import globalize from '../../../../scripts/globalize'; +import '../../../../components/listview/listview.css'; +import '../../../../elements/emby-button/emby-button'; function reload(page) { loading.show(); diff --git a/src/controllers/dashboard/playback.js b/src/controllers/dashboard/playback.js index 101c3ac0a2..b02090cd33 100644 --- a/src/controllers/dashboard/playback.js +++ b/src/controllers/dashboard/playback.js @@ -1,7 +1,8 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import globalize from 'globalize'; +import 'jquery'; +import loading from '../../components/loading/loading'; +import libraryMenu from '../../scripts/libraryMenu'; +import globalize from '../../scripts/globalize'; +import Dashboard from '../../scripts/clientUtils'; /* eslint-disable indent */ diff --git a/src/controllers/dashboard/plugins/add/index.js b/src/controllers/dashboard/plugins/add/index.js index 5cc1dd3215..7560495345 100644 --- a/src/controllers/dashboard/plugins/add/index.js +++ b/src/controllers/dashboard/plugins/add/index.js @@ -1,7 +1,10 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import globalize from 'globalize'; -import 'emby-button'; +import 'jquery'; +import loading from '../../../../components/loading/loading'; +import globalize from '../../../../scripts/globalize'; +import '../../../../elements/emby-button/emby-button'; +import Dashboard from '../../../../scripts/clientUtils'; +import alert from '../../../../components/alert'; +import confirm from '../../../../components/confirm/confirm'; function populateHistory(packageInfo, page) { let html = ''; @@ -68,9 +71,7 @@ function renderPackage(pkg, installedPlugins, page) { } function alertText(options) { - import('alert').then(({default: alert}) => { - alert(options); - }); + alert(options); } function performInstallation(page, name, guid, version) { @@ -94,12 +95,10 @@ function performInstallation(page, name, guid, version) { msg += '
'; msg += globalize.translate('PleaseConfirmPluginInstallation'); - import('confirm').then(({default: confirm}) => { - confirm(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () { - alertCallback(); - }).catch(() => { - console.debug('plugin not installed'); - }); + confirm(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () { + alertCallback(); + }).catch(() => { + console.debug('plugin not installed'); }); } else { alertCallback(); diff --git a/src/controllers/dashboard/plugins/available/index.js b/src/controllers/dashboard/plugins/available/index.js index b7c3505aa1..7dc4a9e42d 100644 --- a/src/controllers/dashboard/plugins/available/index.js +++ b/src/controllers/dashboard/plugins/available/index.js @@ -1,10 +1,10 @@ -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import globalize from 'globalize'; -import 'cardStyle'; -import 'emby-button'; -import 'emby-checkbox'; -import 'emby-select'; +import loading from '../../../../components/loading/loading'; +import libraryMenu from '../../../../scripts/libraryMenu'; +import globalize from '../../../../scripts/globalize'; +import '../../../../components/cardbuilder/card.css'; +import '../../../../elements/emby-button/emby-button'; +import '../../../../elements/emby-checkbox/emby-checkbox'; +import '../../../../elements/emby-select/emby-select'; function reloadList(page) { loading.show(); diff --git a/src/controllers/dashboard/plugins/installed/index.js b/src/controllers/dashboard/plugins/installed/index.js index cdf21d6a3c..226ae0defe 100644 --- a/src/controllers/dashboard/plugins/installed/index.js +++ b/src/controllers/dashboard/plugins/installed/index.js @@ -1,24 +1,24 @@ -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import dom from 'dom'; -import globalize from 'globalize'; -import 'cardStyle'; -import 'emby-button'; +import loading from '../../../../components/loading/loading'; +import libraryMenu from '../../../../scripts/libraryMenu'; +import dom from '../../../../scripts/dom'; +import globalize from '../../../../scripts/globalize'; +import '../../../../components/cardbuilder/card.css'; +import '../../../../elements/emby-button/emby-button'; +import Dashboard, { pageIdOn } from '../../../../scripts/clientUtils'; +import confirm from '../../../../components/confirm/confirm'; function deletePlugin(page, uniqueid, name) { const msg = globalize.translate('UninstallPluginConfirmation', name); - import('confirm').then(({default: confirm}) => { - confirm.default({ - title: globalize.translate('HeaderUninstallPlugin'), - text: msg, - primary: 'delete', - confirmText: globalize.translate('HeaderUninstallPlugin') - }).then(function () { - loading.show(); - ApiClient.uninstallPlugin(uniqueid).then(function () { - reloadList(page); - }); + confirm({ + title: globalize.translate('HeaderUninstallPlugin'), + text: msg, + primary: 'delete', + confirmText: globalize.translate('HeaderUninstallPlugin') + }).then(function () { + loading.show(); + ApiClient.uninstallPlugin(uniqueid).then(function () { + reloadList(page); }); }); } @@ -132,7 +132,7 @@ function showPluginMenu(page, elem) { }); } - import('actionsheet').then(({default: actionsheet}) => { + import('../../../../components/actionSheet/actionSheet').then((actionsheet) => { actionsheet.show({ items: menuItems, positionTo: elem, diff --git a/src/controllers/dashboard/plugins/repositories/index.js b/src/controllers/dashboard/plugins/repositories/index.js index 3abee6c90f..08a411545c 100644 --- a/src/controllers/dashboard/plugins/repositories/index.js +++ b/src/controllers/dashboard/plugins/repositories/index.js @@ -1,12 +1,12 @@ -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import globalize from 'globalize'; -import dialogHelper from 'dialogHelper'; -import 'emby-button'; -import 'emby-checkbox'; -import 'emby-select'; -import 'formDialogStyle'; -import 'listViewStyle'; +import loading from '../../../../components/loading/loading'; +import libraryMenu from '../../../../scripts/libraryMenu'; +import globalize from '../../../../scripts/globalize'; +import dialogHelper from '../../../../components/dialogHelper/dialogHelper'; +import '../../../../elements/emby-button/emby-button'; +import '../../../../elements/emby-checkbox/emby-checkbox'; +import '../../../../elements/emby-select/emby-select'; +import '../../../../components/formdialog.css'; +import '../../../../components/listview/listview.css'; let repositories = []; diff --git a/src/controllers/dashboard/quickConnect.js b/src/controllers/dashboard/quickConnect.js index f5eae7b787..0967ed8035 100644 --- a/src/controllers/dashboard/quickConnect.js +++ b/src/controllers/dashboard/quickConnect.js @@ -1,6 +1,6 @@ -import loading from 'loading'; -import toast from 'toast'; -import globalize from 'globalize'; +import loading from '../../components/loading/loading'; +import toast from '../../components/toast/toast'; +import globalize from '../../scripts/globalize'; const unavailable = 'Unavailable'; const available = 'Available'; diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtask.js b/src/controllers/dashboard/scheduledtasks/scheduledtask.js index 64c09c6d81..cd2f7a07ff 100644 --- a/src/controllers/dashboard/scheduledtasks/scheduledtask.js +++ b/src/controllers/dashboard/scheduledtasks/scheduledtask.js @@ -1,11 +1,12 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import datetime from 'datetime'; -import dom from 'dom'; -import globalize from 'globalize'; -import 'emby-input'; -import 'emby-button'; -import 'emby-select'; +import 'jquery'; +import loading from '../../../components/loading/loading'; +import datetime from '../../../scripts/datetime'; +import dom from '../../../scripts/dom'; +import globalize from '../../../scripts/globalize'; +import '../../../elements/emby-input/emby-input'; +import '../../../elements/emby-button/emby-button'; +import '../../../elements/emby-select/emby-select'; +import confirm from '../../../components/confirm/confirm'; /* eslint-disable indent */ @@ -42,7 +43,7 @@ import 'emby-select'; $('.taskName', view).html(task.Name); $('#pTaskDescription', view).html(task.Description); - import('listViewStyle').then(() => { + import('../../../components/listview/listview.css').then(() => { ScheduledTaskPage.loadTaskTriggers(view, task); }); @@ -135,10 +136,8 @@ import 'emby-select'; $('#popupAddTrigger', view).removeClass('hide'); }, confirmDeleteTrigger: function (view, index) { - import('confirm').then(({default: confirm}) => { - confirm(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () { - ScheduledTaskPage.deleteTrigger(view, index); - }); + confirm(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () { + ScheduledTaskPage.deleteTrigger(view, index); }); }, deleteTrigger: function (view, index) { diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js index 81a34d4fa6..498819da68 100644 --- a/src/controllers/dashboard/scheduledtasks/scheduledtasks.js +++ b/src/controllers/dashboard/scheduledtasks/scheduledtasks.js @@ -1,12 +1,12 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import events from 'events'; -import globalize from 'globalize'; -import serverNotifications from 'serverNotifications'; -import * as datefns from 'date-fns'; -import dfnshelper from 'dfnshelper'; -import 'listViewStyle'; -import 'emby-button'; +import 'jquery'; +import loading from '../../../components/loading/loading'; +import { Events } from 'jellyfin-apiclient'; +import globalize from '../../../scripts/globalize'; +import serverNotifications from '../../../scripts/serverNotifications'; +import { formatDistance, formatDistanceToNow } from 'date-fns'; +import { getLocale, localeWithSuffix } from '../../../scripts/dfnshelper'; +import '../../../components/listview/listview.css'; +import '../../../elements/emby-button/emby-button'; /* eslint-disable indent */ @@ -77,8 +77,8 @@ import 'emby-button'; if (task.LastExecutionResult) { const endtime = Date.parse(task.LastExecutionResult.EndTimeUtc); const starttime = Date.parse(task.LastExecutionResult.StartTimeUtc); - html += globalize.translate('LabelScheduledTaskLastRan', datefns.formatDistanceToNow(endtime, dfnshelper.localeWithSuffix), - datefns.formatDistance(starttime, endtime, { locale: dfnshelper.getLocale() })); + html += globalize.translate('LabelScheduledTaskLastRan', formatDistanceToNow(endtime, localeWithSuffix), + formatDistance(starttime, endtime, { locale: getLocale() })); if (task.LastExecutionResult.Status === 'Failed') { html += " (" + globalize.translate('LabelFailed') + ')'; } else if (task.LastExecutionResult.Status === 'Cancelled') { @@ -177,7 +177,7 @@ import 'emby-button'; }); view.addEventListener('viewbeforehide', function() { - events.off(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate); + Events.off(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate); stopInterval(); }); @@ -185,7 +185,7 @@ import 'emby-button'; loading.show(); startInterval(); reloadList(view); - events.on(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate); + Events.on(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate); }); } diff --git a/src/controllers/dashboard/serveractivity.js b/src/controllers/dashboard/serveractivity.js index ed56126267..1f44b9eefb 100644 --- a/src/controllers/dashboard/serveractivity.js +++ b/src/controllers/dashboard/serveractivity.js @@ -1,5 +1,5 @@ -import ActivityLog from 'components/activitylog'; -import globalize from 'globalize'; +import ActivityLog from '../../components/activitylog'; +import globalize from '../../scripts/globalize'; /* eslint-disable indent */ diff --git a/src/controllers/dashboard/streaming.js b/src/controllers/dashboard/streaming.js index 5db888dfc1..5f504d9535 100644 --- a/src/controllers/dashboard/streaming.js +++ b/src/controllers/dashboard/streaming.js @@ -1,7 +1,8 @@ -import $ from 'jQuery'; -import libraryMenu from 'libraryMenu'; -import loading from 'loading'; -import globalize from 'globalize'; +import 'jquery'; +import libraryMenu from '../../scripts/libraryMenu'; +import loading from '../../components/loading/loading'; +import globalize from '../../scripts/globalize'; +import Dashboard from '../../scripts/clientUtils'; /* eslint-disable indent */ diff --git a/src/controllers/dashboard/users/useredit.js b/src/controllers/dashboard/users/useredit.js index 3d6e7d8bd9..17e401d5dc 100644 --- a/src/controllers/dashboard/users/useredit.js +++ b/src/controllers/dashboard/users/useredit.js @@ -1,7 +1,9 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import globalize from 'globalize'; +import 'jquery'; +import loading from '../../../components/loading/loading'; +import libraryMenu from '../../../scripts/libraryMenu'; +import globalize from '../../../scripts/globalize'; +import Dashboard from '../../../scripts/clientUtils'; +import toast from '../../../components/toast/toast'; /* eslint-disable indent */ @@ -109,10 +111,7 @@ import globalize from 'globalize'; function onSaveComplete(page, user) { Dashboard.navigate('userprofiles.html'); loading.hide(); - - import('toast').then(({default: toast}) => { - toast(globalize.translate('SettingsSaved')); - }); + toast(globalize.translate('SettingsSaved')); } function saveUser(user, page) { diff --git a/src/controllers/dashboard/users/userlibraryaccess.js b/src/controllers/dashboard/users/userlibraryaccess.js index d840092c45..d3407de5b6 100644 --- a/src/controllers/dashboard/users/userlibraryaccess.js +++ b/src/controllers/dashboard/users/userlibraryaccess.js @@ -1,7 +1,9 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import globalize from 'globalize'; +import 'jquery'; +import loading from '../../../components/loading/loading'; +import libraryMenu from '../../../scripts/libraryMenu'; +import globalize from '../../../scripts/globalize'; +import Dashboard from '../../../scripts/clientUtils'; +import toast from '../../../components/toast/toast'; /* eslint-disable indent */ @@ -91,10 +93,7 @@ import globalize from 'globalize'; function onSaveComplete(page) { loading.hide(); - - import('toast').then(({default: toast}) => { - toast(globalize.translate('SettingsSaved')); - }); + toast(globalize.translate('SettingsSaved')); } function saveUser(user, page) { diff --git a/src/controllers/dashboard/users/usernew.js b/src/controllers/dashboard/users/usernew.js index 68b6365c02..95138a5125 100644 --- a/src/controllers/dashboard/users/usernew.js +++ b/src/controllers/dashboard/users/usernew.js @@ -1,7 +1,9 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import globalize from 'globalize'; -import 'emby-checkbox'; +import 'jquery'; +import loading from '../../../components/loading/loading'; +import globalize from '../../../scripts/globalize'; +import '../../../elements/emby-checkbox/emby-checkbox'; +import Dashboard from '../../../scripts/clientUtils'; +import toast from '../../../components/toast/toast'; /* eslint-disable indent */ @@ -88,10 +90,7 @@ import 'emby-checkbox'; Dashboard.navigate('useredit.html?userId=' + user.Id); }); }, function (response) { - import('toast').then(({default: toast}) => { - toast(globalize.translate('ErrorDefault')); - }); - + toast(globalize.translate('ErrorDefault')); loading.hide(); }); } diff --git a/src/controllers/dashboard/users/userparentalcontrol.js b/src/controllers/dashboard/users/userparentalcontrol.js index efe00aec0b..282037c21f 100644 --- a/src/controllers/dashboard/users/userparentalcontrol.js +++ b/src/controllers/dashboard/users/userparentalcontrol.js @@ -1,10 +1,11 @@ -import $ from 'jQuery'; -import datetime from 'datetime'; -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import globalize from 'globalize'; -import 'listViewStyle'; -import 'paper-icon-button-light'; +import 'jquery'; +import datetime from '../../../scripts/datetime'; +import loading from '../../../components/loading/loading'; +import libraryMenu from '../../../scripts/libraryMenu'; +import globalize from '../../../scripts/globalize'; +import '../../../components/listview/listview.css'; +import '../../../elements/emby-button/paper-icon-button-light'; +import toast from '../../../components/toast/toast'; /* eslint-disable indent */ @@ -162,10 +163,7 @@ import 'paper-icon-button-light'; function onSaveComplete(page) { loading.hide(); - - import('toast').then(({default: toast}) => { - toast(globalize.translate('SettingsSaved')); - }); + toast(globalize.translate('SettingsSaved')); } function saveUser(user, page) { @@ -195,7 +193,7 @@ import 'paper-icon-button-light'; function showSchedulePopup(page, schedule, index) { schedule = schedule || {}; - import('components/accessSchedule/accessSchedule').then(({default: accessschedule}) => { + import('../../../components/accessSchedule/accessSchedule').then(({default: accessschedule}) => { accessschedule.show({ schedule: schedule }).then(function (updatedSchedule) { @@ -228,7 +226,7 @@ import 'paper-icon-button-light'; } function showBlockedTagPopup(page) { - import('prompt').then(({default: prompt}) => { + import('../../../components/prompt/prompt').then(({default: prompt}) => { prompt({ label: globalize.translate('LabelTag') }).then(function (value) { diff --git a/src/controllers/dashboard/users/userpasswordpage.js b/src/controllers/dashboard/users/userpasswordpage.js index 880dccf9ff..ab76ce474f 100644 --- a/src/controllers/dashboard/users/userpasswordpage.js +++ b/src/controllers/dashboard/users/userpasswordpage.js @@ -1,7 +1,10 @@ -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import globalize from 'globalize'; -import 'emby-button'; +import loading from '../../../components/loading/loading'; +import libraryMenu from '../../../scripts/libraryMenu'; +import globalize from '../../../scripts/globalize'; +import '../../../elements/emby-button/emby-button'; +import Dashboard from '../../../scripts/clientUtils'; +import toast from '../../../components/toast/toast'; +import confirm from '../../../components/confirm/confirm'; /* eslint-disable indent */ @@ -52,7 +55,7 @@ import 'emby-button'; page.querySelector('.chkEnableLocalEasyPassword').checked = user.Configuration.EnableLocalPassword; - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); @@ -81,10 +84,7 @@ import 'emby-button'; user.Configuration.EnableLocalPassword = view.querySelector('.chkEnableLocalEasyPassword').checked; ApiClient.updateUserConfiguration(user.Id, user.Configuration).then(function () { loading.hide(); - - import('toast').then(({default: toast}) => { - toast(globalize.translate('SettingsSaved')); - }); + toast(globalize.translate('SettingsSaved')); loadUser(view, params); }); @@ -104,10 +104,7 @@ import 'emby-button'; ApiClient.updateUserPassword(userId, currentPassword, newPassword).then(function () { loading.hide(); - - import('toast').then(({default: toast}) => { - toast(globalize.translate('PasswordSaved')); - }); + toast(globalize.translate('PasswordSaved')); loadUser(view, params); }, function () { @@ -123,9 +120,7 @@ import 'emby-button'; const form = this; if (form.querySelector('#txtNewPassword').value != form.querySelector('#txtNewPasswordConfirm').value) { - import('toast').then(({default: toast}) => { - toast(globalize.translate('PasswordMatchError')); - }); + toast(globalize.translate('PasswordMatchError')); } else { loading.show(); savePassword(); @@ -144,18 +139,16 @@ import 'emby-button'; function resetPassword() { const msg = globalize.translate('PasswordResetConfirmation'); - import('confirm').then(({default: confirm}) => { - confirm(msg, globalize.translate('ResetPassword')).then(function () { - const userId = params.userId; - loading.show(); - ApiClient.resetUserPassword(userId).then(function () { - loading.hide(); - Dashboard.alert({ - message: globalize.translate('PasswordResetComplete'), - title: globalize.translate('ResetPassword') - }); - loadUser(view, params); + confirm(msg, globalize.translate('ResetPassword')).then(function () { + const userId = params.userId; + loading.show(); + ApiClient.resetUserPassword(userId).then(function () { + loading.hide(); + Dashboard.alert({ + message: globalize.translate('PasswordResetComplete'), + title: globalize.translate('ResetPassword') }); + loadUser(view, params); }); }); } @@ -163,18 +156,16 @@ import 'emby-button'; function resetEasyPassword() { const msg = globalize.translate('PinCodeResetConfirmation'); - import('confirm').then(({default: confirm}) => { - confirm(msg, globalize.translate('HeaderPinCodeReset')).then(function () { - const userId = params.userId; - loading.show(); - ApiClient.resetEasyPassword(userId).then(function () { - loading.hide(); - Dashboard.alert({ - message: globalize.translate('PinCodeResetComplete'), - title: globalize.translate('HeaderPinCodeReset') - }); - loadUser(view, params); + confirm(msg, globalize.translate('HeaderPinCodeReset')).then(function () { + const userId = params.userId; + loading.show(); + ApiClient.resetEasyPassword(userId).then(function () { + loading.hide(); + Dashboard.alert({ + message: globalize.translate('PinCodeResetComplete'), + title: globalize.translate('HeaderPinCodeReset') }); + loadUser(view, params); }); }); } diff --git a/src/controllers/dashboard/users/userprofilespage.js b/src/controllers/dashboard/users/userprofilespage.js index bfd8d96d92..a88393d731 100644 --- a/src/controllers/dashboard/users/userprofilespage.js +++ b/src/controllers/dashboard/users/userprofilespage.js @@ -1,30 +1,30 @@ -import loading from 'loading'; -import dom from 'dom'; -import globalize from 'globalize'; -import * as datefns from 'date-fns'; -import dfnshelper from 'dfnshelper'; -import 'paper-icon-button-light'; -import 'cardStyle'; -import 'emby-button'; -import 'indicators'; -import 'flexStyles'; +import loading from '../../../components/loading/loading'; +import dom from '../../../scripts/dom'; +import globalize from '../../../scripts/globalize'; +import { formatDistanceToNow } from 'date-fns'; +import { localeWithSuffix } from '../../../scripts/dfnshelper'; +import '../../../elements/emby-button/paper-icon-button-light'; +import '../../../components/cardbuilder/card.css'; +import '../../../elements/emby-button/emby-button'; +import '../../../components/indicators/indicators.css'; +import '../../../assets/css/flexstyles.scss'; +import Dashboard, { pageIdOn } from '../../../scripts/clientUtils'; +import confirm from '../../../components/confirm/confirm'; /* eslint-disable indent */ function deleteUser(page, id) { const msg = globalize.translate('DeleteUserConfirmation'); - import('confirm').then(({default: confirm}) => { - confirm({ - title: globalize.translate('DeleteUser'), - text: msg, - confirmText: globalize.translate('Delete'), - primary: 'delete' - }).then(function () { - loading.show(); - ApiClient.deleteUser(id).then(function () { - loadData(page); - }); + confirm({ + title: globalize.translate('DeleteUser'), + text: msg, + confirmText: globalize.translate('Delete'), + primary: 'delete' + }).then(function () { + loading.show(); + ApiClient.deleteUser(id).then(function () { + loadData(page); }); }); } @@ -55,7 +55,7 @@ import 'flexStyles'; icon: 'delete' }); - import('actionsheet').then(({default: actionsheet}) => { + import('../../../components/actionSheet/actionSheet').then(({default: actionsheet}) => { actionsheet.show({ items: menuItems, positionTo: card, @@ -139,7 +139,7 @@ import 'flexStyles'; // how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences function getLastSeenText(lastActivityDate) { if (lastActivityDate) { - return globalize.translate('LastSeen', datefns.formatDistanceToNow(Date.parse(lastActivityDate), dfnshelper.localeWithSuffix)); + return globalize.translate('LastSeen', formatDistanceToNow(Date.parse(lastActivityDate), localeWithSuffix)); } return ''; diff --git a/src/controllers/edititemmetadata.js b/src/controllers/edititemmetadata.js index dd51ba2581..a371e6161a 100644 --- a/src/controllers/edititemmetadata.js +++ b/src/controllers/edititemmetadata.js @@ -1,11 +1,11 @@ -import loading from 'loading'; -import 'scripts/editorsidebar'; +import loading from '../components/loading/loading'; +import '../scripts/editorsidebar'; function reload(context, itemId) { loading.show(); if (itemId) { - import('metadataEditor').then(({ default: metadataEditor }) => { + import('../components/metadataEditor/metadataEditor').then(({ default: metadataEditor }) => { metadataEditor.embed(context.querySelector('.editPageInnerContent'), itemId, ApiClient.serverInfo().Id); }); } else { diff --git a/src/controllers/favorites.js b/src/controllers/favorites.js index fc37f4eef4..05a313c6ad 100644 --- a/src/controllers/favorites.js +++ b/src/controllers/favorites.js @@ -1,12 +1,13 @@ -import appRouter from 'appRouter'; -import cardBuilder from 'cardBuilder'; -import dom from 'dom'; -import globalize from 'globalize'; -import appHost from 'apphost'; -import layoutManager from 'layoutManager'; -import focusManager from 'focusManager'; -import 'emby-itemscontainer'; -import 'emby-scroller'; +import { appRouter } from '../components/appRouter'; +import cardBuilder from '../components/cardbuilder/cardBuilder'; +import dom from '../scripts/dom'; +import globalize from '../scripts/globalize'; +import { appHost } from '../components/apphost'; +import layoutManager from '../components/layoutManager'; +import focusManager from '../components/focusManager'; +import '../elements/emby-itemscontainer/emby-itemscontainer'; +import '../elements/emby-scroller/emby-scroller'; +import ServerConnections from '../components/ServerConnections'; /* eslint-disable indent */ @@ -269,7 +270,7 @@ class FavoritesTab { constructor(view, params) { this.view = view; this.params = params; - this.apiClient = window.connectionManager.currentApiClient(); + this.apiClient = ServerConnections.currentApiClient(); this.sectionsContainer = view.querySelector('.sections'); createSections(this, this.sectionsContainer, this.apiClient); } diff --git a/src/controllers/home.js b/src/controllers/home.js index 72e326e46b..4ebaa62add 100644 --- a/src/controllers/home.js +++ b/src/controllers/home.js @@ -1,8 +1,9 @@ -import TabbedView from 'tabbedView'; -import globalize from 'globalize'; -import 'emby-tabs'; -import 'emby-button'; -import 'emby-scroller'; +import TabbedView from '../components/tabbedview/tabbedview'; +import globalize from '../scripts/globalize'; +import '../elements/emby-tabs/emby-tabs'; +import '../elements/emby-button/emby-button'; +import '../elements/emby-scroller/emby-scroller'; +import { appRouter } from '../components/appRouter'; class HomeView extends TabbedView { constructor(view, params) { @@ -10,7 +11,7 @@ class HomeView extends TabbedView { } setTitle() { - Emby.Page.setTitle(null); + appRouter.setTitle(null); } onPause() { @@ -44,15 +45,15 @@ class HomeView extends TabbedView { switch (index) { case 0: - depends = 'controllers/hometab'; + depends = 'hometab'; break; case 1: - depends = 'controllers/favorites'; + depends = 'favorites'; } const instance = this; - return import(depends).then(({ default: controllerFactory }) => { + return import(/* webpackChunkName: "[request]" */ `../controllers/${depends}`).then(({ default: controllerFactory }) => { let controller = instance.tabControllers[index]; if (!controller) { diff --git a/src/controllers/hometab.js b/src/controllers/hometab.js index ff56e08d14..feb31fedc3 100644 --- a/src/controllers/hometab.js +++ b/src/controllers/hometab.js @@ -1,14 +1,15 @@ -import * as userSettings from 'userSettings'; -import loading from 'loading'; -import focusManager from 'focusManager'; -import homeSections from 'homeSections'; -import 'emby-itemscontainer'; +import * as userSettings from '../scripts/settings/userSettings'; +import loading from '../components/loading/loading'; +import focusManager from '../components/focusManager'; +import homeSections from '../components/homesections/homesections'; +import '../elements/emby-itemscontainer/emby-itemscontainer'; +import ServerConnections from '../components/ServerConnections'; class HomeTab { constructor(view, params) { this.view = view; this.params = params; - this.apiClient = window.connectionManager.currentApiClient(); + this.apiClient = ServerConnections.currentApiClient(); this.sectionsContainer = view.querySelector('.sections'); view.querySelector('.sections').addEventListener('settingschange', onHomeScreenSettingsChanged.bind(this)); } diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index c68fe15feb..bcf681b50a 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -1,32 +1,36 @@ -import appHost from 'apphost'; -import loading from 'loading'; -import appRouter from 'appRouter'; -import itemShortcuts from 'itemShortcuts'; -import layoutManager from 'layoutManager'; -import * as userSettings from 'userSettings'; -import cardBuilder from 'cardBuilder'; -import datetime from 'datetime'; -import mediaInfo from 'mediaInfo'; -import backdrop from 'backdrop'; -import listView from 'listView'; -import itemContextMenu from 'itemContextMenu'; -import itemHelper from 'itemHelper'; -import dom from 'dom'; -import indicators from 'indicators'; -import imageLoader from 'imageLoader'; -import libraryMenu from 'libraryMenu'; -import globalize from 'globalize'; -import browser from 'browser'; -import events from 'events'; -import playbackManager from 'playbackManager'; -import 'scrollStyles'; -import 'emby-itemscontainer'; -import 'emby-checkbox'; -import 'emby-button'; -import 'emby-playstatebutton'; -import 'emby-ratingbutton'; -import 'emby-scroller'; -import 'emby-select'; +import { appHost } from '../../components/apphost'; +import loading from '../../components/loading/loading'; +import { appRouter } from '../../components/appRouter'; +import layoutManager from '../../components/layoutManager'; +import { Events } from 'jellyfin-apiclient'; +import * as userSettings from '../../scripts/settings/userSettings'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import datetime from '../../scripts/datetime'; +import mediaInfo from '../../components/mediainfo/mediainfo'; +import backdrop from '../../components/backdrop/backdrop'; +import listView from '../../components/listview/listview'; +import itemContextMenu from '../../components/itemContextMenu'; +import itemHelper from '../../components/itemHelper'; +import dom from '../../scripts/dom'; +import indicators from '../../components/indicators/indicators'; +import imageLoader from '../../components/images/imageLoader'; +import libraryMenu from '../../scripts/libraryMenu'; +import globalize from '../../scripts/globalize'; +import browser from '../../scripts/browser'; +import { playbackManager } from '../../components/playback/playbackmanager'; +import '../../assets/css/scrollstyles.css'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import '../../elements/emby-checkbox/emby-checkbox'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-playstatebutton/emby-playstatebutton'; +import '../../elements/emby-ratingbutton/emby-ratingbutton'; +import '../../elements/emby-scroller/emby-scroller'; +import '../../elements/emby-select/emby-select'; +import itemShortcuts from '../../components/shortcuts'; +import Dashboard from '../../scripts/clientUtils'; +import ServerConnections from '../../components/ServerConnections'; +import confirm from '../../components/confirm/confirm'; +import { download } from '../../scripts/fileDownloader'; function getPromise(apiClient, params) { const id = params.id; @@ -140,7 +144,7 @@ function renderSeriesTimerEditor(page, item, apiClient, user) { } if (user.Policy.EnableLiveTvManagement) { - import('seriesRecordingEditor').then(({ default: seriesRecordingEditor }) => { + import('../../components/recordingcreator/seriesrecordingeditor').then(({ default: seriesRecordingEditor }) => { seriesRecordingEditor.embed(item, apiClient.serverId(), { context: page.querySelector('.seriesRecordingEditor') }); @@ -563,9 +567,9 @@ function renderDetailPageBackdrop(page, item, apiClient) { } function reloadFromItem(instance, page, params, item, user) { - const apiClient = window.connectionManager.getApiClient(item.ServerId); + const apiClient = ServerConnections.getApiClient(item.ServerId); - Emby.Page.setTitle(''); + appRouter.setTitle(''); // Start rendering the artwork first renderImage(page, item); @@ -649,7 +653,10 @@ function reloadFromItem(instance, page, params, item, user) { const itemBirthLocation = page.querySelector('#itemBirthLocation'); if (item.Type == 'Person' && item.ProductionLocations && item.ProductionLocations.length) { - const gmap = '' + item.ProductionLocations[0] + ''; + let gmap = item.ProductionLocations[0]; + if (!layoutManager.tv && appHost.supports('externallinks')) { + gmap = `${gmap}`; + } itemBirthLocation.classList.remove('hide'); itemBirthLocation.innerHTML = globalize.translate('BirthPlaceValue', gmap); } else { @@ -663,7 +670,7 @@ function reloadFromItem(instance, page, params, item, user) { hideAll(page, 'btnDownload', true); } - import('autoFocuser').then(({ default: autoFocuser }) => { + import('../../components/autoFocuser').then(({ default: autoFocuser }) => { autoFocuser.autoFocus(page); }); } @@ -705,7 +712,7 @@ function showRecordingFields(instance, page, item, user) { const recordingFieldsElement = page.querySelector('.recordingFields'); if (item.Type == 'Program' && user.Policy.EnableLiveTvManagement) { - import('recordingFields').then(({ default: recordingFields }) => { + import('../../components/recordingcreator/recordingfields').then(({ default: recordingFields }) => { instance.currentRecordingFields = new recordingFields({ parent: recordingFieldsElement, programId: item.Id, @@ -780,7 +787,11 @@ function renderImage(page, item) { } function refreshDetailImageUserData(elem, item) { - elem.querySelector('.detailImageProgressContainer').innerHTML = indicators.getProgressBarHtml(item); + const container = elem.querySelector('.detailImageProgressContainer'); + + if (container) { + container.innerHTML = indicators.getProgressBarHtml(item); + } } function refreshImage(page, item) { @@ -802,7 +813,7 @@ function renderNextUp(page, item, user) { return void section.classList.add('hide'); } - window.connectionManager.getApiClient(item.ServerId).getNextUpEpisodes({ + ServerConnections.getApiClient(item.ServerId).getNextUpEpisodes({ SeriesId: item.Id, UserId: user.Id }).then(function (result) { @@ -1066,7 +1077,7 @@ function renderDetails(page, item, apiClient, context, isStatic) { reloadUserDataButtons(page, item); // Don't allow redirection to other websites from the TV layout - if (!layoutManager.tv) { + if (!layoutManager.tv && appHost.supports('externallinks')) { renderLinks(page, item); } @@ -1206,7 +1217,7 @@ function renderSimilarItems(page, item, context) { } similarCollapsible.classList.remove('hide'); - const apiClient = window.connectionManager.getApiClient(item.ServerId); + const apiClient = ServerConnections.getApiClient(item.ServerId); const options = { userId: apiClient.getCurrentUserId(), limit: 12, @@ -1320,7 +1331,7 @@ function renderChildren(page, item) { } let promise; - const apiClient = window.connectionManager.getApiClient(item.ServerId); + const apiClient = ServerConnections.getApiClient(item.ServerId); const userId = apiClient.getCurrentUserId(); if (item.Type == 'Series') { @@ -1482,13 +1493,13 @@ function renderChildren(page, item) { } function renderItemsByName(page, item) { - import('scripts/itembynamedetailpage').then(() => { + import('../../scripts/itembynamedetailpage').then(() => { window.ItemsByName.renderItems(page, item); }); } function renderPlaylistItems(page, item) { - import('scripts/playlistedit').then(() => { + import('../../scripts/playlistedit').then(() => { PlaylistViewer.render(page, item); }); } @@ -1568,7 +1579,7 @@ function renderChannelGuide(page, apiClient, item) { } function renderSeriesSchedule(page, item) { - const apiClient = window.connectionManager.getApiClient(item.ServerId); + const apiClient = ServerConnections.getApiClient(item.ServerId); apiClient.getLiveTvPrograms({ UserId: apiClient.getCurrentUserId(), HasAired: false, @@ -1692,7 +1703,7 @@ function renderCollectionItems(page, parentItem, types, items) { // HACK: Call autoFocuser again because btnPlay may be hidden, but focused by reloadFromItem // FIXME: Sometimes focus does not move until all (?) sections are loaded - import('autoFocuser').then(({ default: autoFocuser }) => { + import('../../components/autoFocuser').then(({ default: autoFocuser }) => { autoFocuser.autoFocus(page); }); } @@ -1724,11 +1735,11 @@ function renderCollectionItemType(page, parentItem, type, items) { html += '
'; const collectionItems = page.querySelector('.collectionItems'); collectionItems.insertAdjacentHTML('beforeend', html); - imageLoader.lazyChildren(collectionItems); + imageLoader.lazyChildren(collectionItems.lastChild); } function renderMusicVideos(page, item, user) { - window.connectionManager.getApiClient(item.ServerId).getItems(user.Id, { + ServerConnections.getApiClient(item.ServerId).getItems(user.Id, { SortBy: 'SortName', SortOrder: 'Ascending', IncludeItemTypes: 'MusicVideo', @@ -1748,7 +1759,7 @@ function renderMusicVideos(page, item, user) { } function renderAdditionalParts(page, item, user) { - window.connectionManager.getApiClient(item.ServerId).getAdditionalVideoParts(user.Id, item.Id).then(function (result) { + ServerConnections.getApiClient(item.ServerId).getAdditionalVideoParts(user.Id, item.Id).then(function (result) { if (result.Items.length) { page.querySelector('#additionalPartsCollapsible').classList.remove('hide'); const additionalPartsContent = page.querySelector('#additionalPartsContent'); @@ -1767,7 +1778,7 @@ function renderScenes(page, item) { page.querySelector('#scenesCollapsible').classList.remove('hide'); const scenesContent = page.querySelector('#scenesContent'); - import('chaptercardbuilder').then(({ default: chaptercardbuilder }) => { + import('../../components/cardbuilder/chaptercardbuilder').then(({ default: chaptercardbuilder }) => { chaptercardbuilder.buildChapterCards(item, chapters, { itemsContainer: scenesContent, backdropShape: 'overflowBackdrop', @@ -1793,7 +1804,7 @@ function getVideosHtml(items) { } function renderSpecials(page, item, user) { - window.connectionManager.getApiClient(item.ServerId).getSpecialFeatures(user.Id, item.Id).then(function (specials) { + ServerConnections.getApiClient(item.ServerId).getSpecialFeatures(user.Id, item.Id).then(function (specials) { const specialsContent = page.querySelector('#specialsContent'); specialsContent.innerHTML = getVideosHtml(specials); imageLoader.lazyChildren(specialsContent); @@ -1812,7 +1823,7 @@ function renderCast(page, item) { page.querySelector('#castCollapsible').classList.remove('hide'); const castContent = page.querySelector('#castContent'); - import('peoplecardbuilder').then(({ default: peoplecardbuilder }) => { + import('../../components/cardbuilder/peoplecardbuilder').then(({ default: peoplecardbuilder }) => { peoplecardbuilder.buildPeopleCards(people, { itemsContainer: castContent, coverImage: true, @@ -1846,10 +1857,14 @@ function onTrackSelectionsSubmit(e) { window.ItemDetailPage = new itemDetailPage(); export default function (view, params) { + function getApiClient() { + return params.serverId ? ServerConnections.getApiClient(params.serverId) : ApiClient; + } + function reload(instance, page, params) { loading.show(); - const apiClient = params.serverId ? window.connectionManager.getApiClient(params.serverId) : ApiClient; + const apiClient = getApiClient(); Promise.all([getPromise(apiClient, params), apiClient.getCurrentUser()]).then(([item, user]) => { currentItem = item; @@ -1860,16 +1875,14 @@ export default function (view, params) { } function splitVersions(instance, page, apiClient, params) { - import('confirm').then(({ default: confirm }) => { - confirm('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () { - loading.show(); - apiClient.ajax({ - type: 'DELETE', - url: apiClient.getUrl('Videos/' + params.id + '/AlternateSources') - }).then(function () { - loading.hide(); - reload(instance, page, params); - }); + confirm('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () { + loading.show(); + apiClient.ajax({ + type: 'DELETE', + url: apiClient.getUrl('Videos/' + params.id + '/AlternateSources') + }).then(function () { + loading.hide(); + reload(instance, page, params); }); }); } @@ -1898,7 +1911,7 @@ export default function (view, params) { const item = currentItem; if (item.Type === 'Program') { - const apiClient = window.connectionManager.getApiClient(item.ServerId); + const apiClient = ServerConnections.getApiClient(item.ServerId); return void apiClient.getLiveTvChannel(item.ChannelId, apiClient.getCurrentUserId()).then(function (channel) { playbackManager.play({ items: [channel] @@ -1926,7 +1939,7 @@ export default function (view, params) { } function onCancelSeriesTimerClick() { - import('recordingHelper').then(({ default: recordingHelper }) => { + import('../../components/recordingcreator/recordinghelper').then(({ default: recordingHelper }) => { recordingHelper.cancelSeriesTimerWithConfirmation(currentItem.Id, currentItem.ServerId).then(function () { Dashboard.navigate('livetv.html'); }); @@ -1934,8 +1947,8 @@ export default function (view, params) { } function onCancelTimerClick() { - import('recordingHelper').then(({ default: recordingHelper }) => { - recordingHelper.cancelTimer(window.connectionManager.getApiClient(currentItem.ServerId), currentItem.TimerId).then(function () { + import('../../components/recordingcreator/recordinghelper').then(({ default: recordingHelper }) => { + recordingHelper.cancelTimer(ServerConnections.getApiClient(currentItem.ServerId), currentItem.TimerId).then(function () { reload(self, view, params); }); }); @@ -1946,20 +1959,20 @@ export default function (view, params) { } function onDownloadClick() { - import('fileDownloader').then(({ default: fileDownloader }) => { - const downloadHref = apiClient.getItemDownloadUrl(currentItem.Id); - fileDownloader.download([{ - url: downloadHref, - itemId: currentItem.Id, - serverId: currentItem.serverId - }]); - }); + const downloadHref = getApiClient().getItemDownloadUrl(currentItem.Id); + download([{ + url: downloadHref, + itemId: currentItem.Id, + serverId: currentItem.serverId + }]); } function onMoreCommandsClick() { const button = this; let selectedItem = view.querySelector('.selectSource').value || currentItem.Id; + const apiClient = getApiClient(); + apiClient.getItem(apiClient.getCurrentUserId(), selectedItem).then(function (item) { selectedItem = item; @@ -1982,6 +1995,7 @@ export default function (view, params) { function onWebSocketMessage(e, data) { const msg = data; + const apiClient = getApiClient(); if (msg.MessageType === 'UserDataChanged' && currentItem && msg.Data.UserId == apiClient.getCurrentUserId()) { const key = currentItem.UserData.Key; @@ -1999,63 +2013,68 @@ export default function (view, params) { let currentItem; const self = this; - const apiClient = params.serverId ? window.connectionManager.getApiClient(params.serverId) : ApiClient; - const btnResume = view.querySelector('.mainDetailButtons .btnResume'); - const btnPlay = view.querySelector('.mainDetailButtons .btnPlay'); - if (layoutManager.tv && !btnResume.classList.contains('hide')) { - btnResume.classList.add('fab'); - btnResume.classList.add('detailFloatingButton'); - } else if (layoutManager.tv && btnResume.classList.contains('hide')) { - btnPlay.classList.add('fab'); - btnPlay.classList.add('detailFloatingButton'); - } + function init() { + const apiClient = getApiClient(); - view.querySelectorAll('.btnPlay'); - bindAll(view, '.btnPlay', 'click', onPlayClick); - bindAll(view, '.btnResume', 'click', onPlayClick); - bindAll(view, '.btnInstantMix', 'click', onInstantMixClick); - bindAll(view, '.btnShuffle', 'click', onShuffleClick); - bindAll(view, '.btnPlayTrailer', 'click', onPlayTrailerClick); - bindAll(view, '.btnCancelSeriesTimer', 'click', onCancelSeriesTimerClick); - bindAll(view, '.btnCancelTimer', 'click', onCancelTimerClick); - bindAll(view, '.btnDownload', 'click', onDownloadClick); - view.querySelector('.detailImageContainer').addEventListener('click', onPosterClick); - view.querySelector('.trackSelections').addEventListener('submit', onTrackSelectionsSubmit); - view.querySelector('.btnSplitVersions').addEventListener('click', function () { - splitVersions(self, view, apiClient, params); - }); - bindAll(view, '.btnMoreCommands', 'click', onMoreCommandsClick); - view.querySelector('.selectSource').addEventListener('change', function () { - renderVideoSelections(view, self._currentPlaybackMediaSources); - renderAudioSelections(view, self._currentPlaybackMediaSources); - renderSubtitleSelections(view, self._currentPlaybackMediaSources); - }); - view.addEventListener('viewshow', function (e) { - const page = this; - - libraryMenu.setTransparentMenu(true); - - if (e.detail.isRestored) { - if (currentItem) { - Emby.Page.setTitle(''); - renderTrackSelections(page, self, currentItem, true); - } - } else { - reload(self, page, params); + const btnResume = view.querySelector('.mainDetailButtons .btnResume'); + const btnPlay = view.querySelector('.mainDetailButtons .btnPlay'); + if (layoutManager.tv && !btnResume.classList.contains('hide')) { + btnResume.classList.add('fab'); + btnResume.classList.add('detailFloatingButton'); + } else if (layoutManager.tv && btnResume.classList.contains('hide')) { + btnPlay.classList.add('fab'); + btnPlay.classList.add('detailFloatingButton'); } - events.on(apiClient, 'message', onWebSocketMessage); - events.on(playbackManager, 'playerchange', onPlayerChange); - }); - view.addEventListener('viewbeforehide', function () { - events.off(apiClient, 'message', onWebSocketMessage); - events.off(playbackManager, 'playerchange', onPlayerChange); - libraryMenu.setTransparentMenu(false); - }); - view.addEventListener('viewdestroy', function () { - currentItem = null; - self._currentPlaybackMediaSources = null; - self.currentRecordingFields = null; - }); + view.querySelectorAll('.btnPlay'); + bindAll(view, '.btnPlay', 'click', onPlayClick); + bindAll(view, '.btnResume', 'click', onPlayClick); + bindAll(view, '.btnInstantMix', 'click', onInstantMixClick); + bindAll(view, '.btnShuffle', 'click', onShuffleClick); + bindAll(view, '.btnPlayTrailer', 'click', onPlayTrailerClick); + bindAll(view, '.btnCancelSeriesTimer', 'click', onCancelSeriesTimerClick); + bindAll(view, '.btnCancelTimer', 'click', onCancelTimerClick); + bindAll(view, '.btnDownload', 'click', onDownloadClick); + view.querySelector('.detailImageContainer').addEventListener('click', onPosterClick); + view.querySelector('.trackSelections').addEventListener('submit', onTrackSelectionsSubmit); + view.querySelector('.btnSplitVersions').addEventListener('click', function () { + splitVersions(self, view, apiClient, params); + }); + bindAll(view, '.btnMoreCommands', 'click', onMoreCommandsClick); + view.querySelector('.selectSource').addEventListener('change', function () { + renderVideoSelections(view, self._currentPlaybackMediaSources); + renderAudioSelections(view, self._currentPlaybackMediaSources); + renderSubtitleSelections(view, self._currentPlaybackMediaSources); + }); + view.addEventListener('viewshow', function (e) { + const page = this; + + libraryMenu.setTransparentMenu(true); + + if (e.detail.isRestored) { + if (currentItem) { + appRouter.setTitle(''); + renderTrackSelections(page, self, currentItem, true); + } + } else { + reload(self, page, params); + } + + Events.on(apiClient, 'message', onWebSocketMessage); + Events.on(playbackManager, 'playerchange', onPlayerChange); + }); + view.addEventListener('viewbeforehide', function () { + Events.off(apiClient, 'message', onWebSocketMessage); + Events.off(playbackManager, 'playerchange', onPlayerChange); + libraryMenu.setTransparentMenu(false); + }); + view.addEventListener('viewdestroy', function () { + currentItem = null; + self._currentPlaybackMediaSources = null; + self.currentRecordingFields = null; + }); + } + + init(); } diff --git a/src/controllers/list.js b/src/controllers/list.js index 07e07eeb05..de55173422 100644 --- a/src/controllers/list.js +++ b/src/controllers/list.js @@ -1,21 +1,23 @@ -import globalize from 'globalize'; -import listView from 'listView'; -import layoutManager from 'layoutManager'; -import * as userSettings from 'userSettings'; -import focusManager from 'focusManager'; -import cardBuilder from 'cardBuilder'; -import loading from 'loading'; -import AlphaNumericShortcuts from 'alphaNumericShortcuts'; -import playbackManager from 'playbackManager'; -import AlphaPicker from 'alphaPicker'; -import 'emby-itemscontainer'; -import 'emby-scroller'; +import globalize from '../scripts/globalize'; +import listView from '../components/listview/listview'; +import layoutManager from '../components/layoutManager'; +import * as userSettings from '../scripts/settings/userSettings'; +import focusManager from '../components/focusManager'; +import cardBuilder from '../components/cardbuilder/cardBuilder'; +import loading from '../components/loading/loading'; +import AlphaNumericShortcuts from '../scripts/alphanumericshortcuts'; +import { playbackManager } from '../components/playback/playbackmanager'; +import AlphaPicker from '../components/alphaPicker/alphaPicker'; +import '../elements/emby-itemscontainer/emby-itemscontainer'; +import '../elements/emby-scroller/emby-scroller'; +import ServerConnections from '../components/ServerConnections'; +import { appRouter } from '../components/appRouter'; /* eslint-disable indent */ function getInitialLiveTvQuery(instance, params) { const query = { - UserId: window.connectionManager.getApiClient(params.serverId).getCurrentUserId(), + UserId: ServerConnections.getApiClient(params.serverId).getCurrentUserId(), StartIndex: 0, Fields: 'ChannelInfo,PrimaryImageAspectRatio', Limit: 300 @@ -231,7 +233,7 @@ import 'emby-scroller'; } function getItems(instance, params, item, sortBy, startIndex, limit) { - const apiClient = window.connectionManager.getApiClient(params.serverId); + const apiClient = ServerConnections.getApiClient(params.serverId); instance.queryRecursive = false; if (params.type === 'Recordings') { @@ -332,7 +334,7 @@ import 'emby-scroller'; return Promise.resolve(null); } - const apiClient = window.connectionManager.getApiClient(params.serverId); + const apiClient = ServerConnections.getApiClient(params.serverId); const itemId = params.genreId || params.musicGenreId || params.studioId || params.personId || params.parentId; if (itemId) { @@ -345,7 +347,7 @@ import 'emby-scroller'; function showViewSettingsMenu() { const instance = this; - import('viewSettings').then(({default: ViewSettings}) => { + import('../components/viewSettings/viewSettings').then(({default: ViewSettings}) => { new ViewSettings().show({ settingsKey: instance.getSettingsKey(), settings: instance.getViewSettings(), @@ -360,7 +362,7 @@ import 'emby-scroller'; function showFilterMenu() { const instance = this; - import('filterMenu').then(({default: FilterMenu}) => { + import('../components/filtermenu/filtermenu').then(({default: FilterMenu}) => { new FilterMenu().show({ settingsKey: instance.getSettingsKey(), settings: instance.getFilters(), @@ -379,7 +381,7 @@ import 'emby-scroller'; function showSortMenu() { const instance = this; - import('sortMenu').then(({default: SortMenu}) => { + import('../components/sortmenu/sortmenu').then(({default: SortMenu}) => { new SortMenu().show({ settingsKey: instance.getSettingsKey(), settings: instance.getSortValues(), @@ -397,7 +399,7 @@ import 'emby-scroller'; function onNewItemClick() { const instance = this; - import('playlistEditor').then(({default: playlistEditor}) => { + import('../components/playlisteditor/playlisteditor').then(({default: playlistEditor}) => { new playlistEditor({ items: [], serverId: instance.params.serverId @@ -572,7 +574,7 @@ class ItemsView { } function setTitle(item) { - Emby.Page.setTitle(getTitle(item) || ''); + appRouter.setTitle(getTitle(item) || ''); if (item && item.CollectionType === 'playlists') { hideOrShowAll(view.querySelectorAll('.btnNewItem'), false); diff --git a/src/controllers/livetv/livetvchannels.js b/src/controllers/livetv/livetvchannels.js index 278200c634..ebf17def54 100644 --- a/src/controllers/livetv/livetvchannels.js +++ b/src/controllers/livetv/livetvchannels.js @@ -1,10 +1,10 @@ -import cardBuilder from 'cardBuilder'; -import imageLoader from 'imageLoader'; -import libraryBrowser from 'libraryBrowser'; -import loading from 'loading'; -import events from 'events'; -import * as userSettings from 'userSettings'; -import 'emby-itemscontainer'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import imageLoader from '../../components/images/imageLoader'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import loading from '../../components/loading/loading'; +import { Events } from 'jellyfin-apiclient'; +import * as userSettings from '../../scripts/settings/userSettings'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; export default function (view, params, tabContent) { function getPageData() { @@ -91,13 +91,13 @@ export default function (view, params, tabContent) { } function showFilterMenu(context) { - import(['components/filterdialog/filterdialog']).then(({default: FilterDialog}) => { + import('../../components/filterdialog/filterdialog').then(({default: FilterDialog}) => { const filterDialog = new FilterDialog({ query: getQuery(), mode: 'livetvchannels', serverId: ApiClient.serverId() }); - events.on(filterDialog, 'filterchange', function () { + Events.on(filterDialog, 'filterchange', function () { reloadItems(context); }); filterDialog.show(); @@ -115,7 +115,7 @@ export default function (view, params, tabContent) { loading.hide(); isLoading = false; - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(view); }); }); diff --git a/src/controllers/livetv/livetvguide.js b/src/controllers/livetv/livetvguide.js index f8b49bd22a..c56d4ebd04 100644 --- a/src/controllers/livetv/livetvguide.js +++ b/src/controllers/livetv/livetvguide.js @@ -1,4 +1,4 @@ -import tvguide from 'tvguide'; +import tvguide from '../../components/guide/guide'; export default function (view, params, tabContent) { let guideInstance; diff --git a/src/controllers/livetv/livetvrecordings.js b/src/controllers/livetv/livetvrecordings.js index ec2f57e14f..a1fb55f53a 100644 --- a/src/controllers/livetv/livetvrecordings.js +++ b/src/controllers/livetv/livetvrecordings.js @@ -1,9 +1,10 @@ -import loading from 'loading'; -import cardBuilder from 'cardBuilder'; -import imageLoader from 'imageLoader'; -import 'scripts/livetvcomponents'; -import 'listViewStyle'; -import 'emby-itemscontainer'; +import loading from '../../components/loading/loading'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import imageLoader from '../../components/images/imageLoader'; +import '../../scripts/livetvcomponents'; +import '../../components/listview/listview.css'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import Dashboard from '../../scripts/clientUtils'; function renderRecordings(elem, recordings, cardOptions, scrollX) { if (!elem) { diff --git a/src/controllers/livetv/livetvschedule.js b/src/controllers/livetv/livetvschedule.js index d7bfbad059..a30db98791 100644 --- a/src/controllers/livetv/livetvschedule.js +++ b/src/controllers/livetv/livetvschedule.js @@ -1,10 +1,11 @@ -import layoutManager from 'layoutManager'; -import cardBuilder from 'cardBuilder'; -import imageLoader from 'imageLoader'; -import loading from 'loading'; -import 'scripts/livetvcomponents'; -import 'emby-button'; -import 'emby-itemscontainer'; +import layoutManager from '../../components/layoutManager'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import imageLoader from '../../components/images/imageLoader'; +import loading from '../../components/loading/loading'; +import '../../scripts/livetvcomponents'; +import '../../elements/emby-button/emby-button'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import Dashboard from '../../scripts/clientUtils'; function enableScrollX() { return !layoutManager.desktop; diff --git a/src/controllers/livetv/livetvseriestimers.js b/src/controllers/livetv/livetvseriestimers.js index 4f6bfaaa6a..3029fca5a6 100644 --- a/src/controllers/livetv/livetvseriestimers.js +++ b/src/controllers/livetv/livetvseriestimers.js @@ -1,8 +1,8 @@ -import cardBuilder from 'cardBuilder'; -import imageLoader from 'imageLoader'; -import loading from 'loading'; -import 'paper-icon-button-light'; -import 'emby-button'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import imageLoader from '../../components/images/imageLoader'; +import loading from '../../components/loading/loading'; +import '../../elements/emby-button/paper-icon-button-light'; +import '../../elements/emby-button/emby-button'; function renderTimers(context, timers) { const html = cardBuilder.getCardsHtml({ diff --git a/src/controllers/livetv/livetvsuggested.js b/src/controllers/livetv/livetvsuggested.js index 346630012a..bc011001ca 100644 --- a/src/controllers/livetv/livetvsuggested.js +++ b/src/controllers/livetv/livetvsuggested.js @@ -1,15 +1,16 @@ -import layoutManager from 'layoutManager'; -import * as userSettings from 'userSettings'; -import inputManager from 'inputManager'; -import loading from 'loading'; -import globalize from 'globalize'; -import * as mainTabsManager from 'mainTabsManager'; -import cardBuilder from 'cardBuilder'; -import imageLoader from 'imageLoader'; -import 'scrollStyles'; -import 'emby-itemscontainer'; -import 'emby-tabs'; -import 'emby-button'; +import layoutManager from '../../components/layoutManager'; +import * as userSettings from '../../scripts/settings/userSettings'; +import inputManager from '../../scripts/inputManager'; +import loading from '../../components/loading/loading'; +import globalize from '../../scripts/globalize'; +import * as mainTabsManager from '../../components/maintabsmanager'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import imageLoader from '../../components/images/imageLoader'; +import '../../assets/css/scrollstyles.css'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import '../../elements/emby-tabs/emby-tabs'; +import '../../elements/emby-button/emby-button'; +import Dashboard from '../../scripts/clientUtils'; function enableScrollX() { return !layoutManager.desktop; @@ -60,7 +61,7 @@ function loadRecommendedPrograms(page) { }); loading.hide(); - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); @@ -239,31 +240,31 @@ export default function (view, params) { // TODO int is a little hard to read switch (index) { case 0: - depends = 'controllers/livetv/livetvsuggested'; + depends = 'livetvsuggested'; break; case 1: - depends = 'controllers/livetv/livetvguide'; + depends = 'livetvguide'; break; case 2: - depends = 'controllers/livetv/livetvchannels'; + depends = 'livetvchannels'; break; case 3: - depends = 'controllers/livetv/livetvrecordings'; + depends = 'livetvrecordings'; break; case 4: - depends = 'controllers/livetv/livetvschedule'; + depends = 'livetvschedule'; break; case 5: - depends = 'controllers/livetv/livetvseriestimers'; + depends = 'livetvseriestimers'; break; } - import(depends).then(({default: controllerFactory}) => { + import(`../livetv/${depends}`).then(({default: controllerFactory}) => { let tabContent; if (index === 0) { diff --git a/src/controllers/livetvguideprovider.js b/src/controllers/livetvguideprovider.js index 6ab195a088..ecdb186e9f 100644 --- a/src/controllers/livetvguideprovider.js +++ b/src/controllers/livetvguideprovider.js @@ -1,23 +1,22 @@ -import events from 'events'; -import loading from 'loading'; -import globalize from 'globalize'; +import { Events } from 'jellyfin-apiclient'; +import loading from '../components/loading/loading'; +import globalize from '../scripts/globalize'; +import Dashboard, { pageIdOn } from '../scripts/clientUtils'; function onListingsSubmitted() { Dashboard.navigate('livetvstatus.html'); } function init(page, type, providerId) { - const url = 'components/tvproviders/' + type + '.js'; - - import(url).then(({default: factory}) => { + import(`../components/tvproviders/${type}`).then(({default: factory}) => { const instance = new factory(page, providerId, {}); - events.on(instance, 'submitted', onListingsSubmitted); + Events.on(instance, 'submitted', onListingsSubmitted); instance.init(); }); } function loadTemplate(page, type, providerId) { - import('text!./../components/tvproviders/' + type + '.template.html').then(({default: html}) => { + import(`../components/tvproviders/${type}.template.html`).then(({default: html}) => { page.querySelector('.providerTemplate').innerHTML = globalize.translateHtml(html); init(page, type, providerId); }); diff --git a/src/controllers/livetvsettings.js b/src/controllers/livetvsettings.js index 29ec4a10a5..2a32503861 100644 --- a/src/controllers/livetvsettings.js +++ b/src/controllers/livetvsettings.js @@ -1,7 +1,9 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import globalize from 'globalize'; -import 'emby-button'; +import 'jquery'; +import loading from '../components/loading/loading'; +import globalize from '../scripts/globalize'; +import '../elements/emby-button/emby-button'; +import Dashboard from '../scripts/clientUtils'; +import alert from '../components/alert'; function loadPage(page, config) { $('.liveTvSettingsForm', page).show(); @@ -50,9 +52,7 @@ function showSaveMessage(recordingPathChanged) { } if (msg) { - import('alert').then(({default: alert}) => { - alert(msg); - }); + alert(msg); } } @@ -61,7 +61,7 @@ export default function () { const page = this; $('.liveTvSettingsForm').off('submit', onSubmit).on('submit', onSubmit); $('#btnSelectRecordingPath', page).on('click.selectDirectory', function () { - import('directorybrowser').then(({default: directoryBrowser}) => { + import('../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => { const picker = new directoryBrowser(); picker.show({ callback: function (path) { @@ -76,7 +76,7 @@ export default function () { }); }); $('#btnSelectMovieRecordingPath', page).on('click.selectDirectory', function () { - import('directorybrowser').then(({default: directoryBrowser}) => { + import('../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => { const picker = new directoryBrowser(); picker.show({ callback: function (path) { @@ -91,7 +91,7 @@ export default function () { }); }); $('#btnSelectSeriesRecordingPath', page).on('click.selectDirectory', function () { - import('directorybrowser').then(({default: directoryBrowser}) => { + import('../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => { const picker = new directoryBrowser(); picker.show({ callback: function (path) { @@ -106,7 +106,7 @@ export default function () { }); }); $('#btnSelectPostProcessorPath', page).on('click.selectDirectory', function () { - import('directorybrowser').then(({default: directoryBrowser}) => { + import('../components/directorybrowser/directorybrowser').then(({default: directoryBrowser}) => { const picker = new directoryBrowser(); picker.show({ includeFiles: true, diff --git a/src/controllers/livetvstatus.js b/src/controllers/livetvstatus.js index dcf15adf07..c1ee98f205 100644 --- a/src/controllers/livetvstatus.js +++ b/src/controllers/livetvstatus.js @@ -1,16 +1,18 @@ -import $ from 'jQuery'; -import globalize from 'globalize'; -import taskButton from 'scripts/taskbutton'; -import dom from 'dom'; -import layoutManager from 'layoutManager'; -import loading from 'loading'; -import browser from 'browser'; -import 'listViewStyle'; -import 'flexStyles'; -import 'emby-itemscontainer'; -import 'cardStyle'; -import 'material-icons'; -import 'emby-button'; +import 'jquery'; +import globalize from '../scripts/globalize'; +import taskButton from '../scripts/taskbutton'; +import dom from '../scripts/dom'; +import layoutManager from '../components/layoutManager'; +import loading from '../components/loading/loading'; +import browser from '../scripts/browser'; +import '../components/listview/listview.css'; +import '../assets/css/flexstyles.scss'; +import '../elements/emby-itemscontainer/emby-itemscontainer'; +import '../components/cardbuilder/card.css'; +import 'material-design-icons-iconfont'; +import '../elements/emby-button/emby-button'; +import Dashboard from '../scripts/clientUtils'; +import confirm from '../components/confirm/confirm'; const enableFocusTransform = !browser.slow && !browser.edge; @@ -56,17 +58,15 @@ function renderDevices(page, devices) { function deleteDevice(page, id) { const message = globalize.translate('MessageConfirmDeleteTunerDevice'); - import('confirm').then(({default: confirm}) => { - confirm(message, globalize.translate('HeaderDeleteDevice')).then(function () { - loading.show(); - ApiClient.ajax({ - type: 'DELETE', - url: ApiClient.getUrl('LiveTv/TunerHosts', { - Id: id - }) - }).then(function () { - reload(page); - }); + confirm(message, globalize.translate('HeaderDeleteDevice')).then(function () { + loading.show(); + ApiClient.ajax({ + type: 'DELETE', + url: ApiClient.getUrl('LiveTv/TunerHosts', { + Id: id + }) + }).then(function () { + reload(page); }); }); } @@ -145,7 +145,7 @@ function showProviderOptions(page, providerId, button) { id: 'map' }); - import('actionsheet').then(({default: actionsheet}) => { + import('../components/actionSheet/actionSheet').then(({default: actionsheet}) => { actionsheet.show({ items: items, positionTo: button @@ -163,7 +163,7 @@ function showProviderOptions(page, providerId, button) { } function mapChannels(page, providerId) { - import('components/channelMapper/channelMapper').then(({default: channelMapper}) => { + import('../components/channelMapper/channelMapper').then(({default: channelMapper}) => { new channelMapper({ serverId: ApiClient.serverInfo().Id, providerId: providerId @@ -174,19 +174,17 @@ function mapChannels(page, providerId) { function deleteProvider(page, id) { const message = globalize.translate('MessageConfirmDeleteGuideProvider'); - import('confirm').then(({default: confirm}) => { - confirm(message, globalize.translate('HeaderDeleteProvider')).then(function () { - loading.show(); - ApiClient.ajax({ - type: 'DELETE', - url: ApiClient.getUrl('LiveTv/ListingProviders', { - Id: id - }) - }).then(function () { - reload(page); - }, function () { - reload(page); - }); + confirm(message, globalize.translate('HeaderDeleteProvider')).then(function () { + loading.show(); + ApiClient.ajax({ + type: 'DELETE', + url: ApiClient.getUrl('LiveTv/ListingProviders', { + Id: id + }) + }).then(function () { + reload(page); + }, function () { + reload(page); }); }); } @@ -237,7 +235,7 @@ function addProvider(button) { id: 'xmltv' }); - import('actionsheet').then(({default: actionsheet}) => { + import('../components/actionSheet/actionSheet').then(({default: actionsheet}) => { actionsheet.show({ items: menuItems, positionTo: button, @@ -263,7 +261,7 @@ function showDeviceMenu(button, tunerDeviceId) { id: 'edit' }); - import('actionsheet').then(({default: actionsheet}) => { + import('../components/actionSheet/actionSheet').then(({default: actionsheet}) => { actionsheet.show({ items: items, positionTo: button diff --git a/src/controllers/livetvtuner.js b/src/controllers/livetvtuner.js index 0e3b2b689e..65933b03fb 100644 --- a/src/controllers/livetvtuner.js +++ b/src/controllers/livetvtuner.js @@ -1,10 +1,11 @@ -import globalize from 'globalize'; -import loading from 'loading'; -import dom from 'dom'; -import 'emby-input'; -import 'emby-button'; -import 'emby-checkbox'; -import 'emby-select'; +import globalize from '../scripts/globalize'; +import loading from '../components/loading/loading'; +import dom from '../scripts/dom'; +import '../elements/emby-input/emby-input'; +import '../elements/emby-button/emby-button'; +import '../elements/emby-checkbox/emby-checkbox'; +import '../elements/emby-select/emby-select'; +import Dashboard from '../scripts/clientUtils'; function isM3uVariant(type) { return ['nextpvr'].indexOf(type || '') !== -1; @@ -102,7 +103,7 @@ function submitForm(page) { } function getDetectedDevice() { - return import('tunerPicker').then(({default: tunerPicker}) => { + return import('../components/tunerPicker').then(({default: tunerPicker}) => { return new tunerPicker().show({ serverId: ApiClient.serverId() }); @@ -211,7 +212,7 @@ export default function (view, params) { }); }); view.querySelector('.btnSelectPath').addEventListener('click', function () { - import('directorybrowser').then(({default: directorybrowser}) => { + import('../components/directorybrowser/directorybrowser').then(({default: directorybrowser}) => { const picker = new directorybrowser(); picker.show({ includeFiles: true, diff --git a/src/controllers/movies/moviecollections.js b/src/controllers/movies/moviecollections.js index 573e5122c5..cfabe016ca 100644 --- a/src/controllers/movies/moviecollections.js +++ b/src/controllers/movies/moviecollections.js @@ -1,11 +1,11 @@ -import loading from 'loading'; -import libraryBrowser from 'libraryBrowser'; -import imageLoader from 'imageLoader'; -import listView from 'listView'; -import cardBuilder from 'cardBuilder'; -import * as userSettings from 'userSettings'; -import globalize from 'globalize'; -import 'emby-itemscontainer'; +import loading from '../../components/loading/loading'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import imageLoader from '../../components/images/imageLoader'; +import listView from '../../components/listview/listview'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import * as userSettings from '../../scripts/settings/userSettings'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; /* eslint-disable indent */ @@ -193,7 +193,7 @@ import 'emby-itemscontainer'; loading.hide(); isLoading = false; - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); @@ -246,9 +246,9 @@ import 'emby-itemscontainer'; reloadItems(tabContent); }); tabContent.querySelector('.btnNewCollection').addEventListener('click', () => { - import('collectionEditor').then(({default: collectionEditor}) => { + import('../../components/collectionEditor/collectionEditor').then(({default: collectionEditor}) => { const serverId = ApiClient.serverInfo().Id; - new collectionEditor.showEditor({ + new collectionEditor({ items: [], serverId: serverId }); diff --git a/src/controllers/movies/moviegenres.js b/src/controllers/movies/moviegenres.js index ca02ede36d..1cda1a6cd6 100644 --- a/src/controllers/movies/moviegenres.js +++ b/src/controllers/movies/moviegenres.js @@ -1,11 +1,11 @@ -import layoutManager from 'layoutManager'; -import loading from 'loading'; -import libraryBrowser from 'libraryBrowser'; -import cardBuilder from 'cardBuilder'; -import lazyLoader from 'lazyLoader'; -import globalize from 'globalize'; -import appRouter from 'appRouter'; -import 'emby-button'; +import layoutManager from '../../components/layoutManager'; +import loading from '../../components/loading/loading'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver'; +import globalize from '../../scripts/globalize'; +import { appRouter } from '../../components/appRouter'; +import '../../elements/emby-button/emby-button'; /* eslint-disable indent */ @@ -17,7 +17,7 @@ import 'emby-button'; if (!pageData) { pageData = data[key] = { query: { - SortBy: 'SortName', + SortBy: 'Random', SortOrder: 'Ascending', IncludeItemTypes: 'Movie', Recursive: true, diff --git a/src/controllers/movies/movies.js b/src/controllers/movies/movies.js index 09be5a71f0..4d2b4c6c3a 100644 --- a/src/controllers/movies/movies.js +++ b/src/controllers/movies/movies.js @@ -1,12 +1,12 @@ -import loading from 'loading'; -import * as userSettings from 'userSettings'; -import events from 'events'; -import libraryBrowser from 'libraryBrowser'; -import AlphaPicker from 'alphaPicker'; -import listView from 'listView'; -import cardBuilder from 'cardBuilder'; -import globalize from 'globalize'; -import 'emby-itemscontainer'; +import loading from '../../components/loading/loading'; +import * as userSettings from '../../scripts/settings/userSettings'; +import { Events } from 'jellyfin-apiclient'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import { AlphaPicker } from '../../components/alphaPicker/alphaPicker'; +import listView from '../../components/listview/listview'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; /* eslint-disable indent */ @@ -91,7 +91,7 @@ import 'emby-itemscontainer'; isLoading = false; loading.hide(); - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(tabContent); }); } @@ -278,13 +278,13 @@ import 'emby-itemscontainer'; query = userSettings.loadQuerySettings(savedQueryKey, query); this.showFilterMenu = function () { - import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { const filterDialog = new filterDialogFactory({ query: query, mode: 'movies', serverId: ApiClient.serverId() }); - events.on(filterDialog, 'filterchange', () => { + Events.on(filterDialog, 'filterchange', () => { query.StartIndex = 0; itemsContainer.refreshItems(); }); diff --git a/src/controllers/movies/moviesrecommended.js b/src/controllers/movies/moviesrecommended.js index 80e391c5ef..7de4cb4559 100644 --- a/src/controllers/movies/moviesrecommended.js +++ b/src/controllers/movies/moviesrecommended.js @@ -1,18 +1,20 @@ -import events from 'events'; -import layoutManager from 'layoutManager'; -import inputManager from 'inputManager'; -import * as userSettings from 'userSettings'; -import libraryMenu from 'libraryMenu'; -import * as mainTabsManager from 'mainTabsManager'; -import cardBuilder from 'cardBuilder'; -import dom from 'dom'; -import imageLoader from 'imageLoader'; -import playbackManager from 'playbackManager'; -import globalize from 'globalize'; -import 'emby-scroller'; -import 'emby-itemscontainer'; -import 'emby-tabs'; -import 'emby-button'; + +import { Events } from 'jellyfin-apiclient'; +import layoutManager from '../../components/layoutManager'; +import inputManager from '../../scripts/inputManager'; +import * as userSettings from '../../scripts/settings/userSettings'; +import libraryMenu from '../../scripts/libraryMenu'; +import * as mainTabsManager from '../../components/maintabsmanager'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import dom from '../../scripts/dom'; +import imageLoader from '../../components/images/imageLoader'; +import { playbackManager } from '../../components/playback/playbackmanager'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-scroller/emby-scroller'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import '../../elements/emby-tabs/emby-tabs'; +import '../../elements/emby-button/emby-button'; +import Dashboard from '../../scripts/clientUtils'; /* eslint-disable indent */ @@ -182,7 +184,7 @@ import 'emby-button'; } function autoFocus(page) { - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); } @@ -281,31 +283,31 @@ import 'emby-button'; switch (index) { case 0: - depends = 'controllers/movies/movies'; + depends = 'movies'; break; case 1: - depends = 'controllers/movies/moviesrecommended.js'; + depends = 'moviesrecommended.js'; break; case 2: - depends = 'controllers/movies/movietrailers'; + depends = 'movietrailers'; break; case 3: - depends = 'controllers/movies/movies'; + depends = 'movies'; break; case 4: - depends = 'controllers/movies/moviecollections'; + depends = 'moviecollections'; break; case 5: - depends = 'controllers/movies/moviegenres'; + depends = 'moviegenres'; break; } - import(depends).then(({default: controllerFactory}) => { + import(`../movies/${depends}`).then(({default: controllerFactory}) => { let tabContent; if (index === suggestionsTabIndex) { @@ -403,7 +405,7 @@ import 'emby-button'; } } - events.on(playbackManager, 'playbackstop', onPlaybackStop); + Events.on(playbackManager, 'playbackstop', onPlaybackStop); inputManager.on(window, onInputCommand); }); view.addEventListener('viewbeforehide', function () { diff --git a/src/controllers/movies/movietrailers.js b/src/controllers/movies/movietrailers.js index def55d919a..8c8246b4e1 100644 --- a/src/controllers/movies/movietrailers.js +++ b/src/controllers/movies/movietrailers.js @@ -1,13 +1,13 @@ -import loading from 'loading'; -import events from 'events'; -import libraryBrowser from 'libraryBrowser'; -import imageLoader from 'imageLoader'; -import AlphaPicker from 'alphaPicker'; -import listView from 'listView'; -import cardBuilder from 'cardBuilder'; -import * as userSettings from 'userSettings'; -import globalize from 'globalize'; -import 'emby-itemscontainer'; +import loading from '../../components/loading/loading'; +import { Events } from 'jellyfin-apiclient'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import imageLoader from '../../components/images/imageLoader'; +import { AlphaPicker } from '../../components/alphaPicker/alphaPicker'; +import listView from '../../components/listview/listview'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import * as userSettings from '../../scripts/settings/userSettings'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; /* eslint-disable indent */ @@ -192,13 +192,13 @@ import 'emby-itemscontainer'; let isLoading = false; this.showFilterMenu = function () { - import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { const filterDialog = new filterDialogFactory({ query: getQuery(tabContent), mode: 'movies', serverId: ApiClient.serverId() }); - events.on(filterDialog, 'filterchange', function () { + Events.on(filterDialog, 'filterchange', function () { getQuery(tabContent).StartIndex = 0; reloadItems(); }); diff --git a/src/controllers/music/musicalbums.js b/src/controllers/music/musicalbums.js index 55e59b6289..fe885b09a3 100644 --- a/src/controllers/music/musicalbums.js +++ b/src/controllers/music/musicalbums.js @@ -1,14 +1,14 @@ -import playbackManager from 'playbackManager'; -import loading from 'loading'; -import events from 'events'; -import libraryBrowser from 'libraryBrowser'; -import imageLoader from 'imageLoader'; -import AlphaPicker from 'alphaPicker'; -import listView from 'listView'; -import cardBuilder from 'cardBuilder'; -import * as userSettings from 'userSettings'; -import globalize from 'globalize'; -import 'emby-itemscontainer'; +import { playbackManager } from '../../components/playback/playbackmanager'; +import loading from '../../components/loading/loading'; +import { Events } from 'jellyfin-apiclient'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import imageLoader from '../../components/images/imageLoader'; +import AlphaPicker from '../../components/alphaPicker/alphaPicker'; +import listView from '../../components/listview/listview'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import * as userSettings from '../../scripts/settings/userSettings'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; /* eslint-disable indent */ @@ -179,7 +179,7 @@ import 'emby-itemscontainer'; loading.hide(); isLoading = false; - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(tabContent); }); }); @@ -204,14 +204,13 @@ import 'emby-itemscontainer'; let isLoading = false; this.showFilterMenu = function () { - import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { const filterDialog = new filterDialogFactory({ query: getQuery(), mode: 'albums', serverId: ApiClient.serverId() }); - - events.on(filterDialog, 'filterchange', function () { + Events.on(filterDialog, 'filterchange', function () { getQuery().StartIndex = 0; reloadItems(tabContent); }); diff --git a/src/controllers/music/musicartists.js b/src/controllers/music/musicartists.js index 3517437622..c6e5770999 100644 --- a/src/controllers/music/musicartists.js +++ b/src/controllers/music/musicartists.js @@ -1,12 +1,12 @@ -import loading from 'loading'; -import events from 'events'; -import libraryBrowser from 'libraryBrowser'; -import imageLoader from 'imageLoader'; -import AlphaPicker from 'alphaPicker'; -import listView from 'listView'; -import cardBuilder from 'cardBuilder'; -import * as userSettings from 'userSettings'; -import 'emby-itemscontainer'; +import loading from '../../components/loading/loading'; +import { Events } from 'jellyfin-apiclient'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import imageLoader from '../../components/images/imageLoader'; +import { AlphaPicker } from '../../components/alphaPicker/alphaPicker'; +import listView from '../../components/listview/listview'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import * as userSettings from '../../scripts/settings/userSettings'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; /* eslint-disable indent */ @@ -161,7 +161,7 @@ import 'emby-itemscontainer'; loading.hide(); isLoading = false; - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(tabContent); }); }); @@ -176,13 +176,13 @@ import 'emby-itemscontainer'; let isLoading = false; this.showFilterMenu = function () { - import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { const filterDialog = new filterDialogFactory({ query: getQuery(tabContent), mode: this.mode, serverId: ApiClient.serverId() }); - events.on(filterDialog, 'filterchange', function () { + Events.on(filterDialog, 'filterchange', function () { getQuery(tabContent).StartIndex = 0; reloadItems(tabContent); }); diff --git a/src/controllers/music/musicgenres.js b/src/controllers/music/musicgenres.js index 2cd9e2114b..c0e48e9a52 100644 --- a/src/controllers/music/musicgenres.js +++ b/src/controllers/music/musicgenres.js @@ -1,7 +1,7 @@ -import libraryBrowser from 'libraryBrowser'; -import cardBuilder from 'cardBuilder'; -import imageLoader from 'imageLoader'; -import loading from 'loading'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import imageLoader from '../../components/images/imageLoader'; +import loading from '../../components/loading/loading'; /* eslint-disable indent */ @@ -92,7 +92,7 @@ import loading from 'loading'; libraryBrowser.saveQueryValues(getSavedQueryKey(), query); loading.hide(); - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(context); }); }); diff --git a/src/controllers/music/musicplaylists.js b/src/controllers/music/musicplaylists.js index 67e6a959eb..2d98aa5a99 100644 --- a/src/controllers/music/musicplaylists.js +++ b/src/controllers/music/musicplaylists.js @@ -1,7 +1,7 @@ -import libraryBrowser from 'libraryBrowser'; -import cardBuilder from 'cardBuilder'; -import imageLoader from 'imageLoader'; -import loading from 'loading'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import imageLoader from '../../components/images/imageLoader'; +import loading from '../../components/loading/loading'; /* eslint-disable indent */ @@ -63,7 +63,7 @@ import loading from 'loading'; libraryBrowser.saveQueryValues(getSavedQueryKey(), query); loading.hide(); - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(context); }); }); diff --git a/src/controllers/music/musicrecommended.js b/src/controllers/music/musicrecommended.js index 32137ccaa8..10bbaae7db 100644 --- a/src/controllers/music/musicrecommended.js +++ b/src/controllers/music/musicrecommended.js @@ -1,19 +1,20 @@ -import browser from 'browser'; -import layoutManager from 'layoutManager'; -import * as userSettings from 'userSettings'; -import inputManager from 'inputManager'; -import loading from 'loading'; -import cardBuilder from 'cardBuilder'; -import dom from 'dom'; -import imageLoader from 'imageLoader'; -import libraryMenu from 'libraryMenu'; -import * as mainTabsManager from 'mainTabsManager'; -import globalize from 'globalize'; -import 'scrollStyles'; -import 'emby-itemscontainer'; -import 'emby-tabs'; -import 'emby-button'; -import 'flexStyles'; +import browser from '../../scripts/browser'; +import layoutManager from '../../components/layoutManager'; +import * as userSettings from '../../scripts/settings/userSettings'; +import inputManager from '../../scripts/inputManager'; +import loading from '../../components/loading/loading'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import dom from '../../scripts/dom'; +import imageLoader from '../../components/images/imageLoader'; +import libraryMenu from '../../scripts/libraryMenu'; +import * as mainTabsManager from '../../components/maintabsmanager'; +import globalize from '../../scripts/globalize'; +import '../../assets/css/scrollstyles.css'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import '../../elements/emby-tabs/emby-tabs'; +import '../../elements/emby-button/emby-button'; +import '../../assets/css/flexstyles.scss'; +import Dashboard from '../../scripts/clientUtils'; /* eslint-disable indent */ @@ -74,7 +75,7 @@ import 'flexStyles'; imageLoader.lazyChildren(elem); loading.hide(); - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); @@ -170,7 +171,7 @@ import 'flexStyles'; loadRecentlyPlayed(tabContent, parentId); loadFrequentlyPlayed(tabContent, parentId); - import('components/favoriteitems').then(({default: favoriteItems}) => { + import('../../components/favoriteitems').then(({default: favoriteItems}) => { favoriteItems.render(tabContent, ApiClient.getCurrentUserId(), parentId, ['favoriteArtists', 'favoriteAlbums', 'favoriteSongs']); }); } @@ -268,32 +269,32 @@ import 'flexStyles'; switch (index) { case 0: - depends = 'controllers/music/musicalbums'; + depends = 'musicalbums'; break; case 1: - depends = 'controllers/music/musicrecommended'; + depends = 'musicrecommended'; break; case 2: case 3: - depends = 'controllers/music/musicartists'; + depends = 'musicartists'; break; case 4: - depends = 'controllers/music/musicplaylists'; + depends = 'musicplaylists'; break; case 5: - depends = 'controllers/music/songs'; + depends = 'songs'; break; case 6: - depends = 'controllers/music/musicgenres'; + depends = 'musicgenres'; break; } - import(depends).then(({default: controllerFactory}) => { + import(`../music/${depends}`).then(({default: controllerFactory}) => { let tabContent; if (index == 1) { diff --git a/src/controllers/music/songs.js b/src/controllers/music/songs.js index d30c74deb8..3fc7549947 100644 --- a/src/controllers/music/songs.js +++ b/src/controllers/music/songs.js @@ -1,11 +1,13 @@ -import events from 'events'; -import libraryBrowser from 'libraryBrowser'; -import imageLoader from 'imageLoader'; -import listView from 'listView'; -import loading from 'loading'; -import * as userSettings from 'userSettings'; -import globalize from 'globalize'; -import 'emby-itemscontainer'; + +import { Events } from 'jellyfin-apiclient'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import imageLoader from '../../components/images/imageLoader'; +import listView from '../../components/listview/listview'; +import loading from '../../components/loading/loading'; +import * as userSettings from '../../scripts/settings/userSettings'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import Dashboard from '../../scripts/clientUtils'; /* eslint-disable indent */ @@ -119,7 +121,7 @@ import 'emby-itemscontainer'; loading.hide(); isLoading = false; - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); @@ -130,13 +132,13 @@ import 'emby-itemscontainer'; let isLoading = false; self.showFilterMenu = function () { - import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { const filterDialog = new filterDialogFactory({ query: getQuery(tabContent), mode: 'songs', serverId: ApiClient.serverId() }); - events.on(filterDialog, 'filterchange', function () { + Events.on(filterDialog, 'filterchange', function () { getQuery(tabContent).StartIndex = 0; reloadItems(tabContent); }); diff --git a/src/controllers/playback/queue/index.js b/src/controllers/playback/queue/index.js index 581b5f4b8a..8bece4eb3f 100644 --- a/src/controllers/playback/queue/index.js +++ b/src/controllers/playback/queue/index.js @@ -1,6 +1,6 @@ -import remotecontrolFactory from 'components/remotecontrol/remotecontrol'; -import libraryMenu from 'libraryMenu'; -import 'emby-button'; +import remotecontrolFactory from '../../../components/remotecontrol/remotecontrol'; +import libraryMenu from '../../../scripts/libraryMenu'; +import '../../../elements/emby-button/emby-button'; export default function (view, params) { const remoteControl = new remotecontrolFactory(); diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 492f4aeee9..ae48446212 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -1,22 +1,26 @@ -import playbackManager from 'playbackManager'; -import dom from 'dom'; -import inputManager from 'inputManager'; -import mouseManager from 'mouseManager'; -import datetime from 'datetime'; -import itemHelper from 'itemHelper'; -import mediaInfo from 'mediaInfo'; -import focusManager from 'focusManager'; -import events from 'events'; -import browser from 'browser'; -import globalize from 'globalize'; -import appHost from 'apphost'; -import layoutManager from 'layoutManager'; -import * as userSettings from 'userSettings'; -import keyboardnavigation from 'keyboardnavigation'; -import 'scrollStyles'; -import 'emby-slider'; -import 'paper-icon-button-light'; -import 'css!assets/css/videoosd'; +import { playbackManager } from '../../../components/playback/playbackmanager'; +import dom from '../../../scripts/dom'; +import inputManager from '../../../scripts/inputManager'; +import mouseManager from '../../../scripts/mouseManager'; +import datetime from '../../../scripts/datetime'; +import itemHelper from '../../../components/itemHelper'; +import mediaInfo from '../../../components/mediainfo/mediainfo'; +import focusManager from '../../../components/focusManager'; +import { Events } from 'jellyfin-apiclient'; +import browser from '../../../scripts/browser'; +import globalize from '../../../scripts/globalize'; +import { appHost } from '../../../components/apphost'; +import layoutManager from '../../../components/layoutManager'; +import * as userSettings from '../../../scripts/settings/userSettings'; +import keyboardnavigation from '../../../scripts/keyboardNavigation'; +import '../../../assets/css/scrollstyles.css'; +import '../../../elements/emby-slider/emby-slider'; +import '../../../elements/emby-button/paper-icon-button-light'; +import '../../../assets/css/videoosd.css'; +import ServerConnections from '../../../components/ServerConnections'; +import shell from '../../../scripts/shell'; +import SubtitleSync from '../../../components/subtitlesync/subtitlesync'; +import { appRouter } from '../../../components/appRouter'; /* eslint-disable indent */ @@ -73,7 +77,7 @@ import 'css!assets/css/videoosd'; function getDisplayItem(item) { if (item.Type === 'TvChannel') { - const apiClient = window.connectionManager.getApiClient(item.ServerId); + const apiClient = ServerConnections.getApiClient(item.ServerId); return apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (refreshedItem) { return { originalItem: refreshedItem, @@ -97,9 +101,9 @@ import 'css!assets/css/videoosd'; return void view.querySelector('.btnRecord').classList.add('hide'); } - window.connectionManager.getApiClient(item.ServerId).getCurrentUser().then(function (user) { + ServerConnections.getApiClient(item.ServerId).getCurrentUser().then(function (user) { if (user.Policy.EnableLiveTvManagement) { - import('recordingButton').then(({default: RecordingButton}) => { + import('../../../components/recordingcreator/recordingbutton').then(({default: RecordingButton}) => { if (recordingButtonManager) { return void recordingButtonManager.refreshItem(item); } @@ -190,7 +194,7 @@ import 'css!assets/css/videoosd'; currentItem = item; if (!item) { updateRecordingButton(null); - Emby.Page.setTitle(''); + appRouter.setTitle(''); nowPlayingVolumeSlider.disabled = true; nowPlayingPositionSlider.disabled = true; btnFastForward.disabled = true; @@ -238,7 +242,7 @@ import 'css!assets/css/videoosd'; itemName = parentName || ''; } - Emby.Page.setTitle(itemName); + appRouter.setTitle(itemName); const documentTitle = parentName || (item ? item.Name : null); @@ -510,7 +514,7 @@ import 'css!assets/css/videoosd'; if (state.NextMediaType !== 'Video') { view.removeEventListener('viewbeforehide', onViewHideStopPlayback); - Emby.Page.back(); + appRouter.back(); } } @@ -540,16 +544,16 @@ import 'css!assets/css/videoosd'; onStateChanged.call(player, { type: 'init' }, state); - events.on(player, 'playbackstart', onPlaybackStart); - events.on(player, 'playbackstop', onPlaybackStopped); - events.on(player, 'volumechange', onVolumeChanged); - events.on(player, 'pause', onPlayPauseStateChanged); - events.on(player, 'unpause', onPlayPauseStateChanged); - events.on(player, 'timeupdate', onTimeUpdate); - events.on(player, 'fullscreenchange', updateFullscreenIcon); - events.on(player, 'mediastreamschange', onMediaStreamsChanged); - events.on(player, 'beginFetch', onBeginFetch); - events.on(player, 'endFetch', onEndFetch); + Events.on(player, 'playbackstart', onPlaybackStart); + Events.on(player, 'playbackstop', onPlaybackStopped); + Events.on(player, 'volumechange', onVolumeChanged); + Events.on(player, 'pause', onPlayPauseStateChanged); + Events.on(player, 'unpause', onPlayPauseStateChanged); + Events.on(player, 'timeupdate', onTimeUpdate); + Events.on(player, 'fullscreenchange', updateFullscreenIcon); + Events.on(player, 'mediastreamschange', onMediaStreamsChanged); + Events.on(player, 'beginFetch', onBeginFetch); + Events.on(player, 'endFetch', onEndFetch); resetUpNextDialog(); if (player.isFetching) { @@ -564,14 +568,14 @@ import 'css!assets/css/videoosd'; const player = currentPlayer; if (player) { - events.off(player, 'playbackstart', onPlaybackStart); - events.off(player, 'playbackstop', onPlaybackStopped); - events.off(player, 'volumechange', onVolumeChanged); - events.off(player, 'pause', onPlayPauseStateChanged); - events.off(player, 'unpause', onPlayPauseStateChanged); - events.off(player, 'timeupdate', onTimeUpdate); - events.off(player, 'fullscreenchange', updateFullscreenIcon); - events.off(player, 'mediastreamschange', onMediaStreamsChanged); + Events.off(player, 'playbackstart', onPlaybackStart); + Events.off(player, 'playbackstop', onPlaybackStopped); + Events.off(player, 'volumechange', onVolumeChanged); + Events.off(player, 'pause', onPlayPauseStateChanged); + Events.off(player, 'unpause', onPlayPauseStateChanged); + Events.off(player, 'timeupdate', onTimeUpdate); + Events.off(player, 'fullscreenchange', updateFullscreenIcon); + Events.off(player, 'mediastreamschange', onMediaStreamsChanged); currentPlayer = null; } } @@ -613,7 +617,7 @@ import 'css!assets/css/videoosd'; } function showComingUpNext(player) { - import('upNextDialog').then(({default: UpNextDialog}) => { + import('../../../components/upnextdialog/upnextdialog').then(({default: UpNextDialog}) => { if (!(currentVisibleMenu || currentUpNextDialog)) { currentVisibleMenu = 'upnext'; comingUpNextDisplayed = true; @@ -623,7 +627,7 @@ import 'css!assets/css/videoosd'; player: player, nextItem: nextItem }); - events.on(currentUpNextDialog, 'hide', onUpNextHidden); + Events.on(currentUpNextDialog, 'hide', onUpNextHidden); }, onUpNextHidden); } }); @@ -852,7 +856,7 @@ import 'css!assets/css/videoosd'; function onSettingsButtonClick(e) { const btn = this; - import('playerSettingsMenu').then(({default: playerSettingsMenu}) => { + import('../../../components/playback/playersettingsmenu').then((playerSettingsMenu) => { const player = currentPlayer; if (player) { @@ -889,7 +893,7 @@ import 'css!assets/css/videoosd'; } function toggleStats() { - import('playerStats').then(({default: PlayerStats}) => { + import('../../../components/playerstats/playerstats').then(({default: PlayerStats}) => { const player = currentPlayer; if (player) { @@ -929,7 +933,7 @@ import 'css!assets/css/videoosd'; }); const positionTo = this; - import('actionsheet').then(({default: actionsheet}) => { + import('../../../components/actionSheet/actionSheet').then(({default: actionsheet}) => { actionsheet.show({ items: menuItems, title: globalize.translate('Audio'), @@ -975,7 +979,7 @@ import 'css!assets/css/videoosd'; }); const positionTo = this; - import('actionsheet').then(({default: actionsheet}) => { + import('../../../components/actionSheet/actionSheet').then(({default: actionsheet}) => { actionsheet.show({ title: globalize.translate('Subtitles'), items: menuItems, @@ -997,14 +1001,12 @@ import 'css!assets/css/videoosd'; } function toggleSubtitleSync(action) { - import('subtitleSync').then(({default: SubtitleSync}) => { - const player = currentPlayer; - if (subtitleSyncOverlay) { - subtitleSyncOverlay.toggle(action); - } else if (player) { - subtitleSyncOverlay = new SubtitleSync(player); - } - }); + const player = currentPlayer; + if (subtitleSyncOverlay) { + subtitleSyncOverlay.toggle(action); + } else if (player) { + subtitleSyncOverlay = new SubtitleSync(player); + } } function destroySubtitleSync() { @@ -1228,9 +1230,7 @@ import 'css!assets/css/videoosd'; let playPauseClickTimeout; function onViewHideStopPlayback() { if (playbackManager.isPlayingVideo()) { - import('shell').then(({default: shell}) => { - shell.disableFullscreen(); - }); + shell.disableFullscreen(); clearTimeout(playPauseClickTimeout); const player = currentPlayer; @@ -1248,9 +1248,7 @@ import 'css!assets/css/videoosd'; } } - import('shell').then(({default: shell}) => { - shell.enableFullscreen(); - }); + shell.enableFullscreen(); let currentPlayer; let comingUpNextDisplayed; @@ -1295,11 +1293,11 @@ import 'css!assets/css/videoosd'; view.addEventListener('viewbeforeshow', function (e) { headerElement.classList.add('osdHeader'); - Emby.Page.setTransparency('full'); + appRouter.setTransparency('full'); }); view.addEventListener('viewshow', function (e) { try { - events.on(playbackManager, 'playerchange', onPlayerChange); + Events.on(playbackManager, 'playerchange', onPlayerChange); bindToPlayer(playbackManager.getCurrentPlayer()); /* eslint-disable-next-line compat/compat */ dom.addEventListener(document, window.PointerEvent ? 'pointermove' : 'mousemove', onPointerMove, { @@ -1337,9 +1335,7 @@ import 'css!assets/css/videoosd'; passive: true }); } catch (e) { - import('appRouter').then(({default: appRouter}) => { - appRouter.goHome(); - }); + appRouter.goHome(); } }); view.addEventListener('viewbeforehide', function () { @@ -1384,7 +1380,7 @@ import 'css!assets/css/videoosd'; passive: true }); inputManager.off(window, onInputCommand); - events.off(playbackManager, 'playerchange', onPlayerChange); + Events.off(playbackManager, 'playerchange', onPlayerChange); releaseCurrentPlayer(); }); view.querySelector('.btnFullscreen').addEventListener('click', function () { @@ -1515,7 +1511,7 @@ import 'css!assets/css/videoosd'; const item = currentItem; if (item && item.Chapters && item.Chapters.length && item.Chapters[0].ImageTag) { - const html = getChapterBubbleHtml(window.connectionManager.getApiClient(item.ServerId), item, item.Chapters, ticks); + const html = getChapterBubbleHtml(ServerConnections.getApiClient(item.ServerId), item, item.Chapters, ticks); if (html) { return html; @@ -1548,15 +1544,15 @@ import 'css!assets/css/videoosd'; if (browser.touch) { (function () { - import('touchHelper').then(({default: TouchHelper}) => { + import('../../../scripts/touchHelper').then(({default: TouchHelper}) => { self.touchHelper = new TouchHelper(view, { swipeYThreshold: 30, triggerOnMove: true, preventDefaultOnMove: true, ignoreTagNames: ['BUTTON', 'INPUT', 'TEXTAREA'] }); - events.on(self.touchHelper, 'swipeup', onVerticalSwipe); - events.on(self.touchHelper, 'swipedown', onVerticalSwipe); + Events.on(self.touchHelper, 'swipeup', onVerticalSwipe); + Events.on(self.touchHelper, 'swipedown', onVerticalSwipe); }); })(); } diff --git a/src/controllers/searchpage.js b/src/controllers/searchpage.js index ffb7fbac0b..b96c6f4b10 100644 --- a/src/controllers/searchpage.js +++ b/src/controllers/searchpage.js @@ -1,6 +1,6 @@ -import SearchFields from 'searchFields'; -import SearchResults from 'searchResults'; -import events from 'events'; +import SearchFields from '../components/search/searchfields'; +import SearchResults from '../components/search/searchresults'; +import { Events } from 'jellyfin-apiclient'; export default function (view, params) { function onSearch(e, value) { @@ -19,7 +19,7 @@ export default function (view, params) { parentId: params.parentId, collectionType: params.collectionType }); - events.on(self.searchFields, 'search', onSearch); + Events.on(self.searchFields, 'search', onSearch); } }); view.addEventListener('viewdestroy', function () { diff --git a/src/controllers/session/addServer/index.js b/src/controllers/session/addServer/index.js index 472d1274a9..aabfdbcca8 100644 --- a/src/controllers/session/addServer/index.js +++ b/src/controllers/session/addServer/index.js @@ -1,7 +1,9 @@ -import appSettings from 'appSettings'; -import loading from 'loading'; -import globalize from 'globalize'; -import 'emby-button'; +import appSettings from '../../../scripts/settings/appSettings'; +import loading from '../../../components/loading/loading'; +import globalize from '../../../scripts/globalize'; +import '../../../elements/emby-button/emby-button'; +import Dashboard from '../../../scripts/clientUtils'; +import ServerConnections from '../../../components/ServerConnections'; /* eslint-disable indent */ @@ -36,7 +38,7 @@ import 'emby-button'; function submitServer(page) { loading.show(); const host = page.querySelector('#txtServerHost').value; - window.connectionManager.connectToAddress(host, { + ServerConnections.connectToAddress(host, { enableAutoLogin: appSettings.enableAutoLogin() }).then(function(result) { handleConnectionResult(page, result); @@ -51,7 +53,7 @@ import 'emby-button'; view.querySelector('.addServerForm').addEventListener('submit', onServerSubmit); view.querySelector('.btnCancel').addEventListener('click', goBack); - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(view); }); @@ -62,7 +64,7 @@ import 'emby-button'; } function goBack() { - import('appRouter').then(({default: appRouter}) => { + import('../../../components/appRouter').then(({default: appRouter}) => { appRouter.back(); }); } diff --git a/src/controllers/session/forgotPassword/index.js b/src/controllers/session/forgotPassword/index.js index 5b92e255da..203605b8bb 100644 --- a/src/controllers/session/forgotPassword/index.js +++ b/src/controllers/session/forgotPassword/index.js @@ -1,4 +1,5 @@ -import globalize from 'globalize'; +import globalize from '../../../scripts/globalize'; +import Dashboard from '../../../scripts/clientUtils'; /* eslint-disable indent */ diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js index 1592e6b112..35191a1954 100644 --- a/src/controllers/session/login/index.js +++ b/src/controllers/session/login/index.js @@ -1,13 +1,16 @@ -import appHost from 'apphost'; -import appSettings from 'appSettings'; -import dom from 'dom'; -import loading from 'loading'; -import layoutManager from 'layoutManager'; -import libraryMenu from 'libraryMenu'; -import browser from 'browser'; -import globalize from 'globalize'; -import 'cardStyle'; -import 'emby-checkbox'; +import { appHost } from '../../../components/apphost'; +import appSettings from '../../../scripts/settings/appSettings'; +import dom from '../../../scripts/dom'; +import loading from '../../../components/loading/loading'; +import layoutManager from '../../../components/layoutManager'; +import libraryMenu from '../../../scripts/libraryMenu'; +import browser from '../../../scripts/browser'; +import globalize from '../../../scripts/globalize'; +import '../../../components/cardbuilder/card.css'; +import '../../../elements/emby-checkbox/emby-checkbox'; +import Dashboard from '../../../scripts/clientUtils'; +import ServerConnections from '../../../components/ServerConnections'; +import toast from '../../../components/toast/toast'; /* eslint-disable indent */ @@ -27,10 +30,8 @@ import 'emby-checkbox'; const UnauthorizedOrForbidden = [401, 403]; if (UnauthorizedOrForbidden.includes(response.status)) { - import('toast').then(({default: toast}) => { - const messageKey = response.status === 401 ? 'MessageInvalidUser' : 'MessageUnauthorizedUser'; - toast(globalize.translate(messageKey)); - }); + const messageKey = response.status === 401 ? 'MessageInvalidUser' : 'MessageUnauthorizedUser'; + toast(globalize.translate(messageKey)); } else { Dashboard.alert({ message: globalize.translate('MessageUnableToConnectToServer'), @@ -191,7 +192,7 @@ import 'emby-checkbox'; const serverId = params.serverid; if (serverId) { - return window.connectionManager.getOrCreateApiClient(serverId); + return ServerConnections.getOrCreateApiClient(serverId); } return ApiClient; @@ -202,7 +203,7 @@ import 'emby-checkbox'; view.querySelector('.manualLoginForm').classList.add('hide'); view.querySelector('.btnManual').classList.remove('hide'); - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(view); }); } diff --git a/src/controllers/session/resetPassword/index.js b/src/controllers/session/resetPassword/index.js index d4f7df5bbd..cc84d76fae 100644 --- a/src/controllers/session/resetPassword/index.js +++ b/src/controllers/session/resetPassword/index.js @@ -1,4 +1,5 @@ -import globalize from 'globalize'; +import globalize from '../../../scripts/globalize'; +import Dashboard from '../../../scripts/clientUtils'; /* eslint-disable indent */ diff --git a/src/controllers/session/selectServer/index.js b/src/controllers/session/selectServer/index.js index 6a590fc318..32674a8062 100644 --- a/src/controllers/session/selectServer/index.js +++ b/src/controllers/session/selectServer/index.js @@ -1,19 +1,22 @@ -import loading from 'loading'; -import appRouter from 'appRouter'; -import layoutManager from 'layoutManager'; -import libraryMenu from 'libraryMenu'; -import appSettings from 'appSettings'; -import focusManager from 'focusManager'; -import globalize from 'globalize'; -import actionSheet from 'actionsheet'; -import dom from 'dom'; -import browser from 'browser'; -import 'material-icons'; -import 'flexStyles'; -import 'emby-scroller'; -import 'emby-itemscontainer'; -import 'cardStyle'; -import 'emby-button'; +import loading from '../../../components/loading/loading'; +import { appRouter } from '../../../components/appRouter'; +import layoutManager from '../../../components/layoutManager'; +import libraryMenu from '../../../scripts/libraryMenu'; +import appSettings from '../../../scripts/settings/appSettings'; +import focusManager from '../../../components/focusManager'; +import globalize from '../../../scripts/globalize'; +import actionSheet from '../../../components/actionSheet/actionSheet'; +import dom from '../../../scripts/dom'; +import browser from '../../../scripts/browser'; +import 'material-design-icons-iconfont'; +import '../../../assets/css/flexstyles.scss'; +import '../../../elements/emby-scroller/emby-scroller'; +import '../../../elements/emby-itemscontainer/emby-itemscontainer'; +import '../../../components/cardbuilder/card.css'; +import '../../../elements/emby-button/emby-button'; +import Dashboard from '../../../scripts/clientUtils'; +import ServerConnections from '../../../components/ServerConnections'; +import alert from '../../../components/alert'; /* eslint-disable indent */ @@ -100,9 +103,7 @@ import 'emby-button'; } function alertTextWithOptions(options) { - import('alert').then(({default: alert}) => { - alert(options); - }); + alert(options); } function showServerConnectionFailure() { @@ -112,7 +113,7 @@ import 'emby-button'; export default function (view, params) { function connectToServer(server) { loading.show(); - window.connectionManager.connectToServer(server, { + ServerConnections.connectToServer(server, { enableAutoLogin: appSettings.enableAutoLogin() }).then(function (result) { loading.hide(); @@ -144,7 +145,7 @@ import 'emby-button'; function deleteServer(server) { loading.show(); - window.connectionManager.deleteServer(server.Id).then(function () { + ServerConnections.deleteServer(server.Id).then(function () { loading.hide(); loadServers(); }); @@ -186,7 +187,7 @@ import 'emby-button'; function loadServers() { loading.show(); - window.connectionManager.getAvailableServers().then(onServersRetrieved); + ServerConnections.getAvailableServers().then(onServersRetrieved); } let servers; diff --git a/src/controllers/shows/episodes.js b/src/controllers/shows/episodes.js index 6dd633d7b0..3dd08e3f76 100644 --- a/src/controllers/shows/episodes.js +++ b/src/controllers/shows/episodes.js @@ -1,12 +1,13 @@ -import loading from 'loading'; -import events from 'events'; -import libraryBrowser from 'libraryBrowser'; -import imageLoader from 'imageLoader'; -import listView from 'listView'; -import cardBuilder from 'cardBuilder'; -import * as userSettings from 'userSettings'; -import globalize from 'globalize'; -import 'emby-itemscontainer'; +import loading from '../../components/loading/loading'; +import { Events } from 'jellyfin-apiclient'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import imageLoader from '../../components/images/imageLoader'; +import listView from '../../components/listview/listview'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import * as userSettings from '../../scripts/settings/userSettings'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import Dashboard from '../../scripts/clientUtils'; /* eslint-disable indent */ @@ -160,7 +161,7 @@ import 'emby-itemscontainer'; loading.hide(); isLoading = false; - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); @@ -171,13 +172,13 @@ import 'emby-itemscontainer'; let isLoading = false; self.showFilterMenu = function () { - import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { const filterDialog = new filterDialogFactory({ query: getQuery(tabContent), mode: 'episodes', serverId: ApiClient.serverId() }); - events.on(filterDialog, 'filterchange', function () { + Events.on(filterDialog, 'filterchange', function () { reloadItems(tabContent); }); filterDialog.show(); diff --git a/src/controllers/shows/tvgenres.js b/src/controllers/shows/tvgenres.js index 3a17fd7997..b29898730b 100644 --- a/src/controllers/shows/tvgenres.js +++ b/src/controllers/shows/tvgenres.js @@ -1,11 +1,11 @@ -import layoutManager from 'layoutManager'; -import loading from 'loading'; -import libraryBrowser from 'libraryBrowser'; -import cardBuilder from 'cardBuilder'; -import lazyLoader from 'lazyLoader'; -import globalize from 'globalize'; -import appRouter from 'appRouter'; -import 'emby-button'; +import layoutManager from '../../components/layoutManager'; +import loading from '../../components/loading/loading'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import lazyLoader from '../../components/lazyLoader/lazyLoaderIntersectionObserver'; +import globalize from '../../scripts/globalize'; +import { appRouter } from '../../components/appRouter'; +import '../../elements/emby-button/emby-button'; /* eslint-disable indent */ @@ -17,7 +17,7 @@ import 'emby-button'; if (!pageData) { pageData = data[key] = { query: { - SortBy: 'SortName', + SortBy: 'Random', SortOrder: 'Ascending', IncludeItemTypes: 'Series', Recursive: true, diff --git a/src/controllers/shows/tvrecommended.js b/src/controllers/shows/tvrecommended.js index db7bef2d50..c028a118d8 100644 --- a/src/controllers/shows/tvrecommended.js +++ b/src/controllers/shows/tvrecommended.js @@ -1,17 +1,20 @@ -import events from 'events'; -import inputManager from 'inputManager'; -import libraryMenu from 'libraryMenu'; -import layoutManager from 'layoutManager'; -import loading from 'loading'; -import dom from 'dom'; -import * as userSettings from 'userSettings'; -import cardBuilder from 'cardBuilder'; -import playbackManager from 'playbackManager'; -import * as mainTabsManager from 'mainTabsManager'; -import globalize from 'globalize'; -import 'scrollStyles'; -import 'emby-itemscontainer'; -import 'emby-button'; + +import { Events } from 'jellyfin-apiclient'; +import inputManager from '../../scripts/inputManager'; +import libraryMenu from '../../scripts/libraryMenu'; +import layoutManager from '../../components/layoutManager'; +import loading from '../../components/loading/loading'; +import dom from '../../scripts/dom'; +import * as userSettings from '../../scripts/settings/userSettings'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import { playbackManager } from '../../components/playback/playbackmanager'; +import * as mainTabsManager from '../../components/maintabsmanager'; +import globalize from '../../scripts/globalize'; +import '../../assets/css/scrollstyles.css'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; +import '../../elements/emby-button/emby-button'; +import Dashboard from '../../scripts/clientUtils'; +import autoFocuser from '../../components/autoFocuser'; /* eslint-disable indent */ @@ -127,9 +130,7 @@ import 'emby-button'; }); loading.hide(); - import('autoFocuser').then(({default: autoFocuser}) => { - autoFocuser.autoFocus(view); - }); + autoFocuser.autoFocus(view); }); } @@ -168,9 +169,7 @@ import 'emby-button'; }); loading.hide(); - import('autoFocuser').then(({default: autoFocuser}) => { - autoFocuser.autoFocus(view); - }); + autoFocuser.autoFocus(view); }); } @@ -209,9 +208,7 @@ import 'emby-button'; }); loading.hide(); - import('autoFocuser').then(({default: autoFocuser}) => { - autoFocuser.autoFocus(view); - }); + autoFocuser.autoFocus(view); }); } @@ -246,31 +243,31 @@ import 'emby-button'; switch (index) { case 0: - depends = 'controllers/shows/tvshows'; + depends = 'tvshows'; break; case 1: - depends = 'controllers/shows/tvrecommended'; + depends = 'tvrecommended'; break; case 2: - depends = 'controllers/shows/tvupcoming'; + depends = 'tvupcoming'; break; case 3: - depends = 'controllers/shows/tvgenres'; + depends = 'tvgenres'; break; case 4: - depends = 'controllers/shows/tvstudios'; + depends = 'tvstudios'; break; case 5: - depends = 'controllers/shows/episodes'; + depends = 'episodes'; break; } - import(depends).then(({default: controllerFactory}) => { + import(`../shows/${depends}`).then(({default: controllerFactory}) => { let tabContent; if (index === 1) { @@ -373,14 +370,14 @@ import 'emby-button'; } } - events.on(playbackManager, 'playbackstop', onPlaybackStop); - events.on(ApiClient, 'message', onWebSocketMessage); + Events.on(playbackManager, 'playbackstop', onPlaybackStop); + Events.on(ApiClient, 'message', onWebSocketMessage); inputManager.on(window, onInputCommand); }); view.addEventListener('viewbeforehide', function (e) { inputManager.off(window, onInputCommand); - events.off(playbackManager, 'playbackstop', onPlaybackStop); - events.off(ApiClient, 'message', onWebSocketMessage); + Events.off(playbackManager, 'playbackstop', onPlaybackStop); + Events.off(ApiClient, 'message', onWebSocketMessage); }); view.addEventListener('viewdestroy', function (e) { tabControllers.forEach(function (t) { diff --git a/src/controllers/shows/tvshows.js b/src/controllers/shows/tvshows.js index 949c994606..7ef60e21db 100644 --- a/src/controllers/shows/tvshows.js +++ b/src/controllers/shows/tvshows.js @@ -1,13 +1,13 @@ -import loading from 'loading'; -import events from 'events'; -import libraryBrowser from 'libraryBrowser'; -import imageLoader from 'imageLoader'; -import listView from 'listView'; -import cardBuilder from 'cardBuilder'; -import AlphaPicker from 'alphaPicker'; -import * as userSettings from 'userSettings'; -import globalize from 'globalize'; -import 'emby-itemscontainer'; +import loading from '../../components/loading/loading'; +import { Events } from 'jellyfin-apiclient'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import imageLoader from '../../components/images/imageLoader'; +import listView from '../../components/listview/listview'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import AlphaPicker from '../../components/alphaPicker/alphaPicker'; +import * as userSettings from '../../scripts/settings/userSettings'; +import globalize from '../../scripts/globalize'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; /* eslint-disable indent */ @@ -190,7 +190,7 @@ import 'emby-itemscontainer'; loading.hide(); isLoading = false; - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(page); }); }); @@ -214,13 +214,13 @@ import 'emby-itemscontainer'; let isLoading = false; this.showFilterMenu = function () { - import('components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { + import('../../components/filterdialog/filterdialog').then(({default: filterDialogFactory}) => { const filterDialog = new filterDialogFactory({ query: getQuery(tabContent), mode: 'series', serverId: ApiClient.serverId() }); - events.on(filterDialog, 'filterchange', function () { + Events.on(filterDialog, 'filterchange', function () { getQuery(tabContent).StartIndex = 0; reloadItems(tabContent); }); diff --git a/src/controllers/shows/tvstudios.js b/src/controllers/shows/tvstudios.js index 4be717fb7f..5a0276e5f4 100644 --- a/src/controllers/shows/tvstudios.js +++ b/src/controllers/shows/tvstudios.js @@ -1,6 +1,6 @@ -import loading from 'loading'; -import libraryBrowser from 'libraryBrowser'; -import cardBuilder from 'cardBuilder'; +import loading from '../../components/loading/loading'; +import libraryBrowser from '../../scripts/libraryBrowser'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; /* eslint-disable indent */ @@ -50,7 +50,7 @@ import cardBuilder from 'cardBuilder'; }); loading.hide(); - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(context); }); }); diff --git a/src/controllers/shows/tvupcoming.js b/src/controllers/shows/tvupcoming.js index f9df3df343..897c02b5a8 100644 --- a/src/controllers/shows/tvupcoming.js +++ b/src/controllers/shows/tvupcoming.js @@ -1,11 +1,11 @@ -import layoutManager from 'layoutManager'; -import loading from 'loading'; -import datetime from 'datetime'; -import cardBuilder from 'cardBuilder'; -import imageLoader from 'imageLoader'; -import globalize from 'globalize'; -import 'scrollStyles'; -import 'emby-itemscontainer'; +import layoutManager from '../../components/layoutManager'; +import loading from '../../components/loading/loading'; +import datetime from '../../scripts/datetime'; +import cardBuilder from '../../components/cardbuilder/cardBuilder'; +import imageLoader from '../../components/images/imageLoader'; +import globalize from '../../scripts/globalize'; +import '../../assets/css/scrollstyles.css'; +import '../../elements/emby-itemscontainer/emby-itemscontainer'; /* eslint-disable indent */ diff --git a/src/controllers/user/display/index.js b/src/controllers/user/display/index.js index 54f71ad571..322da73772 100644 --- a/src/controllers/user/display/index.js +++ b/src/controllers/user/display/index.js @@ -1,6 +1,6 @@ -import DisplaySettings from 'displaySettings'; -import * as userSettings from 'userSettings'; -import autoFocuser from 'autoFocuser'; +import DisplaySettings from '../../../components/displaySettings/displaySettings'; +import * as userSettings from '../../../scripts/settings/userSettings'; +import autoFocuser from '../../../components/autoFocuser'; /* eslint-disable indent */ diff --git a/src/controllers/user/home/index.js b/src/controllers/user/home/index.js index 539365ff97..a1bb503adb 100644 --- a/src/controllers/user/home/index.js +++ b/src/controllers/user/home/index.js @@ -1,7 +1,7 @@ -import HomescreenSettings from 'homescreenSettings'; -import * as userSettings from 'userSettings'; -import autoFocuser from 'autoFocuser'; -import 'listViewStyle'; +import HomescreenSettings from '../../../components/homeScreenSettings/homeScreenSettings'; +import * as userSettings from '../../../scripts/settings/userSettings'; +import autoFocuser from '../../../components/autoFocuser'; +import '../../../components/listview/listview.css'; /* eslint-disable indent */ diff --git a/src/controllers/user/menu/index.js b/src/controllers/user/menu/index.js index 88cf28a216..cfc5b5f4a5 100644 --- a/src/controllers/user/menu/index.js +++ b/src/controllers/user/menu/index.js @@ -1,7 +1,8 @@ -import appHost from 'apphost'; -import layoutManager from 'layoutManager'; -import 'listViewStyle'; -import 'emby-button'; +import { appHost } from '../../../components/apphost'; +import '../../../components/listview/listview.css'; +import '../../../elements/emby-button/emby-button'; +import layoutManager from '../../../components/layoutManager'; +import Dashboard from '../../../scripts/clientUtils'; export default function (view, params) { view.querySelector('.btnLogout').addEventListener('click', function () { @@ -53,7 +54,7 @@ export default function (view, params) { page.querySelector('.adminSection').classList.add('hide'); } - import('autoFocuser').then(({default: autoFocuser}) => { + import('../../../components/autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(view); }); }); diff --git a/src/controllers/user/playback/index.js b/src/controllers/user/playback/index.js index 34a5ae0b1d..a44e96ec10 100644 --- a/src/controllers/user/playback/index.js +++ b/src/controllers/user/playback/index.js @@ -1,7 +1,8 @@ -import PlaybackSettings from 'playbackSettings'; -import * as userSettings from 'userSettings'; -import autoFocuser from 'autoFocuser'; -import 'listViewStyle'; + +import PlaybackSettings from '../../../components/playbackSettings/playbackSettings'; +import * as userSettings from '../../../scripts/settings/userSettings'; +import autoFocuser from '../../../components/autoFocuser'; +import '../../../components/listview/listview.css'; /* eslint-disable indent */ diff --git a/src/controllers/user/profile/index.js b/src/controllers/user/profile/index.js index 631253d019..4398de36e2 100644 --- a/src/controllers/user/profile/index.js +++ b/src/controllers/user/profile/index.js @@ -1,9 +1,12 @@ -import UserPasswordPage from 'controllers/dashboard/users/userpasswordpage'; -import loading from 'loading'; -import libraryMenu from 'libraryMenu'; -import appHost from 'apphost'; -import globalize from 'globalize'; -import 'emby-button'; +import UserPasswordPage from '../../dashboard/users/userpasswordpage'; +import loading from '../../../components/loading/loading'; +import libraryMenu from '../../../scripts/libraryMenu'; +import { appHost } from '../../../components/apphost'; +import globalize from '../../../scripts/globalize'; +import '../../../elements/emby-button/emby-button'; +import Dashboard from '../../../scripts/clientUtils'; +import toast from '../../../components/toast/toast'; +import confirm from '../../../components/confirm/confirm'; function reloadUser(page) { const userId = getParameterByName('userId'); @@ -40,26 +43,20 @@ function onFileReaderError(evt) { loading.hide(); switch (evt.target.error.code) { case evt.target.error.NOT_FOUND_ERR: - import('toast').then(({default: toast}) => { - toast(globalize.translate('FileNotFound')); - }); + toast(globalize.translate('FileNotFound')); break; case evt.target.error.ABORT_ERR: onFileReaderAbort(); break; case evt.target.error.NOT_READABLE_ERR: default: - import('toast').then(({default: toast}) => { - toast(globalize.translate('FileReadError')); - }); + toast(globalize.translate('FileReadError')); } } function onFileReaderAbort(evt) { loading.hide(); - import('toast').then(({default: toast}) => { - toast(globalize.translate('FileReadCancelled')); - }); + toast(globalize.translate('FileReadCancelled')); } function setFiles(page, files) { @@ -89,14 +86,12 @@ export default function (view, params) { reloadUser(view); new UserPasswordPage(view, params); view.querySelector('#btnDeleteImage').addEventListener('click', function () { - import('confirm').then(({default: confirm}) => { - confirm(globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage')).then(function () { - loading.show(); - const userId = getParameterByName('userId'); - ApiClient.deleteUserImage(userId, 'primary').then(function () { - loading.hide(); - reloadUser(view); - }); + confirm(globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage')).then(function () { + loading.show(); + const userId = getParameterByName('userId'); + ApiClient.deleteUserImage(userId, 'primary').then(function () { + loading.hide(); + reloadUser(view); }); }); }); diff --git a/src/controllers/user/quickConnect/index.js b/src/controllers/user/quickConnect/index.js index 1600765ed5..162f3d9783 100644 --- a/src/controllers/user/quickConnect/index.js +++ b/src/controllers/user/quickConnect/index.js @@ -1,6 +1,6 @@ -import QuickConnectSettings from 'quickConnectSettings'; -import globalize from 'globalize'; -import toast from 'toast'; +import QuickConnectSettings from '../../../components/quickConnectSettings/quickConnectSettings'; +import globalize from '../../../scripts/globalize'; +import toast from '../../../components/toast/toast'; export default function (view) { let quickConnectSettingsInstance = null; diff --git a/src/controllers/user/subtitles/index.js b/src/controllers/user/subtitles/index.js index efa2f1bead..deb86535df 100644 --- a/src/controllers/user/subtitles/index.js +++ b/src/controllers/user/subtitles/index.js @@ -1,6 +1,6 @@ -import SubtitleSettings from 'subtitleSettings'; -import * as userSettings from 'userSettings'; -import autoFocuser from 'autoFocuser'; +import SubtitleSettings from '../../../components/subtitlesettings/subtitlesettings'; +import * as userSettings from '../../../scripts/settings/userSettings'; +import autoFocuser from '../../../components/autoFocuser'; /* eslint-disable indent */ diff --git a/src/controllers/wizard/finish/index.js b/src/controllers/wizard/finish/index.js index 5451d6665c..446d01e61c 100644 --- a/src/controllers/wizard/finish/index.js +++ b/src/controllers/wizard/finish/index.js @@ -1,4 +1,4 @@ -import loading from 'loading'; +import loading from '../../../components/loading/loading'; function onFinish() { loading.show(); diff --git a/src/controllers/wizard/remote/index.js b/src/controllers/wizard/remote/index.js index b967d668ad..c5689e73bb 100644 --- a/src/controllers/wizard/remote/index.js +++ b/src/controllers/wizard/remote/index.js @@ -1,7 +1,8 @@ -import loading from 'loading'; -import 'emby-checkbox'; -import 'emby-button'; -import 'emby-select'; +import loading from '../../../components/loading/loading'; +import '../../../elements/emby-checkbox/emby-checkbox'; +import '../../../elements/emby-button/emby-button'; +import '../../../elements/emby-select/emby-select'; +import Dashboard from '../../../scripts/clientUtils'; function save(page) { loading.show(); diff --git a/src/controllers/wizard/settings/index.js b/src/controllers/wizard/settings/index.js index 6e3a82cd9b..4a88e861f0 100644 --- a/src/controllers/wizard/settings/index.js +++ b/src/controllers/wizard/settings/index.js @@ -1,7 +1,8 @@ -import loading from 'loading'; -import 'emby-checkbox'; -import 'emby-button'; -import 'emby-select'; +import loading from '../../../components/loading/loading'; +import '../../../elements/emby-checkbox/emby-checkbox'; +import '../../../elements/emby-button/emby-button'; +import '../../../elements/emby-select/emby-select'; +import Dashboard from '../../../scripts/clientUtils'; function save(page) { loading.show(); diff --git a/src/controllers/wizard/start/index.js b/src/controllers/wizard/start/index.js index 3cd53b4ceb..3f524a870a 100644 --- a/src/controllers/wizard/start/index.js +++ b/src/controllers/wizard/start/index.js @@ -1,7 +1,8 @@ -import $ from 'jQuery'; -import loading from 'loading'; -import 'emby-button'; -import 'emby-select'; +import 'jquery'; +import loading from '../../../components/loading/loading'; +import '../../../elements/emby-button/emby-button'; +import '../../../elements/emby-select/emby-select'; +import Dashboard from '../../../scripts/clientUtils'; function loadPage(page, config, languageOptions) { $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) { diff --git a/src/controllers/wizard/user/index.js b/src/controllers/wizard/user/index.js index ec587fec8e..03566ac7ee 100644 --- a/src/controllers/wizard/user/index.js +++ b/src/controllers/wizard/user/index.js @@ -1,8 +1,10 @@ -import loading from 'loading'; -import globalize from 'globalize'; -import 'dashboardcss'; -import 'emby-input'; -import 'emby-button'; +import loading from '../../../components/loading/loading'; +import globalize from '../../../scripts/globalize'; +import '../../../assets/css/dashboard.css'; +import '../../../elements/emby-input/emby-input'; +import '../../../elements/emby-button/emby-button'; +import Dashboard from '../../../scripts/clientUtils'; +import toast from '../../../components/toast/toast'; function getApiClient() { return ApiClient; @@ -36,9 +38,7 @@ function onSubmit(e) { const form = this; if (form.querySelector('#txtManualPassword').value != form.querySelector('#txtPasswordConfirm').value) { - import('toast').then(({default: toast}) => { - toast(globalize.translate('PasswordMatchError')); - }); + toast(globalize.translate('PasswordMatchError')); } else { submit(form); } diff --git a/src/elements/emby-button/emby-button.js b/src/elements/emby-button/emby-button.js index 213bbc8e7f..3d911c6e37 100644 --- a/src/elements/emby-button/emby-button.js +++ b/src/elements/emby-button/emby-button.js @@ -1,10 +1,10 @@ -import dom from 'dom'; -import layoutManager from 'layoutManager'; -import shell from 'shell'; -import appRouter from 'appRouter'; -import appHost from 'apphost'; -import 'css!./emby-button'; -import 'webcomponents'; +import 'webcomponents.js/webcomponents-lite'; +import { removeEventListener, addEventListener } from '../../scripts/dom'; +import layoutManager from '../../components/layoutManager'; +import shell from '../../scripts/shell'; +import { appRouter } from '../../components/appRouter'; +import { appHost } from '../../components/apphost'; +import './emby-button.css'; const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); const EmbyLinkButtonPrototype = Object.create(HTMLAnchorElement.prototype); @@ -41,8 +41,8 @@ EmbyButtonPrototype.createdCallback = function () { EmbyButtonPrototype.attachedCallback = function () { if (this.tagName === 'A') { - dom.removeEventListener(this, 'click', onAnchorClick, {}); - dom.addEventListener(this, 'click', onAnchorClick, {}); + removeEventListener(this, 'click', onAnchorClick, {}); + addEventListener(this, 'click', onAnchorClick, {}); if (this.getAttribute('data-autohide') === 'true') { if (appHost.supports('externallinks')) { @@ -55,7 +55,7 @@ EmbyButtonPrototype.attachedCallback = function () { }; EmbyButtonPrototype.detachedCallback = function () { - dom.removeEventListener(this, 'click', onAnchorClick, {}); + removeEventListener(this, 'click', onAnchorClick, {}); }; EmbyLinkButtonPrototype.createdCallback = EmbyButtonPrototype.createdCallback; diff --git a/src/elements/emby-button/paper-icon-button-light.js b/src/elements/emby-button/paper-icon-button-light.js index f6c754fedb..ff817a31b4 100644 --- a/src/elements/emby-button/paper-icon-button-light.js +++ b/src/elements/emby-button/paper-icon-button-light.js @@ -1,6 +1,6 @@ -import layoutManager from 'layoutManager'; -import 'css!./emby-button'; -import 'webcomponents'; +import layoutManager from '../../components/layoutManager'; +import './emby-button.css'; +import 'webcomponents.js/webcomponents-lite'; const EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype); diff --git a/src/elements/emby-checkbox/emby-checkbox.js b/src/elements/emby-checkbox/emby-checkbox.js index d44c58ed48..0af079ec06 100644 --- a/src/elements/emby-checkbox/emby-checkbox.js +++ b/src/elements/emby-checkbox/emby-checkbox.js @@ -1,7 +1,7 @@ -import browser from 'browser'; -import dom from 'dom'; -import 'css!./emby-checkbox'; -import 'webcomponents'; +import browser from '../../scripts/browser'; +import dom from '../../scripts/dom'; +import './emby-checkbox.css'; +import 'webcomponents.js/webcomponents-lite'; /* eslint-disable indent */ diff --git a/src/elements/emby-collapse/emby-collapse.js b/src/elements/emby-collapse/emby-collapse.js index c87e73d48f..ca34a48554 100644 --- a/src/elements/emby-collapse/emby-collapse.js +++ b/src/elements/emby-collapse/emby-collapse.js @@ -1,6 +1,6 @@ -import 'css!./emby-collapse'; -import 'webcomponents'; -import 'emby-button'; +import './emby-collapse.css'; +import 'webcomponents.js/webcomponents-lite'; +import '../emby-button/emby-button'; /* eslint-disable indent */ diff --git a/src/elements/emby-input/emby-input.js b/src/elements/emby-input/emby-input.js index 3a71e29a6f..60f459f32b 100644 --- a/src/elements/emby-input/emby-input.js +++ b/src/elements/emby-input/emby-input.js @@ -1,7 +1,7 @@ -import browser from 'browser'; -import dom from 'dom'; -import 'css!./emby-input'; -import 'webcomponents'; +import browser from '../../scripts/browser'; +import dom from '../../scripts/dom'; +import './emby-input.css'; +import 'webcomponents.js/webcomponents-lite'; /* eslint-disable indent */ diff --git a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js index 51f3fc5be9..c3a15ce12e 100644 --- a/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js +++ b/src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js @@ -1,21 +1,21 @@ -import EmbyProgressRing from 'emby-progressring'; -import dom from 'dom'; -import serverNotifications from 'serverNotifications'; -import events from 'events'; -import 'webcomponents'; +import EmbyProgressRing from '../emby-progressring/emby-progressring'; +import dom from '../../scripts/dom'; +import serverNotifications from '../../scripts/serverNotifications'; +import { Events } from 'jellyfin-apiclient'; +import 'webcomponents.js/webcomponents-lite'; /* eslint-disable indent */ function addNotificationEvent(instance, name, handler) { const localHandler = handler.bind(instance); - events.on(serverNotifications, name, localHandler); + Events.on(serverNotifications, name, localHandler); instance[name] = localHandler; } function removeNotificationEvent(instance, name) { const handler = instance[name]; if (handler) { - events.off(serverNotifications, name, handler); + Events.off(serverNotifications, name, handler); instance[name] = null; } } diff --git a/src/elements/emby-itemscontainer/emby-itemscontainer.js b/src/elements/emby-itemscontainer/emby-itemscontainer.js index 7d8f941603..3d84ea6bed 100644 --- a/src/elements/emby-itemscontainer/emby-itemscontainer.js +++ b/src/elements/emby-itemscontainer/emby-itemscontainer.js @@ -1,15 +1,17 @@ -import itemShortcuts from 'itemShortcuts'; -import inputManager from 'inputManager'; -import playbackManager from 'playbackManager'; -import imageLoader from 'imageLoader'; -import layoutManager from 'layoutManager'; -import browser from 'browser'; -import dom from 'dom'; -import loading from 'loading'; -import focusManager from 'focusManager'; -import serverNotifications from 'serverNotifications'; -import events from 'events'; -import 'webcomponents'; +import itemShortcuts from '../../components/shortcuts'; +import inputManager from '../../scripts/inputManager'; +import { playbackManager } from '../../components/playback/playbackmanager'; +import imageLoader from '../../components/images/imageLoader'; +import layoutManager from '../../components/layoutManager'; +import browser from '../../scripts/browser'; +import dom from '../../scripts/dom'; +import loading from '../../components/loading/loading'; +import focusManager from '../../components/focusManager'; +import serverNotifications from '../../scripts/serverNotifications'; +import { Events } from 'jellyfin-apiclient'; +import 'webcomponents.js/webcomponents-lite'; +import ServerConnections from '../../components/ServerConnections'; +import Sortable from 'sortablejs'; /* eslint-disable indent */ @@ -72,7 +74,7 @@ import 'webcomponents'; } const self = this; - import('multiSelect').then(({default: MultiSelect}) => { + import('../../components/multiSelect/multiSelect').then(({default: MultiSelect}) => { self.multiSelect = new MultiSelect({ container: self, bindOnClick: false @@ -102,7 +104,7 @@ import 'webcomponents'; } const serverId = el.getAttribute('data-serverid'); - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); loading.show(); @@ -132,23 +134,21 @@ import 'webcomponents'; } const self = this; - import('sortable').then(({default: Sortable}) => { - self.sortable = new Sortable(self, { - draggable: '.listItem', - handle: '.listViewDragHandle', + self.sortable = new Sortable(self, { + draggable: '.listItem', + handle: '.listViewDragHandle', - // dragging ended - onEnd: function (evt) { - return onDrop(evt, self); - } - }); + // dragging ended + onEnd: function (evt) { + return onDrop(evt, self); + } }); }; function onUserDataChanged(e, apiClient, userData) { const itemsContainer = this; - import('cardBuilder').then(({default: cardBuilder}) => { + import('../../components/cardbuilder/cardBuilder').then((cardBuilder) => { cardBuilder.onUserDataChanged(userData, itemsContainer); }); @@ -183,7 +183,7 @@ import 'webcomponents'; // This could be null, not supported by all tv providers const newTimerId = data.Id; - import('cardBuilder').then(({default: cardBuilder}) => { + import('../../components/cardbuilder/cardBuilder').then((cardBuilder) => { cardBuilder.onTimerCreated(programId, newTimerId, itemsContainer); }); } @@ -203,7 +203,7 @@ import 'webcomponents'; return; } - import('cardBuilder').then(({default: cardBuilder}) => { + import('../../components/cardbuilder/cardBuilder').then((cardBuilder) => { cardBuilder.onTimerCancelled(data.Id, itemsContainer); }); } @@ -215,7 +215,7 @@ import 'webcomponents'; return; } - import('cardBuilder').then(({default: cardBuilder}) => { + import('../../components/cardbuilder/cardBuilder').then((cardBuilder) => { cardBuilder.onSeriesTimerCancelled(data.Id, itemsContainer); }); } @@ -270,7 +270,7 @@ import 'webcomponents'; function addNotificationEvent(instance, name, handler, owner) { const localHandler = handler.bind(instance); owner = owner || serverNotifications; - events.on(owner, name, localHandler); + Events.on(owner, name, localHandler); instance['event_' + name] = localHandler; } @@ -278,7 +278,7 @@ import 'webcomponents'; const handler = instance['event_' + name]; if (handler) { owner = owner || serverNotifications; - events.off(owner, name, handler); + Events.off(owner, name, handler); instance['event_' + name] = null; } } diff --git a/src/elements/emby-playstatebutton/emby-playstatebutton.js b/src/elements/emby-playstatebutton/emby-playstatebutton.js index 8d17ddf9ff..d177ed0df6 100644 --- a/src/elements/emby-playstatebutton/emby-playstatebutton.js +++ b/src/elements/emby-playstatebutton/emby-playstatebutton.js @@ -1,20 +1,21 @@ -import serverNotifications from 'serverNotifications'; -import events from 'events'; -import globalize from 'globalize'; -import EmbyButtonPrototype from 'emby-button'; +import serverNotifications from '../../scripts/serverNotifications'; +import { Events } from 'jellyfin-apiclient'; +import globalize from '../../scripts/globalize'; +import EmbyButtonPrototype from '../../elements/emby-button/emby-button'; +import ServerConnections from '../../components/ServerConnections'; /* eslint-disable indent */ function addNotificationEvent(instance, name, handler) { const localHandler = handler.bind(instance); - events.on(serverNotifications, name, localHandler); + Events.on(serverNotifications, name, localHandler); instance[name] = localHandler; } function removeNotificationEvent(instance, name) { const handler = instance[name]; if (handler) { - events.off(serverNotifications, name, handler); + Events.off(serverNotifications, name, handler); instance[name] = null; } } @@ -23,7 +24,7 @@ import EmbyButtonPrototype from 'emby-button'; const button = this; const id = button.getAttribute('data-id'); const serverId = button.getAttribute('data-serverid'); - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); if (!button.classList.contains('playstatebutton-played')) { apiClient.markPlayed(apiClient.getCurrentUserId(), id, new Date()); diff --git a/src/elements/emby-progressring/emby-progressring.js b/src/elements/emby-progressring/emby-progressring.js index 63b9f73f10..af463ebe4e 100644 --- a/src/elements/emby-progressring/emby-progressring.js +++ b/src/elements/emby-progressring/emby-progressring.js @@ -1,5 +1,5 @@ -import 'css!./emby-progressring'; -import 'webcomponents'; +import './emby-progressring.css'; +import 'webcomponents.js/webcomponents-lite'; /* eslint-disable indent */ @@ -9,7 +9,7 @@ import 'webcomponents'; this.classList.add('progressring'); const instance = this; - import('text!./emby-progressring.template.html').then(({default: template}) => { + import('./emby-progressring.template.html').then(({default: template}) => { instance.innerHTML = template; if (window.MutationObserver) { diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js index 7c468a84a6..46cf4989d8 100644 --- a/src/elements/emby-radio/emby-radio.js +++ b/src/elements/emby-radio/emby-radio.js @@ -1,7 +1,7 @@ -import layoutManager from 'layoutManager'; -import 'css!./emby-radio'; -import 'webcomponents'; -import browser from 'browser'; +import layoutManager from '../../components/layoutManager'; +import browser from '../../scripts/browser'; +import 'webcomponents.js/webcomponents-lite'; +import './emby-radio.css'; /* eslint-disable indent */ diff --git a/src/elements/emby-ratingbutton/emby-ratingbutton.js b/src/elements/emby-ratingbutton/emby-ratingbutton.js index 865d918b45..18ab1aa9a1 100644 --- a/src/elements/emby-ratingbutton/emby-ratingbutton.js +++ b/src/elements/emby-ratingbutton/emby-ratingbutton.js @@ -1,20 +1,21 @@ -import serverNotifications from 'serverNotifications'; -import events from 'events'; -import globalize from 'globalize'; -import EmbyButtonPrototype from 'emby-button'; +import serverNotifications from '../../scripts/serverNotifications'; +import { Events } from 'jellyfin-apiclient'; +import globalize from '../../scripts/globalize'; +import EmbyButtonPrototype from '../emby-button/emby-button'; +import ServerConnections from '../../components/ServerConnections'; /* eslint-disable indent */ function addNotificationEvent(instance, name, handler) { const localHandler = handler.bind(instance); - events.on(serverNotifications, name, localHandler); + Events.on(serverNotifications, name, localHandler); instance[name] = localHandler; } function removeNotificationEvent(instance, name) { const handler = instance[name]; if (handler) { - events.off(serverNotifications, name, handler); + Events.off(serverNotifications, name, handler); instance[name] = null; } } @@ -27,7 +28,7 @@ import EmbyButtonPrototype from 'emby-button'; const button = this; const id = button.getAttribute('data-id'); const serverId = button.getAttribute('data-serverid'); - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); let likes = this.getAttribute('data-likes'); const isFavorite = this.getAttribute('data-isfavorite') === 'true'; diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js index f7665c0618..639cb627cd 100644 --- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.js +++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.js @@ -1,6 +1,6 @@ -import 'css!./emby-scrollbuttons'; -import 'webcomponents'; -import 'paper-icon-button-light'; +import './emby-scrollbuttons.css'; +import 'webcomponents.js/webcomponents-lite'; +import '../emby-button/paper-icon-button-light'; /* eslint-disable indent */ diff --git a/src/elements/emby-scroller/emby-scroller.js b/src/elements/emby-scroller/emby-scroller.js index d7133e317a..396f1284e8 100644 --- a/src/elements/emby-scroller/emby-scroller.js +++ b/src/elements/emby-scroller/emby-scroller.js @@ -1,11 +1,11 @@ -import scroller from 'scroller'; -import dom from 'dom'; -import layoutManager from 'layoutManager'; -import inputManager from 'inputManager'; -import focusManager from 'focusManager'; -import browser from 'browser'; -import 'webcomponents'; -import 'css!./emby-scroller'; +import scroller from '../../libraries/scroller'; +import dom from '../../scripts/dom'; +import layoutManager from '../../components/layoutManager'; +import inputManager from '../../scripts/inputManager'; +import focusManager from '../../components/focusManager'; +import browser from '../../scripts/browser'; +import 'webcomponents.js/webcomponents-lite'; +import './emby-scroller.css'; /* eslint-disable indent */ @@ -156,7 +156,7 @@ import 'css!./emby-scroller'; }; function loadScrollButtons(scroller) { - import('emby-scrollbuttons').then(() => { + import('../emby-scrollbuttons/emby-scrollbuttons').then(() => { scroller.insertAdjacentHTML('beforebegin', '
'); }); } diff --git a/src/elements/emby-select/emby-select.js b/src/elements/emby-select/emby-select.js index 0629a74e52..4d336a63a9 100644 --- a/src/elements/emby-select/emby-select.js +++ b/src/elements/emby-select/emby-select.js @@ -1,8 +1,8 @@ -import layoutManager from 'layoutManager'; -import browser from 'browser'; -import actionsheet from 'actionsheet'; -import 'css!./emby-select'; -import 'webcomponents'; +import layoutManager from '../../components/layoutManager'; +import browser from '../../scripts/browser'; +import actionsheet from '../../components/actionSheet/actionSheet'; +import './emby-select.css'; +import 'webcomponents.js/webcomponents-lite'; /* eslint-disable indent */ diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js index 555394af0d..a38045694e 100644 --- a/src/elements/emby-slider/emby-slider.js +++ b/src/elements/emby-slider/emby-slider.js @@ -1,10 +1,10 @@ -import browser from 'browser'; -import dom from 'dom'; -import layoutManager from 'layoutManager'; -import keyboardnavigation from 'keyboardnavigation'; -import 'css!./emby-slider'; -import 'webcomponents'; -import 'emby-input'; +import browser from '../../scripts/browser'; +import dom from '../../scripts/dom'; +import layoutManager from '../../components/layoutManager'; +import keyboardnavigation from '../../scripts/keyboardNavigation'; +import './emby-slider.css'; +import 'webcomponents.js/webcomponents-lite'; +import '../emby-input/emby-input'; /* eslint-disable indent */ diff --git a/src/elements/emby-tabs/emby-tabs.js b/src/elements/emby-tabs/emby-tabs.js index 7e16e31dd4..ebe46f9165 100644 --- a/src/elements/emby-tabs/emby-tabs.js +++ b/src/elements/emby-tabs/emby-tabs.js @@ -1,13 +1,12 @@ -import dom from 'dom'; -import scroller from 'scroller'; -import browser from 'browser'; -import focusManager from 'focusManager'; -import 'webcomponents'; -import 'css!./emby-tabs'; -import 'scrollStyles'; +import 'webcomponents.js/webcomponents-lite'; +import dom from '../../scripts/dom'; +import scroller from '../../libraries/scroller'; +import browser from '../../scripts/browser'; +import focusManager from '../../components/focusManager'; +import './emby-tabs.css'; +import '../../assets/css/scrollstyles.css'; /* eslint-disable indent */ - const EmbyTabs = Object.create(HTMLDivElement.prototype); const buttonClass = 'emby-tab-button'; const activeButtonClass = buttonClass + '-active'; diff --git a/src/elements/emby-textarea/emby-textarea.js b/src/elements/emby-textarea/emby-textarea.js index c14724346a..18158d8703 100644 --- a/src/elements/emby-textarea/emby-textarea.js +++ b/src/elements/emby-textarea/emby-textarea.js @@ -1,6 +1,6 @@ -import 'css!./emby-textarea'; -import 'webcomponents'; -import 'emby-input'; +import './emby-textarea.css'; +import 'webcomponents.js/webcomponents-lite'; +import '../emby-input/emby-input'; /* eslint-disable indent */ diff --git a/src/elements/emby-toggle/emby-toggle.js b/src/elements/emby-toggle/emby-toggle.js index 5e78b38dd3..7539ae398d 100644 --- a/src/elements/emby-toggle/emby-toggle.js +++ b/src/elements/emby-toggle/emby-toggle.js @@ -1,5 +1,5 @@ -import 'css!./emby-toggle'; -import 'webcomponents'; +import './emby-toggle.css'; +import 'webcomponents.js/webcomponents-lite'; /* eslint-disable indent */ diff --git a/src/libraries/navdrawer/navdrawer.js b/src/libraries/navdrawer/navdrawer.js index 6dcf6783d1..214d86a02c 100644 --- a/src/libraries/navdrawer/navdrawer.js +++ b/src/libraries/navdrawer/navdrawer.js @@ -3,12 +3,12 @@ */ /* eslint-disable no-var */ -import browser from 'browser'; -import dom from 'dom'; -import 'css!./navdrawer'; -import 'scrollStyles'; +import browser from '../../scripts/browser'; +import dom from '../../scripts/dom'; +import './navdrawer.css'; +import '../../assets/css/scrollstyles.css'; -export default function (options) { +export function NavigationDrawer(options) { function getTouches(e) { return e.changedTouches || e.targetTouches || e.touches; } diff --git a/src/libraries/screensavermanager.js b/src/libraries/screensavermanager.js index 68a7dda73b..96a9c677b0 100644 --- a/src/libraries/screensavermanager.js +++ b/src/libraries/screensavermanager.js @@ -1,8 +1,9 @@ -import events from 'events'; -import playbackManager from 'playbackManager'; -import pluginManager from 'pluginManager'; -import inputManager from 'inputManager'; -import * as userSettings from 'userSettings'; +import { Events } from 'jellyfin-apiclient'; +import { playbackManager } from '../components/playback/playbackmanager'; +import { pluginManager } from '../components/pluginManager'; +import inputManager from '../scripts/inputManager'; +import * as userSettings from '../scripts/settings/userSettings'; +import ServerConnections from '../components/ServerConnections'; function getMinIdleTime() { // Returns the minimum amount of idle time required before the screen saver can be displayed @@ -16,7 +17,7 @@ function getFunctionalEventIdleTime() { return new Date().getTime() - lastFunctionalEvent; } -events.on(playbackManager, 'playbackstop', function (e, stopInfo) { +Events.on(playbackManager, 'playbackstop', function (e, stopInfo) { const state = stopInfo.state; if (state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') { lastFunctionalEvent = new Date().getTime(); @@ -84,7 +85,7 @@ function ScreenSaverManager() { this.show = function () { let isLoggedIn; - const apiClient = window.connectionManager.currentApiClient(); + const apiClient = ServerConnections.currentApiClient(); if (apiClient && apiClient.isLoggedIn()) { isLoggedIn = true; diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js index de6469c743..f2baf51572 100644 --- a/src/libraries/scroller.js +++ b/src/libraries/scroller.js @@ -2,12 +2,12 @@ * and will be replaced soon by a Vue component. */ -import browser from 'browser'; -import layoutManager from 'layoutManager'; -import dom from 'dom'; -import focusManager from 'focusManager'; -import ResizeObserver from 'ResizeObserver'; -import 'scrollStyles'; +import browser from '../scripts/browser'; +import layoutManager from '../components/layoutManager'; +import dom from '../scripts/dom'; +import focusManager from '../components/focusManager'; +import ResizeObserver from 'resize-observer-polyfill'; +import '../assets/css/scrollstyles.css'; /** * Return type of the value. diff --git a/src/plugins/backdropScreensaver/plugin.js b/src/plugins/backdropScreensaver/plugin.js index 917d8f48a3..2e550513e3 100644 --- a/src/plugins/backdropScreensaver/plugin.js +++ b/src/plugins/backdropScreensaver/plugin.js @@ -1,4 +1,5 @@ /* eslint-disable indent */ +import ServerConnections from '../../components/ServerConnections'; class BackdropScreensaver { constructor() { @@ -20,10 +21,10 @@ class BackdropScreensaver { Limit: 200 }; - const apiClient = window.connectionManager.currentApiClient(); + const apiClient = ServerConnections.currentApiClient(); apiClient.getItems(apiClient.getCurrentUserId(), query).then((result) => { if (result.Items.length) { - import('slideshow').then(({default: Slideshow}) => { + import('../../components/slideshow/slideshow').then(({default: Slideshow}) => { const newSlideShow = new Slideshow({ showTitle: true, cover: true, diff --git a/src/plugins/bookPlayer/plugin.js b/src/plugins/bookPlayer/plugin.js index 0c3d6850aa..7d7a8b89be 100644 --- a/src/plugins/bookPlayer/plugin.js +++ b/src/plugins/bookPlayer/plugin.js @@ -1,14 +1,14 @@ -import browser from 'browser'; -import loading from 'loading'; -import keyboardnavigation from 'keyboardnavigation'; -import dialogHelper from 'dialogHelper'; -import dom from 'dom'; -import events from 'events'; -import 'css!./style'; -import 'material-icons'; -import 'paper-icon-button-light'; - +import loading from '../../components/loading/loading'; +import keyboardnavigation from '../../scripts/keyboardNavigation'; +import dialogHelper from '../../components/dialogHelper/dialogHelper'; +import '../../scripts/dom'; +import { Events } from 'jellyfin-apiclient'; +import './style.css'; +import 'material-design-icons-iconfont'; +import '../../elements/emby-button/paper-icon-button-light'; +import ServerConnections from '../../components/ServerConnections'; import TableOfContents from './tableOfContents'; +import browser from '../../scripts/browser'; export class BookPlayer { constructor() { @@ -25,8 +25,9 @@ export class BookPlayer { } play(options) { - this._progress = 0; - this._loaded = false; + this.progress = 0; + this.cancellationToken = false; + this.loaded = false; loading.show(); const elem = this.createMediaElement(); @@ -36,35 +37,35 @@ export class BookPlayer { stop() { this.unbindEvents(); - const elem = this._mediaElement; - const tocElement = this._tocElement; - const rendition = this._rendition; + const elem = this.mediaElement; + const tocElement = this.tocElement; + const rendition = this.rendition; if (elem) { dialogHelper.close(elem); - this._mediaElement = null; + this.mediaElement = null; } if (tocElement) { tocElement.destroy(); - this._tocElement = null; + this.tocElement = null; } if (rendition) { rendition.destroy(); } - // Hide loader in case player was not fully loaded yet + // hide loader in case player was not fully loaded yet loading.hide(); - this._cancellationToken.shouldCancel = true; + this.cancellationToken = true; } currentItem() { - return this._currentItem; + return this.item; } currentTime() { - return this._progress * 1000; + return this.progress * 1000; } duration() { @@ -96,12 +97,10 @@ export class BookPlayer { onWindowKeyUp(e) { const key = keyboardnavigation.getKeyName(e); - - // TODO: depending on the event this can be the document or the rendition itself - const rendition = this._rendition || this; + const rendition = this.rendition; const book = rendition.book; - if (this._loaded === false) return; + if (!this.loaded) return; switch (key) { case 'l': case 'ArrowRight': @@ -114,9 +113,9 @@ export class BookPlayer { book.package.metadata.direction === 'rtl' ? rendition.next() : rendition.prev(); break; case 'Escape': - if (this._tocElement) { + if (this.tocElement) { // Close table of contents on ESC if it is open - this._tocElement.destroy(); + this.tocElement.destroy(); } else { // Otherwise stop the entire book player this.stop(); @@ -130,7 +129,7 @@ export class BookPlayer { } bindMediaElementEvents() { - const elem = this._mediaElement; + const elem = this.mediaElement; elem.addEventListener('close', this.onDialogClosed, {once: true}); elem.querySelector('#btnBookplayerExit').addEventListener('click', this.onDialogClosed, {once: true}); @@ -147,11 +146,11 @@ export class BookPlayer { document.addEventListener('keyup', this.onWindowKeyUp); // FIXME: I don't really get why document keyup event is not triggered when epub is in focus - this._rendition.on('keyup', this.onWindowKeyUp); + this.rendition.on('keyup', this.onWindowKeyUp); } unbindMediaElementEvents() { - const elem = this._mediaElement; + const elem = this.mediaElement; elem.removeEventListener('close', this.onDialogClosed); elem.querySelector('#btnBookplayerExit').removeEventListener('click', this.onDialogClosed); @@ -163,20 +162,20 @@ export class BookPlayer { } unbindEvents() { - if (this._mediaElement) { + if (this.mediaElement) { this.unbindMediaElementEvents(); } document.removeEventListener('keyup', this.onWindowKeyUp); - if (this._rendition) { - this._rendition.off('keyup', this.onWindowKeyUp); + if (this.rendition) { + this.rendition.off('keyup', this.onWindowKeyUp); } } openTableOfContents() { - if (this._loaded) { - this._tocElement = new TableOfContents(this); + if (this.loaded) { + this.tocElement = new TableOfContents(this); } } @@ -191,7 +190,7 @@ export class BookPlayer { } createMediaElement() { - let elem = this._mediaElement; + let elem = this.mediaElement; if (elem) { return elem; } @@ -207,8 +206,6 @@ export class BookPlayer { removeOnClose: true }); - elem.id = 'bookPlayer'; - let html = ''; if (browser.mobile) { @@ -226,13 +223,13 @@ export class BookPlayer { html += '
'; } + elem.id = 'bookPlayer'; elem.innerHTML = html; dialogHelper.open(elem); } - this._mediaElement = elem; - + this.mediaElement = elem; return elem; } @@ -253,7 +250,7 @@ export class BookPlayer { setCurrentSrc(elem, options) { const item = options.items[0]; - this._currentItem = item; + this.item = item; this.streamInfo = { started: true, ended: false, @@ -263,7 +260,7 @@ export class BookPlayer { }; const serverId = item.ServerId; - const apiClient = window.connectionManager.getApiClient(serverId); + const apiClient = ServerConnections.getApiClient(serverId); return new Promise((resolve, reject) => { import('epubjs').then(({default: epubjs}) => { @@ -271,13 +268,8 @@ export class BookPlayer { const book = epubjs(downloadHref, {openAs: 'epub'}); const rendition = this.render('viewer', book); - this._currentSrc = downloadHref; - this._rendition = rendition; - const cancellationToken = { - shouldCancel: false - }; - - this._cancellationToken = cancellationToken; + this.currentSrc = downloadHref; + this.rendition = rendition; return rendition.display().then(() => { const epubElem = document.querySelector('.epub-container'); @@ -285,10 +277,8 @@ export class BookPlayer { this.bindEvents(); - return this._rendition.book.locations.generate(1024).then(async () => { - if (cancellationToken.shouldCancel) { - return reject(); - } + return this.rendition.book.locations.generate(1024).then(async () => { + if (this.cancellationToken) reject(); const percentageTicks = options.startPositionTicks / 10000000; if (percentageTicks !== 0.0) { @@ -296,15 +286,14 @@ export class BookPlayer { await rendition.display(resumeLocation); } - this._loaded = true; + this.loaded = true; epubElem.style.display = 'block'; rendition.on('relocated', (locations) => { - this._progress = book.locations.percentageFromCfi(locations.start.cfi); - events.trigger(this, 'timeupdate'); + this.progress = book.locations.percentageFromCfi(locations.start.cfi); + Events.trigger(this, 'timeupdate'); }); loading.hide(); - return resolve(); }); }, () => { @@ -320,7 +309,7 @@ export class BookPlayer { } canPlayItem(item) { - if (item.Path && (item.Path.endsWith('epub'))) { + if (item.Path && item.Path.endsWith('epub')) { return true; } diff --git a/src/plugins/bookPlayer/tableOfContents.js b/src/plugins/bookPlayer/tableOfContents.js index a1c5d8f220..db498c10fd 100644 --- a/src/plugins/bookPlayer/tableOfContents.js +++ b/src/plugins/bookPlayer/tableOfContents.js @@ -1,9 +1,9 @@ -import dialogHelper from 'dialogHelper'; +import dialogHelper from '../../components/dialogHelper/dialogHelper'; export default class TableOfContents { constructor(bookPlayer) { - this._bookPlayer = bookPlayer; - this._rendition = bookPlayer._rendition; + this.bookPlayer = bookPlayer; + this.rendition = bookPlayer.rendition; this.onDialogClosed = this.onDialogClosed.bind(this); @@ -11,24 +11,24 @@ export default class TableOfContents { } destroy() { - const elem = this._elem; + const elem = this.elem; if (elem) { this.unbindEvents(); dialogHelper.close(elem); } - this._bookPlayer._tocElement = null; + this.bookPlayer.tocElement = null; } bindEvents() { - const elem = this._elem; + const elem = this.elem; elem.addEventListener('close', this.onDialogClosed, {once: true}); elem.querySelector('.btnBookplayerTocClose').addEventListener('click', this.onDialogClosed, {once: true}); } unbindEvents() { - const elem = this._elem; + const elem = this.elem; elem.removeEventListener('close', this.onDialogClosed); elem.querySelector('.btnBookplayerTocClose').removeEventListener('click', this.onDialogClosed); @@ -52,7 +52,7 @@ export default class TableOfContents { } createMediaElement() { - const rendition = this._rendition; + const rendition = this.rendition; const elem = dialogHelper.createDialog({ size: 'small', @@ -68,7 +68,8 @@ export default class TableOfContents { tocHtml += '