Merge branch 'master' into fonts

.dependabot/config.yml

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

.eslintrc.js

@@ -1,3 +1,5 @@
+const restrictedGlobals = require('confusing-browser-globals');
+
 module.exports = {
     root: true,
     plugins: [
@@ -39,6 +41,7 @@ module.exports = {
         'no-floating-decimal': ['error'],
         'no-multi-spaces': ['error'],
         'no-multiple-empty-lines': ['error', { 'max': 1 }],
+        'no-restricted-globals': ['error'].concat(restrictedGlobals),
         'no-trailing-spaces': ['error'],
         '@babel/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true, 'allowTaggedTemplates': true }],
         //'no-unused-vars': ['error', { 'vars': 'all', 'args': 'none', 'ignoreRestSiblings': true }],
@@ -81,7 +84,6 @@ module.exports = {
                 'ApiClient': 'writable',
                 'AppInfo': 'writable',
                 'chrome': 'writable',
-                'ConnectionManager': 'writable',
                 'DlnaProfilePage': 'writable',
                 'Dashboard': 'writable',
                 'DashboardPage': 'writable',

fedora/jellyfin-web.spec

@@ -11,6 +11,8 @@ Source0:        jellyfin-web-%{version}.tar.gz
 
 %if 0%{?centos}
 BuildRequires:  yarn
+# sadly the yarn RPM at https://dl.yarnpkg.com/rpm/ uses git but doesn't Requires: it
+BuildRequires: git
 %else
 BuildRequires:  nodejs-yarn
 %endif

package.json

@@ -5,27 +5,28 @@
   "repository": "https://github.com/jellyfin/jellyfin-web",
   "license": "GPL-2.0-or-later",
   "devDependencies": {
-    "@babel/core": "^7.11.1",
+    "@babel/core": "^7.11.5",
-    "@babel/eslint-parser": "^7.11.3",
+    "@babel/eslint-parser": "^7.11.5",
-    "@babel/eslint-plugin": "^7.11.3",
+    "@babel/eslint-plugin": "^7.11.5",
     "@babel/plugin-proposal-class-properties": "^7.10.1",
     "@babel/plugin-proposal-private-methods": "^7.10.1",
     "@babel/plugin-transform-modules-amd": "^7.10.5",
-    "@babel/polyfill": "^7.8.7",
+    "@babel/polyfill": "^7.11.5",
-    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-env": "^7.11.5",
     "autoprefixer": "^9.8.6",
     "babel-loader": "^8.0.6",
     "browser-sync": "^2.26.12",
+    "confusing-browser-globals": "^1.0.9",
     "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^4.2.1",
+    "css-loader": "^4.2.2",
     "cssnano": "^4.1.10",
     "del": "^5.1.0",
-    "eslint": "^7.7.0",
+    "eslint": "^7.8.1",
     "eslint-plugin-compat": "^3.5.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.21.2",
     "eslint-plugin-promise": "^4.2.1",
-    "file-loader": "^6.0.0",
+    "file-loader": "^6.1.0",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
     "gulp-cli": "^2.3.0",
@@ -38,47 +39,49 @@
     "gulp-postcss": "^8.0.0",
     "gulp-sass": "^4.0.2",
     "gulp-sourcemaps": "^2.6.5",
-    "gulp-terser": "^1.3.2",
+    "gulp-terser": "^1.4.0",
-    "html-webpack-plugin": "^4.3.0",
+    "html-webpack-plugin": "^4.4.1",
     "lazypipe": "^1.0.2",
     "node-sass": "^4.13.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
     "style-loader": "^1.1.3",
-    "stylelint": "^13.6.1",
+    "stylelint": "^13.7.0",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-no-browser-hacks": "^1.2.1",
     "stylelint-order": "^4.1.0",
     "webpack": "^4.44.1",
     "webpack-merge": "^4.2.2",
-    "webpack-stream": "^5.2.1"
+    "webpack-stream": "^6.1.0",
+    "worker-plugin": "^5.0.0"
   },
   "dependencies": {
     "alameda": "^1.4.0",
     "blurhash": "^1.1.3",
     "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
     "core-js": "^3.6.5",
-    "date-fns": "^2.15.0",
+    "date-fns": "^2.16.1",
     "epubjs": "^0.3.85",
     "fast-text-encoding": "^1.0.3",
     "flv.js": "^1.5.0",
     "headroom.js": "^0.11.0",
-    "hls.js": "^0.14.8",
+    "hls.js": "^0.14.11",
     "howler": "^2.2.0",
     "intersection-observer": "^0.11.0",
     "jellyfin-apiclient": "^1.4.1",
     "jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto",
     "jquery": "^3.5.1",
     "jstree": "^3.3.10",
+    "libarchive.js": "^1.3.0",
     "libass-wasm": "https://github.com/jellyfin/JavascriptSubtitlesOctopus#4.0.0-jf-smarttv",
-    "material-design-icons-iconfont": "^5.0.1",
+    "material-design-icons-iconfont": "^6.0.1",
     "native-promise-only": "^0.8.0-a",
     "page": "^1.11.6",
     "query-string": "^6.13.1",
     "resize-observer-polyfill": "^1.5.1",
     "screenfull": "^5.0.2",
     "sortablejs": "^1.10.2",
-    "swiper": "^5.4.5",
+    "swiper": "^6.1.1",
     "webcomponents.js": "^0.7.24",
     "whatwg-fetch": "^3.4.0"
   },
@@ -177,6 +180,7 @@
           "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",
@@ -320,6 +324,7 @@
           "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",

scripts/unused.py

@@ -16,7 +16,7 @@ langlst.append('en-us.json')
 dep = []
 
 def grep(key):
-    command = 'grep -r -E "(\(\\\"|\(\'|\{)%s(\\\"|\'|\})" --include=\*.{js,html} --exclude-dir=../src/strings ../src' % key
+    command = 'grep -r -E "(\\\"|\'|\{)%s(\\\"|\'|\})" --include=\*.{js,html} --exclude-dir=../src/strings ../src' % key
     p = subprocess.Popen(command, shell=True, stdout=subprocess.PIPE, stderr=subprocess.STDOUT)
     output = p.stdout.readlines()
     if output:

src/assets/css/fonts.css

@@ -1,7 +1,5 @@
 html {
     font-family: "Noto Sans", sans-serif;
-    font-size: 93%;
-    -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
@@ -29,7 +27,9 @@ h3 {
 }
 
 .layout-tv {
-    font-size: 130%;
+    /* Per WebOS and Tizen guidelines, fonts must be 20px minimum.
+       This takes the 16px baseline and multiplies it by 1.25 to get 20px. */
+    font-size: 125%;
 }
 
 .layout-mobile {

src/assets/css/librarybrowser.css

@@ -28,6 +28,10 @@
     padding-top: 0 !important;
 }
 
+.layout-tv .itemDetailPage {
+    padding-top: 4.2em !important;
+}
+
 .standalonePage {
     padding-top: 4.5em !important;
 }
@@ -163,6 +167,12 @@
     transition: background ease-in-out 0.5s;
 }
 
+.layout-tv .skinHeader {
+    /* In TV layout, it makes more sense to keep the top bar at the top of the page
+       Having it follow the view only makes us lose vertical space, while not being focusable */
+    position: relative;
+}
+
 .hiddenViewMenuBar .skinHeader {
     display: none;
 }
@@ -447,8 +457,7 @@
     height: 26.5vh;
 }
 
-.layout-desktop .itemBackdrop::after,
+.layout-desktop .itemBackdrop::after {
-.layout-tv .itemBackdrop::after {
     content: "";
     width: 100%;
     height: 100%;
@@ -456,8 +465,8 @@
     display: block;
 }
 
-.layout-desktop .noBackdrop .itemBackdrop,
+.layout-tv .itemBackdrop,
-.layout-tv .noBackdrop .itemBackdrop {
+.layout-desktop .noBackdrop .itemBackdrop {
     display: none;
 }
 
@@ -624,6 +633,10 @@
     z-index: 2;
 }
 
+.layout-tv .detailPagePrimaryContainer {
+    display: block;
+}
+
 .layout-mobile .detailPagePrimaryContainer {
     display: block;
     position: relative;
@@ -637,12 +650,16 @@
     padding-left: 32.45vw;
 }
 
-.layout-desktop .detailRibbon,
+.layout-desktop .detailRibbon {
-.layout-tv .detailRibbon {
     margin-top: -7.2em;
     height: 7.2em;
 }
 
+.layout-tv .detailRibbon {
+    margin-top: 0;
+    height: inherit;
+}
+
 .layout-desktop .noBackdrop .detailRibbon,
 .layout-tv .noBackdrop .detailRibbon {
     margin-top: 0;
@@ -748,8 +765,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
         position: relative;
     }
 
-    .layout-desktop .itemBackdrop,
+    .layout-desktop .itemBackdrop {
-    .layout-tv .itemBackdrop {
         height: 40vh;
     }
 
@@ -775,13 +791,8 @@ div.itemDetailGalleryLink.defaultCardBackground {
 }
 
 .emby-button.detailFloatingButton {
-    position: absolute;
+    font-size: 1.4em;
-    background-color: rgba(0, 0, 0, 0.5);
+    margin-right: 0.5em !important;
-    z-index: 3;
-    top: 100%;
-    left: 90%;
-    margin: -2.2em 0 0 -2.2em;
-    padding: 0.4em;
     color: rgba(255, 255, 255, 0.76);
 }
 
@@ -844,7 +855,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
     -webkit-align-items: center;
     align-items: center;
     margin: 0 !important;
-    padding: 0.5em 0.7em !important;
+    padding: 0.7em 0.7em !important;
 }
 
 @media all and (min-width: 29em) {
@@ -913,10 +924,6 @@ div.itemDetailGalleryLink.defaultCardBackground {
 }
 
 @media all and (min-width: 100em) {
-    .detailFloatingButton {
-        display: none !important;
-    }
-
     .personBackdrop {
         display: none !important;
     }
@@ -925,6 +932,11 @@ div.itemDetailGalleryLink.defaultCardBackground {
         font-size: 108%;
         margin: 1.25em 0;
     }
+
+    .layout-tv .mainDetailButtons {
+        font-size: 108%;
+        margin: 1em 0 1.25em;
+    }
 }
 
 @media all and (max-width: 50em) {
@@ -1140,13 +1152,13 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 }
 
 .layout-tv .padded-top-focusscale {
-    padding-top: 1em;
+    padding-top: 1.5em;
-    margin-top: -1em;
+    margin-top: -1.5em;
 }
 
 .layout-tv .padded-bottom-focusscale {
-    padding-bottom: 1em;
+    padding-bottom: 1.5em;
-    margin-bottom: -1em;
+    margin-bottom: -1.5em;
 }
 
 @media all and (min-height: 31.25em) {

src/assets/css/videoosd.css

@@ -248,8 +248,6 @@
 }
 
 @media all and (max-width: 30em) {
-    .btnFastForward,
-    .btnRewind,
     .osdMediaInfo,
     .osdPoster {
         display: none !important;

src/bundle.js

@@ -60,8 +60,8 @@ _define('resize-observer-polyfill', function() {
 });
 
 // swiper
-const swiper = require('swiper/js/swiper');
+const swiper = require('swiper/swiper-bundle');
-require('swiper/css/swiper.min.css');
+require('swiper/swiper-bundle.css');
 _define('swiper', function() {
     return swiper;
 });
@@ -175,3 +175,9 @@ _define('connectionManagerFactory', function () {
 _define('appStorage', function () {
     return apiclient.AppStorage;
 });
+
+// libarchive.js
+var libarchive = require('libarchive.js');
+_define('libarchive', function () {
+    return libarchive;
+});

src/components/activitylog.js

@@ -4,7 +4,6 @@ import dom from 'dom';
 import * as datefns from 'date-fns';
 import dfnshelper from 'dfnshelper';
 import serverNotifications from 'serverNotifications';
-import connectionManager from 'connectionManager';
 import 'emby-button';
 import 'listViewStyle';
 
@@ -141,7 +140,7 @@ class ActivityLog {
         const element = options.element;
         element.classList.add('activityLogListWidget');
         element.addEventListener('click', onListClick.bind(this));
-        const apiClient = connectionManager.getApiClient(options.serverId);
+        const apiClient = window.connectionManager.getApiClient(options.serverId);
         reloadData(this, element, apiClient);
         const onUpdate = onActivityLogUpdate.bind(this);
         this.updateFn = onUpdate;
@@ -153,7 +152,7 @@ class ActivityLog {
 
         if (options) {
             options.element.classList.remove('activityLogListWidget');
-            connectionManager.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500');
+            window.connectionManager.getApiClient(options.serverId).sendMessage('ActivityLogEntryStop', '0,1500');
         }
 
         const onUpdate = this.updateFn;

src/components/appRouter.js

@@ -2,7 +2,6 @@ import appHost from 'apphost';
 import appSettings from 'appSettings';
 import backdrop from 'backdrop';
 import browser from 'browser';
-import connectionManager from 'connectionManager';
 import events from 'events';
 import globalize from 'globalize';
 import itemHelper from 'itemHelper';
@@ -41,7 +40,7 @@ class AppRouter {
             }
         });
 
-        this.baseRoute = self.location.href.split('?')[0].replace(this.getRequestFile(), '');
+        this.baseRoute = window.location.href.split('?')[0].replace(this.getRequestFile(), '');
         // support hashbang
         this.baseRoute = this.baseRoute.split('#')[0];
         if (this.baseRoute.endsWith('/') && !this.baseRoute.endsWith('://')) {
@@ -55,7 +54,7 @@ class AppRouter {
      * @private
      */
     setBaseRoute() {
-        let baseRoute = self.location.pathname.replace(this.getRequestFile(), '');
+        let baseRoute = window.location.pathname.replace(this.getRequestFile(), '');
         if (baseRoute.lastIndexOf('/') === baseRoute.length - 1) {
             baseRoute = baseRoute.substring(0, baseRoute.length - 1);
         }
@@ -95,7 +94,7 @@ class AppRouter {
     beginConnectionWizard() {
         backdrop.clearBackdrop();
         loading.show();
-        connectionManager.connect({
+        window.connectionManager.connect({
             enableAutoLogin: appSettings.enableAutoLogin()
         }).then((result) => {
             this.handleConnectionResult(result);
@@ -154,7 +153,7 @@ class AppRouter {
         events.on(appHost, 'beforeexit', this.onBeforeExit);
         events.on(appHost, 'resume', this.onAppResume);
 
-        connectionManager.connect({
+        window.connectionManager.connect({
             enableAutoLogin: appSettings.enableAutoLogin()
         }).then((result) => {
             this.firstConnectionResult = result;
@@ -182,7 +181,7 @@ class AppRouter {
             return false;
         }
 
-        return history.length > 1;
+        return window.history.length > 1;
     }
 
     current() {
@@ -210,7 +209,7 @@ class AppRouter {
     showItem(item, serverId, options) {
         // TODO: Refactor this so it only gets items, not strings.
         if (typeof (item) === 'string') {
-            const apiClient = serverId ? connectionManager.getApiClient(serverId) : connectionManager.currentApiClient();
+            const apiClient = serverId ? window.connectionManager.getApiClient(serverId) : window.connectionManager.currentApiClient();
             apiClient.getItem(apiClient.getCurrentUserId(), item).then((itemObject) => {
                 this.showItem(itemObject, options);
             });
@@ -258,7 +257,7 @@ class AppRouter {
 
     pushState(state, title, url) {
         state.navigate = false;
-        history.pushState(state, title, url);
+        window.history.pushState(state, title, url);
     }
 
     enableNativeHistory() {
@@ -309,7 +308,9 @@ class AppRouter {
             url = route.contentPath || route.path;
         }
 
-        if (url.indexOf('://') === -1) {
+        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;
@@ -492,15 +493,15 @@ class AppRouter {
     }
 
     initApiClients() {
-        connectionManager.getApiClients().forEach((apiClient) => {
+        window.connectionManager.getApiClients().forEach((apiClient) => {
             this.initApiClient(apiClient, this);
         });
 
-        events.on(connectionManager, 'apiclientcreated', this.onApiClientCreated);
+        events.on(window.connectionManager, 'apiclientcreated', this.onApiClientCreated);
     }
 
     onAppResume() {
-        const apiClient = connectionManager.currentApiClient();
+        const apiClient = window.connectionManager.currentApiClient();
 
         if (apiClient) {
             apiClient.ensureWebSocket();
@@ -518,7 +519,7 @@ class AppRouter {
             }
         }
 
-        const apiClient = connectionManager.currentApiClient();
+        const apiClient = window.connectionManager.currentApiClient();
         const pathname = ctx.pathname.toLowerCase();
 
         console.debug('appRouter - processing path request ' + pathname);
@@ -594,7 +595,7 @@ class AppRouter {
     }
 
     getRequestFile() {
-        let path = self.location.pathname || '';
+        let path = window.location.pathname || '';
 
         const index = path.lastIndexOf('/');
         if (index !== -1) {

src/components/apphost.js

@@ -55,7 +55,7 @@ function replaceAll(originalString, strReplace, strWith) {
 function generateDeviceId() {
     const keys = [];
 
-    if (keys.push(navigator.userAgent), keys.push(new Date().getTime()), self.btoa) {
+    if (keys.push(navigator.userAgent), keys.push(new Date().getTime()), window.btoa) {
         const result = replaceAll(btoa(keys.join('|')), '=', '1');
         return Promise.resolve(result);
     }
@@ -404,9 +404,9 @@ document.addEventListener(visibilityChange, function () {
     }
 }, false);
 
-if (self.addEventListener) {
+if (window.addEventListener) {
-    self.addEventListener('focus', onAppVisible);
+    window.addEventListener('focus', onAppVisible);
-    self.addEventListener('blur', onAppHidden);
+    window.addEventListener('blur', onAppHidden);
 }
 
 export default appHost;

src/components/backdrop/backdrop.js

@@ -1,5 +1,4 @@
 import browser from 'browser';
-import connectionManager from 'connectionManager';
 import playbackManager from 'playbackManager';
 import dom from 'dom';
 import * as userSettings from 'userSettings';
@@ -177,7 +176,7 @@ import 'css!./backdrop';
     function getItemImageUrls(item, imageOptions) {
         imageOptions = imageOptions || {};
 
-        const apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = window.connectionManager.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, {

src/components/cardbuilder/card.css

@@ -209,6 +209,10 @@ button::-moz-focus-inner {
     contain: strict;
 }
 
+.defaultCardBackground {
+    display: flex;
+}
+
 .cardContent:not(.defaultCardBackground) {
     background-color: transparent;
 }
@@ -239,33 +243,13 @@ button::-moz-focus-inner {
     border: none;
 }
 
-.cardImage-img {
-    max-height: 100%;
-    max-width: 100%;
-
-    /* This is simply for lazy image purposes, to ensure the image is visible sooner when scrolling */
-    min-height: 70%;
-    min-width: 70%;
-    margin: auto;
-}
-
-.coveredImage-img {
-    width: 100%;
-    height: 100%;
-}
-
-.coveredImage-noscale-img {
-    max-height: none;
-    max-width: none;
-}
-
 .coveredImage {
     background-size: cover;
     background-position: center center;
 }
 
-.coveredImage-noScale {
+.coveredImage.coveredImage-contain {
-    background-size: cover;
+    background-size: contain;
 }
 
 .cardFooter {
@@ -372,6 +356,8 @@ button::-moz-focus-inner {
 .cardDefaultText {
     white-space: normal;
     text-align: center;
+    font-size: 2em;
+    font-weight: bold;
 }
 
 .cardImageContainer .cardImageIcon {

src/components/cardbuilder/cardBuilder.js

@@ -7,7 +7,6 @@
 
 import datetime from 'datetime';
 import imageLoader from 'imageLoader';
-import connectionManager from 'connectionManager';
 import itemHelper from 'itemHelper';
 import focusManager from 'focusManager';
 import indicators from 'indicators';
@@ -371,7 +370,7 @@ import 'programStyles';
 
                 if (serverId !== lastServerId) {
                     lastServerId = serverId;
-                    apiClient = connectionManager.getApiClient(lastServerId);
+                    apiClient = window.connectionManager.getApiClient(lastServerId);
                 }
 
                 if (options.indexBy) {
@@ -986,6 +985,10 @@ import 'programStyles';
                 lines = [];
             }
 
+            if (overlayText && showTitle) {
+                lines = [item.Name];
+            }
+
             const addRightTextMargin = isOuterFooter && options.cardLayout && !options.centerText && options.cardFooterAside !== 'none' && layoutManager.mobile;
 
             html += getCardTextLines(lines, cssClass, !options.overlayText, isOuterFooter, options.cardLayout, addRightTextMargin, options.lines);
@@ -1212,8 +1215,8 @@ import 'programStyles';
             if (coveredImage) {
                 cardImageContainerClass += ' coveredImage';
 
-                if (item.MediaType === 'Photo' || item.Type === 'PhotoAlbum' || item.Type === 'Folder' || item.ProgramInfo || item.Type === 'Program' || item.Type === 'Recording') {
+                if (item.Type === 'TvChannel') {
-                    cardImageContainerClass += ' coveredImage-noScale';
+                    cardImageContainerClass += ' coveredImage-contain';
                 }
             }
 

src/components/cardbuilder/chaptercardbuilder.js

@@ -7,7 +7,6 @@
 
 import datetime from 'datetime';
 import imageLoader from 'imageLoader';
-import connectionManager from 'connectionManager';
 import layoutManager from 'layoutManager';
 import browser from 'browser';
 
@@ -48,7 +47,7 @@ import browser from 'browser';
         let html = '';
         let itemsInRow = 0;
 
-        const apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = window.connectionManager.getApiClient(item.ServerId);
 
         for (let i = 0, length = chapters.length; i < length; i++) {
             if (options.rows && itemsInRow === 0) {

src/components/channelMapper/channelMapper.js

@@ -1,7 +1,6 @@
 import dom from 'dom';
 import dialogHelper from 'dialogHelper';
 import loading from 'loading';
-import connectionManager from 'connectionManager';
 import globalize from 'globalize';
 import actionsheet from 'actionsheet';
 import 'emby-input';
@@ -16,7 +15,7 @@ export default class channelMapper {
         function mapChannel(button, channelId, providerChannelId) {
             loading.show();
             const providerId = options.providerId;
-            connectionManager.getApiClient(options.serverId).ajax({
+            window.connectionManager.getApiClient(options.serverId).ajax({
                 type: 'POST',
                 url: ApiClient.getUrl('LiveTv/ChannelMappings'),
                 data: JSON.stringify({
@@ -24,6 +23,7 @@ export default class channelMapper {
                     tunerChannelId: channelId,
                     providerChannelId: providerChannelId
                 }),
+                contentType: 'application/json',
                 dataType: 'json'
             }).then(mapping => {
                 const listItem = dom.parentWithClass(button, 'listItem');
@@ -58,7 +58,7 @@ export default class channelMapper {
         }
 
         function getChannelMappingOptions(serverId, providerId) {
-            const apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = window.connectionManager.getApiClient(serverId);
             return apiClient.getJSON(apiClient.getUrl('LiveTv/ChannelMappingOptions', {
                 providerId: providerId
             }));

src/components/collectionEditor/collectionEditor.js

@@ -2,7 +2,6 @@ import dom from 'dom';
 import dialogHelper from 'dialogHelper';
 import loading from 'loading';
 import layoutManager from 'layoutManager';
-import connectionManager from 'connectionManager';
 import appRouter from 'appRouter';
 import globalize from 'globalize';
 import 'emby-checkbox';
@@ -25,7 +24,7 @@ import 'flexStyles';
 
         const collectionId = panel.querySelector('#selectCollectionToAddTo').value;
 
-        const apiClient = connectionManager.getApiClient(currentServerId);
+        const apiClient = window.connectionManager.getApiClient(currentServerId);
 
         if (collectionId) {
             addToCollection(apiClient, panel, collectionId);
@@ -106,7 +105,7 @@ import 'flexStyles';
             EnableTotalRecordCount: false
         };
 
-        const apiClient = connectionManager.getApiClient(currentServerId);
+        const apiClient = window.connectionManager.getApiClient(currentServerId);
         apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => {
             let html = '';
 

src/components/confirm/confirm.js

@@ -19,7 +19,7 @@ export default (() => {
             }
 
             const text = replaceAll(options.text || '', '<br/>', '\n');
-            const result = confirm(text);
+            const result = window.confirm(text);
 
             if (result) {
                 return Promise.resolve();

src/components/dialogHelper/dialogHelper.js

@@ -85,9 +85,9 @@ import 'scrollStyles';
             }
 
             if (!self.closedByBack && isHistoryEnabled(dlg)) {
-                const state = history.state || {};
+                const state = window.history.state || {};
                 if (state.dialogId === hash) {
-                    history.back();
+                    window.history.back();
                 }
             }
 
@@ -213,7 +213,7 @@ import 'scrollStyles';
     export function close(dlg) {
         if (isOpened(dlg)) {
             if (isHistoryEnabled(dlg)) {
-                history.back();
+                window.history.back();
             } else {
                 closeDialog(dlg);
             }
@@ -375,7 +375,7 @@ import 'scrollStyles';
             dlg.setAttribute('data-lockscroll', 'true');
         }
 
-        if (options.enableHistory !== false) {
+        if (options.enableHistory === true) {
             dlg.setAttribute('data-history', 'true');
         }
 

src/components/directorybrowser/directorybrowser.js

@@ -125,7 +125,7 @@ import 'emby-button';
         html += `<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ${readOnlyAttribute} label="${globalize.translate(labelKey)}"/>`;
         html += '</div>';
         if (!readOnlyAttribute) {
-            html += `<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="${globalize.translate('ButtonRefresh')}"><span class="material-icons search"></span></button>`;
+            html += `<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="${globalize.translate('Refresh')}"><span class="material-icons search"></span></button>`;
         }
         html += '</div>';
         if (!readOnlyAttribute) {
@@ -169,7 +169,8 @@ import 'emby-button';
             data: JSON.stringify({
                 ValidateWriteable: validateWriteable,
                 Path: path
-            })
+            }),
+            contentType: 'application/json'
         }).catch(response => {
             if (response) {
                 if (response.status === 404) {

src/components/displaySettings/displaySettings.js

@@ -6,7 +6,6 @@ import focusManager from 'focusManager';
 import datetime from 'datetime';
 import globalize from 'globalize';
 import loading from 'loading';
-import connectionManager from 'connectionManager';
 import skinManager from 'skinManager';
 import events from 'events';
 import 'emby-select';
@@ -182,7 +181,7 @@ import 'emby-button';
 
     function onSubmit(e) {
         const self = this;
-        const apiClient = connectionManager.getApiClient(self.options.serverId);
+        const apiClient = window.connectionManager.getApiClient(self.options.serverId);
         const userId = self.options.userId;
         const userSettings = self.options.userSettings;
 
@@ -221,7 +220,7 @@ import 'emby-button';
             loading.show();
 
             const userId = self.options.userId;
-            const apiClient = connectionManager.getApiClient(self.options.serverId);
+            const apiClient = window.connectionManager.getApiClient(self.options.serverId);
             const userSettings = self.options.userSettings;
 
             return apiClient.getUser(userId).then(user => {

src/components/displaySettings/displaySettings.template.html

@@ -170,7 +170,7 @@
     <div class="checkboxContainer checkboxContainer-withDescription fldThemeSong hide">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkThemeSong" />
-            <span>${EnableThemeSongs}</span>
+            <span>${ThemeSongs}</span>
         </label>
         <div class="fieldDescription checkboxFieldDescription">${EnableThemeSongsHelp}</div>
     </div>
@@ -178,7 +178,7 @@
     <div class="checkboxContainer checkboxContainer-withDescription fldThemeVideo hide">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkThemeVideo" />
-            <span>${EnableThemeVideos}</span>
+            <span>${ThemeVideos}</span>
         </label>
         <div class="fieldDescription checkboxFieldDescription">${EnableThemeVideosHelp}</div>
     </div>

src/components/favoriteitems.js

@@ -28,21 +28,21 @@ import 'emby-itemscontainer';
 
     function getSections() {
         return [{
-            name: 'HeaderFavoriteMovies',
+            name: 'Movies',
             types: 'Movie',
             id: 'favoriteMovies',
             shape: getPosterShape(),
             showTitle: false,
             overlayPlayButton: true
         }, {
-            name: 'HeaderFavoriteShows',
+            name: 'Shows',
             types: 'Series',
             id: 'favoriteShows',
             shape: getPosterShape(),
             showTitle: false,
             overlayPlayButton: true
         }, {
-            name: 'HeaderFavoriteEpisodes',
+            name: 'Episodes',
             types: 'Episode',
             id: 'favoriteEpisode',
             shape: getThumbShape(),
@@ -53,7 +53,7 @@ import 'emby-itemscontainer';
             overlayText: false,
             centerText: true
         }, {
-            name: 'HeaderFavoriteVideos',
+            name: 'Videos',
             types: 'Video,MusicVideo',
             id: 'favoriteVideos',
             shape: getThumbShape(),
@@ -63,7 +63,7 @@ import 'emby-itemscontainer';
             overlayText: false,
             centerText: true
         }, {
-            name: 'HeaderFavoriteArtists',
+            name: 'Artists',
             types: 'MusicArtist',
             id: 'favoriteArtists',
             shape: getSquareShape(),
@@ -75,7 +75,7 @@ import 'emby-itemscontainer';
             overlayPlayButton: true,
             coverImage: true
         }, {
-            name: 'HeaderFavoriteAlbums',
+            name: 'Albums',
             types: 'MusicAlbum',
             id: 'favoriteAlbums',
             shape: getSquareShape(),
@@ -87,7 +87,7 @@ import 'emby-itemscontainer';
             overlayPlayButton: true,
             coverImage: true
         }, {
-            name: 'HeaderFavoriteSongs',
+            name: 'Songs',
             types: 'Audio',
             id: 'favoriteSongs',
             shape: getSquareShape(),

src/components/filterdialog/filterdialog.js

@@ -1,7 +1,6 @@
 import dom from 'dom';
 import dialogHelper from 'dialogHelper';
 import globalize from 'globalize';
-import connectionManager from 'connectionManager';
 import events from 'events';
 import 'emby-checkbox';
 import 'emby-collapse';
@@ -420,7 +419,7 @@ import 'css!./style.css';
                     this.bindEvents(dlg);
                     if (enableDynamicFilters(this.options.mode)) {
                         dlg.classList.add('dynamicFilterDialog');
-                        const apiClient = connectionManager.getApiClient(this.options.serverId);
+                        const apiClient = window.connectionManager.getApiClient(this.options.serverId);
                         loadDynamicFilters(dlg, apiClient, apiClient.getCurrentUserId(), this.options.query);
                     }
                 });

src/components/filterdialog/filterdialog.template.html

@@ -6,12 +6,12 @@
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard"
                         data-filter="IsPlayed" />
-                    <span>${OptionPlayed}</span>
+                    <span>${Played}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard"
                         data-filter="IsUnPlayed" />
-                    <span>${OptionUnplayed}</span>
+                    <span>${Unplayed}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStandardFilter videoStandard"
@@ -21,7 +21,7 @@
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStandardFilter chkFavorite"
                         data-filter="IsFavorite" />
-                    <span>${OptionFavorite}</span>
+                    <span>${Favorites}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStandardFilter chkLikes" data-filter="Likes" />
@@ -53,11 +53,11 @@
             <div class="checkboxList">
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStatus" data-filter="Continuing" />
-                    <span>${OptionContinuing}</span>
+                    <span>${Continuing}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkStatus" data-filter="Ended" />
-                    <span>${OptionEnded}</span>
+                    <span>${Ended}</span>
                 </label>
             </div>
         </div>
@@ -68,15 +68,15 @@
             <div class="checkboxList">
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" id="chkSubtitle" />
-                    <span>${OptionHasSubtitles}</span>
+                    <span>${Subtitles}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" id="chkTrailer" />
-                    <span>${OptionHasTrailer}</span>
+                    <span>${ButtonTrailer}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" id="chkSpecialFeature" />
-                    <span>${OptionHasSpecialFeatures}</span>
+                    <span>${SpecialFeatures}</span>
                 </label>
                 <label>
                     <input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" id="chkThemeSong" />

src/components/filtermenu/filtermenu.js

@@ -3,7 +3,6 @@ import focusManager from 'focusManager';
 import dialogHelper from 'dialogHelper';
 import inputManager from 'inputManager';
 import layoutManager from 'layoutManager';
-import connectionManager from 'connectionManager';
 import globalize from 'globalize';
 import * as userSettings from 'userSettings';
 import 'emby-checkbox';
@@ -194,7 +193,7 @@ function initEditor(context, settings) {
     }
 }
 function loadDynamicFilters(context, options) {
-    var apiClient = connectionManager.getApiClient(options.serverId);
+    var apiClient = window.connectionManager.getApiClient(options.serverId);
 
     var filterMenuOptions = Object.assign(options.filterMenuOptions, {
 

src/components/groupedcards.js

@@ -2,12 +2,11 @@
 
 import dom from 'dom';
 import appRouter from 'appRouter';
-import connectionManager from 'connectionManager';
 
     function onGroupedCardClick(e, card) {
         var itemId = card.getAttribute('data-id');
         var serverId = card.getAttribute('data-serverid');
-        var apiClient = connectionManager.getApiClient(serverId);
+        var apiClient = window.connectionManager.getApiClient(serverId);
         var userId = apiClient.getCurrentUserId();
         var playedIndicator = card.querySelector('.playedIndicator');
         var playedIndicatorHtml = playedIndicator ? playedIndicator.innerHTML : null;

src/components/guide/guide.css

@@ -70,6 +70,10 @@
     contain: strict;
 }
 
+.programContainer.emby-scroller {
+    margin: 0;
+}
+
 .channelPrograms {
     height: 4.42em;
     contain: strict;

src/components/guide/guide.js

@@ -1,7 +1,6 @@
 import inputManager from 'inputManager';
 import browser from 'browser';
 import globalize from 'globalize';
-import connectionManager from 'connectionManager';
 import scrollHelper from 'scrollHelper';
 import serverNotifications from 'serverNotifications';
 import loading from 'loading';
@@ -213,7 +212,7 @@ function Guide(options) {
     }
 
     function reloadGuide(context, newStartDate, scrollToTimeMs, focusToTimeMs, startTimeOfDayMs, focusProgramOnRender) {
-        const apiClient = connectionManager.getApiClient(options.serverId);
+        const apiClient = window.connectionManager.getApiClient(options.serverId);
 
         const channelQuery = {
 
@@ -873,7 +872,7 @@ function Guide(options) {
     function reloadPage(page) {
         showLoading();
 
-        const apiClient = connectionManager.getApiClient(options.serverId);
+        const apiClient = window.connectionManager.getApiClient(options.serverId);
 
         apiClient.getLiveTvGuideInfo().then(function (guideInfo) {
             setDateRange(page, guideInfo);

src/components/homeScreenSettings/homeScreenSettings.js

@@ -2,7 +2,6 @@ import layoutManager from 'layoutManager';
 import focusManager from 'focusManager';
 import globalize from 'globalize';
 import loading from 'loading';
-import connectionManager from 'connectionManager';
 import homeSections from 'homeSections';
 import dom from 'dom';
 import events from 'events';
@@ -380,7 +379,7 @@ import 'emby-checkbox';
 
     function onSubmit(e) {
         const self = this;
-        const apiClient = connectionManager.getApiClient(self.options.serverId);
+        const apiClient = window.connectionManager.getApiClient(self.options.serverId);
         const userId = self.options.userId;
         const userSettings = self.options.userSettings;
 
@@ -452,7 +451,7 @@ import 'emby-checkbox';
             loading.show();
 
             const userId = self.options.userId;
-            const apiClient = connectionManager.getApiClient(self.options.serverId);
+            const apiClient = window.connectionManager.getApiClient(self.options.serverId);
             const userSettings = self.options.userSettings;
 
             apiClient.getUser(userId).then(user => {

src/components/homeScreenSettings/homeScreenSettings.template.html

@@ -1,6 +1,6 @@
 <form style="margin:0 auto;">
     <div class="verticalSection verticalSection-extrabottompadding">
-        <h2 class="sectionTitle">${HeaderHome}</h2>
+        <h2 class="sectionTitle">${Home}</h2>
 
         <div class="selectContainer hide selectTVHomeScreenContainer">
             <select is="emby-select" class="selectTVHomeScreen" label="${LabelTVHomeScreen}">

src/components/homesections/homesections.js

@@ -1,4 +1,3 @@
-import connectionManager from 'connectionManager';
 import cardBuilder from 'cardBuilder';
 import dom from 'dom';
 import layoutManager from 'layoutManager';
@@ -212,7 +211,7 @@ import 'css!./homesections';
 
     function getFetchLatestItemsFn(serverId, parentId, collectionType) {
         return function () {
-            const apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = window.connectionManager.getApiClient(serverId);
             let limit = 16;
 
             if (enableScrollX()) {
@@ -368,7 +367,7 @@ import 'css!./homesections';
 
     function getContinueWatchingFetchFn(serverId) {
         return function () {
-            const apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = window.connectionManager.getApiClient(serverId);
             const screenWidth = dom.getWindowSize().innerWidth;
 
             let limit;
@@ -441,7 +440,7 @@ import 'css!./homesections';
 
     function getContinueListeningFetchFn(serverId) {
         return function () {
-            const apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = window.connectionManager.getApiClient(serverId);
             const screenWidth = dom.getWindowSize().innerWidth;
 
             let limit;
@@ -514,7 +513,7 @@ import 'css!./homesections';
 
     function getOnNowFetchFn(serverId) {
         return function () {
-            const apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = window.connectionManager.getApiClient(serverId);
             return apiClient.getLiveTvRecommendedPrograms({
                 userId: apiClient.getCurrentUserId(),
                 IsAiring: true,
@@ -657,7 +656,7 @@ import 'css!./homesections';
 
     function getNextUpFetchFn(serverId) {
         return function () {
-            const apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = window.connectionManager.getApiClient(serverId);
             return apiClient.getNextUpEpisodes({
                 Limit: enableScrollX() ? 24 : 15,
                 Fields: 'PrimaryImageAspectRatio,SeriesInfo,DateCreated,BasicSyncInfo,Path',
@@ -728,7 +727,7 @@ import 'css!./homesections';
 
     function getLatestRecordingsFetchFn(serverId, activeRecordingsOnly) {
         return function () {
-            const apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = window.connectionManager.getApiClient(serverId);
             return apiClient.getLiveTvRecordings({
                 userId: apiClient.getCurrentUserId(),
                 Limit: enableScrollX() ? 12 : 5,

src/components/imageDownloader/imageDownloader.js

@@ -2,7 +2,6 @@ import dom from 'dom';
 import loading from 'loading';
 import appHost from 'apphost';
 import dialogHelper from 'dialogHelper';
-import connectionManager from 'connectionManager';
 import imageLoader from 'imageLoader';
 import browser from 'browser';
 import layoutManager from 'layoutManager';
@@ -317,7 +316,7 @@ import 'cardStyle';
         loading.show();
 
         import('text!./imageDownloader.template.html').then(({default: template}) => {
-            const apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = window.connectionManager.getApiClient(serverId);
 
             currentItemId = itemId;
             currentItemType = itemType;

src/components/imageOptionsEditor/imageOptionsEditor.template.html

@@ -15,41 +15,41 @@
 
                     <label>
                         <input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Primary" />
-                        <span>${OptionDownloadPrimaryImage}</span>
+                        <span>${Primary}</span>
                     </label>
 
                     <label>
                         <input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Art" />
-                        <span>${OptionDownloadArtImage}</span>
+                        <span>${Art}</span>
                     </label>
                     <label>
                         <input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="BoxRear" />
-                        <span>${OptionDownloadBackImage}</span>
+                        <span>${Back}</span>
                     </label>
                     <label>
                         <input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Banner" />
-                        <span>${OptionDownloadBannerImage}</span>
+                        <span>${Banner}</span>
                     </label>
                     <label>
                         <input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Box" />
-                        <span>${OptionDownloadBoxImage}</span>
+                        <span>${Box}</span>
                     </label>
 
                     <label>
                         <input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Disc" />
-                        <span>${OptionDownloadDiscImage}</span>
+                        <span>${Disc}</span>
                     </label>
                     <label>
                         <input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Logo" />
-                        <span>${OptionDownloadLogoImage}</span>
+                        <span>${Logo}</span>
                     </label>
                     <label>
                         <input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Menu" />
-                        <span>${OptionDownloadMenuImage}</span>
+                        <span>${Menu}</span>
                     </label>
                     <label>
                         <input type="checkbox" is="emby-checkbox" class="imageType" data-imagetype="Thumb" />
-                        <span>${OptionDownloadThumbImage}</span>
+                        <span>${Thumb}</span>
                     </label>
                 </div>
             </div>

src/components/imageUploader/imageUploader.js

@@ -6,7 +6,6 @@
  */
 
 import dialogHelper from 'dialogHelper';
-import connectionManager from 'connectionManager';
 import dom from 'dom';
 import loading from 'loading';
 import scrollHelper from 'scrollHelper';
@@ -108,7 +107,7 @@ import 'css!./style';
             return false;
         }
 
-        connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
+        window.connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
             dlg.querySelector('#uploadImage').value = '';
 
             loading.hide();

src/components/imageeditor/imageeditor.js

@@ -1,5 +1,4 @@
 import dialogHelper from 'dialogHelper';
-import connectionManager from 'connectionManager';
 import loading from 'loading';
 import dom from 'dom';
 import layoutManager from 'layoutManager';
@@ -36,10 +35,10 @@ import 'css!./imageeditor';
         let apiClient;
 
         if (item) {
-            apiClient = connectionManager.getApiClient(item.ServerId);
+            apiClient = window.connectionManager.getApiClient(item.ServerId);
             reloadItem(page, item, apiClient, focusContext);
         } else {
-            apiClient = connectionManager.getApiClient(currentItem.ServerId);
+            apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
             apiClient.getItem(apiClient.getCurrentUserId(), currentItem.Id).then(function (item) {
                 reloadItem(page, item, apiClient, focusContext);
             });
@@ -293,7 +292,7 @@ import 'css!./imageeditor';
     function showActionSheet(context, imageCard) {
         const itemId = imageCard.getAttribute('data-id');
         const serverId = imageCard.getAttribute('data-serverid');
-        const apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = window.connectionManager.getApiClient(serverId);
 
         const type = imageCard.getAttribute('data-imagetype');
         const index = parseInt(imageCard.getAttribute('data-index'));
@@ -404,7 +403,7 @@ import 'css!./imageeditor';
             const type = this.getAttribute('data-imagetype');
             let index = this.getAttribute('data-index');
             index = index === 'null' ? null : parseInt(index);
-            const apiClient = connectionManager.getApiClient(currentItem.ServerId);
+            const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
             deleteImage(context, currentItem.Id, type, index, apiClient, true);
         });
 
@@ -412,7 +411,7 @@ import 'css!./imageeditor';
             const type = this.getAttribute('data-imagetype');
             const index = this.getAttribute('data-index');
             const newIndex = this.getAttribute('data-newindex');
-            const apiClient = connectionManager.getApiClient(currentItem.ServerId);
+            const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
             moveImage(context, apiClient, currentItem.Id, type, index, newIndex, dom.parentWithClass(this, 'itemsContainer'));
         });
     }
@@ -424,7 +423,7 @@ import 'css!./imageeditor';
         loading.show();
 
         import('text!./imageeditor.template.html').then(({default: template}) => {
-            const apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = window.connectionManager.getApiClient(serverId);
             apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
                 const dialogOptions = {
                     removeOnClose: true

src/components/images/imageLoader.js

@@ -87,6 +87,9 @@ import 'css!./style';
             requestAnimationFrame(() => {
                 if (elem.tagName !== 'IMG') {
                     elem.style.backgroundImage = "url('" + url + "')";
+                    if (elem.classList.contains('blurhashed')) {
+                        elem.style.backgroundColor = '#fff';
+                    }
                 } else {
                     elem.setAttribute('src', url);
                 }
@@ -108,6 +111,7 @@ import 'css!./style';
         if (elem.tagName !== 'IMG') {
             url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, '');
             elem.style.backgroundImage = 'none';
+            elem.style.backgroundColor = null;
         } else {
             url = elem.getAttribute('src');
             elem.setAttribute('src', '');

src/components/itemContextMenu.js

@@ -1,6 +1,5 @@
 import appHost from 'apphost';
 import globalize from 'globalize';
-import connectionManager from 'connectionManager';
 import itemHelper from 'itemHelper';
 import appRouter from 'appRouter';
 import playbackManager from 'playbackManager';
@@ -330,7 +329,7 @@ import actionsheet from 'actionsheet';
     function executeCommand(item, id, options) {
         const itemId = item.Id;
         const serverId = item.ServerId;
-        const apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = window.connectionManager.getApiClient(serverId);
 
         return new Promise(function (resolve, reject) {
             switch (id) {

src/components/itemMediaInfo/itemMediaInfo.js

@@ -8,7 +8,6 @@
 import dialogHelper from 'dialogHelper';
 import layoutManager from 'layoutManager';
 import globalize from 'globalize';
-import connectionManager from 'connectionManager';
 import loading from 'loading';
 import 'emby-select';
 import 'listViewStyle';
@@ -52,8 +51,22 @@ import 'flexStyles';
             if (stream.Type === 'Data') {
                 continue;
             }
+
             html += '<div class="mediaInfoStream">';
-            const displayType = globalize.translate(`MediaInfoStreamType${stream.Type}`);
+            let translateString;
+            switch (stream.Type) {
+                case 'Audio':
+                case 'Data':
+                case 'Subtitle':
+                case 'Video':
+                    translateString = stream.Type;
+                    break;
+                case 'EmbeddedImage':
+                    translateString = 'Image';
+                    break;
+            }
+
+            const displayType = globalize.translate(translateString);
             html += `<h2 class="mediaInfoStreamType">${displayType}</h2>`;
             const attributes = [];
             if (stream.DisplayTitle) {
@@ -137,7 +150,7 @@ import 'flexStyles';
     }
 
     function loadMediaInfo(itemId, serverId, template) {
-        const apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = window.connectionManager.getApiClient(serverId);
         return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
             const dialogOptions = {
                 size: 'small',

src/components/itemMediaInfo/itemMediaInfo.template.html

@@ -2,7 +2,7 @@
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
         <span class="material-icons arrow_back"></span>
     </button>
-    <h3 class="formDialogHeaderTitle">${HeaderMediaInfo}</h3>
+    <h3 class="formDialogHeaderTitle">${MoreMediaInfo}</h3>
 </div>
 
 <div class="formDialogContent smoothScrollY">

src/components/itemidentifier/itemidentifier.js

@@ -7,7 +7,6 @@
 
 import dialogHelper from 'dialogHelper';
 import loading from 'loading';
-import connectionManager from 'connectionManager';
 import globalize from 'globalize';
 import scrollHelper from 'scrollHelper';
 import layoutManager from 'layoutManager';
@@ -31,7 +30,7 @@ import 'cardStyle';
     let currentSearchResult;
 
     function getApiClient() {
-        return connectionManager.getApiClient(currentServerId);
+        return window.connectionManager.getApiClient(currentServerId);
     }
 
     function searchForIdentificationResults(page) {

src/components/libraryoptionseditor/libraryoptionseditor.template.html

@@ -88,7 +88,7 @@
 <div class="checkboxContainer checkboxContainer-withDescription hide chkImportMissingEpisodesContainer advanced">
     <label>
         <input is="emby-checkbox" type="checkbox" id="chkImportMissingEpisodes" />
-        <span>${LabelDisplayMissingEpisodesWithinSeasons}</span>
+        <span>${DisplayMissingEpisodesWithinSeasons}</span>
     </label>
     <div class="fieldDescription checkboxFieldDescription">${ImportMissingEpisodesHelp}</div>
 </div>

src/components/listview/listview.js

@@ -8,7 +8,6 @@
 import itemHelper from 'itemHelper';
 import mediaInfo from 'mediaInfo';
 import indicators from 'indicators';
-import connectionManager from 'connectionManager';
 import layoutManager from 'layoutManager';
 import globalize from 'globalize';
 import datetime from 'datetime';
@@ -77,7 +76,7 @@ import 'emby-playstatebutton';
     }
 
     function getImageUrl(item, width) {
-        const apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = window.connectionManager.getApiClient(item.ServerId);
         let itemId;
 
         const options = {
@@ -106,7 +105,7 @@ import 'emby-playstatebutton';
     }
 
     function getChannelImageUrl(item, width) {
-        const apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = window.connectionManager.getApiClient(item.ServerId);
         const options = {
             maxWidth: width,
             type: 'Primary'
@@ -370,18 +369,8 @@ import 'emby-playstatebutton';
                     }
                 }
             } else {
-                let showArtist = options.artist === true;
+                if (options.artist) {
                     const artistItems = item.ArtistItems;
-
-                if (!showArtist && options.artist !== false) {
-                    if (!artistItems || !artistItems.length) {
-                        showArtist = true;
-                    } else if (artistItems.length > 1 || !containerAlbumArtistIds.includes(artistItems[0].Id)) {
-                        showArtist = true;
-                    }
-                }
-
-                if (showArtist) {
                     if (artistItems && item.Type !== 'MusicAlbum') {
                         textlines.push(artistItems.map(a => {
                             return a.Name;

src/components/metadataEditor/metadataEditor.js

@@ -4,7 +4,6 @@ import dialogHelper from 'dialogHelper';
 import datetime from 'datetime';
 import loading from 'loading';
 import focusManager from 'focusManager';
-import connectionManager from 'connectionManager';
 import globalize from 'globalize';
 import shell from 'shell';
 import 'emby-checkbox';
@@ -290,7 +289,7 @@ import 'flexStyles';
     }
 
     function getApiClient() {
-        return connectionManager.getApiClient(currentItem.ServerId);
+        return window.connectionManager.getApiClient(currentItem.ServerId);
     }
 
     function bindAll(elems, eventName, fn) {
@@ -370,7 +369,7 @@ import 'flexStyles';
     }
 
     function getItem(itemId, serverId) {
-        const apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = window.connectionManager.getApiClient(serverId);
 
         if (itemId) {
             return apiClient.getItem(apiClient.getCurrentUserId(), itemId);
@@ -380,7 +379,7 @@ import 'flexStyles';
     }
 
     function getEditorConfig(itemId, serverId) {
-        const apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = window.connectionManager.getApiClient(serverId);
 
         if (itemId) {
             return apiClient.getJSON(apiClient.getUrl('Items/' + itemId + '/MetadataEditor'));
@@ -1068,7 +1067,7 @@ import 'flexStyles';
 
             currentContext = dlg;
 
-            init(dlg, connectionManager.getApiClient(serverId));
+            init(dlg, window.connectionManager.getApiClient(serverId));
 
             reload(dlg, itemId, serverId);
         });
@@ -1095,7 +1094,7 @@ import 'flexStyles';
 
                     currentContext = elem;
 
-                    init(elem, connectionManager.getApiClient(serverId));
+                    init(elem, window.connectionManager.getApiClient(serverId));
                     reload(elem, itemId, serverId);
 
                     focusManager.autoFocus(elem);

src/components/multiSelect/multiSelect.js

@@ -1,7 +1,6 @@
 import browser from 'browser';
 import appHost from 'apphost';
 import loading from 'loading';
-import connectionManager from 'connectionManager';
 import globalize from 'globalize';
 import dom from 'dom';
 import 'css!./multiSelect';
@@ -170,7 +169,7 @@ import 'css!./multiSelect';
     }
 
     function showMenuForSelectedItems(e) {
-        const apiClient = connectionManager.currentApiClient();
+        const apiClient = window.connectionManager.currentApiClient();
 
         apiClient.getCurrentUser().then(user => {
             const menuItems = [];

src/components/notifications/notifications.js

@@ -248,7 +248,7 @@ events.on(serverNotifications, 'RestartRequired', function (e, apiClient) {
         [
             {
                 action: 'restart',
-                title: globalize.translate('ButtonRestart'),
+                title: globalize.translate('Restart'),
                 icon: getIconUrl()
             }
         ];

src/components/nowPlayingBar/nowPlayingBar.js

@@ -7,7 +7,6 @@ import playbackManager from 'playbackManager';
 import nowPlayingHelper from 'nowPlayingHelper';
 import appHost from 'apphost';
 import dom from 'dom';
-import connectionManager from 'connectionManager';
 import itemContextMenu from 'itemContextMenu';
 import 'paper-icon-button-light';
 import 'emby-ratingbutton';
@@ -452,7 +451,7 @@ import 'emby-ratingbutton';
             if (item.SeriesPrimaryImageTag) {
                 options.tag = item.SeriesPrimaryImageTag;
 
-                return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
             }
         }
 
@@ -460,12 +459,12 @@ import 'emby-ratingbutton';
             if (item.SeriesThumbImageTag) {
                 options.tag = item.SeriesThumbImageTag;
 
-                return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
             }
             if (item.ParentThumbImageTag) {
                 options.tag = item.ParentThumbImageTag;
 
-                return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
+                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
             }
         }
 
@@ -482,12 +481,12 @@ import 'emby-ratingbutton';
 
         if (item.ImageTags && item.ImageTags[options.type]) {
             options.tag = item.ImageTags[options.type];
-            return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
+            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
         }
 
         if (item.AlbumId && item.AlbumPrimaryImageTag) {
             options.tag = item.AlbumPrimaryImageTag;
-            return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
+            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
         }
 
         return null;
@@ -548,7 +547,7 @@ import 'emby-ratingbutton';
 
         if (nowPlayingItem.Id) {
             if (isRefreshing) {
-                const apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId);
+                const apiClient = window.connectionManager.getApiClient(nowPlayingItem.ServerId);
                 apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
                     const userData = item.UserData || {};
                     const likes = userData.Likes == null ? '' : userData.Likes;
@@ -701,7 +700,7 @@ import 'emby-ratingbutton';
 
         const player = this;
         currentRuntimeTicks = playbackManager.duration(player);
-        updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks, playbackManager.getBufferedRanges(player));
+        updateTimeDisplay(playbackManager.currentTime(player) * 10000, currentRuntimeTicks, playbackManager.getBufferedRanges(player));
     }
 
     function releaseCurrentPlayer() {

src/components/playback/mediasession.js

@@ -1,7 +1,6 @@
 import playbackManager from 'playbackManager';
 import nowPlayingHelper from 'nowPlayingHelper';
 import events from 'events';
-import connectionManager from 'connectionManager';
 /* eslint-disable indent */
 
     // Reports media playback to the device for lock screen control
@@ -16,16 +15,16 @@ import connectionManager from 'connectionManager';
         } else if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
             options.tag = item.SeriesPrimaryImageTag;
 
-            return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
         } else if (options.type === 'Thumb') {
             if (item.SeriesThumbImageTag) {
                 options.tag = item.SeriesThumbImageTag;
 
-                return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
             } else if (item.ParentThumbImageTag) {
                 options.tag = item.ParentThumbImageTag;
 
-                return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
+                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
             }
         }
 
@@ -38,11 +37,11 @@ import connectionManager from 'connectionManager';
         if (item.ImageTags && item.ImageTags[options.type]) {
             options.tag = item.ImageTags[options.type];
 
-            return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
+            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
         } else if (item.AlbumId && item.AlbumPrimaryImageTag) {
             options.tag = item.AlbumPrimaryImageTag;
 
-            return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
+            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
         }
 
         return null;

src/components/playback/playbackmanager.js

@@ -6,7 +6,6 @@ import pluginManager from 'pluginManager';
 import PlayQueueManager from 'playQueueManager';
 import * as userSettings from 'userSettings';
 import globalize from 'globalize';
-import connectionManager from 'connectionManager';
 import loading from 'loading';
 import appHost from 'apphost';
 import screenfull from 'screenfull';
@@ -69,7 +68,7 @@ function reportPlayback(playbackManagerInstance, state, player, reportPlaylist,
         addPlaylistToPlaybackReport(playbackManagerInstance, info, player, serverId);
     }
 
-    const apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = window.connectionManager.getApiClient(serverId);
     const reportPlaybackPromise = apiClient[method](info);
     // Notify that report has been sent
     reportPlaybackPromise.then(() => {
@@ -106,7 +105,7 @@ function normalizeName(t) {
 }
 
 function getItemsForPlayback(serverId, query) {
-    const apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = window.connectionManager.getApiClient(serverId);
 
     if (query.Ids && query.Ids.split(',').length === 1) {
         const itemId = query.Ids.split(',');
@@ -640,22 +639,18 @@ function supportsDirectPlay(apiClient, item, mediaSource) {
 
 function validatePlaybackInfoResult(instance, result) {
     if (result.ErrorCode) {
-        showPlaybackInfoErrorMessage(instance, result.ErrorCode);
+        showPlaybackInfoErrorMessage(instance, 'PlaybackError' + result.ErrorCode);
         return false;
     }
 
     return true;
 }
 
-function showPlaybackInfoErrorMessage(instance, errorCode, playNextTrack) {
+function showPlaybackInfoErrorMessage(instance, errorCode) {
     import('alert').then(({ default: alert }) => {
         alert({
-            text: globalize.translate('PlaybackError' + errorCode),
+            text: globalize.translate(errorCode),
             title: globalize.translate('HeaderPlaybackError')
-        }).then(function () {
-            if (playNextTrack) {
-                instance.nextTrack();
-            }
         });
     });
 }
@@ -874,7 +869,7 @@ class PlaybackManager {
             const promises = players.filter(displayPlayerIndividually).map(getPlayerTargets);
 
             return Promise.all(promises).then(function (responses) {
-                return connectionManager.currentApiClient().getCurrentUser().then(function (user) {
+                return window.connectionManager.currentApiClient().getCurrentUser().then(function (user) {
                     const targets = [];
 
                     targets.push({
@@ -1372,7 +1367,7 @@ class PlaybackManager {
         function getSavedMaxStreamingBitrate(apiClient, mediaType) {
             if (!apiClient) {
                 // This should hopefully never happen
-                apiClient = connectionManager.currentApiClient();
+                apiClient = window.connectionManager.currentApiClient();
             }
 
             const endpointInfo = apiClient.getSavedEndpointInfo() || {};
@@ -1395,7 +1390,7 @@ class PlaybackManager {
             const mediaType = playerData.streamInfo ? playerData.streamInfo.mediaType : null;
             const currentItem = self.currentItem(player);
 
-            const apiClient = currentItem ? connectionManager.getApiClient(currentItem.ServerId) : connectionManager.currentApiClient();
+            const apiClient = currentItem ? window.connectionManager.getApiClient(currentItem.ServerId) : window.connectionManager.currentApiClient();
             return getSavedMaxStreamingBitrate(apiClient, mediaType);
         };
 
@@ -1409,7 +1404,7 @@ class PlaybackManager {
             const mediaType = playerData.streamInfo ? playerData.streamInfo.mediaType : null;
             const currentItem = self.currentItem(player);
 
-            const apiClient = currentItem ? connectionManager.getApiClient(currentItem.ServerId) : connectionManager.currentApiClient();
+            const apiClient = currentItem ? window.connectionManager.getApiClient(currentItem.ServerId) : window.connectionManager.currentApiClient();
             const endpointInfo = apiClient.getSavedEndpointInfo() || {};
 
             return appSettings.enableAutomaticBitrateDetection(endpointInfo.IsInNetwork, mediaType);
@@ -1421,7 +1416,7 @@ class PlaybackManager {
                 return player.setMaxStreamingBitrate(options);
             }
 
-            const apiClient = connectionManager.getApiClient(self.currentItem(player).ServerId);
+            const apiClient = window.connectionManager.getApiClient(self.currentItem(player).ServerId);
 
             apiClient.getEndpointInfo().then(function (endpointInfo) {
                 const playerData = getPlayerData(player);
@@ -1618,12 +1613,8 @@ class PlaybackManager {
 
             player = player || self._currentPlayer;
             if (player && !enableLocalPlaylistManagement(player)) {
-                if (player.isLocalPlayer) {
-                    return player.seek((ticks || 0) / 10000);
-                } else {
                 return player.seek(ticks);
             }
-            }
 
             changeStream(player, ticks);
         };
@@ -1631,12 +1622,8 @@ class PlaybackManager {
         self.seekRelative = function (offsetTicks, player) {
             player = player || self._currentPlayer;
             if (player && !enableLocalPlaylistManagement(player) && player.seekRelative) {
-                if (player.isLocalPlayer) {
-                    return player.seekRelative((ticks || 0) / 10000);
-                } else {
                 return player.seekRelative(ticks);
             }
-            }
 
             const ticks = getCurrentTicks(player) + offsetTicks;
             return this.seek(ticks, player);
@@ -1691,7 +1678,7 @@ class PlaybackManager {
                 const subtitleStreamIndex = params.SubtitleStreamIndex == null ? getPlayerData(player).subtitleStreamIndex : params.SubtitleStreamIndex;
 
                 let currentMediaSource = self.currentMediaSource(player);
-                const apiClient = connectionManager.getApiClient(currentItem.ServerId);
+                const apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
 
                 if (ticks) {
                     ticks = parseInt(ticks);
@@ -1710,7 +1697,7 @@ class PlaybackManager {
                         streamInfo.lastMediaInfoQuery = lastMediaInfoQuery;
 
                         if (!streamInfo.url) {
-                            showPlaybackInfoErrorMessage(self, 'NoCompatibleStream', true);
+                            showPlaybackInfoErrorMessage(self, 'PlaybackErrorNoCompatibleStream');
                             return;
                         }
 
@@ -1847,7 +1834,7 @@ class PlaybackManager {
                 }, queryOptions));
             } else if (firstItem.Type === 'Episode' && items.length === 1 && getPlayer(firstItem, options).supportsProgress !== false) {
                 promise = new Promise(function (resolve, reject) {
-                    const apiClient = connectionManager.getApiClient(firstItem.ServerId);
+                    const apiClient = window.connectionManager.getApiClient(firstItem.ServerId);
 
                     apiClient.getCurrentUser().then(function (user) {
                         if (!user.Configuration.EnableNextEpisodeAutoPlay || !firstItem.SeriesId) {
@@ -2070,7 +2057,7 @@ class PlaybackManager {
 
             // If it's still null then there's nothing to play
             if (!firstItem) {
-                showPlaybackInfoErrorMessage(self, 'NoCompatibleStream', false);
+                showPlaybackInfoErrorMessage(self, 'PlaybackErrorNoCompatibleStream');
                 return Promise.reject();
             }
 
@@ -2078,7 +2065,7 @@ class PlaybackManager {
                 return playOther(items, options, user);
             }
 
-            const apiClient = connectionManager.getApiClient(firstItem.ServerId);
+            const apiClient = window.connectionManager.getApiClient(firstItem.ServerId);
 
             return getIntros(firstItem, apiClient, options).then(function (introsResult) {
                 const introItems = introsResult.Items;
@@ -2119,7 +2106,7 @@ class PlaybackManager {
         function playInternal(item, playOptions, onPlaybackStartedFn) {
             if (item.IsPlaceHolder) {
                 loading.hide();
-                showPlaybackInfoErrorMessage(self, 'PlaceHolder', true);
+                showPlaybackInfoErrorMessage(self, 'PlaybackErrorPlaceHolder');
                 return Promise.reject();
             }
 
@@ -2141,14 +2128,14 @@ class PlaybackManager {
                 const mediaType = item.MediaType;
 
                 const onBitrateDetectionFailure = function () {
-                    return playAfterBitrateDetect(getSavedMaxStreamingBitrate(connectionManager.getApiClient(item.ServerId), mediaType), item, playOptions, onPlaybackStartedFn);
+                    return playAfterBitrateDetect(getSavedMaxStreamingBitrate(window.connectionManager.getApiClient(item.ServerId), mediaType), item, playOptions, onPlaybackStartedFn);
                 };
 
                 if (!isServerItem(item) || itemHelper.isLocalItem(item)) {
                     return onBitrateDetectionFailure();
                 }
 
-                const apiClient = connectionManager.getApiClient(item.ServerId);
+                const apiClient = window.connectionManager.getApiClient(item.ServerId);
                 apiClient.getEndpointInfo().then(function (endpointInfo) {
                     if ((mediaType === 'Video' || mediaType === 'Audio') && appSettings.enableAutomaticBitrateDetection(endpointInfo.IsInNetwork, mediaType)) {
                         return apiClient.detectBitrate().then(function (bitrate) {
@@ -2267,7 +2254,7 @@ class PlaybackManager {
             return Promise.all([promise, player.getDeviceProfile(item)]).then(function (responses) {
                 const deviceProfile = responses[1];
 
-                const apiClient = connectionManager.getApiClient(item.ServerId);
+                const apiClient = window.connectionManager.getApiClient(item.ServerId);
 
                 const mediaSourceId = playOptions.mediaSourceId;
                 const audioStreamIndex = playOptions.audioStreamIndex;
@@ -2312,11 +2299,11 @@ class PlaybackManager {
             const startPosition = options.startPositionTicks || 0;
             const mediaType = options.mediaType || item.MediaType;
             const player = getPlayer(item, options);
-            const apiClient = connectionManager.getApiClient(item.ServerId);
+            const apiClient = window.connectionManager.getApiClient(item.ServerId);
 
             // Call this just to ensure the value is recorded, it is needed with getSavedMaxStreamingBitrate
             return apiClient.getEndpointInfo().then(function () {
-                const maxBitrate = getSavedMaxStreamingBitrate(connectionManager.getApiClient(item.ServerId), mediaType);
+                const maxBitrate = getSavedMaxStreamingBitrate(window.connectionManager.getApiClient(item.ServerId), mediaType);
 
                 return player.getDeviceProfile(item).then(function (deviceProfile) {
                     return getPlaybackMediaSource(player, apiClient, deviceProfile, maxBitrate, item, startPosition, options.mediaSourceId, options.audioStreamIndex, options.subtitleStreamIndex).then(function (mediaSource) {
@@ -2332,11 +2319,11 @@ class PlaybackManager {
             const mediaType = options.mediaType || item.MediaType;
             // TODO: Remove the true forceLocalPlayer hack
             const player = getPlayer(item, options, true);
-            const apiClient = connectionManager.getApiClient(item.ServerId);
+            const apiClient = window.connectionManager.getApiClient(item.ServerId);
 
             // Call this just to ensure the value is recorded, it is needed with getSavedMaxStreamingBitrate
             return apiClient.getEndpointInfo().then(function () {
-                const maxBitrate = getSavedMaxStreamingBitrate(connectionManager.getApiClient(item.ServerId), mediaType);
+                const maxBitrate = getSavedMaxStreamingBitrate(window.connectionManager.getApiClient(item.ServerId), mediaType);
 
                 return player.getDeviceProfile(item).then(function (deviceProfile) {
                     return getPlaybackInfo(player, apiClient, item, deviceProfile, maxBitrate, startPosition, false, null, null, null, null).then(function (playbackInfoResult) {
@@ -2488,7 +2475,7 @@ class PlaybackManager {
                                 return mediaSource;
                             }
                         } else {
-                            showPlaybackInfoErrorMessage(self, 'NoCompatibleStream');
+                            showPlaybackInfoErrorMessage(self, 'PlaybackErrorNoCompatibleStream');
                             return Promise.reject();
                         }
                     });
@@ -2720,7 +2707,7 @@ class PlaybackManager {
             const queueDirectToPlayer = player && !enableLocalPlaylistManagement(player);
 
             if (queueDirectToPlayer) {
-                const apiClient = connectionManager.getApiClient(items[0].ServerId);
+                const apiClient = window.connectionManager.getApiClient(items[0].ServerId);
 
                 player.getDeviceProfile(items[0]).then(function (profile) {
                     setStreamUrls(items, profile, self.getMaxStreamingBitrate(player), apiClient, 0).then(function () {
@@ -2977,7 +2964,7 @@ class PlaybackManager {
             }
 
             if (displayErrorCode && typeof (displayErrorCode) === 'string') {
-                showPlaybackInfoErrorMessage(self, displayErrorCode, nextItem);
+                showPlaybackInfoErrorMessage(self, 'PlaybackError' + displayErrorCode);
             } else if (nextItem) {
                 self.nextTrack();
             } else {
@@ -3170,13 +3157,13 @@ class PlaybackManager {
 
             streamInfo.lastMediaInfoQuery = new Date().getTime();
 
-            const apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = window.connectionManager.getApiClient(serverId);
 
             if (!apiClient.isMinServerVersion('3.2.70.7')) {
                 return;
             }
 
-            connectionManager.getApiClient(serverId).getLiveStreamMediaInfo(liveStreamId).then(function (info) {
+            window.connectionManager.getApiClient(serverId).getLiveStreamMediaInfo(liveStreamId).then(function (info) {
                 mediaSource.MediaStreams = info.MediaStreams;
                 events.trigger(player, 'mediastreamschange');
             }, function () {
@@ -3219,7 +3206,7 @@ class PlaybackManager {
             return player.currentTime();
         }
 
-        return this.getCurrentTicks(player);
+        return this.getCurrentTicks(player) / 10000;
     }
 
     nextItem(player = this._currentPlayer) {
@@ -3233,7 +3220,7 @@ class PlaybackManager {
             return Promise.reject();
         }
 
-        const apiClient = connectionManager.getApiClient(nextItem.item.ServerId);
+        const apiClient = window.connectionManager.getApiClient(nextItem.item.ServerId);
         return apiClient.getItem(apiClient.getCurrentUserId(), nextItem.item.Id);
     }
 
@@ -3374,7 +3361,7 @@ class PlaybackManager {
             return player.playTrailers(item);
         }
 
-        const apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = window.connectionManager.getApiClient(item.ServerId);
 
         const instance = this;
 
@@ -3406,7 +3393,7 @@ class PlaybackManager {
     }
 
     getSubtitleUrl(textStream, serverId) {
-        const apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = window.connectionManager.getApiClient(serverId);
 
         return !textStream.IsExternalUrl ? apiClient.getUrl(textStream.DeliveryUrl) : textStream.DeliveryUrl;
     }
@@ -3486,7 +3473,7 @@ class PlaybackManager {
             return player.instantMix(item);
         }
 
-        const apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = window.connectionManager.getApiClient(item.ServerId);
 
         const options = {};
         options.UserId = apiClient.getCurrentUserId();

src/components/playback/playbackorientation.js

@@ -18,7 +18,7 @@ events.on(playbackManager, 'playbackstart', function (e, player, state) {
 
     if (isLocalVideo && layoutManager.mobile) {
         /* eslint-disable-next-line compat/compat */
-        var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation || (screen.orientation && screen.orientation.lock);
+        var lockOrientation = window.screen.lockOrientation || window.screen.mozLockOrientation || window.screen.msLockOrientation || (window.screen.orientation && window.screen.orientation.lock);
 
         if (lockOrientation) {
             try {
@@ -39,7 +39,7 @@ events.on(playbackManager, 'playbackstart', function (e, player, state) {
 events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) {
     if (orientationLocked && !playbackStopInfo.nextMediaType) {
         /* eslint-disable-next-line compat/compat */
-        var unlockOrientation = screen.unlockOrientation || screen.mozUnlockOrientation || screen.msUnlockOrientation || (screen.orientation && screen.orientation.unlock);
+        var unlockOrientation = window.screen.unlockOrientation || window.screen.mozUnlockOrientation || window.screen.msUnlockOrientation || (window.screen.orientation && window.screen.orientation.unlock);
 
         if (unlockOrientation) {
             try {

src/components/playback/playersettingsmenu.js

@@ -1,4 +1,3 @@
-import connectionManager from 'connectionManager';
 import actionsheet from 'actionsheet';
 import playbackManager from 'playbackManager';
 import globalize from 'globalize';
@@ -251,7 +250,7 @@ export function show(options) {
         return showWithUser(options, player, null);
     }
 
-    var apiClient = connectionManager.getApiClient(currentItem.ServerId);
+    var apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
     return apiClient.getCurrentUser().then(function (user) {
         return showWithUser(options, player, user);
     });

src/components/playbackSettings/playbackSettings.js

@@ -5,7 +5,6 @@ import focusManager from 'focusManager';
 import qualityoptions from 'qualityoptions';
 import globalize from 'globalize';
 import loading from 'loading';
-import connectionManager from 'connectionManager';
 import events from 'events';
 import 'emby-select';
 import 'emby-checkbox';
@@ -258,7 +257,7 @@ import 'emby-checkbox';
 
     function onSubmit(e) {
         const self = this;
-        const apiClient = connectionManager.getApiClient(self.options.serverId);
+        const apiClient = window.connectionManager.getApiClient(self.options.serverId);
         const userId = self.options.userId;
         const userSettings = self.options.userSettings;
 
@@ -305,7 +304,7 @@ import 'emby-checkbox';
             loading.show();
 
             const userId = self.options.userId;
-            const apiClient = connectionManager.getApiClient(self.options.serverId);
+            const apiClient = window.connectionManager.getApiClient(self.options.serverId);
             const userSettings = self.options.userSettings;
 
             apiClient.getUser(userId).then(user => {

src/components/playerstats/playerstats.js

@@ -1,7 +1,6 @@
 import events from 'events';
 import globalize from 'globalize';
 import playbackManager from 'playbackManager';
-import connectionManager from 'connectionManager';
 import syncPlayManager from 'syncPlayManager';
 import playMethodHelper from 'playMethodHelper';
 import layoutManager from 'layoutManager';
@@ -95,7 +94,7 @@ import 'css!./playerstats';
             return Promise.resolve(instance.lastSession);
         }
 
-        const apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
+        const apiClient = window.connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
 
         return apiClient.getSessions({
             deviceId: apiClient.deviceId()
@@ -386,7 +385,7 @@ import 'css!./playerstats';
                 name: 'Original Media Info'
             });
 
-            var apiClient = connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
+            var apiClient = window.connectionManager.getApiClient(playbackManager.currentItem(player).ServerId);
             if (syncPlayManager.isSyncPlayEnabled() && apiClient.isMinServerVersion('10.6.0')) {
                 categories.push({
                     stats: getSyncPlayStats(),

src/components/playlisteditor/playlisteditor.js

@@ -3,7 +3,6 @@ import dialogHelper from 'dialogHelper';
 import loading from 'loading';
 import layoutManager from 'layoutManager';
 import playbackManager from 'playbackManager';
-import connectionManager from 'connectionManager';
 import * as userSettings from 'userSettings';
 import appRouter from 'appRouter';
 import globalize from 'globalize';
@@ -22,7 +21,7 @@ import 'emby-button';
         const panel = dom.parentWithClass(this, 'dialog');
 
         const playlistId = panel.querySelector('#selectPlaylistToAddTo').value;
-        const apiClient = connectionManager.getApiClient(currentServerId);
+        const apiClient = window.connectionManager.getApiClient(currentServerId);
 
         if (playlistId) {
             userSettings.set('playlisteditor-lastplaylistid', playlistId);
@@ -113,7 +112,7 @@ import 'emby-button';
             EnableTotalRecordCount: false
         };
 
-        const apiClient = connectionManager.getApiClient(currentServerId);
+        const apiClient = window.connectionManager.getApiClient(currentServerId);
         apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => {
             let html = '';
 

src/components/recordingcreator/recordingbutton.js

@@ -1,4 +1,3 @@
-import connectionManager from 'connectionManager';
 import dom from 'dom';
 import recordingHelper from 'recordingHelper';
 import 'paper-icon-button-light';
@@ -53,7 +52,7 @@ class RecordingButton {
     }
 
     refresh(serverId, itemId) {
-        const apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = window.connectionManager.getApiClient(serverId);
         const self = this;
         apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
             self.refreshItem(item);

src/components/recordingcreator/recordingcreator.js

@@ -2,7 +2,6 @@ import dialogHelper from 'dialogHelper';
 import globalize from 'globalize';
 import layoutManager from 'layoutManager';
 import mediaInfo from 'mediaInfo';
-import connectionManager from 'connectionManager';
 import require from 'require';
 import loading from 'loading';
 import scrollHelper from 'scrollHelper';
@@ -103,7 +102,7 @@ function renderRecording(context, defaultTimer, program, apiClient, refreshRecor
 function reload(context, programId, serverId, refreshRecordingStateOnly) {
     loading.show();
 
-    const apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = window.connectionManager.getApiClient(serverId);
 
     const promise1 = apiClient.getNewLiveTvTimerDefaults({ programId: programId });
     const promise2 = apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId());
@@ -119,7 +118,7 @@ function reload(context, programId, serverId, refreshRecordingStateOnly) {
 function executeCloseAction(action, programId, serverId) {
     if (action === 'play') {
         import('playbackManager').then(({ default: playbackManager }) => {
-            const apiClient = connectionManager.getApiClient(serverId);
+            const apiClient = window.connectionManager.getApiClient(serverId);
 
             apiClient.getLiveTvProgram(programId, apiClient.getCurrentUserId()).then(function (item) {
                 playbackManager.play({

src/components/recordingcreator/recordingeditor.js

@@ -1,7 +1,6 @@
 import dialogHelper from 'dialogHelper';
 import globalize from 'globalize';
 import layoutManager from 'layoutManager';
-import connectionManager from 'connectionManager';
 import loading from 'loading';
 import scrollHelper from 'scrollHelper';
 import 'scrollStyles';
@@ -41,7 +40,7 @@ function closeDialog(isDeleted) {
 function onSubmit(e) {
     const form = this;
 
-    const apiClient = connectionManager.getApiClient(currentServerId);
+    const apiClient = window.connectionManager.getApiClient(currentServerId);
 
     apiClient.getLiveTvTimer(currentItemId).then(function (item) {
         item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
@@ -61,7 +60,7 @@ function init(context) {
     });
 
     context.querySelector('.btnCancelRecording').addEventListener('click', function () {
-        const apiClient = connectionManager.getApiClient(currentServerId);
+        const apiClient = window.connectionManager.getApiClient(currentServerId);
 
         deleteTimer(apiClient, currentItemId).then(function () {
             closeDialog(true);
@@ -75,7 +74,7 @@ function reload(context, id) {
     loading.show();
     currentItemId = id;
 
-    const apiClient = connectionManager.getApiClient(currentServerId);
+    const apiClient = window.connectionManager.getApiClient(currentServerId);
     apiClient.getLiveTvTimer(id).then(function (result) {
         renderTimer(context, result, apiClient);
         loading.hide();

src/components/recordingcreator/recordingfields.js

@@ -1,5 +1,4 @@
 import globalize from 'globalize';
-import connectionManager from 'connectionManager';
 import serverNotifications from 'serverNotifications';
 import loading from 'loading';
 import dom from 'dom';
@@ -46,7 +45,7 @@ function loadData(parent, program, apiClient) {
 
 function fetchData(instance) {
     const options = instance.options;
-    const apiClient = connectionManager.getApiClient(options.serverId);
+    const apiClient = window.connectionManager.getApiClient(options.serverId);
 
     options.parent.querySelector('.recordingFields').classList.remove('hide');
     return apiClient.getLiveTvProgram(options.programId, apiClient.getCurrentUserId()).then(function (program) {
@@ -197,7 +196,7 @@ function onRecordChange(e) {
 
     const self = this;
     const options = this.options;
-    const apiClient = connectionManager.getApiClient(options.serverId);
+    const apiClient = window.connectionManager.getApiClient(options.serverId);
 
     const button = dom.parentWithTag(e.target, 'BUTTON');
     const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');
@@ -236,7 +235,7 @@ function onRecordSeriesChange(e) {
 
     const self = this;
     const options = this.options;
-    const apiClient = connectionManager.getApiClient(options.serverId);
+    const apiClient = window.connectionManager.getApiClient(options.serverId);
 
     const button = dom.parentWithTag(e.target, 'BUTTON');
     const isChecked = !button.querySelector('.material-icons').classList.contains('recordingIcon-active');

src/components/recordingcreator/recordinghelper.js

@@ -1,6 +1,5 @@
 import globalize from 'globalize';
 import loading from 'loading';
-import connectionManager from 'connectionManager';
 
 /*eslint prefer-const: "error"*/
 
@@ -40,7 +39,7 @@ function cancelTimerWithConfirmation(timerId, serverId) {
             }).then(function () {
                 loading.show();
 
-                const apiClient = connectionManager.getApiClient(serverId);
+                const apiClient = window.connectionManager.getApiClient(serverId);
                 cancelTimer(apiClient, timerId, true).then(resolve, reject);
             }, reject);
         });
@@ -60,7 +59,7 @@ function cancelSeriesTimerWithConfirmation(timerId, serverId) {
             }).then(function () {
                 loading.show();
 
-                const apiClient = connectionManager.getApiClient(serverId);
+                const apiClient = window.connectionManager.getApiClient(serverId);
                 apiClient.cancelLiveTvSeriesTimer(timerId).then(function () {
                     import('toast').then(({default: toast}) => {
                         toast(globalize.translate('SeriesCancelled'));
@@ -141,7 +140,7 @@ function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus,
                 buttons: items
 
             }).then(function (result) {
-                const apiClient = connectionManager.getApiClient(serverId);
+                const apiClient = window.connectionManager.getApiClient(serverId);
 
                 if (result === 'canceltimer') {
                     loading.show();
@@ -167,7 +166,7 @@ function showMultiCancellationPrompt(serverId, programId, timerId, timerStatus,
 }
 
 function toggleRecording(serverId, programId, timerId, timerStatus, seriesTimerId) {
-    const apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = window.connectionManager.getApiClient(serverId);
     const hasTimer = timerId && timerStatus !== 'Cancelled';
     if (seriesTimerId && hasTimer) {
         // cancel

src/components/recordingcreator/seriesrecordingeditor.js

@@ -1,7 +1,6 @@
 import dialogHelper from 'dialogHelper';
 import globalize from 'globalize';
 import layoutManager from 'layoutManager';
-import connectionManager from 'connectionManager';
 import loading from 'loading';
 import scrollHelper from 'scrollHelper';
 import datetime from 'datetime';
@@ -64,7 +63,7 @@ function closeDialog(isDeleted) {
 function onSubmit(e) {
     const form = this;
 
-    const apiClient = connectionManager.getApiClient(currentServerId);
+    const apiClient = window.connectionManager.getApiClient(currentServerId);
 
     apiClient.getLiveTvSeriesTimer(currentItemId).then(function (item) {
         item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
@@ -92,7 +91,7 @@ function init(context) {
     });
 
     context.querySelector('.btnCancelRecording').addEventListener('click', function () {
-        const apiClient = connectionManager.getApiClient(currentServerId);
+        const apiClient = window.connectionManager.getApiClient(currentServerId);
         deleteTimer(apiClient, currentItemId).then(function () {
             closeDialog(true);
         });
@@ -102,7 +101,7 @@ function init(context) {
 }
 
 function reload(context, id) {
-    const apiClient = connectionManager.getApiClient(currentServerId);
+    const apiClient = window.connectionManager.getApiClient(currentServerId);
 
     loading.show();
     if (typeof id === 'string') {

src/components/refreshdialog/refreshdialog.js

@@ -2,7 +2,6 @@ import dom from 'dom';
 import dialogHelper from 'dialogHelper';
 import loading from 'loading';
 import layoutManager from 'layoutManager';
-import connectionManager from 'connectionManager';
 import globalize from 'globalize';
 import 'emby-input';
 import 'emby-checkbox';
@@ -66,7 +65,7 @@ function onSubmit(e) {
     const dlg = dom.parentWithClass(e.target, 'dialog');
     const options = instance.options;
 
-    const apiClient = connectionManager.getApiClient(options.serverId);
+    const apiClient = window.connectionManager.getApiClient(options.serverId);
 
     const replaceAllMetadata = dlg.querySelector('#selectMetadataRefreshMode').value === 'all';
 

src/components/remotecontrol/remotecontrol.css

@@ -222,18 +222,10 @@
     margin: 0;
 }
 
-.layout-mobile .nowPlayingSecondaryButtons .btnShuffleQueue {
-    display: none;
-}
-
 .layout-mobile .nowPlayingSecondaryButtons .volumecontrol {
     display: none;
 }
 
-.layout-mobile .nowPlayingSecondaryButtons .btnRepeat {
-    display: none;
-}
-
 .layout-desktop .nowPlayingInfoButtons .btnRepeat,
 .layout-tv .nowPlayingInfoButtons .btnRepeat {
     display: none;
@@ -362,7 +354,8 @@
         border-radius: 0;
     }
 
-    .nowPlayingInfoButtons .btnRepeat {
+    .nowPlayingInfoButtons .btnRepeat,
+    .nowPlayingInfoButtons .btnRewind {
         position: absolute;
         left: 0;
         margin-left: 0;
@@ -370,7 +363,8 @@
         font-size: smaller;
     }
 
-    .nowPlayingInfoButtons .btnShuffleQueue {
+    .nowPlayingInfoButtons .btnShuffleQueue,
+    .nowPlayingInfoButtons .btnFastForward {
         position: absolute;
         right: 0;
         margin-right: 0;
@@ -468,7 +462,6 @@
 }
 
 @media all and (max-width: 63em) {
-    .nowPlayingSecondaryButtons .repeatToggleButton,
     .nowPlayingInfoButtons .playlist .listItemMediaInfo,
     .nowPlayingInfoButtons .btnStop {
         display: none !important;

src/components/remotecontrol/remotecontrol.js

@@ -5,7 +5,6 @@ import imageLoader from 'imageLoader';
 import playbackManager from 'playbackManager';
 import nowPlayingHelper from 'nowPlayingHelper';
 import events from 'events';
-import connectionManager from 'connectionManager';
 import appHost from 'apphost';
 import globalize from 'globalize';
 import layoutManager from 'layoutManager';
@@ -66,7 +65,7 @@ function showSubtitleMenu(context, player, button, item) {
     });
     menuItems.unshift({
         id: -1,
-        name: globalize.translate('ButtonOff'),
+        name: globalize.translate('Off'),
         selected: currentIndex == null
     });
 
@@ -96,18 +95,18 @@ function seriesImageUrl(item, options) {
     options.type = options.type || 'Primary';
     if (options.type === 'Primary' && item.SeriesPrimaryImageTag) {
         options.tag = item.SeriesPrimaryImageTag;
-        return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+        return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
     }
 
     if (options.type === 'Thumb') {
         if (item.SeriesThumbImageTag) {
             options.tag = item.SeriesThumbImageTag;
-            return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
         }
 
         if (item.ParentThumbImageTag) {
             options.tag = item.ParentThumbImageTag;
-            return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
+            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
         }
     }
 
@@ -120,12 +119,12 @@ function imageUrl(item, options) {
 
     if (item.ImageTags && item.ImageTags[options.type]) {
         options.tag = item.ImageTags[options.type];
-        return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
+        return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
     }
 
     if (item.AlbumId && item.AlbumPrimaryImageTag) {
         options.tag = item.AlbumPrimaryImageTag;
-        return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
+        return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
     }
 
     return null;
@@ -134,7 +133,7 @@ function imageUrl(item, options) {
 function updateNowPlayingInfo(context, state, serverId) {
     const item = state.NowPlayingItem;
     const displayName = item ? getNowPlayingNameHtml(item).replace('<br/>', ' - ') : '';
-    if (typeof item !== 'undefined') {
+    if (item) {
         const nowPlayingServerId = (item.ServerId || serverId);
         if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') {
             const songName = item.Name;
@@ -192,11 +191,11 @@ function updateNowPlayingInfo(context, state, serverId) {
             context.querySelector('.nowPlayingPageTitle').classList.add('hide');
         }
 
-        const url = item ? seriesImageUrl(item, {
+        const url = seriesImageUrl(item, {
             maxHeight: 300
         }) || imageUrl(item, {
             maxHeight: 300
-        }) : null;
+        });
 
         let contextButton = context.querySelector('.btnToggleContextMenu');
         // We remove the previous event listener by replacing the item in each update event
@@ -216,7 +215,7 @@ function updateNowPlayingInfo(context, state, serverId) {
             openAlbum: false,
             positionTo: contextButton
         };
-        const apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = window.connectionManager.getApiClient(item.ServerId);
         apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
             apiClient.getCurrentUser().then(function (user) {
                 contextButton.addEventListener('click', function () {
@@ -228,7 +227,6 @@ function updateNowPlayingInfo(context, state, serverId) {
             });
         });
         setImageUrl(context, state, url);
-        if (item) {
         backdrop.setBackdrops([item]);
         apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
             const userData = fullItem.UserData || {};
@@ -240,7 +238,6 @@ function updateNowPlayingInfo(context, state, serverId) {
         backdrop.clearBackdrop();
         context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
     }
-    }
 }
 
 function setImageUrl(context, state, url) {
@@ -332,8 +329,14 @@ export default function () {
         buttonVisible(context.querySelector('.btnNextTrack'), item != null);
         buttonVisible(context.querySelector('.btnPreviousTrack'), item != null);
         if (layoutManager.mobile) {
-            buttonVisible(context.querySelector('.btnRewind'), false);
+            const playingVideo = playbackManager.isPlayingVideo() && item !== null;
-            buttonVisible(context.querySelector('.btnFastForward'), false);
+            const playingAudio = !playbackManager.isPlayingVideo() && item !== null;
+            buttonVisible(context.querySelector('.btnRepeat'), playingAudio);
+            buttonVisible(context.querySelector('.btnShuffleQueue'), playingAudio);
+            buttonVisible(context.querySelector('.btnRewind'), playingVideo);
+            buttonVisible(context.querySelector('.btnFastForward'), playingVideo);
+            buttonVisible(context.querySelector('.nowPlayingSecondaryButtons .btnShuffleQueue'), playingVideo);
+            buttonVisible(context.querySelector('.nowPlayingSecondaryButtons .btnRepeat'), playingVideo);
         } else {
             buttonVisible(context.querySelector('.btnRewind'), item != null);
             buttonVisible(context.querySelector('.btnFastForward'), item != null);
@@ -615,7 +618,7 @@ export default function () {
             lastUpdateTime = now;
             const player = this;
             currentRuntimeTicks = playbackManager.duration(player);
-            updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks);
+            updateTimeDisplay(playbackManager.currentTime(player) * 10000, currentRuntimeTicks);
         }
     }
 

src/components/require/requiretext.js

@@ -2,7 +2,7 @@ define(function () {
     'use strict';
 
     // hack to work around the server's auto-redirection feature
-    var addRedirectPrevention = self.dashboardVersion != null && self.Dashboard && !self.AppInfo.isNativeApp;
+    var addRedirectPrevention = window.dashboardVersion != null && window.Dashboard && !window.AppInfo.isNativeApp;
 
     return {
 

src/components/search/searchresults.js

@@ -1,6 +1,5 @@
 import layoutManager from 'layoutManager';
 import globalize from 'globalize';
-import connectionManager from 'connectionManager';
 import cardBuilder from 'cardBuilder';
 import appRouter from 'appRouter';
 import 'emby-scroller';
@@ -606,7 +605,7 @@ class SearchResults {
         embed(options.element, this, options);
     }
     search(value) {
-        const apiClient = connectionManager.getApiClient(this.options.serverId);
+        const apiClient = window.connectionManager.getApiClient(this.options.serverId);
 
         search(this, apiClient, this.options.element, value);
     }

src/components/serviceworker/notifications.js

@@ -26,6 +26,7 @@
         });
     }
 
+    /* eslint-disable-next-line no-restricted-globals -- self is valid in a serviceworker environment */
     self.addEventListener('notificationclick', function (event) {
         var notification = event.notification;
         notification.close();

src/components/shortcuts.js

@@ -7,7 +7,6 @@
 
 import playbackManager from 'playbackManager';
 import inputManager from 'inputManager';
-import connectionManager from 'connectionManager';
 import appRouter from 'appRouter';
 import globalize from 'globalize';
 import dom from 'dom';
@@ -81,7 +80,7 @@ import recordingHelper from 'recordingHelper';
         const id = button.getAttribute('data-id');
         const type = button.getAttribute('data-type');
 
-        const apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = window.connectionManager.getApiClient(serverId);
 
         if (type === 'Timer') {
             return apiClient.getLiveTvTimer(id);
@@ -111,7 +110,7 @@ import recordingHelper from 'recordingHelper';
             }
 
             import('itemContextMenu').then(({default: itemContextMenu}) => {
-                connectionManager.getApiClient(item.ServerId).getCurrentUser().then(user => {
+                window.connectionManager.getApiClient(item.ServerId).getCurrentUser().then(user => {
                     itemContextMenu.show(Object.assign({
                         item: item,
                         play: true,
@@ -280,7 +279,7 @@ import recordingHelper from 'recordingHelper';
     }
 
     function playTrailer(item) {
-        const apiClient = connectionManager.getApiClient(item.ServerId);
+        const apiClient = window.connectionManager.getApiClient(item.ServerId);
 
         apiClient.getLocalTrailers(apiClient.getCurrentUserId(), item.Id).then(trailers => {
             playbackManager.play({ items: trailers });
@@ -288,7 +287,7 @@ import recordingHelper from 'recordingHelper';
     }
 
     function editItem(item, serverId) {
-        const apiClient = connectionManager.getApiClient(serverId);
+        const apiClient = window.connectionManager.getApiClient(serverId);
 
         return new Promise((resolve, reject) => {
             const serverId = apiClient.serverInfo().Id;

src/components/slideshow/slideshow.js

@@ -4,7 +4,6 @@
  */
 import dialogHelper from 'dialogHelper';
 import inputManager from 'inputManager';
-import connectionManager from 'connectionManager';
 import layoutManager from 'layoutManager';
 import focusManager from 'focusManager';
 import browser from 'browser';
@@ -85,7 +84,7 @@ function getBackdropImageUrl(item, options, apiClient) {
  * @returns {string} URL of the item's image.
  */
 function getImgUrl(item, user) {
-    const apiClient = connectionManager.getApiClient(item.ServerId);
+    const apiClient = window.connectionManager.getApiClient(item.ServerId);
     const imageOptions = {};
 
     if (item.BackdropImageTags && item.BackdropImageTags.length) {
@@ -256,7 +255,7 @@ export default function (options) {
     /**
      * Handles zoom changes.
      */
-    function onZoomChange(scale, imageEl, slideEl) {
+    function onZoomChange(swiper, scale, imageEl, slideEl) {
         const zoomImage = slideEl.querySelector('.swiper-zoom-fakeimg');
 
         if (zoomImage) {

src/components/subtitleeditor/subtitleeditor.js

@@ -2,7 +2,6 @@ import dialogHelper from 'dialogHelper';
 import layoutManager from 'layoutManager';
 import globalize from 'globalize';
 import * as userSettings from 'userSettings';
-import connectionManager from 'connectionManager';
 import loading from 'loading';
 import focusManager from 'focusManager';
 import dom from 'dom';
@@ -21,7 +20,7 @@ let hasChanges;
 function downloadRemoteSubtitles(context, id) {
     let url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
 
-    let apiClient = connectionManager.getApiClient(currentItem.ServerId);
+    let apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
     apiClient.ajax({
 
         type: 'POST',
@@ -55,7 +54,7 @@ function deleteLocalSubtitle(context, index) {
             let itemId = currentItem.Id;
             let url = 'Videos/' + itemId + '/Subtitles/' + index;
 
-            let apiClient = connectionManager.getApiClient(currentItem.ServerId);
+            let apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
 
             apiClient.ajax({
 
@@ -243,7 +242,7 @@ function searchForSubtitles(context, language) {
 
     loading.show();
 
-    let apiClient = connectionManager.getApiClient(currentItem.ServerId);
+    let apiClient = window.connectionManager.getApiClient(currentItem.ServerId);
     let url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
 
     apiClient.getJSON(url).then(function (results) {
@@ -356,7 +355,7 @@ function centerFocus(elem, horiz, on) {
 function showEditorInternal(itemId, serverId, template) {
     hasChanges = false;
 
-    let apiClient = connectionManager.getApiClient(serverId);
+    let apiClient = window.connectionManager.getApiClient(serverId);
     return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
         let dialogOptions = {
             removeOnClose: true,

src/components/subtitlesettings/subtitlesettings.js

@@ -4,7 +4,6 @@ import appSettings from 'appSettings';
 import focusManager from 'focusManager';
 import layoutManager from 'layoutManager';
 import loading from 'loading';
-import connectionManager from 'connectionManager';
 import subtitleAppearanceHelper from 'subtitleAppearanceHelper';
 import settingsHelper from 'settingsHelper';
 import dom from 'dom';
@@ -232,7 +231,7 @@ export class SubtitleSettings {
         loading.show();
 
         const userId = self.options.userId;
-        const apiClient = connectionManager.getApiClient(self.options.serverId);
+        const apiClient = window.connectionManager.getApiClient(self.options.serverId);
         const userSettings = self.options.userSettings;
 
         apiClient.getUser(userId).then(function (user) {
@@ -256,7 +255,7 @@ export class SubtitleSettings {
 
     onSubmit(e) {
         const self = this;
-        const apiClient = connectionManager.getApiClient(self.options.serverId);
+        const apiClient = window.connectionManager.getApiClient(self.options.serverId);
         const userId = self.options.userId;
         const userSettings = self.options.userSettings;
 

src/components/syncPlay/groupSelectionMenu.js

@@ -1,5 +1,4 @@
 import events from 'events';
-import connectionManager from 'connectionManager';
 import playbackManager from 'playbackManager';
 import syncPlayManager from 'syncPlayManager';
 import loading from 'loading';
@@ -172,8 +171,8 @@ export function show (button) {
         });
     });
 
-    const apiClient = connectionManager.currentApiClient();
+    const apiClient = window.connectionManager.currentApiClient();
-    connectionManager.user(apiClient).then((user) => {
+    window.connectionManager.user(apiClient).then((user) => {
         if (syncPlayEnabled) {
             showLeaveGroupSelection(button, user, apiClient);
         } else {

src/components/syncPlay/syncPlayManager.js

@@ -4,7 +4,6 @@
  */
 
 import events from 'events';
-import connectionManager from 'connectionManager';
 import playbackManager from 'playbackManager';
 import timeSyncManager from 'timeSyncManager';
 import toast from 'toast';
@@ -128,7 +127,7 @@ class SyncPlayManager {
 
             // Report ping
             if (this.syncEnabled) {
-                const apiClient = connectionManager.currentApiClient();
+                const apiClient = window.connectionManager.currentApiClient();
                 const sessionId = getActivePlayerId();
 
                 if (!sessionId) {
@@ -660,7 +659,7 @@ class SyncPlayManager {
      * Overrides PlaybackManager's unpause method.
      */
     playRequest (player) {
-        var apiClient = connectionManager.currentApiClient();
+        var apiClient = window.connectionManager.currentApiClient();
         apiClient.requestSyncPlayStart();
     }
 
@@ -668,7 +667,7 @@ class SyncPlayManager {
      * Overrides PlaybackManager's pause method.
      */
     pauseRequest (player) {
-        var apiClient = connectionManager.currentApiClient();
+        var apiClient = window.connectionManager.currentApiClient();
         apiClient.requestSyncPlayPause();
         // Pause locally as well, to give the user some little control
         playbackManager._localUnpause(player);
@@ -678,7 +677,7 @@ class SyncPlayManager {
      * Overrides PlaybackManager's seek method.
      */
     seekRequest (PositionTicks, player) {
-        var apiClient = connectionManager.currentApiClient();
+        var apiClient = window.connectionManager.currentApiClient();
         apiClient.requestSyncPlaySeek({
             PositionTicks: PositionTicks
         });
@@ -741,7 +740,7 @@ class SyncPlayManager {
 
         const playAtTime = this.lastCommand.When;
 
-        const currentPositionTicks = playbackManager.currentTime();
+        const currentPositionTicks = playbackManager.currentTime() * 10000;
         // Estimate PositionTicks on server
         const serverPositionTicks = this.lastCommand.PositionTicks + ((currentTime - playAtTime) + this.timeOffsetWithServer) * 10000;
         // Measure delay that needs to be recovered

src/components/syncPlay/timeSyncManager.js

@@ -4,7 +4,6 @@
  */
 
 import events from 'events';
-import connectionManager from 'connectionManager';
 
 /**
  * Time estimation
@@ -114,7 +113,7 @@ class TimeSyncManager {
         if (!this.poller) {
             this.poller = setTimeout(() => {
                 this.poller = null;
-                const apiClient = connectionManager.currentApiClient();
+                const apiClient = window.connectionManager.currentApiClient();
                 const requestSent = new Date();
                 apiClient.getServerTime().then((response) => {
                     const responseReceived = new Date();

src/components/themeMediaPlayer.js

@@ -1,6 +1,5 @@
 import playbackManager from 'playbackManager';
 import * as userSettings from 'userSettings';
-import connectionManager from 'connectionManager';
 
 let currentOwnerId;
 let currentThemeIds = [];
@@ -62,7 +61,7 @@ function loadThemeMedia(item) {
         return;
     }
 
-    const apiClient = connectionManager.getApiClient(item.ServerId);
+    const apiClient = window.connectionManager.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;
 

src/components/tunerPicker.js

@@ -1,7 +1,6 @@
 import dialogHelper from 'dialogHelper';
 import dom from 'dom';
 import layoutManager from 'layoutManager';
-import connectionManager from 'connectionManager';
 import globalize from 'globalize';
 import loading from 'loading';
 import browser from 'browser';
@@ -163,7 +162,7 @@ function tunerPicker() {
             scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
         }
 
-        const apiClient = connectionManager.getApiClient(options.serverId);
+        const apiClient = window.connectionManager.getApiClient(options.serverId);
         discoverDevices(dlg, apiClient);
 
         if (layoutManager.tv) {

src/components/upnextdialog/upnextdialog.js

@@ -1,6 +1,5 @@
 import dom from 'dom';
 import playbackManager from 'playbackManager';
-import connectionManager from 'connectionManager';
 import events from 'events';
 import mediaInfo from 'mediaInfo';
 import layoutManager from 'layoutManager';
@@ -27,7 +26,7 @@ import 'flexStyles';
             if (item.SeriesPrimaryImageTag) {
                 options.tag = item.SeriesPrimaryImageTag;
 
-                return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
             }
         }
 
@@ -35,12 +34,12 @@ import 'flexStyles';
             if (item.SeriesThumbImageTag) {
                 options.tag = item.SeriesThumbImageTag;
 
-                return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
             }
             if (item.ParentThumbImageTag) {
                 options.tag = item.ParentThumbImageTag;
 
-                return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
+                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
             }
         }
 
@@ -53,13 +52,13 @@ import 'flexStyles';
 
         if (item.ImageTags && item.ImageTags[options.type]) {
             options.tag = item.ImageTags[options.type];
-            return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
+            return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options);
         }
 
         if (options.type === 'Primary') {
             if (item.AlbumId && item.AlbumPrimaryImageTag) {
                 options.tag = item.AlbumPrimaryImageTag;
-                return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
+                return window.connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
             }
         }
 
@@ -256,7 +255,7 @@ import 'flexStyles';
             const runtimeTicks = playbackManager.duration(options.player);
 
             if (runtimeTicks) {
-                const timeRemainingTicks = runtimeTicks - playbackManager.currentTime(options.player);
+                const timeRemainingTicks = runtimeTicks - playbackManager.currentTime(options.player) * 10000;
 
                 return Math.round(timeRemainingTicks / 10000);
             }

src/components/userdatabuttons/userdatabuttons.js

@@ -1,4 +1,3 @@
-import connectionManager from 'connectionManager';
 import globalize from 'globalize';
 import dom from 'dom';
 import itemHelper from 'itemHelper';
@@ -188,12 +187,12 @@ function markPlayed(link) {
 }
 
 function likes(id, serverId, isLiked) {
-    const apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = window.connectionManager.getApiClient(serverId);
     return apiClient.updateUserItemRating(apiClient.getCurrentUserId(), id, isLiked);
 }
 
 function played(id, serverId, isPlayed) {
-    const apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = window.connectionManager.getApiClient(serverId);
 
     const method = isPlayed ? 'markPlayed' : 'markUnplayed';
 
@@ -201,13 +200,13 @@ function played(id, serverId, isPlayed) {
 }
 
 function favorite(id, serverId, isFavorite) {
-    const apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = window.connectionManager.getApiClient(serverId);
 
     return apiClient.updateFavoriteStatus(apiClient.getCurrentUserId(), id, isFavorite);
 }
 
 function clearLike(id, serverId) {
-    const apiClient = connectionManager.getApiClient(serverId);
+    const apiClient = window.connectionManager.getApiClient(serverId);
 
     return apiClient.clearUserItemRating(apiClient.getCurrentUserId(), id);
 }

src/components/viewContainer.js

@@ -13,8 +13,9 @@ import 'css!components/viewManager/viewContainer';
                 controllerUrl = controllerUrl.substring('__plugin/'.length);
             }
 
-            controllerUrl = Dashboard.getConfigurationResourceUrl(controllerUrl);
+            controllerUrl = Dashboard.getPluginUrl(controllerUrl);
-            return import(controllerUrl).then((ControllerFactory) => {
+            let apiUrl = ApiClient.getUrl('/web/' + controllerUrl);
+            return import(apiUrl).then((ControllerFactory) => {
                 options.controllerFactory = ControllerFactory;
             });
         }
@@ -32,7 +33,7 @@ import 'css!components/viewManager/viewContainer';
                 pageIndex = 0;
             }
 
-            const isPluginpage = options.url.toLowerCase().indexOf('/configurationpage') !== -1;
+            const isPluginpage = options.url.includes('configurationpage');
             const newViewInfo = normalizeNewView(options, isPluginpage);
             const newView = newViewInfo.elem;
 
@@ -243,4 +244,3 @@ export default {
     reset: reset,
     setOnBeforeChange: setOnBeforeChange
 };
-

src/config.template.json

@@ -28,6 +28,7 @@
         "plugins/htmlAudioPlayer/plugin",
         "plugins/htmlVideoPlayer/plugin",
         "plugins/photoPlayer/plugin",
+        "plugins/comicsPlayer/plugin",
         "plugins/bookPlayer/plugin",
         "plugins/youtubePlayer/plugin",
         "plugins/backdropScreensaver/plugin",

src/controllers/dashboard/dashboard.html

@@ -17,7 +17,7 @@
 
                     <div style="margin-top:1em;">
                         <button is="emby-button" type="button" id="btnRestartServer" class="raised" onclick="DashboardPage.restart(this);" style="margin-left:0;">
-                            <span>${ButtonRestart}</span>
+                            <span>${Restart}</span>
                         </button>
                         <button is="emby-button" type="button" id="btnShutdown" class="raised" onclick="DashboardPage.shutdown(this);">
                             <span>${ButtonShutdown}</span>

src/controllers/dashboard/dashboard.js

@@ -7,7 +7,6 @@ import globalize from 'globalize';
 import * as datefns from 'date-fns';
 import dfnshelper from 'dfnshelper';
 import loading from 'loading';
-import connectionManager from 'connectionManager';
 import playMethodHelper from 'playMethodHelper';
 import cardBuilder from 'cardBuilder';
 import imageLoader from 'imageLoader';
@@ -60,7 +59,7 @@ import 'emby-itemscontainer';
                 confirmText: globalize.translate('ButtonSend')
             }).then(function (text) {
                 if (text) {
-                    connectionManager.getApiClient(session.ServerId).sendMessageCommand(session.Id, {
+                    window.connectionManager.getApiClient(session.ServerId).sendMessageCommand(session.Id, {
                         Text: text,
                         TimeoutMs: 5e3
                     });
@@ -73,7 +72,7 @@ import 'emby-itemscontainer';
         import('actionsheet').then(({default: actionsheet}) => {
             const menuItems = [];
 
-            if (session.ServerId && session.DeviceId !== connectionManager.deviceId()) {
+            if (session.ServerId && session.DeviceId !== window.connectionManager.deviceId()) {
                 menuItems.push({
                     name: globalize.translate('SendMessage'),
                     id: 'sendmessage'
@@ -123,9 +122,9 @@ import 'emby-itemscontainer';
                     } else if (btn.classList.contains('btnSessionSendMessage')) {
                         showSendMessageForm(btn, session);
                     } else if (btn.classList.contains('btnSessionStop')) {
-                        connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'Stop');
+                        window.connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'Stop');
                     } else if (btn.classList.contains('btnSessionPlayPause') && session.PlayState) {
-                        connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'PlayPause');
+                        window.connectionManager.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'PlayPause');
                     }
                 }
             }
@@ -313,7 +312,7 @@ import 'emby-itemscontainer';
                 btnCssClass = session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length ? '' : ' hide';
                 html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionInfo paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate('ViewPlaybackInfo') + '"><span class="material-icons info"></span></button>';
 
-                btnCssClass = session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== connectionManager.deviceId() ? '' : ' hide';
+                btnCssClass = session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== window.connectionManager.deviceId() ? '' : ' hide';
                 html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionSendMessage paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate('SendMessage') + '"><span class="material-icons message"></span></button>';
                 html += '</div>';
 
@@ -551,7 +550,7 @@ import 'emby-itemscontainer';
                 row.classList.remove('playingSession');
             }
 
-            if (session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== connectionManager.deviceId()) {
+            if (session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== window.connectionManager.deviceId()) {
                 row.querySelector('.btnSessionSendMessage').classList.remove('hide');
             } else {
                 row.querySelector('.btnSessionSendMessage').classList.add('hide');
@@ -565,7 +564,7 @@ import 'emby-itemscontainer';
 
             const btnSessionPlayPause = row.querySelector('.btnSessionPlayPause');
 
-            if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== connectionManager.deviceId()) {
+            if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== window.connectionManager.deviceId()) {
                 btnSessionPlayPause.classList.remove('hide');
                 row.querySelector('.btnSessionStop').classList.remove('hide');
             } else {
@@ -722,9 +721,9 @@ import 'emby-itemscontainer';
         restart: function (btn) {
             import('confirm').then(({default: confirm}) => {
                 confirm({
-                    title: globalize.translate('HeaderRestart'),
+                    title: globalize.translate('Restart'),
                     text: globalize.translate('MessageConfirmRestart'),
-                    confirmText: globalize.translate('ButtonRestart'),
+                    confirmText: globalize.translate('Restart'),
                     primary: 'delete'
                 }).then(function () {
                     const page = dom.parentWithClass(btn, 'page');

src/controllers/dashboard/devices/device.html

@@ -9,7 +9,7 @@
                     </div>
 
                     <div class="inputContainer">
-                        <input is="emby-input" type="text" id="txtCustomName" label="${LabelCustomDeviceDisplayName}" />
+                        <input is="emby-input" type="text" id="txtCustomName" label="${LabelDisplayName}" />
                         <div class="fieldDescription">${LabelCustomDeviceDisplayNameHelp}</div>
                     </div>
                 </div>

src/controllers/dashboard/dlna/profile.html

@@ -8,7 +8,7 @@
                     </div>
                 </div>
                 <div data-role="controlgroup" data-type="horizontal" data-mini="true">
-                    <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioInfo" data-value="tabInfo">${TabInfo}</a>
+                    <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioInfo" data-value="tabInfo">${ButtonInfo}</a>
                     <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioDirectPlay" data-value="tabDirectPlayProfiles">${TabDirectPlay}</a>
                     <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioTranscoding" data-value="tabTranscodingProfiles">${Transcoding}</a>
                     <a href="#" is="emby-linkbutton" data-role="button" class="radioTabButton" id="radioContainers" data-value="tabContainerProfiles">${TabContainers}</a>
@@ -29,15 +29,15 @@
                         <div class="checkboxList paperList checkboxList-paperList">
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="chkAudio" data-value="Audio" class="chkMediaType" />
-                                <span>${OptionProfileAudio}</span>
+                                <span>${Audio}</span>
                             </label>
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="chkPhoto" data-value="Photo" class="chkMediaType" />
-                                <span>${OptionProfilePhoto}</span>
+                                <span>${Photo}</span>
                             </label>
                             <label>
                                 <input is="emby-checkbox" type="checkbox" id="chkVideo" data-value="Video" class="chkMediaType" />
-                                <span>${OptionProfileVideo}</span>
+                                <span>${Video}</span>
                             </label>
                         </div>
                     </div>
@@ -144,19 +144,19 @@
                             </div>
                             <div class="inputContainer">
                                 <input type="number" is="emby-input" id="txtAlbumArtMaxWidth" pattern="[0-9]*" min="1" label="${LabelAlbumArtMaxWidth}" />
-                                <div class="fieldDescription">${LabelAlbumArtMaxWidthHelp}</div>
+                                <div class="fieldDescription">${LabelAlbumArtMaxResHelp}</div>
                             </div>
                             <div class="inputContainer">
                                 <input type="number" is="emby-input" id="txtAlbumArtMaxHeight" pattern="[0-9]*" min="1" label="${LabelAlbumArtMaxHeight}" />
-                                <div class="fieldDescription">${LabelAlbumArtMaxHeightHelp}</div>
+                                <div class="fieldDescription">${LabelAlbumArtMaxResHelp}</div>
                             </div>
                             <div class="inputContainer">
                                 <input type="number" is="emby-input" id="txtIconMaxWidth" pattern="[0-9]*" min="1" label="${LabelIconMaxWidth}" />
-                                <div class="fieldDescription">${LabelIconMaxWidthHelp}</div>
+                                <div class="fieldDescription">${LabelIconMaxResHelp}</div>
                             </div>
                             <div class="inputContainer">
                                 <input type="number" is="emby-input" id="txtIconMaxHeight" pattern="[0-9]*" min="1" label="${LabelIconMaxHeight}" />
-                                <div class="fieldDescription">${LabelIconMaxHeightHelp}</div>
+                                <div class="fieldDescription">${LabelIconMaxResHelp}</div>
                             </div>
                         </div>
                     </div>
@@ -279,9 +279,9 @@
             <div data-role="content">
                 <div class="selectContainer">
                     <select id="selectDirectPlayProfileType" name="selectDirectPlayProfileType" is="emby-select" label="${LabelType}">
-                        <option value="Audio">${OptionProfileAudio}</option>
+                        <option value="Audio">${Audio}</option>
-                        <option value="Photo">${OptionProfilePhoto}</option>
+                        <option value="Photo">${Photo}</option>
-                        <option value="Video">${OptionProfileVideo}</option>
+                        <option value="Video">${Video}</option>
                     </select>
                 </div>
                 <div class="inputContainer">
@@ -319,7 +319,7 @@
             <div data-role="content">
                 <div data-role="controlgroup" data-type="horizontal" data-mini="true">
                     <input type="radio" name="radioTranscodingTab" class="radioTabButton" id="radioTranscodingBasics" value="tabTranscodingBasics">
-                    <label for="radioTranscodingBasics">${TabInfo}</label>
+                    <label for="radioTranscodingBasics">${ButtonInfo}</label>
                     <input type="radio" name="radioTranscodingTab" class="radioTabButton" id="radioTranscodingAdvanced" value="tabTranscodingAdvanced">
                     <label for="radioTranscodingAdvanced">${TabAdvanced}</label>
                 </div>
@@ -327,9 +327,9 @@
                 <div class="tabContent tabTranscodingBasics" style="display: none;">
                     <div class="selectContainer">
                         <select id="selectTranscodingProfileType" name="selectTranscodingProfileType" is="emby-select" label="${LabelType}">
-                            <option value="Audio">${OptionProfileAudio}</option>
+                            <option value="Audio">${Audio}</option>
-                            <option value="Photo">${OptionProfilePhoto}</option>
+                            <option value="Photo">${Photo}</option>
-                            <option value="Video">${OptionProfileVideo}</option>
+                            <option value="Video">${Video}</option>
                         </select>
                     </div>
                     <div id="fldTranscodingProtocol" style="margin: 1em 0;">
@@ -341,16 +341,16 @@
                         </div>
                     </div>
                     <div class="inputContainer">
-                        <input is="emby-input" type="text" id="txtTranscodingContainer" label="${LabelTranscodingContainer}"; required="required" />
+                        <input is="emby-input" type="text" id="txtTranscodingContainer" label="${LabelProfileContainer}"; required="required" />
                     </div>
                     <div id="fldTranscodingVideoCodec" style="margin: 1em 0;">
                         <div class="inputContainer">
-                            <input is="emby-input" type="text" id="txtTranscodingVideoCodec" label="${LabelTranscodingVideoCodec}" />
+                            <input is="emby-input" type="text" id="txtTranscodingVideoCodec" label="${LabelVideoCodec}" />
                         </div>
                     </div>
                     <div id="fldTranscodingAudioCodec" style="margin: 1em 0;">
                         <div class="inputContainer">
-                            <input is="emby-input" type="text" id="txtTranscodingAudioCodec" label="${LabelTranscodingAudioCodec}" />
+                            <input is="emby-input" type="text" id="txtTranscodingAudioCodec" label="${LabelAudioCodec}" />
                         </div>
                     </div>
                 </div>
@@ -403,9 +403,9 @@
                 <div class="tabContent tabContainerBasics">
                     <div class="selectContainer">
                         <select id="selectContainerProfileType" name="selectContainerProfileType" is="emby-select" label="${LabelType}">
-                            <option value="Audio">${OptionProfileAudio}</option>
+                            <option value="Audio">${Audio}</option>
-                            <option value="Photo">${OptionProfilePhoto}</option>
+                            <option value="Photo">${Photo}</option>
-                            <option value="Video">${OptionProfileVideo}</option>
+                            <option value="Video">${Video}</option>
                         </select>
                     </div>
                     <div class="inputContainer">
@@ -434,9 +434,9 @@
                 <p>${HeaderCodecProfileHelp}</p>
                 <div class="selectContainer">
                     <select id="selectCodecProfileType" name="selectCodecProfileType" is="emby-select" label="${LabelType}">
-                        <option value="Video">${OptionProfileVideo}</option>
+                        <option value="Video">${Video}</option>
-                        <option value="VideoAudio">${OptionProfileVideoAudio}</option>
+                        <option value="VideoAudio">${VideoAudio}</option>
-                        <option value="Audio">${OptionProfileAudio}</option>
+                        <option value="Audio">${Audio}</option>
                     </select>
                 </div>
                 <div class="inputContainer">
@@ -462,9 +462,9 @@
             <div data-role="content">
                 <div class="selectContainer">
                     <select id="selectResponseProfileType" name="selectResponseProfileType" is="emby-select" label="${LabelType}">
-                        <option value="Audio">${OptionProfileAudio}</option>
+                        <option value="Audio">${Audio}</option>
-                        <option value="Photo">${OptionProfilePhoto}</option>
+                        <option value="Photo">${Photo}</option>
-                        <option value="Video">${OptionProfileVideo}</option>
+                        <option value="Video">${Video}</option>
                     </select>
                 </div>
                 <div class="inputContainer">

src/controllers/dashboard/dlna/profiles.js

@@ -81,7 +81,7 @@ import 'emby-button';
     function getTabs() {
         return [{
             href: 'dlnasettings.html',
-            name: globalize.translate('TabSettings')
+            name: globalize.translate('Settings')
         }, {
             href: 'dlnaprofiles.html',
             name: globalize.translate('TabProfiles')

src/controllers/dashboard/dlna/settings.html

@@ -7,7 +7,7 @@
 
                 <div class="verticalSection">
                     <div class="sectionTitleContainer flex align-items-center">
-                        <h2 class="sectionTitle">${TabSettings}</h2>
+                        <h2 class="sectionTitle">${Settings}</h2>
                         <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/networking/dlna.html">${Help}</a>
                     </div>
                 </div>

src/controllers/dashboard/dlna/settings.js

@@ -38,7 +38,7 @@ import globalize from 'globalize';
     function getTabs() {
         return [{
             href: 'dlnasettings.html',
-            name: globalize.translate('TabSettings')
+            name: globalize.translate('Settings')
         }, {
             href: 'dlnaprofiles.html',
             name: globalize.translate('TabProfiles')

src/controllers/dashboard/encodingsettings.html

@@ -11,7 +11,7 @@
 
                 <div class="selectContainer">
                     <select is="emby-select" id="selectVideoDecoder" label="${LabelHardwareAccelerationType}">
-                        <option value="">${OptionNone}</option>
+                        <option value="">${None}</option>
                         <option value="amf">AMD AMF</option>
                         <option value="qsv">Intel Quick Sync</option>
                         <option value="mediacodec">MediaCodec Android</option>
@@ -91,7 +91,7 @@
 
                 <div class="selectContainer">
                     <select is="emby-select" id="selectThreadCount" label="${LabelTranscodingThreadCount}">
-                        <option value="-1">${OptionAuto}</option>
+                        <option value="-1">${Auto}</option>
                         <option value="1">1</option>
                         <option value="2">2</option>
                         <option value="3">3</option>
@@ -148,7 +148,7 @@
 
                 <div class="selectContainer">
                     <select is="emby-select" id="selectEncoderPreset" label="${LabelEncoderPreset}">
-                        <option value="">${OptionAuto}</option>
+                        <option value="">${Auto}</option>
                         <option value="veryslow">veryslow</option>
                         <option value="slower">slower</option>
                         <option value="slow">slow</option>

src/controllers/dashboard/encodingsettings.js

@@ -50,7 +50,8 @@ import libraryMenu from 'libraryMenu';
                 data: JSON.stringify({
                     Path: form.querySelector('.txtEncoderPath').value,
                     PathType: 'Custom'
-                })
+                }),
+                contentType: 'application/json'
             }).then(Dashboard.processServerConfigurationUpdateResult, onSaveEncodingPathFailure);
         });
     }
@@ -132,7 +133,7 @@ import libraryMenu from 'libraryMenu';
             name: globalize.translate('Transcoding')
         }, {
             href: 'playbackconfiguration.html',
-            name: globalize.translate('TabResumeSettings')
+            name: globalize.translate('ButtonResume')
         }, {
             href: 'streamingsettings.html',
             name: globalize.translate('TabStreaming')

src/controllers/dashboard/general.html

@@ -4,7 +4,7 @@
             <form class="dashboardGeneralForm">
                 <div class="verticalSection">
                     <div class="sectionTitleContainer flex align-items-center">
-                        <h2 class="sectionTitle">${TabSettings}</h2>
+                        <h2 class="sectionTitle">${Settings}</h2>
                         <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/settings.html">${Help}</a>
                     </div>
                 </div>
@@ -17,7 +17,7 @@
                     <div class="selectContainer">
                         <select is="emby-select" id="selectLocalizationLanguage" label="${LabelPreferredDisplayLanguage}"></select>
                         <div class="fieldDescription">
-                            <div>${LabelPreferredDisplayLanguageHelp}</div>
+                            <div>${LabelDisplayLanguageHelp}</div>
                             <div style="margin-top: .25em;">
                                 <a is="emby-linkbutton" rel="noopener noreferrer" class="button-link" href="https://docs.jellyfin.org/general/contributing/index.html" target="_blank">${LearnHowYouCanContribute}</a>
                             </div>

src/controllers/dashboard/library.js

@@ -93,7 +93,7 @@ import 'emby-itemrefreshindicator';
         const virtualFolder = virtualFolders[index];
         const menuItems = [];
         menuItems.push({
-            name: globalize.translate('ButtonEditImages'),
+            name: globalize.translate('EditImages'),
             id: 'editimages',
             icon: 'photo'
         });
@@ -218,29 +218,29 @@ import 'emby-itemrefreshindicator';
             name: '',
             value: ''
         }, {
-            name: globalize.translate('FolderTypeMovies'),
+            name: globalize.translate('Movies'),
             value: 'movies',
             message: getLink('MovieLibraryHelp', 'https://docs.jellyfin.org/general/server/media/movies.html')
         }, {
-            name: globalize.translate('FolderTypeMusic'),
+            name: globalize.translate('TabMusic'),
             value: 'music',
             message: getLink('MusicLibraryHelp', 'https://docs.jellyfin.org/general/server/media/music.html')
         }, {
-            name: globalize.translate('FolderTypeTvShows'),
+            name: globalize.translate('Shows'),
             value: 'tvshows',
             message: getLink('TvLibraryHelp', 'https://docs.jellyfin.org/general/server/media/shows.html')
         }, {
-            name: globalize.translate('FolderTypeBooks'),
+            name: globalize.translate('Books'),
             value: 'books',
             message: getLink('BookLibraryHelp', 'https://docs.jellyfin.org/general/server/media/books.html')
         }, {
-            name: globalize.translate('OptionHomeVideos'),
+            name: globalize.translate('Photos'),
             value: 'homevideos'
         }, {
-            name: globalize.translate('FolderTypeMusicVideos'),
+            name: globalize.translate('MusicVideos'),
             value: 'musicvideos'
         }, {
-            name: globalize.translate('FolderTypeUnset'),
+            name: globalize.translate('Other'),
             value: 'mixed',
             message: globalize.translate('MessageUnsetContentHelp')
         }];
@@ -326,7 +326,7 @@ import 'emby-itemrefreshindicator';
         let typeName = getCollectionTypeOptions().filter(function (t) {
             return t.value == virtualFolder.CollectionType;
         })[0];
-        typeName = typeName ? typeName.name : globalize.translate('FolderTypeUnset');
+        typeName = typeName ? typeName.name : globalize.translate('Other');
         html += "<div class='cardText cardText-secondary'>";
 
         if (virtualFolder.showType === false) {

src/controllers/dashboard/metadatanfo.js

@@ -6,7 +6,7 @@ import globalize from 'globalize';
 /* eslint-disable indent */
 
     function loadPage(page, config, users) {
-        let html = '<option value="" selected="selected">' + globalize.translate('OptionNone') + '</option>';
+        let html = '<option value="" selected="selected">' + globalize.translate('None') + '</option>';
         html += users.map(function (user) {
             return '<option value="' + user.Id + '">' + user.Name + '</option>';
         }).join('');

src/controllers/dashboard/playback.html

@@ -3,7 +3,7 @@
         <div class="content-primary">
             <form class="playbackConfigurationForm">
                 <div class="sectionTitleContainer flex align-items-center">
-                    <h2 class="sectionTitle">${TabResumeSettings}</h2>
+                    <h2 class="sectionTitle">${ButtonResume}</h2>
                 </div>
                 <div class="inputContainer">
                     <input is="emby-input" type="number" id="txtMinResumePct" name="txtMinResumePct" pattern="[0-9]*" required min="0" max="100" label="${LabelMinResumePercentage}"></input>

src/controllers/dashboard/playback.js

@@ -32,7 +32,7 @@ import globalize from 'globalize';
             name: globalize.translate('Transcoding')
         }, {
             href: 'playbackconfiguration.html',
-            name: globalize.translate('TabResumeSettings')
+            name: globalize.translate('ButtonResume')
         }, {
             href: 'streamingsettings.html',
             name: globalize.translate('TabStreaming')

src/controllers/dashboard/plugins/installed/index.js

@@ -39,7 +39,7 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
     const configPage = pluginConfigurationPages.filter(function (pluginConfigurationPage) {
         return pluginConfigurationPage.PluginId == plugin.Id;
     })[0];
-    const configPageUrl = configPage ? Dashboard.getConfigurationPageUrl(configPage.Name) : null;
+    const configPageUrl = configPage ? Dashboard.getPluginUrl(configPage.Name) : null;
     let html = '';
     html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' data-removable='" + plugin.CanUninstall + "' class='card backdropCard'>";
     html += '<div class="cardBox visualCardBox">';
@@ -118,7 +118,7 @@ function showPluginMenu(page, elem) {
 
     if (configHref) {
         menuItems.push({
-            name: globalize.translate('ButtonSettings'),
+            name: globalize.translate('Settings'),
             id: 'open',
             icon: 'mode_edit'
         });

src/controllers/dashboard/scheduledtasks/scheduledtask.html

@@ -23,7 +23,7 @@
     <div data-role="popup" id="popupAddTrigger" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
         <form class="addTriggerForm" style="padding:1em;">
             <div class="ui-bar-a">
-                <h3>${HeaderAddScheduledTaskTrigger}</h3>
+                <h3>${ButtonAddScheduledTaskTrigger}</h3>
             </div>
             <div data-role="content">
                 <div class="selectContainer">

src/controllers/dashboard/streaming.js

@@ -27,7 +27,7 @@ import globalize from 'globalize';
             name: globalize.translate('Transcoding')
         }, {
             href: 'playbackconfiguration.html',
-            name: globalize.translate('TabResumeSettings')
+            name: globalize.translate('ButtonResume')
         }, {
             href: 'streamingsettings.html',
             name: globalize.translate('TabStreaming')

src/controllers/dashboard/users/useredit.html

@@ -11,7 +11,7 @@
             </div>
 
             <div data-role="controlgroup" data-type="horizontal" class="localnav" id="userProfileNavigation" data-mini="true">
-                <a href="#" is="emby-linkbutton" data-role="button" class="ui-btn-active">${TabProfile}</a>
+                <a href="#" is="emby-linkbutton" data-role="button" class="ui-btn-active">${Profile}</a>
                 <a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);">${TabAccess}</a>
                 <a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);">${TabParentalControl}</a>
                 <a href="#" is="emby-linkbutton" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${HeaderPassword}</a>

src/controllers/dashboard/users/userlibraryaccess.html

@@ -11,7 +11,7 @@
             </div>
 
             <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('useredit.html', true);">${TabProfile}</a>
+                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('useredit.html', true);">${Profile}</a>
                 <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);" class="ui-btn-active">${TabAccess}</a>
                 <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);">${TabParentalControl}</a>
                 <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${HeaderPassword}</a>

src/controllers/dashboard/users/usernew.html

@@ -4,7 +4,7 @@
             <form class="newUserProfileForm">
                 <div class="verticalSection">
                     <div class="sectionTitleContainer flex align-items-center">
-                        <h2 class="sectionTitle">${HeaderAddUser}</h2>
+                        <h2 class="sectionTitle">${ButtonAddUser}</h2>
                         <a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
                     </div>