Merge remote-tracking branch 'upstream/master' into media-session

src/addplugin.html

@@ -8,9 +8,8 @@
                         <a is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/plugins/index.html">${Help}</a>
                     </div>
 
-                    <p id="tagline" style="font-style: italic;"></p>
-                    <p id="pPreviewImage"></p>
-                    <p id="overview"></p>
+                    <p id="overview" style="font-style: italic;"></p>
+                    <p id="description"></p>
                 </div>
 
                 <div class="verticalSection">
@@ -28,7 +27,6 @@
                             </button>
                             <div class="fieldDescription">${ServerRestartNeededAfterPluginInstall}</div>
                         </div>
-                        <p id="nonServerMsg"></p>
                     </form>
                 </div>
             </div>
@@ -37,9 +35,6 @@
                 <div is="emby-collapse" title="${HeaderDeveloperInfo}">
                     <div class="collapseContent">
                         <p id="developer"></p>
-                        <p id="pViewWebsite" style="display: none;">
-                            <a is="emby-linkbutton" class="button-link" href="#" target="_blank">${ButtonViewWebsite}</a>
-                        </p>
                     </div>
                 </div>
 

src/assets/css/librarybrowser.css

@@ -24,6 +24,10 @@
     padding-top: 7em !important;
 }
 
+.layout-mobile .libraryPage {
+    padding-top: 4em !important;
+}
+
 .itemDetailPage {
     padding-top: 0 !important;
 }
@@ -115,7 +119,7 @@
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: inline-flex;
-    margin: 0.3em 0 0 0.5em;
+    margin: 0 0 0 0.5em;
     height: 1.7em;
     -webkit-box-align: center;
     -webkit-align-items: center;
@@ -268,12 +272,6 @@
     }
 }
 
-@media all and (max-width: 60em) {
-    .libraryDocument .mainDrawerButton {
-        display: none;
-    }
-}
-
 @media all and (max-width: 84em) {
     .withSectionTabs .headerTop {
         padding-bottom: 0.55em;
@@ -519,6 +517,13 @@
 
 .itemName {
     margin: 0.5em 0;
+    font-weight: 600;
+}
+
+.nameContainer {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
 }
 
 .itemMiscInfo {
@@ -536,7 +541,6 @@
 .layout-mobile .itemName,
 .layout-mobile .itemMiscInfo,
 .layout-mobile .mainDetailButtons {
-    display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -578,7 +582,6 @@
 
 .infoText {
     white-space: nowrap;
-    overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
 }
@@ -1103,3 +1106,50 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 .itemsViewSettingsContainer > .button-flat {
     margin: 0;
 }
+
+.layout-mobile #myPreferencesMenuPage {
+    padding-top: 3.75em;
+}
+
+.itemDetailsGroup {
+    margin-bottom: 1.5em;
+}
+
+.trackSelections {
+    max-width: 44em;
+}
+
+.detailsGroupItem,
+.trackSelections .selectContainer {
+    display: flex;
+    max-width: 44em;
+    margin: 0 0 0.5em !important;
+}
+
+.trackSelections .selectContainer {
+    margin: 0 0 0.3em !important;
+}
+
+.detailsGroupItem .label,
+.trackSelections .selectContainer .selectLabel {
+    cursor: default;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 6.25em;
+    margin: 0 0.6em 0 0;
+}
+
+.trackSelections .selectContainer .selectLabel {
+    margin: 0 0.2em 0 0;
+}
+
+.trackSelections .selectContainer .detailTrackSelect {
+    font-size: inherit;
+    padding: 0;
+    overflow: hidden;
+}
+
+.trackSelections .selectContainer .selectArrowContainer .selectArrow {
+    margin-top: 0;
+    font-size: 1.4em;
+}

src/assets/css/site.css

@@ -96,3 +96,16 @@ div[data-role=page] {
     margin-right: auto;
     width: 85%;
 }
+
+.headroom {
+    will-change: transform;
+    transition: transform 200ms linear;
+}
+
+.headroom--pinned {
+    transform: translateY(0%);
+}
+
+.headroom--unpinned {
+    transform: translateY(-100%);
+}

src/bundle.js

@@ -135,7 +135,20 @@ _define("fast-text-encoding", function () {
     return fast_text_encoding;
 });
 
+// intersection-observer
 var intersection_observer = require("intersection-observer");
 _define("intersection-observer", function () {
     return intersection_observer;
 });
+
+// screenfull
+var screenfull = require("screenfull");
+_define("screenfull", function () {
+    return screenfull;
+});
+
+// headroom.js
+var headroom = require("headroom.js/dist/headroom");
+_define("headroom", function () {
+    return headroom;
+});

src/components/accessschedule/accessschedule.js

@@ -1,4 +1,4 @@
-define(["dialogHelper", "datetime", "emby-select", "paper-icon-button-light", "formDialogStyle"], function (dialogHelper, datetime) {
+define(["dialogHelper", "datetime", "globalize", "emby-select", "paper-icon-button-light", "formDialogStyle"], function (dialogHelper, datetime, globalize) {
     "use strict";
 
     function getDisplayTime(hours) {
@@ -38,7 +38,7 @@ define(["dialogHelper", "datetime", "emby-select", "paper-icon-button-light", "f
         };
 
         if (parseFloat(updatedSchedule.StartHour) >= parseFloat(updatedSchedule.EndHour)) {
-            return void alert(Globalize.translate("ErrorMessageStartHourGreaterThanEnd"));
+            return void alert(globalize.translate("ErrorMessageStartHourGreaterThanEnd"));
         }
 
         context.submitted = true;
@@ -60,7 +60,7 @@ define(["dialogHelper", "datetime", "emby-select", "paper-icon-button-light", "f
                     });
                     dlg.classList.add("formDialog");
                     var html = "";
-                    html += Globalize.translateDocument(template);
+                    html += globalize.translateDocument(template);
                     dlg.innerHTML = html;
                     populateHours(dlg);
                     loadSchedule(dlg, options.schedule);

src/components/appRouter.js

@@ -200,7 +200,7 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
 
         var apiClient = this;
 
-        if (data.status === 401) {
+        if (data.status === 403) {
             if (data.errorCode === "ParentalControl") {
 
                 var isCurrentAllowed = currentRouteInfo ? (currentRouteInfo.route.anonymous || currentRouteInfo.route.startup) : true;

src/components/apphost.js

@@ -1,4 +1,4 @@
-define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], function (appSettings, browser, events, htmlMediaHelper, webSettings) {
+define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings", "globalize"], function (appSettings, browser, events, htmlMediaHelper, webSettings, globalize) {
     "use strict";
 
     function getBaseProfileOptions(item) {
@@ -46,20 +46,9 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
                 if (window.NativeShell) {
                     profile = window.NativeShell.AppHost.getDeviceProfile(profileBuilder);
                 } else {
-                    profile = profileBuilder(getBaseProfileOptions(item));
-
-                    if (item && !options.isRetry && "allcomplexformats" !== appSettings.get("subtitleburnin")) {
-                        if (!browser.orsay && !browser.tizen) {
-                            profile.SubtitleProfiles.push({
-                                Format: "ass",
-                                Method: "External"
-                            });
-                            profile.SubtitleProfiles.push({
-                                Format: "ssa",
-                                Method: "External"
-                            });
-                        }
-                    }
+                    var builderOpts = getBaseProfileOptions(item);
+                    builderOpts.enableSsaRender = (item && !options.isRetry && "allcomplexformats" !== appSettings.get("subtitleburnin"));
+                    profile = profileBuilder(builderOpts);
                 }
 
                 resolve(profile);
@@ -237,10 +226,6 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
             features.push("voiceinput");
         }
 
-        if (!browser.tv && !browser.xboxOne) {
-            browser.ps4;
-        }
-
         if (supportsHtmlMediaAutoplay()) {
             features.push("htmlaudioautoplay");
             features.push("htmlvideoautoplay");
@@ -332,10 +317,10 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
 
         require(["actionsheet"], function (actionsheet) {
             exitPromise = actionsheet.show({
-                title: Globalize.translate("MessageConfirmAppExit"),
+                title: globalize.translate("MessageConfirmAppExit"),
                 items: [
-                    {id: "yes", name: Globalize.translate("Yes")},
-                    {id: "no", name: Globalize.translate("No")}
+                    {id: "yes", name: globalize.translate("Yes")},
+                    {id: "no", name: globalize.translate("No")}
                 ]
             }).then(function (value) {
                 if (value === "yes") {
@@ -350,7 +335,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper", "webSettings"], f
     var deviceId;
     var deviceName;
     var appName = "Jellyfin Web";
-    var appVersion = "10.5.0";
+    var appVersion = "10.6.0";
 
     var appHost = {
         getWindowState: function () {

src/components/chromecast/chromecastplayer.js

@@ -5,7 +5,7 @@ define(['appSettings', 'userSettings', 'playbackManager', 'connectionManager', '
     var currentResolve;
     var currentReject;
 
-    var PlayerName = 'Chromecast';
+    var PlayerName = 'Google Cast';
 
     function sendConnectionResult(isOk) {
 

src/components/directorybrowser/directorybrowser.js

@@ -1,4 +1,4 @@
-define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-icon-button-light', 'css!./directorybrowser', 'formDialogStyle', 'emby-button'], function(loading, dialogHelper, dom) {
+define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-input', 'paper-icon-button-light', 'css!./directorybrowser', 'formDialogStyle', 'emby-button'], function(loading, dialogHelper, dom, globalize) {
     'use strict';
 
     function getSystemInfo() {
@@ -53,7 +53,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
                 }
 
                 if (!path) {
-                    html += getItem("lnkPath lnkDirectory", "", "Network", Globalize.translate("ButtonNetwork"));
+                    html += getItem("lnkPath lnkDirectory", "", "Network", globalize.translate("ButtonNetwork"));
                 }
 
                 page.querySelector(".results").innerHTML = html;
@@ -89,16 +89,16 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
             var instruction = options.instruction ? options.instruction + "<br/><br/>" : "";
             html += '<div class="infoBanner" style="margin-bottom:1.5em;">';
             html += instruction;
-            html += Globalize.translate("MessageDirectoryPickerInstruction", "<b>\\\\server</b>", "<b>\\\\192.168.1.101</b>");
+            html += globalize.translate("MessageDirectoryPickerInstruction", "<b>\\\\server</b>", "<b>\\\\192.168.1.101</b>");
             if ("bsd" === systemInfo.OperatingSystem.toLowerCase()) {
                 html += "<br/>";
                 html += "<br/>";
-                html += Globalize.translate("MessageDirectoryPickerBSDInstruction");
+                html += globalize.translate("MessageDirectoryPickerBSDInstruction");
                 html += "<br/>";
             } else if ("linux" === systemInfo.OperatingSystem.toLowerCase()) {
                 html += "<br/>";
                 html += "<br/>";
-                html += Globalize.translate("MessageDirectoryPickerLinuxInstruction");
+                html += globalize.translate("MessageDirectoryPickerLinuxInstruction");
                 html += "<br/>";
             }
             html += "</div>";
@@ -113,10 +113,10 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
             labelKey = "LabelPath";
         }
         var readOnlyAttribute = options.pathReadOnly ? " readonly" : "";
-        html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + Globalize.translate(labelKey) + '"/>';
+        html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" ' + readOnlyAttribute + ' label="' + globalize.translate(labelKey) + '"/>';
         html += "</div>";
         if (!readOnlyAttribute) {
-            html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="' + Globalize.translate("ButtonRefresh") + '"><i class="material-icons">search</i></button>';
+            html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories emby-input-iconbutton" title="' + globalize.translate("ButtonRefresh") + '"><i class="material-icons">search</i></button>';
         }
         html += "</div>";
         if (!readOnlyAttribute) {
@@ -124,14 +124,14 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
         }
         if (options.enableNetworkSharePath) {
             html += '<div class="inputContainer" style="margin-top:2em;">';
-            html += '<input is="emby-input" id="txtNetworkPath" type="text" label="' + Globalize.translate("LabelOptionalNetworkPath") + '"/>';
+            html += '<input is="emby-input" id="txtNetworkPath" type="text" label="' + globalize.translate("LabelOptionalNetworkPath") + '"/>';
             html += '<div class="fieldDescription">';
-            html += Globalize.translate("LabelOptionalNetworkPathHelp");
+            html += globalize.translate("LabelOptionalNetworkPathHelp");
             html += "</div>";
             html += "</div>";
         }
         html += '<div class="formDialogFooter">';
-        html += '<button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">' + Globalize.translate("ButtonOk") + "</button>";
+        html += '<button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">' + globalize.translate("ButtonOk") + "</button>";
         html += "</div>";
         html += "</form>";
         html += "</div>";
@@ -164,14 +164,14 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
         }).catch(function(response) {
             if (response) {
                 if (response.status === 404) {
-                    alertText(Globalize.translate("PathNotFound"));
+                    alertText(globalize.translate("PathNotFound"));
                     return Promise.reject();
                 }
                 if (response.status === 500) {
                     if (validateWriteable) {
-                        alertText(Globalize.translate("WriteAccessRequired"));
+                        alertText(globalize.translate("WriteAccessRequired"));
                     } else {
-                        alertText(Globalize.translate("PathNotFound"));
+                        alertText(globalize.translate("PathNotFound"));
                     }
                     return Promise.reject();
                 }
@@ -266,7 +266,7 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
                     html += '<div class="formDialogHeader">';
                     html += '<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1"><i class="material-icons arrow_back"></i></button>';
                     html += '<h3 class="formDialogHeaderTitle">';
-                    html += options.header || Globalize.translate("HeaderSelectPath");
+                    html += options.header || globalize.translate("HeaderSelectPath");
                     html += "</h3>";
                     html += "</div>";
                     html += getEditorHtml(options, systemInfo);

src/components/filterdialog/filterdialog.js

@@ -24,9 +24,6 @@ define(["dom", "dialogHelper", "globalize", "connectionManager", "events", "brow
     }
 
     function renderFilters(context, result, query) {
-        if (result.Tags) {
-            result.Tags.length = Math.min(result.Tags.length, 50);
-        }
         renderOptions(context, ".genreFilters", "chkGenreFilter", result.Genres, function (i) {
             var delimeter = "|";
             return (delimeter + (query.Genres || "") + delimeter).indexOf(delimeter + i + delimeter) != -1;

src/components/fullscreenManager.js

@@ -1,103 +0,0 @@
-define(['events', 'dom', 'apphost', 'browser'], function (events, dom, appHost, browser) {
-    'use strict';
-
-    function fullscreenManager() {
-
-    }
-
-    fullscreenManager.prototype.requestFullscreen = function (element) {
-
-        element = element || document.documentElement;
-
-        if (element.requestFullscreen) {
-            element.requestFullscreen();
-            return;
-        } else if (element.mozRequestFullScreen) {
-            element.mozRequestFullScreen();
-            return;
-        } else if (element.webkitRequestFullscreen) {
-            element.webkitRequestFullscreen();
-            return;
-        } else if (element.msRequestFullscreen) {
-            element.msRequestFullscreen();
-            return;
-        }
-
-        // Hack - This is only available for video elements in ios safari
-        if (element.tagName !== 'VIDEO') {
-            element = document.querySelector('video') || element;
-        }
-        if (element.webkitEnterFullscreen) {
-            element.webkitEnterFullscreen();
-        }
-    };
-
-    fullscreenManager.prototype.exitFullscreen = function () {
-
-        if (!this.isFullScreen()) {
-            return;
-        }
-        if (document.exitFullscreen) {
-            document.exitFullscreen();
-        } else if (document.mozCancelFullScreen) {
-            document.mozCancelFullScreen();
-        } else if (document.webkitExitFullscreen) {
-            document.webkitExitFullscreen();
-        } else if (document.webkitCancelFullscreen) {
-            document.webkitCancelFullscreen();
-        } else if (document.msExitFullscreen) {
-            document.msExitFullscreen();
-        }
-    };
-
-    // TODO: use screenfull.js
-    fullscreenManager.prototype.isFullScreen = function () {
-        return document.fullscreen ||
-            document.mozFullScreen ||
-            document.webkitIsFullScreen ||
-            document.msFullscreenElement || /* IE/Edge syntax */
-            document.fullscreenElement || /* Standard syntax */
-            document.webkitFullscreenElement || /* Chrome, Safari and Opera syntax */
-            document.mozFullScreenElement; /* Firefox syntax */
-    };
-
-    var manager = new fullscreenManager();
-
-    function onFullScreenChange() {
-        events.trigger(manager, 'fullscreenchange');
-    }
-
-    dom.addEventListener(document, 'fullscreenchange', onFullScreenChange, {
-        passive: true
-    });
-
-    dom.addEventListener(document, 'webkitfullscreenchange', onFullScreenChange, {
-        passive: true
-    });
-
-    dom.addEventListener(document, 'mozfullscreenchange', onFullScreenChange, {
-        passive: true
-    });
-
-    function isTargetValid(target) {
-        return !dom.parentWithTag(target, ['BUTTON', 'INPUT', 'TEXTAREA']);
-    }
-    if (appHost.supports("fullscreenchange") && (browser.edgeUwp || -1 !== navigator.userAgent.toLowerCase().indexOf("electron"))) {
-
-        dom.addEventListener(window, 'dblclick', function (e) {
-
-            if (isTargetValid(e.target)) {
-                if (manager.isFullScreen()) {
-                    manager.exitFullscreen();
-                } else {
-                    manager.requestFullscreen();
-                }
-            }
-
-        }, {
-            passive: true
-        });
-    }
-
-    return manager;
-});

src/components/headroom/headroom.css

@@ -1,11 +0,0 @@
-.headroom {
-    transition: transform 140ms linear;
-}
-
-.headroom--pinned {
-    transform: none;
-}
-
-.headroom--unpinned:not(.headroomDisabled) {
-    transform: translateY(-100%);
-}

src/components/headroom/headroom.js

@@ -1,343 +0,0 @@
-/*!
- * headroom.js v0.7.0 - Give your page some headroom. Hide your header until you need it
- * Copyright (c) 2014 Nick Williams - http://wicky.nillia.ms/headroom.js
- * License: MIT
- */
-
-define(['dom', 'layoutManager', 'browser', 'css!./headroom'], function (dom, layoutManager, browser) {
-
-    'use strict';
-
-    /* exported features */
-
-    var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
-
-    /**
-     * Handles debouncing of events via requestAnimationFrame
-     * @see http://www.html5rocks.com/en/tutorials/speed/animations/
-     * @param {Function} callback The callback to handle whichever event
-     */
-    function Debouncer(callback) {
-        this.callback = callback;
-        this.ticking = false;
-    }
-    Debouncer.prototype = {
-        constructor: Debouncer,
-
-        /**
-         * dispatches the event to the supplied callback
-         * @private
-         */
-        update: function () {
-            if (this.callback) {
-                this.callback();
-            }
-            this.ticking = false;
-        },
-
-        /**
-         * Attach this as the event listeners
-         */
-        handleEvent: function () {
-            if (!this.ticking) {
-                requestAnimationFrame(this.rafCallback || (this.rafCallback = this.update.bind(this)));
-                this.ticking = true;
-            }
-        }
-    };
-
-    function onHeadroomClearedExternally() {
-        this.state = null;
-    }
-
-    /**
-   * UI enhancement for fixed headers.
-   * Hides header when scrolling down
-   * Shows header when scrolling up
-   * @constructor
-   * @param {DOMElement} elem the header element
-   * @param {Object} options options for the widget
-   */
-    function Headroom(elems, options) {
-        options = Object.assign(Headroom.options, options || {});
-
-        this.lastKnownScrollY = 0;
-        this.elems = elems;
-
-        this.scroller = options.scroller;
-
-        this.debouncer = onScroll.bind(this);
-        this.offset = options.offset;
-        this.initialised = false;
-
-        this.initialClass = options.initialClass;
-        this.unPinnedClass = options.unPinnedClass;
-        this.pinnedClass = options.pinnedClass;
-
-        this.state = 'clear';
-
-        this.options = {
-            offset: 0,
-            scroller: window,
-            initialClass: 'headroom',
-            unPinnedClass: 'headroom--unpinned',
-            pinnedClass: 'headroom--pinned'
-        };
-
-        this.add = function (elem) {
-
-            if (browser.supportsCssAnimation()) {
-                elem.classList.add(this.initialClass);
-                elem.addEventListener('clearheadroom', onHeadroomClearedExternally.bind(this));
-                this.elems.push(elem);
-            }
-        };
-
-        this.remove = function (elem) {
-
-            elem.classList.remove(this.unPinnedClass);
-            elem.classList.remove(this.initialClass);
-            elem.classList.remove(this.pinnedClass);
-
-            var i = this.elems.indexOf(elem);
-            if (i !== -1) {
-                this.elems.splice(i, 1);
-            }
-        };
-
-        this.pause = function () {
-            this.paused = true;
-        };
-
-        this.resume = function () {
-            this.paused = false;
-        };
-
-        /**
-         * Unattaches events and removes any classes that were added
-         */
-        this.destroy = function () {
-
-            this.initialised = false;
-
-            for (var i = 0, length = this.elems.length; i < length; i++) {
-
-                var classList = this.elems[i].classList;
-
-                classList.remove(this.unPinnedClass);
-                classList.remove(this.initialClass);
-                classList.remove(this.pinnedClass);
-            }
-
-            var scrollEventName = this.scroller.getScrollEventName ? this.scroller.getScrollEventName() : 'scroll';
-
-            dom.removeEventListener(this.scroller, scrollEventName, this.debouncer, {
-                capture: false,
-                passive: true
-            });
-        };
-
-        /**
-         * Attaches the scroll event
-         * @private
-         */
-        this.attachEvent = function () {
-            if (!this.initialised) {
-                this.lastKnownScrollY = this.getScrollY();
-                this.initialised = true;
-
-                var scrollEventName = this.scroller.getScrollEventName ? this.scroller.getScrollEventName() : 'scroll';
-
-                dom.addEventListener(this.scroller, scrollEventName, this.debouncer, {
-                    capture: false,
-                    passive: true
-                });
-
-                this.update();
-            }
-        };
-
-        /**
-         * Unpins the header if it's currently pinned
-         */
-        this.clear = function () {
-
-            if (this.state === 'clear') {
-                return;
-            }
-
-            this.state = 'clear';
-
-            var unpinnedClass = this.unPinnedClass;
-            var pinnedClass = this.pinnedClass;
-
-            for (var i = 0, length = this.elems.length; i < length; i++) {
-                var classList = this.elems[i].classList;
-
-                classList.remove(unpinnedClass);
-                //classList.remove(pinnedClass);
-            }
-        };
-
-        /**
-         * Unpins the header if it's currently pinned
-         */
-        this.pin = function () {
-
-            if (this.state === 'pin') {
-                return;
-            }
-
-            this.state = 'pin';
-
-            var unpinnedClass = this.unPinnedClass;
-            var pinnedClass = this.pinnedClass;
-
-            for (var i = 0, length = this.elems.length; i < length; i++) {
-                var classList = this.elems[i].classList;
-
-                classList.remove(unpinnedClass);
-                classList.add(pinnedClass);
-            }
-        };
-
-        /**
-         * Unpins the header if it's currently pinned
-         */
-        this.unpin = function () {
-
-            if (this.state === 'unpin') {
-                return;
-            }
-
-            this.state = 'unpin';
-
-            var unpinnedClass = this.unPinnedClass;
-            var pinnedClass = this.pinnedClass;
-
-            for (var i = 0, length = this.elems.length; i < length; i++) {
-                var classList = this.elems[i].classList;
-
-                classList.add(unpinnedClass);
-                //classList.remove(pinnedClass);
-            }
-        };
-
-        /**
-         * Gets the Y scroll position
-         * @see https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY
-         * @return {Number} pixels the page has scrolled along the Y-axis
-         */
-        this.getScrollY = function () {
-
-            var scroller = this.scroller;
-
-            if (scroller.getScrollPosition) {
-                return scroller.getScrollPosition();
-            }
-
-            var pageYOffset = scroller.pageYOffset;
-            if (pageYOffset !== undefined) {
-                return pageYOffset;
-            }
-
-            var scrollTop = scroller.scrollTop;
-            if (scrollTop !== undefined) {
-                return scrollTop;
-            }
-
-            return (document.documentElement || document.body).scrollTop;
-        };
-
-        /**
-         * determine if it is appropriate to unpin
-         * @param  {int} currentScrollY the current y scroll position
-         * @return {bool} true if should unpin, false otherwise
-         */
-        this.shouldUnpin = function (currentScrollY) {
-            var scrollingDown = currentScrollY > this.lastKnownScrollY;
-            var pastOffset = currentScrollY >= this.offset;
-
-            return scrollingDown && pastOffset;
-        };
-
-        /**
-         * determine if it is appropriate to pin
-         * @param  {int} currentScrollY the current y scroll position
-         * @return {bool} true if should pin, false otherwise
-         */
-        this.shouldPin = function (currentScrollY) {
-            var scrollingUp = currentScrollY < this.lastKnownScrollY;
-            var pastOffset = currentScrollY <= this.offset;
-
-            return scrollingUp || pastOffset;
-        };
-
-        /**
-         * Handles updating the state of the widget
-         */
-        this.update = function () {
-
-            if (this.paused) {
-                return;
-            }
-
-            var currentScrollY = this.getScrollY();
-
-            var lastKnownScrollY = this.lastKnownScrollY;
-
-            var isTv = layoutManager.tv;
-
-            if (currentScrollY <= (isTv ? 120 : 10)) {
-                this.clear();
-            } else if (this.shouldUnpin(currentScrollY)) {
-                this.unpin();
-            } else if (this.shouldPin(currentScrollY)) {
-
-                var toleranceExceeded = Math.abs(currentScrollY - lastKnownScrollY) >= 14;
-
-                if (currentScrollY && isTv) {
-                    this.unpin();
-                } else if (toleranceExceeded) {
-                    this.clear();
-                }
-            } else if (isTv) {
-                //this.clear();
-            }
-
-            this.lastKnownScrollY = currentScrollY;
-        };
-
-        if (browser.supportsCssAnimation()) {
-            for (var i = 0, length = this.elems.length; i < length; i++) {
-                this.elems[i].classList.add(this.initialClass);
-                this.elems[i].addEventListener('clearheadroom', onHeadroomClearedExternally.bind(this));
-            }
-
-            this.attachEvent();
-        }
-    }
-
-    function onScroll() {
-
-        if (this.paused) {
-            return;
-        }
-
-        requestAnimationFrame(this.rafCallback || (this.rafCallback = this.update.bind(this)));
-    }
-
-    /**
-     * Default options
-     * @type {Object}
-     */
-    Headroom.options = {
-        offset: 0,
-        scroller: window,
-        initialClass: 'headroom',
-        unPinnedClass: 'headroom--unpinned',
-        pinnedClass: 'headroom--pinned'
-    };
-
-    return Headroom;
-});

src/components/homesections/homesections.js

@@ -64,13 +64,13 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
             } else {
                 var noLibDescription;
                 if (user['Policy'] && user['Policy']['IsAdministrator']) {
-                    noLibDescription = Globalize.translate("NoCreatedLibraries", '<a id="button-createLibrary" class="button-link">', '</a>');
+                    noLibDescription = globalize.translate("NoCreatedLibraries", '<br><a id="button-createLibrary" class="button-link">', '</a>');
                 } else {
-                    noLibDescription = Globalize.translate("AskAdminToCreateLibrary");
+                    noLibDescription = globalize.translate("AskAdminToCreateLibrary");
                 }
 
                 html += '<div class="centerMessage padded-left padded-right">';
-                html += '<h2>' + Globalize.translate("MessageNothingHere") + '</h2>';
+                html += '<h2>' + globalize.translate("MessageNothingHere") + '</h2>';
                 html += '<p>' + noLibDescription + '</p>';
                 html += '</div>';
                 elem.innerHTML = html;
@@ -243,9 +243,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         return function (items) {
             var cardLayout = false;
             var shape;
-            if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books') {
+            if (itemType === 'Channel' || viewType === 'movies' || viewType === 'books' || viewType === 'tvshows') {
                 shape = getPortraitShape();
-            } else if (viewType === 'music') {
+            } else if (viewType === 'music' || viewType === 'homevideos') {
                 shape = getSquareShape();
             } else {
                 shape = getThumbShape();

src/components/htmlMediaHelper.js

@@ -162,7 +162,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
         }
     }
 
-    function seekOnPlaybackStart(instance, element, ticks) {
+    function seekOnPlaybackStart(instance, element, ticks, onMediaReady) {
 
         var seconds = (ticks || 0) / 10000000;
 
@@ -175,6 +175,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
             if (element.duration >= seconds) {
                 // media is ready, seek immediately
                 setCurrentTimeIfNeeded(element, seconds);
+                if (onMediaReady) onMediaReady();
             } else {
                 // update video player position when media is ready to be sought
                 var events = ["durationchange", "loadeddata", "play", "loadedmetadata"];
@@ -189,6 +190,7 @@ define(['appSettings', 'browser', 'events'], function (appSettings, browser, eve
                         events.map(function(name) {
                             element.removeEventListener(name, onMediaChange);
                         });
+                        if (onMediaReady) onMediaReady();
                     }
                 };
                 events.map(function (name) {

src/components/htmlvideoplayer/plugin.js

@@ -1,4 +1,4 @@
-define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackManager', 'appRouter', 'appSettings', 'connectionManager', 'htmlMediaHelper', 'itemHelper', 'fullscreenManager', 'globalize'], function (browser, require, events, appHost, loading, dom, playbackManager, appRouter, appSettings, connectionManager, htmlMediaHelper, itemHelper, fullscreenManager, globalize) {
+define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackManager', 'appRouter', 'appSettings', 'connectionManager', 'htmlMediaHelper', 'itemHelper', 'screenfull', 'globalize'], function (browser, require, events, appHost, loading, dom, playbackManager, appRouter, appSettings, connectionManager, htmlMediaHelper, itemHelper, screenfull, globalize) {
     "use strict";
     /* globals cast */
 
@@ -795,7 +795,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 dlg.parentNode.removeChild(dlg);
             }
 
-            fullscreenManager.exitFullscreen();
+            if (screenfull.isEnabled) {
+                screenfull.exit();
+            }
         };
 
         function onEnded() {
@@ -857,7 +859,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
                 loading.hide();
 
-                htmlMediaHelper.seekOnPlaybackStart(self, e.target, self._currentPlayOptions.playerStartPositionTicks);
+                htmlMediaHelper.seekOnPlaybackStart(self, e.target, self._currentPlayOptions.playerStartPositionTicks, function () {
+                    if (currentSubtitlesOctopus) currentSubtitlesOctopus.resize();
+                });
 
                 if (self._currentPlayOptions.fullscreen) {
 

src/components/itemcontextmenu.js

@@ -90,7 +90,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                 });
             }
 
-            if (itemHelper.supportsAddingToPlaylist(item)) {
+            if (itemHelper.supportsAddingToPlaylist(item) && options.playlist !== false) {
                 commands.push({
                     name: globalize.translate("AddToPlaylist"),
                     id: "addtoplaylist",
@@ -218,7 +218,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
         if (item.Type === "Program" && options.record !== false) {
             if (item.TimerId) {
                 commands.push({
-                    name: Globalize.translate("ManageRecording"),
+                    name: globalize.translate("ManageRecording"),
                     id: "record",
                     icon: "fiber_manual_record"
                 });
@@ -228,7 +228,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
         if (item.Type === "Program" && options.record !== false) {
             if (!item.TimerId) {
                 commands.push({
-                    name: Globalize.translate("Record"),
+                    name: globalize.translate("Record"),
                     id: "record",
                     icon: "fiber_manual_record"
                 });
@@ -283,7 +283,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
 
         if (options.openAlbum !== false && item.AlbumId && item.MediaType !== "Photo") {
             commands.push({
-                name: Globalize.translate("ViewAlbum"),
+                name: globalize.translate("ViewAlbum"),
                 id: "album",
                 icon: "album"
             });
@@ -291,7 +291,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
 
         if (options.openArtist !== false && item.ArtistItems && item.ArtistItems.length) {
             commands.push({
-                name: Globalize.translate("ViewArtist"),
+                name: globalize.translate("ViewArtist"),
                 id: "artist",
                 icon: "person"
             });

src/components/layoutManager.js

@@ -45,7 +45,7 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
         // Take a guess at initial layout. The consuming app can override
         if (browser.mobile) {
             this.setLayout('mobile', false);
-        } else if (browser.tv || browser.xboxOne) {
+        } else if (browser.tv || browser.xboxOne || browser.ps4) {
             this.setLayout('tv', false);
         } else {
             this.setLayout(this.defaultLayout || 'tv', false);

src/components/maintabsmanager.js

@@ -166,6 +166,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
             }).join('') + '</div></div>';
 
             tabsContainerElem.innerHTML = tabsHtml;
+            window.CustomElements.upgradeSubtree(tabsContainerElem);
 
             document.body.classList.add('withSectionTabs');
             tabOwnerView = view;

src/components/medialibrarycreator/medialibrarycreator.js

@@ -1,4 +1,4 @@
-define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionseditor/libraryoptionseditor", "emby-toggle", "emby-input", "emby-select", "paper-icon-button-light", "listViewStyle", "formDialogStyle", "emby-button", "flexStyles"], function (loading, dialogHelper, dom, $, libraryoptionseditor) {
+define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionseditor/libraryoptionseditor", "globalize", "emby-toggle", "emby-input", "emby-select", "paper-icon-button-light", "listViewStyle", "formDialogStyle", "emby-button", "flexStyles"], function (loading, dialogHelper, dom, $, libraryoptionseditor, globalize) {
     "use strict";
 
     function onAddLibrary() {
@@ -9,7 +9,7 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
         if (pathInfos.length == 0) {
             require(["alert"], function (alert) {
                 alert({
-                    text: Globalize.translate("PleaseAddAtLeastOneFolder"),
+                    text: globalize.translate("PleaseAddAtLeastOneFolder"),
                     type: "error"
                 });
             });
@@ -36,7 +36,7 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
             dialogHelper.close(dlg);
         }, function () {
             require(["toast"], function (toast) {
-                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
+                toast(globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
             });
 
             isCreating = false;
@@ -196,7 +196,7 @@ define(["loading", "dialogHelper", "dom", "jQuery", "components/libraryoptionsed
                     dlg.classList.add("background-theme-a");
                     dlg.classList.add("dlg-librarycreator");
                     dlg.classList.add("formDialog");
-                    dlg.innerHTML = Globalize.translateDocument(template);
+                    dlg.innerHTML = globalize.translateDocument(template);
                     initEditor(dlg, options.collectionTypeOptions);
                     dlg.addEventListener("close", onDialogClosed);
                     dialogHelper.open(dlg);

src/components/medialibraryeditor/medialibraryeditor.js

@@ -1,4 +1,4 @@
-define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionseditor/libraryoptionseditor", "emby-button", "listViewStyle", "paper-icon-button-light", "formDialogStyle", "emby-toggle", "flexStyles"], function (jQuery, loading, dialogHelper, dom, libraryoptionseditor) {
+define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionseditor/libraryoptionseditor", "globalize", "emby-button", "listViewStyle", "paper-icon-button-light", "formDialogStyle", "emby-toggle", "flexStyles"], function (jQuery, loading, dialogHelper, dom, libraryoptionseditor, globalize) {
     "use strict";
 
     function onEditLibrary() {
@@ -31,7 +31,7 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
             refreshLibraryFromServer(page);
         }, function () {
             require(["toast"], function (toast) {
-                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
+                toast(globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
             });
         });
     }
@@ -46,7 +46,7 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
             refreshLibraryFromServer(page);
         }, function () {
             require(["toast"], function (toast) {
-                toast(Globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
+                toast(globalize.translate("ErrorAddingMediaPathToVirtualFolder"));
             });
         });
     }
@@ -57,9 +57,9 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
 
         require(["confirm"], function (confirm) {
             confirm({
-                title: Globalize.translate("HeaderRemoveMediaLocation"),
-                text: Globalize.translate("MessageConfirmRemoveMediaLocation"),
-                confirmText: Globalize.translate("ButtonDelete"),
+                title: globalize.translate("HeaderRemoveMediaLocation"),
+                text: globalize.translate("MessageConfirmRemoveMediaLocation"),
+                confirmText: globalize.translate("ButtonDelete"),
                 primary: "delete"
             }).then(function () {
                 var refreshAfterChange = currentOptions.refresh;
@@ -68,7 +68,7 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
                     refreshLibraryFromServer(dom.parentWithClass(button, "dlg-libraryeditor"));
                 }, function () {
                     require(["toast"], function (toast) {
-                        toast(Globalize.translate("DefaultErrorMessage"));
+                        toast(globalize.translate("DefaultErrorMessage"));
                     });
                 });
             });
@@ -213,7 +213,7 @@ define(["jQuery", "loading", "dialogHelper", "dom", "components/libraryoptionsed
                 dlg.classList.add("ui-body-a");
                 dlg.classList.add("background-theme-a");
                 dlg.classList.add("formDialog");
-                dlg.innerHTML = Globalize.translateDocument(template);
+                dlg.innerHTML = globalize.translateDocument(template);
                 dlg.querySelector(".formDialogHeaderTitle").innerHTML = options.library.Name;
                 initEditor(dlg, options);
                 dlg.addEventListener("close", onDialogClosed);

src/components/multiselect/multiselect.js

@@ -212,7 +212,7 @@ define(["browser", "appStorage", "apphost", "loading", "connectionManager", "glo
 
             if (user.Policy.EnableContentDownloading && appHost.supports("filedownload")) {
                 menuItems.push({
-                    name: Globalize.translate("ButtonDownload"),
+                    name: globalize.translate("ButtonDownload"),
                     id: "download",
                     icon: "file_download"
                 });

src/components/notifications/notifications.js

@@ -5,7 +5,8 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
         document.removeEventListener('click', onOneDocumentClick);
         document.removeEventListener('keydown', onOneDocumentClick);
 
-        if (window.Notification) {
+        // don't request notification permissions if they're already granted or denied
+        if (window.Notification && window.Notification.permission === "default") {
             /* eslint-disable-next-line compat/compat */
             Notification.requestPermission();
         }

src/components/nowplayingbar/nowplayingbar.js

@@ -1,4 +1,4 @@
-define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', 'layoutManager', 'playbackManager', 'nowPlayingHelper', 'apphost', 'dom', 'connectionManager', 'paper-icon-button-light', 'emby-ratingbutton'], function (require, datetime, itemHelper, events, browser, imageLoader, layoutManager, playbackManager, nowPlayingHelper, appHost, dom, connectionManager) {
+define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader', 'layoutManager', 'playbackManager', 'nowPlayingHelper', 'apphost', 'dom', 'connectionManager', 'itemContextMenu', 'paper-icon-button-light', 'emby-ratingbutton'], function (require, datetime, itemHelper, events, browser, imageLoader, layoutManager, playbackManager, nowPlayingHelper, appHost, dom, connectionManager, itemContextMenu) {
     'use strict';
 
     var currentPlayer;
@@ -66,7 +66,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         html += '</div>';
 
         html += '<button is="paper-icon-button-light" class="playPauseButton mediaButton"><i class="material-icons">pause</i></button>';
-        html += '<button is="paper-icon-button-light" class="remoteControlButton mediaButton"><i class="material-icons playlist_play"></i></button>';
+        html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><i class="material-icons more_vert"></i></button>';
 
         html += '</div>';
         html += '</div>';
@@ -155,8 +155,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             }
         });
 
-        elem.querySelector('.remoteControlButton').addEventListener('click', showRemoteControl);
-
         toggleRepeatButton = elem.querySelector('.toggleRepeatButton');
         toggleRepeatButton.addEventListener('click', function () {
 
@@ -187,29 +185,15 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             volumeSliderContainer.classList.remove('hide');
         }
 
-        var volumeSliderTimer;
-
         function setVolume() {
-            clearTimeout(volumeSliderTimer);
-            volumeSliderTimer = null;
-
             if (currentPlayer) {
                 currentPlayer.setVolume(this.value);
             }
         }
 
-        function setVolumeDelayed() {
-            if (!volumeSliderTimer) {
-                var that = this;
-                volumeSliderTimer = setTimeout(function () {
-                    setVolume.call(that);
-                }, 700);
-            }
-        }
-
         volumeSlider.addEventListener('change', setVolume);
-        volumeSlider.addEventListener('mousemove', setVolumeDelayed);
-        volumeSlider.addEventListener('touchmove', setVolumeDelayed);
+        volumeSlider.addEventListener('mousemove', setVolume);
+        volumeSlider.addEventListener('touchmove', setVolume);
 
         positionSlider = elem.querySelector('.nowPlayingBarPositionSlider');
         positionSlider.addEventListener('change', function () {
@@ -240,7 +224,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
 
         elem.addEventListener('click', function (e) {
 
-            if (!dom.parentWithTag(e.target, ['BUTTON', 'INPUT', 'A'])) {
+            if (!dom.parentWithTag(e.target, ['BUTTON', 'INPUT'])) {
                 showRemoteControl();
             }
         });
@@ -449,17 +433,13 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         }
     }
 
-    function getTextActionButton(item, text, serverId) {
+    function getTextActionButton(item, text) {
 
         if (!text) {
             text = itemHelper.getDisplayName(item);
         }
 
-        var html = '<button data-id="' + item.Id + '" data-serverid="' + (item.ServerId || serverId) + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '" data-channelid="' + item.ChannelId + '" data-isfolder="' + item.IsFolder + '" type="button" class="itemAction textActionButton" data-action="link">';
-        html += text;
-        html += '</button>';
-
-        return html;
+        return `<a>${text}</a>`;
     }
 
     function seriesImageUrl(item, options) {
@@ -537,16 +517,16 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         if (textLines.length > 1) {
             textLines[1].secondary = true;
         }
-        var serverId = nowPlayingItem ? nowPlayingItem.ServerId : null;
         nowPlayingTextElement.innerHTML = textLines.map(function (nowPlayingName) {
 
             var cssClass = nowPlayingName.secondary ? ' class="nowPlayingBarSecondaryText"' : '';
 
             if (nowPlayingName.item) {
-                return '<div' + cssClass + '>' + getTextActionButton(nowPlayingName.item, nowPlayingName.text, serverId) + '</div>';
+                var nowPlayingText = getTextActionButton(nowPlayingName.item, nowPlayingName.text);
+                return `<div ${cssClass}>${nowPlayingText}</div>`;
             }
 
-            return '<div' + cssClass + '>' + nowPlayingName.text + '</div>';
+            return `<div ${cssClass}>${nowPlayingText}</div>`;
 
         }).join('');
 
@@ -575,15 +555,25 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
             if (isRefreshing) {
 
                 var apiClient = connectionManager.getApiClient(nowPlayingItem.ServerId);
-
                 apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
-
                     var userData = item.UserData || {};
                     var likes = userData.Likes == null ? '' : userData.Likes;
-
+                    var contextButton = document.querySelector('.btnToggleContextMenu');
+                    var options = {
+                        play: false,
+                        queue: false,
+                        positionTo: contextButton
+                    };
                     nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="material-icons">favorite</i></button>';
+                    apiClient.getCurrentUser().then(function(user) {
+                        contextButton.addEventListener('click', function () {
+                            itemContextMenu.show(Object.assign({
+                                item: item,
+                                user: user
+                            }, options ));
+                        });
+                    });
                 });
-
             }
         } else {
             nowPlayingUserData.innerHTML = '';

src/components/playback/experimentalwarnings.js

@@ -44,24 +44,15 @@ define(['connectionManager', 'globalize', 'userSettings', 'apphost'], function (
     }
 
     function showBlurayMessage() {
-
-        var message =
-            'Playback of Bluray folders in this app is experimental. Some titles may not work at all. For a better experience, consider converting to mkv video files, or use an Jellyfin app with native Bluray folder support.';
-        return showMessage(message, 'blurayexpirementalinfo', 'nativeblurayplayback');
+        return showMessage(globalize.translate("UnsupportedPlayback"), 'blurayexpirementalinfo', 'nativeblurayplayback');
     }
 
     function showDvdMessage() {
-
-        var message =
-            'Playback of Dvd folders in this app is experimental. Some titles may not work at all. For a better experience, consider converting to mkv video files, or use an Jellyfin app with native Dvd folder support.';
-        return showMessage(message, 'dvdexpirementalinfo', 'nativedvdplayback');
+        return showMessage(globalize.translate("UnsupportedPlayback"), 'dvdexpirementalinfo', 'nativedvdplayback');
     }
 
     function showIsoMessage() {
-
-        var message =
-            'Playback of ISO files in this app is experimental. Some titles may not work at all. For a better experience, consider converting to mkv video files, or use an Jellyfin app with native ISO support.';
-        return showMessage(message, 'isoexpirementalinfo', 'nativeisoplayback');
+        return showMessage(globalize.translate("UnsupportedPlayback"), 'isoexpirementalinfo', 'nativeisoplayback');
     }
 
     function ExpirementalPlaybackWarnings() {

src/components/playback/playbackmanager.js

@@ -1,6 +1,9 @@
-define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'playQueueManager', 'userSettings', 'globalize', 'connectionManager', 'loading', 'apphost', 'fullscreenManager'], function (events, datetime, appSettings, itemHelper, pluginManager, PlayQueueManager, userSettings, globalize, connectionManager, loading, apphost, fullscreenManager) {
+define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'playQueueManager', 'userSettings', 'globalize', 'connectionManager', 'loading', 'apphost', 'screenfull'], function (events, datetime, appSettings, itemHelper, pluginManager, PlayQueueManager, userSettings, globalize, connectionManager, loading, apphost, screenfull) {
     'use strict';
 
+    /** Delay time in ms for reportPlayback logging */
+    const reportPlaybackLogDelay = 1e3;
+
     function enableLocalPlaylistManagement(player) {
 
         if (player.getPlaylist) {
@@ -17,9 +20,11 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
     }
 
     function bindToFullscreenChange(player) {
-        events.on(fullscreenManager, 'fullscreenchange', function () {
-            events.trigger(player, 'fullscreenchange');
-        });
+        if (screenfull.isEnabled) {
+            screenfull.on('change', function () {
+                events.trigger(player, 'fullscreenchange');
+            });
+        }
     }
 
     function triggerPlayerChange(playbackManagerInstance, newPlayer, newTarget, previousPlayer, previousTargetInfo) {
@@ -38,6 +43,12 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         events.trigger(playbackManagerInstance, 'playerchange', [newPlayer, newTarget, previousPlayer]);
     }
 
+    /** Last invoked method */
+    let reportPlaybackLastMethod;
+
+    /** Last invoke time of method */
+    let reportPlaybackLastTime;
+
     function reportPlayback(playbackManagerInstance, state, player, reportPlaylist, serverId, method, progressEventName) {
 
         if (!serverId) {
@@ -57,7 +68,14 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             addPlaylistToPlaybackReport(playbackManagerInstance, info, player, serverId);
         }
 
-        console.debug(method + '-' + JSON.stringify(info));
+        const now = (new Date).getTime();
+
+        if (method !== reportPlaybackLastMethod || now - (reportPlaybackLastTime || 0) >= reportPlaybackLogDelay) {
+            console.debug(method + '-' + JSON.stringify(info));
+            reportPlaybackLastMethod = method;
+            reportPlaybackLastTime = now;
+        }
+
         var apiClient = connectionManager.getApiClient(serverId);
         apiClient[method](info);
     }
@@ -1518,7 +1536,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 return player.isFullscreen();
             }
 
-            return fullscreenManager.isFullScreen();
+            return screenfull.isFullscreen;
         };
 
         self.toggleFullscreen = function (player) {
@@ -1528,10 +1546,8 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 return player.toggleFulscreen();
             }
 
-            if (fullscreenManager.isFullScreen()) {
-                fullscreenManager.exitFullscreen();
-            } else {
-                fullscreenManager.requestFullscreen();
+            if (screenfull.isEnabled) {
+                screenfull.toggle();
             }
         };
 
@@ -3378,7 +3394,6 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
         pluginManager.ofType('mediaplayer').map(initMediaPlayer);
 
         function sendProgressUpdate(player, progressEventName, reportPlaylist) {
-
             if (!player) {
                 throw new Error('player cannot be null');
             }

src/components/polyfills/objectassign.js

@@ -1,24 +0,0 @@
-if (typeof Object.assign != 'function') {
-    (function () {
-        Object.assign = function (target) {
-            'use strict';
-            if (target === undefined || target === null) {
-                throw new TypeError('Cannot convert undefined or null to object');
-            }
-
-            var output = Object(target);
-            for (var index = 1; index < arguments.length; index++) {
-                var source = arguments[index];
-                if (source !== undefined && source !== null) {
-                    for (var nextKey in source) {
-                        // eslint-disable-next-line no-prototype-builtins
-                        if (source.hasOwnProperty(nextKey)) {
-                            output[nextKey] = source[nextKey];
-                        }
-                    }
-                }
-            }
-            return output;
-        };
-    })();
-}

src/components/remotecontrol/remotecontrol.css

@@ -1,3 +1,7 @@
+.nowPlayingPage {
+    padding: 5em 0 0 0 !important;
+}
+
 .nowPlayingInfoContainer {
     display: -webkit-box;
     display: -webkit-flex;
@@ -36,8 +40,30 @@
     margin: 0 0 0.5em 0.5em;
 }
 
+.nowPlayingAlbum a,
+.nowPlayingArtist a {
+    font-weight: normal;
+    text-align: left !important;
+    color: inherit !important;
+}
+
+.nowPlayingButtonsContainer {
+    display: flex;
+}
+
+.nowPlayingInfoContainerMedia {
+    text-align: left;
+    margin-bottom: 1em;
+}
+
+.nowPlayingPositionSlider {
+    width: stretch;
+}
+
 .nowPlayingPositionSliderContainer {
-    margin: 0.7em 0 0.7em 1em;
+    margin: 0.2em 1em 0.2em 1em;
+    width: 100%;
+    z-index: 0;
 }
 
 .nowPlayingInfoButtons {
@@ -59,17 +85,32 @@
 }
 
 .nowPlayingPageImageContainer {
-    width: 20%;
-    margin-right: 0.25em;
+    width: 16%;
+    margin-right: 1em;
     position: relative;
     -webkit-flex-shrink: 0;
     flex-shrink: 0;
 }
 
-@media all and (min-width: 50em) {
-    .nowPlayingPageImageContainer {
-        width: 16%;
-    }
+.nowPlayingPageImageContainerNoAlbum {
+    width: 100%;
+    position: relative;
+}
+
+.nowPlayingPageImageContainerNoAlbum button {
+    cursor: default;
+}
+
+.nowPlayingPageImageContainerNoAlbum::after {
+    content: "";
+    display: block;
+    padding-bottom: 100%;
+}
+
+.btnPlayPause {
+    font-size: xx-large;
+    padding: 0;
+    margin: 0;
 }
 
 .nowPlayingInfoControls {
@@ -87,14 +128,15 @@
 }
 
 .nowPlayingPageImage {
+    display: block;
     bottom: 0;
     left: 0;
     right: 0;
+    margin: 0 auto;
     width: 100%;
     -webkit-box-shadow: 0 0 1.9vh #000;
     box-shadow: 0 0 1.9vh #000;
     border: 0.1em solid #222;
-    user-drag: none;
     user-select: none;
     -moz-user-select: none;
     -webkit-user-drag: none;
@@ -102,60 +144,16 @@
     -ms-user-select: none;
 }
 
-@media all and (orientation: portrait) and (max-width: 50em) {
-    .nowPlayingInfoContainer {
-        -webkit-box-orient: vertical !important;
-        -webkit-box-direction: normal !important;
-        -webkit-flex-direction: column !important;
-        flex-direction: column !important;
-        -webkit-box-align: center;
-        -webkit-align-items: center;
-        align-items: center;
-    }
-
-    .nowPlayingPageTitle {
-        text-align: center;
-        margin: 0.5em 0 0.75em;
-    }
-
-    .nowPlayingPositionSliderContainer {
-        margin: 0.7em 1em;
-    }
-
-    .nowPlayingInfoButtons {
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        justify-content: center;
-    }
-
-    .nowPlayingPageImageContainer {
-        width: auto;
-        margin-right: 0;
-    }
-
-    .nowPlayingInfoControls {
-        margin-top: 1em;
-        max-width: 100%;
-    }
-
-    .nowPlayingPageImage {
-        width: auto;
-        height: 36vh;
-    }
+.contextMenuList {
+    padding: 1.5em 0;
 }
 
-@media all and (orientation: portrait) and (max-width: 40em) {
-    .nowPlayingPageImage {
-        height: 30vh;
-    }
+.contextMenuList a {
+    color: inherit !important;
 }
 
-.nowPlayingTime {
-    display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-    margin: 0 1em;
+.contextMenuList i.listItemIcon {
+    font-size: x-large;
 }
 
 .nowPlayingSecondaryButtons {
@@ -167,12 +165,17 @@
     align-items: center;
     -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+    z-index: 0;
 }
 
-@media all and (min-width: 50em) {
+@media all and (min-width: 63em) {
+    .nowPlayingPage {
+        padding: 8em 0 0 0 !important;
+    }
+
     .nowPlayingSecondaryButtons {
         -webkit-box-flex: 1;
         -webkit-flex-grow: 1;
@@ -181,6 +184,16 @@
         -webkit-justify-content: flex-end;
         justify-content: flex-end;
     }
+
+    .nowPlayingPageUserDataButtonsTitle {
+        display: none !important;
+    }
+
+    .playlistSectionButton,
+    .nowPlayingPlaylist,
+    .nowPlayingContextMenu {
+        background: unset !important;
+    }
 }
 
 @media all and (min-width: 80em) {
@@ -189,6 +202,414 @@
     }
 }
 
+@media all and (orientation: portrait) and (max-width: 47em) {
+    .remoteControlContent {
+        padding-left: 7.3% !important;
+        padding-right: 7.3% !important;
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+    }
+
+    .nowPlayingInfoContainer {
+        -webkit-box-orient: vertical !important;
+        -webkit-box-direction: normal !important;
+        -webkit-flex-direction: column !important;
+        flex-direction: column !important;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+        width: 100%;
+        height: calc(100% - 4.2em);
+    }
+
+    .nowPlayingPageTitle {
+        /* text-align: center; */
+        margin: 0;
+    }
+
+    .nowPlayingAlbum,
+    .nowPlayingArtist {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .nowPlayingInfoContainerMedia {
+        text-align: left !important;
+        width: 80%;
+    }
+
+    .nowPlayingPositionSliderContainer {
+        margin: 0.2em 1em 0.2em 1em;
+    }
+
+    .nowPlayingInfoButtons {
+        /* margin: 1.5em 0 0 0; */
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+        font-size: x-large;
+        height: 100%;
+    }
+
+    .nowPlayingPageImageContainer {
+        width: 100%;
+        margin: auto auto 0.5em;
+    }
+
+    .nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon {
+        font-size: 15em;
+        color: inherit;
+    }
+
+    .nowPlayingInfoControls {
+        margin: 0.5em 0 1em 0;
+        width: 100%;
+        -webkit-box-pack: start !important;
+        -webkit-justify-content: start !important;
+        justify-content: start !important;
+    }
+
+    .nowPlayingSecondaryButtons {
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+    }
+
+    .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
+        width: 20%;
+        font-size: large;
+    }
+
+    .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
+        padding-top: 0;
+        padding-right: 0;
+        margin-right: 0;
+        float: right;
+        border-radius: 0;
+    }
+
+    .nowPlayingInfoButtons .btnRewind {
+        position: absolute;
+        left: 0;
+        margin-left: 0;
+        padding-left: 7.3%;
+        font-size: smaller;
+    }
+
+    .nowPlayingInfoButtons .btnFastForward {
+        position: absolute;
+        right: 0;
+        margin-right: 0;
+        padding-right: 7.3%;
+        font-size: smaller;
+    }
+
+    .paper-icon-button-light:hover {
+        color: #fff !important;
+        background-color: transparent !important;
+    }
+
+    .btnPlayPause {
+        padding: 0;
+        margin: 0;
+        font-size: 1.7em;
+    }
+
+    .btnPlayPause:hover {
+        background-color: transparent !important;
+    }
+
+    .nowPlayingPageImage {
+        /* width: inherit; */
+        overflow-y: hidden;
+        overflow: hidden;
+        margin: 0 auto;
+    }
+
+    .nowPlayingPageImage.nowPlayingPageImageAudio {
+        width: 100%;
+    }
+
+    .nowPlayingPageImageContainer.nowPlayingPageImagePoster {
+        height: 50%;
+        overflow: hidden;
+    }
+
+    .nowPlayingPageImageContainer.nowPlayingPageImagePoster img {
+        height: 100%;
+        width: auto;
+    }
+
+    #nowPlayingPage .playlistSection .playlist,
+    #nowPlayingPage .playlistSection .contextMenu {
+        position: absolute;
+        top: 12.2em;
+        bottom: 4.2em;
+        overflow: scroll;
+        padding: 0 1em;
+        display: inline-block;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+    }
+
+    .playlistSectionButton {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        height: 4.2em;
+        right: 0;
+        padding-left: 7.3%;
+        padding-right: 7.3%;
+    }
+
+    .playlistSectionButton .btnTogglePlaylist {
+        font-size: larger;
+        margin: 0;
+        padding-left: 0;
+    }
+
+    .playlistSectionButton .btnSavePlaylist {
+        margin: 0;
+        padding-right: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
+        border-radius: 0;
+    }
+
+    .playlistSectionButton .btnToggleContextMenu {
+        font-size: larger;
+        margin: 0;
+        padding-right: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
+        border-radius: 0;
+    }
+
+    .playlistSectionButton .volumecontrol {
+        width: 100%;
+    }
+
+    .remoteControlSection {
+        margin: 0;
+        padding: 0 0 4.2em 0;
+    }
+
+    .nowPlayingButtonsContainer {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+    }
+}
+
+@media all and (orientation: landscape) and (max-width: 63em) {
+    .remoteControlContent {
+        padding-left: 4.3% !important;
+        padding-right: 4.3% !important;
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+    }
+
+    .nowPlayingInfoContainer {
+        -webkit-box-orient: horizontal !important;
+        -webkit-box-direction: normal !important;
+        -webkit-flex-direction: row !important;
+        flex-direction: row !important;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+        width: 100%;
+        height: calc(100% - 4.2em);
+    }
+
+    .nowPlayingPageTitle {
+        /* text-align: center; */
+        margin: 0;
+    }
+
+    .nowPlayingInfoContainerMedia {
+        text-align: left !important;
+        width: 80%;
+    }
+
+    .nowPlayingPositionSliderContainer {
+        margin: 0.2em 1em 0.2em 1em;
+    }
+
+    .nowPlayingInfoButtons {
+        /* margin: 1.5em 0 0 0; */
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+        font-size: x-large;
+        height: 100%;
+    }
+
+    .nowPlayingPageImageContainer {
+        width: 30%;
+        margin: auto 1em auto auto;
+    }
+
+    .nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon {
+        font-size: 12em;
+        color: inherit;
+    }
+
+    .nowPlayingInfoControls {
+        margin: 0.5em 0 1em 0;
+        width: 100%;
+        -webkit-box-pack: start !important;
+        -webkit-justify-content: start !important;
+        justify-content: start !important;
+    }
+
+    .nowPlayingSecondaryButtons {
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+    }
+
+    .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
+        width: 20%;
+        font-size: large;
+    }
+
+    .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
+        padding-top: 0;
+        padding-right: 0;
+        margin-right: 0;
+        float: right;
+        border-radius: 0;
+    }
+
+    .paper-icon-button-light:hover {
+        color: #fff !important;
+        background-color: transparent !important;
+    }
+
+    .btnPlayPause {
+        padding: 0;
+        margin: 0;
+        font-size: 1.7em;
+    }
+
+    .btnPlayPause:hover {
+        background-color: transparent !important;
+    }
+
+    .nowPlayingPageImage {
+        /* width: inherit; */
+        overflow-y: hidden;
+        overflow: hidden;
+        margin: 0 auto;
+    }
+
+    .nowPlayingPageImage.nowPlayingPageImageAudio {
+        width: 100%;
+    }
+
+    .nowPlayingPageImageContainer.nowPlayingPageImagePoster {
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .nowPlayingPageImageContainer.nowPlayingPageImagePoster img {
+        height: 100%;
+        width: auto;
+    }
+
+    #nowPlayingPage .playlistSection .playlist,
+    #nowPlayingPage .playlistSection .contextMenu {
+        position: absolute;
+        top: 7.2em;
+        bottom: 4.2em;
+        overflow: scroll;
+        padding: 0 1em;
+        display: inline-block;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+    }
+
+    .playlistSectionButton {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        height: 4.2em;
+        right: 0;
+        padding-left: 4.3%;
+        padding-right: 4.3%;
+    }
+
+    .playlistSectionButton .btnTogglePlaylist {
+        font-size: larger;
+        margin: 0;
+        padding-left: 0;
+    }
+
+    .playlistSectionButton .btnSavePlaylist {
+        margin: 0;
+        padding-right: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
+        border-radius: 0;
+    }
+
+    .playlistSectionButton .btnToggleContextMenu {
+        font-size: larger;
+        margin: 0;
+        padding-right: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
+        border-radius: 0;
+    }
+
+    .playlistSectionButton .volumecontrol {
+        width: 100%;
+    }
+
+    .remoteControlSection {
+        margin: 4.2em 0 0 0;
+        padding: 0 0 4.2em 0;
+    }
+
+    .nowPlayingButtonsContainer {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+    }
+}
+
+.nowPlayingTime {
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    margin: 0 1em;
+}
+
 .nowPlayingNavButtonContainer {
     width: 30em;
 }
@@ -214,8 +635,11 @@
     width: 9em;
 }
 
-@media all and (max-width: 50em) {
-    .nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
+@media all and (max-width: 63em) {
+    .nowPlayingSecondaryButtons .nowPlayingPageUserDataButtons,
+    .nowPlayingSecondaryButtons .repeatToggleButton,
+    .nowPlayingInfoButtons .playlist .listItemMediaInfo,
+    .nowPlayingInfoButtons .btnStop {
         display: none !important;
     }
 
@@ -223,17 +647,3 @@
         font-size: 4em;
     }
 }
-
-@media all and (max-width: 47em) {
-    .nowPlayingInfoButtons .repeatToggleButton {
-        display: none !important;
-    }
-}
-
-@media all and (max-width: 34em) {
-    .nowPlayingInfoButtons .btnNowPlayingFastForward,
-    .nowPlayingInfoButtons .btnNowPlayingRewind,
-    .nowPlayingInfoButtons .playlist .listItemMediaInfo {
-        display: none !important;
-    }
-}

src/components/remotecontrol/remotecontrol.js

@@ -1,4 +1,4 @@
-define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageLoader", "playbackManager", "nowPlayingHelper", "events", "connectionManager", "apphost", "globalize", "layoutManager", "userSettings", "cardStyle", "emby-itemscontainer", "css!./remotecontrol.css", "emby-ratingbutton"], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings) {
+define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageLoader", "playbackManager", "nowPlayingHelper", "events", "connectionManager", "apphost", "globalize", "layoutManager", "userSettings", "cardBuilder", "cardStyle", "emby-itemscontainer", "css!./remotecontrol.css", "emby-ratingbutton"], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings, cardBuilder) {
     "use strict";
 
     function showAudioMenu(context, player, button, item) {
@@ -110,49 +110,93 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
         return null;
     }
 
-    function updateNowPlayingInfo(context, state) {
+    function updateNowPlayingInfo(context, state, serverId) {
         var item = state.NowPlayingItem;
         var displayName = item ? getNowPlayingNameHtml(item).replace("<br/>", " - ") : "";
-        context.querySelector(".nowPlayingPageTitle").innerHTML = displayName;
+        if (typeof item !== 'undefined') {
+            var nowPlayingServerId = (item.ServerId || serverId);
+            if (item.Type == "Audio" || item.MediaStreams[0].Type == "Audio") {
+                var songName = item.Name;
+                if (item.Album != null && item.Artists != null) {
+                    var albumName = item.Album;
+                    var artistName;
+                    if (item.ArtistItems != null) {
+                        artistName = item.ArtistItems[0].Name;
+                        context.querySelector(".nowPlayingAlbum").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}">${albumName}</a>`;
+                        context.querySelector(".nowPlayingArtist").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}">${artistName}</a>`;
+                        context.querySelector(".contextMenuAlbum").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.AlbumId + `&amp;serverId=${nowPlayingServerId}"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons album"></i> ` + globalize.translate("ViewAlbum") + '</a>';
+                        context.querySelector(".contextMenuArtist").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.ArtistItems[0].Id + `&amp;serverId=${nowPlayingServerId}"><i class="actionsheetMenuItemIcon listItemIcon listItemIcon-transparent material-icons person"></i> ` + globalize.translate("ViewArtist") + '</a>';
+                    } else {
+                        artistName = item.Artists;
+                        context.querySelector(".nowPlayingAlbum").innerHTML = albumName;
+                        context.querySelector(".nowPlayingArtist").innerHTML = artistName;
+                    }
+                }
+                context.querySelector(".nowPlayingSongName").innerHTML = songName;
+            } else if (item.Type == "Episode") {
+                if (item.SeasonName != null) {
+                    var seasonName = item.SeasonName;
+                    context.querySelector(".nowPlayingSeason").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeasonId + `&amp;serverId=${nowPlayingServerId}">${seasonName}</a>`;
+                }
+                if (item.SeriesName != null) {
+                    var seriesName = item.SeriesName;
+                    if (item.SeriesId !=null) {
+                        context.querySelector(".nowPlayingSerie").innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="itemdetails.html?id=' + item.SeriesId + `&amp;serverId=${nowPlayingServerId}">${seriesName}</a>`;
+                    } else {
+                        context.querySelector(".nowPlayingSerie").innerHTML = seriesName;
+                    }
+                }
+                context.querySelector(".nowPlayingEpisode").innerHTML = item.Name;
+            } else {
+                context.querySelector(".nowPlayingPageTitle").innerHTML = displayName;
+            }
 
-        if (displayName.length > 0) {
-            context.querySelector(".nowPlayingPageTitle").classList.remove("hide");
-        } else {
-            context.querySelector(".nowPlayingPageTitle").classList.add("hide");
-        }
+            if (displayName.length > 0 && item.Type != "Audio" && item.Type != "Episode") {
+                context.querySelector(".nowPlayingPageTitle").classList.remove("hide");
+            } else {
+                context.querySelector(".nowPlayingPageTitle").classList.add("hide");
+            }
 
-        var url = item ? seriesImageUrl(item, {
-            maxHeight: 300 * 2
-        }) || imageUrl(item, {
-            maxHeight: 300 * 2
-        }) : null;
+            var url = item ? seriesImageUrl(item, {
+                maxHeight: 300 * 2
+            }) || imageUrl(item, {
+                maxHeight: 300 * 2
+            }) : null;
 
-        console.debug("updateNowPlayingInfo");
-        setImageUrl(context, url);
-        if (item) {
-            backdrop.setBackdrops([item]);
-            var apiClient = connectionManager.getApiClient(item.ServerId);
-            apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
-                var userData = fullItem.UserData || {};
-                var likes = null == userData.Likes ? "" : userData.Likes;
-                context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="material-icons">favorite</i></button>';
-            });
-        } else {
-            backdrop.clear();
-            context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = "";
+            console.debug("updateNowPlayingInfo");
+            setImageUrl(context, state, url);
+            if (item) {
+                backdrop.setBackdrops([item]);
+                var apiClient = connectionManager.getApiClient(item.ServerId);
+                apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
+                    var userData = fullItem.UserData || {};
+                    var likes = null == userData.Likes ? "" : userData.Likes;
+                    context.querySelector(".nowPlayingPageUserDataButtonsTitle").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="material-icons">favorite</i></button>';
+                    context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><i class="material-icons">favorite</i></button>';
+                });
+            } else {
+                backdrop.clear();
+                context.querySelector(".nowPlayingPageUserDataButtons").innerHTML = "";
+            }
         }
     }
 
-    function setImageUrl(context, url) {
+    function setImageUrl(context, state, url) {
         currentImgUrl = url;
+        var item = state.NowPlayingItem;
         var imgContainer = context.querySelector(".nowPlayingPageImageContainer");
 
         if (url) {
             imgContainer.innerHTML = '<img class="nowPlayingPageImage" src="' + url + '" />';
-            imgContainer.classList.remove("hide");
+            if (item.Type == "Audio") {
+                context.querySelector(".nowPlayingPageImage").classList.add("nowPlayingPageImageAudio");
+                context.querySelector(".nowPlayingPageImageContainer").classList.remove("nowPlayingPageImageAudio");
+            } else {
+                context.querySelector(".nowPlayingPageImageContainer").classList.add("nowPlayingPageImagePoster");
+                context.querySelector(".nowPlayingPageImage").classList.remove("nowPlayingPageImageAudio");
+            }
         } else {
-            imgContainer.classList.add("hide");
-            imgContainer.innerHTML = "";
+            imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardContent-button cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><i class="cardImageIcon material-icons">album</i></button></div>';
         }
     }
 
@@ -199,28 +243,35 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
             var supportedCommands = playerInfo.supportedCommands;
             currentPlayerSupportedCommands = supportedCommands;
             var playState = state.PlayState || {};
-            buttonVisible(context.querySelector(".btnToggleFullscreen"), item && "Video" == item.MediaType && -1 != supportedCommands.indexOf("ToggleFullscreen"));
+            var isSupportedCommands = supportedCommands.includes("DisplayMessage") || supportedCommands.includes("SendString") || supportedCommands.includes("Select");
+            buttonVisible(context.querySelector(".btnToggleFullscreen"), item && "Video" == item.MediaType && supportedCommands.includes("ToggleFullscreen"));
             updateAudioTracksDisplay(player, context);
             updateSubtitleTracksDisplay(player, context);
 
-            if (-1 != supportedCommands.indexOf("DisplayMessage") && !currentPlayer.isLocalPlayer) {
+            if (supportedCommands.includes("DisplayMessage") && !currentPlayer.isLocalPlayer) {
                 context.querySelector(".sendMessageSection").classList.remove("hide");
             } else {
                 context.querySelector(".sendMessageSection").classList.add("hide");
             }
 
-            if (-1 != supportedCommands.indexOf("SendString") && !currentPlayer.isLocalPlayer) {
+            if (supportedCommands.includes("SendString") && !currentPlayer.isLocalPlayer) {
                 context.querySelector(".sendTextSection").classList.remove("hide");
             } else {
                 context.querySelector(".sendTextSection").classList.add("hide");
             }
 
-            if (-1 != supportedCommands.indexOf("Select") && !currentPlayer.isLocalPlayer) {
+            if (supportedCommands.includes("Select") && !currentPlayer.isLocalPlayer) {
                 context.querySelector(".navigationSection").classList.remove("hide");
             } else {
                 context.querySelector(".navigationSection").classList.add("hide");
             }
 
+            if (isSupportedCommands && !currentPlayer.isLocalPlayer) {
+                context.querySelector(".remoteControlSection").classList.remove("hide");
+            } else {
+                context.querySelector(".remoteControlSection").classList.add("hide");
+            }
+
             buttonVisible(context.querySelector(".btnStop"), null != item);
             buttonVisible(context.querySelector(".btnNextTrack"), null != item);
             buttonVisible(context.querySelector(".btnPreviousTrack"), null != item);
@@ -331,7 +382,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
         function updatePlayPauseState(isPaused, isActive) {
             var context = dlg;
             var btnPlayPause = context.querySelector(".btnPlayPause");
-            btnPlayPause.querySelector("i").innerHTML = isPaused ? "&#xE037;" : "pause";
+            btnPlayPause.querySelector("i").innerHTML = isPaused ? "&#xE038;" : "&#xE035;";
             buttonVisible(btnPlayPause, isActive);
         }
 
@@ -374,9 +425,9 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 });
 
                 if (items.length) {
-                    context.querySelector(".playlistSection").classList.remove("hide");
+                    context.querySelector(".btnTogglePlaylist").classList.remove("hide");
                 } else {
-                    context.querySelector(".playlistSection").classList.add("hide");
+                    context.querySelector(".btnTogglePlaylist").classList.add("hide");
                 }
 
                 var itemsContainer = context.querySelector(".playlist");
@@ -393,6 +444,9 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 }
 
                 imageLoader.lazyChildren(itemsContainer);
+                context.querySelector(".playlist").classList.add("hide");
+                context.querySelector(".contextMenu").classList.add("hide");
+                context.querySelector(".btnSavePlaylist").classList.add("hide");
             });
         }
 
@@ -614,27 +668,13 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 return datetime.getDisplayRunningTime(ticks);
             };
 
-            var volumeSliderTimer;
-
             function setVolume() {
-                clearTimeout(volumeSliderTimer);
-                volumeSliderTimer = null;
-
                 playbackManager.setVolume(this.value, currentPlayer);
             }
 
-            function setVolumeDelayed() {
-                if (!volumeSliderTimer) {
-                    var that = this;
-                    volumeSliderTimer = setTimeout(function () {
-                        setVolume.call(that);
-                    }, 700);
-                }
-            }
-
             context.querySelector(".nowPlayingVolumeSlider").addEventListener("change", setVolume);
-            context.querySelector(".nowPlayingVolumeSlider").addEventListener("mousemove", setVolumeDelayed);
-            context.querySelector(".nowPlayingVolumeSlider").addEventListener("touchmove", setVolumeDelayed);
+            context.querySelector(".nowPlayingVolumeSlider").addEventListener("mousemove", setVolume);
+            context.querySelector(".nowPlayingVolumeSlider").addEventListener("touchmove", setVolume);
             context.querySelector(".buttonMute").addEventListener("click", function () {
                 playbackManager.toggleMute(currentPlayer);
             });
@@ -648,6 +688,27 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer);
             });
             context.querySelector(".btnSavePlaylist").addEventListener("click", savePlaylist);
+            context.querySelector(".btnTogglePlaylist").addEventListener("click", function () {
+                if (context.querySelector(".playlist").classList.contains("hide")) {
+                    context.querySelector(".playlist").classList.remove("hide");
+                    context.querySelector(".btnSavePlaylist").classList.remove("hide");
+                    context.querySelector(".contextMenu").classList.add("hide");
+                    context.querySelector(".volumecontrol").classList.add("hide");
+                } else {
+                    context.querySelector(".playlist").classList.add("hide");
+                    context.querySelector(".btnSavePlaylist").classList.add("hide");
+                    context.querySelector(".volumecontrol").classList.remove("hide");
+                }
+            });
+            context.querySelector(".btnToggleContextMenu").addEventListener("click", function () {
+                if (context.querySelector(".contextMenu").classList.contains("hide")) {
+                    context.querySelector(".contextMenu").classList.remove("hide");
+                    context.querySelector(".btnSavePlaylist").classList.add("hide");
+                    context.querySelector(".playlist").classList.add("hide");
+                } else {
+                    context.querySelector(".contextMenu").classList.add("hide");
+                }
+            });
         }
 
         function onPlayerChange() {
@@ -694,6 +755,18 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
         }
 
         function init(ownerView, context) {
+            let contextmenuHtml = `<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title=${globalize.translate('ButtonToggleContextMenu')}><i class="material-icons more_vert"></i></button>`;
+            let volumecontrolHtml = '<div class="volumecontrol flex align-items-center flex-wrap-wrap justify-content-center">';
+            volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><i class="xlargePaperIconButton material-icons"></i></button>`;
+            volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
+            volumecontrolHtml += '</div>';
+            if (!layoutManager.mobile) {
+                context.querySelector('.nowPlayingSecondaryButtons').innerHTML += volumecontrolHtml;
+                context.querySelector('.playlistSectionButton').innerHTML += contextmenuHtml;
+            } else {
+                context.querySelector('.playlistSectionButton').innerHTML += volumecontrolHtml + contextmenuHtml;
+            }
+
             bindEvents(context);
             context.querySelector(".sendMessageForm").addEventListener("submit", onMessageSubmit);
             context.querySelector(".typeTextForm").addEventListener("submit", onSendStringSubmit);

src/components/slideshow/slideshow.js

@@ -258,6 +258,11 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
                     direction: 'horizontal',
                     // Loop is disabled due to the virtual slides option not supporting it.
                     loop: false,
+                    zoom: {
+                        minRatio: 1,
+                        toggle: true,
+                        containerClass: 'slider-zoom-container'
+                    },
                     autoplay: !options.interactive,
                     keyboard: {
                         enabled: true

src/components/slideshow/style.css

@@ -41,17 +41,12 @@
 }
 
 .swiper-slide-img {
-    width: auto;
-    height: auto;
-    max-width: 100%;
-    max-height: 100%;
-    -ms-transform: translate(-50%, -50%);
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    position: absolute;
-    left: 50%;
-    top: 50%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
 }
 
 .slideshowButtonIcon {
@@ -138,3 +133,12 @@
 .slideSubtitle {
     color: #ccc;
 }
+
+.swiper-slide {
+    display: flex;
+    flex-direction: column;
+}
+
+.slider-zoom-container {
+    margin: auto;
+}

src/components/subtitleeditor/subtitleeditor.js

@@ -397,7 +397,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
         var items = [];
 
         items.push({
-            name: Globalize.translate('Download'),
+            name: globalize.translate('Download'),
             id: 'download'
         });
 

src/components/tvproviders/schedulesdirect.js

@@ -1,4 +1,4 @@
-define(["jQuery", "loading", "emby-checkbox", "listViewStyle", "emby-input", "emby-select", "emby-button", "flexStyles"], function ($, loading) {
+define(["jQuery", "loading", "globalize", "emby-checkbox", "listViewStyle", "emby-input", "emby-select", "emby-button", "flexStyles"], function ($, loading, globalize) {
     "use strict";
 
     return function (page, providerId, options) {
@@ -69,7 +69,7 @@ define(["jQuery", "loading", "emby-checkbox", "listViewStyle", "emby-input", "em
                 $(page.querySelector(".txtZipCode")).trigger("change");
             }, function () { // ApiClient.getJSON() error handler
                 Dashboard.alert({
-                    message: Globalize.translate("ErrorGettingTvLineups")
+                    message: globalize.translate("ErrorGettingTvLineups")
                 });
             });
             loading.hide();
@@ -130,7 +130,7 @@ define(["jQuery", "loading", "emby-checkbox", "listViewStyle", "emby-input", "em
                     reload();
                 }, function () {
                     Dashboard.alert({ // ApiClient.ajax() error handler
-                        message: Globalize.translate("ErrorSavingTvProvider")
+                        message: globalize.translate("ErrorSavingTvProvider")
                     });
                 });
             });
@@ -141,7 +141,7 @@ define(["jQuery", "loading", "emby-checkbox", "listViewStyle", "emby-input", "em
 
             if (!selectedListingsId) {
                 return void Dashboard.alert({
-                    message: Globalize.translate("ErrorPleaseSelectLineup")
+                    message: globalize.translate("ErrorPleaseSelectLineup")
                 });
             }
 
@@ -178,7 +178,7 @@ define(["jQuery", "loading", "emby-checkbox", "listViewStyle", "emby-input", "em
                 }, function () {
                     loading.hide();
                     Dashboard.alert({
-                        message: Globalize.translate("ErrorAddingListingsToSchedulesDirect")
+                        message: globalize.translate("ErrorAddingListingsToSchedulesDirect")
                     });
                 });
             });
@@ -210,7 +210,7 @@ define(["jQuery", "loading", "emby-checkbox", "listViewStyle", "emby-input", "em
                 loading.hide();
             }, function (result) {
                 Dashboard.alert({
-                    message: Globalize.translate("ErrorGettingTvLineups")
+                    message: globalize.translate("ErrorGettingTvLineups")
                 });
                 refreshListings("");
                 loading.hide();
@@ -290,7 +290,7 @@ define(["jQuery", "loading", "emby-checkbox", "listViewStyle", "emby-input", "em
                     page.querySelector(".selectTunersSection").classList.remove("hide");
                 }
             });
-            $(".createAccountHelp", page).html(Globalize.translate("MessageCreateAccountAt", '<a is="emby-linkbutton" class="button-link" href="http://www.schedulesdirect.org" target="_blank">http://www.schedulesdirect.org</a>'));
+            $(".createAccountHelp", page).html(globalize.translate("MessageCreateAccountAt", '<a is="emby-linkbutton" class="button-link" href="http://www.schedulesdirect.org" target="_blank">http://www.schedulesdirect.org</a>'));
             reload();
         };
     };

src/components/tvproviders/xmltv.js

@@ -1,4 +1,4 @@
-define(["jQuery", "loading", "emby-checkbox", "emby-input", "listViewStyle", "paper-icon-button-light"], function ($, loading) {
+define(["jQuery", "loading", "globalize", "emby-checkbox", "emby-input", "listViewStyle", "paper-icon-button-light"], function ($, loading, globalize) {
     "use strict";
 
     return function (page, providerId, options) {
@@ -92,7 +92,7 @@ define(["jQuery", "loading", "emby-checkbox", "emby-input", "listViewStyle", "pa
                 }, function () {
                     loading.hide();
                     Dashboard.alert({
-                        message: Globalize.translate("ErrorAddingXmlTvFile")
+                        message: globalize.translate("ErrorAddingXmlTvFile")
                     });
                 });
             });

src/controllers/auth/addserver.js

@@ -1,4 +1,4 @@
-define(["appSettings", "loading", "browser", "emby-button"], function(appSettings, loading, browser) {
+define(["appSettings", "loading", "browser", "globalize", "emby-button"], function(appSettings, loading, browser, globalize) {
     "use strict";
 
     function handleConnectionResult(page, result) {
@@ -17,13 +17,13 @@ define(["appSettings", "loading", "browser", "emby-button"], function(appSetting
                 break;
             case "ServerUpdateNeeded":
                 Dashboard.alert({
-                    message: Globalize.translate("ServerUpdateNeeded", '<a href="https://github.com/jellyfin/jellyfin">https://github.com/jellyfin/jellyfin</a>')
+                    message: globalize.translate("ServerUpdateNeeded", '<a href="https://github.com/jellyfin/jellyfin">https://github.com/jellyfin/jellyfin</a>')
                 });
                 break;
             case "Unavailable":
                 Dashboard.alert({
-                    message: Globalize.translate("MessageUnableToConnectToServer"),
-                    title: Globalize.translate("HeaderConnectionFailure")
+                    message: globalize.translate("MessageUnableToConnectToServer"),
+                    title: globalize.translate("HeaderConnectionFailure")
                 });
         }
     }

src/controllers/auth/forgotpassword.js

@@ -1,23 +1,23 @@
-define([], function () {
+define(["globalize"], function (globalize) {
     "use strict";
 
     function processForgotPasswordResult(result) {
         if ("ContactAdmin" == result.Action) {
             return void Dashboard.alert({
-                message: Globalize.translate("MessageContactAdminToResetPassword"),
-                title: Globalize.translate("HeaderForgotPassword")
+                message: globalize.translate("MessageContactAdminToResetPassword"),
+                title: globalize.translate("HeaderForgotPassword")
             });
         }
 
         if ("InNetworkRequired" == result.Action) {
             return void Dashboard.alert({
-                message: Globalize.translate("MessageForgotPasswordInNetworkRequired"),
-                title: Globalize.translate("HeaderForgotPassword")
+                message: globalize.translate("MessageForgotPasswordInNetworkRequired"),
+                title: globalize.translate("HeaderForgotPassword")
             });
         }
 
         if ("PinCode" == result.Action) {
-            var msg = Globalize.translate("MessageForgotPasswordFileCreated");
+            var msg = globalize.translate("MessageForgotPasswordFileCreated");
             msg += "<br/>";
             msg += "<br/>";
             msg += "Enter PIN here to finish Password Reset<br/>";
@@ -26,7 +26,7 @@ define([], function () {
             msg += "<br/>";
             return void Dashboard.alert({
                 message: msg,
-                title: Globalize.translate("HeaderForgotPassword"),
+                title: globalize.translate("HeaderForgotPassword"),
                 callback: function () {
                     Dashboard.navigate("forgotpasswordpin.html");
                 }

src/controllers/auth/forgotpasswordpin.js

@@ -1,15 +1,15 @@
-define([], function () {
+define(["globalize"], function (globalize) {
     "use strict";
 
     function processForgotPasswordResult(result) {
         if (result.Success) {
-            var msg = Globalize.translate("MessagePasswordResetForUsers");
+            var msg = globalize.translate("MessagePasswordResetForUsers");
             msg += "<br/>";
             msg += "<br/>";
             msg += result.UsersReset.join("<br/>");
             return void Dashboard.alert({
                 message: msg,
-                title: Globalize.translate("HeaderPasswordReset"),
+                title: globalize.translate("HeaderPasswordReset"),
                 callback: function () {
                     window.location.href = "index.html";
                 }
@@ -17,8 +17,8 @@ define([], function () {
         }
 
         Dashboard.alert({
-            message: Globalize.translate("MessageInvalidForgotPasswordPin"),
-            title: Globalize.translate("HeaderPasswordReset")
+            message: globalize.translate("MessageInvalidForgotPasswordPin"),
+            title: globalize.translate("HeaderPasswordReset")
         });
     }
 

src/controllers/auth/login.js

@@ -1,4 +1,4 @@
-define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layoutManager", "browser", "cardStyle", "emby-checkbox"], function (appHost, appSettings, dom, connectionManager, loading, layoutManager, browser) {
+define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layoutManager", "browser", "globalize", "cardStyle", "emby-checkbox"], function (appHost, appSettings, dom, connectionManager, loading, layoutManager, browser, globalize) {
     "use strict";
 
     var enableFocusTransform = !browser.slow && !browser.edge;
@@ -24,14 +24,16 @@ define(["apphost", "appSettings", "dom", "connectionManager", "loading", "layout
             page.querySelector("#txtManualPassword").value = "";
             loading.hide();
 
-            if (response.status === 401) {
+            const UnauthorizedOrForbidden = [401, 403];
+            if (UnauthorizedOrForbidden.includes(response.status)) {
                 require(["toast"], function (toast) {
-                    toast(Globalize.translate("MessageInvalidUser"));
+                    const messageKey = response.status === 401 ? "MessageInvalidUser" : "MessageUnauthorizedUser";
+                    toast(globalize.translate(messageKey));
                 });
             } else {
                 Dashboard.alert({
-                    message: Globalize.translate("MessageUnableToConnectToServer"),
-                    title: Globalize.translate("HeaderConnectionFailure")
+                    message: globalize.translate("MessageUnableToConnectToServer"),
+                    title: globalize.translate("HeaderConnectionFailure")
                 });
             }
         });

src/controllers/dashboard/dlna/dlnaprofile.js

@@ -1,4 +1,4 @@
-define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-input", "emby-checkbox", "listViewStyle", "emby-button"], function ($, loading) {
+define(["jQuery", "loading", "globalize", "fnchecked", "emby-select", "emby-button", "emby-input", "emby-checkbox", "listViewStyle", "emby-button"], function ($, loading, globalize) {
     "use strict";
 
     function loadProfile(page) {
@@ -258,14 +258,14 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
 
             html += "<div>";
             html += '<a is="emby-linkbutton" href="#" class="lnkEditSubProfile" data-profileindex="' + i + '">';
-            html += "<p>" + Globalize.translate("ValueContainer", profile.Container || allText) + "</p>";
+            html += "<p>" + globalize.translate("ValueContainer", profile.Container || allText) + "</p>";
 
             if ("Video" == profile.Type) {
-                html += "<p>" + Globalize.translate("ValueVideoCodec", profile.VideoCodec || allText) + "</p>";
-                html += "<p>" + Globalize.translate("ValueAudioCodec", profile.AudioCodec || allText) + "</p>";
+                html += "<p>" + globalize.translate("ValueVideoCodec", profile.VideoCodec || allText) + "</p>";
+                html += "<p>" + globalize.translate("ValueAudioCodec", profile.AudioCodec || allText) + "</p>";
             } else {
                 if ("Audio" == profile.Type) {
-                    html += "<p>" + Globalize.translate("ValueCodec", profile.AudioCodec || allText) + "</p>";
+                    html += "<p>" + globalize.translate("ValueCodec", profile.AudioCodec || allText) + "</p>";
                 }
             }
 
@@ -319,14 +319,14 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
             html += "<div>";
             html += '<a is="emby-linkbutton" href="#" class="lnkEditSubProfile" data-profileindex="' + i + '">';
             html += "<p>Protocol: " + (profile.Protocol || "Http") + "</p>";
-            html += "<p>" + Globalize.translate("ValueContainer", profile.Container || allText) + "</p>";
+            html += "<p>" + globalize.translate("ValueContainer", profile.Container || allText) + "</p>";
 
             if ("Video" == profile.Type) {
-                html += "<p>" + Globalize.translate("ValueVideoCodec", profile.VideoCodec || allText) + "</p>";
-                html += "<p>" + Globalize.translate("ValueAudioCodec", profile.AudioCodec || allText) + "</p>";
+                html += "<p>" + globalize.translate("ValueVideoCodec", profile.VideoCodec || allText) + "</p>";
+                html += "<p>" + globalize.translate("ValueAudioCodec", profile.AudioCodec || allText) + "</p>";
             } else {
                 if ("Audio" == profile.Type) {
-                    html += "<p>" + Globalize.translate("ValueCodec", profile.AudioCodec || allText) + "</p>";
+                    html += "<p>" + globalize.translate("ValueCodec", profile.AudioCodec || allText) + "</p>";
                 }
             }
 
@@ -404,11 +404,11 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
 
             html += "<div>";
             html += '<a is="emby-linkbutton" href="#" class="lnkEditSubProfile" data-profileindex="' + i + '">';
-            html += "<p>" + Globalize.translate("ValueContainer", profile.Container || allText) + "</p>";
+            html += "<p>" + globalize.translate("ValueContainer", profile.Container || allText) + "</p>";
 
             if (profile.Conditions && profile.Conditions.length) {
                 html += "<p>";
-                html += Globalize.translate("ValueConditions", profile.Conditions.map(function (c) {
+                html += globalize.translate("ValueConditions", profile.Conditions.map(function (c) {
                     return c.Property;
                 }).join(", "));
                 html += "</p>";
@@ -476,11 +476,11 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
 
             html += "<div>";
             html += '<a is="emby-linkbutton" href="#" class="lnkEditSubProfile" data-profileindex="' + i + '">';
-            html += "<p>" + Globalize.translate("ValueCodec", profile.Codec || allText) + "</p>";
+            html += "<p>" + globalize.translate("ValueCodec", profile.Codec || allText) + "</p>";
 
             if (profile.Conditions && profile.Conditions.length) {
                 html += "<p>";
-                html += Globalize.translate("ValueConditions", profile.Conditions.map(function (c) {
+                html += globalize.translate("ValueConditions", profile.Conditions.map(function (c) {
                     return c.Property;
                 }).join(", "));
                 html += "</p>";
@@ -547,20 +547,20 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
 
             html += "<div>";
             html += '<a is="emby-linkbutton" href="#" class="lnkEditSubProfile" data-profileindex="' + i + '">';
-            html += "<p>" + Globalize.translate("ValueContainer", profile.Container || allText) + "</p>";
+            html += "<p>" + globalize.translate("ValueContainer", profile.Container || allText) + "</p>";
 
             if ("Video" == profile.Type) {
-                html += "<p>" + Globalize.translate("ValueVideoCodec", profile.VideoCodec || allText) + "</p>";
-                html += "<p>" + Globalize.translate("ValueAudioCodec", profile.AudioCodec || allText) + "</p>";
+                html += "<p>" + globalize.translate("ValueVideoCodec", profile.VideoCodec || allText) + "</p>";
+                html += "<p>" + globalize.translate("ValueAudioCodec", profile.AudioCodec || allText) + "</p>";
             } else {
                 if ("Audio" == profile.Type) {
-                    html += "<p>" + Globalize.translate("ValueCodec", profile.AudioCodec || allText) + "</p>";
+                    html += "<p>" + globalize.translate("ValueCodec", profile.AudioCodec || allText) + "</p>";
                 }
             }
 
             if (profile.Conditions && profile.Conditions.length) {
                 html += "<p>";
-                html += Globalize.translate("ValueConditions", profile.Conditions.map(function (c) {
+                html += globalize.translate("ValueConditions", profile.Conditions.map(function (c) {
                     return c.Property;
                 }).join(", "));
                 html += "</p>";
@@ -690,7 +690,7 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
     var currentProfile;
     var currentSubProfile;
     var isSubProfileNew;
-    var allText = Globalize.translate("LabelAll");
+    var allText = globalize.translate("LabelAll");
 
     $(document).on("pageinit", "#dlnaProfilePage", function () {
         var page = this;

src/controllers/dashboard/dlna/dlnasettings.js

@@ -1,4 +1,4 @@
-define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading, libraryMenu) {
+define(["jQuery", "loading", "libraryMenu", "globalize", "fnchecked"], function ($, loading, libraryMenu, globalize) {
     "use strict";
 
     function loadPage(page, config, users) {
@@ -34,10 +34,10 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading,
     function getTabs() {
         return [{
             href: "dlnasettings.html",
-            name: Globalize.translate("TabSettings")
+            name: globalize.translate("TabSettings")
         }, {
             href: "dlnaprofiles.html",
-            name: Globalize.translate("TabProfiles")
+            name: globalize.translate("TabProfiles")
         }];
     }
 

src/controllers/dashboard/encodingsettings.js

@@ -116,13 +116,13 @@ define(["jQuery", "loading", "globalize", "dom", "libraryMenu"], function ($, lo
     function getTabs() {
         return [{
             href: "encodingsettings.html",
-            name: Globalize.translate("Transcoding")
+            name: globalize.translate("Transcoding")
         }, {
             href: "playbackconfiguration.html",
-            name: Globalize.translate("TabResumeSettings")
+            name: globalize.translate("TabResumeSettings")
         }, {
             href: "streamingsettings.html",
-            name: Globalize.translate("TabStreaming")
+            name: globalize.translate("TabStreaming")
         }];
     }
 

src/controllers/dashboard/general.js

@@ -1,4 +1,4 @@
-define(["jQuery", "loading", "fnchecked", "emby-checkbox", "emby-textarea", "emby-input", "emby-select", "emby-button"], function ($, loading) {
+define(["jQuery", "loading", "globalize", "fnchecked", "emby-checkbox", "emby-textarea", "emby-input", "emby-select", "emby-button"], function ($, loading, globalize) {
     "use strict";
 
     function loadPage(page, config, languageOptions, systemInfo) {
@@ -58,7 +58,7 @@ define(["jQuery", "loading", "fnchecked", "emby-checkbox", "emby-textarea", "emb
                 });
             }, function () {
                 require(["alert"], function (alert) {
-                    alert(Globalize.translate("DefaultErrorMessage"));
+                    alert(globalize.translate("DefaultErrorMessage"));
                 });
 
                 Dashboard.processServerConfigurationUpdateResult();
@@ -83,8 +83,8 @@ define(["jQuery", "loading", "fnchecked", "emby-checkbox", "emby-textarea", "emb
                         picker.close();
                     },
                     validateWriteable: true,
-                    header: Globalize.translate("HeaderSelectServerCachePath"),
-                    instruction: Globalize.translate("HeaderSelectServerCachePathHelp")
+                    header: globalize.translate("HeaderSelectServerCachePath"),
+                    instruction: globalize.translate("HeaderSelectServerCachePathHelp")
                 });
             });
         });
@@ -106,8 +106,8 @@ define(["jQuery", "loading", "fnchecked", "emby-checkbox", "emby-textarea", "emb
                         picker.close();
                     },
                     validateWriteable: true,
-                    header: Globalize.translate("HeaderSelectMetadataPath"),
-                    instruction: Globalize.translate("HeaderSelectMetadataPathHelp"),
+                    header: globalize.translate("HeaderSelectMetadataPath"),
+                    instruction: globalize.translate("HeaderSelectMetadataPathHelp"),
                     enableNetworkSharePath: true
                 });
             });

src/controllers/dashboard/librarydisplay.js

@@ -4,16 +4,16 @@ define(["globalize", "loading", "libraryMenu", "emby-checkbox", "emby-button", "
     function getTabs() {
         return [{
             href: "library.html",
-            name: Globalize.translate("HeaderLibraries")
+            name: globalize.translate("HeaderLibraries")
         }, {
             href: "librarydisplay.html",
-            name: Globalize.translate("TabDisplay")
+            name: globalize.translate("TabDisplay")
         }, {
             href: "metadataimages.html",
-            name: Globalize.translate("TabMetadata")
+            name: globalize.translate("TabMetadata")
         }, {
             href: "metadatanfo.html",
-            name: Globalize.translate("TabNfoSettings")
+            name: globalize.translate("TabNfoSettings")
         }];
     }
 

src/controllers/dashboard/metadataimagespage.js

@@ -1,4 +1,4 @@
-define(["jQuery", "dom", "loading", "libraryMenu", "listViewStyle"], function($, dom, loading, libraryMenu) {
+define(["jQuery", "dom", "loading", "libraryMenu", "globalize", "listViewStyle"], function($, dom, loading, libraryMenu, globalize) {
     "use strict";
 
     function populateLanguages(select) {
@@ -43,16 +43,16 @@ define(["jQuery", "dom", "loading", "libraryMenu", "listViewStyle"], function($,
     function getTabs() {
         return [{
             href: "library.html",
-            name: Globalize.translate("HeaderLibraries")
+            name: globalize.translate("HeaderLibraries")
         }, {
             href: "librarydisplay.html",
-            name: Globalize.translate("TabDisplay")
+            name: globalize.translate("TabDisplay")
         }, {
             href: "metadataimages.html",
-            name: Globalize.translate("TabMetadata")
+            name: globalize.translate("TabMetadata")
         }, {
             href: "metadatanfo.html",
-            name: Globalize.translate("TabNfoSettings")
+            name: globalize.translate("TabNfoSettings")
         }];
     }
 

src/controllers/dashboard/metadatanfo.js

@@ -1,8 +1,8 @@
-define(["jQuery", "loading", "libraryMenu"], function ($, loading, libraryMenu) {
+define(["jQuery", "loading", "libraryMenu", "globalize"], function ($, loading, libraryMenu, globalize) {
     "use strict";
 
     function loadPage(page, config, users) {
-        var html = '<option value="" selected="selected">' + Globalize.translate("OptionNone") + "</option>";
+        var html = '<option value="" selected="selected">' + globalize.translate("OptionNone") + "</option>";
         html += users.map(function (user) {
             return '<option value="' + user.Id + '">' + user.Name + "</option>";
         }).join("");
@@ -33,7 +33,7 @@ define(["jQuery", "loading", "libraryMenu"], function ($, loading, libraryMenu)
 
     function showConfirmMessage(config) {
         var msg = [];
-        msg.push(Globalize.translate("MetadataSettingChangeHelp"));
+        msg.push(globalize.translate("MetadataSettingChangeHelp"));
 
         require(["alert"], function (alert) {
             alert({
@@ -45,16 +45,16 @@ define(["jQuery", "loading", "libraryMenu"], function ($, loading, libraryMenu)
     function getTabs() {
         return [{
             href: "library.html",
-            name: Globalize.translate("HeaderLibraries")
+            name: globalize.translate("HeaderLibraries")
         }, {
             href: "librarydisplay.html",
-            name: Globalize.translate("TabDisplay")
+            name: globalize.translate("TabDisplay")
         }, {
             href: "metadataimages.html",
-            name: Globalize.translate("TabMetadata")
+            name: globalize.translate("TabMetadata")
         }, {
             href: "metadatanfo.html",
-            name: Globalize.translate("TabNfoSettings")
+            name: globalize.translate("TabNfoSettings")
         }];
     }
 

src/controllers/dashboard/playbackconfiguration.js

@@ -1,4 +1,4 @@
-define(["jQuery", "loading", "libraryMenu"], function ($, loading, libraryMenu) {
+define(["jQuery", "loading", "libraryMenu", "globalize"], function ($, loading, libraryMenu, globalize) {
     "use strict";
 
     function loadPage(page, config) {
@@ -25,13 +25,13 @@ define(["jQuery", "loading", "libraryMenu"], function ($, loading, libraryMenu)
     function getTabs() {
         return [{
             href: "encodingsettings.html",
-            name: Globalize.translate("Transcoding")
+            name: globalize.translate("Transcoding")
         }, {
             href: "playbackconfiguration.html",
-            name: Globalize.translate("TabResumeSettings")
+            name: globalize.translate("TabResumeSettings")
         }, {
             href: "streamingsettings.html",
-            name: Globalize.translate("TabStreaming")
+            name: globalize.translate("TabStreaming")
         }];
     }
 

src/controllers/dashboard/plugins/add.js

@@ -7,8 +7,8 @@ define(["jQuery", "loading", "libraryMenu", "globalize", "connectionManager", "e
 
         for (var i = 0; i < length; i++) {
             var version = packageInfo.versions[i];
-            html += '<h2 style="margin:.5em 0;">' + version.versionStr + " (" + version.classification + ")</h2>";
-            html += '<div style="margin-bottom:1.5em;">' + version.description + "</div>";
+            html += '<h2 style="margin:.5em 0;">' + version.version + "</h2>";
+            html += '<div style="margin-bottom:1.5em;">' + version.changelog + "</div>";
         }
 
         $("#revisionHistory", page).html(html);
@@ -19,7 +19,7 @@ define(["jQuery", "loading", "libraryMenu", "globalize", "connectionManager", "e
 
         for (var i = 0; i < packageInfo.versions.length; i++) {
             var version = packageInfo.versions[i];
-            html += '<option value="' + version.versionStr + "|" + version.classification + '">' + version.versionStr + " (" + version.classification + ")</option>";
+            html += '<option value="' + version.version + '">' + version.version + "</option>";
         }
 
         var selectmenu = $("#selectVersion", page).html(html);
@@ -28,16 +28,9 @@ define(["jQuery", "loading", "libraryMenu", "globalize", "connectionManager", "e
             $("#pCurrentVersion", page).hide().html("");
         }
 
-        var packageVersion = packageInfo.versions.filter(function (current) {
-            return "Release" == current.classification;
-        })[0];
-        packageVersion = packageVersion || packageInfo.versions.filter(function (current) {
-            return "Beta" == current.classification;
-        })[0];
-
+        var packageVersion = packageInfo.versions[0];
         if (packageVersion) {
-            var val = packageVersion.versionStr + "|" + packageVersion.classification;
-            selectmenu.val(val);
+            selectmenu.val(packageVersion.version);
         }
     }
 
@@ -45,44 +38,23 @@ define(["jQuery", "loading", "libraryMenu", "globalize", "connectionManager", "e
         var installedPlugin = installedPlugins.filter(function (ip) {
             return ip.Name == pkg.name;
         })[0];
+
         populateVersions(pkg, page, installedPlugin);
         populateHistory(pkg, page);
+
         $(".pluginName", page).html(pkg.name);
+        $("#btnInstallDiv", page).removeClass("hide");
+        $("#pSelectVersion", page).removeClass("hide");
 
-        if ("Server" == pkg.targetSystem) {
-            $("#btnInstallDiv", page).removeClass("hide");
-            $("#nonServerMsg", page).hide();
-            $("#pSelectVersion", page).removeClass("hide");
+        if (pkg.overview) {
+            $("#overview", page).show().html(pkg.overview);
         } else {
-            $("#btnInstallDiv", page).addClass("hide");
-            $("#pSelectVersion", page).addClass("hide");
-            var msg = globalize.translate("MessageInstallPluginFromApp");
-            $("#nonServerMsg", page).html(msg).show();
+            $("#overview", page).hide();
         }
 
-        if (pkg.shortDescription) {
-            $("#tagline", page).show().html(pkg.shortDescription);
-        } else {
-            $("#tagline", page).hide();
-        }
-
-        $("#overview", page).html(pkg.overview || "");
+        $("#description", page).html(pkg.description);
         $("#developer", page).html(pkg.owner);
 
-        if (pkg.richDescUrl) {
-            $("#pViewWebsite", page).show();
-            $("#pViewWebsite a", page).attr("href", pkg.richDescUrl);
-        } else {
-            $("#pViewWebsite", page).hide();
-        }
-
-        if (pkg.previewImage || pkg.thumbImage) {
-            var img = pkg.previewImage ? pkg.previewImage : pkg.thumbImage;
-            $("#pPreviewImage", page).show().html("<img class='pluginPreviewImg' src='" + img + "' style='max-width: 100%;' />");
-        } else {
-            $("#pPreviewImage", page).hide().html("");
-        }
-
         if (installedPlugin) {
             var currentVersionText = globalize.translate("MessageYouHaveVersionInstalled", "<strong>" + installedPlugin.Version + "</strong>");
             $("#pCurrentVersion", page).show().html(currentVersionText);

src/controllers/dashboard/plugins/available.js

@@ -98,21 +98,14 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-button", "emby
         html += '<div class="cardScalable visualCardBox-cardScalable">';
         html += '<div class="cardPadder cardPadder-backdrop"></div>';
         html += '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + href + '"' + target + ">";
-
-        if (plugin.thumbImage) {
-            html += '<div class="cardImage coveredImage" style="background-image:url(\'' + plugin.thumbImage + "');\">";
-            html += "</div>";
-        } else {
-            html += '<i class="cardImageIcon material-icons">folder</i>';
-        }
-
+        html += '<i class="cardImageIcon material-icons">folder</i>';
         html += "</a>";
         html += "</div>";
         html += '<div class="cardFooter">';
         html += "<div class='cardText'>";
         html += plugin.name;
         html += "</div>";
-        var installedPlugin = plugin.isApp ? null : installedPlugins.filter(function (ip) {
+        var installedPlugin = installedPlugins.filter(function (ip) {
             return ip.Id == plugin.guid;
         })[0];
         html += "<div class='cardText cardText-secondary'>";

src/controllers/dashboard/plugins/installed.js

@@ -42,14 +42,7 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
         html += '<div class="cardScalable">';
         html += '<div class="cardPadder cardPadder-backdrop"></div>';
         html += configPageUrl ? '<a class="cardContent cardImageContainer" is="emby-linkbutton" href="' + configPageUrl + '">' : '<div class="cardContent noConfigPluginCard noHoverEffect cardImageContainer">';
-
-        if (plugin.ImageUrl) {
-            html += '<div class="cardImage coveredImage" style="background-image:url(\'' + plugin.ImageUrl + "');\">";
-            html += "</div>";
-        } else {
-            html += '<i class="cardImageIcon material-icons">folder</i>';
-        }
-
+        html += '<i class="cardImageIcon material-icons">folder</i>';
         html += configPageUrl ? "</a>" : "</div>";
         html += "</div>";
         html += '<div class="cardFooter">';
@@ -57,7 +50,7 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
         html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><i class="material-icons more_horiz"></i></button>';
         html += "</div>";
         html += "<div class='cardText'>";
-        html += configPage ? configPage.DisplayName || plugin.Name : plugin.Name;
+        html += configPage.DisplayName || plugin.Name;
         html += "</div>";
         html += "<div class='cardText cardText-secondary'>";
         html += plugin.Version;

src/controllers/dashboard/streamingsettings.js

@@ -1,4 +1,4 @@
-define(["jQuery", "libraryMenu", "loading"], function ($, libraryMenu, loading) {
+define(["jQuery", "libraryMenu", "loading", "globalize"], function ($, libraryMenu, loading, globalize) {
     "use strict";
 
     function loadPage(page, config) {
@@ -20,13 +20,13 @@ define(["jQuery", "libraryMenu", "loading"], function ($, libraryMenu, loading)
     function getTabs() {
         return [{
             href: "encodingsettings.html",
-            name: Globalize.translate("Transcoding")
+            name: globalize.translate("Transcoding")
         }, {
             href: "playbackconfiguration.html",
-            name: Globalize.translate("TabResumeSettings")
+            name: globalize.translate("TabResumeSettings")
         }, {
             href: "streamingsettings.html",
-            name: Globalize.translate("TabStreaming")
+            name: globalize.translate("TabStreaming")
         }];
     }
 

src/controllers/itemdetailpage.js

@@ -336,7 +336,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
 
         return html = html.join(" / ");
     }
-
     function renderName(item, container, isStatic, context) {
         var parentRoute;
         var parentNameHtml = [];
@@ -401,14 +400,25 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
         } else if (item.Album) {
             parentNameHtml.push(item.Album);
         }
-
+        // FIXME: This whole section needs some refactoring, so it becames easier to scale across all form factors. See GH #1022
         var html = "";
+        var tvShowHtml = parentNameHtml[0];
+        var tvSeasonHtml = parentNameHtml[1];
 
         if (parentNameHtml.length) {
             if (parentNameLast) {
-                html = '<h3 class="parentName" style="margin: .25em 0;">' + parentNameHtml.join(" - ") + "</h3>";
+                // Music
+                if (layoutManager.mobile) {
+                    html = '<h3 class="parentName" style="margin: .25em 0;">' + parentNameHtml.join("</br>") + "</h3>";
+                } else {
+                    html = '<h3 class="parentName" style="margin: .25em 0;">' + parentNameHtml.join(" - ") + "</h3>";
+                }
             } else {
-                html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + parentNameHtml.join(" - ") + "</h1>";
+                if (layoutManager.mobile) {
+                    html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + parentNameHtml.join("</br>") + "</h1>";
+                } else {
+                    html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + tvShowHtml + "</h1>";
+                }
             }
         }
 
@@ -418,13 +428,17 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
         var offset = parentNameLast ? ".25em" : ".5em";
 
         if (html && !parentNameLast) {
-            html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + name + '</h3>';
+            if (!layoutManager.mobile && tvSeasonHtml) {
+                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + tvSeasonHtml + ' - ' + name + '</h3>';
+            } else {
+                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + name + '</h3>';
+            }
         } else {
             html = '<h1 class="itemName infoText" style="margin: .1em 0 ' + offset + ';">' + name + "</h1>" + html;
         }
 
         if (item.OriginalTitle && item.OriginalTitle != item.Name) {
-            html += '<h4 class="itemName infoText" style="margin: -' + offset + ' 0 0">' + item.OriginalTitle + '</h4>';
+            html += '<h4 class="itemName infoText" style="margin: -' + offset + ' 0 0;">' + item.OriginalTitle + '</h4>';
         }
 
         container.innerHTML = html;
@@ -540,7 +554,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
         renderTimerEditor(page, item, apiClient, user);
         renderImage(page, item, apiClient, user);
         renderLogo(page, item, apiClient);
-        setTitle(item, apiClient);
+        Emby.Page.setTitle('');
         setInitialCollapsibleState(page, item, apiClient, context, user);
         renderDetails(page, item, apiClient, context);
         renderTrackSelections(page, instance, item);
@@ -652,19 +666,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
         return null;
     }
 
-    function setTitle(item, apiClient) {
-        var url = logoImageUrl(item, apiClient, {});
-
-        if (url != null) {
-            var pageTitle = document.querySelector(".pageTitle");
-            pageTitle.style.backgroundImage = "url('" + url + "')";
-            pageTitle.classList.add("pageTitleWithLogo");
-            pageTitle.innerHTML = "";
-        } else {
-            Emby.Page.setTitle("");
-        }
-    }
-
     function renderLogo(page, item, apiClient) {
         var url = logoImageUrl(item, apiClient, {
             maxWidth: 400
@@ -2102,7 +2103,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
 
             if (e.detail.isRestored) {
                 if (currentItem) {
-                    setTitle(currentItem, connectionManager.getApiClient(currentItem.ServerId));
+                    Emby.Page.setTitle('');
                     renderTrackSelections(page, self, currentItem, true);
                 }
             } else {

src/controllers/livetvguideprovider.js

@@ -1,4 +1,4 @@
-define(["events", "loading"], function (events, loading) {
+define(["events", "loading", "globalize"], function (events, loading, globalize) {
     "use strict";
 
     function onListingsSubmitted() {
@@ -17,7 +17,7 @@ define(["events", "loading"], function (events, loading) {
 
     function loadTemplate(page, type, providerId) {
         require(["text!./components/tvproviders/" + type + ".template.html"], function (html) {
-            page.querySelector(".providerTemplate").innerHTML = Globalize.translateDocument(html);
+            page.querySelector(".providerTemplate").innerHTML = globalize.translateDocument(html);
             init(page, type, providerId);
         });
     }

src/controllers/livetvsettings.js

@@ -1,4 +1,4 @@
-define(["jQuery", "loading", "fnchecked", "emby-button"], function ($, loading) {
+define(["jQuery", "loading", "globalize", "fnchecked", "emby-button"], function ($, loading, globalize) {
     "use strict";
 
     function loadPage(page, config) {
@@ -44,7 +44,7 @@ define(["jQuery", "loading", "fnchecked", "emby-button"], function ($, loading)
         var msg = "";
 
         if (recordingPathChanged) {
-            msg += Globalize.translate("RecordingPathChangeMessage");
+            msg += globalize.translate("RecordingPathChangeMessage");
         }
 
         if (msg) {

src/controllers/movies/moviecollections.js

@@ -1,4 +1,4 @@
-define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "userSettings", "emby-itemscontainer"], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings) {
+define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "userSettings", "globalize", "emby-itemscontainer"], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -171,7 +171,7 @@ define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardB
                 }
 
                 if (!result.Items.length) {
-                    html = '<p style="text-align:center;">' + Globalize.translate("MessageNoCollectionsAvailable") + "</p>";
+                    html = '<p style="text-align:center;">' + globalize.translate("MessageNoCollectionsAvailable") + "</p>";
                 }
 
                 var itemsContainer = tabContent.querySelector(".itemsContainer");
@@ -199,19 +199,19 @@ define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardB
             tabContent.querySelector(".btnSort").addEventListener("click", function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{
-                        name: Globalize.translate("OptionNameSort"),
+                        name: globalize.translate("OptionNameSort"),
                         id: "SortName"
                     }, {
-                        name: Globalize.translate("OptionImdbRating"),
+                        name: globalize.translate("OptionImdbRating"),
                         id: "CommunityRating,SortName"
                     }, {
-                        name: Globalize.translate("OptionDateAdded"),
+                        name: globalize.translate("OptionDateAdded"),
                         id: "DateCreated,SortName"
                     }, {
-                        name: Globalize.translate("OptionParentalRating"),
+                        name: globalize.translate("OptionParentalRating"),
                         id: "OfficialRating,SortName"
                     }, {
-                        name: Globalize.translate("OptionReleaseDate"),
+                        name: globalize.translate("OptionReleaseDate"),
                         id: "PremiereDate,SortName"
                     }],
                     callback: function () {

src/controllers/movies/movies.js

@@ -1,4 +1,4 @@
-define(["loading", "layoutManager", "userSettings", "events", "libraryBrowser", "alphaPicker", "listView", "cardBuilder", "emby-itemscontainer"], function (loading, layoutManager, userSettings, events, libraryBrowser, alphaPicker, listView, cardBuilder) {
+define(["loading", "layoutManager", "userSettings", "events", "libraryBrowser", "alphaPicker", "listView", "cardBuilder", "globalize", "emby-itemscontainer"], function (loading, layoutManager, userSettings, events, libraryBrowser, alphaPicker, listView, cardBuilder, globalize) {
     "use strict";
 
     return function (view, params, tabContent, options) {
@@ -191,31 +191,31 @@ define(["loading", "layoutManager", "userSettings", "events", "libraryBrowser",
                 btnSort.addEventListener("click", function (e) {
                     libraryBrowser.showSortMenu({
                         items: [{
-                            name: Globalize.translate("OptionNameSort"),
+                            name: globalize.translate("OptionNameSort"),
                             id: "SortName,ProductionYear"
                         }, {
-                            name: Globalize.translate("OptionImdbRating"),
+                            name: globalize.translate("OptionImdbRating"),
                             id: "CommunityRating,SortName,ProductionYear"
                         }, {
-                            name: Globalize.translate("OptionCriticRating"),
+                            name: globalize.translate("OptionCriticRating"),
                             id: "CriticRating,SortName,ProductionYear"
                         }, {
-                            name: Globalize.translate("OptionDateAdded"),
+                            name: globalize.translate("OptionDateAdded"),
                             id: "DateCreated,SortName,ProductionYear"
                         }, {
-                            name: Globalize.translate("OptionDatePlayed"),
+                            name: globalize.translate("OptionDatePlayed"),
                             id: "DatePlayed,SortName,ProductionYear"
                         }, {
-                            name: Globalize.translate("OptionParentalRating"),
+                            name: globalize.translate("OptionParentalRating"),
                             id: "OfficialRating,SortName,ProductionYear"
                         }, {
-                            name: Globalize.translate("OptionPlayCount"),
+                            name: globalize.translate("OptionPlayCount"),
                             id: "PlayCount,SortName,ProductionYear"
                         }, {
-                            name: Globalize.translate("OptionReleaseDate"),
+                            name: globalize.translate("OptionReleaseDate"),
                             id: "PremiereDate,SortName,ProductionYear"
                         }, {
-                            name: Globalize.translate("OptionRuntime"),
+                            name: globalize.translate("OptionRuntime"),
                             id: "Runtime,SortName,ProductionYear"
                         }],
                         callback: function () {

src/controllers/movies/moviesrecommended.js

@@ -1,4 +1,4 @@
-define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu", "mainTabsManager", "cardBuilder", "dom", "imageLoader", "playbackManager", "emby-scroller", "emby-itemscontainer", "emby-tabs", "emby-button"], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager) {
+define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu", "mainTabsManager", "cardBuilder", "dom", "imageLoader", "playbackManager", "globalize", "emby-scroller", "emby-itemscontainer", "emby-tabs", "emby-button"], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager, globalize) {
     "use strict";
 
     function enableScrollX() {
@@ -91,21 +91,21 @@ define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu"
 
         switch (recommendation.RecommendationType) {
             case "SimilarToRecentlyPlayed":
-                title = Globalize.translate("RecommendationBecauseYouWatched", recommendation.BaselineItemName);
+                title = globalize.translate("RecommendationBecauseYouWatched", recommendation.BaselineItemName);
                 break;
 
             case "SimilarToLikedItem":
-                title = Globalize.translate("RecommendationBecauseYouLike", recommendation.BaselineItemName);
+                title = globalize.translate("RecommendationBecauseYouLike", recommendation.BaselineItemName);
                 break;
 
             case "HasDirectorFromRecentlyPlayed":
             case "HasLikedDirector":
-                title = Globalize.translate("RecommendationDirectedBy", recommendation.BaselineItemName);
+                title = globalize.translate("RecommendationDirectedBy", recommendation.BaselineItemName);
                 break;
 
             case "HasActorFromRecentlyPlayed":
             case "HasLikedActor":
-                title = Globalize.translate("RecommendationStarring", recommendation.BaselineItemName);
+                title = globalize.translate("RecommendationStarring", recommendation.BaselineItemName);
                 break;
         }
 
@@ -211,19 +211,19 @@ define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu"
 
     function getTabs() {
         return [{
-            name: Globalize.translate("Movies")
+            name: globalize.translate("Movies")
         }, {
-            name: Globalize.translate("TabSuggestions")
+            name: globalize.translate("TabSuggestions")
         }, {
-            name: Globalize.translate("TabTrailers")
+            name: globalize.translate("TabTrailers")
         }, {
-            name: Globalize.translate("TabFavorites")
+            name: globalize.translate("TabFavorites")
         }, {
-            name: Globalize.translate("TabCollections")
+            name: globalize.translate("TabCollections")
         }, {
-            name: Globalize.translate("TabGenres")
+            name: globalize.translate("TabGenres")
         }, {
-            name: Globalize.translate("ButtonSearch"),
+            name: globalize.translate("ButtonSearch"),
             cssClass: "searchTabButton"
         }];
     }
@@ -398,8 +398,8 @@ define(["events", "layoutManager", "inputManager", "userSettings", "libraryMenu"
                         libraryMenu.setTitle(item.Name);
                     });
                 } else {
-                    view.setAttribute("data-title", Globalize.translate("TabMovies"));
-                    libraryMenu.setTitle(Globalize.translate("TabMovies"));
+                    view.setAttribute("data-title", globalize.translate("TabMovies"));
+                    libraryMenu.setTitle(globalize.translate("TabMovies"));
                 }
             }
 

src/controllers/movies/movietrailers.js

@@ -1,4 +1,4 @@
-define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "alphaPicker", "listView", "cardBuilder", "userSettings", "emby-itemscontainer"], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings) {
+define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "alphaPicker", "listView", "cardBuilder", "userSettings", "globalize", "emby-itemscontainer"], function (layoutManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -158,7 +158,7 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                 }
 
                 if (!result.Items.length) {
-                    html = '<p style="text-align:center;">' + Globalize.translate("MessageNoTrailersFound") + "</p>";
+                    html = '<p style="text-align:center;">' + globalize.translate("MessageNoTrailersFound") + "</p>";
                 }
 
                 var itemsContainer = tabContent.querySelector(".itemsContainer");
@@ -223,25 +223,25 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
             tabContent.querySelector(".btnSort").addEventListener("click", function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{
-                        name: Globalize.translate("OptionNameSort"),
+                        name: globalize.translate("OptionNameSort"),
                         id: "SortName"
                     }, {
-                        name: Globalize.translate("OptionImdbRating"),
+                        name: globalize.translate("OptionImdbRating"),
                         id: "CommunityRating,SortName"
                     }, {
-                        name: Globalize.translate("OptionDateAdded"),
+                        name: globalize.translate("OptionDateAdded"),
                         id: "DateCreated,SortName"
                     }, {
-                        name: Globalize.translate("OptionDatePlayed"),
+                        name: globalize.translate("OptionDatePlayed"),
                         id: "DatePlayed,SortName"
                     }, {
-                        name: Globalize.translate("OptionParentalRating"),
+                        name: globalize.translate("OptionParentalRating"),
                         id: "OfficialRating,SortName"
                     }, {
-                        name: Globalize.translate("OptionPlayCount"),
+                        name: globalize.translate("OptionPlayCount"),
                         id: "PlayCount,SortName"
                     }, {
-                        name: Globalize.translate("OptionReleaseDate"),
+                        name: globalize.translate("OptionReleaseDate"),
                         id: "PremiereDate,SortName"
                     }],
                     callback: function () {

src/controllers/music/musicalbums.js

@@ -1,4 +1,4 @@
-define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser", "imageLoader", "alphaPicker", "listView", "cardBuilder", "userSettings", "emby-itemscontainer"], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings) {
+define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser", "imageLoader", "alphaPicker", "listView", "cardBuilder", "userSettings", "globalize", "emby-itemscontainer"], function (layoutManager, playbackManager, loading, events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder, userSettings, globalize) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -230,25 +230,25 @@ define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser
             tabContent.querySelector(".btnSort").addEventListener("click", function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{
-                        name: Globalize.translate("OptionNameSort"),
+                        name: globalize.translate("OptionNameSort"),
                         id: "SortName"
                     }, {
-                        name: Globalize.translate("OptionAlbumArtist"),
+                        name: globalize.translate("OptionAlbumArtist"),
                         id: "AlbumArtist,SortName"
                     }, {
-                        name: Globalize.translate("OptionCommunityRating"),
+                        name: globalize.translate("OptionCommunityRating"),
                         id: "CommunityRating,SortName"
                     }, {
-                        name: Globalize.translate("OptionCriticRating"),
+                        name: globalize.translate("OptionCriticRating"),
                         id: "CriticRating,SortName"
                     }, {
-                        name: Globalize.translate("OptionDateAdded"),
+                        name: globalize.translate("OptionDateAdded"),
                         id: "DateCreated,SortName"
                     }, {
-                        name: Globalize.translate("OptionReleaseDate"),
+                        name: globalize.translate("OptionReleaseDate"),
                         id: "ProductionYear,PremiereDate,SortName"
                     }, {
-                        name: Globalize.translate("OptionRandom"),
+                        name: globalize.translate("OptionRandom"),
                         id: "Random,SortName"
                     }],
                     callback: function () {

src/controllers/music/musicrecommended.js

@@ -1,4 +1,4 @@
-define(["browser", "layoutManager", "userSettings", "inputManager", "loading", "cardBuilder", "dom", "apphost", "imageLoader", "libraryMenu", "playbackManager", "mainTabsManager", "scrollStyles", "emby-itemscontainer", "emby-tabs", "emby-button", "flexStyles"], function (browser, layoutManager, userSettings, inputManager, loading, cardBuilder, dom, appHost, imageLoader, libraryMenu, playbackManager, mainTabsManager) {
+define(["browser", "layoutManager", "userSettings", "inputManager", "loading", "cardBuilder", "dom", "apphost", "imageLoader", "libraryMenu", "playbackManager", "mainTabsManager", "globalize", "scrollStyles", "emby-itemscontainer", "emby-tabs", "emby-button", "flexStyles"], function (browser, layoutManager, userSettings, inputManager, loading, cardBuilder, dom, appHost, imageLoader, libraryMenu, playbackManager, mainTabsManager, globalize) {
     "use strict";
 
     function itemsPerRow() {
@@ -167,21 +167,21 @@ define(["browser", "layoutManager", "userSettings", "inputManager", "loading", "
 
     function getTabs() {
         return [{
-            name: Globalize.translate("TabSuggestions")
+            name: globalize.translate("TabSuggestions")
         }, {
-            name: Globalize.translate("TabAlbums")
+            name: globalize.translate("TabAlbums")
         }, {
-            name: Globalize.translate("TabAlbumArtists")
+            name: globalize.translate("TabAlbumArtists")
         }, {
-            name: Globalize.translate("TabArtists")
+            name: globalize.translate("TabArtists")
         }, {
-            name: Globalize.translate("TabPlaylists")
+            name: globalize.translate("TabPlaylists")
         }, {
-            name: Globalize.translate("TabSongs")
+            name: globalize.translate("TabSongs")
         }, {
-            name: Globalize.translate("TabGenres")
+            name: globalize.translate("TabGenres")
         }, {
-            name: Globalize.translate("ButtonSearch"),
+            name: globalize.translate("ButtonSearch"),
             cssClass: "searchTabButton"
         }];
     }
@@ -388,8 +388,8 @@ define(["browser", "layoutManager", "userSettings", "inputManager", "loading", "
                         libraryMenu.setTitle(item.Name);
                     });
                 } else {
-                    view.setAttribute("data-title", Globalize.translate("TabMusic"));
-                    libraryMenu.setTitle(Globalize.translate("TabMusic"));
+                    view.setAttribute("data-title", globalize.translate("TabMusic"));
+                    libraryMenu.setTitle(globalize.translate("TabMusic"));
                 }
             }
 

src/controllers/music/songs.js

@@ -1,4 +1,4 @@
-define(["events", "libraryBrowser", "imageLoader", "listView", "loading", "userSettings", "emby-itemscontainer"], function (events, libraryBrowser, imageLoader, listView, loading, userSettings) {
+define(["events", "libraryBrowser", "imageLoader", "listView", "loading", "userSettings", "globalize", "emby-itemscontainer"], function (events, libraryBrowser, imageLoader, listView, loading, userSettings, globalize) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -149,31 +149,31 @@ define(["events", "libraryBrowser", "imageLoader", "listView", "loading", "userS
             tabContent.querySelector(".btnSort").addEventListener("click", function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{
-                        name: Globalize.translate("OptionTrackName"),
+                        name: globalize.translate("OptionTrackName"),
                         id: "Name"
                     }, {
-                        name: Globalize.translate("OptionAlbum"),
+                        name: globalize.translate("OptionAlbum"),
                         id: "Album,SortName"
                     }, {
-                        name: Globalize.translate("OptionAlbumArtist"),
+                        name: globalize.translate("OptionAlbumArtist"),
                         id: "AlbumArtist,Album,SortName"
                     }, {
-                        name: Globalize.translate("OptionArtist"),
+                        name: globalize.translate("OptionArtist"),
                         id: "Artist,Album,SortName"
                     }, {
-                        name: Globalize.translate("OptionDateAdded"),
+                        name: globalize.translate("OptionDateAdded"),
                         id: "DateCreated,SortName"
                     }, {
-                        name: Globalize.translate("OptionDatePlayed"),
+                        name: globalize.translate("OptionDatePlayed"),
                         id: "DatePlayed,SortName"
                     }, {
-                        name: Globalize.translate("OptionPlayCount"),
+                        name: globalize.translate("OptionPlayCount"),
                         id: "PlayCount,SortName"
                     }, {
-                        name: Globalize.translate("OptionReleaseDate"),
+                        name: globalize.translate("OptionReleaseDate"),
                         id: "PremiereDate,AlbumArtist,Album,SortName"
                     }, {
-                        name: Globalize.translate("OptionRuntime"),
+                        name: globalize.translate("OptionRuntime"),
                         id: "Runtime,AlbumArtist,Album,SortName"
                     }],
                     callback: function () {

src/controllers/playback/videoosd.js

@@ -45,23 +45,6 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
         return null;
     }
 
-    function logoImageUrl(item, apiClient, options) {
-        options = options || {};
-        options.type = "Logo";
-
-        if (item.ImageTags && item.ImageTags.Logo) {
-            options.tag = item.ImageTags.Logo;
-            return apiClient.getScaledImageUrl(item.Id, options);
-        }
-
-        if (item.ParentLogoImageTag) {
-            options.tag = item.ParentLogoImageTag;
-            return apiClient.getScaledImageUrl(item.ParentLogoItemId, options);
-        }
-
-        return null;
-    }
-
     return function (view, params) {
         function onVerticalSwipe(e, elem, data) {
             var player = currentPlayer;
@@ -309,18 +292,7 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
         }
 
         function setTitle(item, parentName) {
-            var url = logoImageUrl(item, connectionManager.getApiClient(item.ServerId), {});
-
-            if (url) {
-                Emby.Page.setTitle("");
-                var pageTitle = document.querySelector(".pageTitle");
-                pageTitle.style.backgroundImage = "url('" + url + "')";
-                pageTitle.classList.add("pageTitleWithLogo");
-                pageTitle.classList.remove("pageTitleWithDefaultLogo");
-                pageTitle.innerHTML = "";
-            } else {
-                Emby.Page.setTitle(parentName || "");
-            }
+            Emby.Page.setTitle(parentName || '');
 
             var documentTitle = parentName || (item ? item.Name : null);
 
@@ -1272,7 +1244,6 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
         var programEndDateMs = 0;
         var playbackStartTimeTicks = 0;
         var subtitleSyncOverlay;
-        var volumeSliderTimer;
         var nowPlayingVolumeSlider = view.querySelector(".osdVolumeSlider");
         var nowPlayingVolumeSliderContainer = view.querySelector(".osdVolumeSliderContainer");
         var nowPlayingPositionSlider = view.querySelector(".osdPositionSlider");
@@ -1423,27 +1394,15 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
         }
 
         function setVolume() {
-            clearTimeout(volumeSliderTimer);
-            volumeSliderTimer = null;
-
             playbackManager.setVolume(this.value, currentPlayer);
         }
 
-        function setVolumeDelayed() {
-            if (!volumeSliderTimer) {
-                var that = this;
-                volumeSliderTimer = setTimeout(function () {
-                    setVolume.call(that);
-                }, 700);
-            }
-        }
-
         view.querySelector(".buttonMute").addEventListener("click", function () {
             playbackManager.toggleMute(currentPlayer);
         });
         nowPlayingVolumeSlider.addEventListener("change", setVolume);
-        nowPlayingVolumeSlider.addEventListener("mousemove", setVolumeDelayed);
-        nowPlayingVolumeSlider.addEventListener("touchmove", setVolumeDelayed);
+        nowPlayingVolumeSlider.addEventListener("mousemove", setVolume);
+        nowPlayingVolumeSlider.addEventListener("touchmove", setVolume);
 
         nowPlayingPositionSlider.addEventListener("change", function () {
             var player = currentPlayer;

src/controllers/shows/episodes.js

@@ -1,4 +1,4 @@
-define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "userSettings", "emby-itemscontainer"], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings) {
+define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "userSettings", "globalize", "emby-itemscontainer"], function (loading, events, libraryBrowser, imageLoader, listView, cardBuilder, userSettings, globalize) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -188,28 +188,28 @@ define(["loading", "events", "libraryBrowser", "imageLoader", "listView", "cardB
             tabContent.querySelector(".btnSort").addEventListener("click", function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{
-                        name: Globalize.translate("OptionNameSort"),
+                        name: globalize.translate("OptionNameSort"),
                         id: "SeriesSortName,SortName"
                     }, {
-                        name: Globalize.translate("OptionTvdbRating"),
+                        name: globalize.translate("OptionTvdbRating"),
                         id: "CommunityRating,SeriesSortName,SortName"
                     }, {
-                        name: Globalize.translate("OptionDateAdded"),
+                        name: globalize.translate("OptionDateAdded"),
                         id: "DateCreated,SeriesSortName,SortName"
                     }, {
-                        name: Globalize.translate("OptionPremiereDate"),
+                        name: globalize.translate("OptionPremiereDate"),
                         id: "PremiereDate,SeriesSortName,SortName"
                     }, {
-                        name: Globalize.translate("OptionDatePlayed"),
+                        name: globalize.translate("OptionDatePlayed"),
                         id: "DatePlayed,SeriesSortName,SortName"
                     }, {
-                        name: Globalize.translate("OptionParentalRating"),
+                        name: globalize.translate("OptionParentalRating"),
                         id: "OfficialRating,SeriesSortName,SortName"
                     }, {
-                        name: Globalize.translate("OptionPlayCount"),
+                        name: globalize.translate("OptionPlayCount"),
                         id: "PlayCount,SeriesSortName,SortName"
                     }, {
-                        name: Globalize.translate("OptionRuntime"),
+                        name: globalize.translate("OptionRuntime"),
                         id: "Runtime,SeriesSortName,SortName"
                     }],
                     callback: function () {

src/controllers/shows/tvgenres.js

@@ -113,6 +113,9 @@ define(["layoutManager", "loading", "libraryBrowser", "cardBuilder", "lazyLoader
                         itemsContainer: elem,
                         shape: getPortraitShape(),
                         scalable: true,
+                        showTitle: true,
+                        centerText: true,
+                        showYear: true,
                         overlayMoreButton: true,
                         allowBottomPadding: false
                     });

src/controllers/shows/tvrecommended.js

@@ -1,23 +1,23 @@
-define(["events", "inputManager", "libraryMenu", "layoutManager", "loading", "dom", "userSettings", "cardBuilder", "playbackManager", "mainTabsManager", "scrollStyles", "emby-itemscontainer", "emby-button"], function (events, inputManager, libraryMenu, layoutManager, loading, dom, userSettings, cardBuilder, playbackManager, mainTabsManager) {
+define(["events", "inputManager", "libraryMenu", "layoutManager", "loading", "dom", "userSettings", "cardBuilder", "playbackManager", "mainTabsManager", "globalize", "scrollStyles", "emby-itemscontainer", "emby-button"], function (events, inputManager, libraryMenu, layoutManager, loading, dom, userSettings, cardBuilder, playbackManager, mainTabsManager, globalize) {
     "use strict";
 
     function getTabs() {
         return [{
-            name: Globalize.translate("TabShows")
+            name: globalize.translate("TabShows")
         }, {
-            name: Globalize.translate("TabSuggestions")
+            name: globalize.translate("TabSuggestions")
         }, {
-            name: Globalize.translate("TabLatest")
+            name: globalize.translate("TabLatest")
         }, {
-            name: Globalize.translate("TabUpcoming")
+            name: globalize.translate("TabUpcoming")
         }, {
-            name: Globalize.translate("TabGenres")
+            name: globalize.translate("TabGenres")
         }, {
-            name: Globalize.translate("TabNetworks")
+            name: globalize.translate("TabNetworks")
         }, {
-            name: Globalize.translate("TabEpisodes")
+            name: globalize.translate("TabEpisodes")
         }, {
-            name: Globalize.translate("ButtonSearch"),
+            name: globalize.translate("ButtonSearch"),
             cssClass: "searchTabButton"
         }];
     }
@@ -314,8 +314,8 @@ define(["events", "inputManager", "libraryMenu", "layoutManager", "loading", "do
                         libraryMenu.setTitle(item.Name);
                     });
                 } else {
-                    view.setAttribute("data-title", Globalize.translate("TabShows"));
-                    libraryMenu.setTitle(Globalize.translate("TabShows"));
+                    view.setAttribute("data-title", globalize.translate("TabShows"));
+                    libraryMenu.setTitle(globalize.translate("TabShows"));
                 }
             }
 

src/controllers/shows/tvshows.js

@@ -1,4 +1,4 @@
-define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "alphaPicker", "userSettings", "emby-itemscontainer"], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, alphaPicker, userSettings) {
+define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "listView", "cardBuilder", "alphaPicker", "userSettings", "globalize", "emby-itemscontainer"], function (layoutManager, loading, events, libraryBrowser, imageLoader, listView, cardBuilder, alphaPicker, userSettings, globalize) {
     "use strict";
 
     return function (view, params, tabContent) {
@@ -241,22 +241,22 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
             tabContent.querySelector(".btnSort").addEventListener("click", function (e) {
                 libraryBrowser.showSortMenu({
                     items: [{
-                        name: Globalize.translate("OptionNameSort"),
+                        name: globalize.translate("OptionNameSort"),
                         id: "SortName"
                     }, {
-                        name: Globalize.translate("OptionImdbRating"),
+                        name: globalize.translate("OptionImdbRating"),
                         id: "CommunityRating,SortName"
                     }, {
-                        name: Globalize.translate("OptionDateAdded"),
+                        name: globalize.translate("OptionDateAdded"),
                         id: "DateCreated,SortName"
                     }, {
-                        name: Globalize.translate("OptionDatePlayed"),
+                        name: globalize.translate("OptionDatePlayed"),
                         id: "DatePlayed,SortName"
                     }, {
-                        name: Globalize.translate("OptionParentalRating"),
+                        name: globalize.translate("OptionParentalRating"),
                         id: "OfficialRating,SortName"
                     }, {
-                        name: Globalize.translate("OptionReleaseDate"),
+                        name: globalize.translate("OptionReleaseDate"),
                         id: "PremiereDate,SortName"
                     }],
                     callback: function () {

src/controllers/shows/tvupcoming.js

@@ -1,4 +1,4 @@
-define(["layoutManager", "loading", "datetime", "libraryBrowser", "cardBuilder", "apphost", "imageLoader", "scrollStyles", "emby-itemscontainer"], function (layoutManager, loading, datetime, libraryBrowser, cardBuilder, appHost, imageLoader) {
+define(["layoutManager", "loading", "datetime", "libraryBrowser", "cardBuilder", "apphost", "imageLoader", "globalize", "scrollStyles", "emby-itemscontainer"], function (layoutManager, loading, datetime, libraryBrowser, cardBuilder, appHost, imageLoader, globalize) {
     "use strict";
 
     function getUpcomingPromise(context, params) {
@@ -52,7 +52,7 @@ define(["layoutManager", "loading", "datetime", "libraryBrowser", "cardBuilder",
             if (item.PremiereDate) {
                 try {
                     var premiereDate = datetime.parseISO8601Date(item.PremiereDate, true);
-                    dateText = datetime.isRelativeDay(premiereDate, -1) ? Globalize.translate("Yesterday") : datetime.toLocaleDateString(premiereDate, {
+                    dateText = datetime.isRelativeDay(premiereDate, -1) ? globalize.translate("Yesterday") : datetime.toLocaleDateString(premiereDate, {
                         weekday: "long",
                         month: "short",
                         day: "numeric"

src/controllers/user/profile.js

@@ -1,4 +1,4 @@
-define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "emby-button"], function (UserPasswordPage, loading, libraryMenu, appHost) {
+define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "globalize", "emby-button"], function (UserPasswordPage, loading, libraryMenu, appHost, globalize) {
     "use strict";
 
     function reloadUser(page) {
@@ -37,7 +37,7 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
         switch (evt.target.error.code) {
             case evt.target.error.NOT_FOUND_ERR:
                 require(["toast"], function (toast) {
-                    toast(Globalize.translate("FileNotFound"));
+                    toast(globalize.translate("FileNotFound"));
                 });
                 break;
             case evt.target.error.ABORT_ERR:
@@ -46,7 +46,7 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
             case evt.target.error.NOT_READABLE_ERR:
             default:
                 require(["toast"], function (toast) {
-                    toast(Globalize.translate("FileReadError"));
+                    toast(globalize.translate("FileReadError"));
                 });
         }
     }
@@ -54,7 +54,7 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
     function onFileReaderAbort(evt) {
         loading.hide();
         require(["toast"], function (toast) {
-            toast(Globalize.translate("FileReadCancelled"));
+            toast(globalize.translate("FileReadCancelled"));
         });
     }
 
@@ -86,7 +86,7 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
         new UserPasswordPage(view, params);
         view.querySelector("#btnDeleteImage").addEventListener("click", function () {
             require(["confirm"], function (confirm) {
-                confirm(Globalize.translate("DeleteImageConfirmation"), Globalize.translate("DeleteImage")).then(function () {
+                confirm(globalize.translate("DeleteImageConfirmation"), globalize.translate("DeleteImage")).then(function () {
                     loading.show();
                     var userId = getParameterByName("userId");
                     ApiClient.deleteUserImage(userId, "primary").then(function () {

src/controllers/useredit.js

@@ -1,4 +1,4 @@
-define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading, libraryMenu) {
+define(["jQuery", "loading", "libraryMenu", "globalize", "fnchecked"], function ($, loading, libraryMenu, globalize) {
     "use strict";
 
     function loadDeleteFolders(page, user, mediaFolders) {
@@ -112,7 +112,7 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading,
         loading.hide();
 
         require(["toast"], function (toast) {
-            toast(Globalize.translate("SettingsSaved"));
+            toast(globalize.translate("SettingsSaved"));
         });
     }
 
@@ -176,7 +176,7 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading,
     var currentUser;
     $(document).on("pageinit", "#editUserPage", function () {
         $(".editUserProfileForm").off("submit", onSubmit).on("submit", onSubmit);
-        this.querySelector(".sharingHelp").innerHTML = Globalize.translate("OptionAllowLinkSharingHelp", 30);
+        this.querySelector(".sharingHelp").innerHTML = globalize.translate("OptionAllowLinkSharingHelp", 30);
         var page = this;
         $("#chkEnableDeleteAllFolders", this).on("change", function () {
             if (this.checked) {

src/controllers/userlibraryaccess.js

@@ -1,4 +1,4 @@
-define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading, libraryMenu) {
+define(["jQuery", "loading", "libraryMenu", "globalize", "fnchecked"], function ($, loading, libraryMenu, globalize) {
     "use strict";
 
     function triggerChange(select) {
@@ -9,7 +9,7 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading,
 
     function loadMediaFolders(page, user, mediaFolders) {
         var html = "";
-        html += '<h3 class="checkboxListLabel">' + Globalize.translate("HeaderLibraries") + "</h3>";
+        html += '<h3 class="checkboxListLabel">' + globalize.translate("HeaderLibraries") + "</h3>";
         html += '<div class="checkboxList paperList checkboxList-paperList">';
 
         for (var i = 0, length = mediaFolders.length; i < length; i++) {
@@ -28,7 +28,7 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading,
 
     function loadChannels(page, user, channels) {
         var html = "";
-        html += '<h3 class="checkboxListLabel">' + Globalize.translate("HeaderChannels") + "</h3>";
+        html += '<h3 class="checkboxListLabel">' + globalize.translate("HeaderChannels") + "</h3>";
         html += '<div class="checkboxList paperList checkboxList-paperList">';
 
         for (var i = 0, length = channels.length; i < length; i++) {
@@ -52,7 +52,7 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading,
 
     function loadDevices(page, user, devices) {
         var html = "";
-        html += '<h3 class="checkboxListLabel">' + Globalize.translate("HeaderDevices") + "</h3>";
+        html += '<h3 class="checkboxListLabel">' + globalize.translate("HeaderDevices") + "</h3>";
         html += '<div class="checkboxList paperList checkboxList-paperList">';
 
         for (var i = 0, length = devices.length; i < length; i++) {
@@ -85,7 +85,7 @@ define(["jQuery", "loading", "libraryMenu", "fnchecked"], function ($, loading,
         loading.hide();
 
         require(["toast"], function (toast) {
-            toast(Globalize.translate("SettingsSaved"));
+            toast(globalize.translate("SettingsSaved"));
         });
     }
 

src/controllers/usernew.js

@@ -1,9 +1,9 @@
-define(["jQuery", "loading", "fnchecked", "emby-checkbox"], function ($, loading) {
+define(["jQuery", "loading", "globalize", "fnchecked", "emby-checkbox"], function ($, loading, globalize) {
     "use strict";
 
     function loadMediaFolders(page, mediaFolders) {
         var html = "";
-        html += '<h3 class="checkboxListLabel">' + Globalize.translate("HeaderLibraries") + "</h3>";
+        html += '<h3 class="checkboxListLabel">' + globalize.translate("HeaderLibraries") + "</h3>";
         html += '<div class="checkboxList paperList" style="padding:.5em 1em;">';
 
         for (var i = 0; i < mediaFolders.length; i++) {
@@ -18,7 +18,7 @@ define(["jQuery", "loading", "fnchecked", "emby-checkbox"], function ($, loading
 
     function loadChannels(page, channels) {
         var html = "";
-        html += '<h3 class="checkboxListLabel">' + Globalize.translate("HeaderChannels") + "</h3>";
+        html += '<h3 class="checkboxListLabel">' + globalize.translate("HeaderChannels") + "</h3>";
         html += '<div class="checkboxList paperList" style="padding:.5em 1em;">';
 
         for (var i = 0; i < channels.length; i++) {
@@ -85,7 +85,7 @@ define(["jQuery", "loading", "fnchecked", "emby-checkbox"], function ($, loading
             });
         }, function (response) {
             require(["toast"], function (toast) {
-                toast(Globalize.translate("DefaultErrorMessage"));
+                toast(globalize.translate("DefaultErrorMessage"));
             });
 
             loading.hide();

src/controllers/userparentalcontrol.js

@@ -1,4 +1,4 @@
-define(["jQuery", "datetime", "loading", "libraryMenu", "listViewStyle", "paper-icon-button-light"], function ($, datetime, loading, libraryMenu) {
+define(["jQuery", "datetime", "loading", "libraryMenu", "globalize", "listViewStyle", "paper-icon-button-light"], function ($, datetime, loading, libraryMenu, globalize) {
     "use strict";
 
     function populateRatings(allParentalRatings, page) {
@@ -35,29 +35,29 @@ define(["jQuery", "datetime", "loading", "libraryMenu", "listViewStyle", "paper-
 
     function loadUnratedItems(page, user) {
         var items = [{
-            name: Globalize.translate("OptionBlockBooks"),
+            name: globalize.translate("OptionBlockBooks"),
             value: "Book"
         }, {
-            name: Globalize.translate("OptionBlockChannelContent"),
+            name: globalize.translate("OptionBlockChannelContent"),
             value: "ChannelContent"
         }, {
-            name: Globalize.translate("OptionBlockLiveTvChannels"),
+            name: globalize.translate("OptionBlockLiveTvChannels"),
             value: "LiveTvChannel"
         }, {
-            name: Globalize.translate("OptionBlockMovies"),
+            name: globalize.translate("OptionBlockMovies"),
             value: "Movie"
         }, {
-            name: Globalize.translate("OptionBlockMusic"),
+            name: globalize.translate("OptionBlockMusic"),
             value: "Music"
         }, {
-            name: Globalize.translate("OptionBlockTrailers"),
+            name: globalize.translate("OptionBlockTrailers"),
             value: "Trailer"
         }, {
-            name: Globalize.translate("OptionBlockTvShows"),
+            name: globalize.translate("OptionBlockTvShows"),
             value: "Series"
         }];
         var html = "";
-        html += '<h3 class="checkboxListLabel">' + Globalize.translate("HeaderBlockItemsWithNoRating") + "</h3>";
+        html += '<h3 class="checkboxListLabel">' + globalize.translate("HeaderBlockItemsWithNoRating") + "</h3>";
         html += '<div class="checkboxList paperList checkboxList-paperList">';
 
         for (var i = 0, length = items.length; i < length; i++) {
@@ -139,7 +139,7 @@ define(["jQuery", "datetime", "loading", "libraryMenu", "listViewStyle", "paper-
             itemHtml += '<div class="liSchedule listItem" data-day="' + a.DayOfWeek + '" data-start="' + a.StartHour + '" data-end="' + a.EndHour + '">';
             itemHtml += '<div class="listItemBody two-line">';
             itemHtml += '<h3 class="listItemBodyText">';
-            itemHtml += Globalize.translate("Option" + a.DayOfWeek);
+            itemHtml += globalize.translate("Option" + a.DayOfWeek);
             itemHtml += "</h3>";
             itemHtml += '<div class="listItemBodyText secondary">' + getDisplayTime(a.StartHour) + " - " + getDisplayTime(a.EndHour) + "</div>";
             itemHtml += "</div>";
@@ -159,7 +159,7 @@ define(["jQuery", "datetime", "loading", "libraryMenu", "listViewStyle", "paper-
         loading.hide();
 
         require(["toast"], function (toast) {
-            toast(Globalize.translate("SettingsSaved"));
+            toast(globalize.translate("SettingsSaved"));
         });
     }
 
@@ -226,7 +226,7 @@ define(["jQuery", "datetime", "loading", "libraryMenu", "listViewStyle", "paper-
     function showBlockedTagPopup(page) {
         require(["prompt"], function (prompt) {
             prompt({
-                label: Globalize.translate("LabelTag")
+                label: globalize.translate("LabelTag")
             }).then(function (value) {
                 var tags = getBlockedTagsFromPage(page);
 

src/controllers/userpasswordpage.js

@@ -1,4 +1,4 @@
-define(["loading", "libraryMenu", "emby-button"], function (loading, libraryMenu) {
+define(["loading", "libraryMenu", "globalize", "emby-button"], function (loading, libraryMenu, globalize) {
     "use strict";
 
     function loadUser(page, params) {
@@ -79,7 +79,7 @@ define(["loading", "libraryMenu", "emby-button"], function (loading, libraryMenu
                     loading.hide();
 
                     require(["toast"], function (toast) {
-                        toast(Globalize.translate("MessageSettingsSaved"));
+                        toast(globalize.translate("MessageSettingsSaved"));
                     });
 
                     loadUser(view, params);
@@ -102,15 +102,15 @@ define(["loading", "libraryMenu", "emby-button"], function (loading, libraryMenu
                 loading.hide();
 
                 require(["toast"], function (toast) {
-                    toast(Globalize.translate("PasswordSaved"));
+                    toast(globalize.translate("PasswordSaved"));
                 });
 
                 loadUser(view, params);
             }, function () {
                 loading.hide();
                 Dashboard.alert({
-                    title: Globalize.translate("HeaderLoginFailure"),
-                    message: Globalize.translate("MessageInvalidUser")
+                    title: globalize.translate("HeaderLoginFailure"),
+                    message: globalize.translate("MessageInvalidUser")
                 });
             });
         }
@@ -120,7 +120,7 @@ define(["loading", "libraryMenu", "emby-button"], function (loading, libraryMenu
 
             if (form.querySelector("#txtNewPassword").value != form.querySelector("#txtNewPasswordConfirm").value) {
                 require(["toast"], function (toast) {
-                    toast(Globalize.translate("PasswordMatchError"));
+                    toast(globalize.translate("PasswordMatchError"));
                 });
             } else {
                 loading.show();
@@ -139,17 +139,17 @@ define(["loading", "libraryMenu", "emby-button"], function (loading, libraryMenu
         }
 
         function resetPassword() {
-            var msg = Globalize.translate("PasswordResetConfirmation");
+            var msg = globalize.translate("PasswordResetConfirmation");
 
             require(["confirm"], function (confirm) {
-                confirm(msg, Globalize.translate("PasswordResetHeader")).then(function () {
+                confirm(msg, globalize.translate("PasswordResetHeader")).then(function () {
                     var userId = params.userId;
                     loading.show();
                     ApiClient.resetUserPassword(userId).then(function () {
                         loading.hide();
                         Dashboard.alert({
-                            message: Globalize.translate("PasswordResetComplete"),
-                            title: Globalize.translate("PasswordResetHeader")
+                            message: globalize.translate("PasswordResetComplete"),
+                            title: globalize.translate("PasswordResetHeader")
                         });
                         loadUser(view, params);
                     });
@@ -158,17 +158,17 @@ define(["loading", "libraryMenu", "emby-button"], function (loading, libraryMenu
         }
 
         function resetEasyPassword() {
-            var msg = Globalize.translate("PinCodeResetConfirmation");
+            var msg = globalize.translate("PinCodeResetConfirmation");
 
             require(["confirm"], function (confirm) {
-                confirm(msg, Globalize.translate("HeaderPinCodeReset")).then(function () {
+                confirm(msg, globalize.translate("HeaderPinCodeReset")).then(function () {
                     var userId = params.userId;
                     loading.show();
                     ApiClient.resetEasyPassword(userId).then(function () {
                         loading.hide();
                         Dashboard.alert({
-                            message: Globalize.translate("PinCodeResetComplete"),
-                            title: Globalize.translate("HeaderPinCodeReset")
+                            message: globalize.translate("PinCodeResetComplete"),
+                            title: globalize.translate("HeaderPinCodeReset")
                         });
                         loadUser(view, params);
                     });

src/controllers/wizard/user.js

@@ -33,7 +33,7 @@ define(["loading", "globalize", "dashboardcss", "emby-input", "emby-button", "em
 
         if (form.querySelector("#txtManualPassword").value != form.querySelector("#txtPasswordConfirm").value) {
             require(["toast"], function (toast) {
-                toast(Globalize.translate("PasswordMatchError"));
+                toast(globalize.translate("PasswordMatchError"));
             });
         } else {
             submit(form);

src/elements/emby-button/emby-button.css

@@ -49,6 +49,7 @@
 
 .button-link {
     background: transparent;
+    cursor: pointer;
     margin: 0;
     padding: 0;
     vertical-align: initial;

src/elements/emby-scroller/emby-scroller.js

@@ -96,17 +96,6 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
         }
     }
 
-    function initHeadroom(elem) {
-        require(['headroom'], function (Headroom) {
-            var headroom = new Headroom([], {
-                scroller: elem
-            });
-
-            headroom.add(document.querySelector('.skinHeader'));
-            elem.headroom = headroom;
-        });
-    }
-
     ScrollerPrototype.attachedCallback = function () {
         if (this.getAttribute('data-navcommands')) {
             inputManager.on(this, onInputCommand);
@@ -120,8 +109,6 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
             slider.style['white-space'] = 'nowrap';
         }
 
-        var bindHeader = this.getAttribute('data-bindheader') === 'true';
-
         var scrollFrame = this;
         var enableScrollButtons = layoutManager.desktop && horizontal && this.getAttribute('data-scrollbuttons') !== 'false';
 
@@ -137,7 +124,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
             dragHandle: 1,
             autoImmediate: true,
             skipSlideToWhenVisible: this.getAttribute('data-skipfocuswhenvisible') === 'true',
-            dispatchScrollEvent: enableScrollButtons || bindHeader || this.getAttribute('data-scrollevent') === 'true',
+            dispatchScrollEvent: enableScrollButtons || this.getAttribute('data-scrollevent') === 'true',
             hideScrollbar: enableScrollButtons || this.getAttribute('data-hidescrollbar') === 'true',
             allowNativeSmoothScroll: this.getAttribute('data-allownativesmoothscroll') === 'true' && !enableScrollButtons,
             allowNativeScroll: !enableScrollButtons,
@@ -155,10 +142,6 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
             initCenterFocus(this, this.scroller);
         }
 
-        if (bindHeader && layoutManager.mobile) {
-            initHeadroom(this);
-        }
-
         if (enableScrollButtons) {
             loadScrollButtons(this);
         }

src/index.html

@@ -92,7 +92,7 @@
             left: 0;
             bottom: 0;
             z-index: 1;
-            width: 10px;
+            width: 0.8em;
         }
     </style>
 </head>

src/itemdetails.html

@@ -136,7 +136,7 @@
                             <div class="selectContainer selectAudioContainer hide trackSelectionFieldContainer flex-shrink-zero">
                                 <select is="emby-select" class="selectAudio detailTrackSelect" label=""></select>
                             </div>
-                            <div class="selectContainer selectSubtitlesContainer hide trackSelectionFieldContainer">
+                            <div class="selectContainer selectSubtitlesContainer hide trackSelectionFieldContainer flex-shrink-zero">
                                 <select is="emby-select" class="selectSubtitles detailTrackSelect" label=""></select>
                             </div>
                         </form>

src/libraries/apiclient/apiclientcore.js

@@ -1,6 +1,12 @@
 define(["events", "appStorage"], function(events, appStorage) {
     "use strict";
 
+    /** Report rate limits in ms for different events */
+    const reportRateLimits = {
+        "timeupdate": 10000,
+        "volumechange": 3000
+    };
+
     function redetectBitrate(instance) {
         stopBitrateDetection(instance), instance.accessToken() && !1 !== instance.enableAutomaticBitrateDetection && setTimeout(redetectBitrateInternal.bind(instance), 6e3)
     }
@@ -231,6 +237,11 @@ define(["events", "appStorage"], function(events, appStorage) {
         }
         return 0
     }
+
+    function cancelReportPlaybackProgressPromise(instance) {
+        if (typeof instance.reportPlaybackProgressCancel === "function") instance.reportPlaybackProgressCancel();
+    }
+
     ApiClient.prototype.appName = function() {
         return this._appName
     }, ApiClient.prototype.setRequestHeaders = function(headers) {
@@ -1417,6 +1428,7 @@ define(["events", "appStorage"], function(events, appStorage) {
     }, ApiClient.prototype.reportPlaybackStart = function(options) {
         if (!options) throw new Error("null options");
         this.lastPlaybackProgressReport = 0, this.lastPlaybackProgressReportTicks = null, stopBitrateDetection(this);
+        cancelReportPlaybackProgressPromise(this);
         var url = this.getUrl("Sessions/Playing");
         return this.ajax({
             type: "POST",
@@ -1426,25 +1438,74 @@ define(["events", "appStorage"], function(events, appStorage) {
         })
     }, ApiClient.prototype.reportPlaybackProgress = function(options) {
         if (!options) throw new Error("null options");
-        var newPositionTicks = options.PositionTicks;
-        if ("timeupdate" === (options.EventName || "timeupdate")) {
-            var now = (new Date).getTime(),
-                msSinceLastReport = now - (this.lastPlaybackProgressReport || 0);
-            if (msSinceLastReport <= 1e4) {
-                if (!newPositionTicks) return Promise.resolve();
-                var expectedReportTicks = 1e4 * msSinceLastReport + (this.lastPlaybackProgressReportTicks || 0);
-                if (Math.abs((newPositionTicks || 0) - expectedReportTicks) < 5e7) return Promise.resolve()
-            }
-            this.lastPlaybackProgressReport = now
-        } else this.lastPlaybackProgressReport = 0;
-        this.lastPlaybackProgressReportTicks = newPositionTicks;
-        var url = this.getUrl("Sessions/Playing/Progress");
-        return this.ajax({
-            type: "POST",
-            data: JSON.stringify(options),
-            contentType: "application/json",
-            url: url
-        })
+
+        const eventName = options.EventName || "timeupdate";
+        let reportRateLimitTime = reportRateLimits[eventName] || 0;
+
+        const now = (new Date).getTime();
+        const msSinceLastReport = now - (this.lastPlaybackProgressReport || 0);
+        const newPositionTicks = options.PositionTicks;
+
+        if (msSinceLastReport < reportRateLimitTime && eventName === "timeupdate" && newPositionTicks) {
+            const expectedReportTicks = 1e4 * msSinceLastReport + (this.lastPlaybackProgressReportTicks || 0);
+            if (Math.abs(newPositionTicks - expectedReportTicks) >= 5e7) reportRateLimitTime = 0;
+        }
+
+        if (reportRateLimitTime < (this.reportPlaybackProgressTimeout !== undefined ? this.reportPlaybackProgressTimeout : 1e6)) {
+            cancelReportPlaybackProgressPromise(this);
+        }
+
+        this.lastPlaybackProgressOptions = options;
+
+        if (this.reportPlaybackProgressPromise) return Promise.resolve();
+
+        let instance = this;
+        let promise;
+        let cancelled = false;
+
+        let resetPromise = function () {
+            if (instance.reportPlaybackProgressPromise !== promise) return;
+
+            delete instance.lastPlaybackProgressOptions;
+            delete instance.reportPlaybackProgressTimeout;
+            delete instance.reportPlaybackProgressPromise;
+            delete instance.reportPlaybackProgressCancel;
+        };
+
+        let sendReport = function (lastOptions) {
+            resetPromise();
+
+            if (!lastOptions) throw new Error("null options");
+
+            instance.lastPlaybackProgressReport = (new Date).getTime();
+            instance.lastPlaybackProgressReportTicks = lastOptions.PositionTicks;
+
+            const url = instance.getUrl("Sessions/Playing/Progress");
+            return instance.ajax({
+                type: "POST",
+                data: JSON.stringify(lastOptions),
+                contentType: "application/json",
+                url: url
+            });
+        };
+
+        let delay = Math.max(0, reportRateLimitTime - msSinceLastReport);
+
+        promise = new Promise((resolve, reject) => setTimeout(resolve, delay)).then(() => {
+            if (cancelled) return Promise.resolve();
+            return sendReport(instance.lastPlaybackProgressOptions);
+        }).finally(() => {
+            resetPromise();
+        });
+
+        this.reportPlaybackProgressTimeout = reportRateLimitTime;
+        this.reportPlaybackProgressPromise = promise;
+        this.reportPlaybackProgressCancel = function () {
+            cancelled = true;
+            resetPromise();
+        };
+
+        return promise;
     }, ApiClient.prototype.reportOfflineActions = function(actions) {
         if (!actions) throw new Error("null actions");
         var url = this.getUrl("Sync/OfflineActions");
@@ -1489,6 +1550,7 @@ define(["events", "appStorage"], function(events, appStorage) {
     }, ApiClient.prototype.reportPlaybackStopped = function(options) {
         if (!options) throw new Error("null options");
         this.lastPlaybackProgressReport = 0, this.lastPlaybackProgressReportTicks = null, redetectBitrate(this);
+        cancelReportPlaybackProgressPromise(this);
         var url = this.getUrl("Sessions/Playing/Stopped");
         return this.ajax({
             type: "POST",

src/nowplaying.html

@@ -1,57 +1,71 @@
-<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-title="-" style="padding:6em 0 0!important;">
+<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-title="-">
 
     <div class="remoteControlContent padded-left padded-right">
 
         <div class="nowPlayingInfoContainer">
             <div class="nowPlayingPageImageContainer"></div>
             <div class="nowPlayingInfoControls">
+            
+                <div class="flex">
 
-                <h2 class="nowPlayingPageTitle"></h2>
-
-                <div class="sliderContainer nowPlayingPositionSliderContainer">
-                    <input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" data-slider-keep-progress="true" />
+                    <div class="nowPlayingInfoContainerMedia">
+                        <h2 class="nowPlayingPageTitle"></h2>
+                        <div style="font-weight: bold;" class="nowPlayingSongName nowPlayingEpisode"></div>
+                        <div class="nowPlayingAlbum nowPlayingSeason"></div>
+                        <div class="nowPlayingArtist nowPlayingSerie"></div>
+                    </div>
+                    <div class="nowPlayingPageUserDataButtonsTitle"></div>
+                    
                 </div>
+                
+                <div class="sliderContainer flex">
+                    <div class="positionTime"></div>
+                        <div class="nowPlayingPositionSliderContainer">
+                            <input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" data-slider-keep-progress="true" />
+                        </div>
+                    <div class="runtime"></div>
+                </div>
+                
+                <div class="nowPlayingButtonsContainer focuscontainer-x">
+                
+                    <div class="nowPlayingInfoButtons">
+                    
+                        <button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
+                            <i class="material-icons replay_10"></i>
+                        </button>
+                        
+                        <button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
+                            <i class="material-icons skip_previous"></i>
+                        </button>
 
-                <div class="nowPlayingInfoButtons focuscontainer-x">
-                    <button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
-                        <i class="material-icons skip_previous"></i>
-                    </button>
+                        <button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize" title="${ButtonPause}">
+                            <i class="material-icons">pause</i>
+                        </button>
 
-                    <button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
-                        <i class="material-icons fast_rewind"></i>
-                    </button>
+                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnStop autoSize" title="${ButtonStop}">
+                            <i class="material-icons">stop</i>
+                        </button>
 
-                    <button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize" title="${ButtonPause}">
-                        <i class="material-icons">pause</i>
-                    </button>
-
-                    <button is="paper-icon-button-light" class="btnPlayStateCommand btnStop autoSize" title="${ButtonStop}">
-                        <i class="material-icons">stop</i>
-                    </button>
-
-                    <button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}">
-                        <i class="material-icons fast_forward"></i>
-                    </button>
-
-                    <button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
-                        <i class="material-icons skip_next"></i>
-                    </button>
-
-                    <button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
-                        <i class="material-icons">audiotrack</i>
-                    </button>
-
-                    <button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
-                        <i class="material-icons closed_caption"></i>
-                    </button>
-
-                    <div class="nowPlayingTime">
-                        <div class="positionTime"></div>
-                        <div style="margin: 0 .25em;">/</div>
-                        <div class="runtime"></div>
+                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
+                            <i class="material-icons skip_next"></i>
+                        </button>
+                        
+                        <button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}">
+                            <i class="material-icons forward_30"></i>
+                        </button>
+                    
                     </div>
 
                     <div class="nowPlayingSecondaryButtons">
+                    
+                        <button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
+                            <i class="material-icons">audiotrack</i>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
+                            <i class="material-icons closed_caption"></i>
+                        </button>
+                    
                         <div class="nowPlayingPageUserDataButtons"></div>
 
                         <button is="paper-icon-button-light" class="btnToggleFullscreen videoButton btnPlayStateCommand autoSize" title="${ButtonFullscreen}" data-command="ToggleFullscreen">
@@ -62,17 +76,11 @@
                             <i class="material-icons">repeat</i>
                         </button>
 
-                        <button is="paper-icon-button-light" class="buttonMute autoSize" title="${Mute}">
-                            <i class="xlargePaperIconButton material-icons"></i>
-                        </button>
-                        <div class="sliderContainer nowPlayingVolumeSliderContainer">
-                            <input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider" />
-                        </div>
                     </div>
                 </div>
             </div>
         </div>
-        <div>
+        <div class="remoteControlSection">
             <div class="navigationSection">
                 <div is="emby-collapse" title="${HeaderNavigation}">
                     <div class="collapseContent">
@@ -120,8 +128,6 @@
                     </div>
                 </div>
             </div>
-        </div>
-        <div>
             <div class="sendMessageSection">
                 <div is="emby-collapse" title="${HeaderSendMessage}">
                     <div class="collapseContent" style="text-align: left;">
@@ -155,21 +161,22 @@
                 </div>
             </div>
         </div>
-
-        <br />
-        <div class="playlistSection hide">
-            <div style="display: flex; align-items: center;margin:2em 0 1em">
-                <h2 style="margin:0;">${TabPlaylist}</h2>
-                <button is="paper-icon-button-light" class="btnSavePlaylist" title="${ButtonSave}" style="margin-left:1em;">
-                    <i class="material-icons">save</i>
+        <div class="playlistSection">
+            <div class="playlistSectionButton flex align-items-center justify-content-center">
+                <button id="togglePlaylist" is="paper-icon-button-light" class="btnTogglePlaylist" title="${ButtonTogglePlaylist}">
+                    <i class="material-icons queue_music"></i>   
+                </button>
+                <button is="paper-icon-button-light" class="btnSavePlaylist" title="${ButtonSave}">
+                    <i class="material-icons save"></i>  
                 </button>
             </div>
-            <div class="playlist itemsContainer vertical-list" is="emby-itemscontainer" data-dragreorder="true">
+            <div id="playlist" class="playlist itemsContainer vertical-list nowPlayingPlaylist hide" is="emby-itemscontainer" data-dragreorder="true"></div>
+            <div id="contextMenu" class="contextMenu itemsContainer vertical-list nowPlayingContextMenu hide" is="emby-itemscontainer">
+                <div class="listItem listItem-border contextMenuList contextMenuArtist">
+                </div>
+                <div class="listItem listItem-border contextMenuList contextMenuAlbum">
+                </div>
             </div>
         </div>
-        <br />
-        <br />
-        <br />
-        <br />
     </div>
 </div>

src/scripts/apploader.js

@@ -29,6 +29,16 @@
         );
     }
 
+    try {
+        Promise.resolve();
+    } catch (ex) {
+        // this checks for several cases actually, typical is
+        // Promise() being missing on some legacy browser, and a funky one
+        // is Promise() present but buggy on WebOS 2
+        window.Promise = undefined;
+        self.Promise = undefined;
+    }
+
     if (!self.Promise) {
         // Load Promise polyfill if they are not natively supported
         injectScriptElement(

src/scripts/browser.js

@@ -22,7 +22,7 @@ define([], function () {
             return true;
         }
 
-        if (userAgent.indexOf('webos') !== -1) {
+        if (userAgent.indexOf('web0s') !== -1) {
             return true;
         }
 
@@ -77,10 +77,10 @@ define([], function () {
             var camel = prop.replace(/-([a-z]|[0-9])/ig, function (all, letter) {
                 return (letter + '').toUpperCase();
             });
-            // Check if the property is supported
-            var support = (camel in el.style);
             // Create test element
             var el = document.createElement('div');
+            // Check if the property is supported
+            var support = (camel in el.style);
             // Assign the property and value to invoke
             // the CSS interpreter
             el.style.cssText = prop + ':' + value;

src/scripts/browserdeviceprofile.js

@@ -887,6 +887,16 @@ define(['browser'], function (browser) {
                 Method: 'External'
             });
         }
+        if (options.enableSsaRender) {
+            profile.SubtitleProfiles.push({
+                Format: 'ass',
+                Method: 'External'
+            });
+            profile.SubtitleProfiles.push({
+                Format: 'ssa',
+                Method: 'External'
+            });
+        }
 
         profile.ResponseProfiles = [];
         profile.ResponseProfiles.push({

src/scripts/dfnshelper.js

@@ -1,62 +1,62 @@
-import { ar, be, bg, ca, cs, da, de, el, enGB, enUS, es, faIR, fi, fr, frCA, he, hi, hr, hu, id, it, ja, kk, ko, lt, ms, nb,
-    nl, pl, ptBR, pt, ro, ru, sk, sl, sv, tr, uk, vi, zhCN, zhTW } from 'date-fns/locale';
-import globalize from 'globalize';
-
-const dateLocales = (locale) => ({
-    'ar': ar,
-    'be-by': be,
-    'bg-bg': bg,
-    'ca': ca,
-    'cs': cs,
-    'da': da,
-    'de': de,
-    'el': el,
-    'en-gb': enGB,
-    'en-us': enUS,
-    'es': es,
-    'es-ar': es,
-    'es-mx': es,
-    'fa': faIR,
-    'fi': fi,
-    'fr': fr,
-    'fr-ca': frCA,
-    'gsw': de,
-    'he': he,
-    'hi-in': hi,
-    'hr': hr,
-    'hu': hu,
-    'id': id,
-    'it': it,
-    'ja': ja,
-    'kk': kk,
-    'ko': ko,
-    'lt-lt': lt,
-    'ms': ms,
-    'nb': nb,
-    'nl': nl,
-    'pl': pl,
-    'pt-br': ptBR,
-    'pt-pt': pt,
-    'ro': ro,
-    'ru': ru,
-    'sk': sk,
-    'sl-si': sl,
-    'sv': sv,
-    'tr': tr,
-    'uk': uk,
-    'vi': vi,
-    'zh-cn': zhCN,
-    'zh-hk': zhCN,
-    'zh-tw': zhTW
-})[locale];
-
-export function getLocale() {
-    return dateLocales(globalize.getCurrentLocale()) || enUS;
-}
-
-export const localeWithSuffix = { addSuffix: true, locale: getLocale() };
-
-export default {
-    getLocale: getLocale,
-    localeWithSuffix: localeWithSuffix
-};
+import { ar, be, bg, ca, cs, da, de, el, enGB, enUS, es, faIR, fi, fr, frCA, he, hi, hr, hu, id, it, ja, kk, ko, lt, ms, nb,
+    nl, pl, ptBR, pt, ro, ru, sk, sl, sv, tr, uk, vi, zhCN, zhTW } from 'date-fns/locale';
+import globalize from 'globalize';
+
+const dateLocales = (locale) => ({
+    'ar': ar,
+    'be-by': be,
+    'bg-bg': bg,
+    'ca': ca,
+    'cs': cs,
+    'da': da,
+    'de': de,
+    'el': el,
+    'en-gb': enGB,
+    'en-us': enUS,
+    'es': es,
+    'es-ar': es,
+    'es-mx': es,
+    'fa': faIR,
+    'fi': fi,
+    'fr': fr,
+    'fr-ca': frCA,
+    'gsw': de,
+    'he': he,
+    'hi-in': hi,
+    'hr': hr,
+    'hu': hu,
+    'id': id,
+    'it': it,
+    'ja': ja,
+    'kk': kk,
+    'ko': ko,
+    'lt-lt': lt,
+    'ms': ms,
+    'nb': nb,
+    'nl': nl,
+    'pl': pl,
+    'pt-br': ptBR,
+    'pt-pt': pt,
+    'ro': ro,
+    'ru': ru,
+    'sk': sk,
+    'sl-si': sl,
+    'sv': sv,
+    'tr': tr,
+    'uk': uk,
+    'vi': vi,
+    'zh-cn': zhCN,
+    'zh-hk': zhCN,
+    'zh-tw': zhTW
+})[locale];
+
+export function getLocale() {
+    return dateLocales(globalize.getCurrentLocale()) || enUS;
+}
+
+export const localeWithSuffix = { addSuffix: true, locale: getLocale() };
+
+export default {
+    getLocale: getLocale,
+    localeWithSuffix: localeWithSuffix
+};

src/scripts/editorsidebar.js

@@ -1,4 +1,4 @@
-define(["datetime", "jQuery", "material-icons"], function (datetime, $) {
+define(["datetime", "jQuery", "globalize", "material-icons"], function (datetime, $, globalize) {
     "use strict";
 
     function getNode(item, folderState, selected) {
@@ -70,7 +70,7 @@ define(["datetime", "jQuery", "material-icons"], function (datetime, $) {
             var nodes = [];
             nodes.push({
                 id: "MediaFolders",
-                text: Globalize.translate("HeaderMediaFolders"),
+                text: globalize.translate("HeaderMediaFolders"),
                 state: {
                     opened: true
                 },
@@ -83,7 +83,7 @@ define(["datetime", "jQuery", "material-icons"], function (datetime, $) {
             if (result.TotalRecordCount) {
                 nodes.push({
                     id: "livetv",
-                    text: Globalize.translate("HeaderLiveTV"),
+                    text: globalize.translate("HeaderLiveTV"),
                     state: {
                         opened: false
                     },